diff --git a/.husky/pre-commit b/.husky/pre-commit
index 7253392..987fa1e 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+yarn run lint
+
 yarn run e2e
 
 yarn run cy
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2fbe163..67ac5e3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "html.suggest.angular1": false,
-  "html.suggest.ionic": false,
   "cSpell.words": [
     "execa",
     "testid"
@@ -20,5 +18,5 @@
       "url": "https://github.com/devops-example-org/frontend/pull/<num>"
     }
   ],
-  "cmake.configureOnOpen": false
+  "liquid.format.enable": true
 }
\ No newline at end of file
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 2caac18..48e6c97 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,3 +1,4 @@
+cloneConcurrency: 8
 nodeLinker: node-modules
 nmHoistingLimits: "none"
 
diff --git a/package.json b/package.json
index 0869f4b..e6e5ce3 100644
--- a/package.json
+++ b/package.json
@@ -32,24 +32,38 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@commitlint/config-lerna-scopes": "^17.4.2",
     "@cypress/browserify-preprocessor": "^3.0.2",
+    "@fluentui/react": "^8.106.7",
     "@manypkg/cli": "^0.20.0",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.11.0",
     "@microsoft/fast-foundation": "^2.47.1-0",
     "@microsoft/fast-web-utilities": "^6.0.0",
+    "@n8d/htwoo-core": "^1.3.0",
+    "@playwright/test": "^1.31.2",
     "@types/copyfiles": "^2.4.1",
-    "@types/is-ci": "^3",
+    "@types/is-ci": "^3.0.0",
+    "@types/jest": "^29.4.4",
+    "@types/node": "^18.15.3",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "app-settings-loader": "^2.0.8",
     "aurelia-binding": "^2.5.4",
     "aurelia-bootstrapper": "^2.4.0",
+    "aurelia-cli": "^3.0.1",
     "aurelia-dependency-injection": "^1.5.2",
     "aurelia-event-aggregator": "^1.0.3",
     "aurelia-framework": "^1.4.1",
     "aurelia-history-browser": "^1.4.0",
     "aurelia-hot-module-reload": "^0.3.0",
+    "aurelia-loader": "^1.0.2",
+    "aurelia-loader-nodejs": "^1.1.0",
     "aurelia-loader-webpack": "^2.2.5",
     "aurelia-logging": "^1.5.2",
     "aurelia-logging-console": "^1.1.1",
+    "aurelia-metadata": "^1.0.7",
     "aurelia-pal": "^1.8.2",
+    "aurelia-pal-nodejs": "^2.0.0",
     "aurelia-path": "^1.1.7",
     "aurelia-router": "^1.7.1",
     "aurelia-task-queue": "^1.3.3",
@@ -57,26 +71,55 @@
     "aurelia-templating-binding": "^1.6.0",
     "aurelia-templating-resources": "^1.14.3",
     "aurelia-templating-router": "^1.5.0",
+    "aurelia-testing": "^1.1.0",
     "aurelia-typed-observable-plugin": "^0.5.1",
     "aurelia-validation": "2.0.0-rc1",
     "aurelia-webpack-plugin": "^5.0.5",
+    "autoprefixer": "^10.4.14",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^7.6.0",
+    "copy-webpack-plugin": "^11.0.0",
     "copyfiles": "^2.4.1",
-    "cypress": "^12.7.0",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
+    "cypress": "^12.8.1",
     "cypress-visual-regression": "^2.1.1",
-    "execa": "^7.0.0",
+    "dot-env": "^0.0.1",
+    "dotenv-webpack": "^8.0.1",
+    "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "eslint": "^8.36.0",
+    "execa": "^7.1.1",
+    "expose-loader": "^4.1.0",
+    "gulp": "^4.0.2",
+    "gulp-eslint": "^6.0.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
+    "jest": "^29.5.0",
+    "jest-cli": "^29.5.0",
+    "jest-transform-stub": "^2.0.0",
+    "json-loader": "^0.5.7",
+    "mini-css-extract-plugin": "^2.7.4",
+    "minimatch": "^5.1.6",
     "office-ui-fabric-core": "^11.1.0",
-    "resolve-typescript-plugin": "^2.0.0",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.1.0",
+    "promise-polyfill": "^8.3.0",
+    "resolve-typescript-plugin": "^2.0.1",
+    "sass": "^1.59.3",
+    "sass-loader": "^13.2.0",
     "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "tree-kill": "^1.2.2",
+    "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
     "tslib": "^2.5.0",
     "turbo": "^1.8.3",
     "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.2",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.12.0"
   }
 }
diff --git a/packages/au1-app/package.json b/packages/au1-app/package.json
index 71638c6..eb1b5c1 100644
--- a/packages/au1-app/package.json
+++ b/packages/au1-app/package.json
@@ -7,53 +7,6 @@
     "url": "???"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@playwright/test": "^1.31.2",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.6",
-    "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "app-settings-loader": "^2.0.8",
-    "aurelia-cli": "^3.0.1",
-    "aurelia-loader-nodejs": "^1.1.0",
-    "aurelia-pal-nodejs": "^2.0.0",
-    "aurelia-testing": "^1.1.0",
-    "aurelia-webpack-plugin": "^5.0.5",
-    "autoprefixer": "^10.4.13",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
-    "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^8.35.0",
-    "expose-loader": "^4.0.0",
-    "gulp": "^4.0.2",
-    "gulp-eslint": "^6.0.0",
-    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^29.5.0",
-    "jest-cli": "^29.5.0",
-    "jest-transform-stub": "^2.0.0",
-    "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^2.7.2",
-    "minimatch": "^5.1.6",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "promise-polyfill": "^8.3.0",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
-    "tree-kill": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "ts-loader": "^9.4.2",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
-  },
   "browserslist": [
     "defaults"
   ],
@@ -74,10 +27,10 @@
     "node": ">=14.15.0"
   },
   "overrides": {
-    "chokidar": "^3.0.0",
+    "chokidar": "^3.5.3",
     "glob-stream": "^7.0.0",
-    "glob-parent": "^6.0.0",
-    "micromatch": "^4.0.0"
+    "glob-parent": "^6.0.2",
+    "micromatch": "^4.0.5"
   },
   "jest": {
     "testMatch": [
diff --git a/packages/au1-app/playwright.config.ts b/packages/au1-app/playwright.config.ts
index ffcf68e..3f9b9e8 100644
--- a/packages/au1-app/playwright.config.ts
+++ b/packages/au1-app/playwright.config.ts
@@ -99,8 +99,9 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'webpack serve --port 8081',
-    port: 8081,
+    command: 'webpack serve --port 8080',
+    port: 8080,
+    reuseExistingServer: true
   },
 };
 
diff --git a/packages/au1-app/src/app.html b/packages/au1-app/src/app.html
index e01dee8..98f3b4e 100644
--- a/packages/au1-app/src/app.html
+++ b/packages/au1-app/src/app.html
@@ -1,7 +1,13 @@
 <template>
+  <!-- <require from="office-ui-fabric-core/src/sass/Fabric.scss"></require> -->
+  <require from="./resources/sass/Fabric.scss"></require>
   <require from="office-ui-fabric-core/src/documentation/sass/docs.scss"></require>
-  <require from="office-ui-fabric-core/src/sass/Fabric.scss"></require>
   <require from="./resources/fabric.components.css"></require>
+  <require from="./resources/sass/mixins/_Grid.Mixins.scss"></require>
+  <require from="./resources/CommandButton.scss"></require>
+  <require from="./resources/CommandBar.scss"></require>
+  <require from="./resources/DetailsList.scss"></require>
+  <!-- <require from="./resources/Dropdown.scss"></require> -->
   <require from="./app.scss"></require>
 
   <h1>${message}</h1>
diff --git a/packages/au1-app/src/app.scss b/packages/au1-app/src/app.scss
index fdda38e..be61e3b 100644
--- a/packages/au1-app/src/app.scss
+++ b/packages/au1-app/src/app.scss
@@ -1,3 +1,12 @@
+@import "resources/styles/components/details-list/DetailsHeader.scss";
+@import "resources/styles/components/details-list/DetailsList.scss";
+@import "resources/styles/components/details-list/DetailsRow.scss";
+@import "resources/styles/components/details-list/DetailsRowCheck.scss";
+
+.SubmitButton {
+  margin-top: 20px;
+}
+
 .ms-Stack {
   display: flex;
   flex-direction: column;
@@ -9,43 +18,73 @@
   color: rgb(50, 49, 48);
 }
 
-.ms-FocusZone {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    width: auto;
-    height: auto;
-    box-sizing: border-box;
-    background-color: rgb(255, 255, 255);
-    color: rgb(50, 49, 48);
+.ms-Grid-row {
+  @include ms-Grid-row;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+  position: relative;
+  box-sizing: border-box;
 }
 
-.ms-OverflowSet {
-  position: relative;
+.ms-Grid-col {
+  @include ms-Grid-col;
   display: flex;
+  flex-direction: column;
   flex-wrap: nowrap;
-  flex-grow: 1;
-  align-items: stretch;
+  box-sizing: border-box;
 }
 
-ms-OverflowSetVertical {
+.ms-Grid {
+  @include ms-Grid;
+  display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  background-color: rgb(255, 255, 255);
+  color: rgb(50, 49, 48);
 }
 
-.ms-OverflowSet-item, .ms-OverflowSet-overflowButton {
-  flex-shrink: 0;
-  display: inherit;
-}
+// .ms-FocusZone {
+//     display: flex;
+//     flex-direction: column;
+//     flex-wrap: nowrap;
+//     width: auto;
+//     height: auto;
+//     box-sizing: border-box;
+//     background-color: rgb(255, 255, 255);
+//     color: rgb(50, 49, 48);
+// }
 
-.ms-Button--commandBar{ 
-  min-width: 40px;
-  background-color: white;
-  color: rgb(50, 49, 48);
-  padding: 0 4px;
-  border: none;  
-}
+// .ms-OverflowSet {
+//   position: relative;
+//   display: flex;
+//   flex-wrap: nowrap;
+//   flex-grow: 1;
+//   align-items: stretch;
+// }
 
-.ms-Button--commandBar:focus {
-  inset: 2;
-  border-color: transparent;
-}
+// ms-OverflowSetVertical {
+//   flex-direction: column;
+// }
+
+// .ms-OverflowSet-item, .ms-OverflowSet-overflowButton {
+//   flex-shrink: 0;
+//   display: inherit;
+// }
+
+// .ms-Button--commandBar{ 
+//   min-width: 40px;
+//   background-color: white;
+//   color: rgb(50, 49, 48);
+//   padding: 0 4px;
+//   border: none;  
+// }
+
+// .ms-Button--commandBar:focus {
+//   inset: 2;
+//   border-color: transparent;
+// }
diff --git a/packages/au1-app/src/app.ts b/packages/au1-app/src/app.ts
index dd9aa99..a95c4bc 100644
--- a/packages/au1-app/src/app.ts
+++ b/packages/au1-app/src/app.ts
@@ -11,7 +11,8 @@ export class App {
     config.title = 'Contacts';
     config.map([
       { route: ['', 'home'],          moduleId: PLATFORM.moduleName('routes/home/index'),     name: 'home',    nav: true,   title: 'Home' },
-      { route: '/app-module-one',  moduleId: PLATFORM.moduleName('routes/app-module-one/index'), name:'app-module-one', nav: true,   title: 'The App Module #1' }
+      { route: '/app-module-one',  moduleId: PLATFORM.moduleName('routes/app-module-one/index'), name:'app-module-one', nav: true,   title: 'The App Module #1' },
+      { route: '/monday-integration',  moduleId: PLATFORM.moduleName('routes/monday-integration/index'), name:'monday-integration', nav: true,   title: 'The Monday.com Integration' }
     ]);
 
     this.router = router;
diff --git a/packages/au1-app/src/resources/CommandBar.scss b/packages/au1-app/src/resources/CommandBar.scss
new file mode 100644
index 0000000..f295f08
--- /dev/null
+++ b/packages/au1-app/src/resources/CommandBar.scss
@@ -0,0 +1,139 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Command Bar styles
+
+@import 'office-ui-fabric-core/dist/sass/References';
+@import './sass/References';
+
+$CommandBar-height: 40px;
+$CommandBar-md-height: 44px;
+$CommandBar-iconSize: 18px;
+$CommandBar-sideAreaWidth: 128px;
+$SearchBox-width: 220px;
+$CommandBarItem-height: $CommandBar-height;
+$red: #FF0000;
+
+@mixin highContrastBorder($color) {
+    border-left: 1px solid $color;
+    border-right: 1px solid $color;
+}
+
+.ms-CommandBar {
+  background-color: $ms-color-neutralLighter;
+  height: $CommandBar-height;
+  white-space: nowrap;
+  padding-left: 0;
+  border: 0;
+  position: relative;
+
+  &:focus {
+    outline: none;
+  }
+
+  .ms-CommandButton--actionButton {
+    border-right: 1px solid $ms-color-neutralLight;
+  }
+
+  //== CommandBar -> ms-Button specific changes
+  //
+  .ms-Button {
+    height: 100%;
+
+    &.ms-Button--noLabel {
+      .ms-Button-icon {
+        padding-right: 0;
+      }
+    }
+
+    &.is-hidden {
+      display: none;
+    }
+  }
+
+  .ms-SearchBox,
+  .ms-SearchBox-field,
+  .ms-SearchBox-label {
+    height: 100%;
+  }
+
+  .ms-SearchBox {
+    display: inline-block;
+    vertical-align: top;
+    //transition: margin-right $ms-duration2;
+  }
+
+  .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+    width: $SearchBox-width;
+
+    @media only screen and (max-width: $ms-screen-max-md) {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: $ms-zIndex-front;
+    }
+  }
+
+  .ms-CommandBar-overflowButton {
+    .ms-CommandButton-button {
+      font-size: 18px;
+      padding: 0 11px;
+    }
+  }
+
+  // Search is collapsed unless activated and its only
+  // collapsed < L break points
+
+  @media only screen and (min-width: $ms-screen-min-xl) {
+    .ms-SearchBox {
+      margin-right: 24px;
+    }
+  }
+
+  @media only screen and (max-width: $ms-screen-max-md) {
+    height: $CommandBar-md-height;
+  }
+
+  @media only screen and (min-width: $ms-screen-min-lg) {
+
+    &.search-expanded {
+      .ms-SearchBox {
+        margin-right: 8px;
+      }
+    }
+
+    .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+      transition: none;
+    }
+  }
+}
+
+.ms-CommandBar-mainArea {
+  overflow-x: hidden;
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+  float: right;
+  text-align: right;
+  width: auto;
+  padding-right: 4px;
+  height: 100%;
+
+  .ms-Button:last-child {
+    margin-right: 0;
+  }
+
+  @media only screen and (min-width: $ms-screen-min-lg) {
+    min-width: $CommandBar-sideAreaWidth;
+  }
+
+  @media only screen and (min-width: $ms-screen-min-xl) {
+    padding-right: 20px;
+  }
+}
diff --git a/packages/au1-app/src/resources/CommandButton.scss b/packages/au1-app/src/resources/CommandButton.scss
new file mode 100644
index 0000000..9fceb2b
--- /dev/null
+++ b/packages/au1-app/src/resources/CommandButton.scss
@@ -0,0 +1,295 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Button styles
+
+@import 'office-ui-fabric-core/dist/sass/References';
+@import './sass/References';
+
+$CommandButton-height: 40px;
+$CommandButton-md-height: 44px;
+$CommandButton-padding: 8px;
+$CommandButtonIcon-size: 16px;
+$CommandButtonIcon-md-size: 20px;
+
+.ms-CommandButton {
+  //@include ms-baseFont;
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+
+  &.is-hidden {
+    display: none;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    .ms-CommandButton-button {
+      cursor: default;
+
+      &:hover {
+        background-color: $ms-color-themeLighterAlt;
+      }
+
+      .ms-CommandButton-label {
+        color: $ms-color-neutralTertiary;
+      }
+
+      .ms-CommandButton-icon {
+        color: $ms-color-neutralTertiary;
+      }
+    }
+  }
+
+  .ms-ContextualMenu {
+    display: none;
+  }
+}
+
+//== Mixins: Base button, focus, and icon alignments
+//
+@mixin ms-CommandButton-iconBase {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin ms-CommandBar-focusRectangle {
+  top: 3px;
+  left: 3px;
+  right: 3px;
+  bottom: 3px;
+  border: 1px solid $ms-color-neutralPrimary;
+  position: absolute;
+  z-index: 10;
+  content: '';
+  outline: none;
+}
+
+@mixin ms-CommandBarButton-buttonBase {
+  //@include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  // background-color: $ms-color-themeLighterAlt;
+  // border: 1px solid $ms-color-themeLighterAlt;
+  cursor: pointer;
+  display: inline-block;
+  height: $CommandButton-height;
+  line-height: $CommandButton-height;
+  outline: 1px solid transparent;
+  padding: 0 $CommandButton-padding;
+  position: relative;
+  vertical-align: top;
+  background: transparent;
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
+
+    .ms-CommandButton-label {
+      color: $ms-color-neutralDark;
+    }
+  }
+
+  &:active {
+    background-color: $ms-color-neutralLight;
+  }
+
+  &:focus::before {
+    @include ms-CommandBar-focusRectangle;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  @media only screen and (max-width: $ms-screen-max-md) {
+    height: $CommandButton-md-height;
+
+    .ms-CommandButton-icon {
+      font-size: $CommandButtonIcon-md-size;
+    }
+
+    .ms-CommandButton-label {
+      line-height: $CommandButton-md-height;
+    }
+  }
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+  @include ms-CommandBarButton-buttonBase;
+}
+
+.ms-CommandButton-button {
+  border: 0;
+  margin: 0;
+}
+
+// Add space between adjacent command buttons.
+.ms-CommandButton + .ms-CommandButton {
+  margin-left: 8px;
+
+  @media only screen and (max-width: $ms-screen-max-md) {
+    margin-left: 4px;
+  }
+}
+
+.ms-CommandButton-icon {
+  display: inline-block;
+  margin-right: $CommandButton-padding;
+  position: relative;
+  font-size: $CommandButtonIcon-size;
+  min-width: 16px;
+  height: 100%;
+
+  .ms-Icon {
+    @include ms-CommandButton-iconBase;
+  }
+}
+
+.ms-CommandButton-label {
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  color: $ms-color-neutralPrimary;
+  line-height: $CommandButton-height;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+
+  &:hover {
+    color: $ms-color-neutralDark;
+  }
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+  display: inline-block;
+  position: relative;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-s;
+  font-weight: $ms-font-weight-semilight;
+  min-width: 12px;
+  height: 100%;
+  vertical-align: top;
+  margin-left: 8px;
+
+  .ms-Icon {
+    line-height: normal;
+    padding-top: $CommandButton-padding * 2;
+  }
+
+  &:focus::before {
+    @include ms-CommandBar-focusRectangle;
+  }
+
+  @media only screen and (max-width: $ms-screen-max-md) {
+    display: none;
+  }
+}
+
+.ms-CommandButton-splitIcon {
+  margin-left: -2px;
+  width: 27px;
+  border: 0;
+
+  .ms-Icon {
+    margin-left: -1px;
+    position: relative;
+    padding-top: 16px;
+
+    &::after {
+      position: absolute;
+      content: ' ';
+      width: 1px;
+      height: 16px;
+      top: 12px;
+      left: -8px;
+      border-left: 1px solid $ms-color-neutralTertiaryAlt;
+    }
+  }
+}
+
+//= Modifier: No Label modifier
+//
+.ms-CommandButton.ms-CommandButton--noLabel {
+  .ms-CommandButton-icon {
+    margin-right: 0;
+  }
+
+  .ms-CommandButton-label {
+    display: none;
+  }
+
+  .ms-CommandButton-button {
+    padding: 0 12px;
+  }
+}
+
+//= Modifier: Inline modifier
+//
+.ms-CommandButton.ms-CommandButton--inline {
+  .ms-CommandButton-button {
+    background: none;
+  }
+}
+
+//= Modifier: Action Button modifier
+//
+.ms-CommandButton.ms-CommandButton--actionButton {
+  .ms-CommandButton-button {
+    width: 50px;
+    height: $CommandButton-height;
+  }
+
+  .ms-CommandButton-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    padding-right: 0;
+  }
+}
+
+@mixin ms-CommandButton-pivotLine {
+  content: '';
+  height: 2px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color: $ms-color-themePrimary;
+  bottom: 0;
+  z-index: $ms-zIndex-middle;
+}
+
+//= Modifier: Pivot Button modifier
+//
+.ms-CommandButton.ms-CommandButton--pivot {
+
+  &.is-active::before {
+    @include ms-CommandButton-pivotLine;
+  }
+
+  &:hover {
+    &::before {
+      @include ms-CommandButton-pivotLine;
+    }
+  }
+}
+
+.ms-CommandButton.ms-CommandButton--textOnly,
+.ms-CommandButton.ms-CommandButton--pivot {
+
+  .ms-CommandButton-label {
+    display: inline-block;
+
+    @media only screen and (max-width: $ms-screen-max-sm) {
+      font-size: 16px;
+    }
+  }
+}
diff --git a/packages/au1-app/src/resources/DetailsList.scss b/packages/au1-app/src/resources/DetailsList.scss
new file mode 100644
index 0000000..4f1d7ad
--- /dev/null
+++ b/packages/au1-app/src/resources/DetailsList.scss
@@ -0,0 +1,338 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Styles for details list
+
+@import 'office-ui-fabric-core/dist/sass/variables/_Color.Variables.scss';
+
+// Variables
+$rowHeight: 36px;
+$selectedColor: $ms-color-themeLighter;
+$selectedHoverColor: $ms-color-themeLight;
+$focusedBorderColor: $ms-color-neutralTertiary;
+$selectedColor: $ms-color-themeLighter;
+$selectedHoverColor: $ms-color-themeLight;
+$unselectedHoverColor: $ms-color-themeLighterAlt;
+
+//== DetailsList
+//
+.ms-DetailsList {
+  position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+  overflow-x: auto;
+  overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+    word-break: break-word;
+}
+
+
+//== DetailsHeader
+//
+.ms-DetailsHeader {
+  display: inline-block;
+  min-width: 100%;
+  height: $rowHeight;
+  line-height: $rowHeight;
+  white-space: nowrap;
+  padding-bottom: 1px;
+  border-bottom: 1px solid $ms-color-neutralLight;
+  margin-bottom: 1px;
+  cursor: default;
+
+  //@include user-select(none);
+
+  &.is-singleSelect {
+    padding-left: 40px;
+  }
+
+  &.is-resizingColumn .ms-DetailsHeader-sizerCover {
+    background: transparent;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    cursor: col-resize;
+  }
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+  visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+  visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 16px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+  color: $ms-color-neutralTertiary;
+  padding-left: 4px;
+  vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 8px;
+  color: $ms-color-neutralTertiary;
+  border: 0;
+  background: none;
+  line-height: inherit;
+  margin: 0;
+  font-size: inherit;
+  font-family: inherit;
+  text-align: left;
+  height: $rowHeight;
+  vertical-align: top;
+
+  &.is-check {
+    position: relative;
+    padding: 8px 10px;
+    margin: 0;
+  }
+
+  &:focus {
+    outline: transparent;
+  }
+
+  &.is-sortable {
+    color: $ms-color-black;
+    cursor: default;
+
+    &:hover {
+      background-color: $ms-color-neutralLight;
+    }
+  }
+
+  &.is-filter {
+    position: absolute;
+    right: 0;
+    width: 20px;
+    top: 0;
+    bottom: 0;
+    padding: 0;
+    text-align: center;
+    color: $ms-color-black;
+
+    &:hover {
+      background-color: $ms-color-neutralLight;
+    }
+  }
+
+  &.is-filter::before {
+    content: '';
+    position: absolute;
+    border-left: 1px solid $ms-color-neutralTertiary;
+    top: 10px;
+    bottom: 10px;
+    left: 0;
+  }
+
+  &.is-sizer {
+    position: absolute;
+    width: 16px;
+    cursor: col-resize;
+    bottom: 0;
+    top: 0;
+    height: inherit;
+    z-index: 99;
+  }
+
+  &.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+    display: inline;
+  }
+
+  &is-sortedDescending .ms-DetailsHeader-sortArrow {
+    transform: rotate(180deg);
+  }
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
+.ms-DetailsHeader-cell.is-sizer:hover::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: $ms-color-neutralLight;
+  border: 1px solid $ms-color-white;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsHeader-cell:focus::before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid $ms-color-neutralTertiary;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+  font-size: 12px;
+  margin-right: 4px;
+  display: none;
+  color: $ms-color-neutralTertiary;
+}
+
+
+//== DetailsRow
+//
+.ms-DetailsRow {
+  position: relative;
+  display: inline-block;
+  min-width: 100%;
+  min-height: $rowHeight;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px 0;
+
+  // @include user-select(none);
+
+  cursor: default;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: transparent;
+  }
+
+  &.ms-DetailsRow.is-selected {
+    background: $selectedColor;
+  }
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:hover {
+  background: $unselectedHoverColor;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow.is-selected:hover {
+  background: $selectedHoverColor;
+}
+
+.ms-DetailsRow-cell {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 8px;
+  vertical-align: top;
+  white-space: normal;
+  word-break: break-word;
+  margin-right: 16px;
+
+  &.is-clipped {
+    overflow: hidden;
+  }
+}
+
+.ms-DetailsRow-cell:last-child {
+  margin-right: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+  display: inline-block;
+  margin-right: 6px;
+  position: relative;
+  bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+  display: inline-block;
+  cursor: default;
+  padding: 10px;
+  margin: -10px 0;
+  box-sizing: border-box;
+  vertical-align: top;
+  background: none;
+  border: 0;
+  visibility: hidden;
+
+  &:focus {
+    outline: transparent;
+  }
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow.is-selected .ms-DetailsRow-check {
+  visibility: visible;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border: 1px solid $focusedBorderColor;
+}
+
+.ms-DetailsRow-cellMeasurer {
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  top: -1000000000;
+}
+
+//== Check
+//
+.ms-Check {
+  display: inline-block;
+  cursor: default;
+  line-height: 0;
+  vertical-align: top;
+
+  &.is-checked {
+
+    .ms-Check-circle {
+      fill: $ms-color-themePrimary;
+      stroke: $ms-color-white;
+      stroke-width: 1px;
+    }
+
+    .ms-Check-check {
+      stroke: $ms-color-white;
+    }
+  }
+}
+
+.ms-Check-circle {
+  fill: $ms-color-white;
+  stroke: $ms-color-neutralTertiaryAlt;
+}
+
+.ms-Check-check {
+  stroke: $ms-color-neutralTertiaryAlt;
+}
diff --git a/packages/au1-app/src/resources/Dropdown.scss b/packages/au1-app/src/resources/Dropdown.scss
new file mode 100644
index 0000000..467e914
--- /dev/null
+++ b/packages/au1-app/src/resources/Dropdown.scss
@@ -0,0 +1,253 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Dropdown styles
+
+//@import 'office-ui-fabric-core/dist/sass/variables/_Color.Variables.scss';
+@import './sass/References';
+
+// Mixin for high contrast mode link states
+@mixin highContrastListItemState {
+  @media screen and (-ms-high-contrast: active) {
+    background-color: $ms-color-contrastBlackSelected;
+    border-color: $ms-color-contrastBlackSelected;
+    color: $ms-color-black;
+
+    &:focus {
+      border-color: $ms-color-black;
+    }
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    background-color: $ms-color-contrastWhiteSelected;
+    border-color: $ms-color-contrastWhiteSelected;
+    color: $ms-color-white;
+  }
+}
+
+.ms-Dropdown {
+  // @include ms-baseFont;
+  // @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  margin-bottom: 10px;
+  position: relative;
+  outline: 0;
+
+  &:hover,
+  &:focus,
+  &:active {
+    .ms-Dropdown-title,
+    .ms-Dropdown-caretDown {
+      color: $ms-color-black;
+    }
+  }
+
+  &:hover,
+  &:active {
+    .ms-Dropdown-title {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
+  }
+
+  &:focus {
+    .ms-Dropdown-title {
+      border-color: $ms-color-themePrimary;
+    }
+  }
+
+  .ms-Label {
+    display: inline-block;
+    margin-bottom: 8px;
+  }
+}
+
+//== State: A disabled dropdown
+.ms-Dropdown.is-disabled {
+  .ms-Dropdown-title {
+    background-color: $ms-color-neutralLighter;
+    border-color: $ms-color-neutralLighter;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackDisabled;
+      color: $ms-color-contrastBlackDisabled;
+    }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteDisabled;
+      color: $ms-color-contrastWhiteDisabled;
+    }
+  }
+
+  .ms-Dropdown-caretDown {
+    color: $ms-color-neutralTertiary;
+
+    @media screen and (-ms-high-contrast: active) {
+      color: $ms-color-contrastBlackDisabled;
+    }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      color: $ms-color-contrastWhiteDisabled;
+    }
+  }
+}
+
+// When the dropdown is opened
+.ms-Dropdown.is-open .ms-Dropdown-items {
+  display: block;
+  position: absolute;
+}
+
+// Adjustments for when the dropdown is open as a panel on small screens
+.ms-Panel .ms-Dropdown-items {
+  box-shadow: none;
+  overflow-y: auto;
+  padding-top: 4px;
+  max-height: 100%;
+
+  .ms-Dropdown-item {
+    padding: 7px 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &::before {
+    content: none;
+    border: 0;
+  }
+}
+
+// Hide the original dropdown
+.ms-Dropdown-select {
+  display: none;
+}
+
+.ms-Dropdown-caretDown {
+  color: $ms-color-neutralDark;
+  font-size: $ms-icon-size-s;
+  position: absolute;
+  right: 13px;
+  bottom: 9px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+// Style the new, replacement component
+.ms-Dropdown-title {
+  //@include ms-u-normalize;
+  background: $ms-color-white;
+  border: 1px solid $ms-color-neutralTertiaryAlt;
+  cursor: pointer;
+  display: block;
+  height: 32px;
+  padding: 5px 32px 0 10px;
+  position: relative;
+  overflow: hidden;
+
+  &.ms-Dropdown-truncator {
+    height: auto;
+    display: block;
+    position: absolute;
+    visibility: hidden;
+  }
+}
+
+// Container for the dropdown items, displayed as a panel on small screens.
+.ms-Dropdown-items {
+  //@include ms-u-normalize;
+  @include ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4);
+  background-color: $ms-color-white;
+  display: none;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back);
+  overflow-y: scroll;
+
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-width: 100%;
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid $ms-color-neutralLight;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    border: 1px solid $ms-color-white;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border: 1px solid $ms-color-black;
+  }
+}
+
+.ms-Dropdown-item {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 36px;
+  padding: 7px 10px;
+  position: relative;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media screen and (-ms-high-contrast: active) {
+    border-color: $ms-color-black;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border-color: $ms-color-white;
+  }
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
+    color: $ms-color-black;
+
+    @include highContrastListItemState;
+  }
+
+  &:active {
+    background-color: $ms-color-neutralLight;
+    border-color: $ms-color-themePrimary;
+    color: $ms-color-black;
+  }
+
+  &.is-disabled {
+    background: $ms-color-white;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+  }
+}
+
+//== State: A selected dropdown item
+// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version.
+// Use .is-selected instead.
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+  background-color: $ms-color-themeLight;
+  color: $ms-color-black;
+
+  &:hover {
+    background-color: $ms-color-themeLight;
+  }
+
+  @include highContrastListItemState;
+}
diff --git a/packages/au1-app/src/resources/fabric.components.css b/packages/au1-app/src/resources/fabric.components.css
index 53c8457..a7f0134 100644
--- a/packages/au1-app/src/resources/fabric.components.css
+++ b/packages/au1-app/src/resources/fabric.components.css
@@ -1,6 +1,6 @@
 /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
 /**
- * Office UI Fabric 2.2.0
+ * Office UI Fabric 2.6.2
  * The front-end framework for building experiences for Office 365.
  **/
 /*
@@ -78,9 +78,8 @@
   content: ' ';
   width: 16px;
   height: 16px;
-  -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-          transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
   background-color: white;
 }
 
@@ -492,9 +491,8 @@
 .ms-Callout.ms-Callout--arrowTop:after {
   content: '';
   position: absolute;
-  -webkit-transform: rotate(-45deg);
-      -ms-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+      transform: rotate(-45deg);
   height: 0;
   width: 0;
 }
@@ -569,6 +567,35 @@
   bottom: -10px;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Callout.ms-Callout--arrowRight:before,
+  .ms-Callout.ms-Callout--arrowRight:after,
+  .ms-Callout.ms-Callout--arrowLeft:before,
+  .ms-Callout.ms-Callout--arrowLeft:after,
+  .ms-Callout.ms-Callout--arrowBottom:before,
+  .ms-Callout.ms-Callout--arrowBottom:after,
+  .ms-Callout.ms-Callout--arrowTop:before,
+  .ms-Callout.ms-Callout--arrowTop:after {
+    border: 0;
+    width: 20px;
+    height: 20px;
+    background-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Callout.ms-Callout--arrowRight:before,
+  .ms-Callout.ms-Callout--arrowRight:after,
+  .ms-Callout.ms-Callout--arrowLeft:before,
+  .ms-Callout.ms-Callout--arrowLeft:after,
+  .ms-Callout.ms-Callout--arrowBottom:before,
+  .ms-Callout.ms-Callout--arrowBottom:after,
+  .ms-Callout.ms-Callout--arrowTop:before,
+  .ms-Callout.ms-Callout--arrowTop:after {
+    background-color: #ffffff;
+  }
+}
+
 .ms-Callout-main {
   position: relative;
   background-color: #ffffff;
@@ -619,6 +646,7 @@
 
 .ms-Callout-link {
   font-size: 14px;
+  font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
 .ms-Callout-actions {
@@ -765,6 +793,36 @@
   color: #a6a6a6;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+    background-color: #00ff00;
+    color: #00ff00;
+  }
+
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+    border-color: #00ff00;
+  }
+
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+    background-color: #600000;
+    color: #600000;
+  }
+
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+    border-color: #600000;
+  }
+
+  .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+    color: #600000;
+  }
+}
+
 .ms-ChoiceField-input {
   position: absolute;
   opacity: 0;
@@ -814,7 +872,6 @@
   display: inline-block;
   position: absolute;
   top: 4px;
-  right: 0;
   bottom: 0;
   left: 4px;
   width: 11px;
@@ -822,6 +879,20 @@
   box-sizing: border-box;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+    border-color: #ffffff;
+    background-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+    border-color: #000000;
+    background-color: #000000;
+  }
+}
+
 .ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
   background-color: #212121;
   color: #212121;
@@ -848,6 +919,22 @@
   left: 3px;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+    color: #ffffff;
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+    color: #000000;
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+
 .ms-ChoiceFieldGroup {
   margin-bottom: 4px;
 }
@@ -939,7 +1026,7 @@
 }
 
 .ms-CommandBarItem:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #0078d7;
 }
 
@@ -1009,6 +1096,7 @@
   padding: 0 8px;
   display: block;
   height: 100%;
+  text-decoration: none;
 }
 
 .ms-CommandBarItem-link:focus {
@@ -1027,6 +1115,7 @@
 
 .ms-CommandBarItem-icon {
   font-size: 17px;
+  color: #0078d7;
 }
 
 .ms-CommandBarItem-chevronDown {
@@ -1079,7 +1168,7 @@
 }
 
 .ms-CommandBarSearch:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #0078d7;
 }
 
@@ -1188,7 +1277,7 @@
 }
 
 .ms-CommandBarSearch.is-active {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #000000;
 }
 
@@ -1202,7 +1291,7 @@
 }
 
 .ms-CommandBarSearch.is-active:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #000000;
 }
 
@@ -1305,42 +1394,158 @@
   position: relative;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link {
+    border-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link {
+    border-color: #ffffff;
+  }
+}
+
 .ms-ContextualMenu-link:first-child,
 .ms-ContextualMenu-link:last-child {
   height: 39px;
 }
 
 .ms-ContextualMenu-link:hover,
-.ms-ContextualMenu-link:active {
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
   background-color: #eaeaea;
   color: #000000;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link:hover {
+    background-color: #1aebff;
+    border-color: #1aebff;
+    color: #000000;
+  }
+
+  .ms-ContextualMenu-link:hover:focus {
+    border-color: #000000;
+  }
+
+  .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+  .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+    color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link:hover {
+    background-color: #37006e;
+    border-color: #37006e;
+    color: #ffffff;
+  }
+
+  .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+  .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+    color: #ffffff;
+  }
+}
+
 .ms-ContextualMenu-link:active {
   border: 1px solid #0078d7;
 }
 
+.ms-ContextualMenu-link:focus {
+  border-color: #0078d7;
+  outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link:focus {
+    border-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link:focus {
+    border-color: #000000;
+  }
+}
+
 .ms-ContextualMenu-link.is-selected {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #000000;
   font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
 .ms-ContextualMenu-link.is-selected:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link.is-selected {
+    background-color: #1aebff;
+    border-color: #1aebff;
+    color: #000000;
+  }
+
+  .ms-ContextualMenu-link.is-selected:focus {
+    border-color: #000000;
+  }
+
+  .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+  .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+    color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link.is-selected {
+    background-color: #37006e;
+    border-color: #37006e;
+    color: #ffffff;
+  }
+
+  .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+  .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+    color: #ffffff;
+  }
 }
 
 .ms-ContextualMenu-link.is-disabled {
-  background-color: #ffffff;
   color: #a6a6a6;
   cursor: default;
   pointer-events: none;
 }
 
-.ms-ContextualMenu-link.is-disabled:active {
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
   border-color: #ffffff;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link.is-disabled:active,
+  .ms-ContextualMenu-link.is-disabled:focus {
+    border-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link.is-disabled:active,
+  .ms-ContextualMenu-link.is-disabled:focus {
+    border-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-ContextualMenu-link.is-disabled {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ContextualMenu-link.is-disabled {
+    color: #600000;
+  }
+}
+
 .ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
   position: absolute;
   top: -1px;
@@ -1432,16 +1637,13 @@
 }
 
 .ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
-  -webkit-animation-name: fadeIn, slideDownIn10;
-          animation-name: fadeIn, slideDownIn10;
+  animation-name: fadeIn, slideDownIn10;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
   box-sizing: border-box;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   border: 1px solid #eaeaea;
@@ -1526,7 +1728,7 @@
 
 .ms-DatePicker-day--today {
   position: relative;
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
 }
 
 .ms-DatePicker-day--disabled:before {
@@ -1863,11 +2065,9 @@
   line-height: 100vh;
   text-align: center;
   display: -ms-flexbox;
-  display: -webkit-flex;
-  display:         flex;
+  display: flex;
   -ms-flex-align: center;
-  -webkit-align-items: center;
-          align-items: center;
+  align-items: center;
 }
 
 .ms-Dialog::before {
@@ -1887,6 +2087,12 @@
   z-index: 0;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dialog .ms-Overlay {
+    opacity: 0;
+  }
+}
+
 .ms-Dialog-main {
   vertical-align: middle;
   display: inline-block;
@@ -1898,7 +2104,7 @@
   width: 288px;
   position: relative;
   text-align: left;
-  outline: 1px solid transparent;
+  outline: 3px solid transparent;
 }
 
 .ms-Dialog-button.ms-Dialog-button--close {
@@ -2053,6 +2259,11 @@
   border-color: #0078d7;
 }
 
+.ms-Dropdown .ms-Label {
+  display: inline-block;
+  margin-bottom: 8px;
+}
+
 .ms-Dropdown.is-disabled .ms-Dropdown-title {
   background-color: #f4f4f4;
   border-color: #f4f4f4;
@@ -2060,10 +2271,36 @@
   cursor: default;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown.is-disabled .ms-Dropdown-title {
+    border-color: #00ff00;
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown.is-disabled .ms-Dropdown-title {
+    border-color: #600000;
+    color: #600000;
+  }
+}
+
 .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
   color: #a6a6a6;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+    color: #600000;
+  }
+}
+
 .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
 .ms-Dropdown.is-open .ms-Dropdown-items {
   display: block;
@@ -2111,6 +2348,7 @@
   list-style-type: none;
   position: absolute;
   width: 100%;
+  max-height: 200px;
   max-width: 268px;
   z-index: 400;
   top: 0;
@@ -2130,6 +2368,18 @@
   border: 1px solid #eaeaea;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown-items {
+    border: 1px solid #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown-items {
+    border: 1px solid #000000;
+  }
+}
+
 .ms-Dropdown-item {
   box-sizing: border-box;
   cursor: pointer;
@@ -2142,6 +2392,18 @@
   white-space: nowrap;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown-item {
+    border-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown-item {
+    border-color: #ffffff;
+  }
+}
+
 .ms-Dropdown-item:first-child,
 .ms-Dropdown-item:last-child {
   height: 39px;
@@ -2150,7 +2412,26 @@
 .ms-Dropdown-item:hover {
   background-color: #eaeaea;
   color: #000000;
-  outline: 1px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown-item:hover {
+    background-color: #1aebff;
+    border-color: #1aebff;
+    color: #000000;
+  }
+
+  .ms-Dropdown-item:hover:focus {
+    border-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown-item:hover {
+    background-color: #37006e;
+    border-color: #37006e;
+    color: #ffffff;
+  }
 }
 
 .ms-Dropdown-item:active {
@@ -2168,14 +2449,37 @@
 
 .ms-Dropdown-item.is-selected,
 .ms-Dropdown-item.ms-Dropdown-item--selected {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   color: #000000;
   line-height: 40px;
 }
 
 .ms-Dropdown-item.is-selected:hover,
 .ms-Dropdown-item.ms-Dropdown-item--selected:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Dropdown-item.is-selected,
+  .ms-Dropdown-item.ms-Dropdown-item--selected {
+    background-color: #1aebff;
+    border-color: #1aebff;
+    color: #000000;
+  }
+
+  .ms-Dropdown-item.is-selected:focus,
+  .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+    border-color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Dropdown-item.is-selected,
+  .ms-Dropdown-item.ms-Dropdown-item--selected {
+    background-color: #37006e;
+    border-color: #37006e;
+    color: #ffffff;
+  }
 }
 
 @media (min-width: 480px) {
@@ -2314,7 +2618,35 @@
 }
 
 .ms-Label.is-disabled {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Label.is-disabled {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Label.is-disabled {
+    color: #600000;
+  }
+}
+
+.is-disabled .ms-Label {
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-Link {
@@ -2332,6 +2664,18 @@
   color: #0078d7;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Link {
+    color: #8080ff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Link {
+    color: #00009f;
+  }
+}
+
 .ms-List {
   color: #333333;
   font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
@@ -2549,7 +2893,7 @@
 }
 
 .ms-ListItem.is-selected:hover {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
   outline: 1px solid transparent;
 }
 
@@ -2605,16 +2949,13 @@
   height: 52px;
   text-align: center;
   overflow: hidden;
-  -webkit-animation-name: fadeIn, slideDownIn20;
-          animation-name: fadeIn, slideDownIn20;
+  animation-name: fadeIn, slideDownIn20;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
       -ms-animation-duration: 0.367s;
        -o-animation-duration: 0.367s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
 }
 
 .ms-MessageBanner .ms-Icon {
@@ -2622,16 +2963,13 @@
 }
 
 .ms-MessageBanner.hide {
-  -webkit-animation-name: fadeOut, slideUpOut20;
-          animation-name: fadeOut, slideUpOut20;
+  animation-name: fadeOut, slideUpOut20;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
 }
 
 .ms-MessageBanner.is-hidden {
@@ -2735,31 +3073,115 @@
   }
 }
 
-.ms-NavBar {
+/*
+  Base template file
+*/
+.ms-MessageBar {
+  padding: 8px;
+  display: table;
+  background-color: #f4f4f4;
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+  padding-right: 8px;
+  font-size: 16px;
+  color: #767676;
+}
+
+.ms-MessageBar-text {
   color: #333333;
   font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: normal;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  box-shadow: none;
-  background-color: #f4f4f4;
-  height: 40px;
-  padding: 0 10px;
-  width: 100%;
-  outline: 1px solid transparent;
 }
 
-.ms-NavBar .ms-Overlay {
-  display: block;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
-  z-index: 0;
+.ms-MessageBar.ms-MessageBar--warning {
+  background-color: #fff4ce;
 }
 
-.ms-NavBar-openMenu {
+.ms-MessageBar.ms-MessageBar--severeWarning {
+  background-color: #fed9cc;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon {
+  color: #d83b01;
+}
+
+.ms-MessageBar.ms-MessageBar--error {
+  background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon {
+  color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--remove {
+  background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon {
+  color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--remove .ms-Icon {
+  font-size: 8px;
+  margin-left: 3px;
+}
+
+.ms-MessageBar.ms-MessageBar--success {
+  background-color: #dff6dd;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon {
+  color: #107c10;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-Icon {
+  font-size: 12px;
+  top: 3px;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-Icon:before {
+  margin-left: 1px;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-Icon:after {
+  font-size: 8px;
+  margin-left: 3px;
+  top: 1px;
+}
+
+.ms-NavBar {
+  color: #333333;
+  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  background-color: #f4f4f4;
+  height: 40px;
+  padding: 0 10px;
+  width: 100%;
+  outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+  z-index: 0;
+}
+
+.ms-NavBar-openMenu {
   font-size: 20px;
   height: 40px;
   line-height: 40px;
@@ -2908,9 +3330,8 @@
   }
 
   .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
-    -webkit-transform: scaleY(-1);
-        -ms-transform: scaleY(-1);
-            transform: scaleY(-1);
+    -ms-transform: scaleY(-1);
+        transform: scaleY(-1);
   }
 
   .ms-NavBar-item .ms-ContextualMenu {
@@ -3123,56 +3544,42 @@
 }
 
 .ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
-  -webkit-animation-name: fadeIn, slideLeftIn40;
-          animation-name: fadeIn, slideLeftIn40;
+  animation-name: fadeIn, slideLeftIn40;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
       -ms-animation-duration: 0.367s;
        -o-animation-duration: 0.367s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeIn;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeIn;
           animation-name: fadeIn;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.267s;
           animation-duration: 0.267s;
 }
 
 .ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
-  -webkit-animation-name: fadeOut, slideRightOut40;
-          animation-name: fadeOut, slideRightOut40;
+  animation-name: fadeOut, slideRightOut40;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeOut;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeOut;
           animation-name: fadeOut;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.167s;
           animation-duration: 0.167s;
 }
 
@@ -3191,110 +3598,82 @@
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
-  -webkit-animation-name: fadeIn, slideLeftIn40;
-          animation-name: fadeIn, slideLeftIn40;
+  animation-name: fadeIn, slideLeftIn40;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
       -ms-animation-duration: 0.367s;
        -o-animation-duration: 0.367s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeIn;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeIn;
           animation-name: fadeIn;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.267s;
           animation-duration: 0.267s;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
-  -webkit-animation-name: fadeOut, slideRightOut40;
-          animation-name: fadeOut, slideRightOut40;
+  animation-name: fadeOut, slideRightOut40;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeOut;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeOut;
           animation-name: fadeOut;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.167s;
           animation-duration: 0.167s;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
-  -webkit-animation-name: fadeIn, slideRightIn40;
-          animation-name: fadeIn, slideRightIn40;
+  animation-name: fadeIn, slideRightIn40;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
       -ms-animation-duration: 0.367s;
        -o-animation-duration: 0.367s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeIn;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeIn;
           animation-name: fadeIn;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.267s;
           animation-duration: 0.267s;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
-  -webkit-animation-name: fadeOut, slideLeftOut40;
-          animation-name: fadeOut, slideLeftOut40;
+  animation-name: fadeOut, slideLeftOut40;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
 }
 
 .ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeOut;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeOut;
           animation-name: fadeOut;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.167s;
           animation-duration: 0.167s;
 }
 
@@ -3330,6 +3709,13 @@
   }
 }
 
+@media (min-width: 1366px) {
+  .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+    left: auto;
+    width: 940px;
+  }
+}
+
 @media (min-width: 1366px) {
   .ms-Panel.ms-Panel--xl .ms-Panel-main {
     left: 176px;
@@ -3361,13 +3747,9 @@
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeIn;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeIn;
           animation-name: fadeIn;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.167s;
           animation-duration: 0.167s;
 }
 
@@ -3375,13 +3757,9 @@
   -webkit-animation-duration: 0.367s;
   -webkit-animation-name: fadeOut;
   -webkit-animation-fill-mode: both;
-  -webkit-animation-duration: 0.367s;
           animation-duration: 0.367s;
-  -webkit-animation-name: fadeOut;
           animation-name: fadeOut;
-  -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-  -webkit-animation-duration: 0.1s;
           animation-duration: 0.1s;
 }
 
@@ -3391,110 +3769,82 @@
 
 @media (min-width: 480px) {
   .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
-    -webkit-animation-name: fadeIn, slideLeftIn40;
-            animation-name: fadeIn, slideLeftIn40;
+    animation-name: fadeIn, slideLeftIn40;
     -webkit-animation-duration: 0.367s;
        -moz-animation-duration: 0.367s;
         -ms-animation-duration: 0.367s;
          -o-animation-duration: 0.367s;
-    -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-            animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    animation-fill-mode: both;
   }
 
   .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
     -webkit-animation-duration: 0.367s;
     -webkit-animation-name: fadeIn;
     -webkit-animation-fill-mode: both;
-    -webkit-animation-duration: 0.367s;
             animation-duration: 0.367s;
-    -webkit-animation-name: fadeIn;
             animation-name: fadeIn;
-    -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
-    -webkit-animation-duration: 0.267s;
             animation-duration: 0.267s;
   }
 
   .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
-    -webkit-animation-name: fadeOut, slideRightOut40;
-            animation-name: fadeOut, slideRightOut40;
+    animation-name: fadeOut, slideRightOut40;
     -webkit-animation-duration: 0.167s;
        -moz-animation-duration: 0.167s;
         -ms-animation-duration: 0.167s;
          -o-animation-duration: 0.167s;
-    -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-            animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+    animation-fill-mode: both;
   }
 
   .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
     -webkit-animation-duration: 0.367s;
     -webkit-animation-name: fadeOut;
     -webkit-animation-fill-mode: both;
-    -webkit-animation-duration: 0.367s;
             animation-duration: 0.367s;
-    -webkit-animation-name: fadeOut;
             animation-name: fadeOut;
-    -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
-    -webkit-animation-duration: 0.167s;
             animation-duration: 0.167s;
   }
 
   .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
-    -webkit-animation-name: fadeIn, slideRightIn40;
-            animation-name: fadeIn, slideRightIn40;
+    animation-name: fadeIn, slideRightIn40;
     -webkit-animation-duration: 0.367s;
        -moz-animation-duration: 0.367s;
         -ms-animation-duration: 0.367s;
          -o-animation-duration: 0.367s;
-    -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-            animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    animation-fill-mode: both;
   }
 
   .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
     -webkit-animation-duration: 0.367s;
     -webkit-animation-name: fadeIn;
     -webkit-animation-fill-mode: both;
-    -webkit-animation-duration: 0.367s;
             animation-duration: 0.367s;
-    -webkit-animation-name: fadeIn;
             animation-name: fadeIn;
-    -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
-    -webkit-animation-duration: 0.267s;
             animation-duration: 0.267s;
   }
 
   .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
-    -webkit-animation-name: fadeOut, slideLeftOut40;
-            animation-name: fadeOut, slideLeftOut40;
+    animation-name: fadeOut, slideLeftOut40;
     -webkit-animation-duration: 0.167s;
        -moz-animation-duration: 0.167s;
         -ms-animation-duration: 0.167s;
          -o-animation-duration: 0.167s;
-    -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-            animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+    animation-fill-mode: both;
   }
 
   .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
     -webkit-animation-duration: 0.367s;
     -webkit-animation-name: fadeOut;
     -webkit-animation-fill-mode: both;
-    -webkit-animation-duration: 0.367s;
             animation-duration: 0.367s;
-    -webkit-animation-name: fadeOut;
             animation-name: fadeOut;
-    -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
-    -webkit-animation-duration: 0.167s;
             animation-duration: 0.167s;
   }
 
@@ -3509,8 +3859,7 @@
   .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
   .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
     opacity: 0;
-    -webkit-animation-name: none;
-            animation-name: none;
+    animation-name: none;
   }
 }
 
@@ -3635,24 +3984,19 @@
 }
 
 .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
-  -webkit-animation-name: fadeIn, slideDownIn20;
-          animation-name: fadeIn, slideDownIn20;
+  animation-name: fadeIn, slideDownIn20;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
       -ms-animation-duration: 0.367s;
        -o-animation-duration: 0.367s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-          animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-delay: 250ms;
-          animation-delay: 250ms;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+  animation-delay: 250ms;
 }
 
 @media (min-width: 480px) {
   .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
-    -webkit-animation-delay: 500ms;
-            animation-delay: 500ms;
+    animation-delay: 500ms;
   }
 }
 
@@ -3711,6 +4055,7 @@
   display: inline-block;
   float: left;
   margin: 4px;
+  outline: 1px solid transparent;
 }
 
 .ms-PeoplePicker-persona .ms-Persona {
@@ -3806,7 +4151,7 @@
 }
 
 .ms-PeoplePicker-result .ms-Persona:active {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
 }
 
 .ms-PeoplePicker-result .ms-Persona-details {
@@ -3892,7 +4237,7 @@
 }
 
 .ms-PeoplePicker-resultAction:active {
-  background-color: #69afe5;
+  background-color: #71afe5;
 }
 
 .ms-PeoplePicker-resultAdditionalContent {
@@ -3905,9 +4250,8 @@
 }
 
 .ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
-  -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-          transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+      transform: rotate(180deg);
 }
 
 .ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
@@ -3971,7 +4315,7 @@
 
 .ms-PeoplePicker-searchMoreBtn:focus,
 .ms-PeoplePicker-searchMoreBtn:active {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
 }
 
 .ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
@@ -4287,6 +4631,18 @@
   z-index: 0;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Persona-imageArea {
+    border: 1px solid #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Persona-imageArea {
+    border: 1px solid #000000;
+  }
+}
+
 .ms-Persona-placeholder {
   color: #ffffff;
   position: absolute;
@@ -4453,6 +4809,18 @@
   border: 0;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Persona.ms-Persona--square .ms-Persona-presence {
+    border: 1px solid #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Persona.ms-Persona--square .ms-Persona-presence {
+    border: 1px solid #000000;
+  }
+}
+
 .ms-Persona.ms-Persona--tiny {
   height: 30px;
   display: inline-block;
@@ -4472,6 +4840,19 @@
   border: 0;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+    top: 9px;
+    border: 1px solid #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+    border: 1px solid #000000;
+  }
+}
+
 .ms-Persona.ms-Persona--tiny .ms-Persona-details {
   padding-left: 20px;
 }
@@ -4726,16 +5107,13 @@
   font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
   font-size: 14px;
   font-weight: normal;
-  -webkit-animation-name: fadeIn, slideUpIn10;
-          animation-name: fadeIn, slideUpIn10;
+  animation-name: fadeIn, slideUpIn10;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
       -ms-animation-duration: 0.167s;
        -o-animation-duration: 0.167s;
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-          animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
   bottom: 0;
   left: 0;
   position: fixed;
@@ -4821,9 +5199,8 @@
 .ms-PersonaCard-action.is-active:after,
 .is-active.ms-PersonaCard-overflow:after {
   box-sizing: border-box;
-  -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-          transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
   content: '';
   width: 10px;
   height: 10px;
@@ -5018,7 +5395,7 @@
   margin: 0;
   padding: 0;
   box-shadow: none;
-  height: 30px;
+  height: 40px;
   list-style-type: none;
   overflow-x: hidden;
   white-space: nowrap;
@@ -5027,27 +5404,100 @@
 .ms-Pivot-link {
   color: #333333;
   display: inline-block;
-  font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+  position: relative;
+  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
   font-size: 15px;
-  line-height: 27px;
-  margin-right: 15px;
+  line-height: 40px;
+  margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+  content: '';
+  width: 100%;
+  position: absolute;
+  display: none;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot-link:after {
+    background-color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Pivot-link:after {
+    background-color: #37006e;
+  }
 }
 
 .ms-Pivot-link:hover,
-.ms-Pivot-link:focus {
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
   color: #000000;
   cursor: pointer;
 }
 
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+  color: #212121;
+}
+
 .ms-Pivot-link:active {
-  color: #0078d7;
+  font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot-link:active {
+    color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Pivot-link:active {
+    color: #37006e;
+  }
+}
+
+.ms-Pivot-link:active:after {
+  display: block;
 }
 
 .ms-Pivot-link.is-selected {
-  color: #0078d7;
+  color: #000000;
   font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot-link.is-selected {
+    color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Pivot-link.is-selected {
+    color: #37006e;
+  }
+}
+
+.ms-Pivot-link.is-selected:after {
+  display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+  color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+  font-size: 16px;
+  position: relative;
+  top: 2px;
+}
+
 .ms-Pivot-link.ms-Pivot-link--overflow {
   color: #666666;
 }
@@ -5061,8 +5511,8 @@
   color: #212121;
 }
 
-.ms-Pivot-link.ms-Pivot-link--overflow:active {
-  color: #0078d7 !important;
+.ms-Pivot-link.ms-Pivot-link--overflow:active:after {
+  display: none;
 }
 
 .ms-Pivot-ellipsis {
@@ -5075,8 +5525,12 @@
   font-size: 17px;
 }
 
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
 .ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
-  font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
 .ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
@@ -5093,6 +5547,7 @@
   line-height: 40px;
   margin-right: -2px;
   padding: 0 10px;
+  font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
 }
 
 .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
@@ -5103,6 +5558,21 @@
 .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
   color: #ffffff !important;
   background-color: #0078d7;
+  font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+    background-color: #1aebff;
+    color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+    background-color: #37006e;
+    color: #ffffff;
+  }
 }
 
 .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
@@ -5111,6 +5581,20 @@
   font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+    background-color: #1aebff;
+    color: #000000;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+    background-color: #37006e;
+    color: #ffffff;
+  }
+}
+
 .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
 .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
   background-color: #ffffff;
@@ -5170,6 +5654,7 @@
   width: 100%;
   height: 2px;
   background-color: #eaeaea;
+  outline: 1px solid transparent;
 }
 
 .ms-ProgressIndicator-progressBar {
@@ -5178,6 +5663,18 @@
   background-color: #0078d7;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-ProgressIndicator-progressBar {
+    background-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-ProgressIndicator-progressBar {
+    background-color: #000000;
+  }
+}
+
 .ms-SearchBox {
   color: #333333;
   font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
@@ -5193,7 +5690,19 @@
 }
 
 .ms-SearchBox.is-disabled .ms-SearchBox-label {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-SearchBox.is-disabled .ms-SearchBox-label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-SearchBox.is-disabled .ms-SearchBox-label {
+    color: #600000;
+  }
 }
 
 .ms-SearchBox.is-disabled .ms-SearchBox-icon {
@@ -5218,7 +5727,7 @@
   margin: 0;
   padding: 0;
   box-shadow: none;
-  border: 1px solid #69afe5;
+  border: 1px solid #71afe5;
   outline: transparent 1px solid;
   border-radius: 0;
   font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
@@ -5233,7 +5742,7 @@
 
 .ms-SearchBox-field.hovering {
   border-color: #0078d7;
-  background-color: rgba(0, 120, 215, 0.2);
+  background-color: #deecf9;
 }
 
 .ms-SearchBox-field.hovering + .ms-SearchBox-label {
@@ -5247,7 +5756,7 @@
 .ms-SearchBox-field:focus {
   padding: 6px 32px 7px 10px;
   border-color: #0078d7;
-  background-color: rgba(0, 120, 215, 0.2);
+  background-color: #deecf9;
 }
 
 .ms-SearchBox-field::-ms-clear {
@@ -5306,6 +5815,18 @@
   opacity: 0;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Spinner-circle {
+    background-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Spinner-circle {
+    background-color: #000000;
+  }
+}
+
 .ms-Spinner-label {
   position: relative;
   color: #333333;
@@ -5320,35 +5841,45 @@
 .ms-Table {
   display: table;
   width: 100%;
+  border-collapse: collapse;
 }
 
+.ms-Table--fixed {
+  table-layout: fixed;
+}
+
+.ms-Table tr,
 .ms-Table-row {
   display: table-row;
-  height: 30px;
   line-height: 30px;
   font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
   font-size: 12px;
   color: #333333;
 }
 
+.ms-Table tr:hover,
 .ms-Table-row:hover {
   background-color: #f4f4f4;
   cursor: pointer;
   outline: 1px solid transparent;
 }
 
+.ms-Table tr.is-selected,
 .ms-Table-row.is-selected {
-  background-color: #b3d6f2;
+  background-color: #c7e0f4;
 }
 
+.ms-Table tr.is-selected .ms-Table-rowCheck,
 .ms-Table-row.is-selected .ms-Table-rowCheck {
   background-color: #0078d7;
 }
 
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
 .ms-Table-row.is-selected .ms-Table-rowCheck:before {
   display: none;
 }
 
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
 .ms-Table-row.is-selected .ms-Table-rowCheck:after {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -5366,23 +5897,35 @@
   top: 9px;
 }
 
+.ms-Table th,
+.ms-Table td,
 .ms-Table-cell {
   display: table-cell;
   padding: 0 10px;
 }
 
-.ms-Table-row:first-child {
+.ms-Table thead th,
+.ms-Table-head {
   font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
   font-size: 11px;
   color: #666666;
 }
 
-.ms-Table-row:first-child .ms-Table-cell,
-.ms-Table-row:first-child .ms-Table-rowCheck {
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+  font-weight: normal;
+  text-align: left;
   border-bottom: 1px solid #eaeaea;
 }
 
-.ms-Table-row:first-child .ms-Table-rowCheck:after {
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -5403,6 +5946,7 @@
   display: table-cell;
   width: 20px;
   position: relative;
+  padding: 0;
 }
 
 .ms-Table-rowCheck:before {
@@ -5446,7 +5990,35 @@
 }
 
 .ms-Label.is-disabled {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Label.is-disabled {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Label.is-disabled {
+    color: #600000;
+  }
+}
+
+.is-disabled .ms-Label {
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-TextField {
@@ -5506,7 +6078,7 @@
   padding: 6px 10px 8px;
   width: 100%;
   min-width: 180px;
-  outline: 1px solid transparent;
+  outline: 0;
 }
 
 .ms-TextField-field:hover {
@@ -5517,9 +6089,18 @@
   border-color: #0078d7;
 }
 
-.ms-TextField-field:hover,
-.ms-TextField-field:focus {
-  outline: 1px solid transparent;
+@media screen and (-ms-high-contrast: active) {
+  .ms-TextField-field:hover,
+  .ms-TextField-field:focus {
+    border-color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-TextField-field:hover,
+  .ms-TextField-field:focus {
+    border-color: #37006e;
+  }
 }
 
 .ms-TextField-field::-webkit-input-placeholder,
@@ -5551,7 +6132,19 @@
 }
 
 .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-TextField.ms-TextField--underlined {
@@ -5565,6 +6158,18 @@
   border-color: #767676;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-TextField.ms-TextField--underlined:hover {
+    border-color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-TextField.ms-TextField--underlined:hover {
+    border-color: #37006e;
+  }
+}
+
 .ms-TextField.ms-TextField--underlined:active,
 .ms-TextField.ms-TextField--underlined:focus {
   border-color: #0078d7;
@@ -5592,7 +6197,8 @@
 }
 
 .ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
-.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus {
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
   outline: 0;
 }
 
@@ -5601,7 +6207,19 @@
 }
 
 .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
@@ -5609,6 +6227,22 @@
   color: #a6a6a6;
 }
 
+.ms-TextField.ms-TextField--underlined.is-active {
+  border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-TextField.ms-TextField--underlined.is-active {
+    border-color: #1aebff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-TextField.ms-TextField--underlined.is-active {
+    border-color: #37006e;
+  }
+}
+
 .ms-TextField.ms-TextField--multiline .ms-TextField-field {
   color: #333333;
   font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
@@ -5641,7 +6275,35 @@
 }
 
 .ms-Label.is-disabled {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Label.is-disabled {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Label.is-disabled {
+    color: #600000;
+  }
+}
+
+.is-disabled .ms-Label {
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-Toggle {
@@ -5673,7 +6335,19 @@
 }
 
 .ms-Toggle.is-disabled .ms-Label {
-  color: #333333;
+  color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .ms-Toggle.is-disabled .ms-Label {
+    color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Toggle.is-disabled .ms-Label {
+    color: #600000;
+  }
 }
 
 .ms-Toggle.is-disabled .ms-Toggle-field {
@@ -5687,6 +6361,20 @@
   background-color: #c8c8c8 !important;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Toggle.is-disabled .ms-Toggle-field,
+  .ms-Toggle.is-disabled .ms-Toggle-field:before {
+    border-color: #00ff00;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Toggle.is-disabled .ms-Toggle-field,
+  .ms-Toggle.is-disabled .ms-Toggle-field:before {
+    border-color: #600000;
+  }
+}
+
 .ms-Toggle-description {
   position: relative;
   font-size: 12px;
@@ -5728,6 +6416,20 @@
   outline: 2px solid transparent;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Toggle-input + .ms-Toggle-field:before {
+    border: 2.5px solid #ffffff;
+    height: 15px;
+    outline: 0;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Toggle-input + .ms-Toggle-field:before {
+    border-color: #000000;
+  }
+}
+
 .ms-Toggle-input + .ms-Toggle-field:before {
   right: auto;
   border-right: 2.5px solid #ffffff;
@@ -5762,6 +6464,20 @@
   outline: 2px solid transparent;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Toggle-input:checked + .ms-Toggle-field:before {
+    border: 2.5px solid #ffffff;
+    height: 15px;
+    outline: 0;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Toggle-input:checked + .ms-Toggle-field:before {
+    border-color: #000000;
+  }
+}
+
 .ms-Toggle-input:checked + .ms-Toggle-field:before {
   left: auto;
   border-left: 2.5px solid #ffffff;
@@ -5779,6 +6495,18 @@
   display: block;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .ms-Toggle-input:checked + .ms-Toggle-field {
+    background-color: #ffffff;
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-Toggle-input:checked + .ms-Toggle-field {
+    background-color: #000000;
+  }
+}
+
 .ms-Toggle-input:focus + .ms-Toggle-field,
 .ms-Toggle-input:hover + .ms-Toggle-field {
   background-color: #eaeaea;
diff --git a/packages/au1-app/src/resources/sass/Fabric.Scoped.scss b/packages/au1-app/src/resources/sass/Fabric.Scoped.scss
new file mode 100644
index 0000000..cbd345b
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/Fabric.Scoped.scss
@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// Core styles scoped to the current major version of Fabric
+
+// Variable is set during gulp task as comma seperated list. i.e. 5,1,0
+$ms-fabric-version: 11,0,1;
+
+@import './References';
+@import './mixins/ScopedStyles.Mixins';
+
+// Sets a global flag to enable scoped styles within certain files
+$do-scope-styles: true;
+
+// Scope all core styles under a helper class for the current major version.
+// This produces styles of the form .ms-Fabric-{version #} .ms-font-m.
+
+@include scope-fabric {
+  @import './Animation';
+  @import './BrandIcon';
+  @import './Color';
+  @import './Font';
+  @import './Grid';
+  @import './Icon';
+  @import './Responsive';
+  @import './Utility';
+  @import './Wrapper';
+}
+
+// @font-face definitions do not need to be scoped
+  @import './Font.Definitions';
+  @import './Icon.Definitions';
diff --git a/packages/au1-app/src/resources/sass/Fabric.scss b/packages/au1-app/src/resources/sass/Fabric.scss
new file mode 100644
index 0000000..2427e36
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/Fabric.scss
@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// OSS Framework Design Language
+// --------------------------------------------------
+// Fabric Core Module Loader (LTR)
+
+// Variables and mixins
+@import './References';
+
+// Partials that output CSS
+@import './Animation';
+@import './BrandIcon';
+@import './Color';
+@import './Color.Background';
+@import './Color.Border';
+@import './Color.Font';
+@import './Depth';
+@import './Font';
+@import './Font.Definitions';
+@import './Grid';
+@import './Icon';
+@import './Icon.Definitions';
+@import './Responsive';
+@import './Utility';
+@import './Wrapper';
diff --git a/packages/au1-app/src/resources/sass/ThemingSass.scss b/packages/au1-app/src/resources/sass/ThemingSass.scss
new file mode 100644
index 0000000..00ee5e3
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/ThemingSass.scss
@@ -0,0 +1,6 @@
+/** Imports all theming-related SASS files. */
+@import './effects';
+@import './legacyThemePalette';
+@import './semanticSlots';
+@import './themeOverrides';
+@import './themeVariables';
diff --git a/packages/au1-app/src/resources/sass/_Animation.MDL2.scss b/packages/au1-app/src/resources/sass/_Animation.MDL2.scss
new file mode 100644
index 0000000..4c3566d
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Animation.MDL2.scss
@@ -0,0 +1,170 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+// Output all @keyframes needed for the animations
+@include ms-animation-keyframes;
+
+// Slide
+.ms-slideRightIn10 {
+  @include ms-slideRightIn10;
+}
+
+.ms-slideRightIn20 {
+  @include ms-slideRightIn20;
+}
+
+.ms-slideRightIn40 {
+  @include ms-slideRightIn40;
+}
+
+.ms-slideRightIn400 {
+  @include ms-slideRightIn400;
+}
+
+.ms-slideRightOut40 {
+  @include ms-slideRightOut40;
+}
+
+.ms-slideRightOut400 {
+  @include ms-slideRightOut400;
+}
+
+.ms-slideLeftIn10 {
+  @include ms-slideLeftIn10;
+}
+
+.ms-slideLeftIn20 {
+  @include ms-slideLeftIn20;
+}
+
+.ms-slideLeftIn40 {
+  @include ms-slideLeftIn40;
+}
+
+.ms-slideLeftIn400 {
+  @include ms-slideLeftIn400;
+}
+
+.ms-slideLeftOut40 {
+  @include ms-slideLeftOut40;
+}
+
+.ms-slideLeftOut400 {
+  @include ms-slideLeftOut400;
+}
+
+.ms-slideUpIn10 {
+  @include ms-slideUpIn10;
+}
+
+.ms-slideUpIn20 {
+  @include ms-slideUpIn20;
+}
+
+.ms-slideDownIn10 {
+  @include ms-slideDownIn10;
+}
+
+.ms-slideDownIn20 {
+  @include ms-slideDownIn20;
+}
+
+.ms-slideUpOut10 {
+  @include ms-slideUpOut10;
+}
+
+.ms-slideUpOut20 {
+  @include ms-slideUpOut20;
+}
+
+.ms-slideDownOut10 {
+  @include ms-slideDownOut10;
+}
+
+.ms-slideDownOut20 {
+  @include ms-slideDownOut20;
+}
+
+// Scale
+.ms-scaleUpIn100 {
+  @include ms-scaleUpIn100;
+}
+
+.ms-scaleUpOut103 {
+  @include ms-scaleUpOut103;
+}
+
+.ms-scaleDownOut98 {
+  @include ms-scaleDownOut98;
+}
+
+.ms-scaleDownIn100 {
+  @include ms-scaleDownIn100;
+}
+
+// Fade
+
+.ms-fadeIn100 {
+  @include ms-fadeIn100;
+}
+
+.ms-fadeIn200 {
+  @include ms-fadeIn200;
+}
+
+.ms-fadeIn400 {
+  @include ms-fadeIn400;
+}
+
+.ms-fadeIn500 {
+  @include ms-fadeIn500;
+}
+
+.ms-fadeOut100 {
+  @include ms-fadeOut100;
+}
+
+.ms-fadeOut200 {
+  @include ms-fadeOut200;
+}
+
+.ms-fadeOut400 {
+  @include ms-fadeOut400;
+}
+
+.ms-fadeOut500 {
+  @include ms-fadeOut500;
+}
+
+// Expand-collapse
+
+.ms-expandCollapse100 {
+  @include ms-expandCollapse100;
+}
+
+.ms-expandCollapse200 {
+  @include ms-expandCollapse200;
+}
+
+.ms-expandCollapse400 {
+  @include ms-expandCollapse400;
+}
+
+// Delay
+.ms-delay100 {
+  @include ms-delay100;
+}
+
+.ms-delay200 {
+  @include ms-delay200;
+}
+
+// Rotate
+.ms-rotate90deg {
+  @include ms-rotate90deg;
+}
+
+.ms-rotateN90deg {
+  @include ms-rotateN90deg;
+}
diff --git a/packages/au1-app/src/resources/sass/_Animation.scss b/packages/au1-app/src/resources/sass/_Animation.scss
new file mode 100644
index 0000000..72b1133
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Animation.scss
@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Output all keyframes used by the motion classes.
+@include ms-motion-keyframes;
+
+// Fades.
+.ms-motion-fadeIn {
+  @include ms-motion-fadeIn;
+}
+
+.ms-motion-fadeOut {
+  @include ms-motion-fadeOut;
+}
+
+// Scales.
+.ms-motion-scaleDownIn {
+  @include ms-motion-scaleDownIn;
+}
+
+.ms-motion-scaleDownOut {
+  @include ms-motion-scaleDownOut;
+}
+
+// Slides.
+.ms-motion-slideLeftOut {
+  @include ms-motion-slideLeftOut;
+}
+
+.ms-motion-slideRightOut {
+  @include ms-motion-slideRightOut;
+}
+
+.ms-motion-slideLeftIn {
+  @include ms-motion-slideLeftIn;
+}
+
+.ms-motion-slideRightIn {
+  @include ms-motion-slideRightIn;
+}
+
+.ms-motion-slideUpOut {
+  @include ms-motion-slideUpOut;
+}
+
+.ms-motion-slideDownOut {
+  @include ms-motion-slideDownOut;
+}
+
+.ms-motion-slideUpIn {
+  @include ms-motion-slideUpIn;
+}
+
+.ms-motion-slideDownIn {
+  @include ms-motion-slideDownIn;
+}
diff --git a/packages/au1-app/src/resources/sass/_BrandIcon.scss b/packages/au1-app/src/resources/sass/_BrandIcon.scss
new file mode 100644
index 0000000..a2498ab
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_BrandIcon.scss
@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@include ms-brand-icon-classes('1');
+@include ms-brand-icon-size-classes();
+
+// Pixel Ratio 1.5
+@media only screen and (min-resolution: 144dpi) {
+  @include ms-brand-icon-classes('1_5');
+}
+
+// Pixel Ratio 2
+@media only screen and (min-resolution: 192dpi)  {
+  @include ms-brand-icon-classes('2');
+}
+
+// Pixel Ratio 3
+@media only screen and (min-resolution: 288dpi) {
+  @include ms-brand-icon-classes('3');
+}
+
+// The 'onepkg' and 'xls' icons have been deprecated. These classes will be removed in
+// a future release. Until then, they are mapped to 'one' and 'xlsx'.
+
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png);
+}
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png);
+}
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png);
+}
+
+.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png);
+}
+.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png);
+}
+.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png);
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png);
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png);
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png);
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/_Color.Background.scss b/packages/au1-app/src/resources/sass/_Color.Background.scss
new file mode 100644
index 0000000..f113932
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Color.Background.scss
@@ -0,0 +1,271 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+.ms-bgColor-communicationShade30,
+.ms-bgColor-communicationShade30--hover:hover {
+  @include ms-bgColor-communicationShade30;
+}
+.ms-bgColor-communicationShade20,
+.ms-bgColor-communicationShade20--hover:hover {
+  @include ms-bgColor-communicationShade20;
+}
+.ms-bgColor-communicationShade10,
+.ms-bgColor-communicationShade10--hover:hover {
+  @include ms-bgColor-communicationShade10;
+}
+.ms-bgColor-communicationPrimary,
+.ms-bgColor-communicationPrimary--hover:hover {
+  @include ms-bgColor-communicationPrimary;
+}
+.ms-bgColor-communicationTint10,
+.ms-bgColor-communicationTint10--hover:hover {
+  @include ms-bgColor-communicationTint10;
+}
+.ms-bgColor-communicationTint20,
+.ms-bgColor-communicationTint20--hover:hover {
+  @include ms-bgColor-communicationTint20;
+}
+.ms-bgColor-communicationTint30,
+.ms-bgColor-communicationTint30--hover:hover {
+  @include ms-bgColor-communicationTint30;
+}
+.ms-bgColor-communicationTint40,
+.ms-bgColor-communicationTint40--hover:hover {
+  @include ms-bgColor-communicationTint40;
+}
+
+// Neutral
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+  @include ms-bgColor-black;
+}
+.ms-bgColor-gray220,
+.ms-bgColor-gray220--hover:hover {
+  @include ms-bgColor-gray220;
+}
+.ms-bgColor-gray210,
+.ms-bgColor-gray210--hover:hover {
+  @include ms-bgColor-gray210;
+}
+.ms-bgColor-gray200,
+.ms-bgColor-gray200--hover:hover {
+  @include ms-bgColor-gray200;
+}
+.ms-bgColor-gray190,
+.ms-bgColor-gray190--hover:hover {
+  @include ms-bgColor-gray190;
+}
+.ms-bgColor-gray180,
+.ms-bgColor-gray180--hover:hover {
+  @include ms-bgColor-gray180;
+}
+.ms-bgColor-gray170,
+.ms-bgColor-gray170--hover:hover {
+  @include ms-bgColor-gray170;
+}
+.ms-bgColor-gray160,
+.ms-bgColor-gray160--hover:hover {
+  @include ms-bgColor-gray160;
+}
+.ms-bgColor-gray150,
+.ms-bgColor-gray150--hover:hover {
+  @include ms-bgColor-gray150;
+}
+.ms-bgColor-gray140,
+.ms-bgColor-gray140--hover:hover {
+  @include ms-bgColor-gray140;
+}
+.ms-bgColor-gray130,
+.ms-bgColor-gray130--hover:hover {
+  @include ms-bgColor-gray130;
+}
+.ms-bgColor-gray120,
+.ms-bgColor-gray120--hover:hover {
+  @include ms-bgColor-gray120;
+}
+.ms-bgColor-gray110,
+.ms-bgColor-gray110--hover:hover {
+  @include ms-bgColor-gray110;
+}
+.ms-bgColor-gray100,
+.ms-bgColor-gray100--hover:hover {
+  @include ms-bgColor-gray100;
+}
+.ms-bgColor-gray90,
+.ms-bgColor-gray90--hover:hover {
+  @include ms-bgColor-gray90;
+}
+.ms-bgColor-gray80,
+.ms-bgColor-gray80--hover:hover {
+  @include ms-bgColor-gray80;
+}
+.ms-bgColor-gray70,
+.ms-bgColor-gray70--hover:hover {
+  @include ms-bgColor-gray70;
+}
+.ms-bgColor-gray60,
+.ms-bgColor-gray60--hover:hover {
+  @include ms-bgColor-gray60;
+}
+.ms-bgColor-gray50,
+.ms-bgColor-gray50--hover:hover {
+  @include ms-bgColor-gray50;
+}
+.ms-bgColor-gray40,
+.ms-bgColor-gray40--hover:hover {
+  @include ms-bgColor-gray40;
+}
+.ms-bgColor-gray30,
+.ms-bgColor-gray30--hover:hover {
+  @include ms-bgColor-gray30;
+}
+.ms-bgColor-gray20,
+.ms-bgColor-gray20--hover:hover {
+  @include ms-bgColor-gray20;
+}
+.ms-bgColor-gray10,
+.ms-bgColor-gray10--hover:hover {
+  @include ms-bgColor-gray10;
+}
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+  @include ms-bgColor-white;
+}
+
+// Shared
+.ms-bgColor-sharedPinkRed10,
+.ms-bgColor-sharedPinkRed10--hover:hover {
+  @include ms-bgColor-sharedPinkRed10;
+}
+.ms-bgColor-sharedRed20,
+.ms-bgColor-sharedRed20--hover:hover {
+  @include ms-bgColor-sharedRed20;
+}
+.ms-bgColor-sharedRed10,
+.ms-bgColor-sharedRed10--hover:hover {
+  @include ms-bgColor-sharedRed10;
+}
+.ms-bgColor-sharedRedOrange20,
+.ms-bgColor-sharedRedOrange20--hover:hover {
+  @include ms-bgColor-sharedRedOrange20;
+}
+.ms-bgColor-sharedRedOrange10,
+.ms-bgColor-sharedRedOrange10--hover:hover {
+  @include ms-bgColor-sharedRedOrange10;
+}
+.ms-bgColor-sharedOrange30,
+.ms-bgColor-sharedOrange30--hover:hover {
+  @include ms-bgColor-sharedOrange30;
+}
+.ms-bgColor-sharedOrange20,
+.ms-bgColor-sharedOrange20--hover:hover {
+  @include ms-bgColor-sharedOrange20;
+}
+.ms-bgColor-sharedOrange10,
+.ms-bgColor-sharedOrange10--hover:hover {
+  @include ms-bgColor-sharedOrange10;
+}
+.ms-bgColor-sharedYellow10,
+.ms-bgColor-sharedYellow10--hover:hover {
+  @include ms-bgColor-sharedYellow10;
+}
+.ms-bgColor-sharedOrangeYellow20,
+.ms-bgColor-sharedOrangeYellow20--hover:hover {
+  @include ms-bgColor-sharedOrangeYellow20;
+}
+.ms-bgColor-sharedOrangeYellow10,
+.ms-bgColor-sharedOrangeYellow10--hover:hover {
+  @include ms-bgColor-sharedOrangeYellow10;
+}
+.ms-bgColor-sharedYellowGreen10,
+.ms-bgColor-sharedYellowGreen10--hover:hover {
+  @include ms-bgColor-sharedYellowGreen10;
+}
+.ms-bgColor-sharedGreen20,
+.ms-bgColor-sharedGreen20--hover:hover {
+  @include ms-bgColor-sharedGreen20;
+}
+.ms-bgColor-sharedGreen10,
+.ms-bgColor-sharedGreen10--hover:hover {
+  @include ms-bgColor-sharedGreen10;
+}
+.ms-bgColor-sharedGreenCyan10,
+.ms-bgColor-sharedGreenCyan10--hover:hover {
+  @include ms-bgColor-sharedGreenCyan10;
+}
+.ms-bgColor-sharedCyan40,
+.ms-bgColor-sharedCyan40--hover:hover {
+  @include ms-bgColor-sharedCyan40;
+}
+.ms-bgColor-sharedCyan30,
+.ms-bgColor-sharedCyan30--hover:hover {
+  @include ms-bgColor-sharedCyan30;
+}
+.ms-bgColor-sharedCyan20,
+.ms-bgColor-sharedCyan20--hover:hover {
+  @include ms-bgColor-sharedCyan20;
+}
+.ms-bgColor-sharedCyan10,
+.ms-bgColor-sharedCyan10--hover:hover {
+  @include ms-bgColor-sharedCyan10;
+}
+.ms-bgColor-sharedCyanBlue20,
+.ms-bgColor-sharedCyanBlue20--hover:hover {
+  @include ms-bgColor-sharedCyanBlue20;
+}
+.ms-bgColor-sharedCyanBlue10,
+.ms-bgColor-sharedCyanBlue10--hover:hover {
+  @include ms-bgColor-sharedCyanBlue10;
+}
+.ms-bgColor-sharedBlue10,
+.ms-bgColor-sharedBlue10--hover:hover {
+  @include ms-bgColor-sharedBlue10;
+}
+.ms-bgColor-sharedBlueMagenta40,
+.ms-bgColor-sharedBlueMagenta40--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta40;
+}
+.ms-bgColor-sharedBlueMagenta30,
+.ms-bgColor-sharedBlueMagenta30--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta30;
+}
+.ms-bgColor-sharedBlueMagenta20,
+.ms-bgColor-sharedBlueMagenta20--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta20;
+}
+.ms-bgColor-sharedBlueMagenta10,
+.ms-bgColor-sharedBlueMagenta10--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta10;
+}
+.ms-bgColor-sharedMagenta20,
+.ms-bgColor-sharedMagenta20--hover:hover {
+  @include ms-bgColor-sharedMagenta20;
+}
+.ms-bgColor-sharedMagenta10,
+.ms-bgColor-sharedMagenta10--hover:hover {
+  @include ms-bgColor-sharedMagenta10;
+}
+.ms-bgColor-sharedMagentaPink20,
+.ms-bgColor-sharedMagentaPink20--hover:hover {
+  @include ms-bgColor-sharedMagentaPink20;
+}
+.ms-bgColor-sharedMagentaPink10,
+.ms-bgColor-sharedMagentaPink10--hover:hover {
+  @include ms-bgColor-sharedMagentaPink10;
+}
+.ms-bgColor-sharedGray40,
+.ms-bgColor-sharedGray40--hover:hover {
+  @include ms-bgColor-sharedGray40;
+}
+.ms-bgColor-sharedGray30,
+.ms-bgColor-sharedGray30--hover:hover {
+  @include ms-bgColor-sharedGray30;
+}
+.ms-bgColor-sharedGray20,
+.ms-bgColor-sharedGray20--hover:hover {
+  @include ms-bgColor-sharedGray20;
+}
+.ms-bgColor-sharedGray10,
+.ms-bgColor-sharedGray10--hover:hover {
+  @include ms-bgColor-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/_Color.Border.scss b/packages/au1-app/src/resources/sass/_Color.Border.scss
new file mode 100644
index 0000000..13735b7
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Color.Border.scss
@@ -0,0 +1,271 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+.ms-borderColor-communicationShade30,
+.ms-borderColor-communicationShade30--hover:hover {
+  @include ms-borderColor-communicationShade30;
+}
+.ms-borderColor-communicationShade20,
+.ms-borderColor-communicationShade20--hover:hover {
+  @include ms-borderColor-communicationShade20;
+}
+.ms-borderColor-communicationShade10,
+.ms-borderColor-communicationShade10--hover:hover {
+  @include ms-borderColor-communicationShade10;
+}
+.ms-borderColor-communicationPrimary,
+.ms-borderColor-communicationPrimary--hover:hover {
+  @include ms-borderColor-communicationPrimary;
+}
+.ms-borderColor-communicationTint10,
+.ms-borderColor-communicationTint10--hover:hover {
+  @include ms-borderColor-communicationTint10;
+}
+.ms-borderColor-communicationTint20,
+.ms-borderColor-communicationTint20--hover:hover {
+  @include ms-borderColor-communicationTint20;
+}
+.ms-borderColor-communicationTint30,
+.ms-borderColor-communicationTint30--hover:hover {
+  @include ms-borderColor-communicationTint30;
+}
+.ms-borderColor-communicationTint40,
+.ms-borderColor-communicationTint40--hover:hover {
+  @include ms-borderColor-communicationTint40;
+}
+
+// Neutral
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+  @include ms-borderColor-black;
+}
+.ms-borderColor-gray220,
+.ms-borderColor-gray220--hover:hover {
+  @include ms-borderColor-gray220;
+}
+.ms-borderColor-gray210,
+.ms-borderColor-gray210--hover:hover {
+  @include ms-borderColor-gray210;
+}
+.ms-borderColor-gray200,
+.ms-borderColor-gray200--hover:hover {
+  @include ms-borderColor-gray200;
+}
+.ms-borderColor-gray190,
+.ms-borderColor-gray190--hover:hover {
+  @include ms-borderColor-gray190;
+}
+.ms-borderColor-gray180,
+.ms-borderColor-gray180--hover:hover {
+  @include ms-borderColor-gray180;
+}
+.ms-borderColor-gray170,
+.ms-borderColor-gray170--hover:hover {
+  @include ms-borderColor-gray170;
+}
+.ms-borderColor-gray160,
+.ms-borderColor-gray160--hover:hover {
+  @include ms-borderColor-gray160;
+}
+.ms-borderColor-gray150,
+.ms-borderColor-gray150--hover:hover {
+  @include ms-borderColor-gray150;
+}
+.ms-borderColor-gray140,
+.ms-borderColor-gray140--hover:hover {
+  @include ms-borderColor-gray140;
+}
+.ms-borderColor-gray130,
+.ms-borderColor-gray130--hover:hover {
+  @include ms-borderColor-gray130;
+}
+.ms-borderColor-gray120,
+.ms-borderColor-gray120--hover:hover {
+  @include ms-borderColor-gray120;
+}
+.ms-borderColor-gray110,
+.ms-borderColor-gray110--hover:hover {
+  @include ms-borderColor-gray110;
+}
+.ms-borderColor-gray100,
+.ms-borderColor-gray100--hover:hover {
+  @include ms-borderColor-gray100;
+}
+.ms-borderColor-gray90,
+.ms-borderColor-gray90--hover:hover {
+  @include ms-borderColor-gray90;
+}
+.ms-borderColor-gray80,
+.ms-borderColor-gray80--hover:hover {
+  @include ms-borderColor-gray80;
+}
+.ms-borderColor-gray70,
+.ms-borderColor-gray70--hover:hover {
+  @include ms-borderColor-gray70;
+}
+.ms-borderColor-gray60,
+.ms-borderColor-gray60--hover:hover {
+  @include ms-borderColor-gray60;
+}
+.ms-borderColor-gray50,
+.ms-borderColor-gray50--hover:hover {
+  @include ms-borderColor-gray50;
+}
+.ms-borderColor-gray40,
+.ms-borderColor-gray40--hover:hover {
+  @include ms-borderColor-gray40;
+}
+.ms-borderColor-gray30,
+.ms-borderColor-gray30--hover:hover {
+  @include ms-borderColor-gray30;
+}
+.ms-borderColor-gray20,
+.ms-borderColor-gray20--hover:hover {
+  @include ms-borderColor-gray20;
+}
+.ms-borderColor-gray10,
+.ms-borderColor-gray10--hover:hover {
+  @include ms-borderColor-gray10;
+}
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+  @include ms-borderColor-white;
+}
+
+// Shared
+.ms-borderColor-sharedPinkRed10,
+.ms-borderColor-sharedPinkRed10--hover:hover {
+  @include ms-borderColor-sharedPinkRed10;
+}
+.ms-borderColor-sharedRed20,
+.ms-borderColor-sharedRed20--hover:hover {
+  @include ms-borderColor-sharedRed20;
+}
+.ms-borderColor-sharedRed10,
+.ms-borderColor-sharedRed10--hover:hover {
+  @include ms-borderColor-sharedRed10;
+}
+.ms-borderColor-sharedRedOrange20,
+.ms-borderColor-sharedRedOrange20--hover:hover {
+  @include ms-borderColor-sharedRedOrange20;
+}
+.ms-borderColor-sharedRedOrange10,
+.ms-borderColor-sharedRedOrange10--hover:hover {
+  @include ms-borderColor-sharedRedOrange10;
+}
+.ms-borderColor-sharedOrange30,
+.ms-borderColor-sharedOrange30--hover:hover {
+  @include ms-borderColor-sharedOrange30;
+}
+.ms-borderColor-sharedOrange20,
+.ms-borderColor-sharedOrange20--hover:hover {
+  @include ms-borderColor-sharedOrange20;
+}
+.ms-borderColor-sharedOrange10,
+.ms-borderColor-sharedOrange10--hover:hover {
+  @include ms-borderColor-sharedOrange10;
+}
+.ms-borderColor-sharedYellow10,
+.ms-borderColor-sharedYellow10--hover:hover {
+  @include ms-borderColor-sharedYellow10;
+}
+.ms-borderColor-sharedOrangeYellow20,
+.ms-borderColor-sharedOrangeYellow20--hover:hover {
+  @include ms-borderColor-sharedOrangeYellow20;
+}
+.ms-borderColor-sharedOrangeYellow10,
+.ms-borderColor-sharedOrangeYellow10--hover:hover {
+  @include ms-borderColor-sharedOrangeYellow10;
+}
+.ms-borderColor-sharedYellowGreen10,
+.ms-borderColor-sharedYellowGreen10--hover:hover {
+  @include ms-borderColor-sharedYellowGreen10;
+}
+.ms-borderColor-sharedGreen20,
+.ms-borderColor-sharedGreen20--hover:hover {
+  @include ms-borderColor-sharedGreen20;
+}
+.ms-borderColor-sharedGreen10,
+.ms-borderColor-sharedGreen10--hover:hover {
+  @include ms-borderColor-sharedGreen10;
+}
+.ms-borderColor-sharedGreenCyan10,
+.ms-borderColor-sharedGreenCyan10--hover:hover {
+  @include ms-borderColor-sharedGreenCyan10;
+}
+.ms-borderColor-sharedCyan40,
+.ms-borderColor-sharedCyan40--hover:hover {
+  @include ms-borderColor-sharedCyan40;
+}
+.ms-borderColor-sharedCyan30,
+.ms-borderColor-sharedCyan30--hover:hover {
+  @include ms-borderColor-sharedCyan30;
+}
+.ms-borderColor-sharedCyan20,
+.ms-borderColor-sharedCyan20--hover:hover {
+  @include ms-borderColor-sharedCyan20;
+}
+.ms-borderColor-sharedCyan10,
+.ms-borderColor-sharedCyan10--hover:hover {
+  @include ms-borderColor-sharedCyan10;
+}
+.ms-borderColor-sharedCyanBlue20,
+.ms-borderColor-sharedCyanBlue20--hover:hover {
+  @include ms-borderColor-sharedCyanBlue20;
+}
+.ms-borderColor-sharedCyanBlue10,
+.ms-borderColor-sharedCyanBlue10--hover:hover {
+  @include ms-borderColor-sharedCyanBlue10;
+}
+.ms-borderColor-sharedBlue10,
+.ms-borderColor-sharedBlue10--hover:hover {
+  @include ms-borderColor-sharedBlue10;
+}
+.ms-borderColor-sharedBlueMagenta40,
+.ms-borderColor-sharedBlueMagenta40--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta40;
+}
+.ms-borderColor-sharedBlueMagenta30,
+.ms-borderColor-sharedBlueMagenta30--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta30;
+}
+.ms-borderColor-sharedBlueMagenta20,
+.ms-borderColor-sharedBlueMagenta20--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta20;
+}
+.ms-borderColor-sharedBlueMagenta10,
+.ms-borderColor-sharedBlueMagenta10--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta10;
+}
+.ms-borderColor-sharedMagenta20,
+.ms-borderColor-sharedMagenta20--hover:hover {
+  @include ms-borderColor-sharedMagenta20;
+}
+.ms-borderColor-sharedMagenta10,
+.ms-borderColor-sharedMagenta10--hover:hover {
+  @include ms-borderColor-sharedMagenta10;
+}
+.ms-borderColor-sharedMagentaPink20,
+.ms-borderColor-sharedMagentaPink20--hover:hover {
+  @include ms-borderColor-sharedMagentaPink20;
+}
+.ms-borderColor-sharedMagentaPink10,
+.ms-borderColor-sharedMagentaPink10--hover:hover {
+  @include ms-borderColor-sharedMagentaPink10;
+}
+.ms-borderColor-sharedGray40,
+.ms-borderColor-sharedGray40--hover:hover {
+  @include ms-borderColor-sharedGray40;
+}
+.ms-borderColor-sharedGray30,
+.ms-borderColor-sharedGray30--hover:hover {
+  @include ms-borderColor-sharedGray30;
+}
+.ms-borderColor-sharedGray20,
+.ms-borderColor-sharedGray20--hover:hover {
+  @include ms-borderColor-sharedGray20;
+}
+.ms-borderColor-sharedGray10,
+.ms-borderColor-sharedGray10--hover:hover {
+  @include ms-borderColor-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/_Color.Font.scss b/packages/au1-app/src/resources/sass/_Color.Font.scss
new file mode 100644
index 0000000..91e1d18
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Color.Font.scss
@@ -0,0 +1,272 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+
+// Communication
+.ms-fontColor-communicationShade30,
+.ms-fontColor-communicationShade30--hover:hover {
+  @include ms-fontColor-communicationShade30;
+}
+.ms-fontColor-communicationShade20,
+.ms-fontColor-communicationShade20--hover:hover {
+  @include ms-fontColor-communicationShade20;
+}
+.ms-fontColor-communicationShade10,
+.ms-fontColor-communicationShade10--hover:hover {
+  @include ms-fontColor-communicationShade10;
+}
+.ms-fontColor-communicationPrimary,
+.ms-fontColor-communicationPrimary--hover:hover {
+  @include ms-fontColor-communicationPrimary;
+}
+.ms-fontColor-communicationTint10,
+.ms-fontColor-communicationTint10--hover:hover {
+  @include ms-fontColor-communicationTint10;
+}
+.ms-fontColor-communicationTint20,
+.ms-fontColor-communicationTint20--hover:hover {
+  @include ms-fontColor-communicationTint20;
+}
+.ms-fontColor-communicationTint30,
+.ms-fontColor-communicationTint30--hover:hover {
+  @include ms-fontColor-communicationTint30;
+}
+.ms-fontColor-communicationTint40,
+.ms-fontColor-communicationTint40--hover:hover {
+  @include ms-fontColor-communicationTint40;
+}
+
+// Neutral
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+  @include ms-fontColor-black;
+}
+.ms-fontColor-gray220,
+.ms-fontColor-gray220--hover:hover {
+  @include ms-fontColor-gray220;
+}
+.ms-fontColor-gray210,
+.ms-fontColor-gray210--hover:hover {
+  @include ms-fontColor-gray210;
+}
+.ms-fontColor-gray200,
+.ms-fontColor-gray200--hover:hover {
+  @include ms-fontColor-gray200;
+}
+.ms-fontColor-gray190,
+.ms-fontColor-gray190--hover:hover {
+  @include ms-fontColor-gray190;
+}
+.ms-fontColor-gray180,
+.ms-fontColor-gray180--hover:hover {
+  @include ms-fontColor-gray180;
+}
+.ms-fontColor-gray170,
+.ms-fontColor-gray170--hover:hover {
+  @include ms-fontColor-gray170;
+}
+.ms-fontColor-gray160,
+.ms-fontColor-gray160--hover:hover {
+  @include ms-fontColor-gray160;
+}
+.ms-fontColor-gray150,
+.ms-fontColor-gray150--hover:hover {
+  @include ms-fontColor-gray150;
+}
+.ms-fontColor-gray140,
+.ms-fontColor-gray140--hover:hover {
+  @include ms-fontColor-gray140;
+}
+.ms-fontColor-gray130,
+.ms-fontColor-gray130--hover:hover {
+  @include ms-fontColor-gray130;
+}
+.ms-fontColor-gray120,
+.ms-fontColor-gray120--hover:hover {
+  @include ms-fontColor-gray120;
+}
+.ms-fontColor-gray110,
+.ms-fontColor-gray110--hover:hover {
+  @include ms-fontColor-gray110;
+}
+.ms-fontColor-gray100,
+.ms-fontColor-gray100--hover:hover {
+  @include ms-fontColor-gray100;
+}
+.ms-fontColor-gray90,
+.ms-fontColor-gray90--hover:hover {
+  @include ms-fontColor-gray90;
+}
+.ms-fontColor-gray80,
+.ms-fontColor-gray80--hover:hover {
+  @include ms-fontColor-gray80;
+}
+.ms-fontColor-gray70,
+.ms-fontColor-gray70--hover:hover {
+  @include ms-fontColor-gray70;
+}
+.ms-fontColor-gray60,
+.ms-fontColor-gray60--hover:hover {
+  @include ms-fontColor-gray60;
+}
+.ms-fontColor-gray50,
+.ms-fontColor-gray50--hover:hover {
+  @include ms-fontColor-gray50;
+}
+.ms-fontColor-gray40,
+.ms-fontColor-gray40--hover:hover {
+  @include ms-fontColor-gray40;
+}
+.ms-fontColor-gray30,
+.ms-fontColor-gray30--hover:hover {
+  @include ms-fontColor-gray30;
+}
+.ms-fontColor-gray20,
+.ms-fontColor-gray20--hover:hover {
+  @include ms-fontColor-gray20;
+}
+.ms-fontColor-gray10,
+.ms-fontColor-gray10--hover:hover {
+  @include ms-fontColor-gray10;
+}
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+  @include ms-fontColor-white;
+}
+
+// Shared
+.ms-fontColor-sharedPinkRed10,
+.ms-fontColor-sharedPinkRed10--hover:hover {
+  @include ms-fontColor-sharedPinkRed10;
+}
+.ms-fontColor-sharedRed20,
+.ms-fontColor-sharedRed20--hover:hover {
+  @include ms-fontColor-sharedRed20;
+}
+.ms-fontColor-sharedRed10,
+.ms-fontColor-sharedRed10--hover:hover {
+  @include ms-fontColor-sharedRed10;
+}
+.ms-fontColor-sharedRedOrange20,
+.ms-fontColor-sharedRedOrange20--hover:hover {
+  @include ms-fontColor-sharedRedOrange20;
+}
+.ms-fontColor-sharedRedOrange10,
+.ms-fontColor-sharedRedOrange10--hover:hover {
+  @include ms-fontColor-sharedRedOrange10;
+}
+.ms-fontColor-sharedOrange30,
+.ms-fontColor-sharedOrange30--hover:hover {
+  @include ms-fontColor-sharedOrange30;
+}
+.ms-fontColor-sharedOrange20,
+.ms-fontColor-sharedOrange20--hover:hover {
+  @include ms-fontColor-sharedOrange20;
+}
+.ms-fontColor-sharedOrange10,
+.ms-fontColor-sharedOrange10--hover:hover {
+  @include ms-fontColor-sharedOrange10;
+}
+.ms-fontColor-sharedYellow10,
+.ms-fontColor-sharedYellow10--hover:hover {
+  @include ms-fontColor-sharedYellow10;
+}
+.ms-fontColor-sharedOrangeYellow20,
+.ms-fontColor-sharedOrangeYellow20--hover:hover {
+  @include ms-fontColor-sharedOrangeYellow20;
+}
+.ms-fontColor-sharedOrangeYellow10,
+.ms-fontColor-sharedOrangeYellow10--hover:hover {
+  @include ms-fontColor-sharedOrangeYellow10;
+}
+.ms-fontColor-sharedYellowGreen10,
+.ms-fontColor-sharedYellowGreen10--hover:hover {
+  @include ms-fontColor-sharedYellowGreen10;
+}
+.ms-fontColor-sharedGreen20,
+.ms-fontColor-sharedGreen20--hover:hover {
+  @include ms-fontColor-sharedGreen20;
+}
+.ms-fontColor-sharedGreen10,
+.ms-fontColor-sharedGreen10--hover:hover {
+  @include ms-fontColor-sharedGreen10;
+}
+.ms-fontColor-sharedGreenCyan10,
+.ms-fontColor-sharedGreenCyan10--hover:hover {
+  @include ms-fontColor-sharedGreenCyan10;
+}
+.ms-fontColor-sharedCyan40,
+.ms-fontColor-sharedCyan40--hover:hover {
+  @include ms-fontColor-sharedCyan40;
+}
+.ms-fontColor-sharedCyan30,
+.ms-fontColor-sharedCyan30--hover:hover {
+  @include ms-fontColor-sharedCyan30;
+}
+.ms-fontColor-sharedCyan20,
+.ms-fontColor-sharedCyan20--hover:hover {
+  @include ms-fontColor-sharedCyan20;
+}
+.ms-fontColor-sharedCyan10,
+.ms-fontColor-sharedCyan10--hover:hover {
+  @include ms-fontColor-sharedCyan10;
+}
+.ms-fontColor-sharedCyanBlue20,
+.ms-fontColor-sharedCyanBlue20--hover:hover {
+  @include ms-fontColor-sharedCyanBlue20;
+}
+.ms-fontColor-sharedCyanBlue10,
+.ms-fontColor-sharedCyanBlue10--hover:hover {
+  @include ms-fontColor-sharedCyanBlue10;
+}
+.ms-fontColor-sharedBlue10,
+.ms-fontColor-sharedBlue10--hover:hover {
+  @include ms-fontColor-sharedBlue10;
+}
+.ms-fontColor-sharedBlueMagenta40,
+.ms-fontColor-sharedBlueMagenta40--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta40;
+}
+.ms-fontColor-sharedBlueMagenta30,
+.ms-fontColor-sharedBlueMagenta30--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta30;
+}
+.ms-fontColor-sharedBlueMagenta20,
+.ms-fontColor-sharedBlueMagenta20--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta20;
+}
+.ms-fontColor-sharedBlueMagenta10,
+.ms-fontColor-sharedBlueMagenta10--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta10;
+}
+.ms-fontColor-sharedMagenta20,
+.ms-fontColor-sharedMagenta20--hover:hover {
+  @include ms-fontColor-sharedMagenta20;
+}
+.ms-fontColor-sharedMagenta10,
+.ms-fontColor-sharedMagenta10--hover:hover {
+  @include ms-fontColor-sharedMagenta10;
+}
+.ms-fontColor-sharedMagentaPink20,
+.ms-fontColor-sharedMagentaPink20--hover:hover {
+  @include ms-fontColor-sharedMagentaPink20;
+}
+.ms-fontColor-sharedMagentaPink10,
+.ms-fontColor-sharedMagentaPink10--hover:hover {
+  @include ms-fontColor-sharedMagentaPink10;
+}
+.ms-fontColor-sharedGray40,
+.ms-fontColor-sharedGray40--hover:hover {
+  @include ms-fontColor-sharedGray40;
+}
+.ms-fontColor-sharedGray30,
+.ms-fontColor-sharedGray30--hover:hover {
+  @include ms-fontColor-sharedGray30;
+}
+.ms-fontColor-sharedGray20,
+.ms-fontColor-sharedGray20--hover:hover {
+  @include ms-fontColor-sharedGray20;
+}
+.ms-fontColor-sharedGray10,
+.ms-fontColor-sharedGray10--hover:hover {
+  @include ms-fontColor-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/_Color.MDL2.scss b/packages/au1-app/src/resources/sass/_Color.MDL2.scss
new file mode 100644
index 0000000..545b1f6
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Color.MDL2.scss
@@ -0,0 +1,694 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+//== Theme colors
+//
+
+// Background
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+  @include ms-bgColor-themeDark;
+}
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+  @include ms-bgColor-themeDarkAlt;
+}
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+  @include ms-bgColor-themeDarker;
+}
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+  @include ms-bgColor-themePrimary;
+}
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+  @include ms-bgColor-themeSecondary;
+}
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+  @include ms-bgColor-themeTertiary;
+}
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+  @include ms-bgColor-themeLight;
+}
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+  @include ms-bgColor-themeLighter;
+}
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+  @include ms-bgColor-themeLighterAlt;
+}
+
+// Border
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+  @include ms-borderColor-themeDark;
+}
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+  @include ms-borderColor-themeDarkAlt;
+}
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+  @include ms-borderColor-themeDarker;
+}
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+  @include ms-borderColor-themePrimary;
+}
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+  @include ms-borderColor-themeSecondary;
+}
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+  @include ms-borderColor-themeTertiary;
+}
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+  @include ms-borderColor-themeLight;
+}
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+  @include ms-borderColor-themeLighter;
+}
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+  @include ms-borderColor-themeLighterAlt;
+}
+
+// Font
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+  @include ms-fontColor-themeDarker;
+}
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+  @include ms-fontColor-themeDark;
+}
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+  @include ms-fontColor-themeDarkAlt;
+}
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+  @include ms-fontColor-themePrimary;
+}
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+  @include ms-fontColor-themeSecondary;
+}
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+  @include ms-fontColor-themeTertiary;
+}
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+  @include ms-fontColor-themeLight;
+}
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+  @include ms-fontColor-themeLighter;
+}
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+  @include ms-fontColor-themeLighterAlt;
+}
+
+//== Neutral colors
+//
+
+// Background
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+  @include ms-bgColor-black;
+}
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+  @include ms-bgColor-neutralDark;
+}
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+  @include ms-bgColor-neutralPrimary;
+}
+.ms-bgColor-neutralPrimaryAlt,
+.ms-bgColor-neutralPrimaryAlt--hover:hover {
+  @include ms-bgColor-neutralPrimaryAlt;
+}
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+  @include ms-bgColor-neutralSecondary;
+}
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+  @include ms-bgColor-neutralSecondaryAlt;
+}
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+  @include ms-bgColor-neutralTertiary;
+}
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+  @include ms-bgColor-neutralTertiaryAlt;
+}
+.ms-bgColor-neutralQuaternary,
+.ms-bgColor-neutralQuaternary--hover:hover {
+  @include ms-bgColor-neutralQuaternary;
+}
+.ms-bgColor-neutralQuaternaryAlt,
+.ms-bgColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-bgColor-neutralQuaternaryAlt;
+}
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+  @include ms-bgColor-neutralLight;
+}
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+  @include ms-bgColor-neutralLighter;
+}
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+  @include ms-bgColor-neutralLighterAlt;
+}
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+  @include ms-bgColor-white;
+}
+
+// Border
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+  @include ms-borderColor-black;
+}
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+  @include ms-borderColor-neutralDark;
+}
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+  @include ms-borderColor-neutralPrimary;
+}
+.ms-borderColor-neutralPrimaryAlt,
+.ms-borderColor-neutralPrimaryAlt--hover:hover {
+  @include ms-borderColor-neutralPrimaryAlt;
+}
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+  @include ms-borderColor-neutralSecondary;
+}
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+  @include ms-borderColor-neutralSecondaryAlt;
+}
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+  @include ms-borderColor-neutralTertiary;
+}
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+  @include ms-borderColor-neutralTertiaryAlt;
+}
+.ms-borderColor-neutralQuaternary,
+.ms-borderColor-neutralQuaternary--hover:hover {
+  @include ms-borderColor-neutralQuaternary;
+}
+.ms-borderColor-neutralQuaternaryAlt,
+.ms-borderColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-borderColor-neutralQuaternaryAlt;
+}
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+  @include ms-borderColor-neutralLight;
+}
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+  @include ms-borderColor-neutralLighter;
+}
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+  @include ms-borderColor-neutralLighterAlt;
+}
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+  @include ms-borderColor-white;
+}
+
+// Font
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+  @include ms-fontColor-black;
+}
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+  @include ms-fontColor-neutralDark;
+}
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+  @include ms-fontColor-neutralPrimary;
+}
+.ms-fontColor-neutralPrimaryAlt,
+.ms-fontColor-neutralPrimaryAlt--hover:hover {
+  @include ms-fontColor-neutralPrimaryAlt;
+}
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+  @include ms-fontColor-neutralSecondary;
+}
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+  @include ms-fontColor-neutralSecondaryAlt;
+}
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+  @include ms-fontColor-neutralTertiary;
+}
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+  @include ms-fontColor-neutralTertiaryAlt;
+}
+.ms-fontColor-neutralQuaternary,
+.ms-fontColor-neutralQuaternary--hover:hover {
+  @include ms-fontColor-neutralQuaternary;
+}
+.ms-fontColor-neutralQuaternaryAlt,
+.ms-fontColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-fontColor-neutralQuaternaryAlt;
+}
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+  @include ms-fontColor-neutralLight;
+}
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+  @include ms-fontColor-neutralLighter;
+}
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+  @include ms-fontColor-neutralLighterAlt;
+}
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+  @include ms-fontColor-white;
+}
+
+//== Brand and accent colors
+//
+
+// Background
+.ms-bgColor-yellow,
+.ms-bgColor-yellow--hover:hover {
+  @include ms-bgColor-yellow;
+}
+.ms-bgColor-yellowLight,
+.ms-bgColor-yellowLight--hover:hover {
+  @include ms-bgColor-yellowLight;
+}
+.ms-bgColor-orange,
+.ms-bgColor-orange--hover:hover {
+  @include ms-bgColor-orange;
+}
+.ms-bgColor-orangeLight,
+.ms-bgColor-orangeLight--hover:hover {
+  @include ms-bgColor-orangeLight;
+}
+.ms-bgColor-orangeLighter,
+.ms-bgColor-orangeLighter--hover:hover {
+  @include ms-bgColor-orangeLighter;
+}
+.ms-bgColor-redDark,
+.ms-bgColor-redDark--hover:hover {
+  @include ms-bgColor-redDark;
+}
+.ms-bgColor-red,
+.ms-bgColor-red--hover:hover {
+  @include ms-bgColor-red;
+}
+.ms-bgColor-magentaDark,
+.ms-bgColor-magentaDark--hover:hover {
+  @include ms-bgColor-magentaDark;
+}
+.ms-bgColor-magenta,
+.ms-bgColor-magenta--hover:hover {
+  @include ms-bgColor-magenta;
+}
+.ms-bgColor-magentaLight,
+.ms-bgColor-magentaLight--hover:hover {
+  @include ms-bgColor-magentaLight;
+}
+.ms-bgColor-purpleDark,
+.ms-bgColor-purpleDark--hover:hover {
+  @include ms-bgColor-purpleDark;
+}
+.ms-bgColor-purple,
+.ms-bgColor-purple--hover:hover {
+  @include ms-bgColor-purple;
+}
+.ms-bgColor-purpleLight,
+.ms-bgColor-purpleLight--hover:hover {
+  @include ms-bgColor-purpleLight;
+}
+.ms-bgColor-blueDark,
+.ms-bgColor-blueDark--hover:hover {
+  @include ms-bgColor-blueDark;
+}
+.ms-bgColor-blueMid,
+.ms-bgColor-blueMid--hover:hover {
+  @include ms-bgColor-blueMid;
+}
+.ms-bgColor-blue,
+.ms-bgColor-blue--hover:hover {
+  @include ms-bgColor-blue;
+}
+.ms-bgColor-blueLight,
+.ms-bgColor-blueLight--hover:hover {
+  @include ms-bgColor-blueLight;
+}
+.ms-bgColor-tealDark,
+.ms-bgColor-tealDark--hover:hover {
+  @include ms-bgColor-tealDark;
+}
+.ms-bgColor-teal,
+.ms-bgColor-teal--hover:hover {
+  @include ms-bgColor-teal;
+}
+.ms-bgColor-tealLight,
+.ms-bgColor-tealLight--hover:hover {
+  @include ms-bgColor-tealLight;
+}
+.ms-bgColor-greenDark,
+.ms-bgColor-greenDark--hover:hover {
+  @include ms-bgColor-greenDark;
+}
+.ms-bgColor-green,
+.ms-bgColor-green--hover:hover {
+  @include ms-bgColor-green;
+}
+.ms-bgColor-greenLight,
+.ms-bgColor-greenLight--hover:hover {
+  @include ms-bgColor-greenLight;
+}
+
+// Border
+.ms-borderColor-yellow,
+.ms-borderColor-yellow--hover:hover {
+  @include ms-borderColor-yellow;
+}
+.ms-borderColor-yellowLight,
+.ms-borderColor-yellowLight--hover:hover {
+  @include ms-borderColor-yellowLight;
+}
+.ms-borderColor-orange,
+.ms-borderColor-orange--hover:hover {
+  @include ms-borderColor-orange;
+}
+.ms-borderColor-orangeLight,
+.ms-borderColor-orangeLight--hover:hover {
+  @include ms-borderColor-orangeLight;
+}
+.ms-borderColor-orangeLighter,
+.ms-borderColor-orangeLighter--hover:hover {
+  @include ms-borderColor-orangeLighter;
+}
+.ms-borderColor-redDark,
+.ms-borderColor-redDark--hover:hover {
+  @include ms-borderColor-redDark;
+}
+.ms-borderColor-red,
+.ms-borderColor-red--hover:hover {
+  @include ms-borderColor-red;
+}
+.ms-borderColor-magentaDark,
+.ms-borderColor-magentaDark--hover:hover {
+  @include ms-borderColor-magentaDark;
+}
+.ms-borderColor-magenta,
+.ms-borderColor-magenta--hover:hover {
+  @include ms-borderColor-magenta;
+}
+.ms-borderColor-magentaLight,
+.ms-borderColor-magentaLight--hover:hover {
+  @include ms-borderColor-magentaLight;
+}
+.ms-borderColor-purpleDark,
+.ms-borderColor-purpleDark--hover:hover {
+  @include ms-borderColor-purpleDark;
+}
+.ms-borderColor-purple,
+.ms-borderColor-purple--hover:hover {
+  @include ms-borderColor-purple;
+}
+.ms-borderColor-purpleLight,
+.ms-borderColor-purpleLight--hover:hover {
+  @include ms-borderColor-purpleLight;
+}
+.ms-borderColor-blueDark,
+.ms-borderColor-blueDark--hover:hover {
+  @include ms-borderColor-blueDark;
+}
+.ms-borderColor-blueMid,
+.ms-borderColor-blueMid--hover:hover {
+  @include ms-borderColor-blueMid;
+}
+.ms-borderColor-blue,
+.ms-borderColor-blue--hover:hover {
+  @include ms-borderColor-blue;
+}
+.ms-borderColor-blueLight,
+.ms-borderColor-blueLight--hover:hover {
+  @include ms-borderColor-blueLight;
+}
+.ms-borderColor-tealDark,
+.ms-borderColor-tealDark--hover:hover {
+  @include ms-borderColor-tealDark;
+}
+.ms-borderColor-teal,
+.ms-borderColor-teal--hover:hover {
+  @include ms-borderColor-teal;
+}
+.ms-borderColor-tealLight,
+.ms-borderColor-tealLight--hover:hover {
+  @include ms-borderColor-tealLight;
+}
+.ms-borderColor-greenDark,
+.ms-borderColor-greenDark--hover:hover {
+  @include ms-borderColor-greenDark;
+}
+.ms-borderColor-green,
+.ms-borderColor-green--hover:hover {
+  @include ms-borderColor-green;
+}
+.ms-borderColor-greenLight,
+.ms-borderColor-greenLight--hover:hover {
+  @include ms-borderColor-greenLight;
+}
+
+// Font
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+  @include ms-fontColor-yellow;
+}
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+  @include ms-fontColor-yellowLight;
+}
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+  @include ms-fontColor-orange;
+}
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+  @include ms-fontColor-orangeLight;
+}
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+  @include ms-fontColor-orangeLighter;
+}
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+  @include ms-fontColor-redDark;
+}
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+  @include ms-fontColor-red;
+}
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+  @include ms-fontColor-magentaDark;
+}
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+  @include ms-fontColor-magenta;
+}
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+  @include ms-fontColor-magentaLight;
+}
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+  @include ms-fontColor-purpleDark;
+}
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+  @include ms-fontColor-purple;
+}
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+  @include ms-fontColor-purpleLight;
+}
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+  @include ms-fontColor-blueDark;
+}
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+  @include ms-fontColor-blueMid;
+}
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+  @include ms-fontColor-blue;
+}
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+  @include ms-fontColor-blueLight;
+}
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+  @include ms-fontColor-tealDark;
+}
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+  @include ms-fontColor-teal;
+}
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+  @include ms-fontColor-tealLight;
+}
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+  @include ms-fontColor-greenDark;
+}
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+  @include ms-fontColor-green;
+}
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+  @include ms-fontColor-greenLight;
+}
+
+//== Message colors
+//
+
+// Background
+.ms-bgColor-info,
+.ms-bgColor-info--hover:hover {
+  @include ms-bgColor-info;
+}
+.ms-bgColor-success,
+.ms-bgColor-success--hover:hover {
+  @include ms-bgColor-success;
+}
+.ms-bgColor-severeWarning,
+.ms-bgColor-severeWarning--hover:hover {
+  @include ms-bgColor-severeWarning;
+}
+.ms-bgColor-warning,
+.ms-bgColor-warning--hover:hover {
+  @include ms-bgColor-warning;
+}
+.ms-bgColor-error,
+.ms-bgColor-error--hover:hover {
+  @include ms-bgColor-error;
+}
+
+// Border
+// Classes were never provided for message color borders.
+
+// Font
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+  @include ms-fontColor-info;
+}
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+  @include ms-fontColor-success;
+}
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+  // Deprecated: Use ms-fontColor-severeWarning
+  @include ms-fontColor-alert;
+}
+.ms-fontColor-warning,
+.ms-fontColor-warning--hover:hover {
+  @include ms-fontColor-warning;
+}
+.ms-fontColor-severeWarning,
+.ms-fontColor-severeWarning--hover:hover {
+  @include ms-fontColor-severeWarning;
+}
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+  @include ms-fontColor-error;
+}
+
+//== High contrast colors
+//
+
+// Background
+.ms-bgColor-contrastBlackDisabled,
+.ms-bgColor-contrastBlackDisabled--hover:hover {
+  @include ms-bgColor-contrastBlackDisabled;
+}
+.ms-bgColor-contrastWhiteDisabled,
+.ms-bgColor-contrastWhiteDisabled--hover:hover {
+  @include ms-bgColor-contrastWhiteDisabled;
+}
+.ms-bgColor-contrastBlackSelected,
+.ms-bgColor-contrastBlackSelected--hover:hover {
+  @include ms-bgColor-contrastBlackSelected;
+}
+.ms-bgColor-contrastWhiteSelected,
+.ms-bgColor-contrastWhiteSelected--hover:hover {
+  @include ms-bgColor-contrastWhiteSelected;
+}
+
+// Font
+.ms-fontColor-contrastBlackDisabled,
+.ms-fontColor-contrastBlackDisabled--hover:hover {
+  @include ms-fontColor-contrastBlackDisabled;
+}
+.ms-fontColor-contrastWhiteDisabled,
+.ms-fontColor-contrastWhiteDisabled--hover:hover {
+  @include ms-fontColor-contrastWhiteDisabled;
+}
+.ms-fontColor-contrastBlackSelected,
+.ms-fontColor-contrastBlackSelected--hover:hover {
+  @include ms-fontColor-contrastBlackSelected;
+}
+.ms-fontColor-contrastWhiteSelected,
+.ms-fontColor-contrastWhiteSelected--hover:hover {
+  @include ms-fontColor-contrastWhiteSelected;
+}
+
+// Border
+.ms-borderColor-contrastBlackDisabled,
+.ms-borderColor-contrastBlackDisabled--hover:hover {
+  @include ms-borderColor-contrastBlackDisabled;
+}
+.ms-borderColor-contrastWhiteDisabled,
+.ms-borderColor-contrastWhiteDisabled--hover:hover {
+  @include ms-borderColor-contrastWhiteDisabled;
+}
+.ms-borderColor-contrastBlackSelected,
+.ms-borderColor-contrastBlackSelected--hover:hover {
+  @include ms-borderColor-contrastBlackSelected;
+}
+.ms-borderColor-contrastWhiteSelected,
+.ms-borderColor-contrastWhiteSelected--hover:hover {
+  @include ms-borderColor-contrastWhiteSelected;
+}
diff --git a/packages/au1-app/src/resources/sass/_Color.scss b/packages/au1-app/src/resources/sass/_Color.scss
new file mode 100644
index 0000000..9aa56c0
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Color.scss
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Classes for specific properties.
+@import './Color.Background';
+@import './Color.Border';
+@import './Color.Font';
+
+// Deprecated MDL2 color classes.
+@import "./Color.MDL2";
diff --git a/packages/au1-app/src/resources/sass/_Depth.scss b/packages/au1-app/src/resources/sass/_Depth.scss
new file mode 100644
index 0000000..abde31f
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Depth.scss
@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+.ms-depth-0 {
+  @include ms-depth-0;
+}
+.ms-depth-4 {
+  @include ms-depth-4;
+}
+.ms-depth-8 {
+  @include ms-depth-8;
+}
+.ms-depth-16 {
+  @include ms-depth-16;
+}
+.ms-depth-64 {
+  @include ms-depth-64;
+}
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/sass/_Font.Definitions.scss b/packages/au1-app/src/resources/sass/_Font.Definitions.scss
new file mode 100644
index 0000000..b30bc61
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Font.Definitions.scss
@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Produce @font-face definitions for each of the web fonts.
+@include ms-font-face('Leelawadee UI Web', 'leelawadeeui-thai', 'leelawadeeui');
+@include ms-font-face('Segoe UI Web (Arabic)', 'segoeui-arabic');
+@include ms-font-face('Segoe UI Web (Cyrillic)', 'segoeui-cyrillic');
+@include ms-font-face('Segoe UI Web (East European)', 'segoeui-easteuropean');
+@include ms-font-face('Segoe UI Web (Greek)', 'segoeui-greek');
+@include ms-font-face('Segoe UI Web (Hebrew)', 'segoeui-hebrew');
+@include ms-font-face('Segoe UI Web (Vietnamese)', 'segoeui-vietnamese');
+@include ms-font-face('Segoe UI Web (West European)', 'segoeui-westeuropean');
+@include ms-font-face('Selawik Web', 'selawik', 'selawik');
+
+
+// Leelawadee UI (Thai and Lao) does not have a 'light' weight, so we override
+// the font-face generated above to use the 'semilight' weight instead.
+@font-face {
+  font-family: 'Leelawadee UI Web';
+  src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'),
+       url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+
+// Leelawadee UI (Thai and Lao) does not have a 'semibold' weight, so we override
+// the font-face generated above to use the 'bold' weight instead.
+@font-face {
+  font-family: 'Leelawadee UI Web';
+  src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'),
+       url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
diff --git a/packages/au1-app/src/resources/sass/_Font.MDL2.scss b/packages/au1-app/src/resources/sass/_Font.MDL2.scss
new file mode 100644
index 0000000..fb9700c
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Font.MDL2.scss
@@ -0,0 +1,128 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+.ms-font-su {
+  @include ms-font-su;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+.ms-font-xxl {
+  @include ms-font-xxl;
+}
+
+// Extra-Large Plus Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl-plus {
+  @include ms-font-xl-plus;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl {
+  @include ms-font-xl;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-l {
+  @include ms-font-l;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m-plus {
+  @include ms-font-m-plus;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m {
+  @include ms-font-m;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s-plus {
+  @include ms-font-s-plus;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s {
+  @include ms-font-s;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-xs {
+  @include ms-font-xs;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+.ms-font-mi {
+  @include ms-font-mi;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+.ms-fontWeight-light {
+  @include ms-fontWeight-light;
+}
+
+.ms-fontWeight-semilight {
+  @include ms-fontWeight-semilight;
+}
+
+// Font sizes
+.ms-fontSize-su {
+  @include ms-fontSize-su;
+}
+
+.ms-fontSize-xxl {
+  @include ms-fontSize-xxl;
+}
+
+.ms-fontSize-xlPlus {
+  @include ms-fontSize-xlPlus;
+}
+
+.ms-fontSize-xl {
+  @include ms-fontSize-xl;
+}
+
+.ms-fontSize-l {
+  @include ms-fontSize-l;
+}
+
+.ms-fontSize-mPlus {
+  @include ms-fontSize-mPlus;
+}
+
+.ms-fontSize-m {
+  @include ms-fontSize-m;
+}
+
+.ms-fontSize-sPlus {
+  @include ms-fontSize-sPlus;
+}
+
+.ms-fontSize-s {
+  @include ms-fontSize-s;
+}
+
+.ms-fontSize-xs {
+  @include ms-fontSize-xs;
+}
+
+.ms-fontSize-mi {
+  @include ms-fontSize-mi;
+}
diff --git a/packages/au1-app/src/resources/sass/_Font.scss b/packages/au1-app/src/resources/sass/_Font.scss
new file mode 100644
index 0000000..44dcfd6
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Font.scss
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Font color classes.
+//
+
+//== Sizes.
+//
+
+.ms-fontSize-68 {
+  @include ms-fontSize-68;
+}
+.ms-fontSize-42 {
+  @include ms-fontSize-42;
+}
+.ms-fontSize-32 {
+  @include ms-fontSize-32;
+}
+.ms-fontSize-28 {
+  @include ms-fontSize-28;
+}
+.ms-fontSize-24 {
+  @include ms-fontSize-24;
+}
+.ms-fontSize-20 {
+  @include ms-fontSize-20;
+}
+.ms-fontSize-18 {
+  @include ms-fontSize-18;
+}
+.ms-fontSize-16 {
+  @include ms-fontSize-16;
+}
+.ms-fontSize-14 {
+  @include ms-fontSize-14;
+}
+.ms-fontSize-12 {
+  @include ms-fontSize-12;
+}
+.ms-fontSize-10 {
+  @include ms-fontSize-10;
+}
+
+//== Weights.
+//
+
+.ms-fontWeight-regular {
+  @include ms-fontWeight-regular;
+}
+.ms-fontWeight-semibold {
+  @include ms-fontWeight-semibold;
+}
+.ms-fontWeight-bold {
+  @include ms-fontWeight-bold;
+}
+
+// Deprecated MDL2 font classes.
+@import "./Font.MDL2";
diff --git a/packages/au1-app/src/resources/sass/_Grid.scss b/packages/au1-app/src/resources/sass/_Grid.scss
new file mode 100644
index 0000000..bf343e6
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Grid.scss
@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+//== Grid container (same for all sizes)
+//
+.ms-Grid {
+  @include ms-Grid;
+}
+
+//== Grid rows (pull first and last column out)
+//
+.ms-Grid-row {
+  @include ms-Grid-row;
+}
+
+//== Grid cells
+//
+.ms-Grid-col {
+  @include ms-Grid-col;
+}
diff --git a/packages/au1-app/src/resources/sass/_Icon.Definitions.scss b/packages/au1-app/src/resources/sass/_Icon.Definitions.scss
new file mode 100644
index 0000000..b9b0e58
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Icon.Definitions.scss
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon font-family definition
+
+/*
+  Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+// Font-face definition for the 'FabricMDL2Icons' icon font
+@font-face {
+  $icon-font-family: 'FabricMDL2Icons';
+  $icon-font-name: 'fabricmdl2icons';
+  $icon-font-version: '3.70';
+
+  @if variable_exists(do-scope-styles) {
+    $icon-font-family: 'FabricMDL2Icons-' + $ms-fabric-version-major; 
+    $icon-font-name: 'scoped/fabricmdl2icons-' + $ms-fabric-version-major; 
+  }
+
+  font-family: $icon-font-family;
+  src: url('#{$ms-icon-cdn-path}/#{$icon-font-name}-#{$icon-font-version}.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/packages/au1-app/src/resources/sass/_Icon.scss b/packages/au1-app/src/resources/sass/_Icon.scss
new file mode 100644
index 0000000..2f800f2
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Icon.scss
@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon class definitions
+
+
+// Base icon definition
+.ms-Icon {
+  @include ms-Icon;
+}
+
+// Modifier: Place the icon in a circle
+.ms-Icon--circle {
+  @include ms-Icon--circle;
+}
+
+// Modifiers: Size classes
+.ms-Icon--xs {
+  @include ms-Icon--xs;
+}
+
+.ms-Icon--s {
+  @include ms-Icon--s;
+}
+
+.ms-Icon--m {
+  @include ms-Icon--m;
+}
+
+.ms-Icon--l {
+  @include ms-Icon--l;
+}
+
+// Modifiers: Each of the icons.
+@include ms-icon-classes($ms-icon-map);
diff --git a/packages/au1-app/src/resources/sass/_References.scss b/packages/au1-app/src/resources/sass/_References.scss
new file mode 100644
index 0000000..65a0ed6
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_References.scss
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Variables and mixins that can be referenced without outputting any CSS.
+
+// Variables
+@import "./variables/Animation.Variables";
+@import "./variables/BrandIcon.Variables";
+@import "./variables/Color.Variables";
+@import "./variables/Color.Variables.MDL2";
+@import "./variables/Depth.Variables";
+@import "./variables/Font.Variables";
+@import "./variables/Font.Variables.MDL2";
+@import "./variables/General.Variables";
+@import "./variables/Icon.Variables";
+@import "./variables/Responsive.Variables";
+@import "./variables/ZIndex.Variables";
+
+// Mixins
+@import "./mixins/Animation.Mixins";
+@import "./mixins/BrandIcon.Mixins";
+@import "./mixins/Color.Background.Mixins";
+@import "./mixins/Color.Border.Mixins";
+@import "./mixins/Color.Font.Mixins";
+@import "./mixins/Color.Mixins";
+@import "./mixins/Color.Mixins.MDL2";
+@import "./mixins/Depth.Mixins";
+@import "./mixins/Directionality.Mixins";
+@import "./mixins/Font.Mixins";
+@import "./mixins/Font.Mixins.MDL2";
+@import "./mixins/General.Mixins";
+@import "./mixins/Grid.Mixins";
+@import "./mixins/Icon.Mixins";
+@import "./mixins/Responsive.Mixins";
diff --git a/packages/au1-app/src/resources/sass/_Responsive.scss b/packages/au1-app/src/resources/sass/_Responsive.scss
new file mode 100644
index 0000000..0bdf84a
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Responsive.scss
@@ -0,0 +1,1010 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Responsive utilities based on defined variables, component visibility,
+// and size for different displays.
+
+//== Responsive visiblity classes
+//
+
+// Hidden on small
+@media (max-width: $ms-screen-max-sm) {
+  .ms-hiddenSm,
+  .ms-hiddenMdDown,
+  .ms-hiddenLgDown,
+  .ms-hiddenXlDown,
+  .ms-hiddenXxlDown {
+    display: none !important;
+  }
+}
+
+// Hidden on medium
+@media (min-width: $ms-screen-min-md) and (max-width: $ms-screen-max-md) {
+  .ms-hiddenMd,
+  .ms-hiddenMdUp,
+  .ms-hiddenMdDown,
+  .ms-hiddenLgDown,
+  .ms-hiddenXlDown,
+  .ms-hiddenXxlDown {
+    display: none !important;
+  }
+}
+
+// Hidden on large
+@media (min-width: $ms-screen-min-lg) and (max-width: $ms-screen-max-lg) {
+  .ms-hiddenMdUp,
+  .ms-hiddenLg,
+  .ms-hiddenLgUp,
+  .ms-hiddenLgDown,
+  .ms-hiddenXlDown,
+  .ms-hiddenXxlDown {
+    display: none !important;
+  }
+}
+
+// Hidden on extra large
+@media (min-width: $ms-screen-min-xl) and (max-width: $ms-screen-max-xl) {
+  .ms-hiddenMdUp,
+  .ms-hiddenLgUp,
+  .ms-hiddenXl,
+  .ms-hiddenXlUp,
+  .ms-hiddenXlDown,
+  .ms-hiddenXxlDown {
+    display: none !important;
+  }
+}
+
+// Hidden on extra extra large
+@media (min-width: $ms-screen-min-xxl) and (max-width: $ms-screen-max-xxl) {
+  .ms-hiddenMdUp,
+  .ms-hiddenLgUp,
+  .ms-hiddenXlUp,
+  .ms-hiddenXxl,
+  .ms-hiddenXxlUp,
+  .ms-hiddenXxlDown {
+    display: none !important;
+  }
+}
+
+// Hidden on extra extra extra large
+@media (min-width: $ms-screen-min-xxxl) {
+  .ms-hiddenMdUp,
+  .ms-hiddenLgUp,
+  .ms-hiddenXlUp,
+  .ms-hiddenXxlUp,
+  .ms-hiddenXxxl {
+    display: none !important;
+  }
+}
+
+
+//== Responsive sizes
+//
+// These are all based on a 12 column grid. For example,
+// ms-sm6 sets the width to 50% (6/12) on small screens.
+
+// Small screens (default)
+.ms-sm12 {
+  @include ms-sm12;
+}
+.ms-sm11 {
+  @include ms-sm11;
+}
+.ms-sm10 {
+  @include ms-sm10;
+}
+.ms-sm9 {
+  @include ms-sm9;
+}
+.ms-sm8 {
+  @include ms-sm8;
+}
+.ms-sm7 {
+  @include ms-sm7;
+}
+.ms-sm6 {
+  @include ms-sm6;
+}
+.ms-sm5 {
+  @include ms-sm5;
+}
+.ms-sm4 {
+  @include ms-sm4;
+}
+.ms-sm3 {
+  @include ms-sm3;
+}
+.ms-sm2 {
+  @include ms-sm2;
+}
+.ms-sm1 {
+  @include ms-sm1;
+}
+.ms-smPull12 {
+  @include ms-smPull12;
+}
+.ms-smPull11 {
+  @include ms-smPull11;
+}
+.ms-smPull10 {
+  @include ms-smPull10;
+}
+.ms-smPull9 {
+  @include ms-smPull9;
+}
+.ms-smPull8 {
+  @include ms-smPull8;
+}
+.ms-smPull7 {
+  @include ms-smPull7;
+}
+.ms-smPull6 {
+  @include ms-smPull6;
+}
+.ms-smPull5 {
+  @include ms-smPull5;
+}
+.ms-smPull4 {
+  @include ms-smPull4;
+}
+.ms-smPull3 {
+  @include ms-smPull3;
+}
+.ms-smPull2 {
+  @include ms-smPull2;
+}
+.ms-smPull1 {
+  @include ms-smPull1;
+}
+.ms-smPull0 {
+  @include ms-smPull0;
+}
+.ms-smPush12 {
+  @include ms-smPush12;
+}
+.ms-smPush11 {
+  @include ms-smPush11;
+}
+.ms-smPush10 {
+  @include ms-smPush10;
+}
+.ms-smPush9 {
+  @include ms-smPush9;
+}
+.ms-smPush8 {
+  @include ms-smPush8;
+}
+.ms-smPush7 {
+  @include ms-smPush7;
+}
+.ms-smPush6 {
+  @include ms-smPush6;
+}
+.ms-smPush5 {
+  @include ms-smPush5;
+}
+.ms-smPush4 {
+  @include ms-smPush4;
+}
+.ms-smPush3 {
+  @include ms-smPush3;
+}
+.ms-smPush2 {
+  @include ms-smPush2;
+}
+.ms-smPush1 {
+  @include ms-smPush1;
+}
+.ms-smPush0 {
+  @include ms-smPush0;
+}
+
+// Small Offset classes 0 ... 11
+.ms-smOffset11 {
+  @include ms-smOffset11;
+}
+.ms-smOffset10 {
+  @include ms-smOffset10;
+}
+.ms-smOffset9 {
+  @include ms-smOffset9;
+}
+.ms-smOffset8 {
+  @include ms-smOffset8;
+}
+.ms-smOffset7 {
+  @include ms-smOffset7;
+}
+.ms-smOffset6 {
+  @include ms-smOffset6;
+}
+.ms-smOffset5 {
+  @include ms-smOffset5;
+}
+.ms-smOffset4 {
+  @include ms-smOffset4;
+}
+.ms-smOffset3 {
+  @include ms-smOffset3;
+}
+.ms-smOffset2 {
+  @include ms-smOffset2;
+}
+.ms-smOffset1 {
+  @include ms-smOffset1;
+}
+.ms-smOffset0 {
+  @include ms-smOffset0;
+}
+
+// Medium screens
+.ms-md12 {
+  @include ms-md12;
+}
+.ms-md11 {
+  @include ms-md11;
+}
+.ms-md10 {
+  @include ms-md10;
+}
+.ms-md9 {
+  @include ms-md9;
+}
+.ms-md8 {
+  @include ms-md8;
+}
+.ms-md7 {
+  @include ms-md7;
+}
+.ms-md6 {
+  @include ms-md6;
+}
+.ms-md5 {
+  @include ms-md5;
+}
+.ms-md4 {
+  @include ms-md4;
+}
+.ms-md3 {
+  @include ms-md3;
+}
+.ms-md2 {
+  @include ms-md2;
+}
+.ms-md1 {
+  @include ms-md1;
+}
+.ms-mdPull12 {
+  @include ms-mdPull12;
+}
+.ms-mdPull11 {
+  @include ms-mdPull11;
+}
+.ms-mdPull10 {
+  @include ms-mdPull10;
+}
+.ms-mdPull9 {
+  @include ms-mdPull9;
+}
+.ms-mdPull8 {
+  @include ms-mdPull8;
+}
+.ms-mdPull7 {
+  @include ms-mdPull7;
+}
+.ms-mdPull6 {
+  @include ms-mdPull6;
+}
+.ms-mdPull5 {
+  @include ms-mdPull5;
+}
+.ms-mdPull4 {
+  @include ms-mdPull4;
+}
+.ms-mdPull3 {
+  @include ms-mdPull3;
+}
+.ms-mdPull2 {
+  @include ms-mdPull2;
+}
+.ms-mdPull1 {
+  @include ms-mdPull1;
+}
+.ms-mdPull0 {
+  @include ms-mdPull0;
+}
+.ms-mdPush12 {
+  @include ms-mdPush12;
+}
+.ms-mdPush11 {
+  @include ms-mdPush11;
+}
+.ms-mdPush10 {
+  @include ms-mdPush10;
+}
+.ms-mdPush9 {
+  @include ms-mdPush9;
+}
+.ms-mdPush8 {
+  @include ms-mdPush8;
+}
+.ms-mdPush7 {
+  @include ms-mdPush7;
+}
+.ms-mdPush6 {
+  @include ms-mdPush6;
+}
+.ms-mdPush5 {
+  @include ms-mdPush5;
+}
+.ms-mdPush4 {
+  @include ms-mdPush4;
+}
+.ms-mdPush3 {
+  @include ms-mdPush3;
+}
+.ms-mdPush2 {
+  @include ms-mdPush2;
+}
+.ms-mdPush1 {
+  @include ms-mdPush1;
+}
+.ms-mdPush0 {
+  @include ms-mdPush0;
+}
+
+// Medium Offset classes 0 ... 11
+.ms-mdOffset11 {
+  @include ms-mdOffset11;
+}
+.ms-mdOffset10 {
+  @include ms-mdOffset10;
+}
+.ms-mdOffset9 {
+  @include ms-mdOffset9;
+}
+.ms-mdOffset8 {
+  @include ms-mdOffset8;
+}
+.ms-mdOffset7 {
+  @include ms-mdOffset7;
+}
+.ms-mdOffset6 {
+  @include ms-mdOffset6;
+}
+.ms-mdOffset5 {
+  @include ms-mdOffset5;
+}
+.ms-mdOffset4 {
+  @include ms-mdOffset4;
+}
+.ms-mdOffset3 {
+  @include ms-mdOffset3;
+}
+.ms-mdOffset2 {
+  @include ms-mdOffset2;
+}
+.ms-mdOffset1 {
+  @include ms-mdOffset1;
+}
+.ms-mdOffset0 {
+  @include ms-mdOffset0;
+}
+
+// Large screens
+.ms-lg12 {
+  @include ms-lg12;
+}
+.ms-lg11 {
+  @include ms-lg11;
+}
+.ms-lg10 {
+  @include ms-lg10;
+}
+.ms-lg9 {
+  @include ms-lg9;
+}
+.ms-lg8 {
+  @include ms-lg8;
+}
+.ms-lg7 {
+  @include ms-lg7;
+}
+.ms-lg6 {
+  @include ms-lg6;
+}
+.ms-lg5 {
+  @include ms-lg5;
+}
+.ms-lg4 {
+  @include ms-lg4;
+}
+.ms-lg3 {
+  @include ms-lg3;
+}
+.ms-lg2 {
+  @include ms-lg2;
+}
+.ms-lg1 {
+  @include ms-lg1;
+}
+.ms-lgPull12 {
+  @include ms-lgPull12;
+}
+.ms-lgPull11 {
+  @include ms-lgPull11;
+}
+.ms-lgPull10 {
+  @include ms-lgPull10;
+}
+.ms-lgPull9 {
+  @include ms-lgPull9;
+}
+.ms-lgPull8 {
+  @include ms-lgPull8;
+}
+.ms-lgPull7 {
+  @include ms-lgPull7;
+}
+.ms-lgPull6 {
+  @include ms-lgPull6;
+}
+.ms-lgPull5 {
+  @include ms-lgPull5;
+}
+.ms-lgPull4 {
+  @include ms-lgPull4;
+}
+.ms-lgPull3 {
+  @include ms-lgPull3;
+}
+.ms-lgPull2 {
+  @include ms-lgPull2;
+}
+.ms-lgPull1 {
+  @include ms-lgPull1;
+}
+.ms-lgPull0 {
+  @include ms-lgPull0;
+}
+.ms-lgPush12 {
+  @include ms-lgPush12;
+}
+.ms-lgPush11 {
+  @include ms-lgPush11;
+}
+.ms-lgPush10 {
+  @include ms-lgPush10;
+}
+.ms-lgPush9 {
+  @include ms-lgPush9;
+}
+.ms-lgPush8 {
+  @include ms-lgPush8;
+}
+.ms-lgPush7 {
+  @include ms-lgPush7;
+}
+.ms-lgPush6 {
+  @include ms-lgPush6;
+}
+.ms-lgPush5 {
+  @include ms-lgPush5;
+}
+.ms-lgPush4 {
+  @include ms-lgPush4;
+}
+.ms-lgPush3 {
+  @include ms-lgPush3;
+}
+.ms-lgPush2 {
+  @include ms-lgPush2;
+}
+.ms-lgPush1 {
+  @include ms-lgPush1;
+}
+.ms-lgPush0 {
+  @include ms-lgPush0;
+}
+
+// Large Offset classes 0 ... 11
+.ms-lgOffset11 {
+  @include ms-lgOffset11;
+}
+.ms-lgOffset10 {
+  @include ms-lgOffset10;
+}
+.ms-lgOffset9 {
+  @include ms-lgOffset9;
+}
+.ms-lgOffset8 {
+  @include ms-lgOffset8;
+}
+.ms-lgOffset7 {
+  @include ms-lgOffset7;
+}
+.ms-lgOffset6 {
+  @include ms-lgOffset6;
+}
+.ms-lgOffset5 {
+  @include ms-lgOffset5;
+}
+.ms-lgOffset4 {
+  @include ms-lgOffset4;
+}
+.ms-lgOffset3 {
+  @include ms-lgOffset3;
+}
+.ms-lgOffset2 {
+  @include ms-lgOffset2;
+}
+.ms-lgOffset1 {
+  @include ms-lgOffset1;
+}
+.ms-lgOffset0 {
+  @include ms-lgOffset0;
+}
+
+// Extra large screens
+.ms-xl12 {
+  @include ms-xl12;
+}
+.ms-xl11 {
+  @include ms-xl11;
+}
+.ms-xl10 {
+  @include ms-xl10;
+}
+.ms-xl9 {
+  @include ms-xl9;
+}
+.ms-xl8 {
+  @include ms-xl8;
+}
+.ms-xl7 {
+  @include ms-xl7;
+}
+.ms-xl6 {
+  @include ms-xl6;
+}
+.ms-xl5 {
+  @include ms-xl5;
+}
+.ms-xl4 {
+  @include ms-xl4;
+}
+.ms-xl3 {
+  @include ms-xl3;
+}
+.ms-xl2 {
+  @include ms-xl2;
+}
+.ms-xl1 {
+  @include ms-xl1;
+}
+.ms-xlPull12 {
+  @include ms-xlPull12;
+}
+.ms-xlPull11 {
+  @include ms-xlPull11;
+}
+.ms-xlPull10 {
+  @include ms-xlPull10;
+}
+.ms-xlPull9 {
+  @include ms-xlPull9;
+}
+.ms-xlPull8 {
+  @include ms-xlPull8;
+}
+.ms-xlPull7 {
+  @include ms-xlPull7;
+}
+.ms-xlPull6 {
+  @include ms-xlPull6;
+}
+.ms-xlPull5 {
+  @include ms-xlPull5;
+}
+.ms-xlPull4 {
+  @include ms-xlPull4;
+}
+.ms-xlPull3 {
+  @include ms-xlPull3;
+}
+.ms-xlPull2 {
+  @include ms-xlPull2;
+}
+.ms-xlPull1 {
+  @include ms-xlPull1;
+}
+.ms-xlPull0 {
+  @include ms-xlPull0;
+}
+.ms-xlPush12 {
+  @include ms-xlPush12;
+}
+.ms-xlPush11 {
+  @include ms-xlPush11;
+}
+.ms-xlPush10 {
+  @include ms-xlPush10;
+}
+.ms-xlPush9 {
+  @include ms-xlPush9;
+}
+.ms-xlPush8 {
+  @include ms-xlPush8;
+}
+.ms-xlPush7 {
+  @include ms-xlPush7;
+}
+.ms-xlPush6 {
+  @include ms-xlPush6;
+}
+.ms-xlPush5 {
+  @include ms-xlPush5;
+}
+.ms-xlPush4 {
+  @include ms-xlPush4;
+}
+.ms-xlPush3 {
+  @include ms-xlPush3;
+}
+.ms-xlPush2 {
+  @include ms-xlPush2;
+}
+.ms-xlPush1 {
+  @include ms-xlPush1;
+}
+.ms-xlPush0 {
+  @include ms-xlPush0;
+}
+
+// Large Offset classes 0 ... 11
+.ms-xlOffset11 {
+  @include ms-xlOffset11;
+}
+.ms-xlOffset10 {
+  @include ms-xlOffset10;
+}
+.ms-xlOffset9 {
+  @include ms-xlOffset9;
+}
+.ms-xlOffset8 {
+  @include ms-xlOffset8;
+}
+.ms-xlOffset7 {
+  @include ms-xlOffset7;
+}
+.ms-xlOffset6 {
+  @include ms-xlOffset6;
+}
+.ms-xlOffset5 {
+  @include ms-xlOffset5;
+}
+.ms-xlOffset4 {
+  @include ms-xlOffset4;
+}
+.ms-xlOffset3 {
+  @include ms-xlOffset3;
+}
+.ms-xlOffset2 {
+  @include ms-xlOffset2;
+}
+.ms-xlOffset1 {
+  @include ms-xlOffset1;
+}
+.ms-xlOffset0 {
+  @include ms-xlOffset0;
+}
+
+// Extra extra large screens
+.ms-xxl12 {
+  @include ms-xxl12;
+}
+.ms-xxl11 {
+  @include ms-xxl11;
+}
+.ms-xxl10 {
+  @include ms-xxl10;
+}
+.ms-xxl9 {
+  @include ms-xxl9;
+}
+.ms-xxl8 {
+  @include ms-xxl8;
+}
+.ms-xxl7 {
+  @include ms-xxl7;
+}
+.ms-xxl6 {
+  @include ms-xxl6;
+}
+.ms-xxl5 {
+  @include ms-xxl5;
+}
+.ms-xxl4 {
+  @include ms-xxl4;
+}
+.ms-xxl3 {
+  @include ms-xxl3;
+}
+.ms-xxl2 {
+  @include ms-xxl2;
+}
+.ms-xxl1 {
+  @include ms-xxl1;
+}
+.ms-xxlPull12 {
+  @include ms-xxlPull12;
+}
+.ms-xxlPull11 {
+  @include ms-xxlPull11;
+}
+.ms-xxlPull10 {
+  @include ms-xxlPull10;
+}
+.ms-xxlPull9 {
+  @include ms-xxlPull9;
+}
+.ms-xxlPull8 {
+  @include ms-xxlPull8;
+}
+.ms-xxlPull7 {
+  @include ms-xxlPull7;
+}
+.ms-xxlPull6 {
+  @include ms-xxlPull6;
+}
+.ms-xxlPull5 {
+  @include ms-xxlPull5;
+}
+.ms-xxlPull4 {
+  @include ms-xxlPull4;
+}
+.ms-xxlPull3 {
+  @include ms-xxlPull3;
+}
+.ms-xxlPull2 {
+  @include ms-xxlPull2;
+}
+.ms-xxlPull1 {
+  @include ms-xxlPull1;
+}
+.ms-xxlPull0 {
+  @include ms-xxlPull0;
+}
+.ms-xxlPush12 {
+  @include ms-xxlPush12;
+}
+.ms-xxlPush11 {
+  @include ms-xxlPush11;
+}
+.ms-xxlPush10 {
+  @include ms-xxlPush10;
+}
+.ms-xxlPush9 {
+  @include ms-xxlPush9;
+}
+.ms-xxlPush8 {
+  @include ms-xxlPush8;
+}
+.ms-xxlPush7 {
+  @include ms-xxlPush7;
+}
+.ms-xxlPush6 {
+  @include ms-xxlPush6;
+}
+.ms-xxlPush5 {
+  @include ms-xxlPush5;
+}
+.ms-xxlPush4 {
+  @include ms-xxlPush4;
+}
+.ms-xxlPush3 {
+  @include ms-xxlPush3;
+}
+.ms-xxlPush2 {
+  @include ms-xxlPush2;
+}
+.ms-xxlPush1 {
+  @include ms-xxlPush1;
+}
+.ms-xxlPush0 {
+  @include ms-xxlPush0;
+}
+
+// Extra extra large Offset classes 0 ... 11
+.ms-xxlOffset11 {
+  @include ms-xxlOffset11;
+}
+.ms-xxlOffset10 {
+  @include ms-xxlOffset10;
+}
+.ms-xxlOffset9 {
+  @include ms-xxlOffset9;
+}
+.ms-xxlOffset8 {
+  @include ms-xxlOffset8;
+}
+.ms-xxlOffset7 {
+  @include ms-xxlOffset7;
+}
+.ms-xxlOffset6 {
+  @include ms-xxlOffset6;
+}
+.ms-xxlOffset5 {
+  @include ms-xxlOffset5;
+}
+.ms-xxlOffset4 {
+  @include ms-xxlOffset4;
+}
+.ms-xxlOffset3 {
+  @include ms-xxlOffset3;
+}
+.ms-xxlOffset2 {
+  @include ms-xxlOffset2;
+}
+.ms-xxlOffset1 {
+  @include ms-xxlOffset1;
+}
+.ms-xxlOffset0 {
+  @include ms-xxlOffset0;
+}
+
+// Extra extra extra large screens
+.ms-xxxl12 {
+  @include ms-xxxl12;
+}
+.ms-xxxl11 {
+  @include ms-xxxl11;
+}
+.ms-xxxl10 {
+  @include ms-xxxl10;
+}
+.ms-xxxl9 {
+  @include ms-xxxl9;
+}
+.ms-xxxl8 {
+  @include ms-xxxl8;
+}
+.ms-xxxl7 {
+  @include ms-xxxl7;
+}
+.ms-xxxl6 {
+  @include ms-xxxl6;
+}
+.ms-xxxl5 {
+  @include ms-xxxl5;
+}
+.ms-xxxl4 {
+  @include ms-xxxl4;
+}
+.ms-xxxl3 {
+  @include ms-xxxl3;
+}
+.ms-xxxl2 {
+  @include ms-xxxl2;
+}
+.ms-xxxl1 {
+  @include ms-xxxl1;
+}
+.ms-xxxlPull12 {
+  @include ms-xxxlPull12;
+}
+.ms-xxxlPull11 {
+  @include ms-xxxlPull11;
+}
+.ms-xxxlPull10 {
+  @include ms-xxxlPull10;
+}
+.ms-xxxlPull9 {
+  @include ms-xxxlPull9;
+}
+.ms-xxxlPull8 {
+  @include ms-xxxlPull8;
+}
+.ms-xxxlPull7 {
+  @include ms-xxxlPull7;
+}
+.ms-xxxlPull6 {
+  @include ms-xxxlPull6;
+}
+.ms-xxxlPull5 {
+  @include ms-xxxlPull5;
+}
+.ms-xxxlPull4 {
+  @include ms-xxxlPull4;
+}
+.ms-xxxlPull3 {
+  @include ms-xxxlPull3;
+}
+.ms-xxxlPull2 {
+  @include ms-xxxlPull2;
+}
+.ms-xxxlPull1 {
+  @include ms-xxxlPull1;
+}
+.ms-xxxlPull0 {
+  @include ms-xxxlPull0;
+}
+.ms-xxxlPush12 {
+  @include ms-xxxlPush12;
+}
+.ms-xxxlPush11 {
+  @include ms-xxxlPush11;
+}
+.ms-xxxlPush10 {
+  @include ms-xxxlPush10;
+}
+.ms-xxxlPush9 {
+  @include ms-xxxlPush9;
+}
+.ms-xxxlPush8 {
+  @include ms-xxxlPush8;
+}
+.ms-xxxlPush7 {
+  @include ms-xxxlPush7;
+}
+.ms-xxxlPush6 {
+  @include ms-xxxlPush6;
+}
+.ms-xxxlPush5 {
+  @include ms-xxxlPush5;
+}
+.ms-xxxlPush4 {
+  @include ms-xxxlPush4;
+}
+.ms-xxxlPush3 {
+  @include ms-xxxlPush3;
+}
+.ms-xxxlPush2 {
+  @include ms-xxxlPush2;
+}
+.ms-xxxlPush1 {
+  @include ms-xxxlPush1;
+}
+.ms-xxxlPush0 {
+  @include ms-xxxlPush0;
+}
+
+// Extra extra extra large Offset classes 0 ... 11
+.ms-xxxlOffset11 {
+  @include ms-xxxlOffset11;
+}
+.ms-xxxlOffset10 {
+  @include ms-xxxlOffset10;
+}
+.ms-xxxlOffset9 {
+  @include ms-xxxlOffset9;
+}
+.ms-xxxlOffset8 {
+  @include ms-xxxlOffset8;
+}
+.ms-xxxlOffset7 {
+  @include ms-xxxlOffset7;
+}
+.ms-xxxlOffset6 {
+  @include ms-xxxlOffset6;
+}
+.ms-xxxlOffset5 {
+  @include ms-xxxlOffset5;
+}
+.ms-xxxlOffset4 {
+  @include ms-xxxlOffset4;
+}
+.ms-xxxlOffset3 {
+  @include ms-xxxlOffset3;
+}
+.ms-xxxlOffset2 {
+  @include ms-xxxlOffset2;
+}
+.ms-xxxlOffset1 {
+  @include ms-xxxlOffset1;
+}
+.ms-xxxlOffset0 {
+  @include ms-xxxlOffset0;
+}
diff --git a/packages/au1-app/src/resources/sass/_Utility.scss b/packages/au1-app/src/resources/sass/_Utility.scss
new file mode 100644
index 0000000..3c29ae0
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Utility.scss
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Some mixins are output to CSS classes as utilities.
+
+// The best box is a border box.
+.ms-borderBox, .ms-borderBox::before, .ms-borderBox::after {
+  @include ms-borderBox;
+}
+
+// To apply border base settings
+.ms-borderBase {
+  @include ms-borderBase;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-clearfix {
+  @include ms-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-normalize {
+  @include ms-normalize;
+}
+
+// Text alignments.
+.ms-textAlignLeft {
+  @include ms-text-align(left);
+}
+
+.ms-textAlignRight {
+  @include ms-text-align(right);
+}
+
+.ms-textAlignCenter {
+  text-align: center;
+}
+
+// Use to hide content while still making it readable by screen reader (Accessibility)
+.ms-screenReaderOnly {
+  @include ms-screenReaderOnly;
+}
+
+// Use to add truncation with ellipsis
+.ms-textTruncate {
+  @include ms-textTruncate;
+}
+
+// Use to disable text wrapping
+.ms-noWrap{
+  @include ms-noWrap;
+}
diff --git a/packages/au1-app/src/resources/sass/_Wrapper.scss b/packages/au1-app/src/resources/sass/_Wrapper.scss
new file mode 100644
index 0000000..7ced11f
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_Wrapper.scss
@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Wrapper component to set base typography.
+
+.ms-Fabric {
+  @include ms-Fabric;
+}
+
+// Create overrides for each language that has an alternate font-family.
+@include ms-font-family-language-override('ar', $ms-font-family-arabic);
+@include ms-font-family-language-override('bg', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('cs', $ms-font-family-east-european);
+@include ms-font-family-language-override('el', $ms-font-family-greek);
+@include ms-font-family-language-override('et', $ms-font-family-east-european);
+@include ms-font-family-language-override('he', $ms-font-family-hebrew);
+@include ms-font-family-language-override('hi', $ms-font-family-hindi);
+@include ms-font-family-language-override('hr', $ms-font-family-east-european);
+@include ms-font-family-language-override('hu', $ms-font-family-east-european);
+@include ms-font-family-language-override('ja', $ms-font-family-japanese);
+@include ms-font-family-language-override('kk', $ms-font-family-east-european);
+@include ms-font-family-language-override('ko', $ms-font-family-korean);
+@include ms-font-family-language-override('lo', $ms-font-family-lao);
+@include ms-font-family-language-override('lt', $ms-font-family-east-european);
+@include ms-font-family-language-override('lv', $ms-font-family-east-european);
+@include ms-font-family-language-override('pl', $ms-font-family-east-european);
+@include ms-font-family-language-override('ru', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('sk', $ms-font-family-east-european);
+@include ms-font-family-language-override('sr-latn', $ms-font-family-east-european);
+@include ms-font-family-language-override('th', $ms-font-family-thai);
+@include ms-font-family-language-override('tr', $ms-font-family-east-european);
+@include ms-font-family-language-override('uk', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('vi', $ms-font-family-vietnamese);
+@include ms-font-family-language-override('zh-hans', $ms-font-family-chinese-simplified);
+@include ms-font-family-language-override('zh-hant', $ms-font-family-chinese-traditional);
+
+// Modifier: Use Selawik as an open source alternative to Segoe UI.
+.ms-Fabric--selawik {
+  font-family: $ms-font-family-selawik;
+}
diff --git a/packages/au1-app/src/resources/sass/_effects.scss b/packages/au1-app/src/resources/sass/_effects.scss
new file mode 100644
index 0000000..b428123
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_effects.scss
@@ -0,0 +1,8 @@
+$elevation4: '[theme:elevation4, default: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)]';
+$elevation8: '[theme:elevation8, default: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)]';
+$elevation16: '[theme:elevation16, default: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)]';
+$elevation64: '[theme:elevation64, default: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)]';
+
+$roundedCorner2: '[theme:roundedCorner2, default: 2px]';
+$roundedCorner4: '[theme:roundedCorner4, default: 4px]';
+$roundedCorner6: '[theme:roundedCorner6, default: 6px]';
diff --git a/packages/au1-app/src/resources/sass/_highContrast.scss b/packages/au1-app/src/resources/sass/_highContrast.scss
new file mode 100644
index 0000000..562dda9
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_highContrast.scss
@@ -0,0 +1,34 @@
+@mixin high-contrast {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin high-contrast-black-on-white {
+  @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light) {
+   @content;
+  }
+}
+
+@mixin high-contrast-white-on-black {
+  @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark) {
+   @content;
+  }
+}
+
+@mixin high-contrast-no-adjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}
+
+/**
+ * The style which turns off high contrast adjustment in (only) Edge Chromium browser.
+ */
+@mixin high-contrast-edge-chromium-no-adjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/_i18n.scss b/packages/au1-app/src/resources/sass/_i18n.scss
new file mode 100644
index 0000000..62f374b
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_i18n.scss
@@ -0,0 +1,296 @@
+// Some things copied from WinJS with <3
+
+
+// LTR mixin definition
+@mixin LTR {
+    html[dir='ltr'] & {
+        @content;
+    }
+}
+
+// RTL mixin definition
+@mixin RTL {
+    html[dir='rtl'] & {
+        @content;
+    }
+}
+
+// Use baseRTL for a root element of a control that needs rtl support
+@mixin baseRtl {
+    @include RTL {
+        direction: rtl;
+        unicode-bidi: bidi-override;
+    }
+}
+
+/*
+    Common CSS property mixins with support for RTL.
+    Use these mixins when you want to automatically create RTL versions of your properties.
+    They are in alphabetical order (a-z).
+*/
+
+@mixin border-color($top, $right, $bottom, $left) {
+    border-color: $top $right $bottom $left;
+    @include RTL {
+        border-color: $top $left $bottom $right;
+    }
+}
+
+@mixin border-left($width, $style, $color) {
+    @include LTR {
+        border-left: $width $style $color;
+    }
+    @include RTL {
+        border-right: $width $style $color;
+    }
+}
+
+@mixin border-left-color($color) {
+    @include LTR {
+        border-left-color: $color;
+    }
+    @include RTL {
+        border-right-color: $color;
+    }
+}
+
+@mixin border-left-style($style) {
+    @include LTR {
+        border-left-style: $style;
+    }
+    @include RTL {
+        border-right-style: $style;
+    }
+}
+
+@mixin border-left-width($width) {
+    @include LTR {
+        border-left-width: $width;
+    }
+    @include RTL {
+        border-right-width: $width;
+    }
+}
+
+@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+    border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+    @include RTL {
+        border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+    }
+}
+
+@mixin border-right($width, $style, $color) {
+    @include LTR {
+        border-right: $width $style $color;
+    }
+    @include RTL {
+        border-left: $width $style $color;
+    }
+}
+
+@mixin border-right-color($color) {
+    @include LTR {
+        border-right-color: $color;
+    }
+    @include RTL {
+        border-left-color: $color;
+    }
+}
+
+@mixin border-right-style($style) {
+    @include LTR {
+         border-right-style: $style;
+    }
+    @include RTL {
+        border-left-style: $style;
+    }
+}
+
+@mixin border-right-width($width) {
+    @include LTR {
+        border-right-width: $width;
+    }
+    @include RTL {
+        border-left-width: $width;
+    }
+}
+
+@mixin clear($side) {
+    @if $side == left {
+        @include LTR {
+            clear: $side;
+        }
+        @include RTL {
+            clear: right;
+        }
+    } @else if $side == right {
+        @include LTR {
+            clear: $side;
+        }
+
+        @include RTL {
+            clear: left;
+        }
+    } @else {
+        clear: $side;
+    }
+}
+
+@mixin float($direction) {
+    @if $direction == left {
+        @include LTR {
+            float: left;
+        }
+        @include RTL {
+            float: right;
+        }
+    } @else {
+        @include LTR {
+            float: right;
+        }
+        @include RTL {
+            float: left;
+        }
+    }
+}
+
+@mixin left($distance) {
+    @include LTR {
+        left: $distance;
+    }
+    @include RTL {
+        right: $distance;
+    }
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+    margin: $top $right $bottom $left;
+    @include RTL {
+        margin: $top $left $bottom $right;
+    }
+}
+
+@mixin margin-left($distance) {
+    @include LTR {
+        margin-left: $distance;
+    }
+    @include RTL {
+        margin-right: $distance;
+    }
+}
+
+@mixin margin-right($distance) {
+    @include LTR {
+        margin-right: $distance;
+    }
+    @include RTL {
+        margin-left: $distance;
+    }
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+    padding: $top $right $bottom $left;
+    @include RTL {
+        padding: $top $left $bottom $right;
+    }
+}
+
+@mixin padding-left($distance) {
+    @include LTR {
+        padding-left: $distance;
+    }
+    @include RTL {
+        padding-right: $distance;
+    }
+}
+
+@mixin padding-right($distance) {
+    @include LTR {
+        padding-right: $distance;
+    }
+    @include RTL {
+        padding-left: $distance;
+    }
+}
+
+@mixin right($distance) {
+    @include LTR {
+        right: $distance;
+    }
+    @include RTL {
+        left: $distance;
+    }
+}
+
+@mixin text-align($direction) {
+    @if $direction == left {
+        @include LTR {
+            text-align: left;
+        }
+        @include RTL {
+            text-align: right;
+        }
+    } @else {
+        @include LTR {
+            text-align: right;
+        }
+        @include RTL {
+            text-align: left;
+        }
+    }
+}
+
+@mixin box-shadow($left, $etc) {
+    @include LTR {
+        box-shadow: $left $etc;
+    }
+
+    @include RTL {
+        box-shadow: -$left $etc;
+    }
+}
+
+@mixin transform-scaleX($scaleX: 1) {
+    @include LTR {
+        transform: scaleX($scaleX);
+    }
+    @include RTL {
+        transform: scaleX(-$scaleX);
+    }
+}
+
+@mixin transform-translateX($distance) {
+    @include LTR {
+        transform: translateX($distance);
+    }
+    @include RTL {
+        transform: translateX(-$distance);
+    }
+}
+
+// only supported when ONLY left/right are declared
+@mixin transition-property($direction) {
+    @if $direction == left {
+        @include LTR {
+            transition-property: left;
+        }
+        @include RTL {
+            transition-property: right;
+        }
+    } @else {
+        @include LTR {
+            transition-property: right;
+        }
+        @include RTL {
+            transition-property: left;
+        }
+    }
+}
+
+// Disables high contrast color adjusts for Edge/IE11
+@mixin highContrastAdjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/_legacyThemePalette.scss b/packages/au1-app/src/resources/sass/_legacyThemePalette.scss
new file mode 100644
index 0000000..003bc3b
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_legacyThemePalette.scss
@@ -0,0 +1,19 @@
+$ms-color-error: "[theme:error, default: #a80000]";
+$ms-color-errorText: "[theme:warningText, default: #333333]";
+$ms-color-errorBackground: "[theme:errorBackground, default: rgba(232,17,35,.2)]";
+$ms-color-success: "[theme:success, default: #107c10]";
+$ms-color-successText: "[theme:successText, default: #333333]";
+$ms-color-successBackground: "[theme:successBackground, default: #dff6dd]";
+$ms-color-alert: "[theme:alert, default: #d83b01]";
+$ms-color-alertText: "[theme:alertText, default: #333333]";
+$ms-color-alertBackground: "[theme:alertBackground, default: #deecf9]";
+$ms-color-warning: "[theme:warning, default: #767676]";
+$ms-color-warningText: "[theme:warningText, default: #333333]";
+$ms-color-warningBackground: "[theme:warningBackground, default: #fff4ce]";
+$ms-color-severeWarning: "[theme:severeWarning, default: #a80000]";
+$ms-color-severeWarningText: "[theme:severeWarningText, default: #333333]";
+$ms-color-severeWarningBackground: "[theme:severeWarningBackground, default: #fed9cc]";
+$ms-color-info: "[theme:info, default: #666666]";
+$ms-color-infoText: "[theme:infoText, default: #333333]";
+$ms-color-infoBackground: "[theme:infoBackground, default: #f4f4f4]";
+$ms-color-themeAccent: "[theme:accent, default:#0078d4]";
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/sass/_semanticSlots.scss b/packages/au1-app/src/resources/sass/_semanticSlots.scss
new file mode 100644
index 0000000..fadf6dc
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_semanticSlots.scss
@@ -0,0 +1,104 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$bodyBackgroundColor: '[theme:bodyBackground, default: #ffffff]';
+$bodyBackgroundHoveredColor: '[theme:bodyBackgroundHovered, default: #f3f2f1]';
+$bodyBackgroundCheckedColor: '[theme:bodyBackgroundChecked, default: #edebe9]';
+$bodyStandoutBackgroundColor: '[theme:bodyStandoutBackground, default: #faf9f8]';
+$bodyFrameBackgroundColor: '[theme:bodyFrameBackground, default: #ffffff]';
+$bodyFrameDividerColor: '[theme:bodyFrameDivider, default: #edebe9]';
+$bodyTextColor: '[theme:bodyText, default: #323130]';
+$bodyTextCheckedColor: '[theme:bodyTextChecked, default: #000000]';
+$bodySubtextColor: '[theme:bodySubtext, default: #605e5c]';
+$bodyDividerColor: '[theme:bodyDivider, default: #edebe9]';
+$disabledBodyTextColor: '[theme:disabledBodyText, default: #a19f9d]';
+$disabledBodySubtextColor: '[theme:disabledBodySubtext, default: #c8c6c4]';
+$disabledBorderColor: '[theme:disabledBorder, default: #c8c6c4]';
+$focusBorderColor: '[theme:focusBorder, default: #605e5c]';
+$cardStandoutBackgroundColor: '[theme:cardStandoutBackground, default: #ffffff]';
+$cardShadowColor: '[theme:cardShadow, default: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)]';
+$cardShadowHoveredColor: '[theme:cardShadowHovered, default: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)]';
+$variantBorderColor: '[theme:variantBorder, default: #edebe9]';
+$variantBorderHoveredColor: '[theme:variantBorderHovered, default: #a19f9d]';
+$defaultStateBackgroundColor: '[theme:defaultStateBackground, default: #faf9f8]';
+$actionLinkColor: '[theme:actionLink, default: #323130]';
+$actionLinkHoveredColor: '[theme:actionLinkHovered, default: #201f1e]';
+$linkColor: '[theme:link, default: #0078d4]';
+$linkHoveredColor: '[theme:linkHovered, default: #004578]';
+$buttonBackgroundColor: '[theme:buttonBackground, default: #ffffff]';
+$buttonBackgroundCheckedColor: '[theme:buttonBackgroundChecked, default: #c8c6c4]';
+$buttonBackgroundHoveredColor: '[theme:buttonBackgroundHovered, default: #f3f2f1]';
+$buttonBackgroundCheckedHoveredColor: '[theme:buttonBackgroundCheckedHovered, default: #edebe9]';
+$buttonBackgroundPressedColor: '[theme:buttonBackgroundPressed, default: #edebe9]';
+$buttonBackgroundDisabledColor: '[theme:buttonBackgroundDisabled, default: #f3f2f1]';
+$buttonBorderColor: '[theme:buttonBorder, default: #8a8886]';
+$buttonTextColor: '[theme:buttonText, default: #323130]';
+$buttonTextHoveredColor: '[theme:buttonTextHovered, default: #201f1e]';
+$buttonTextCheckedColor: '[theme:buttonTextChecked, default: #201f1e]';
+$buttonTextCheckedHoveredColor: '[theme:buttonTextCheckedHovered, default: #000000]';
+$buttonTextPressedColor: '[theme:buttonTextPressed, default: #201f1e]';
+$buttonTextDisabledColor: '[theme:buttonTextDisabled, default: #a19f9d]';
+$buttonBorderDisabledColor: '[theme:buttonBorderDisabled, default: #f3f2f1]';
+$primaryButtonBackgroundColor: '[theme:primaryButtonBackground, default: #0078d4]';
+$primaryButtonBackgroundHoveredColor: '[theme:primaryButtonBackgroundHovered, default: #106ebe]';
+$primaryButtonBackgroundPressedColor: '[theme:primaryButtonBackgroundPressed, default: #005a9e]';
+$primaryButtonBackgroundDisabledColor: '[theme:primaryButtonBackgroundDisabled, default: #f3f2f1]';
+$primaryButtonBorderColor: '[theme:primaryButtonBorder, default: transparent]';
+$primaryButtonTextColor: '[theme:primaryButtonText, default: #ffffff]';
+$primaryButtonTextHoveredColor: '[theme:primaryButtonTextHovered, default: #ffffff]';
+$primaryButtonTextPressedColor: '[theme:primaryButtonTextPressed, default: #ffffff]';
+$primaryButtonTextDisabledColor: '[theme:primaryButtonTextDisabled, default: #d2d0ce]';
+$accentButtonBackgroundColor: '[theme:accentButtonBackground, default: #0078d4]';
+$accentButtonTextColor: '[theme:accentButtonText, default: #ffffff]';
+$inputBorderColor: '[theme:inputBorder, default: #605e5c]';
+$inputBorderHoveredColor: '[theme:inputBorderHovered, default: #323130]';
+$inputBackgroundColor: '[theme:inputBackground, default: #ffffff]';
+$inputBackgroundCheckedColor: '[theme:inputBackgroundChecked, default: #0078d4]';
+$inputBackgroundCheckedHoveredColor: '[theme:inputBackgroundCheckedHovered, default: #005a9e]';
+$inputPlaceholderBackgroundCheckedColor: '[theme:inputPlaceholderBackgroundChecked, default: #deecf9]';
+$inputForegroundCheckedColor: '[theme:inputForegroundChecked, default: #ffffff]';
+$inputIconColor: '[theme:inputIcon, default: #0078d4]';
+$inputIconHoveredColor: '[theme:inputIconHovered, default: #005a9e]';
+$inputIconDisabledColor: '[theme:inputIconDisabled, default: #a19f9d]';
+$inputFocusBorderAltColor: '[theme:inputFocusBorderAlt, default: #0078d4]';
+$smallInputBorderColor: '[theme:smallInputBorder, default: #605e5c]';
+$inputTextColor: '[theme:inputText, default: #323130]';
+$inputTextHoveredColor: '[theme:inputTextHovered, default: #201f1e]';
+$inputPlaceholderTextColor: '[theme:inputPlaceholderText, default: #605e5c]';
+$disabledBackgroundColor: '[theme:disabledBackground, default: #f3f2f1]';
+$disabledTextColor: '[theme:disabledText, default: #a19f9d]';
+$disabledSubtextColor: '[theme:disabledSubtext, default: #d2d0ce]';
+$listBackgroundColor: '[theme:listBackground, default: #ffffff]';
+$listTextColor: '[theme:listText, default: #323130]';
+$listItemBackgroundHoveredColor: '[theme:listItemBackgroundHovered, default: #f3f2f1]';
+$listItemBackgroundCheckedColor: '[theme:listItemBackgroundChecked, default: #edebe9]';
+$listItemBackgroundCheckedHoveredColor: '[theme:listItemBackgroundCheckedHovered, default: #e1dfdd]';
+$listHeaderBackgroundHoveredColor: '[theme:listHeaderBackgroundHovered, default: #f3f2f1]';
+$listHeaderBackgroundPressedColor: '[theme:listHeaderBackgroundPressed, default: #edebe9]';
+$menuBackgroundColor: '[theme:menuBackground, default: #ffffff]';
+$menuDividerColor: '[theme:menuDivider, default: #c8c6c4]';
+$menuIconColor: '[theme:menuIcon, default: #0078d4]';
+$menuHeaderColor: '[theme:menuHeader, default: #0078d4]';
+$menuItemBackgroundHoveredColor: '[theme:menuItemBackgroundHovered, default: #f3f2f1]';
+$menuItemBackgroundPressedColor: '[theme:menuItemBackgroundPressed, default: #edebe9]';
+$menuItemTextColor: '[theme:menuItemText, default: #323130]';
+$menuItemTextHoveredColor: '[theme:menuItemTextHovered, default: #201f1e]';
+$errorTextColor: '[theme:errorText, default: #a4262c]';
+$messageTextColor: '[theme:messageText, default: #323130]';
+$messageLinkColor: '[theme:messageLink, default: #005A9E]';
+$messageLinkHoveredColor: '[theme:messageLinkHovered, default: #004578]';
+$infoIconColor: '[theme:infoIcon, default: #605e5c]';
+$errorIconColor: '[theme:errorIcon, default: #A80000]';
+$blockingIconColor: '[theme:blockingIcon, default: #FDE7E9]';
+$warningIconColor: '[theme:warningIcon, default: #797775]';
+$severeWarningIconColor: '[theme:severeWarningIcon, default: #D83B01]';
+$successIconColor: '[theme:successIcon, default: #107C10]';
+$infoBackgroundColor: '[theme:infoBackground, default: #f3f2f1]';
+$errorBackgroundColor: '[theme:errorBackground, default: #FDE7E9]';
+$blockingBackgroundColor: '[theme:blockingBackground, default: #FDE7E9]';
+$warningBackgroundColor: '[theme:warningBackground, default: #FFF4CE]';
+$severeWarningBackgroundColor: '[theme:severeWarningBackground, default: #FED9CC]';
+$successBackgroundColor: '[theme:successBackground, default: #DFF6DD]';
+$warningHighlightColor: '[theme:warningHighlight, default: #ffb900]';  /* @deprecated */
+$warningTextColor: '[theme:warningText, default: #323130]';  /* @deprecated */
+$successTextColor: '[theme:successText, default: #107C10]';  /* @deprecated */
+$listTextColorColor: '[theme:listTextColor, default: #323130]';  /* @deprecated */
+$menuItemBackgroundCheckedColor: '[theme:menuItemBackgroundChecked, default: #edebe9]';  /* @deprecated */
diff --git a/packages/au1-app/src/resources/sass/_themeOverrides.scss b/packages/au1-app/src/resources/sass/_themeOverrides.scss
new file mode 100644
index 0000000..5f46f91
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_themeOverrides.scss
@@ -0,0 +1,51 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$ms-color-themeDarker: "[theme:themeDarker, default: #004578]";
+$ms-color-themeDark: "[theme:themeDark, default: #005a9e]";
+$ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]";
+$ms-color-themePrimary: "[theme:themePrimary, default: #0078d4]";
+$ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]";
+$ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]";
+$ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]";
+$ms-color-themeLighter: "[theme:themeLighter, default: #deecf9]";
+$ms-color-themeLighterAlt: "[theme:themeLighterAlt, default: #eff6fc]";
+$ms-color-black: "[theme:black, default: #000000]";
+$ms-color-blackTranslucent40: "[theme:blackTranslucent40, default: rgba(0,0,0,.4)]";
+$ms-color-neutralDark: "[theme:neutralDark, default: #201f1e]";
+$ms-color-neutralPrimary: "[theme:neutralPrimary, default: #323130]";
+$ms-color-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default: #3b3a39]";
+$ms-color-neutralSecondary: "[theme:neutralSecondary, default: #605e5c]";
+$ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #8a8886]";
+$ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a19f9d]";
+$ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c6c4]";
+$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d2d0ce]";
+$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #e1dfdd]";
+$ms-color-neutralLight: "[theme:neutralLight, default: #edebe9]";
+$ms-color-neutralLighter: "[theme:neutralLighter, default: #f3f2f1]";
+$ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #faf9f8]";
+$ms-color-accent: "[theme:accent, default: #0078d4]";
+$ms-color-white: "[theme:white, default: #ffffff]";
+$ms-color-whiteTranslucent40: "[theme:whiteTranslucent40, default: rgba(255,255,255,.4)]";
+$ms-color-yellowDark: "[theme:yellowDark, default: #d29200]";
+$ms-color-yellow: "[theme:yellow, default: #ffb900]";
+$ms-color-yellowLight: "[theme:yellowLight, default: #fff100]";
+$ms-color-orange: "[theme:orange, default: #d83b01]";
+$ms-color-orangeLight: "[theme:orangeLight, default: #ea4300]";
+$ms-color-orangeLighter: "[theme:orangeLighter, default: #ff8c00]";
+$ms-color-redDark: "[theme:redDark, default: #a4262c]";
+$ms-color-red: "[theme:red, default: #e81123]";
+$ms-color-magentaDark: "[theme:magentaDark, default: #5c005c]";
+$ms-color-magenta: "[theme:magenta, default: #b4009e]";
+$ms-color-magentaLight: "[theme:magentaLight, default: #e3008c]";
+$ms-color-purpleDark: "[theme:purpleDark, default: #32145a]";
+$ms-color-purple: "[theme:purple, default: #5c2d91]";
+$ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]";
+$ms-color-blueDark: "[theme:blueDark, default: #002050]";
+$ms-color-blueMid: "[theme:blueMid, default: #00188f]";
+$ms-color-blue: "[theme:blue, default: #0078d4]";
+$ms-color-blueLight: "[theme:blueLight, default: #00bcf2]";
+$ms-color-tealDark: "[theme:tealDark, default: #004b50]";
+$ms-color-teal: "[theme:teal, default: #008272]";
+$ms-color-tealLight: "[theme:tealLight, default: #00b294]";
+$ms-color-greenDark: "[theme:greenDark, default: #004b1c]";
+$ms-color-green: "[theme:green, default: #107c10]";
+$ms-color-greenLight: "[theme:greenLight, default: #bad80a]";
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/sass/_themeVariables.scss b/packages/au1-app/src/resources/sass/_themeVariables.scss
new file mode 100644
index 0000000..2827cf9
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/_themeVariables.scss
@@ -0,0 +1,118 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$ms-font-tinyFontFamily: "[theme:tinyFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-tinyMozOsxFontSmoothing: "[theme:tinyMozOsxFontSmoothing, default: grayscale]";
+$ms-font-tinyWebkitFontSmoothing: "[theme:tinyWebkitFontSmoothing, default: antialiased]";
+$ms-font-tinyFontSize: "[theme:tinyFontSize, default: 10px]";
+$ms-font-tinyFontWeight: "[theme:tinyFontWeight, default: 400]";
+@mixin tinyFontBasic {
+    font-size: $ms-font-tinyFontSize;
+    font-weight: $ms-font-tinyFontWeight;
+}
+$ms-font-xSmallFontFamily: "[theme:xSmallFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xSmallMozOsxFontSmoothing: "[theme:xSmallMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xSmallWebkitFontSmoothing: "[theme:xSmallWebkitFontSmoothing, default: antialiased]";
+$ms-font-xSmallFontSize: "[theme:xSmallFontSize, default: 10px]";
+$ms-font-xSmallFontWeight: "[theme:xSmallFontWeight, default: 400]";
+@mixin xSmallFontBasic {
+    font-size: $ms-font-xSmallFontSize;
+    font-weight: $ms-font-xSmallFontWeight;
+}
+$ms-font-smallFontFamily: "[theme:smallFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-smallMozOsxFontSmoothing: "[theme:smallMozOsxFontSmoothing, default: grayscale]";
+$ms-font-smallWebkitFontSmoothing: "[theme:smallWebkitFontSmoothing, default: antialiased]";
+$ms-font-smallFontSize: "[theme:smallFontSize, default: 12px]";
+$ms-font-smallFontWeight: "[theme:smallFontWeight, default: 400]";
+@mixin smallFontBasic {
+    font-size: $ms-font-smallFontSize;
+    font-weight: $ms-font-smallFontWeight;
+}
+$ms-font-smallPlusFontFamily: "[theme:smallPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-smallPlusMozOsxFontSmoothing: "[theme:smallPlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-smallPlusWebkitFontSmoothing: "[theme:smallPlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-smallPlusFontSize: "[theme:smallPlusFontSize, default: 12px]";
+$ms-font-smallPlusFontWeight: "[theme:smallPlusFontWeight, default: 400]";
+@mixin smallPlusFontBasic {
+    font-size: $ms-font-smallPlusFontSize;
+    font-weight: $ms-font-smallPlusFontWeight;
+}
+$ms-font-mediumFontFamily: "[theme:mediumFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-mediumMozOsxFontSmoothing: "[theme:mediumMozOsxFontSmoothing, default: grayscale]";
+$ms-font-mediumWebkitFontSmoothing: "[theme:mediumWebkitFontSmoothing, default: antialiased]";
+$ms-font-mediumFontSize: "[theme:mediumFontSize, default: 14px]";
+$ms-font-mediumFontWeight: "[theme:mediumFontWeight, default: 400]";
+@mixin mediumFontBasic {
+    font-size: $ms-font-mediumFontSize;
+    font-weight: $ms-font-mediumFontWeight;
+}
+$ms-font-mediumPlusFontFamily: "[theme:mediumPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-mediumPlusMozOsxFontSmoothing: "[theme:mediumPlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-mediumPlusWebkitFontSmoothing: "[theme:mediumPlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-mediumPlusFontSize: "[theme:mediumPlusFontSize, default: 16px]";
+$ms-font-mediumPlusFontWeight: "[theme:mediumPlusFontWeight, default: 400]";
+@mixin mediumPlusFontBasic {
+    font-size: $ms-font-mediumPlusFontSize;
+    font-weight: $ms-font-mediumPlusFontWeight;
+}
+$ms-font-largeFontFamily: "[theme:largeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-largeMozOsxFontSmoothing: "[theme:largeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-largeWebkitFontSmoothing: "[theme:largeWebkitFontSmoothing, default: antialiased]";
+$ms-font-largeFontSize: "[theme:largeFontSize, default: 18px]";
+$ms-font-largeFontWeight: "[theme:largeFontWeight, default: 400]";
+@mixin largeFontBasic {
+    font-size: $ms-font-largeFontSize;
+    font-weight: $ms-font-largeFontWeight;
+}
+$ms-font-xLargeFontFamily: "[theme:xLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xLargeMozOsxFontSmoothing: "[theme:xLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xLargeWebkitFontSmoothing: "[theme:xLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-xLargeFontSize: "[theme:xLargeFontSize, default: 20px]";
+$ms-font-xLargeFontWeight: "[theme:xLargeFontWeight, default: 600]";
+@mixin xLargeFontBasic {
+    font-size: $ms-font-xLargeFontSize;
+    font-weight: $ms-font-xLargeFontWeight;
+}
+$ms-font-xLargePlusFontFamily: "[theme:xLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xLargePlusMozOsxFontSmoothing: "[theme:xLargePlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xLargePlusWebkitFontSmoothing: "[theme:xLargePlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-xLargePlusFontSize: "[theme:xLargePlusFontSize, default: 24px]";
+$ms-font-xLargePlusFontWeight: "[theme:xLargePlusFontWeight, default: 600]";
+@mixin xLargePlusFontBasic {
+    font-size: $ms-font-xLargePlusFontSize;
+    font-weight: $ms-font-xLargePlusFontWeight;
+}
+$ms-font-xxLargeFontFamily: "[theme:xxLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xxLargeMozOsxFontSmoothing: "[theme:xxLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xxLargeWebkitFontSmoothing: "[theme:xxLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-xxLargeFontSize: "[theme:xxLargeFontSize, default: 28px]";
+$ms-font-xxLargeFontWeight: "[theme:xxLargeFontWeight, default: 600]";
+@mixin xxLargeFontBasic {
+    font-size: $ms-font-xxLargeFontSize;
+    font-weight: $ms-font-xxLargeFontWeight;
+}
+$ms-font-xxLargePlusFontFamily: "[theme:xxLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xxLargePlusMozOsxFontSmoothing: "[theme:xxLargePlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xxLargePlusWebkitFontSmoothing: "[theme:xxLargePlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-xxLargePlusFontSize: "[theme:xxLargePlusFontSize, default: 32px]";
+$ms-font-xxLargePlusFontWeight: "[theme:xxLargePlusFontWeight, default: 600]";
+@mixin xxLargePlusFontBasic {
+    font-size: $ms-font-xxLargePlusFontSize;
+    font-weight: $ms-font-xxLargePlusFontWeight;
+}
+$ms-font-superLargeFontFamily: "[theme:superLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-superLargeMozOsxFontSmoothing: "[theme:superLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-superLargeWebkitFontSmoothing: "[theme:superLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-superLargeFontSize: "[theme:superLargeFontSize, default: 42px]";
+$ms-font-superLargeFontWeight: "[theme:superLargeFontWeight, default: 600]";
+@mixin superLargeFontBasic {
+    font-size: $ms-font-superLargeFontSize;
+    font-weight: $ms-font-superLargeFontWeight;
+}
+$ms-font-megaFontFamily: "[theme:megaFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-megaMozOsxFontSmoothing: "[theme:megaMozOsxFontSmoothing, default: grayscale]";
+$ms-font-megaWebkitFontSmoothing: "[theme:megaWebkitFontSmoothing, default: antialiased]";
+$ms-font-megaFontSize: "[theme:megaFontSize, default: 68px]";
+$ms-font-megaFontWeight: "[theme:megaFontWeight, default: 600]";
+@mixin megaFontBasic {
+    font-size: $ms-font-megaFontSize;
+    font-weight: $ms-font-megaFontWeight;
+}
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.MDL2.scss b/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.MDL2.scss
new file mode 100644
index 0000000..00cf944
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.MDL2.scss
@@ -0,0 +1,447 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-animation-keyframes() {
+  // Set a default value for the version-scoped variable if it isn't assigned
+  $ms-fabric-version-suffix: '' !default;
+
+  @keyframes ms-slideRightIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0px, 0px); }
+    to { transform: translate3d(40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -10px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -20px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 10px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 20px, 0px); }
+  }
+
+  @keyframes ms-scaleUp100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(.98, .98, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-scaleUp103#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(1.03, 1.03, 1); }
+  }
+
+  @keyframes ms-scaleDown98#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(0.98, 0.98, 1); }
+  }
+
+  @keyframes ms-scaleDown100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1.03, 1.03, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-fadeIn#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 0;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 1; }
+  }
+
+  @keyframes ms-fadeOut#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 1;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 0; }
+  }
+
+  @keyframes ms-rotate90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(0deg); }
+    to { transform: rotateZ(90deg); }
+  }
+
+  @keyframes ms-rotateN90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(90deg); }
+    to { transform: rotateZ(0deg); }
+  }
+}
+
+// Wraps content in a 'prefers-reduced-motion' media query, so that it will only be
+// applied where the user has opted to reduce motion. This is currently supported by
+// Safari on iOS and macOS, and will likely be coming to other browsers in the future.
+//
+// See this article: https://css-tricks.com/introduction-reduced-motion-media-query/
+@mixin ms-prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// Outputs the properties for an animation.
+@mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
+  // Set a default value for the version-scoped variable if it isn't assigned.
+  $ms-fabric-version-suffix: '' !default;
+
+  // Append the scoping suffix to each animation name.
+  $namelist: ();
+  @each $name in $names {
+    $newname: $name#{$ms-fabric-version-suffix};
+    $namelist: append($namelist, $newname, 'comma');
+  }
+
+  // Output the animation's properties.
+  animation-name: $namelist;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+  animation-fill-mode: $fillMode;
+
+  // Make the animation instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    animation: none;
+  }
+}
+
+// Ouptuts the properties for a transition.
+@mixin ms-transition($transition) {
+  transition: $transition;
+
+  // Make the transition instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    transition: none;
+  }
+}
+
+// Slide
+@mixin ms-slideRightIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideRightOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideUpIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideDownIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideUpOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+// Scale
+@mixin ms-scaleUpIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-scaleUpOut103 {
+  @include ms-animation((ms-fadeOut, ms-scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownOut98 {
+  @include ms-animation((ms-fadeOut, ms-scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+// Rotate
+// @todo: These durations should use a variable, likely $ms-animation-duration-1
+@mixin ms-rotate90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-rotateN90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+// Fade
+@mixin ms-fadeIn100 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-1);
+}
+
+@mixin ms-fadeIn200 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-2);
+}
+
+@mixin ms-fadeIn400 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-3);
+}
+
+@mixin ms-fadeIn500 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-4);
+}
+
+@mixin ms-fadeOut100 {
+  @include ms-animation(ms-fadeOut, 0.1s); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-fadeOut200 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-1); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-fadeOut400 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-3); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+@mixin ms-fadeOut500 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-4); // @todo: Based on class name, likely intended to be 0.5s
+}
+
+// Expand-collapse
+@mixin ms-expandCollapse100 {
+  @include ms-transition(height 0.1s $ms-animation-ease-2); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-expandCollapse200 {
+  @include ms-transition(height $ms-animation-duration-1 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-expandCollapse400 {
+  @include ms-transition(height $ms-animation-duration-3 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+// Utilities to set the animation delay property.
+@mixin ms-delay100 {
+  animation-delay: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
+}
+
+@mixin ms-delay200 {
+  animation-delay: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.scss
new file mode 100644
index 0000000..773a217
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Animation.Mixins.scss
@@ -0,0 +1,201 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-motion-keyframes() {
+  @keyframes ms-motion-fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ms-motion-fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ms-motion-scaleDownIn {
+    from {
+      transform: scale3d(1.15, 1.15, 1);
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes ms-motion-scaleDownOut {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    to {
+      transform: scale3d(0.9, 0.9, 1);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftIn {
+    from {
+      transform: translate3d(48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightIn {
+    from {
+      transform: translate3d(-48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpIn {
+    from {
+      transform: translate3d(0, 48px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownIn {
+    from {
+      transform: translate3d(0, -48px, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+}
+
+// Fades.
+@mixin ms-motion-fadeIn {
+  animation: ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-fadeOut {
+  animation: ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Scales.
+@mixin ms-motion-scaleDownIn {
+  animation: ms-motion-scaleDownIn $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-scaleDownOut {
+  animation: ms-motion-scaleDownOut $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Slides.
+@mixin ms-motion-slideLeftOut {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightOut {
+  @include ms-LTR {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideLeftIn {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightIn {
+  @include ms-LTR {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideUpOut {
+  animation: ms-motion-slideUpOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownOut {
+  animation: ms-motion-slideDownOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideUpIn {
+  animation: ms-motion-slideUpIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownIn {
+  animation: ms-motion-slideDownIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_BrandIcon.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_BrandIcon.Mixins.scss
new file mode 100644
index 0000000..9ee0eb1
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_BrandIcon.Mixins.scss
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Generate classes for product and document icons
+@mixin ms-brand-icon-classes($retina) {
+	@each $icon in $ms-brand-icon-product-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-product-sizes($icon, $retina, $ms-brand-icon-product-images-path);
+		}
+	}
+
+	@each $icon in $ms-brand-icon-document-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-document-sizes($icon, $retina, $ms-brand-icon-document-images-path);
+		}
+	}
+}
+
+// Generate size classes for each product icon
+@mixin ms-brand-icon-product-sizes($icon, $retina, $images-path) {
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png);
+		}
+	}
+}
+
+// Generate size classes for each document icon
+@mixin ms-brand-icon-document-sizes($icon, $retina, $images-path) {
+	$scaleSuffix: '';
+	@if $retina == '1' {
+		$scaleSuffix: '';
+	} @else if $retina == '1_5' {
+		$scaleSuffix: '_1.5x';
+	} @else {
+		$scaleSuffix: '_#{$retina}x';
+	}
+
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$size}#{$scaleSuffix}/#{$icon}.png);
+		}
+	}
+}
+
+// Generate generic icon size classes
+@mixin ms-brand-icon-size-classes() {
+	@each $size in $ms-brand-icon-sizes {
+		.ms-BrandIcon--icon#{$size} {
+			background-size: 100% 100%;
+			width: #{$size}px;
+			height: #{$size}px;
+		}
+	}
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Color.Background.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Color.Background.Mixins.scss
new file mode 100644
index 0000000..bd105ba
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Color.Background.Mixins.scss
@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-bgColor-communicationShade30 {
+  background-color: $ms-color-communicationShade30;
+}
+@mixin ms-bgColor-communicationShade20 {
+  background-color: $ms-color-communicationShade20;
+}
+@mixin ms-bgColor-communicationShade10 {
+  background-color: $ms-color-communicationShade10;
+}
+@mixin ms-bgColor-communicationPrimary {
+  background-color: $ms-color-communicationPrimary;
+}
+@mixin ms-bgColor-communicationTint10 {
+  background-color: $ms-color-communicationTint10;
+}
+@mixin ms-bgColor-communicationTint20 {
+  background-color: $ms-color-communicationTint20;
+}
+@mixin ms-bgColor-communicationTint30 {
+  background-color: $ms-color-communicationTint30;
+}
+@mixin ms-bgColor-communicationTint40 {
+  background-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-gray220 {
+  background-color: $ms-color-gray220;
+}
+@mixin ms-bgColor-gray210 {
+  background-color: $ms-color-gray210;
+}
+@mixin ms-bgColor-gray200 {
+  background-color: $ms-color-gray200;
+}
+@mixin ms-bgColor-gray190 {
+  background-color: $ms-color-gray190;
+}
+@mixin ms-bgColor-gray180 {
+  background-color: $ms-color-gray180;
+}
+@mixin ms-bgColor-gray170 {
+  background-color: $ms-color-gray170;
+}
+@mixin ms-bgColor-gray160 {
+  background-color: $ms-color-gray160;
+}
+@mixin ms-bgColor-gray150 {
+  background-color: $ms-color-gray150;
+}
+@mixin ms-bgColor-gray140 {
+  background-color: $ms-color-gray140;
+}
+@mixin ms-bgColor-gray130 {
+  background-color: $ms-color-gray130;
+}
+@mixin ms-bgColor-gray120 {
+  background-color: $ms-color-gray120;
+}
+@mixin ms-bgColor-gray110 {
+  background-color: $ms-color-gray110;
+}
+@mixin ms-bgColor-gray100 {
+  background-color: $ms-color-gray100;
+}
+@mixin ms-bgColor-gray90 {
+  background-color: $ms-color-gray90;
+}
+@mixin ms-bgColor-gray80 {
+  background-color: $ms-color-gray80;
+}
+@mixin ms-bgColor-gray70 {
+  background-color: $ms-color-gray70;
+}
+@mixin ms-bgColor-gray60 {
+  background-color: $ms-color-gray60;
+}
+@mixin ms-bgColor-gray50 {
+  background-color: $ms-color-gray50;
+}
+@mixin ms-bgColor-gray40 {
+  background-color: $ms-color-gray40;
+}
+@mixin ms-bgColor-gray30 {
+  background-color: $ms-color-gray30;
+}
+@mixin ms-bgColor-gray20 {
+  background-color: $ms-color-gray20;
+}
+@mixin ms-bgColor-gray10 {
+  background-color: $ms-color-gray10;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-bgColor-sharedPinkRed10 {
+  background-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-bgColor-sharedRed20 {
+  background-color: $ms-color-sharedRed20;
+}
+@mixin ms-bgColor-sharedRed10 {
+  background-color: $ms-color-sharedRed10;
+}
+@mixin ms-bgColor-sharedRedOrange20 {
+  background-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-bgColor-sharedRedOrange10 {
+  background-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-bgColor-sharedOrange30 {
+  background-color: $ms-color-sharedOrange30;
+}
+@mixin ms-bgColor-sharedOrange20 {
+  background-color: $ms-color-sharedOrange20;
+}
+@mixin ms-bgColor-sharedOrange10 {
+  background-color: $ms-color-sharedOrange10;
+}
+@mixin ms-bgColor-sharedYellow10 {
+  background-color: $ms-color-sharedYellow10;
+}
+@mixin ms-bgColor-sharedOrangeYellow20 {
+  background-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-bgColor-sharedOrangeYellow10 {
+  background-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-bgColor-sharedYellowGreen10 {
+  background-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-bgColor-sharedGreen20 {
+  background-color: $ms-color-sharedGreen20;
+}
+@mixin ms-bgColor-sharedGreen10 {
+  background-color: $ms-color-sharedGreen10;
+}
+@mixin ms-bgColor-sharedGreenCyan10 {
+  background-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-bgColor-sharedCyan40 {
+  background-color: $ms-color-sharedCyan40;
+}
+@mixin ms-bgColor-sharedCyan30 {
+  background-color: $ms-color-sharedCyan30;
+}
+@mixin ms-bgColor-sharedCyan20 {
+  background-color: $ms-color-sharedCyan20;
+}
+@mixin ms-bgColor-sharedCyan10 {
+  background-color: $ms-color-sharedCyan10;
+}
+@mixin ms-bgColor-sharedCyanBlue20 {
+  background-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-bgColor-sharedCyanBlue10 {
+  background-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-bgColor-sharedBlue10 {
+  background-color: $ms-color-sharedBlue10;
+}
+@mixin ms-bgColor-sharedBlueMagenta40 {
+  background-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-bgColor-sharedBlueMagenta30 {
+  background-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-bgColor-sharedBlueMagenta20 {
+  background-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-bgColor-sharedBlueMagenta10 {
+  background-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-bgColor-sharedMagenta20 {
+  background-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-bgColor-sharedMagenta10 {
+  background-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-bgColor-sharedMagentaPink20 {
+  background-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-bgColor-sharedMagentaPink10 {
+  background-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-bgColor-sharedGray40 {
+  background-color: $ms-color-sharedGray40;
+}
+@mixin ms-bgColor-sharedGray30 {
+  background-color: $ms-color-sharedGray30;
+}
+@mixin ms-bgColor-sharedGray20 {
+  background-color: $ms-color-sharedGray20;
+}
+@mixin ms-bgColor-sharedGray10 {
+  background-color: $ms-color-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Color.Border.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Color.Border.Mixins.scss
new file mode 100644
index 0000000..6f85b39
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Color.Border.Mixins.scss
@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-borderColor-communicationShade30 {
+  border-color: $ms-color-communicationShade30;
+}
+@mixin ms-borderColor-communicationShade20 {
+  border-color: $ms-color-communicationShade20;
+}
+@mixin ms-borderColor-communicationShade10 {
+  border-color: $ms-color-communicationShade10;
+}
+@mixin ms-borderColor-communicationPrimary {
+  border-color: $ms-color-communicationPrimary;
+}
+@mixin ms-borderColor-communicationTint10 {
+  border-color: $ms-color-communicationTint10;
+}
+@mixin ms-borderColor-communicationTint20 {
+  border-color: $ms-color-communicationTint20;
+}
+@mixin ms-borderColor-communicationTint30 {
+  border-color: $ms-color-communicationTint30;
+}
+@mixin ms-borderColor-communicationTint40 {
+  border-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-gray220 {
+  border-color: $ms-color-gray220;
+}
+@mixin ms-borderColor-gray210 {
+  border-color: $ms-color-gray210;
+}
+@mixin ms-borderColor-gray200 {
+  border-color: $ms-color-gray200;
+}
+@mixin ms-borderColor-gray190 {
+  border-color: $ms-color-gray190;
+}
+@mixin ms-borderColor-gray180 {
+  border-color: $ms-color-gray180;
+}
+@mixin ms-borderColor-gray170 {
+  border-color: $ms-color-gray170;
+}
+@mixin ms-borderColor-gray160 {
+  border-color: $ms-color-gray160;
+}
+@mixin ms-borderColor-gray150 {
+  border-color: $ms-color-gray150;
+}
+@mixin ms-borderColor-gray140 {
+  border-color: $ms-color-gray140;
+}
+@mixin ms-borderColor-gray130 {
+  border-color: $ms-color-gray130;
+}
+@mixin ms-borderColor-gray120 {
+  border-color: $ms-color-gray120;
+}
+@mixin ms-borderColor-gray110 {
+  border-color: $ms-color-gray110;
+}
+@mixin ms-borderColor-gray100 {
+  border-color: $ms-color-gray100;
+}
+@mixin ms-borderColor-gray90 {
+  border-color: $ms-color-gray90;
+}
+@mixin ms-borderColor-gray80 {
+  border-color: $ms-color-gray80;
+}
+@mixin ms-borderColor-gray70 {
+  border-color: $ms-color-gray70;
+}
+@mixin ms-borderColor-gray60 {
+  border-color: $ms-color-gray60;
+}
+@mixin ms-borderColor-gray50 {
+  border-color: $ms-color-gray50;
+}
+@mixin ms-borderColor-gray40 {
+  border-color: $ms-color-gray40;
+}
+@mixin ms-borderColor-gray30 {
+  border-color: $ms-color-gray30;
+}
+@mixin ms-borderColor-gray20 {
+  border-color: $ms-color-gray20;
+}
+@mixin ms-borderColor-gray10 {
+  border-color: $ms-color-gray10;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-borderColor-sharedPinkRed10 {
+  border-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-borderColor-sharedRed20 {
+  border-color: $ms-color-sharedRed20;
+}
+@mixin ms-borderColor-sharedRed10 {
+  border-color: $ms-color-sharedRed10;
+}
+@mixin ms-borderColor-sharedRedOrange20 {
+  border-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-borderColor-sharedRedOrange10 {
+  border-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-borderColor-sharedOrange30 {
+  border-color: $ms-color-sharedOrange30;
+}
+@mixin ms-borderColor-sharedOrange20 {
+  border-color: $ms-color-sharedOrange20;
+}
+@mixin ms-borderColor-sharedOrange10 {
+  border-color: $ms-color-sharedOrange10;
+}
+@mixin ms-borderColor-sharedYellow10 {
+  border-color: $ms-color-sharedYellow10;
+}
+@mixin ms-borderColor-sharedOrangeYellow20 {
+  border-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-borderColor-sharedOrangeYellow10 {
+  border-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-borderColor-sharedYellowGreen10 {
+  border-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-borderColor-sharedGreen20 {
+  border-color: $ms-color-sharedGreen20;
+}
+@mixin ms-borderColor-sharedGreen10 {
+  border-color: $ms-color-sharedGreen10;
+}
+@mixin ms-borderColor-sharedGreenCyan10 {
+  border-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-borderColor-sharedCyan40 {
+  border-color: $ms-color-sharedCyan40;
+}
+@mixin ms-borderColor-sharedCyan30 {
+  border-color: $ms-color-sharedCyan30;
+}
+@mixin ms-borderColor-sharedCyan20 {
+  border-color: $ms-color-sharedCyan20;
+}
+@mixin ms-borderColor-sharedCyan10 {
+  border-color: $ms-color-sharedCyan10;
+}
+@mixin ms-borderColor-sharedCyanBlue20 {
+  border-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-borderColor-sharedCyanBlue10 {
+  border-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-borderColor-sharedBlue10 {
+  border-color: $ms-color-sharedBlue10;
+}
+@mixin ms-borderColor-sharedBlueMagenta40 {
+  border-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-borderColor-sharedBlueMagenta30 {
+  border-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-borderColor-sharedBlueMagenta20 {
+  border-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-borderColor-sharedBlueMagenta10 {
+  border-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-borderColor-sharedMagenta20 {
+  border-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-borderColor-sharedMagenta10 {
+  border-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-borderColor-sharedMagentaPink20 {
+  border-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-borderColor-sharedMagentaPink10 {
+  border-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-borderColor-sharedGray40 {
+  border-color: $ms-color-sharedGray40;
+}
+@mixin ms-borderColor-sharedGray30 {
+  border-color: $ms-color-sharedGray30;
+}
+@mixin ms-borderColor-sharedGray20 {
+  border-color: $ms-color-sharedGray20;
+}
+@mixin ms-borderColor-sharedGray10 {
+  border-color: $ms-color-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Color.Font.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Color.Font.Mixins.scss
new file mode 100644
index 0000000..2238bf5
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Color.Font.Mixins.scss
@@ -0,0 +1,206 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+
+// Communication
+@mixin ms-fontColor-communicationShade30 {
+  color: $ms-color-communicationShade30;
+}
+@mixin ms-fontColor-communicationShade20 {
+  color: $ms-color-communicationShade20;
+}
+@mixin ms-fontColor-communicationShade10 {
+  color: $ms-color-communicationShade10;
+}
+@mixin ms-fontColor-communicationPrimary {
+  color: $ms-color-communicationPrimary;
+}
+@mixin ms-fontColor-communicationTint10 {
+  color: $ms-color-communicationTint10;
+}
+@mixin ms-fontColor-communicationTint20 {
+  color: $ms-color-communicationTint20;
+}
+@mixin ms-fontColor-communicationTint30 {
+  color: $ms-color-communicationTint30;
+}
+@mixin ms-fontColor-communicationTint40 {
+  color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-gray220 {
+  color: $ms-color-gray220;
+}
+@mixin ms-fontColor-gray210 {
+  color: $ms-color-gray210;
+}
+@mixin ms-fontColor-gray200 {
+  color: $ms-color-gray200;
+}
+@mixin ms-fontColor-gray190 {
+  color: $ms-color-gray190;
+}
+@mixin ms-fontColor-gray180 {
+  color: $ms-color-gray180;
+}
+@mixin ms-fontColor-gray170 {
+  color: $ms-color-gray170;
+}
+@mixin ms-fontColor-gray160 {
+  color: $ms-color-gray160;
+}
+@mixin ms-fontColor-gray150 {
+  color: $ms-color-gray150;
+}
+@mixin ms-fontColor-gray140 {
+  color: $ms-color-gray140;
+}
+@mixin ms-fontColor-gray130 {
+  color: $ms-color-gray130;
+}
+@mixin ms-fontColor-gray120 {
+  color: $ms-color-gray120;
+}
+@mixin ms-fontColor-gray110 {
+  color: $ms-color-gray110;
+}
+@mixin ms-fontColor-gray100 {
+  color: $ms-color-gray100;
+}
+@mixin ms-fontColor-gray90 {
+  color: $ms-color-gray90;
+}
+@mixin ms-fontColor-gray80 {
+  color: $ms-color-gray80;
+}
+@mixin ms-fontColor-gray70 {
+  color: $ms-color-gray70;
+}
+@mixin ms-fontColor-gray60 {
+  color: $ms-color-gray60;
+}
+@mixin ms-fontColor-gray50 {
+  color: $ms-color-gray50;
+}
+@mixin ms-fontColor-gray40 {
+  color: $ms-color-gray40;
+}
+@mixin ms-fontColor-gray30 {
+  color: $ms-color-gray30;
+}
+@mixin ms-fontColor-gray20 {
+  color: $ms-color-gray20;
+}
+@mixin ms-fontColor-gray10 {
+  color: $ms-color-gray10;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-fontColor-sharedPinkRed10 {
+  color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-fontColor-sharedRed20 {
+  color: $ms-color-sharedRed20;
+}
+@mixin ms-fontColor-sharedRed10 {
+  color: $ms-color-sharedRed10;
+}
+@mixin ms-fontColor-sharedRedOrange20 {
+  color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-fontColor-sharedRedOrange10 {
+  color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-fontColor-sharedOrange30 {
+  color: $ms-color-sharedOrange30;
+}
+@mixin ms-fontColor-sharedOrange20 {
+  color: $ms-color-sharedOrange20;
+}
+@mixin ms-fontColor-sharedOrange10 {
+  color: $ms-color-sharedOrange10;
+}
+@mixin ms-fontColor-sharedYellow10 {
+  color: $ms-color-sharedYellow10;
+}
+@mixin ms-fontColor-sharedOrangeYellow20 {
+  color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-fontColor-sharedOrangeYellow10 {
+  color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-fontColor-sharedYellowGreen10 {
+  color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-fontColor-sharedGreen20 {
+  color: $ms-color-sharedGreen20;
+}
+@mixin ms-fontColor-sharedGreen10 {
+  color: $ms-color-sharedGreen10;
+}
+@mixin ms-fontColor-sharedGreenCyan10 {
+  color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-fontColor-sharedCyan40 {
+  color: $ms-color-sharedCyan40;
+}
+@mixin ms-fontColor-sharedCyan30 {
+  color: $ms-color-sharedCyan30;
+}
+@mixin ms-fontColor-sharedCyan20 {
+  color: $ms-color-sharedCyan20;
+}
+@mixin ms-fontColor-sharedCyan10 {
+  color: $ms-color-sharedCyan10;
+}
+@mixin ms-fontColor-sharedCyanBlue20 {
+  color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-fontColor-sharedCyanBlue10 {
+  color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-fontColor-sharedBlue10 {
+  color: $ms-color-sharedBlue10;
+}
+@mixin ms-fontColor-sharedBlueMagenta40 {
+  color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-fontColor-sharedBlueMagenta30 {
+  color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-fontColor-sharedBlueMagenta20 {
+  color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-fontColor-sharedBlueMagenta10 {
+  color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-fontColor-sharedMagenta20 {
+  color: $ms-color-sharedMagenta20;
+}
+@mixin ms-fontColor-sharedMagenta10 {
+  color: $ms-color-sharedMagenta10;
+}
+@mixin ms-fontColor-sharedMagentaPink20 {
+  color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-fontColor-sharedMagentaPink10 {
+  color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-fontColor-sharedGray40 {
+  color: $ms-color-sharedGray40;
+}
+@mixin ms-fontColor-sharedGray30 {
+  color: $ms-color-sharedGray30;
+}
+@mixin ms-fontColor-sharedGray20 {
+  color: $ms-color-sharedGray20;
+}
+@mixin ms-fontColor-sharedGray10 {
+  color: $ms-color-sharedGray10;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.MDL2.scss b/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.MDL2.scss
new file mode 100644
index 0000000..c81e486
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.MDL2.scss
@@ -0,0 +1,545 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+//== Theme colors
+//
+
+// Background
+@mixin ms-bgColor-themeDark {
+  background-color: $ms-color-themeDark;
+}
+@mixin ms-bgColor-themeDarkAlt {
+  background-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-bgColor-themeDarker {
+  background-color: $ms-color-themeDarker;
+}
+@mixin ms-bgColor-themePrimary {
+  background-color: $ms-color-themePrimary;
+}
+@mixin ms-bgColor-themeSecondary {
+  background-color: $ms-color-themeSecondary;
+}
+@mixin ms-bgColor-themeTertiary {
+  background-color: $ms-color-themeTertiary;
+}
+@mixin ms-bgColor-themeLight {
+  background-color: $ms-color-themeLight;
+}
+@mixin ms-bgColor-themeLighter {
+  background-color: $ms-color-themeLighter;
+}
+@mixin ms-bgColor-themeLighterAlt {
+  background-color: $ms-color-themeLighterAlt;
+}
+
+// Border
+@mixin ms-borderColor-themeDark {
+  border-color: $ms-color-themeDark;
+}
+@mixin ms-borderColor-themeDarkAlt {
+  border-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-borderColor-themeDarker {
+  border-color: $ms-color-themeDarker;
+}
+@mixin ms-borderColor-themePrimary {
+  border-color: $ms-color-themePrimary;
+}
+@mixin ms-borderColor-themeSecondary {
+  border-color: $ms-color-themeSecondary;
+}
+@mixin ms-borderColor-themeTertiary {
+  border-color: $ms-color-themeTertiary;
+}
+@mixin ms-borderColor-themeLight {
+  border-color: $ms-color-themeLight;
+}
+@mixin ms-borderColor-themeLighter {
+  border-color: $ms-color-themeLighter;
+}
+@mixin ms-borderColor-themeLighterAlt {
+  border-color: $ms-color-themeLighterAlt;
+}
+
+// Font
+@mixin ms-fontColor-themeDarker {
+  color: $ms-color-themeDarker;
+}
+@mixin ms-fontColor-themeDark {
+  color: $ms-color-themeDark;
+}
+@mixin ms-fontColor-themeDarkAlt {
+  color: $ms-color-themeDarkAlt;
+}
+@mixin ms-fontColor-themePrimary {
+  color: $ms-color-themePrimary;
+}
+@mixin ms-fontColor-themeSecondary {
+  color: $ms-color-themeSecondary;
+}
+@mixin ms-fontColor-themeTertiary {
+  color: $ms-color-themeTertiary;
+}
+@mixin ms-fontColor-themeLight {
+  color: $ms-color-themeLight;
+}
+@mixin ms-fontColor-themeLighter {
+  color: $ms-color-themeLighter;
+}
+@mixin ms-fontColor-themeLighterAlt {
+  color: $ms-color-themeLighterAlt;
+}
+
+//== Neutral colors
+//
+
+// Background
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-neutralDark {
+  background-color: $ms-color-neutralDark;
+}
+@mixin ms-bgColor-neutralPrimary {
+  background-color: $ms-color-neutralPrimary;
+}
+@mixin ms-bgColor-neutralPrimaryAlt {
+  background-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-bgColor-neutralSecondary {
+  background-color: $ms-color-neutralSecondary;
+}
+@mixin ms-bgColor-neutralSecondaryAlt {
+  background-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-bgColor-neutralTertiary {
+  background-color: $ms-color-neutralTertiary;
+}
+@mixin ms-bgColor-neutralTertiaryAlt {
+  background-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-bgColor-neutralQuaternary {
+  background-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-bgColor-neutralQuaternaryAlt {
+  background-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-bgColor-neutralLight {
+  background-color: $ms-color-neutralLight;
+}
+@mixin ms-bgColor-neutralLighter {
+  background-color: $ms-color-neutralLighter;
+}
+@mixin ms-bgColor-neutralLighterAlt {
+  background-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Border
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-neutralDark {
+  border-color: $ms-color-neutralDark;
+}
+@mixin ms-borderColor-neutralPrimary {
+  border-color: $ms-color-neutralPrimary;
+}
+@mixin ms-borderColor-neutralPrimaryAlt {
+  border-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-borderColor-neutralSecondary {
+  border-color: $ms-color-neutralSecondary;
+}
+@mixin ms-borderColor-neutralSecondaryAlt {
+  border-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-borderColor-neutralTertiary {
+  border-color: $ms-color-neutralTertiary;
+}
+@mixin ms-borderColor-neutralTertiaryAlt {
+  border-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-borderColor-neutralQuaternary {
+  border-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-borderColor-neutralQuaternaryAlt {
+  border-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-borderColor-neutralLight {
+  border-color: $ms-color-neutralLight;
+}
+@mixin ms-borderColor-neutralLighter {
+  border-color: $ms-color-neutralLighter;
+}
+@mixin ms-borderColor-neutralLighterAlt {
+  border-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Font
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-neutralDark {
+  color: $ms-color-neutralDark;
+}
+@mixin ms-fontColor-neutralPrimary {
+  color: $ms-color-neutralPrimary;
+}
+@mixin ms-fontColor-neutralPrimaryAlt {
+  color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-fontColor-neutralSecondary {
+  color: $ms-color-neutralSecondary;
+}
+@mixin ms-fontColor-neutralSecondaryAlt {
+  color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-fontColor-neutralTertiary {
+  color: $ms-color-neutralTertiary;
+}
+@mixin ms-fontColor-neutralTertiaryAlt {
+  color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-fontColor-neutralQuaternary {
+  color: $ms-color-neutralQuaternary;
+}
+@mixin ms-fontColor-neutralQuaternaryAlt {
+  color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-fontColor-neutralLight {
+  color: $ms-color-neutralLight;
+}
+@mixin ms-fontColor-neutralLighter {
+  color: $ms-color-neutralLighter;
+}
+@mixin ms-fontColor-neutralLighterAlt {
+  color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+//== Brand and accent colors
+//
+
+// Background
+@mixin ms-bgColor-yellow {
+  background-color: $ms-color-yellow;
+}
+@mixin ms-bgColor-yellowLight {
+  background-color: $ms-color-yellowLight;
+}
+@mixin ms-bgColor-orange {
+  background-color: $ms-color-orange;
+}
+@mixin ms-bgColor-orangeLight {
+  background-color: $ms-color-orangeLight;
+}
+@mixin ms-bgColor-orangeLighter {
+  background-color: $ms-color-orangeLighter;
+}
+@mixin ms-bgColor-redDark {
+  background-color: $ms-color-redDark;
+}
+@mixin ms-bgColor-red {
+  background-color: $ms-color-red;
+}
+@mixin ms-bgColor-magentaDark {
+  background-color: $ms-color-magentaDark;
+}
+@mixin ms-bgColor-magenta {
+  background-color: $ms-color-magenta;
+}
+@mixin ms-bgColor-magentaLight {
+  background-color: $ms-color-magentaLight;
+}
+@mixin ms-bgColor-purpleDark {
+  background-color: $ms-color-purpleDark;
+}
+@mixin ms-bgColor-purple {
+  background-color: $ms-color-purple;
+}
+@mixin ms-bgColor-purpleLight {
+  background-color: $ms-color-purpleLight;
+}
+@mixin ms-bgColor-blueDark {
+  background-color: $ms-color-blueDark;
+}
+@mixin ms-bgColor-blueMid {
+  background-color: $ms-color-blueMid;
+}
+@mixin ms-bgColor-blue {
+  background-color: $ms-color-blue;
+}
+@mixin ms-bgColor-blueLight {
+  background-color: $ms-color-blueLight;
+}
+@mixin ms-bgColor-tealDark {
+  background-color: $ms-color-tealDark;
+}
+@mixin ms-bgColor-teal {
+  background-color: $ms-color-teal;
+}
+@mixin ms-bgColor-tealLight {
+  background-color: $ms-color-tealLight;
+}
+@mixin ms-bgColor-greenDark {
+  background-color: $ms-color-greenDark;
+}
+@mixin ms-bgColor-green {
+  background-color: $ms-color-green;
+}
+@mixin ms-bgColor-greenLight {
+  background-color: $ms-color-greenLight;
+}
+
+// Border
+@mixin ms-borderColor-yellow {
+  border-color: $ms-color-yellow;
+}
+@mixin ms-borderColor-yellowLight {
+  border-color: $ms-color-yellowLight;
+}
+@mixin ms-borderColor-orange {
+  border-color: $ms-color-orange;
+}
+@mixin ms-borderColor-orangeLight {
+  border-color: $ms-color-orangeLight;
+}
+@mixin ms-borderColor-orangeLighter {
+  border-color: $ms-color-orangeLighter;
+}
+@mixin ms-borderColor-redDark {
+  border-color: $ms-color-redDark;
+}
+@mixin ms-borderColor-red {
+  border-color: $ms-color-red;
+}
+@mixin ms-borderColor-magentaDark {
+  border-color: $ms-color-magentaDark;
+}
+@mixin ms-borderColor-magenta {
+  border-color: $ms-color-magenta;
+}
+@mixin ms-borderColor-magentaLight {
+  border-color: $ms-color-magentaLight;
+}
+@mixin ms-borderColor-purpleDark {
+  border-color: $ms-color-purpleDark;
+}
+@mixin ms-borderColor-purple {
+  border-color: $ms-color-purple;
+}
+@mixin ms-borderColor-purpleLight {
+  border-color: $ms-color-purpleLight;
+}
+@mixin ms-borderColor-blueDark {
+  border-color: $ms-color-blueDark;
+}
+@mixin ms-borderColor-blueMid {
+  border-color: $ms-color-blueMid;
+}
+@mixin ms-borderColor-blue {
+  border-color: $ms-color-blue;
+}
+@mixin ms-borderColor-blueLight {
+  border-color: $ms-color-blueLight;
+}
+@mixin ms-borderColor-tealDark {
+  border-color: $ms-color-tealDark;
+}
+@mixin ms-borderColor-teal {
+  border-color: $ms-color-teal;
+}
+@mixin ms-borderColor-tealLight {
+  border-color: $ms-color-tealLight;
+}
+@mixin ms-borderColor-greenDark {
+  border-color: $ms-color-greenDark;
+}
+@mixin ms-borderColor-green {
+  border-color: $ms-color-green;
+}
+@mixin ms-borderColor-greenLight {
+  border-color: $ms-color-greenLight;
+}
+
+// Font
+@mixin ms-fontColor-yellow {
+  color: $ms-color-yellow;
+}
+@mixin ms-fontColor-yellowLight {
+  color: $ms-color-yellowLight;
+}
+@mixin ms-fontColor-orange {
+  color: $ms-color-orange;
+}
+@mixin ms-fontColor-orangeLight {
+  color: $ms-color-orangeLight;
+}
+@mixin ms-fontColor-orangeLighter {
+  color: $ms-color-orangeLighter;
+}
+@mixin ms-fontColor-redDark {
+  color: $ms-color-redDark;
+}
+@mixin ms-fontColor-red {
+  color: $ms-color-red;
+}
+@mixin ms-fontColor-magentaDark {
+  color: $ms-color-magentaDark;
+}
+@mixin ms-fontColor-magenta {
+  color: $ms-color-magenta;
+}
+@mixin ms-fontColor-magentaLight {
+  color: $ms-color-magentaLight;
+}
+@mixin ms-fontColor-purpleDark {
+  color: $ms-color-purpleDark;
+}
+@mixin ms-fontColor-purple {
+  color: $ms-color-purple;
+}
+@mixin ms-fontColor-purpleLight {
+  color: $ms-color-purpleLight;
+}
+@mixin ms-fontColor-blueDark {
+  color: $ms-color-blueDark;
+}
+@mixin ms-fontColor-blueMid {
+  color: $ms-color-blueMid;
+}
+@mixin ms-fontColor-blue {
+  color: $ms-color-blue;
+}
+@mixin ms-fontColor-blueLight {
+  color: $ms-color-blueLight;
+}
+@mixin ms-fontColor-tealDark {
+  color: $ms-color-tealDark;
+}
+@mixin ms-fontColor-teal {
+  color: $ms-color-teal;
+}
+@mixin ms-fontColor-tealLight {
+  color: $ms-color-tealLight;
+}
+@mixin ms-fontColor-greenDark {
+  color: $ms-color-greenDark;
+}
+@mixin ms-fontColor-green {
+  color: $ms-color-green;
+}
+@mixin ms-fontColor-greenLight {
+  color: $ms-color-greenLight;
+}
+
+//== Message colors
+//
+
+// Background
+@mixin ms-bgColor-info {
+  background-color: $ms-color-infoBackground;
+}
+@mixin ms-bgColor-success {
+  background-color: $ms-color-successBackground;
+}
+@mixin ms-bgColor-severeWarning {
+  background-color: $ms-color-severeWarningBackground;
+}
+@mixin ms-bgColor-warning {
+  background-color: $ms-color-warningBackground;
+}
+@mixin ms-bgColor-error {
+  background-color: $ms-color-errorBackground;
+}
+
+// Border
+@mixin ms-borderColor-info {
+  border-color: $ms-color-info;
+}
+@mixin ms-borderColor-success {
+  border-color: $ms-color-success;
+}
+@mixin ms-borderColor-alert {
+  border-color: $ms-color-alert;
+}
+@mixin ms-borderColor-error {
+  border-color: $ms-color-error;
+}
+
+// Font
+@mixin ms-fontColor-info {
+  color: $ms-color-info;
+}
+@mixin ms-fontColor-success {
+  color: $ms-color-success;
+}
+@mixin ms-fontColor-alert {
+  // @todo: Deprecated: Use ms-fontColor-severeWarning
+  color: $ms-color-alert;
+}
+@mixin ms-fontColor-warning {
+  color: $ms-color-warning;
+}
+@mixin ms-fontColor-severeWarning {
+  color: $ms-color-severeWarning;
+}
+@mixin ms-fontColor-error {
+  color: $ms-color-error;
+}
+
+
+//== High contrast colors
+//
+
+// Background
+@mixin ms-bgColor-contrastBlackDisabled {
+  background-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-bgColor-contrastWhiteDisabled {
+  background-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-bgColor-contrastBlackSelected {
+  background-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-bgColor-contrastWhiteSelected {
+  background-color: $ms-color-contrastWhiteSelected;
+}
+
+// Border
+@mixin ms-borderColor-contrastBlackDisabled {
+  border-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-borderColor-contrastWhiteDisabled {
+  border-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-borderColor-contrastBlackSelected {
+  border-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-borderColor-contrastWhiteSelected {
+  border-color: $ms-color-contrastWhiteSelected;
+}
+
+// Font
+@mixin ms-fontColor-contrastBlackDisabled {
+  color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-fontColor-contrastWhiteDisabled {
+  color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-fontColor-contrastBlackSelected {
+  color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-fontColor-contrastWhiteSelected {
+  color: $ms-color-contrastWhiteSelected;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.scss
new file mode 100644
index 0000000..c2f28cf
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Color.Mixins.scss
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Mixins for specific properties.
+@import './Color.Background.Mixins';
+@import './Color.Border.Mixins';
+@import './Color.Font.Mixins';
+
+// Deprecated MDL2 color mixins.
+@import "./Color.Mixins.MDL2";
diff --git a/packages/au1-app/src/resources/sass/mixins/_Depth.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Depth.Mixins.scss
new file mode 100644
index 0000000..71b9722
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Depth.Mixins.scss
@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@mixin ms-depth-0 {
+  box-shadow: $ms-depth-shadow-0;
+}
+@mixin ms-depth-4 {
+  box-shadow: $ms-depth-shadow-4;
+}
+@mixin ms-depth-8 {
+  box-shadow: $ms-depth-shadow-8;
+}
+@mixin ms-depth-16 {
+  box-shadow: $ms-depth-shadow-16;
+}
+@mixin ms-depth-64 {
+  box-shadow: $ms-depth-shadow-64;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Directionality.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Directionality.Mixins.scss
new file mode 100644
index 0000000..7115788
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Directionality.Mixins.scss
@@ -0,0 +1,362 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Directionality mixins to generate LTR and RTL-specific styles
+
+// Base left-to-right mixin definition.
+@mixin ms-LTR {
+  [dir='ltr'] & {
+    @content;
+  }
+}
+
+// Base right-to-left mixin definition.
+@mixin ms-RTL {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+// Use baseRTL to set the default direction to right-to-left on
+// a root element (e.g. page or region) that needs RTL support.
+@mixin ms-base-RTL {
+  @include ms-RTL {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+}
+
+
+// Common CSS property mixins with support for RTL.
+// Use to automatically create RTL versions of your properties.
+
+// Background direction.
+@mixin ms-background-position($alignment) {
+  @if $alignment == left {
+    @include ms-LTR {
+      background-position: left;
+    }
+
+    @include ms-RTL {
+      background-position: right;
+    }
+  } @else if $alignment == right {
+    @include ms-LTR {
+      background-position: right;
+    }
+
+    @include ms-RTL {
+      background-position: left;
+    }
+  } @else {
+    background-position: $alignment;
+  }
+}
+
+// Border styles.
+@mixin ms-border-color($top, $right, $bottom, $left) {
+  border-color: $top $right $bottom $left;
+
+  @include ms-RTL {
+    border-color: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-border-left($width, $style, $color) {
+  @include ms-LTR {
+    border-left: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-right: $width $style $color;
+  }
+}
+
+@mixin ms-border-left-color($color) {
+  @include ms-LTR {
+    border-left-color: $color;
+  }
+
+  @include ms-RTL {
+    border-right-color: $color;
+  }
+}
+
+@mixin ms-border-left-style($style) {
+  @include ms-LTR {
+    border-left-style: $style;
+  }
+
+  @include ms-RTL {
+    border-right-style: $style;
+  }
+}
+
+@mixin ms-border-left-width($width) {
+  @include ms-LTR {
+    border-left-width: $width;
+  }
+
+  @include ms-RTL {
+    border-right-width: $width;
+  }
+}
+
+@mixin ms-border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+  border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+
+  @include ms-RTL {
+    border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+  }
+}
+
+@mixin ms-border-right($width, $style, $color) {
+  @include ms-LTR {
+    border-right: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-left: $width $style $color;
+  }
+}
+
+@mixin ms-border-right-color($color) {
+  @include ms-LTR {
+      border-right-color: $color;
+  }
+
+  @include ms-RTL {
+      border-left-color: $color;
+  }
+}
+
+@mixin ms-border-right-style($style) {
+  @include ms-LTR {
+    border-right-style: $style;
+  }
+  
+  @include ms-RTL {
+    border-left-style: $style;
+  }
+}
+
+@mixin ms-border-right-width($width) {
+  @include ms-LTR {
+    border-right-width: $width;
+  }
+
+  @include ms-RTL {
+    border-left-width: $width;
+  }
+}
+
+// Floats.
+@mixin ms-clear($side) {
+  @if $side == left {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: right;
+    }
+  } @else if $side == right {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: left;
+    }
+  } @else {
+      clear: $side;
+  }
+}
+
+@mixin ms-float($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      float: left;
+    }
+
+    @include ms-RTL {
+      float: right;
+    }
+  } @else {
+    @include ms-LTR {
+      float: right;
+    }
+
+    @include ms-RTL {
+      float: left;
+    }
+  }
+}
+
+// Positioning.
+@mixin ms-left($distance) {
+  @include ms-LTR {
+    left: $distance;
+  }
+
+  @include ms-RTL {
+    right: $distance;
+  }
+}
+
+@mixin ms-right($distance) {
+  @include ms-LTR {
+    right: $distance;
+  }
+
+  @include ms-RTL {
+    left: $distance;
+  }
+}
+
+// Margins.
+@mixin ms-margin($top, $right, $bottom, $left) {
+  margin: $top $right $bottom $left;
+
+  @include ms-RTL {
+    margin: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-margin-left($distance) {
+  @include ms-LTR {
+    margin-left: $distance;
+  }
+
+  @include ms-RTL {
+    margin-right: $distance;
+  }
+}
+
+@mixin ms-margin-right($distance) {
+  @include ms-LTR {
+    margin-right: $distance;
+  }
+  @include ms-RTL {
+    margin-left: $distance;
+  }
+}
+
+// Padding.
+@mixin ms-padding($top, $right, $bottom, $left) {
+  padding: $top $right $bottom $left;
+
+  @include ms-RTL {
+    padding: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-padding-left($distance) {
+  @include ms-LTR {
+    padding-left: $distance;
+  }
+
+  @include ms-RTL {
+    padding-right: $distance;
+  }
+}
+
+@mixin ms-padding-right($distance) {
+  @include ms-LTR {
+    padding-right: $distance;
+  }
+
+  @include ms-RTL {
+    padding-left: $distance;
+  }
+}
+
+// Text-alignment.
+@mixin ms-text-align($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      text-align: left;
+    }
+
+    @include ms-RTL {
+      text-align: right;
+    }
+  } @else {
+    @include ms-LTR {
+      text-align: right;
+    }
+
+    @include ms-RTL {
+      text-align: left;
+    }
+  }
+}
+
+// Box-shadow.
+@mixin ms-box-shadow($left, $etc) {
+  @if $left != 0 {
+    @include ms-LTR {
+      box-shadow: $left $etc;
+    }
+
+    @include ms-RTL {
+      box-shadow: -$left $etc;
+    }
+  } @else {
+    box-shadow: 0 $etc;
+  }
+}
+
+// Transforms.
+@mixin ms-transform-scaleX($scaleX: 1) {
+  @include ms-LTR {
+    transform: scaleX($scaleX);
+  }
+
+  @include ms-RTL {
+    transform: scaleX(-$scaleX);
+  }
+}
+
+@mixin ms-transform-translateX($distance) {
+  @include ms-LTR {
+    transform: translateX($distance);
+  }
+
+  @include ms-RTL {
+    transform: translateX(-$distance);
+  }
+}
+
+@mixin ms-transform-rotate($degrees) {
+  @include ms-LTR {
+    transform: rotate($degrees);
+  }
+
+  @include ms-RTL {
+    transform: rotate(-$degrees);
+  }
+}
+
+// Transitions. Only supported when ONLY left/right are declared
+@mixin ms-transition-property($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      transition-property: left;
+    }
+
+    @include ms-RTL {
+      transition-property: right;
+    }
+  } @else {
+    @include ms-LTR {
+      transition-property: right;
+    }
+
+    @include ms-RTL {
+      transition-property: left;
+    }
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.MDL2.scss b/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.MDL2.scss
new file mode 100644
index 0000000..c0ccf47
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.MDL2.scss
@@ -0,0 +1,127 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// Super Styles (LIMITED USE)
+@mixin ms-font-su {
+  font-size: $ms-font-size-su;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Extra-Large
+@mixin ms-font-xxl {
+  font-size: $ms-font-size-xxl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl-plus {
+  font-size: $ms-font-size-xl-plus;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl {
+  font-size: $ms-font-size-xl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Large Styles
+@mixin ms-font-l {
+  font-size: $ms-font-size-l;
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Medium Plus Styles
+@mixin ms-font-m-plus {
+  font-size: $ms-font-size-m-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Medium Styles
+@mixin ms-font-m {
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Plus Styles
+@mixin ms-font-s-plus {
+  font-size: $ms-font-size-s-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Styles
+@mixin ms-font-s {
+  font-size: $ms-font-size-s;
+  font-weight: $ms-font-weight-regular;
+}
+
+// XS Styles
+@mixin ms-font-xs {
+  font-size: $ms-font-size-xs;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Micro Styles (LIMITED USE)
+@mixin ms-font-mi {
+  font-size: $ms-font-size-mi;
+  font-weight: $ms-font-weight-semibold;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+@mixin ms-fontWeight-light {
+  font-weight: $ms-font-weight-light;
+}
+
+@mixin ms-fontWeight-semilight {
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+  font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+  font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xlPlus {
+  font-size: $ms-font-size-xl-plus;
+}
+
+@mixin ms-fontSize-xl {
+  font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+  font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+  font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+  font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+  font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+  font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+  font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+  font-size: $ms-font-size-mi;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.scss
new file mode 100644
index 0000000..1dfcaab
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Font.Mixins.scss
@@ -0,0 +1,123 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//== Font definitions.
+//
+
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+
+// Produce @font-face definitions for the web fonts.
+@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: "segoeui") {
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff")
+        format("woff");
+    font-weight: $ms-font-weight-light;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semilight;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff")
+        format("woff");
+    font-weight: $ms-font-weight-regular;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semibold;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-bold;
+    font-style: normal;
+  }
+}
+
+// Generate overrides to set font-family based on the lang attribute.
+@mixin ms-font-family-language-override($language-code, $font-family) {
+  *[lang^="#{$language-code}"] .ms-Fabric,
+  .ms-Fabric *[lang^="#{$language-code}"],
+  .ms-Fabric[lang^="#{$language-code}"] {
+    font-family: $font-family;
+  }
+}
+
+//== Font weight.
+//
+
+@mixin ms-fontWeight-regular {
+  font-weight: $ms-font-weight-regular;
+}
+@mixin ms-fontWeight-semibold {
+  font-weight: $ms-font-weight-semibold;
+}
+@mixin ms-fontWeight-bold {
+  font-weight: $ms-font-weight-bold;
+}
+
+//== Font size.
+//
+
+@mixin ms-fontSize-68 {
+  font-size: $ms-font-size-68;
+}
+@mixin ms-fontSize-42 {
+  font-size: $ms-font-size-42;
+}
+@mixin ms-fontSize-32 {
+  font-size: $ms-font-size-32;
+}
+@mixin ms-fontSize-28 {
+  font-size: $ms-font-size-28;
+}
+@mixin ms-fontSize-24 {
+  font-size: $ms-font-size-24;
+}
+@mixin ms-fontSize-20 {
+  font-size: $ms-font-size-20;
+}
+@mixin ms-fontSize-18 {
+  font-size: $ms-font-size-18;
+}
+@mixin ms-fontSize-16 {
+  font-size: $ms-font-size-16;
+}
+@mixin ms-fontSize-14 {
+  font-size: $ms-font-size-14;
+}
+@mixin ms-fontSize-12 {
+  font-size: $ms-font-size-12;
+}
+@mixin ms-fontSize-10 {
+  font-size: $ms-font-size-10;
+}
+
+// Deprecated MDL2 font mixins.
+@import "./Font.Mixins.MDL2";
diff --git a/packages/au1-app/src/resources/sass/mixins/_General.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_General.Mixins.scss
new file mode 100644
index 0000000..1d14c11
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_General.Mixins.scss
@@ -0,0 +1,222 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Vendor-prefixed mixins
+
+// Border radius.
+@mixin ms-border-radius($radius: 5px) {
+  border-radius: $radius;
+  background-clip: padding-box;
+}
+
+// Drop shadow.
+@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
+  @include ms-box-shadow($x-offset, $y-offset $blur $spread rgba(0, 0, 0, $alpha));
+}
+
+// Background gradient.
+@mixin ms-background-gradient($origin: left, $start: #000, $start-location: 0%, $stop: #FFF, $stop-location: 100%) {
+
+  // To maintain compatibility with the old arguments, reverse
+  // the $origin direction and set it as $destination.
+  $destination: null;
+  @if $origin == top {
+    $destination: bottom;
+  }
+  @if $origin == right {
+    $destination: left;
+  }
+  @if $origin == bottom {
+    $destination: top;
+  }
+  @if $origin == left {
+    $destination: right;
+  }
+
+  background-color: $start;
+  background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
+}
+
+// Rotation.
+@mixin ms-rotate($degrees) {
+  @include ms-transform-rotate($degrees);
+}
+
+// Prevents user selection of text elements.
+@mixin ms-user-select ($val) {
+    -webkit-touch-callout:  $val;
+    -webkit-user-select:    $val;
+    -khtml-user-select:     $val;
+    -moz-user-select:       $val;
+    -ms-user-select:        $val;
+    user-select:            $val;
+}
+
+// Prevents the text within a block element from wrapping to second line.
+@mixin ms-no-wrap() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Flexbox
+@mixin ms-flex-box() {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+@mixin ms-alignItems($mode) {
+    -webkit-box-align: $mode;
+    -moz-box-align: $mode;
+    -ms-flex-align: $mode;
+    -webkit-align-items: $mode;
+    align-items: $mode;
+}
+
+// Base/wrapper component to set typography throughout the app.
+@mixin ms-Fabric {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  @include ms-inherit-font-family();
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-west-european;
+  font-size: $ms-font-size-m;
+}
+
+// Set the font-family to 'inherit' for elements where the browser
+// styles commonly conflict with the font-family that we want.
+@mixin ms-inherit-font-family() {
+  button,
+  input,
+  textarea {
+    font-family: inherit;
+  }
+}
+
+// Overrides the browser's default focus outline style.
+@mixin ms-focus-outline($inset: 0, $color: $ms-focus-border-color) {
+  // Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus {
+    outline: $ms-focus-border-width $ms-focus-border-style $color;
+    outline-offset: -$inset;
+  }
+}
+
+// Simulates a focus outline using an absolutely-positioned pseudo-element.
+@mixin ms-focus-border($inset: 0, $color: $ms-focus-border-color) {
+  // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
+  outline: transparent;
+
+  // Requirement because pseudo-element is absolutely positioned.
+  position: relative;
+
+  // Clear the focus border in Firefox.
+  // Reference: http://stackoverflow.com/a/199319/1436671
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  // When the element that uses this mixin is in a :focus state, add a pseudo-element to
+  // create a border. Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus::after {
+    // Wrap the parent element with $padding.
+    content: '';
+    position: absolute;
+    top: $inset;
+    right: $inset;
+    bottom: $inset;
+    left: $inset;
+
+    // Add focus border of specified $color.
+    border: $ms-focus-border-width $ms-focus-border-style $color;
+
+    // Make the content not respond to mouse/touch events.
+    // Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
+    pointer-events: none;
+  }
+}
+
+// The best box is a border box.
+@mixin ms-borderBox {
+  box-sizing: border-box;
+}
+
+// For setting the border base width
+@mixin ms-borderBase {
+  border: 1px solid;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+@mixin ms-clearfix {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: '';
+    line-height: 0;
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+// Basic border-box, margin, and padding reset.
+@mixin ms-normalize {
+  @include ms-borderBox;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Generate text alignment classes, such as .ms-textAlignLeft 
+// @param [variable list] $alignments
+@mixin ms-textAlign($alignments...) {
+  @warn 'The ms-textAlign mixin has been deprecated and will be removed in a future release of Fabric Core.';
+  @each $align in $alignments {
+    $alignStr: inspect($align);
+    .ms-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} {
+      @include ms-text-align($align);
+    }
+  }
+}
+
+// To hide content while still making it readable by screen readers (Accessibility)
+@mixin ms-screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// To add truncation with ellipsis
+@mixin ms-textTruncate {
+	overflow: hidden; 
+	text-overflow: ellipsis; 
+	white-space: nowrap; 
+	word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes
+}
+
+// To disable text wrapping
+@mixin ms-noWrap {
+	white-space: nowrap; 
+}
+
+// Replace or remove a portion of a string.
+// Thanks to https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function ms-string-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + ms-string-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Grid.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Grid.Mixins.scss
new file mode 100644
index 0000000..2d3192d
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Grid.Mixins.scss
@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+//== Grid container (same for all sizes)
+//
+@mixin ms-Grid {
+  @include ms-borderBox;
+  @include ms-clearfix;
+  padding: 0 8px;
+}
+
+//== Grid rows (pull first and last column out)
+//
+@mixin ms-Grid-row {
+  margin: 0 -8px;
+  @include ms-borderBox;
+  @include ms-clearfix;
+}
+
+//== Grid cells
+//
+@mixin ms-Grid-col {
+  @include ms-float(left);
+  position: relative;
+  min-height: 1px;
+  padding-left: 8px;
+  padding-right: 8px;
+  @include ms-borderBox;
+
+  // For nested grids (a grid inside a column), removing the padding
+  // so that the nested grid's columns go to the edge of the parent's.
+  .ms-Grid {
+    padding: 0;
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Icon.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Icon.Mixins.scss
new file mode 100644
index 0000000..c332332
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Icon.Mixins.scss
@@ -0,0 +1,2060 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon mixin definitions
+
+// Base icon definition
+@mixin ms-Icon {
+  $icon-font-family: 'FabricMDL2Icons';
+
+  @if variable_exists(do-scope-styles) {
+    $icon-font-family: 'FabricMDL2Icons-' + $ms-fabric-version-major; 
+  }
+
+  display: inline-block;
+  font-family: $icon-font-family;
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+}
+
+// Modifier: Place the icon in a circle.
+@mixin ms-Icon--circle {
+  @include ms-margin(0, 0.5em, 0, 0);
+  position: relative;
+  display: inline-block;
+  font-size: 1rem;
+  width:   1em;
+  height:  1em;
+  padding: 0;
+  text-align: left;
+
+  &::before, &::after {
+    line-height: 1;
+    font-size: inherit;
+  }
+
+  &::before {
+    display: block;
+    width:  100%;
+    height: 100%;
+    margin:  0;
+    padding: 0;
+    position: absolute;
+  }
+
+  &::after {
+    content: '\e000';
+    position: absolute;
+    top:  0;
+    left: 0;
+    transform: scale(2);
+    transform-origin: 50% 50%;
+    z-index: $ms-zIndex-back;
+  }
+}
+
+// Modifiers: Icon sizes
+@mixin ms-Icon--xs { font-size: $ms-icon-size-xs; }
+@mixin ms-Icon--s { font-size: $ms-icon-size-s; }
+@mixin ms-Icon--m { font-size: $ms-icon-size-m; }
+@mixin ms-Icon--l { font-size: $ms-icon-size-l; }
+
+@mixin ms-icon-classes($icons) {
+  // De-dupe the map by removing the LTR icon for every RTL icon.
+  // For example, remove 'Export' after finding 'ExportMirrored'.
+  // This assumes that RTL icons will contain 'Mirrored' and that
+  // they are sorted so that the mirrored icon comes later.
+  $dedupedIcons: $icons;
+  @each $iconName, $code in $dedupedIcons {
+    @if str-index($iconName, 'Mirrored') {
+      $duplicateIcon: ms-string-replace($iconName, 'Mirrored');
+      $dedupedIcons: map-remove($dedupedIcons, $duplicateIcon);
+    }
+  }
+
+  // Go through icon list and create a class for each icon.
+  @each $iconName, $iconCode in $dedupedIcons {
+    @if str-index($iconName, 'Mirrored') {
+      // Create different classes for LTR and RTL layouts.
+      $ltrIconName: ms-string-replace($iconName, 'Mirrored');
+      $ltrIconCode: map-get($icons, $ltrIconName);
+
+      // Classes for the regular icon.
+      .ms-Icon--#{$ltrIconName}::before {
+        // Avoid ms-LTR to prevent missing icons if HTML uses dir="auto" or omits attribute
+        content: $ltrIconCode;
+        
+        // Override content via increased specificity with the RTL selector
+        @include ms-RTL {
+          content: $iconCode;
+        }
+      }
+
+      // Classes for the mirrored icon.
+      .ms-Icon--#{$iconName}::before {
+        // Avoid ms-LTR to prevent missing icons if HTML uses dir="auto" or omits attribute
+        content: $iconCode;
+        
+        // Override content via increased specificity with the RTL selector
+        @include ms-RTL {
+          content: $ltrIconCode;
+        }
+      }
+    } @else {
+      // Class for both LTR and RTL.
+      .ms-Icon--#{$iconName}::before {
+        content: $iconCode;
+      }
+    }
+  }
+}
+
+// Modifiers: Each of the icons. These are no longer used within Fabric Core,
+//            and may be deprecated in a future release.
+@mixin ms-Icon--12PointStar { content: $ms-icon-code-12PointStar; }
+@mixin ms-Icon--6PointStar { content: $ms-icon-code-6PointStar; }
+@mixin ms-Icon--AADLogo { content: $ms-icon-code-AADLogo; }
+@mixin ms-Icon--Accept { content: $ms-icon-code-Accept; }
+@mixin ms-Icon--AccessibiltyChecker { content: $ms-icon-code-AccessibiltyChecker; }
+@mixin ms-Icon--AccessLogo { content: $ms-icon-code-AccessLogo; }
+@mixin ms-Icon--AccessLogoFill { content: $ms-icon-code-AccessLogoFill; }
+@mixin ms-Icon--AccountActivity { content: $ms-icon-code-AccountActivity; }
+@mixin ms-Icon--AccountBrowser { content: $ms-icon-code-AccountBrowser; }
+@mixin ms-Icon--AccountManagement { content: $ms-icon-code-AccountManagement; }
+@mixin ms-Icon--Accounts { content: $ms-icon-code-Accounts; }
+@mixin ms-Icon--ActionCenter { content: $ms-icon-code-ActionCenter; }
+@mixin ms-Icon--ActivateOrders { content: $ms-icon-code-ActivateOrders; }
+@mixin ms-Icon--ActivityFeed { content: $ms-icon-code-ActivityFeed; }
+@mixin ms-Icon--Add { content: $ms-icon-code-Add; }
+@mixin ms-Icon--AddBookmark { content: $ms-icon-code-AddBookmark; }
+@mixin ms-Icon--AddEvent { content: $ms-icon-code-AddEvent; }
+@mixin ms-Icon--AddFavorite { content: $ms-icon-code-AddFavorite; }
+@mixin ms-Icon--AddFavoriteFill { content: $ms-icon-code-AddFavoriteFill; }
+@mixin ms-Icon--AddFriend { content: $ms-icon-code-AddFriend; }
+@mixin ms-Icon--AddGroup { content: $ms-icon-code-AddGroup; }
+@mixin ms-Icon--AddHome { content: $ms-icon-code-AddHome; }
+@mixin ms-Icon--AddIn { content: $ms-icon-code-AddIn; }
+@mixin ms-Icon--AddLink { content: $ms-icon-code-AddLink; }
+@mixin ms-Icon--AddNotes { content: $ms-icon-code-AddNotes; }
+@mixin ms-Icon--AddOnlineMeeting { content: $ms-icon-code-AddOnlineMeeting; }
+@mixin ms-Icon--AddPhone { content: $ms-icon-code-AddPhone; }
+@mixin ms-Icon--AddReaction { content: $ms-icon-code-AddReaction; }
+@mixin ms-Icon--AddSpaceAfter { content: $ms-icon-code-AddSpaceAfter; }
+@mixin ms-Icon--AddSpaceBefore { content: $ms-icon-code-AddSpaceBefore; }
+@mixin ms-Icon--AddTo { content: $ms-icon-code-AddTo; }
+@mixin ms-Icon--AddToShoppingList { content: $ms-icon-code-AddToShoppingList; }
+@mixin ms-Icon--AddWork { content: $ms-icon-code-AddWork; }
+@mixin ms-Icon--Admin { content: $ms-icon-code-Admin; }
+@mixin ms-Icon--AdminALogo32 { content: $ms-icon-code-AdminALogo32; }
+@mixin ms-Icon--AdminALogoFill32 { content: $ms-icon-code-AdminALogoFill32; }
+@mixin ms-Icon--AdminALogoInverse32 { content: $ms-icon-code-AdminALogoInverse32; }
+@mixin ms-Icon--AdminCLogoInverse32 { content: $ms-icon-code-AdminCLogoInverse32; }
+@mixin ms-Icon--AdminDLogoInverse32 { content: $ms-icon-code-AdminDLogoInverse32; }
+@mixin ms-Icon--AdminELogoInverse32 { content: $ms-icon-code-AdminELogoInverse32; }
+@mixin ms-Icon--AdminLLogoInverse32 { content: $ms-icon-code-AdminLLogoInverse32; }
+@mixin ms-Icon--AdminMLogoInverse32 { content: $ms-icon-code-AdminMLogoInverse32; }
+@mixin ms-Icon--AdminOLogoInverse32 { content: $ms-icon-code-AdminOLogoInverse32; }
+@mixin ms-Icon--AdminPLogoInverse32 { content: $ms-icon-code-AdminPLogoInverse32; }
+@mixin ms-Icon--AdminSLogoInverse32 { content: $ms-icon-code-AdminSLogoInverse32; }
+@mixin ms-Icon--AdminYLogoInverse32 { content: $ms-icon-code-AdminYLogoInverse32; }
+@mixin ms-Icon--Airplane { content: $ms-icon-code-Airplane; }
+@mixin ms-Icon--AirplaneSolid { content: $ms-icon-code-AirplaneSolid; }
+@mixin ms-Icon--AirTickets { content: $ms-icon-code-AirTickets; }
+@mixin ms-Icon--AlarmClock { content: $ms-icon-code-AlarmClock; }
+@mixin ms-Icon--Album { content: $ms-icon-code-Album; }
+@mixin ms-Icon--AlbumRemove { content: $ms-icon-code-AlbumRemove; }
+@mixin ms-Icon--AlertSettings { content: $ms-icon-code-AlertSettings; }
+@mixin ms-Icon--AlertSolid { content: $ms-icon-code-AlertSolid; }
+@mixin ms-Icon--AlignCenter { content: $ms-icon-code-AlignCenter; }
+@mixin ms-Icon--AlignHorizontalCenter { content: $ms-icon-code-AlignHorizontalCenter; }
+@mixin ms-Icon--AlignHorizontalLeft { content: $ms-icon-code-AlignHorizontalLeft; }
+@mixin ms-Icon--AlignHorizontalRight { content: $ms-icon-code-AlignHorizontalRight; }
+@mixin ms-Icon--AlignJustify { content: $ms-icon-code-AlignJustify; }
+@mixin ms-Icon--AlignLeft { content: $ms-icon-code-AlignLeft; }
+@mixin ms-Icon--AlignRight { content: $ms-icon-code-AlignRight; }
+@mixin ms-Icon--AlignVerticalBottom { content: $ms-icon-code-AlignVerticalBottom; }
+@mixin ms-Icon--AlignVerticalCenter { content: $ms-icon-code-AlignVerticalCenter; }
+@mixin ms-Icon--AlignVerticalTop { content: $ms-icon-code-AlignVerticalTop; }
+@mixin ms-Icon--AllApps { content: $ms-icon-code-AllApps; }
+@mixin ms-Icon--AllAppsMirrored { content: $ms-icon-code-AllAppsMirrored; }
+@mixin ms-Icon--AllCurrency { content: $ms-icon-code-AllCurrency; }
+@mixin ms-Icon--AltText { content: $ms-icon-code-AltText; }
+@mixin ms-Icon--AnalyticsLogo { content: $ms-icon-code-AnalyticsLogo; }
+@mixin ms-Icon--AnalyticsQuery { content: $ms-icon-code-AnalyticsQuery; }
+@mixin ms-Icon--AnalyticsReport { content: $ms-icon-code-AnalyticsReport; }
+@mixin ms-Icon--AnalyticsView { content: $ms-icon-code-AnalyticsView; }
+@mixin ms-Icon--AnchorLock { content: $ms-icon-code-AnchorLock; }
+@mixin ms-Icon--Annotation { content: $ms-icon-code-Annotation; }
+@mixin ms-Icon--AppIconDefault { content: $ms-icon-code-AppIconDefault; }
+@mixin ms-Icon--AppIconDefaultAdd { content: $ms-icon-code-AppIconDefaultAdd; }
+@mixin ms-Icon--AppIconDefaultList { content: $ms-icon-code-AppIconDefaultList; }
+@mixin ms-Icon--Archive { content: $ms-icon-code-Archive; }
+@mixin ms-Icon--ArchiveUndo { content: $ms-icon-code-ArchiveUndo; }
+@mixin ms-Icon--AreaChart { content: $ms-icon-code-AreaChart; }
+@mixin ms-Icon--ArrangeBringForward { content: $ms-icon-code-ArrangeBringForward; }
+@mixin ms-Icon--ArrangeBringToFront { content: $ms-icon-code-ArrangeBringToFront; }
+@mixin ms-Icon--ArrangeByFrom { content: $ms-icon-code-ArrangeByFrom; }
+@mixin ms-Icon--ArrangeSendBackward { content: $ms-icon-code-ArrangeSendBackward; }
+@mixin ms-Icon--ArrangeSendToBack { content: $ms-icon-code-ArrangeSendToBack; }
+@mixin ms-Icon--Arrivals { content: $ms-icon-code-Arrivals; }
+@mixin ms-Icon--ArrowDownRight8 { content: $ms-icon-code-ArrowDownRight8; }
+@mixin ms-Icon--ArrowDownRightMirrored8 { content: $ms-icon-code-ArrowDownRightMirrored8; }
+@mixin ms-Icon--ArrowTallDownLeft { content: $ms-icon-code-ArrowTallDownLeft; }
+@mixin ms-Icon--ArrowTallDownRight { content: $ms-icon-code-ArrowTallDownRight; }
+@mixin ms-Icon--ArrowTallUpLeft { content: $ms-icon-code-ArrowTallUpLeft; }
+@mixin ms-Icon--ArrowTallUpRight { content: $ms-icon-code-ArrowTallUpRight; }
+@mixin ms-Icon--ArrowUpRight { content: $ms-icon-code-ArrowUpRight; }
+@mixin ms-Icon--ArrowUpRight8 { content: $ms-icon-code-ArrowUpRight8; }
+@mixin ms-Icon--ArrowUpRightMirrored8 { content: $ms-icon-code-ArrowUpRightMirrored8; }
+@mixin ms-Icon--Articles { content: $ms-icon-code-Articles; }
+@mixin ms-Icon--Ascending { content: $ms-icon-code-Ascending; }
+@mixin ms-Icon--AspectRatio { content: $ms-icon-code-AspectRatio; }
+@mixin ms-Icon--AssessmentGroup { content: $ms-icon-code-AssessmentGroup; }
+@mixin ms-Icon--AssessmentGroupTemplate { content: $ms-icon-code-AssessmentGroupTemplate; }
+@mixin ms-Icon--AssetLibrary { content: $ms-icon-code-AssetLibrary; }
+@mixin ms-Icon--Assign { content: $ms-icon-code-Assign; }
+@mixin ms-Icon--Asterisk { content: $ms-icon-code-Asterisk; }
+@mixin ms-Icon--AsteriskSolid { content: $ms-icon-code-AsteriskSolid; }
+@mixin ms-Icon--ATPLogo { content: $ms-icon-code-ATPLogo; }
+@mixin ms-Icon--Attach { content: $ms-icon-code-Attach; }
+@mixin ms-Icon--AustralianRules { content: $ms-icon-code-AustralianRules; }
+@mixin ms-Icon--AuthenticatorApp { content: $ms-icon-code-AuthenticatorApp; }
+@mixin ms-Icon--AutoDeploySettings { content: $ms-icon-code-AutoDeploySettings; }
+@mixin ms-Icon--AutoEnhanceOff { content: $ms-icon-code-AutoEnhanceOff; }
+@mixin ms-Icon--AutoEnhanceOn { content: $ms-icon-code-AutoEnhanceOn; }
+@mixin ms-Icon--AutoFillTemplate { content: $ms-icon-code-AutoFillTemplate; }
+@mixin ms-Icon--AutoFitContents { content: $ms-icon-code-AutoFitContents; }
+@mixin ms-Icon--AutoFitWindow { content: $ms-icon-code-AutoFitWindow; }
+@mixin ms-Icon--AutoHeight { content: $ms-icon-code-AutoHeight; }
+@mixin ms-Icon--AutomateFlow { content: $ms-icon-code-AutomateFlow; }
+@mixin ms-Icon--AutoRacing { content: $ms-icon-code-AutoRacing; }
+@mixin ms-Icon--AwayStatus { content: $ms-icon-code-AwayStatus; }
+@mixin ms-Icon--AzureAPIManagement { content: $ms-icon-code-AzureAPIManagement; }
+@mixin ms-Icon--AzureKeyVault { content: $ms-icon-code-AzureKeyVault; }
+@mixin ms-Icon--AzureLogo { content: $ms-icon-code-AzureLogo; }
+@mixin ms-Icon--AzureServiceEndpoint { content: $ms-icon-code-AzureServiceEndpoint; }
+@mixin ms-Icon--Back { content: $ms-icon-code-Back; }
+@mixin ms-Icon--BackgroundColor { content: $ms-icon-code-BackgroundColor; }
+@mixin ms-Icon--Backlog { content: $ms-icon-code-Backlog; }
+@mixin ms-Icon--BacklogBoard { content: $ms-icon-code-BacklogBoard; }
+@mixin ms-Icon--BacklogList { content: $ms-icon-code-BacklogList; }
+@mixin ms-Icon--BackToWindow { content: $ms-icon-code-BackToWindow; }
+@mixin ms-Icon--Badge { content: $ms-icon-code-Badge; }
+@mixin ms-Icon--Balloons { content: $ms-icon-code-Balloons; }
+@mixin ms-Icon--Bank { content: $ms-icon-code-Bank; }
+@mixin ms-Icon--BankSolid { content: $ms-icon-code-BankSolid; }
+@mixin ms-Icon--BarChart4 { content: $ms-icon-code-BarChart4; }
+@mixin ms-Icon--BarChartHorizontal { content: $ms-icon-code-BarChartHorizontal; }
+@mixin ms-Icon--BarChartVertical { content: $ms-icon-code-BarChartVertical; }
+@mixin ms-Icon--BarChartVerticalEdit { content: $ms-icon-code-BarChartVerticalEdit; }
+@mixin ms-Icon--BarChartVerticalFill { content: $ms-icon-code-BarChartVerticalFill; }
+@mixin ms-Icon--BarChartVerticalFilter { content: $ms-icon-code-BarChartVerticalFilter; }
+@mixin ms-Icon--BarChartVerticalFilterSolid { content: $ms-icon-code-BarChartVerticalFilterSolid; }
+@mixin ms-Icon--Baseball { content: $ms-icon-code-Baseball; }
+@mixin ms-Icon--BeerMug { content: $ms-icon-code-BeerMug; }
+@mixin ms-Icon--BIDashboard { content: $ms-icon-code-BIDashboard; }
+@mixin ms-Icon--BidiLtr { content: $ms-icon-code-BidiLtr; }
+@mixin ms-Icon--BidiRtl { content: $ms-icon-code-BidiRtl; }
+@mixin ms-Icon--BingLogo { content: $ms-icon-code-BingLogo; }
+@mixin ms-Icon--BirthdayCake { content: $ms-icon-code-BirthdayCake; }
+@mixin ms-Icon--BlockContact { content: $ms-icon-code-BlockContact; }
+@mixin ms-Icon--Blocked { content: $ms-icon-code-Blocked; }
+@mixin ms-Icon--Blocked12 { content: $ms-icon-code-Blocked12; }
+@mixin ms-Icon--Blocked2 { content: $ms-icon-code-Blocked2; }
+@mixin ms-Icon--Blocked2Solid { content: $ms-icon-code-Blocked2Solid; }
+@mixin ms-Icon--BlockedSite { content: $ms-icon-code-BlockedSite; }
+@mixin ms-Icon--BlockedSiteSolid12 { content: $ms-icon-code-BlockedSiteSolid12; }
+@mixin ms-Icon--BlockedSolid { content: $ms-icon-code-BlockedSolid; }
+@mixin ms-Icon--Blog { content: $ms-icon-code-Blog; }
+@mixin ms-Icon--BlowingSnow { content: $ms-icon-code-BlowingSnow; }
+@mixin ms-Icon--Blur { content: $ms-icon-code-Blur; }
+@mixin ms-Icon--Boards { content: $ms-icon-code-Boards; }
+@mixin ms-Icon--Bold { content: $ms-icon-code-Bold; }
+@mixin ms-Icon--BookAnswers { content: $ms-icon-code-BookAnswers; }
+@mixin ms-Icon--BookingsLogo { content: $ms-icon-code-BookingsLogo; }
+@mixin ms-Icon--BookmarkReport { content: $ms-icon-code-BookmarkReport; }
+@mixin ms-Icon--Bookmarks { content: $ms-icon-code-Bookmarks; }
+@mixin ms-Icon--BookmarksMirrored { content: $ms-icon-code-BookmarksMirrored; }
+@mixin ms-Icon--BorderDash { content: $ms-icon-code-BorderDash; }
+@mixin ms-Icon--BorderDot { content: $ms-icon-code-BorderDot; }
+@mixin ms-Icon--BoxAdditionSolid { content: $ms-icon-code-BoxAdditionSolid; }
+@mixin ms-Icon--BoxCheckmarkSolid { content: $ms-icon-code-BoxCheckmarkSolid; }
+@mixin ms-Icon--BoxMultiplySolid { content: $ms-icon-code-BoxMultiplySolid; }
+@mixin ms-Icon--BoxPlaySolid { content: $ms-icon-code-BoxPlaySolid; }
+@mixin ms-Icon--BoxSubtractSolid { content: $ms-icon-code-BoxSubtractSolid; }
+@mixin ms-Icon--BranchCommit { content: $ms-icon-code-BranchCommit; }
+@mixin ms-Icon--BranchCompare { content: $ms-icon-code-BranchCompare; }
+@mixin ms-Icon--BranchFork { content: $ms-icon-code-BranchFork; }
+@mixin ms-Icon--BranchFork2 { content: $ms-icon-code-BranchFork2; }
+@mixin ms-Icon--BranchLocked { content: $ms-icon-code-BranchLocked; }
+@mixin ms-Icon--BranchMerge { content: $ms-icon-code-BranchMerge; }
+@mixin ms-Icon--BranchPullRequest { content: $ms-icon-code-BranchPullRequest; }
+@mixin ms-Icon--BranchSearch { content: $ms-icon-code-BranchSearch; }
+@mixin ms-Icon--BranchShelveset { content: $ms-icon-code-BranchShelveset; }
+@mixin ms-Icon--Breadcrumb { content: $ms-icon-code-Breadcrumb; }
+@mixin ms-Icon--Breakfast { content: $ms-icon-code-Breakfast; }
+@mixin ms-Icon--Brightness { content: $ms-icon-code-Brightness; }
+@mixin ms-Icon--Broom { content: $ms-icon-code-Broom; }
+@mixin ms-Icon--BrowserScreenShot { content: $ms-icon-code-BrowserScreenShot; }
+@mixin ms-Icon--BrowserTab { content: $ms-icon-code-BrowserTab; }
+@mixin ms-Icon--BrowserTabScreenshot { content: $ms-icon-code-BrowserTabScreenshot; }
+@mixin ms-Icon--Brunch { content: $ms-icon-code-Brunch; }
+@mixin ms-Icon--Brush { content: $ms-icon-code-Brush; }
+@mixin ms-Icon--BucketColor { content: $ms-icon-code-BucketColor; }
+@mixin ms-Icon--BucketColorFill { content: $ms-icon-code-BucketColorFill; }
+@mixin ms-Icon--BufferTimeAfter { content: $ms-icon-code-BufferTimeAfter; }
+@mixin ms-Icon--BufferTimeBefore { content: $ms-icon-code-BufferTimeBefore; }
+@mixin ms-Icon--BufferTimeBoth { content: $ms-icon-code-BufferTimeBoth; }
+@mixin ms-Icon--Bug { content: $ms-icon-code-Bug; }
+@mixin ms-Icon--BugBlock { content: $ms-icon-code-BugBlock; }
+@mixin ms-Icon--BugSolid { content: $ms-icon-code-BugSolid; }
+@mixin ms-Icon--BugSync { content: $ms-icon-code-BugSync; }
+@mixin ms-Icon--Build { content: $ms-icon-code-Build; }
+@mixin ms-Icon--BuildDefinition { content: $ms-icon-code-BuildDefinition; }
+@mixin ms-Icon--BuildIssue { content: $ms-icon-code-BuildIssue; }
+@mixin ms-Icon--BuildQueue { content: $ms-icon-code-BuildQueue; }
+@mixin ms-Icon--BuildQueueNew { content: $ms-icon-code-BuildQueueNew; }
+@mixin ms-Icon--BulkUpload { content: $ms-icon-code-BulkUpload; }
+@mixin ms-Icon--BulletedList { content: $ms-icon-code-BulletedList; }
+@mixin ms-Icon--BulletedList2 { content: $ms-icon-code-BulletedList2; }
+@mixin ms-Icon--BulletedList2Mirrored { content: $ms-icon-code-BulletedList2Mirrored; }
+@mixin ms-Icon--BulletedListBullet { content: $ms-icon-code-BulletedListBullet; }
+@mixin ms-Icon--BulletedListBulletMirrored { content: $ms-icon-code-BulletedListBulletMirrored; }
+@mixin ms-Icon--BulletedListMirrored { content: $ms-icon-code-BulletedListMirrored; }
+@mixin ms-Icon--BulletedListText { content: $ms-icon-code-BulletedListText; }
+@mixin ms-Icon--BulletedListTextMirrored { content: $ms-icon-code-BulletedListTextMirrored; }
+@mixin ms-Icon--BulletedTreeList { content: $ms-icon-code-BulletedTreeList; }
+@mixin ms-Icon--Bullseye { content: $ms-icon-code-Bullseye; }
+@mixin ms-Icon--BullseyeTarget { content: $ms-icon-code-BullseyeTarget; }
+@mixin ms-Icon--BullseyeTargetEdit { content: $ms-icon-code-BullseyeTargetEdit; }
+@mixin ms-Icon--Bus { content: $ms-icon-code-Bus; }
+@mixin ms-Icon--BusinessCenterLogo { content: $ms-icon-code-BusinessCenterLogo; }
+@mixin ms-Icon--BusinessHoursSign { content: $ms-icon-code-BusinessHoursSign; }
+@mixin ms-Icon--BusSolid { content: $ms-icon-code-BusSolid; }
+@mixin ms-Icon--ButtonControl { content: $ms-icon-code-ButtonControl; }
+@mixin ms-Icon--Cafe { content: $ms-icon-code-Cafe; }
+@mixin ms-Icon--Cake { content: $ms-icon-code-Cake; }
+@mixin ms-Icon--Calculator { content: $ms-icon-code-Calculator; }
+@mixin ms-Icon--CalculatorAddition { content: $ms-icon-code-CalculatorAddition; }
+@mixin ms-Icon--CalculatorDelta { content: $ms-icon-code-CalculatorDelta; }
+@mixin ms-Icon--CalculatorEqualTo { content: $ms-icon-code-CalculatorEqualTo; }
+@mixin ms-Icon--CalculatorMultiply { content: $ms-icon-code-CalculatorMultiply; }
+@mixin ms-Icon--CalculatorNotEqualTo { content: $ms-icon-code-CalculatorNotEqualTo; }
+@mixin ms-Icon--CalculatorPercentage { content: $ms-icon-code-CalculatorPercentage; }
+@mixin ms-Icon--CalculatorSubtract { content: $ms-icon-code-CalculatorSubtract; }
+@mixin ms-Icon--Calendar { content: $ms-icon-code-Calendar; }
+@mixin ms-Icon--CalendarAgenda { content: $ms-icon-code-CalendarAgenda; }
+@mixin ms-Icon--CalendarDay { content: $ms-icon-code-CalendarDay; }
+@mixin ms-Icon--CalendarMirrored { content: $ms-icon-code-CalendarMirrored; }
+@mixin ms-Icon--CalendarReply { content: $ms-icon-code-CalendarReply; }
+@mixin ms-Icon--CalendarSettings { content: $ms-icon-code-CalendarSettings; }
+@mixin ms-Icon--CalendarSettingsMirrored { content: $ms-icon-code-CalendarSettingsMirrored; }
+@mixin ms-Icon--CalendarWeek { content: $ms-icon-code-CalendarWeek; }
+@mixin ms-Icon--CalendarWorkWeek { content: $ms-icon-code-CalendarWorkWeek; }
+@mixin ms-Icon--CalendarYear { content: $ms-icon-code-CalendarYear; }
+@mixin ms-Icon--Calories { content: $ms-icon-code-Calories; }
+@mixin ms-Icon--CaloriesAdd { content: $ms-icon-code-CaloriesAdd; }
+@mixin ms-Icon--Camera { content: $ms-icon-code-Camera; }
+@mixin ms-Icon--CampaignTemplate { content: $ms-icon-code-CampaignTemplate; }
+@mixin ms-Icon--Cancel { content: $ms-icon-code-Cancel; }
+@mixin ms-Icon--CannedChat { content: $ms-icon-code-CannedChat; }
+@mixin ms-Icon--Car { content: $ms-icon-code-Car; }
+@mixin ms-Icon--CaretBottomLeftCenter8 { content: $ms-icon-code-CaretBottomLeftCenter8; }
+@mixin ms-Icon--CaretBottomLeftSolid8 { content: $ms-icon-code-CaretBottomLeftSolid8; }
+@mixin ms-Icon--CaretBottomRightCenter8 { content: $ms-icon-code-CaretBottomRightCenter8; }
+@mixin ms-Icon--CaretBottomRightSolid8 { content: $ms-icon-code-CaretBottomRightSolid8; }
+@mixin ms-Icon--CaretDown8 { content: $ms-icon-code-CaretDown8; }
+@mixin ms-Icon--CaretDownSolid8 { content: $ms-icon-code-CaretDownSolid8; }
+@mixin ms-Icon--CaretHollow { content: $ms-icon-code-CaretHollow; }
+@mixin ms-Icon--CaretHollowMirrored { content: $ms-icon-code-CaretHollowMirrored; }
+@mixin ms-Icon--CaretLeft8 { content: $ms-icon-code-CaretLeft8; }
+@mixin ms-Icon--CaretLeftSolid8 { content: $ms-icon-code-CaretLeftSolid8; }
+@mixin ms-Icon--CaretRight { content: $ms-icon-code-CaretRight; }
+@mixin ms-Icon--CaretRight8 { content: $ms-icon-code-CaretRight8; }
+@mixin ms-Icon--CaretRightSolid8 { content: $ms-icon-code-CaretRightSolid8; }
+@mixin ms-Icon--CaretSolid { content: $ms-icon-code-CaretSolid; }
+@mixin ms-Icon--CaretSolid16 { content: $ms-icon-code-CaretSolid16; }
+@mixin ms-Icon--CaretSolidDown { content: $ms-icon-code-CaretSolidDown; }
+@mixin ms-Icon--CaretSolidLeft { content: $ms-icon-code-CaretSolidLeft; }
+@mixin ms-Icon--CaretSolidMirrored { content: $ms-icon-code-CaretSolidMirrored; }
+@mixin ms-Icon--CaretSolidRight { content: $ms-icon-code-CaretSolidRight; }
+@mixin ms-Icon--CaretSolidUp { content: $ms-icon-code-CaretSolidUp; }
+@mixin ms-Icon--CaretTopLeftCenter8 { content: $ms-icon-code-CaretTopLeftCenter8; }
+@mixin ms-Icon--CaretTopLeftSolid8 { content: $ms-icon-code-CaretTopLeftSolid8; }
+@mixin ms-Icon--CaretTopRightCenter8 { content: $ms-icon-code-CaretTopRightCenter8; }
+@mixin ms-Icon--CaretTopRightSolid8 { content: $ms-icon-code-CaretTopRightSolid8; }
+@mixin ms-Icon--CaretUp8 { content: $ms-icon-code-CaretUp8; }
+@mixin ms-Icon--CaretUpSolid8 { content: $ms-icon-code-CaretUpSolid8; }
+@mixin ms-Icon--Cat { content: $ms-icon-code-Cat; }
+@mixin ms-Icon--CellPhone { content: $ms-icon-code-CellPhone; }
+@mixin ms-Icon--Certificate { content: $ms-icon-code-Certificate; }
+@mixin ms-Icon--CertifiedDatabase { content: $ms-icon-code-CertifiedDatabase; }
+@mixin ms-Icon--ChangeEntitlements { content: $ms-icon-code-ChangeEntitlements; }
+@mixin ms-Icon--Chart { content: $ms-icon-code-Chart; }
+@mixin ms-Icon--ChartSeries { content: $ms-icon-code-ChartSeries; }
+@mixin ms-Icon--ChartTemplate { content: $ms-icon-code-ChartTemplate; }
+@mixin ms-Icon--ChartXAngle { content: $ms-icon-code-ChartXAngle; }
+@mixin ms-Icon--ChartYAngle { content: $ms-icon-code-ChartYAngle; }
+@mixin ms-Icon--Chat { content: $ms-icon-code-Chat; }
+@mixin ms-Icon--ChatBot { content: $ms-icon-code-ChatBot; }
+@mixin ms-Icon--ChatInviteFriend { content: $ms-icon-code-ChatInviteFriend; }
+@mixin ms-Icon--ChatSolid { content: $ms-icon-code-ChatSolid; }
+@mixin ms-Icon--Checkbox { content: $ms-icon-code-Checkbox; }
+@mixin ms-Icon--CheckboxComposite { content: $ms-icon-code-CheckboxComposite; }
+@mixin ms-Icon--CheckboxCompositeReversed { content: $ms-icon-code-CheckboxCompositeReversed; }
+@mixin ms-Icon--CheckboxFill { content: $ms-icon-code-CheckboxFill; }
+@mixin ms-Icon--CheckboxIndeterminate { content: $ms-icon-code-CheckboxIndeterminate; }
+@mixin ms-Icon--CheckedOutByOther12 { content: $ms-icon-code-CheckedOutByOther12; }
+@mixin ms-Icon--CheckedOutByYou12 { content: $ms-icon-code-CheckedOutByYou12; }
+@mixin ms-Icon--CheckList { content: $ms-icon-code-CheckList; }
+@mixin ms-Icon--CheckListCheck { content: $ms-icon-code-CheckListCheck; }
+@mixin ms-Icon--CheckListCheckMirrored { content: $ms-icon-code-CheckListCheckMirrored; }
+@mixin ms-Icon--CheckListText { content: $ms-icon-code-CheckListText; }
+@mixin ms-Icon--CheckListTextMirrored { content: $ms-icon-code-CheckListTextMirrored; }
+@mixin ms-Icon--CheckMark { content: $ms-icon-code-CheckMark; }
+@mixin ms-Icon--ChevronDown { content: $ms-icon-code-ChevronDown; }
+@mixin ms-Icon--ChevronDownEnd6 { content: $ms-icon-code-ChevronDownEnd6; }
+@mixin ms-Icon--ChevronDownMed { content: $ms-icon-code-ChevronDownMed; }
+@mixin ms-Icon--ChevronDownSmall { content: $ms-icon-code-ChevronDownSmall; }
+@mixin ms-Icon--ChevronFold10 { content: $ms-icon-code-ChevronFold10; }
+@mixin ms-Icon--ChevronLeft { content: $ms-icon-code-ChevronLeft; }
+@mixin ms-Icon--ChevronLeftEnd6 { content: $ms-icon-code-ChevronLeftEnd6; }
+@mixin ms-Icon--ChevronLeftMed { content: $ms-icon-code-ChevronLeftMed; }
+@mixin ms-Icon--ChevronLeftSmall { content: $ms-icon-code-ChevronLeftSmall; }
+@mixin ms-Icon--ChevronRight { content: $ms-icon-code-ChevronRight; }
+@mixin ms-Icon--ChevronRightEnd6 { content: $ms-icon-code-ChevronRightEnd6; }
+@mixin ms-Icon--ChevronRightMed { content: $ms-icon-code-ChevronRightMed; }
+@mixin ms-Icon--ChevronRightSmall { content: $ms-icon-code-ChevronRightSmall; }
+@mixin ms-Icon--ChevronUnfold10 { content: $ms-icon-code-ChevronUnfold10; }
+@mixin ms-Icon--ChevronUp { content: $ms-icon-code-ChevronUp; }
+@mixin ms-Icon--ChevronUpEnd6 { content: $ms-icon-code-ChevronUpEnd6; }
+@mixin ms-Icon--ChevronUpMed { content: $ms-icon-code-ChevronUpMed; }
+@mixin ms-Icon--ChevronUpSmall { content: $ms-icon-code-ChevronUpSmall; }
+@mixin ms-Icon--Childof { content: $ms-icon-code-Childof; }
+@mixin ms-Icon--Chopsticks { content: $ms-icon-code-Chopsticks; }
+@mixin ms-Icon--ChromeBack { content: $ms-icon-code-ChromeBack; }
+@mixin ms-Icon--ChromeBackMirrored { content: $ms-icon-code-ChromeBackMirrored; }
+@mixin ms-Icon--ChromeClose { content: $ms-icon-code-ChromeClose; }
+@mixin ms-Icon--ChromeFullScreen { content: $ms-icon-code-ChromeFullScreen; }
+@mixin ms-Icon--ChromeMinimize { content: $ms-icon-code-ChromeMinimize; }
+@mixin ms-Icon--ChromeRestore { content: $ms-icon-code-ChromeRestore; }
+@mixin ms-Icon--CircleAddition { content: $ms-icon-code-CircleAddition; }
+@mixin ms-Icon--CircleAdditionSolid { content: $ms-icon-code-CircleAdditionSolid; }
+@mixin ms-Icon--CircleFill { content: $ms-icon-code-CircleFill; }
+@mixin ms-Icon--CircleHalfFull { content: $ms-icon-code-CircleHalfFull; }
+@mixin ms-Icon--CirclePause { content: $ms-icon-code-CirclePause; }
+@mixin ms-Icon--CirclePauseSolid { content: $ms-icon-code-CirclePauseSolid; }
+@mixin ms-Icon--CirclePlus { content: $ms-icon-code-CirclePlus; }
+@mixin ms-Icon--CircleRing { content: $ms-icon-code-CircleRing; }
+@mixin ms-Icon--CircleShape { content: $ms-icon-code-CircleShape; }
+@mixin ms-Icon--CircleShapeSolid { content: $ms-icon-code-CircleShapeSolid; }
+@mixin ms-Icon--CircleStop { content: $ms-icon-code-CircleStop; }
+@mixin ms-Icon--CircleStopSolid { content: $ms-icon-code-CircleStopSolid; }
+@mixin ms-Icon--CityNext { content: $ms-icon-code-CityNext; }
+@mixin ms-Icon--CityNext2 { content: $ms-icon-code-CityNext2; }
+@mixin ms-Icon--ClassNotebookLogo16 { content: $ms-icon-code-ClassNotebookLogo16; }
+@mixin ms-Icon--ClassNotebookLogo32 { content: $ms-icon-code-ClassNotebookLogo32; }
+@mixin ms-Icon--ClassNotebookLogoFill16 { content: $ms-icon-code-ClassNotebookLogoFill16; }
+@mixin ms-Icon--ClassNotebookLogoFill32 { content: $ms-icon-code-ClassNotebookLogoFill32; }
+@mixin ms-Icon--ClassNotebookLogoInverse { content: $ms-icon-code-ClassNotebookLogoInverse; }
+@mixin ms-Icon--ClassNotebookLogoInverse16 { content: $ms-icon-code-ClassNotebookLogoInverse16; }
+@mixin ms-Icon--ClassNotebookLogoInverse32 { content: $ms-icon-code-ClassNotebookLogoInverse32; }
+@mixin ms-Icon--ClassroomLogo { content: $ms-icon-code-ClassroomLogo; }
+@mixin ms-Icon--Clear { content: $ms-icon-code-Clear; }
+@mixin ms-Icon--ClearFilter { content: $ms-icon-code-ClearFilter; }
+@mixin ms-Icon--ClearFormatting { content: $ms-icon-code-ClearFormatting; }
+@mixin ms-Icon--ClearFormattingA { content: $ms-icon-code-ClearFormattingA; }
+@mixin ms-Icon--ClearFormattingEraser { content: $ms-icon-code-ClearFormattingEraser; }
+@mixin ms-Icon--ClearNight { content: $ms-icon-code-ClearNight; }
+@mixin ms-Icon--ClearSelection { content: $ms-icon-code-ClearSelection; }
+@mixin ms-Icon--ClearSelectionMirrored { content: $ms-icon-code-ClearSelectionMirrored; }
+@mixin ms-Icon--ClipboardList { content: $ms-icon-code-ClipboardList; }
+@mixin ms-Icon--ClipboardListMirrored { content: $ms-icon-code-ClipboardListMirrored; }
+@mixin ms-Icon--ClipboardSolid { content: $ms-icon-code-ClipboardSolid; }
+@mixin ms-Icon--Clock { content: $ms-icon-code-Clock; }
+@mixin ms-Icon--CloneToDesktop { content: $ms-icon-code-CloneToDesktop; }
+@mixin ms-Icon--ClosedCaption { content: $ms-icon-code-ClosedCaption; }
+@mixin ms-Icon--ClosePane { content: $ms-icon-code-ClosePane; }
+@mixin ms-Icon--ClosePaneMirrored { content: $ms-icon-code-ClosePaneMirrored; }
+@mixin ms-Icon--Cloud { content: $ms-icon-code-Cloud; }
+@mixin ms-Icon--CloudAdd { content: $ms-icon-code-CloudAdd; }
+@mixin ms-Icon--CloudDownload { content: $ms-icon-code-CloudDownload; }
+@mixin ms-Icon--CloudImportExport { content: $ms-icon-code-CloudImportExport; }
+@mixin ms-Icon--CloudUpload { content: $ms-icon-code-CloudUpload; }
+@mixin ms-Icon--CloudWeather { content: $ms-icon-code-CloudWeather; }
+@mixin ms-Icon--Cloudy { content: $ms-icon-code-Cloudy; }
+@mixin ms-Icon--Cocktails { content: $ms-icon-code-Cocktails; }
+@mixin ms-Icon--Code { content: $ms-icon-code-Code; }
+@mixin ms-Icon--CodeEdit { content: $ms-icon-code-CodeEdit; }
+@mixin ms-Icon--Coffee { content: $ms-icon-code-Coffee; }
+@mixin ms-Icon--CoffeeScript { content: $ms-icon-code-CoffeeScript; }
+@mixin ms-Icon--CollapseContent { content: $ms-icon-code-CollapseContent; }
+@mixin ms-Icon--CollapseContentSingle { content: $ms-icon-code-CollapseContentSingle; }
+@mixin ms-Icon--CollapseMenu { content: $ms-icon-code-CollapseMenu; }
+@mixin ms-Icon--CollegeFootball { content: $ms-icon-code-CollegeFootball; }
+@mixin ms-Icon--CollegeHoops { content: $ms-icon-code-CollegeHoops; }
+@mixin ms-Icon--Color { content: $ms-icon-code-Color; }
+@mixin ms-Icon--ColorSolid { content: $ms-icon-code-ColorSolid; }
+@mixin ms-Icon--ColumnLeftTwoThirds { content: $ms-icon-code-ColumnLeftTwoThirds; }
+@mixin ms-Icon--ColumnLeftTwoThirdsEdit { content: $ms-icon-code-ColumnLeftTwoThirdsEdit; }
+@mixin ms-Icon--ColumnOptions { content: $ms-icon-code-ColumnOptions; }
+@mixin ms-Icon--ColumnRightTwoThirds { content: $ms-icon-code-ColumnRightTwoThirds; }
+@mixin ms-Icon--ColumnRightTwoThirdsEdit { content: $ms-icon-code-ColumnRightTwoThirdsEdit; }
+@mixin ms-Icon--ColumnVerticalSection { content: $ms-icon-code-ColumnVerticalSection; }
+@mixin ms-Icon--ColumnVerticalSectionEdit { content: $ms-icon-code-ColumnVerticalSectionEdit; }
+@mixin ms-Icon--Combine { content: $ms-icon-code-Combine; }
+@mixin ms-Icon--Combobox { content: $ms-icon-code-Combobox; }
+@mixin ms-Icon--CommandPrompt { content: $ms-icon-code-CommandPrompt; }
+@mixin ms-Icon--Comment { content: $ms-icon-code-Comment; }
+@mixin ms-Icon--CommentActive { content: $ms-icon-code-CommentActive; }
+@mixin ms-Icon--CommentAdd { content: $ms-icon-code-CommentAdd; }
+@mixin ms-Icon--CommentNext { content: $ms-icon-code-CommentNext; }
+@mixin ms-Icon--CommentPrevious { content: $ms-icon-code-CommentPrevious; }
+@mixin ms-Icon--CommentSolid { content: $ms-icon-code-CommentSolid; }
+@mixin ms-Icon--CommentUrgent { content: $ms-icon-code-CommentUrgent; }
+@mixin ms-Icon--Commitments { content: $ms-icon-code-Commitments; }
+@mixin ms-Icon--CommonDataServiceCDS { content: $ms-icon-code-CommonDataServiceCDS; }
+@mixin ms-Icon--Communications { content: $ms-icon-code-Communications; }
+@mixin ms-Icon--CompanyDirectory { content: $ms-icon-code-CompanyDirectory; }
+@mixin ms-Icon--CompanyDirectoryMirrored { content: $ms-icon-code-CompanyDirectoryMirrored; }
+@mixin ms-Icon--Compare { content: $ms-icon-code-Compare; }
+@mixin ms-Icon--CompareUneven { content: $ms-icon-code-CompareUneven; }
+@mixin ms-Icon--CompassNW { content: $ms-icon-code-CompassNW; }
+@mixin ms-Icon--Completed { content: $ms-icon-code-Completed; }
+@mixin ms-Icon--CompletedSolid { content: $ms-icon-code-CompletedSolid; }
+@mixin ms-Icon--ComplianceAudit { content: $ms-icon-code-ComplianceAudit; }
+@mixin ms-Icon--ConfigurationSolid { content: $ms-icon-code-ConfigurationSolid; }
+@mixin ms-Icon--ConnectContacts { content: $ms-icon-code-ConnectContacts; }
+@mixin ms-Icon--ConnectVirtualMachine { content: $ms-icon-code-ConnectVirtualMachine; }
+@mixin ms-Icon--ConstructionCone { content: $ms-icon-code-ConstructionCone; }
+@mixin ms-Icon--ConstructionConeSolid { content: $ms-icon-code-ConstructionConeSolid; }
+@mixin ms-Icon--Contact { content: $ms-icon-code-Contact; }
+@mixin ms-Icon--ContactCard { content: $ms-icon-code-ContactCard; }
+@mixin ms-Icon--ContactCardSettings { content: $ms-icon-code-ContactCardSettings; }
+@mixin ms-Icon--ContactCardSettingsMirrored { content: $ms-icon-code-ContactCardSettingsMirrored; }
+@mixin ms-Icon--ContactHeart { content: $ms-icon-code-ContactHeart; }
+@mixin ms-Icon--ContactInfo { content: $ms-icon-code-ContactInfo; }
+@mixin ms-Icon--ContactLink { content: $ms-icon-code-ContactLink; }
+@mixin ms-Icon--ContactList { content: $ms-icon-code-ContactList; }
+@mixin ms-Icon--ContactLock { content: $ms-icon-code-ContactLock; }
+@mixin ms-Icon--ContentFeed { content: $ms-icon-code-ContentFeed; }
+@mixin ms-Icon--ContentSettings { content: $ms-icon-code-ContentSettings; }
+@mixin ms-Icon--ContextMenu { content: $ms-icon-code-ContextMenu; }
+@mixin ms-Icon--Contrast { content: $ms-icon-code-Contrast; }
+@mixin ms-Icon--Copy { content: $ms-icon-code-Copy; }
+@mixin ms-Icon--CortanaLogoBeckonInner { content: $ms-icon-code-CortanaLogoBeckonInner; }
+@mixin ms-Icon--CortanaLogoBeckonOuter { content: $ms-icon-code-CortanaLogoBeckonOuter; }
+@mixin ms-Icon--CortanaLogoInner { content: $ms-icon-code-CortanaLogoInner; }
+@mixin ms-Icon--CortanaLogoOuter { content: $ms-icon-code-CortanaLogoOuter; }
+@mixin ms-Icon--CortanaLogoReadyInner { content: $ms-icon-code-CortanaLogoReadyInner; }
+@mixin ms-Icon--CortanaLogoReadyOuter { content: $ms-icon-code-CortanaLogoReadyOuter; }
+@mixin ms-Icon--Cotton { content: $ms-icon-code-Cotton; }
+@mixin ms-Icon--Coupon { content: $ms-icon-code-Coupon; }
+@mixin ms-Icon--CPlusPlus { content: $ms-icon-code-CPlusPlus; }
+@mixin ms-Icon--CPlusPlusLanguage { content: $ms-icon-code-CPlusPlusLanguage; }
+@mixin ms-Icon--CreateMailRule { content: $ms-icon-code-CreateMailRule; }
+@mixin ms-Icon--Cricket { content: $ms-icon-code-Cricket; }
+@mixin ms-Icon--CRMProcesses { content: $ms-icon-code-CRMProcesses; }
+@mixin ms-Icon--CRMReport { content: $ms-icon-code-CRMReport; }
+@mixin ms-Icon--CRMServices { content: $ms-icon-code-CRMServices; }
+@mixin ms-Icon--Crop { content: $ms-icon-code-Crop; }
+@mixin ms-Icon--Crown { content: $ms-icon-code-Crown; }
+@mixin ms-Icon--CrownSolid { content: $ms-icon-code-CrownSolid; }
+@mixin ms-Icon--CSharp { content: $ms-icon-code-CSharp; }
+@mixin ms-Icon--CSharpLanguage { content: $ms-icon-code-CSharpLanguage; }
+@mixin ms-Icon--CSS { content: $ms-icon-code-CSS; }
+@mixin ms-Icon--CubeShape { content: $ms-icon-code-CubeShape; }
+@mixin ms-Icon--CubeShapeSolid { content: $ms-icon-code-CubeShapeSolid; }
+@mixin ms-Icon--CustomizeToolbar { content: $ms-icon-code-CustomizeToolbar; }
+@mixin ms-Icon--CustomList { content: $ms-icon-code-CustomList; }
+@mixin ms-Icon--CustomListMirrored { content: $ms-icon-code-CustomListMirrored; }
+@mixin ms-Icon--Cut { content: $ms-icon-code-Cut; }
+@mixin ms-Icon--Cycling { content: $ms-icon-code-Cycling; }
+@mixin ms-Icon--D365CoreHR { content: $ms-icon-code-D365CoreHR; }
+@mixin ms-Icon--D365CustomerInsights { content: $ms-icon-code-D365CustomerInsights; }
+@mixin ms-Icon--D365ProjectOperations { content: $ms-icon-code-D365ProjectOperations; }
+@mixin ms-Icon--D365TalentInsight { content: $ms-icon-code-D365TalentInsight; }
+@mixin ms-Icon--D365TalentLearn { content: $ms-icon-code-D365TalentLearn; }
+@mixin ms-Icon--DashboardAdd { content: $ms-icon-code-DashboardAdd; }
+@mixin ms-Icon--Database { content: $ms-icon-code-Database; }
+@mixin ms-Icon--DatabaseSync { content: $ms-icon-code-DatabaseSync; }
+@mixin ms-Icon--DataConnectionLibrary { content: $ms-icon-code-DataConnectionLibrary; }
+@mixin ms-Icon--Dataflows { content: $ms-icon-code-Dataflows; }
+@mixin ms-Icon--DataflowsLink { content: $ms-icon-code-DataflowsLink; }
+@mixin ms-Icon--DataManagementSettings { content: $ms-icon-code-DataManagementSettings; }
+@mixin ms-Icon--DateTime { content: $ms-icon-code-DateTime; }
+@mixin ms-Icon--DateTime12 { content: $ms-icon-code-DateTime12; }
+@mixin ms-Icon--DateTime2 { content: $ms-icon-code-DateTime2; }
+@mixin ms-Icon--DateTimeMirrored { content: $ms-icon-code-DateTimeMirrored; }
+@mixin ms-Icon--DeactivateOrders { content: $ms-icon-code-DeactivateOrders; }
+@mixin ms-Icon--Decimals { content: $ms-icon-code-Decimals; }
+@mixin ms-Icon--DecisionSolid { content: $ms-icon-code-DecisionSolid; }
+@mixin ms-Icon--DeclineCall { content: $ms-icon-code-DeclineCall; }
+@mixin ms-Icon--DecreaseIndent { content: $ms-icon-code-DecreaseIndent; }
+@mixin ms-Icon--DecreaseIndentArrow { content: $ms-icon-code-DecreaseIndentArrow; }
+@mixin ms-Icon--DecreaseIndentArrowMirrored { content: $ms-icon-code-DecreaseIndentArrowMirrored; }
+@mixin ms-Icon--DecreaseIndentLegacy { content: $ms-icon-code-DecreaseIndentLegacy; }
+@mixin ms-Icon--DecreaseIndentMirrored { content: $ms-icon-code-DecreaseIndentMirrored; }
+@mixin ms-Icon--DecreaseIndentText { content: $ms-icon-code-DecreaseIndentText; }
+@mixin ms-Icon--DecreaseIndentTextMirrored { content: $ms-icon-code-DecreaseIndentTextMirrored; }
+@mixin ms-Icon--DefaultRatio { content: $ms-icon-code-DefaultRatio; }
+@mixin ms-Icon--DefectSolid { content: $ms-icon-code-DefectSolid; }
+@mixin ms-Icon--DefenderTVM { content: $ms-icon-code-DefenderTVM; }
+@mixin ms-Icon--Delete { content: $ms-icon-code-Delete; }
+@mixin ms-Icon--DeleteColumns { content: $ms-icon-code-DeleteColumns; }
+@mixin ms-Icon--DeleteRows { content: $ms-icon-code-DeleteRows; }
+@mixin ms-Icon--DeleteRowsMirrored { content: $ms-icon-code-DeleteRowsMirrored; }
+@mixin ms-Icon--DeleteTable { content: $ms-icon-code-DeleteTable; }
+@mixin ms-Icon--DeliveryTruck { content: $ms-icon-code-DeliveryTruck; }
+@mixin ms-Icon--DelveAnalytics { content: $ms-icon-code-DelveAnalytics; }
+@mixin ms-Icon--DelveAnalyticsLogo { content: $ms-icon-code-DelveAnalyticsLogo; }
+@mixin ms-Icon--DelveLogo { content: $ms-icon-code-DelveLogo; }
+@mixin ms-Icon--DelveLogoFill { content: $ms-icon-code-DelveLogoFill; }
+@mixin ms-Icon--DelveLogoInverse { content: $ms-icon-code-DelveLogoInverse; }
+@mixin ms-Icon--DependencyAdd { content: $ms-icon-code-DependencyAdd; }
+@mixin ms-Icon--DependencyRemove { content: $ms-icon-code-DependencyRemove; }
+@mixin ms-Icon--Deploy { content: $ms-icon-code-Deploy; }
+@mixin ms-Icon--Descending { content: $ms-icon-code-Descending; }
+@mixin ms-Icon--Design { content: $ms-icon-code-Design; }
+@mixin ms-Icon--DesktopScreenshot { content: $ms-icon-code-DesktopScreenshot; }
+@mixin ms-Icon--DeveloperTools { content: $ms-icon-code-DeveloperTools; }
+@mixin ms-Icon--DeviceBug { content: $ms-icon-code-DeviceBug; }
+@mixin ms-Icon--DeviceOff { content: $ms-icon-code-DeviceOff; }
+@mixin ms-Icon--DeviceRun { content: $ms-icon-code-DeviceRun; }
+@mixin ms-Icon--Devices2 { content: $ms-icon-code-Devices2; }
+@mixin ms-Icon--Devices3 { content: $ms-icon-code-Devices3; }
+@mixin ms-Icon--Devices4 { content: $ms-icon-code-Devices4; }
+@mixin ms-Icon--Diagnostic { content: $ms-icon-code-Diagnostic; }
+@mixin ms-Icon--DiagnosticDataBarTooltip { content: $ms-icon-code-DiagnosticDataBarTooltip; }
+@mixin ms-Icon--Dialpad { content: $ms-icon-code-Dialpad; }
+@mixin ms-Icon--Diamond { content: $ms-icon-code-Diamond; }
+@mixin ms-Icon--DiamondSolid { content: $ms-icon-code-DiamondSolid; }
+@mixin ms-Icon--Dictionary { content: $ms-icon-code-Dictionary; }
+@mixin ms-Icon--DictionaryRemove { content: $ms-icon-code-DictionaryRemove; }
+@mixin ms-Icon--DietPlanNotebook { content: $ms-icon-code-DietPlanNotebook; }
+@mixin ms-Icon--DiffInline { content: $ms-icon-code-DiffInline; }
+@mixin ms-Icon--DiffSideBySide { content: $ms-icon-code-DiffSideBySide; }
+@mixin ms-Icon--DisableUpdates { content: $ms-icon-code-DisableUpdates; }
+@mixin ms-Icon--DisconnectVirtualMachine { content: $ms-icon-code-DisconnectVirtualMachine; }
+@mixin ms-Icon--Dislike { content: $ms-icon-code-Dislike; }
+@mixin ms-Icon--DislikeSolid { content: $ms-icon-code-DislikeSolid; }
+@mixin ms-Icon--DistributeDown { content: $ms-icon-code-DistributeDown; }
+@mixin ms-Icon--DockLeft { content: $ms-icon-code-DockLeft; }
+@mixin ms-Icon--DockLeftMirrored { content: $ms-icon-code-DockLeftMirrored; }
+@mixin ms-Icon--DockRight { content: $ms-icon-code-DockRight; }
+@mixin ms-Icon--DocLibrary { content: $ms-icon-code-DocLibrary; }
+@mixin ms-Icon--DocsLogoInverse { content: $ms-icon-code-DocsLogoInverse; }
+@mixin ms-Icon--Document { content: $ms-icon-code-Document; }
+@mixin ms-Icon--DocumentApproval { content: $ms-icon-code-DocumentApproval; }
+@mixin ms-Icon--Documentation { content: $ms-icon-code-Documentation; }
+@mixin ms-Icon--DocumentManagement { content: $ms-icon-code-DocumentManagement; }
+@mixin ms-Icon--DocumentReply { content: $ms-icon-code-DocumentReply; }
+@mixin ms-Icon--DocumentSearch { content: $ms-icon-code-DocumentSearch; }
+@mixin ms-Icon--DocumentSet { content: $ms-icon-code-DocumentSet; }
+@mixin ms-Icon--DOM { content: $ms-icon-code-DOM; }
+@mixin ms-Icon--DonutChart { content: $ms-icon-code-DonutChart; }
+@mixin ms-Icon--Door { content: $ms-icon-code-Door; }
+@mixin ms-Icon--DoubleBookmark { content: $ms-icon-code-DoubleBookmark; }
+@mixin ms-Icon--DoubleChevronDown { content: $ms-icon-code-DoubleChevronDown; }
+@mixin ms-Icon--DoubleChevronDown12 { content: $ms-icon-code-DoubleChevronDown12; }
+@mixin ms-Icon--DoubleChevronDown8 { content: $ms-icon-code-DoubleChevronDown8; }
+@mixin ms-Icon--DoubleChevronLeft { content: $ms-icon-code-DoubleChevronLeft; }
+@mixin ms-Icon--DoubleChevronLeft12 { content: $ms-icon-code-DoubleChevronLeft12; }
+@mixin ms-Icon--DoubleChevronLeft8 { content: $ms-icon-code-DoubleChevronLeft8; }
+@mixin ms-Icon--DoubleChevronLeftMed { content: $ms-icon-code-DoubleChevronLeftMed; }
+@mixin ms-Icon--DoubleChevronLeftMedMirrored { content: $ms-icon-code-DoubleChevronLeftMedMirrored; }
+@mixin ms-Icon--DoubleChevronRight { content: $ms-icon-code-DoubleChevronRight; }
+@mixin ms-Icon--DoubleChevronRight12 { content: $ms-icon-code-DoubleChevronRight12; }
+@mixin ms-Icon--DoubleChevronRight8 { content: $ms-icon-code-DoubleChevronRight8; }
+@mixin ms-Icon--DoubleChevronUp { content: $ms-icon-code-DoubleChevronUp; }
+@mixin ms-Icon--DoubleChevronUp12 { content: $ms-icon-code-DoubleChevronUp12; }
+@mixin ms-Icon--DoubleChevronUp8 { content: $ms-icon-code-DoubleChevronUp8; }
+@mixin ms-Icon--DoubleColumn { content: $ms-icon-code-DoubleColumn; }
+@mixin ms-Icon--DoubleColumnEdit { content: $ms-icon-code-DoubleColumnEdit; }
+@mixin ms-Icon--DoubleDownArrow { content: $ms-icon-code-DoubleDownArrow; }
+@mixin ms-Icon--Down { content: $ms-icon-code-Down; }
+@mixin ms-Icon--Download { content: $ms-icon-code-Download; }
+@mixin ms-Icon--DownloadDocument { content: $ms-icon-code-DownloadDocument; }
+@mixin ms-Icon--DragObject { content: $ms-icon-code-DragObject; }
+@mixin ms-Icon--DrillDown { content: $ms-icon-code-DrillDown; }
+@mixin ms-Icon--DrillDownSolid { content: $ms-icon-code-DrillDownSolid; }
+@mixin ms-Icon--DrillExpand { content: $ms-icon-code-DrillExpand; }
+@mixin ms-Icon--DrillShow { content: $ms-icon-code-DrillShow; }
+@mixin ms-Icon--DrillThrough { content: $ms-icon-code-DrillThrough; }
+@mixin ms-Icon--DriverOff { content: $ms-icon-code-DriverOff; }
+@mixin ms-Icon--DRM { content: $ms-icon-code-DRM; }
+@mixin ms-Icon--Drop { content: $ms-icon-code-Drop; }
+@mixin ms-Icon--Dropdown { content: $ms-icon-code-Dropdown; }
+@mixin ms-Icon--DropShape { content: $ms-icon-code-DropShape; }
+@mixin ms-Icon--DropShapeSolid { content: $ms-icon-code-DropShapeSolid; }
+@mixin ms-Icon--DuplicateRow { content: $ms-icon-code-DuplicateRow; }
+@mixin ms-Icon--Duststorm { content: $ms-icon-code-Duststorm; }
+@mixin ms-Icon--Dynamics365Logo { content: $ms-icon-code-Dynamics365Logo; }
+@mixin ms-Icon--DynamicSMBLogo { content: $ms-icon-code-DynamicSMBLogo; }
+@mixin ms-Icon--EaseOfAccess { content: $ms-icon-code-EaseOfAccess; }
+@mixin ms-Icon--EatDrink { content: $ms-icon-code-EatDrink; }
+@mixin ms-Icon--EdgeOldLogo { content: $ms-icon-code-EdgeOldLogo; }
+@mixin ms-Icon--eDiscovery { content: $ms-icon-code-eDiscovery; }
+@mixin ms-Icon--Edit { content: $ms-icon-code-Edit; }
+@mixin ms-Icon--EditContact { content: $ms-icon-code-EditContact; }
+@mixin ms-Icon--EditCreate { content: $ms-icon-code-EditCreate; }
+@mixin ms-Icon--EditMail { content: $ms-icon-code-EditMail; }
+@mixin ms-Icon--EditMirrored { content: $ms-icon-code-EditMirrored; }
+@mixin ms-Icon--EditNote { content: $ms-icon-code-EditNote; }
+@mixin ms-Icon--EditPhoto { content: $ms-icon-code-EditPhoto; }
+@mixin ms-Icon--EditSolid12 { content: $ms-icon-code-EditSolid12; }
+@mixin ms-Icon--EditSolidMirrored12 { content: $ms-icon-code-EditSolidMirrored12; }
+@mixin ms-Icon--EditStyle { content: $ms-icon-code-EditStyle; }
+@mixin ms-Icon--Education { content: $ms-icon-code-Education; }
+@mixin ms-Icon--Ellipse { content: $ms-icon-code-Ellipse; }
+@mixin ms-Icon--Embed { content: $ms-icon-code-Embed; }
+@mixin ms-Icon--EMI { content: $ms-icon-code-EMI; }
+@mixin ms-Icon--Emoji { content: $ms-icon-code-Emoji; }
+@mixin ms-Icon--Emoji2 { content: $ms-icon-code-Emoji2; }
+@mixin ms-Icon--EmojiDisappointed { content: $ms-icon-code-EmojiDisappointed; }
+@mixin ms-Icon--EmojiNeutral { content: $ms-icon-code-EmojiNeutral; }
+@mixin ms-Icon--EmojiTabSymbols { content: $ms-icon-code-EmojiTabSymbols; }
+@mixin ms-Icon--EmptyRecycleBin { content: $ms-icon-code-EmptyRecycleBin; }
+@mixin ms-Icon--Encryption { content: $ms-icon-code-Encryption; }
+@mixin ms-Icon--EndPointSolid { content: $ms-icon-code-EndPointSolid; }
+@mixin ms-Icon--EngineeringGroup { content: $ms-icon-code-EngineeringGroup; }
+@mixin ms-Icon--EntitlementPolicy { content: $ms-icon-code-EntitlementPolicy; }
+@mixin ms-Icon--EntitlementRedemption { content: $ms-icon-code-EntitlementRedemption; }
+@mixin ms-Icon--EntryDecline { content: $ms-icon-code-EntryDecline; }
+@mixin ms-Icon--EntryView { content: $ms-icon-code-EntryView; }
+@mixin ms-Icon--Equalizer { content: $ms-icon-code-Equalizer; }
+@mixin ms-Icon--EraseTool { content: $ms-icon-code-EraseTool; }
+@mixin ms-Icon--Error { content: $ms-icon-code-Error; }
+@mixin ms-Icon--ErrorBadge { content: $ms-icon-code-ErrorBadge; }
+@mixin ms-Icon--Event { content: $ms-icon-code-Event; }
+@mixin ms-Icon--Event12 { content: $ms-icon-code-Event12; }
+@mixin ms-Icon--EventAccepted { content: $ms-icon-code-EventAccepted; }
+@mixin ms-Icon--EventDate { content: $ms-icon-code-EventDate; }
+@mixin ms-Icon--EventDateMissed12 { content: $ms-icon-code-EventDateMissed12; }
+@mixin ms-Icon--EventDeclined { content: $ms-icon-code-EventDeclined; }
+@mixin ms-Icon--EventInfo { content: $ms-icon-code-EventInfo; }
+@mixin ms-Icon--EventTentative { content: $ms-icon-code-EventTentative; }
+@mixin ms-Icon--EventTentativeMirrored { content: $ms-icon-code-EventTentativeMirrored; }
+@mixin ms-Icon--EventToDoLogo { content: $ms-icon-code-EventToDoLogo; }
+@mixin ms-Icon--ExcelDocument { content: $ms-icon-code-ExcelDocument; }
+@mixin ms-Icon--ExcelLogo { content: $ms-icon-code-ExcelLogo; }
+@mixin ms-Icon--ExcelLogo16 { content: $ms-icon-code-ExcelLogo16; }
+@mixin ms-Icon--ExcelLogoFill { content: $ms-icon-code-ExcelLogoFill; }
+@mixin ms-Icon--ExcelLogoFill16 { content: $ms-icon-code-ExcelLogoFill16; }
+@mixin ms-Icon--ExcelLogoInverse { content: $ms-icon-code-ExcelLogoInverse; }
+@mixin ms-Icon--ExcelLogoInverse16 { content: $ms-icon-code-ExcelLogoInverse16; }
+@mixin ms-Icon--ExchangeLogo { content: $ms-icon-code-ExchangeLogo; }
+@mixin ms-Icon--ExchangeLogoFill { content: $ms-icon-code-ExchangeLogoFill; }
+@mixin ms-Icon--ExchangeLogoInverse { content: $ms-icon-code-ExchangeLogoInverse; }
+@mixin ms-Icon--ExerciseTracker { content: $ms-icon-code-ExerciseTracker; }
+@mixin ms-Icon--ExpandMenu { content: $ms-icon-code-ExpandMenu; }
+@mixin ms-Icon--ExploreContent { content: $ms-icon-code-ExploreContent; }
+@mixin ms-Icon--ExploreContentSingle { content: $ms-icon-code-ExploreContentSingle; }
+@mixin ms-Icon--ExploreData { content: $ms-icon-code-ExploreData; }
+@mixin ms-Icon--Export { content: $ms-icon-code-Export; }
+@mixin ms-Icon--ExportMirrored { content: $ms-icon-code-ExportMirrored; }
+@mixin ms-Icon--ExternalBuild { content: $ms-icon-code-ExternalBuild; }
+@mixin ms-Icon--ExternalTFVC { content: $ms-icon-code-ExternalTFVC; }
+@mixin ms-Icon--ExternalXAML { content: $ms-icon-code-ExternalXAML; }
+@mixin ms-Icon--Eyedropper { content: $ms-icon-code-Eyedropper; }
+@mixin ms-Icon--EyeShadow { content: $ms-icon-code-EyeShadow; }
+@mixin ms-Icon--F12DevTools { content: $ms-icon-code-F12DevTools; }
+@mixin ms-Icon--FabricAssetLibrary { content: $ms-icon-code-FabricAssetLibrary; }
+@mixin ms-Icon--FabricDataConnectionLibrary { content: $ms-icon-code-FabricDataConnectionLibrary; }
+@mixin ms-Icon--FabricDocLibrary { content: $ms-icon-code-FabricDocLibrary; }
+@mixin ms-Icon--FabricFolder { content: $ms-icon-code-FabricFolder; }
+@mixin ms-Icon--FabricFolderConfirm { content: $ms-icon-code-FabricFolderConfirm; }
+@mixin ms-Icon--FabricFolderFill { content: $ms-icon-code-FabricFolderFill; }
+@mixin ms-Icon--FabricFolderSearch { content: $ms-icon-code-FabricFolderSearch; }
+@mixin ms-Icon--FabricFolderUpload { content: $ms-icon-code-FabricFolderUpload; }
+@mixin ms-Icon--FabricFormLibrary { content: $ms-icon-code-FabricFormLibrary; }
+@mixin ms-Icon--FabricFormLibraryMirrored { content: $ms-icon-code-FabricFormLibraryMirrored; }
+@mixin ms-Icon--FabricMovetoFolder { content: $ms-icon-code-FabricMovetoFolder; }
+@mixin ms-Icon--FabricNetworkFolder { content: $ms-icon-code-FabricNetworkFolder; }
+@mixin ms-Icon--FabricNewFolder { content: $ms-icon-code-FabricNewFolder; }
+@mixin ms-Icon--FabricOpenFolderHorizontal { content: $ms-icon-code-FabricOpenFolderHorizontal; }
+@mixin ms-Icon--FabricPictureLibrary { content: $ms-icon-code-FabricPictureLibrary; }
+@mixin ms-Icon--FabricPublicFolder { content: $ms-icon-code-FabricPublicFolder; }
+@mixin ms-Icon--FabricReportLibrary { content: $ms-icon-code-FabricReportLibrary; }
+@mixin ms-Icon--FabricReportLibraryMirrored { content: $ms-icon-code-FabricReportLibraryMirrored; }
+@mixin ms-Icon--FabricSyncFolder { content: $ms-icon-code-FabricSyncFolder; }
+@mixin ms-Icon--FabricTextHighlight { content: $ms-icon-code-FabricTextHighlight; }
+@mixin ms-Icon--FabricTextHighlightComposite { content: $ms-icon-code-FabricTextHighlightComposite; }
+@mixin ms-Icon--FabricUnsyncFolder { content: $ms-icon-code-FabricUnsyncFolder; }
+@mixin ms-Icon--FabricUserFolder { content: $ms-icon-code-FabricUserFolder; }
+@mixin ms-Icon--Family { content: $ms-icon-code-Family; }
+@mixin ms-Icon--FangBody { content: $ms-icon-code-FangBody; }
+@mixin ms-Icon--FastForward { content: $ms-icon-code-FastForward; }
+@mixin ms-Icon--FastMode { content: $ms-icon-code-FastMode; }
+@mixin ms-Icon--Favicon { content: $ms-icon-code-Favicon; }
+@mixin ms-Icon--FavoriteList { content: $ms-icon-code-FavoriteList; }
+@mixin ms-Icon--FavoriteStar { content: $ms-icon-code-FavoriteStar; }
+@mixin ms-Icon--FavoriteStarFill { content: $ms-icon-code-FavoriteStarFill; }
+@mixin ms-Icon--Fax { content: $ms-icon-code-Fax; }
+@mixin ms-Icon--Feedback { content: $ms-icon-code-Feedback; }
+@mixin ms-Icon--FeedbackRequestMirroredSolid { content: $ms-icon-code-FeedbackRequestMirroredSolid; }
+@mixin ms-Icon--FeedbackRequestSolid { content: $ms-icon-code-FeedbackRequestSolid; }
+@mixin ms-Icon--FeedbackResponseSolid { content: $ms-icon-code-FeedbackResponseSolid; }
+@mixin ms-Icon--Ferry { content: $ms-icon-code-Ferry; }
+@mixin ms-Icon--FerrySolid { content: $ms-icon-code-FerrySolid; }
+@mixin ms-Icon--FieldChanged { content: $ms-icon-code-FieldChanged; }
+@mixin ms-Icon--FieldEmpty { content: $ms-icon-code-FieldEmpty; }
+@mixin ms-Icon--FieldFilled { content: $ms-icon-code-FieldFilled; }
+@mixin ms-Icon--FieldNotChanged { content: $ms-icon-code-FieldNotChanged; }
+@mixin ms-Icon--FieldReadOnly { content: $ms-icon-code-FieldReadOnly; }
+@mixin ms-Icon--FieldRequired { content: $ms-icon-code-FieldRequired; }
+@mixin ms-Icon--FileASPX { content: $ms-icon-code-FileASPX; }
+@mixin ms-Icon--FileBug { content: $ms-icon-code-FileBug; }
+@mixin ms-Icon--FileCode { content: $ms-icon-code-FileCode; }
+@mixin ms-Icon--FileComment { content: $ms-icon-code-FileComment; }
+@mixin ms-Icon--FileCSS { content: $ms-icon-code-FileCSS; }
+@mixin ms-Icon--FileHTML { content: $ms-icon-code-FileHTML; }
+@mixin ms-Icon--FileImage { content: $ms-icon-code-FileImage; }
+@mixin ms-Icon--FileJAVA { content: $ms-icon-code-FileJAVA; }
+@mixin ms-Icon--FileLess { content: $ms-icon-code-FileLess; }
+@mixin ms-Icon--FileOff { content: $ms-icon-code-FileOff; }
+@mixin ms-Icon--FilePDB { content: $ms-icon-code-FilePDB; }
+@mixin ms-Icon--FileRequest { content: $ms-icon-code-FileRequest; }
+@mixin ms-Icon--FileSass { content: $ms-icon-code-FileSass; }
+@mixin ms-Icon--FileSQL { content: $ms-icon-code-FileSQL; }
+@mixin ms-Icon--FileSymlink { content: $ms-icon-code-FileSymlink; }
+@mixin ms-Icon--FileTemplate { content: $ms-icon-code-FileTemplate; }
+@mixin ms-Icon--FileTypeSolution { content: $ms-icon-code-FileTypeSolution; }
+@mixin ms-Icon--FileYML { content: $ms-icon-code-FileYML; }
+@mixin ms-Icon--Filter { content: $ms-icon-code-Filter; }
+@mixin ms-Icon--FilterAscending { content: $ms-icon-code-FilterAscending; }
+@mixin ms-Icon--FilterDescending { content: $ms-icon-code-FilterDescending; }
+@mixin ms-Icon--Filters { content: $ms-icon-code-Filters; }
+@mixin ms-Icon--FilterSettings { content: $ms-icon-code-FilterSettings; }
+@mixin ms-Icon--FilterSolid { content: $ms-icon-code-FilterSolid; }
+@mixin ms-Icon--FiltersSolid { content: $ms-icon-code-FiltersSolid; }
+@mixin ms-Icon--Financial { content: $ms-icon-code-Financial; }
+@mixin ms-Icon--FinancialMirroredSolid { content: $ms-icon-code-FinancialMirroredSolid; }
+@mixin ms-Icon--FinancialSolid { content: $ms-icon-code-FinancialSolid; }
+@mixin ms-Icon--Fingerprint { content: $ms-icon-code-Fingerprint; }
+@mixin ms-Icon--FitPage { content: $ms-icon-code-FitPage; }
+@mixin ms-Icon--FitWidth { content: $ms-icon-code-FitWidth; }
+@mixin ms-Icon--FiveTileGrid { content: $ms-icon-code-FiveTileGrid; }
+@mixin ms-Icon--FixedAssetManagement { content: $ms-icon-code-FixedAssetManagement; }
+@mixin ms-Icon--FixedColumnWidth { content: $ms-icon-code-FixedColumnWidth; }
+@mixin ms-Icon--Flag { content: $ms-icon-code-Flag; }
+@mixin ms-Icon--FlameSolid { content: $ms-icon-code-FlameSolid; }
+@mixin ms-Icon--FlashAuto { content: $ms-icon-code-FlashAuto; }
+@mixin ms-Icon--Flashlight { content: $ms-icon-code-Flashlight; }
+@mixin ms-Icon--FlashOff { content: $ms-icon-code-FlashOff; }
+@mixin ms-Icon--FlickDown { content: $ms-icon-code-FlickDown; }
+@mixin ms-Icon--FlickLeft { content: $ms-icon-code-FlickLeft; }
+@mixin ms-Icon--FlickRight { content: $ms-icon-code-FlickRight; }
+@mixin ms-Icon--FlickUp { content: $ms-icon-code-FlickUp; }
+@mixin ms-Icon--Flow { content: $ms-icon-code-Flow; }
+@mixin ms-Icon--FlowChart { content: $ms-icon-code-FlowChart; }
+@mixin ms-Icon--Flower { content: $ms-icon-code-Flower; }
+@mixin ms-Icon--FocalPoint { content: $ms-icon-code-FocalPoint; }
+@mixin ms-Icon--Focus { content: $ms-icon-code-Focus; }
+@mixin ms-Icon--FocusView { content: $ms-icon-code-FocusView; }
+@mixin ms-Icon--Fog { content: $ms-icon-code-Fog; }
+@mixin ms-Icon--Folder { content: $ms-icon-code-Folder; }
+@mixin ms-Icon--FolderFill { content: $ms-icon-code-FolderFill; }
+@mixin ms-Icon--FolderHorizontal { content: $ms-icon-code-FolderHorizontal; }
+@mixin ms-Icon--FolderList { content: $ms-icon-code-FolderList; }
+@mixin ms-Icon--FolderListMirrored { content: $ms-icon-code-FolderListMirrored; }
+@mixin ms-Icon--FolderOpen { content: $ms-icon-code-FolderOpen; }
+@mixin ms-Icon--FolderQuery { content: $ms-icon-code-FolderQuery; }
+@mixin ms-Icon--FolderSearch { content: $ms-icon-code-FolderSearch; }
+@mixin ms-Icon--FollowUser { content: $ms-icon-code-FollowUser; }
+@mixin ms-Icon--Font { content: $ms-icon-code-Font; }
+@mixin ms-Icon--FontColor { content: $ms-icon-code-FontColor; }
+@mixin ms-Icon--FontColorA { content: $ms-icon-code-FontColorA; }
+@mixin ms-Icon--FontColorSwatch { content: $ms-icon-code-FontColorSwatch; }
+@mixin ms-Icon--FontDecrease { content: $ms-icon-code-FontDecrease; }
+@mixin ms-Icon--FontIncrease { content: $ms-icon-code-FontIncrease; }
+@mixin ms-Icon--FontSize { content: $ms-icon-code-FontSize; }
+@mixin ms-Icon--FontSize2 { content: $ms-icon-code-FontSize2; }
+@mixin ms-Icon--Footer { content: $ms-icon-code-Footer; }
+@mixin ms-Icon--FormatPainter { content: $ms-icon-code-FormatPainter; }
+@mixin ms-Icon--FormLibrary { content: $ms-icon-code-FormLibrary; }
+@mixin ms-Icon--FormLibraryMirrored { content: $ms-icon-code-FormLibraryMirrored; }
+@mixin ms-Icon--Forum { content: $ms-icon-code-Forum; }
+@mixin ms-Icon--Forward { content: $ms-icon-code-Forward; }
+@mixin ms-Icon--ForwardEvent { content: $ms-icon-code-ForwardEvent; }
+@mixin ms-Icon--Freezing { content: $ms-icon-code-Freezing; }
+@mixin ms-Icon--Frigid { content: $ms-icon-code-Frigid; }
+@mixin ms-Icon--FrontCamera { content: $ms-icon-code-FrontCamera; }
+@mixin ms-Icon--FSharp { content: $ms-icon-code-FSharp; }
+@mixin ms-Icon--FSharpLanguage { content: $ms-icon-code-FSharpLanguage; }
+@mixin ms-Icon--FullCircleMask { content: $ms-icon-code-FullCircleMask; }
+@mixin ms-Icon--FullHistory { content: $ms-icon-code-FullHistory; }
+@mixin ms-Icon--FullScreen { content: $ms-icon-code-FullScreen; }
+@mixin ms-Icon--FullView { content: $ms-icon-code-FullView; }
+@mixin ms-Icon--FullWidth { content: $ms-icon-code-FullWidth; }
+@mixin ms-Icon--FullWidthEdit { content: $ms-icon-code-FullWidthEdit; }
+@mixin ms-Icon--FunctionalManagerDashboard { content: $ms-icon-code-FunctionalManagerDashboard; }
+@mixin ms-Icon--FunnelChart { content: $ms-icon-code-FunnelChart; }
+@mixin ms-Icon--GallatinLogo { content: $ms-icon-code-GallatinLogo; }
+@mixin ms-Icon--Game { content: $ms-icon-code-Game; }
+@mixin ms-Icon--Generate { content: $ms-icon-code-Generate; }
+@mixin ms-Icon--GenericScan { content: $ms-icon-code-GenericScan; }
+@mixin ms-Icon--GenericScanFilled { content: $ms-icon-code-GenericScanFilled; }
+@mixin ms-Icon--GIF { content: $ms-icon-code-GIF; }
+@mixin ms-Icon--Giftbox { content: $ms-icon-code-Giftbox; }
+@mixin ms-Icon--GiftboxOpen { content: $ms-icon-code-GiftboxOpen; }
+@mixin ms-Icon--GiftBoxSolid { content: $ms-icon-code-GiftBoxSolid; }
+@mixin ms-Icon--GiftCard { content: $ms-icon-code-GiftCard; }
+@mixin ms-Icon--GitGraph { content: $ms-icon-code-GitGraph; }
+@mixin ms-Icon--Glasses { content: $ms-icon-code-Glasses; }
+@mixin ms-Icon--Glimmer { content: $ms-icon-code-Glimmer; }
+@mixin ms-Icon--GlobalNavButton { content: $ms-icon-code-GlobalNavButton; }
+@mixin ms-Icon--GlobalNavButtonActive { content: $ms-icon-code-GlobalNavButtonActive; }
+@mixin ms-Icon--Globe { content: $ms-icon-code-Globe; }
+@mixin ms-Icon--Globe2 { content: $ms-icon-code-Globe2; }
+@mixin ms-Icon--GlobeFavorite { content: $ms-icon-code-GlobeFavorite; }
+@mixin ms-Icon--Go { content: $ms-icon-code-Go; }
+@mixin ms-Icon--Golf { content: $ms-icon-code-Golf; }
+@mixin ms-Icon--GoMirrored { content: $ms-icon-code-GoMirrored; }
+@mixin ms-Icon--GoToDashboard { content: $ms-icon-code-GoToDashboard; }
+@mixin ms-Icon--GotoToday { content: $ms-icon-code-GotoToday; }
+@mixin ms-Icon--GreetingCard { content: $ms-icon-code-GreetingCard; }
+@mixin ms-Icon--GridViewLarge { content: $ms-icon-code-GridViewLarge; }
+@mixin ms-Icon--GridViewMedium { content: $ms-icon-code-GridViewMedium; }
+@mixin ms-Icon--GridViewSmall { content: $ms-icon-code-GridViewSmall; }
+@mixin ms-Icon--GripperBarHorizontal { content: $ms-icon-code-GripperBarHorizontal; }
+@mixin ms-Icon--GripperBarVertical { content: $ms-icon-code-GripperBarVertical; }
+@mixin ms-Icon--GripperDotsVertical { content: $ms-icon-code-GripperDotsVertical; }
+@mixin ms-Icon--GripperTool { content: $ms-icon-code-GripperTool; }
+@mixin ms-Icon--Group { content: $ms-icon-code-Group; }
+@mixin ms-Icon--GroupedAscending { content: $ms-icon-code-GroupedAscending; }
+@mixin ms-Icon--GroupedDescending { content: $ms-icon-code-GroupedDescending; }
+@mixin ms-Icon--GroupedList { content: $ms-icon-code-GroupedList; }
+@mixin ms-Icon--GroupList { content: $ms-icon-code-GroupList; }
+@mixin ms-Icon--GroupObject { content: $ms-icon-code-GroupObject; }
+@mixin ms-Icon--GUID { content: $ms-icon-code-GUID; }
+@mixin ms-Icon--Guitar { content: $ms-icon-code-Guitar; }
+@mixin ms-Icon--HailDay { content: $ms-icon-code-HailDay; }
+@mixin ms-Icon--HailNight { content: $ms-icon-code-HailNight; }
+@mixin ms-Icon--HalfAlpha { content: $ms-icon-code-HalfAlpha; }
+@mixin ms-Icon--HalfCircle { content: $ms-icon-code-HalfCircle; }
+@mixin ms-Icon--HandsFree { content: $ms-icon-code-HandsFree; }
+@mixin ms-Icon--Handwriting { content: $ms-icon-code-Handwriting; }
+@mixin ms-Icon--HardDrive { content: $ms-icon-code-HardDrive; }
+@mixin ms-Icon--HardDriveGroup { content: $ms-icon-code-HardDriveGroup; }
+@mixin ms-Icon--HardDriveLock { content: $ms-icon-code-HardDriveLock; }
+@mixin ms-Icon--HardDriveUnlock { content: $ms-icon-code-HardDriveUnlock; }
+@mixin ms-Icon--Header { content: $ms-icon-code-Header; }
+@mixin ms-Icon--Header1 { content: $ms-icon-code-Header1; }
+@mixin ms-Icon--Header2 { content: $ms-icon-code-Header2; }
+@mixin ms-Icon--Header3 { content: $ms-icon-code-Header3; }
+@mixin ms-Icon--Header4 { content: $ms-icon-code-Header4; }
+@mixin ms-Icon--Headset { content: $ms-icon-code-Headset; }
+@mixin ms-Icon--HeadsetSolid { content: $ms-icon-code-HeadsetSolid; }
+@mixin ms-Icon--Health { content: $ms-icon-code-Health; }
+@mixin ms-Icon--HealthRefresh { content: $ms-icon-code-HealthRefresh; }
+@mixin ms-Icon--HealthSolid { content: $ms-icon-code-HealthSolid; }
+@mixin ms-Icon--Heart { content: $ms-icon-code-Heart; }
+@mixin ms-Icon--HeartBroken { content: $ms-icon-code-HeartBroken; }
+@mixin ms-Icon--HeartFill { content: $ms-icon-code-HeartFill; }
+@mixin ms-Icon--Help { content: $ms-icon-code-Help; }
+@mixin ms-Icon--HelpMirrored { content: $ms-icon-code-HelpMirrored; }
+@mixin ms-Icon--HexaditeInvestigation { content: $ms-icon-code-HexaditeInvestigation; }
+@mixin ms-Icon--HexaditeInvestigationCancel { content: $ms-icon-code-HexaditeInvestigationCancel; }
+@mixin ms-Icon--HexaditeInvestigationSemiAuto { content: $ms-icon-code-HexaditeInvestigationSemiAuto; }
+@mixin ms-Icon--Hexagon { content: $ms-icon-code-Hexagon; }
+@mixin ms-Icon--Hide { content: $ms-icon-code-Hide; }
+@mixin ms-Icon--Hide2 { content: $ms-icon-code-Hide2; }
+@mixin ms-Icon--Hide3 { content: $ms-icon-code-Hide3; }
+@mixin ms-Icon--Highlight { content: $ms-icon-code-Highlight; }
+@mixin ms-Icon--HighlightMappedShapes { content: $ms-icon-code-HighlightMappedShapes; }
+@mixin ms-Icon--HintText { content: $ms-icon-code-HintText; }
+@mixin ms-Icon--HistoricalWeather { content: $ms-icon-code-HistoricalWeather; }
+@mixin ms-Icon--History { content: $ms-icon-code-History; }
+@mixin ms-Icon--Home { content: $ms-icon-code-Home; }
+@mixin ms-Icon--HomeDropdown { content: $ms-icon-code-HomeDropdown; }
+@mixin ms-Icon--HomeGroup { content: $ms-icon-code-HomeGroup; }
+@mixin ms-Icon--HomeSolid { content: $ms-icon-code-HomeSolid; }
+@mixin ms-Icon--HomeVerify { content: $ms-icon-code-HomeVerify; }
+@mixin ms-Icon--HorizontalDistributeCenter { content: $ms-icon-code-HorizontalDistributeCenter; }
+@mixin ms-Icon--HorizontalTabKey { content: $ms-icon-code-HorizontalTabKey; }
+@mixin ms-Icon--Hospital { content: $ms-icon-code-Hospital; }
+@mixin ms-Icon--Hotel { content: $ms-icon-code-Hotel; }
+@mixin ms-Icon--HourGlass { content: $ms-icon-code-HourGlass; }
+@mixin ms-Icon--IconSetsFlag { content: $ms-icon-code-IconSetsFlag; }
+@mixin ms-Icon--IDBadge { content: $ms-icon-code-IDBadge; }
+@mixin ms-Icon--IgnoreConversation { content: $ms-icon-code-IgnoreConversation; }
+@mixin ms-Icon--ImageCrosshair { content: $ms-icon-code-ImageCrosshair; }
+@mixin ms-Icon--ImageDiff { content: $ms-icon-code-ImageDiff; }
+@mixin ms-Icon--ImageInAR { content: $ms-icon-code-ImageInAR; }
+@mixin ms-Icon--ImagePixel { content: $ms-icon-code-ImagePixel; }
+@mixin ms-Icon--ImageSearch { content: $ms-icon-code-ImageSearch; }
+@mixin ms-Icon--Import { content: $ms-icon-code-Import; }
+@mixin ms-Icon--ImportAllMirrored { content: $ms-icon-code-ImportAllMirrored; }
+@mixin ms-Icon--Important { content: $ms-icon-code-Important; }
+@mixin ms-Icon--ImportMirrored { content: $ms-icon-code-ImportMirrored; }
+@mixin ms-Icon--Inbox { content: $ms-icon-code-Inbox; }
+@mixin ms-Icon--InboxCheck { content: $ms-icon-code-InboxCheck; }
+@mixin ms-Icon--IncidentTriangle { content: $ms-icon-code-IncidentTriangle; }
+@mixin ms-Icon--IncomingCall { content: $ms-icon-code-IncomingCall; }
+@mixin ms-Icon--IncreaseIndent { content: $ms-icon-code-IncreaseIndent; }
+@mixin ms-Icon--IncreaseIndentArrow { content: $ms-icon-code-IncreaseIndentArrow; }
+@mixin ms-Icon--IncreaseIndentArrowMirrored { content: $ms-icon-code-IncreaseIndentArrowMirrored; }
+@mixin ms-Icon--IncreaseIndentHanging { content: $ms-icon-code-IncreaseIndentHanging; }
+@mixin ms-Icon--IncreaseIndentHangingMirrored { content: $ms-icon-code-IncreaseIndentHangingMirrored; }
+@mixin ms-Icon--IncreaseIndentLegacy { content: $ms-icon-code-IncreaseIndentLegacy; }
+@mixin ms-Icon--IncreaseIndentMirrored { content: $ms-icon-code-IncreaseIndentMirrored; }
+@mixin ms-Icon--IncreaseIndentText { content: $ms-icon-code-IncreaseIndentText; }
+@mixin ms-Icon--IncreaseIndentTextMirrored { content: $ms-icon-code-IncreaseIndentTextMirrored; }
+@mixin ms-Icon--IndentFirstLine { content: $ms-icon-code-IndentFirstLine; }
+@mixin ms-Icon--Info { content: $ms-icon-code-Info; }
+@mixin ms-Icon--Info2 { content: $ms-icon-code-Info2; }
+@mixin ms-Icon--InformationBarriers { content: $ms-icon-code-InformationBarriers; }
+@mixin ms-Icon--InfoSolid { content: $ms-icon-code-InfoSolid; }
+@mixin ms-Icon--InkingTool { content: $ms-icon-code-InkingTool; }
+@mixin ms-Icon--InputAddress { content: $ms-icon-code-InputAddress; }
+@mixin ms-Icon--Insert { content: $ms-icon-code-Insert; }
+@mixin ms-Icon--InsertColumnsLeft { content: $ms-icon-code-InsertColumnsLeft; }
+@mixin ms-Icon--InsertColumnsRight { content: $ms-icon-code-InsertColumnsRight; }
+@mixin ms-Icon--InsertRowsAbove { content: $ms-icon-code-InsertRowsAbove; }
+@mixin ms-Icon--InsertRowsBelow { content: $ms-icon-code-InsertRowsBelow; }
+@mixin ms-Icon--InsertSignatureLine { content: $ms-icon-code-InsertSignatureLine; }
+@mixin ms-Icon--InsertTextBox { content: $ms-icon-code-InsertTextBox; }
+@mixin ms-Icon--Insights { content: $ms-icon-code-Insights; }
+@mixin ms-Icon--Installation { content: $ms-icon-code-Installation; }
+@mixin ms-Icon--InstallToDrive { content: $ms-icon-code-InstallToDrive; }
+@mixin ms-Icon--InternalInvestigation { content: $ms-icon-code-InternalInvestigation; }
+@mixin ms-Icon--InternetSharing { content: $ms-icon-code-InternetSharing; }
+@mixin ms-Icon--IRMForward { content: $ms-icon-code-IRMForward; }
+@mixin ms-Icon--IRMForwardMirrored { content: $ms-icon-code-IRMForwardMirrored; }
+@mixin ms-Icon--IRMReply { content: $ms-icon-code-IRMReply; }
+@mixin ms-Icon--IRMReplyMirrored { content: $ms-icon-code-IRMReplyMirrored; }
+@mixin ms-Icon--IssueSolid { content: $ms-icon-code-IssueSolid; }
+@mixin ms-Icon--IssueTracking { content: $ms-icon-code-IssueTracking; }
+@mixin ms-Icon--IssueTrackingMirrored { content: $ms-icon-code-IssueTrackingMirrored; }
+@mixin ms-Icon--Italic { content: $ms-icon-code-Italic; }
+@mixin ms-Icon--JavaScriptLanguage { content: $ms-icon-code-JavaScriptLanguage; }
+@mixin ms-Icon--JoinOnlineMeeting { content: $ms-icon-code-JoinOnlineMeeting; }
+@mixin ms-Icon--JS { content: $ms-icon-code-JS; }
+@mixin ms-Icon--KaizalaLogo { content: $ms-icon-code-KaizalaLogo; }
+@mixin ms-Icon--KeyboardClassic { content: $ms-icon-code-KeyboardClassic; }
+@mixin ms-Icon--KeyPhraseExtraction { content: $ms-icon-code-KeyPhraseExtraction; }
+@mixin ms-Icon--KnowledgeArticle { content: $ms-icon-code-KnowledgeArticle; }
+@mixin ms-Icon--Label { content: $ms-icon-code-Label; }
+@mixin ms-Icon--LadybugSolid { content: $ms-icon-code-LadybugSolid; }
+@mixin ms-Icon--Lamp { content: $ms-icon-code-Lamp; }
+@mixin ms-Icon--LandscapeOrientation { content: $ms-icon-code-LandscapeOrientation; }
+@mixin ms-Icon--LaptopSecure { content: $ms-icon-code-LaptopSecure; }
+@mixin ms-Icon--LaptopSelected { content: $ms-icon-code-LaptopSelected; }
+@mixin ms-Icon--LargeGrid { content: $ms-icon-code-LargeGrid; }
+@mixin ms-Icon--LearningTools { content: $ms-icon-code-LearningTools; }
+@mixin ms-Icon--Leave { content: $ms-icon-code-Leave; }
+@mixin ms-Icon--LeaveUser { content: $ms-icon-code-LeaveUser; }
+@mixin ms-Icon--Library { content: $ms-icon-code-Library; }
+@mixin ms-Icon--Lifesaver { content: $ms-icon-code-Lifesaver; }
+@mixin ms-Icon--LifesaverLock { content: $ms-icon-code-LifesaverLock; }
+@mixin ms-Icon--Light { content: $ms-icon-code-Light; }
+@mixin ms-Icon--Lightbulb { content: $ms-icon-code-Lightbulb; }
+@mixin ms-Icon--LightningBolt { content: $ms-icon-code-LightningBolt; }
+@mixin ms-Icon--LightWeight { content: $ms-icon-code-LightWeight; }
+@mixin ms-Icon--Like { content: $ms-icon-code-Like; }
+@mixin ms-Icon--LikeSolid { content: $ms-icon-code-LikeSolid; }
+@mixin ms-Icon--Line { content: $ms-icon-code-Line; }
+@mixin ms-Icon--LineChart { content: $ms-icon-code-LineChart; }
+@mixin ms-Icon--LineSpacing { content: $ms-icon-code-LineSpacing; }
+@mixin ms-Icon--LineStyle { content: $ms-icon-code-LineStyle; }
+@mixin ms-Icon--LineThickness { content: $ms-icon-code-LineThickness; }
+@mixin ms-Icon--Link { content: $ms-icon-code-Link; }
+@mixin ms-Icon--Link12 { content: $ms-icon-code-Link12; }
+@mixin ms-Icon--LinkedDatabase { content: $ms-icon-code-LinkedDatabase; }
+@mixin ms-Icon--LinkedInLogo { content: $ms-icon-code-LinkedInLogo; }
+@mixin ms-Icon--List { content: $ms-icon-code-List; }
+@mixin ms-Icon--ListMirrored { content: $ms-icon-code-ListMirrored; }
+@mixin ms-Icon--LiveSite { content: $ms-icon-code-LiveSite; }
+@mixin ms-Icon--LocaleLanguage { content: $ms-icon-code-LocaleLanguage; }
+@mixin ms-Icon--Location { content: $ms-icon-code-Location; }
+@mixin ms-Icon--LocationCircle { content: $ms-icon-code-LocationCircle; }
+@mixin ms-Icon--LocationDot { content: $ms-icon-code-LocationDot; }
+@mixin ms-Icon--LocationFill { content: $ms-icon-code-LocationFill; }
+@mixin ms-Icon--LocationOutline { content: $ms-icon-code-LocationOutline; }
+@mixin ms-Icon--Lock { content: $ms-icon-code-Lock; }
+@mixin ms-Icon--Lock12 { content: $ms-icon-code-Lock12; }
+@mixin ms-Icon--LockSolid { content: $ms-icon-code-LockSolid; }
+@mixin ms-Icon--LogRemove { content: $ms-icon-code-LogRemove; }
+@mixin ms-Icon--LookupEntities { content: $ms-icon-code-LookupEntities; }
+@mixin ms-Icon--LowerBrightness { content: $ms-icon-code-LowerBrightness; }
+@mixin ms-Icon--LyncLogo { content: $ms-icon-code-LyncLogo; }
+@mixin ms-Icon--M365InvoicingLogo { content: $ms-icon-code-M365InvoicingLogo; }
+@mixin ms-Icon--MachineLearning { content: $ms-icon-code-MachineLearning; }
+@mixin ms-Icon--Mail { content: $ms-icon-code-Mail; }
+@mixin ms-Icon--MailAlert { content: $ms-icon-code-MailAlert; }
+@mixin ms-Icon--MailAttached { content: $ms-icon-code-MailAttached; }
+@mixin ms-Icon--MailCheck { content: $ms-icon-code-MailCheck; }
+@mixin ms-Icon--MailFill { content: $ms-icon-code-MailFill; }
+@mixin ms-Icon--MailForward { content: $ms-icon-code-MailForward; }
+@mixin ms-Icon--MailForwardMirrored { content: $ms-icon-code-MailForwardMirrored; }
+@mixin ms-Icon--MailLowImportance { content: $ms-icon-code-MailLowImportance; }
+@mixin ms-Icon--MailOptions { content: $ms-icon-code-MailOptions; }
+@mixin ms-Icon--MailPause { content: $ms-icon-code-MailPause; }
+@mixin ms-Icon--MailReminder { content: $ms-icon-code-MailReminder; }
+@mixin ms-Icon--MailRepeat { content: $ms-icon-code-MailRepeat; }
+@mixin ms-Icon--MailReply { content: $ms-icon-code-MailReply; }
+@mixin ms-Icon--MailReplyAll { content: $ms-icon-code-MailReplyAll; }
+@mixin ms-Icon--MailReplyAllMirrored { content: $ms-icon-code-MailReplyAllMirrored; }
+@mixin ms-Icon--MailReplyMirrored { content: $ms-icon-code-MailReplyMirrored; }
+@mixin ms-Icon--MailSchedule { content: $ms-icon-code-MailSchedule; }
+@mixin ms-Icon--MailSolid { content: $ms-icon-code-MailSolid; }
+@mixin ms-Icon--MailTentative { content: $ms-icon-code-MailTentative; }
+@mixin ms-Icon--MailTentativeMirrored { content: $ms-icon-code-MailTentativeMirrored; }
+@mixin ms-Icon--MailUndelivered { content: $ms-icon-code-MailUndelivered; }
+@mixin ms-Icon--ManagerSelfService { content: $ms-icon-code-ManagerSelfService; }
+@mixin ms-Icon--Manufacturing { content: $ms-icon-code-Manufacturing; }
+@mixin ms-Icon--MapDirections { content: $ms-icon-code-MapDirections; }
+@mixin ms-Icon--MapLayers { content: $ms-icon-code-MapLayers; }
+@mixin ms-Icon--MapPin { content: $ms-icon-code-MapPin; }
+@mixin ms-Icon--MapPin12 { content: $ms-icon-code-MapPin12; }
+@mixin ms-Icon--MapPinSolid { content: $ms-icon-code-MapPinSolid; }
+@mixin ms-Icon--MarkAsProtected { content: $ms-icon-code-MarkAsProtected; }
+@mixin ms-Icon--MarkDownLanguage { content: $ms-icon-code-MarkDownLanguage; }
+@mixin ms-Icon--Market { content: $ms-icon-code-Market; }
+@mixin ms-Icon--MarketDown { content: $ms-icon-code-MarketDown; }
+@mixin ms-Icon--MasterDatabase { content: $ms-icon-code-MasterDatabase; }
+@mixin ms-Icon--MaximumValue { content: $ms-icon-code-MaximumValue; }
+@mixin ms-Icon--Medal { content: $ms-icon-code-Medal; }
+@mixin ms-Icon--MedalSolid { content: $ms-icon-code-MedalSolid; }
+@mixin ms-Icon--Media { content: $ms-icon-code-Media; }
+@mixin ms-Icon--MediaAdd { content: $ms-icon-code-MediaAdd; }
+@mixin ms-Icon--Medical { content: $ms-icon-code-Medical; }
+@mixin ms-Icon--Megaphone { content: $ms-icon-code-Megaphone; }
+@mixin ms-Icon--MegaphoneSolid { content: $ms-icon-code-MegaphoneSolid; }
+@mixin ms-Icon--Memo { content: $ms-icon-code-Memo; }
+@mixin ms-Icon--Merge { content: $ms-icon-code-Merge; }
+@mixin ms-Icon--MergeDuplicate { content: $ms-icon-code-MergeDuplicate; }
+@mixin ms-Icon--Message { content: $ms-icon-code-Message; }
+@mixin ms-Icon--MessageFill { content: $ms-icon-code-MessageFill; }
+@mixin ms-Icon--MessageFriendRequest { content: $ms-icon-code-MessageFriendRequest; }
+@mixin ms-Icon--MicOff { content: $ms-icon-code-MicOff; }
+@mixin ms-Icon--MicOff2 { content: $ms-icon-code-MicOff2; }
+@mixin ms-Icon--Microphone { content: $ms-icon-code-Microphone; }
+@mixin ms-Icon--MicrosoftFlowLogo { content: $ms-icon-code-MicrosoftFlowLogo; }
+@mixin ms-Icon--MicrosoftStaffhubLogo { content: $ms-icon-code-MicrosoftStaffhubLogo; }
+@mixin ms-Icon--MicrosoftTranslatorLogo { content: $ms-icon-code-MicrosoftTranslatorLogo; }
+@mixin ms-Icon--MicrosoftTranslatorLogoBlue { content: $ms-icon-code-MicrosoftTranslatorLogoBlue; }
+@mixin ms-Icon--MicrosoftTranslatorLogoGreen { content: $ms-icon-code-MicrosoftTranslatorLogoGreen; }
+@mixin ms-Icon--MiniContract { content: $ms-icon-code-MiniContract; }
+@mixin ms-Icon--MiniContractMirrored { content: $ms-icon-code-MiniContractMirrored; }
+@mixin ms-Icon--MiniExpand { content: $ms-icon-code-MiniExpand; }
+@mixin ms-Icon--MiniExpandMirrored { content: $ms-icon-code-MiniExpandMirrored; }
+@mixin ms-Icon--MiniLink { content: $ms-icon-code-MiniLink; }
+@mixin ms-Icon--MinimumValue { content: $ms-icon-code-MinimumValue; }
+@mixin ms-Icon--MobileReport { content: $ms-icon-code-MobileReport; }
+@mixin ms-Icon--MobileSelected { content: $ms-icon-code-MobileSelected; }
+@mixin ms-Icon--ModelingView { content: $ms-icon-code-ModelingView; }
+@mixin ms-Icon--Money { content: $ms-icon-code-Money; }
+@mixin ms-Icon--More { content: $ms-icon-code-More; }
+@mixin ms-Icon--MoreSports { content: $ms-icon-code-MoreSports; }
+@mixin ms-Icon--MoreVertical { content: $ms-icon-code-MoreVertical; }
+@mixin ms-Icon--MountainClimbing { content: $ms-icon-code-MountainClimbing; }
+@mixin ms-Icon--Move { content: $ms-icon-code-Move; }
+@mixin ms-Icon--Movers { content: $ms-icon-code-Movers; }
+@mixin ms-Icon--MoveToFolder { content: $ms-icon-code-MoveToFolder; }
+@mixin ms-Icon--MSNLogo { content: $ms-icon-code-MSNLogo; }
+@mixin ms-Icon--MSNVideos { content: $ms-icon-code-MSNVideos; }
+@mixin ms-Icon--MSNVideosSolid { content: $ms-icon-code-MSNVideosSolid; }
+@mixin ms-Icon--MultiSelect { content: $ms-icon-code-MultiSelect; }
+@mixin ms-Icon--MultiSelectMirrored { content: $ms-icon-code-MultiSelectMirrored; }
+@mixin ms-Icon--MusicInCollection { content: $ms-icon-code-MusicInCollection; }
+@mixin ms-Icon--MusicInCollectionFill { content: $ms-icon-code-MusicInCollectionFill; }
+@mixin ms-Icon--MusicNote { content: $ms-icon-code-MusicNote; }
+@mixin ms-Icon--MuteChat { content: $ms-icon-code-MuteChat; }
+@mixin ms-Icon--MyMoviesTV { content: $ms-icon-code-MyMoviesTV; }
+@mixin ms-Icon--MyNetwork { content: $ms-icon-code-MyNetwork; }
+@mixin ms-Icon--Nav2DMapView { content: $ms-icon-code-Nav2DMapView; }
+@mixin ms-Icon--NavigateBack { content: $ms-icon-code-NavigateBack; }
+@mixin ms-Icon--NavigateBackMirrored { content: $ms-icon-code-NavigateBackMirrored; }
+@mixin ms-Icon--NavigateExternalInline { content: $ms-icon-code-NavigateExternalInline; }
+@mixin ms-Icon--NavigateForward { content: $ms-icon-code-NavigateForward; }
+@mixin ms-Icon--NavigateForwardMirrored { content: $ms-icon-code-NavigateForwardMirrored; }
+@mixin ms-Icon--NavigationFlipper { content: $ms-icon-code-NavigationFlipper; }
+@mixin ms-Icon--NetworkTower { content: $ms-icon-code-NetworkTower; }
+@mixin ms-Icon--NewAnalyticsQuery { content: $ms-icon-code-NewAnalyticsQuery; }
+@mixin ms-Icon--NewFolder { content: $ms-icon-code-NewFolder; }
+@mixin ms-Icon--NewMail { content: $ms-icon-code-NewMail; }
+@mixin ms-Icon--News { content: $ms-icon-code-News; }
+@mixin ms-Icon--NewsSearch { content: $ms-icon-code-NewsSearch; }
+@mixin ms-Icon--NewTeamProject { content: $ms-icon-code-NewTeamProject; }
+@mixin ms-Icon--Next { content: $ms-icon-code-Next; }
+@mixin ms-Icon--NormalWeight { content: $ms-icon-code-NormalWeight; }
+@mixin ms-Icon--NoteForward { content: $ms-icon-code-NoteForward; }
+@mixin ms-Icon--NotePinned { content: $ms-icon-code-NotePinned; }
+@mixin ms-Icon--NoteReply { content: $ms-icon-code-NoteReply; }
+@mixin ms-Icon--NotExecuted { content: $ms-icon-code-NotExecuted; }
+@mixin ms-Icon--NotImpactedSolid { content: $ms-icon-code-NotImpactedSolid; }
+@mixin ms-Icon--NugetLogo { content: $ms-icon-code-NugetLogo; }
+@mixin ms-Icon--NUIFace { content: $ms-icon-code-NUIFace; }
+@mixin ms-Icon--NumberedList { content: $ms-icon-code-NumberedList; }
+@mixin ms-Icon--NumberedListMirrored { content: $ms-icon-code-NumberedListMirrored; }
+@mixin ms-Icon--NumberedListNumber { content: $ms-icon-code-NumberedListNumber; }
+@mixin ms-Icon--NumberedListNumberMirrored { content: $ms-icon-code-NumberedListNumberMirrored; }
+@mixin ms-Icon--NumberedListText { content: $ms-icon-code-NumberedListText; }
+@mixin ms-Icon--NumberedListTextMirrored { content: $ms-icon-code-NumberedListTextMirrored; }
+@mixin ms-Icon--NumberField { content: $ms-icon-code-NumberField; }
+@mixin ms-Icon--NumberSequence { content: $ms-icon-code-NumberSequence; }
+@mixin ms-Icon--NumberSymbol { content: $ms-icon-code-NumberSymbol; }
+@mixin ms-Icon--Octagon { content: $ms-icon-code-Octagon; }
+@mixin ms-Icon--OEM { content: $ms-icon-code-OEM; }
+@mixin ms-Icon--OfficeAddinsLogo { content: $ms-icon-code-OfficeAddinsLogo; }
+@mixin ms-Icon--OfficeAssistantLogo { content: $ms-icon-code-OfficeAssistantLogo; }
+@mixin ms-Icon--OfficeChat { content: $ms-icon-code-OfficeChat; }
+@mixin ms-Icon--OfficeChatSolid { content: $ms-icon-code-OfficeChatSolid; }
+@mixin ms-Icon--OfficeFormsLogo { content: $ms-icon-code-OfficeFormsLogo; }
+@mixin ms-Icon--OfficeFormsLogo16 { content: $ms-icon-code-OfficeFormsLogo16; }
+@mixin ms-Icon--OfficeFormsLogo24 { content: $ms-icon-code-OfficeFormsLogo24; }
+@mixin ms-Icon--OfficeFormsLogoFill { content: $ms-icon-code-OfficeFormsLogoFill; }
+@mixin ms-Icon--OfficeFormsLogoFill16 { content: $ms-icon-code-OfficeFormsLogoFill16; }
+@mixin ms-Icon--OfficeFormsLogoFill24 { content: $ms-icon-code-OfficeFormsLogoFill24; }
+@mixin ms-Icon--OfficeFormsLogoInverse { content: $ms-icon-code-OfficeFormsLogoInverse; }
+@mixin ms-Icon--OfficeFormsLogoInverse16 { content: $ms-icon-code-OfficeFormsLogoInverse16; }
+@mixin ms-Icon--OfficeFormsLogoInverse24 { content: $ms-icon-code-OfficeFormsLogoInverse24; }
+@mixin ms-Icon--OfficeLogo { content: $ms-icon-code-OfficeLogo; }
+@mixin ms-Icon--OfficeStoreLogo { content: $ms-icon-code-OfficeStoreLogo; }
+@mixin ms-Icon--OfficeVideoLogo { content: $ms-icon-code-OfficeVideoLogo; }
+@mixin ms-Icon--OfficeVideoLogoFill { content: $ms-icon-code-OfficeVideoLogoFill; }
+@mixin ms-Icon--OfficeVideoLogoInverse { content: $ms-icon-code-OfficeVideoLogoInverse; }
+@mixin ms-Icon--OfflineOneDriveParachute { content: $ms-icon-code-OfflineOneDriveParachute; }
+@mixin ms-Icon--OfflineOneDriveParachuteDisabled { content: $ms-icon-code-OfflineOneDriveParachuteDisabled; }
+@mixin ms-Icon--OfflineStorage { content: $ms-icon-code-OfflineStorage; }
+@mixin ms-Icon--OfflineStorageSolid { content: $ms-icon-code-OfflineStorageSolid; }
+@mixin ms-Icon--Onboarding { content: $ms-icon-code-Onboarding; }
+@mixin ms-Icon--OneDriveAdd { content: $ms-icon-code-OneDriveAdd; }
+@mixin ms-Icon--OneDriveFolder16 { content: $ms-icon-code-OneDriveFolder16; }
+@mixin ms-Icon--OneDriveLogo { content: $ms-icon-code-OneDriveLogo; }
+@mixin ms-Icon--OneNoteEduLogoInverse { content: $ms-icon-code-OneNoteEduLogoInverse; }
+@mixin ms-Icon--OneNoteLogo { content: $ms-icon-code-OneNoteLogo; }
+@mixin ms-Icon--OneNoteLogo16 { content: $ms-icon-code-OneNoteLogo16; }
+@mixin ms-Icon--OneNoteLogoFill { content: $ms-icon-code-OneNoteLogoFill; }
+@mixin ms-Icon--OneNoteLogoFill16 { content: $ms-icon-code-OneNoteLogoFill16; }
+@mixin ms-Icon--OneNoteLogoInverse { content: $ms-icon-code-OneNoteLogoInverse; }
+@mixin ms-Icon--OneNoteLogoInverse16 { content: $ms-icon-code-OneNoteLogoInverse16; }
+@mixin ms-Icon--OpenEnrollment { content: $ms-icon-code-OpenEnrollment; }
+@mixin ms-Icon--OpenFile { content: $ms-icon-code-OpenFile; }
+@mixin ms-Icon--OpenFolderHorizontal { content: $ms-icon-code-OpenFolderHorizontal; }
+@mixin ms-Icon--OpenInNewTab { content: $ms-icon-code-OpenInNewTab; }
+@mixin ms-Icon--OpenInNewWindow { content: $ms-icon-code-OpenInNewWindow; }
+@mixin ms-Icon--OpenPane { content: $ms-icon-code-OpenPane; }
+@mixin ms-Icon--OpenPaneMirrored { content: $ms-icon-code-OpenPaneMirrored; }
+@mixin ms-Icon--OpenSource { content: $ms-icon-code-OpenSource; }
+@mixin ms-Icon--OpenWith { content: $ms-icon-code-OpenWith; }
+@mixin ms-Icon--OpenWithMirrored { content: $ms-icon-code-OpenWithMirrored; }
+@mixin ms-Icon--Org { content: $ms-icon-code-Org; }
+@mixin ms-Icon--Orientation { content: $ms-icon-code-Orientation; }
+@mixin ms-Icon--Orientation2 { content: $ms-icon-code-Orientation2; }
+@mixin ms-Icon--OutlookLogo { content: $ms-icon-code-OutlookLogo; }
+@mixin ms-Icon--OutlookLogo16 { content: $ms-icon-code-OutlookLogo16; }
+@mixin ms-Icon--OutlookLogoFill { content: $ms-icon-code-OutlookLogoFill; }
+@mixin ms-Icon--OutlookLogoFill16 { content: $ms-icon-code-OutlookLogoFill16; }
+@mixin ms-Icon--OutlookLogoInverse { content: $ms-icon-code-OutlookLogoInverse; }
+@mixin ms-Icon--OutlookLogoInverse16 { content: $ms-icon-code-OutlookLogoInverse16; }
+@mixin ms-Icon--OutOfOffice { content: $ms-icon-code-OutOfOffice; }
+@mixin ms-Icon--Package { content: $ms-icon-code-Package; }
+@mixin ms-Icon--Packages { content: $ms-icon-code-Packages; }
+@mixin ms-Icon--Padding { content: $ms-icon-code-Padding; }
+@mixin ms-Icon--PaddingBottom { content: $ms-icon-code-PaddingBottom; }
+@mixin ms-Icon--PaddingLeft { content: $ms-icon-code-PaddingLeft; }
+@mixin ms-Icon--PaddingRight { content: $ms-icon-code-PaddingRight; }
+@mixin ms-Icon--PaddingTop { content: $ms-icon-code-PaddingTop; }
+@mixin ms-Icon--Page { content: $ms-icon-code-Page; }
+@mixin ms-Icon--PageAdd { content: $ms-icon-code-PageAdd; }
+@mixin ms-Icon--PageArrowRight { content: $ms-icon-code-PageArrowRight; }
+@mixin ms-Icon--PageCheckedin { content: $ms-icon-code-PageCheckedin; }
+@mixin ms-Icon--PageCheckedOut { content: $ms-icon-code-PageCheckedOut; }
+@mixin ms-Icon--PageData { content: $ms-icon-code-PageData; }
+@mixin ms-Icon--PageEdit { content: $ms-icon-code-PageEdit; }
+@mixin ms-Icon--PageHeader { content: $ms-icon-code-PageHeader; }
+@mixin ms-Icon--PageHeaderEdit { content: $ms-icon-code-PageHeaderEdit; }
+@mixin ms-Icon--PageLeft { content: $ms-icon-code-PageLeft; }
+@mixin ms-Icon--PageLink { content: $ms-icon-code-PageLink; }
+@mixin ms-Icon--PageList { content: $ms-icon-code-PageList; }
+@mixin ms-Icon--PageListFilter { content: $ms-icon-code-PageListFilter; }
+@mixin ms-Icon--PageListMirroredSolid { content: $ms-icon-code-PageListMirroredSolid; }
+@mixin ms-Icon--PageListSolid { content: $ms-icon-code-PageListSolid; }
+@mixin ms-Icon--PageLock { content: $ms-icon-code-PageLock; }
+@mixin ms-Icon--PageRemove { content: $ms-icon-code-PageRemove; }
+@mixin ms-Icon--PageRight { content: $ms-icon-code-PageRight; }
+@mixin ms-Icon--PageShared { content: $ms-icon-code-PageShared; }
+@mixin ms-Icon--PageSolid { content: $ms-icon-code-PageSolid; }
+@mixin ms-Icon--PanoIndicator { content: $ms-icon-code-PanoIndicator; }
+@mixin ms-Icon--Parachute { content: $ms-icon-code-Parachute; }
+@mixin ms-Icon--ParachuteSolid { content: $ms-icon-code-ParachuteSolid; }
+@mixin ms-Icon--Parameter { content: $ms-icon-code-Parameter; }
+@mixin ms-Icon--ParkingLocation { content: $ms-icon-code-ParkingLocation; }
+@mixin ms-Icon--ParkingLocationMirrored { content: $ms-icon-code-ParkingLocationMirrored; }
+@mixin ms-Icon--ParkingMirroredSolid { content: $ms-icon-code-ParkingMirroredSolid; }
+@mixin ms-Icon--ParkingSolid { content: $ms-icon-code-ParkingSolid; }
+@mixin ms-Icon--PartlyCloudyDay { content: $ms-icon-code-PartlyCloudyDay; }
+@mixin ms-Icon--PartlyCloudyNight { content: $ms-icon-code-PartlyCloudyNight; }
+@mixin ms-Icon--PartyLeader { content: $ms-icon-code-PartyLeader; }
+@mixin ms-Icon--PassiveAuthentication { content: $ms-icon-code-PassiveAuthentication; }
+@mixin ms-Icon--PasswordField { content: $ms-icon-code-PasswordField; }
+@mixin ms-Icon--Paste { content: $ms-icon-code-Paste; }
+@mixin ms-Icon--PasteAsCode { content: $ms-icon-code-PasteAsCode; }
+@mixin ms-Icon--PasteAsText { content: $ms-icon-code-PasteAsText; }
+@mixin ms-Icon--Pause { content: $ms-icon-code-Pause; }
+@mixin ms-Icon--PaymentCard { content: $ms-icon-code-PaymentCard; }
+@mixin ms-Icon--PC1 { content: $ms-icon-code-PC1; }
+@mixin ms-Icon--PDF { content: $ms-icon-code-PDF; }
+@mixin ms-Icon--PencilReply { content: $ms-icon-code-PencilReply; }
+@mixin ms-Icon--Pentagon { content: $ms-icon-code-Pentagon; }
+@mixin ms-Icon--PenWorkspace { content: $ms-icon-code-PenWorkspace; }
+@mixin ms-Icon--People { content: $ms-icon-code-People; }
+@mixin ms-Icon--PeopleAdd { content: $ms-icon-code-PeopleAdd; }
+@mixin ms-Icon--PeopleAlert { content: $ms-icon-code-PeopleAlert; }
+@mixin ms-Icon--PeopleBlock { content: $ms-icon-code-PeopleBlock; }
+@mixin ms-Icon--PeoplePause { content: $ms-icon-code-PeoplePause; }
+@mixin ms-Icon--PeopleRepeat { content: $ms-icon-code-PeopleRepeat; }
+@mixin ms-Icon--Permissions { content: $ms-icon-code-Permissions; }
+@mixin ms-Icon--PermissionsSolid { content: $ms-icon-code-PermissionsSolid; }
+@mixin ms-Icon--Personalize { content: $ms-icon-code-Personalize; }
+@mixin ms-Icon--Phishing { content: $ms-icon-code-Phishing; }
+@mixin ms-Icon--Phone { content: $ms-icon-code-Phone; }
+@mixin ms-Icon--Photo { content: $ms-icon-code-Photo; }
+@mixin ms-Icon--Photo2 { content: $ms-icon-code-Photo2; }
+@mixin ms-Icon--Photo2Add { content: $ms-icon-code-Photo2Add; }
+@mixin ms-Icon--Photo2Fill { content: $ms-icon-code-Photo2Fill; }
+@mixin ms-Icon--Photo2Remove { content: $ms-icon-code-Photo2Remove; }
+@mixin ms-Icon--PhotoCollection { content: $ms-icon-code-PhotoCollection; }
+@mixin ms-Icon--PhotoError { content: $ms-icon-code-PhotoError; }
+@mixin ms-Icon--PhotoVideoMedia { content: $ms-icon-code-PhotoVideoMedia; }
+@mixin ms-Icon--Picture { content: $ms-icon-code-Picture; }
+@mixin ms-Icon--PictureCenter { content: $ms-icon-code-PictureCenter; }
+@mixin ms-Icon--PictureFill { content: $ms-icon-code-PictureFill; }
+@mixin ms-Icon--PictureLibrary { content: $ms-icon-code-PictureLibrary; }
+@mixin ms-Icon--PicturePosition { content: $ms-icon-code-PicturePosition; }
+@mixin ms-Icon--PictureStretch { content: $ms-icon-code-PictureStretch; }
+@mixin ms-Icon--PictureTile { content: $ms-icon-code-PictureTile; }
+@mixin ms-Icon--PieDouble { content: $ms-icon-code-PieDouble; }
+@mixin ms-Icon--PieSingle { content: $ms-icon-code-PieSingle; }
+@mixin ms-Icon--PieSingleSolid { content: $ms-icon-code-PieSingleSolid; }
+@mixin ms-Icon--Pill { content: $ms-icon-code-Pill; }
+@mixin ms-Icon--Pin { content: $ms-icon-code-Pin; }
+@mixin ms-Icon--Pinned { content: $ms-icon-code-Pinned; }
+@mixin ms-Icon--PinnedFill { content: $ms-icon-code-PinnedFill; }
+@mixin ms-Icon--PinnedSolid { content: $ms-icon-code-PinnedSolid; }
+@mixin ms-Icon--PinSolid12 { content: $ms-icon-code-PinSolid12; }
+@mixin ms-Icon--PinSolidOff12 { content: $ms-icon-code-PinSolidOff12; }
+@mixin ms-Icon--PivotChart { content: $ms-icon-code-PivotChart; }
+@mixin ms-Icon--PlainText { content: $ms-icon-code-PlainText; }
+@mixin ms-Icon--PlannerLogo { content: $ms-icon-code-PlannerLogo; }
+@mixin ms-Icon--PlanView { content: $ms-icon-code-PlanView; }
+@mixin ms-Icon--Play { content: $ms-icon-code-Play; }
+@mixin ms-Icon--PlaybackRate1x { content: $ms-icon-code-PlaybackRate1x; }
+@mixin ms-Icon--PlayerSettings { content: $ms-icon-code-PlayerSettings; }
+@mixin ms-Icon--PlayResume { content: $ms-icon-code-PlayResume; }
+@mixin ms-Icon--PlayReverse { content: $ms-icon-code-PlayReverse; }
+@mixin ms-Icon--PlayReverseResume { content: $ms-icon-code-PlayReverseResume; }
+@mixin ms-Icon--PlaySolid { content: $ms-icon-code-PlaySolid; }
+@mixin ms-Icon--Plug { content: $ms-icon-code-Plug; }
+@mixin ms-Icon--PlugConnected { content: $ms-icon-code-PlugConnected; }
+@mixin ms-Icon--PlugDisconnected { content: $ms-icon-code-PlugDisconnected; }
+@mixin ms-Icon--PlugSolid { content: $ms-icon-code-PlugSolid; }
+@mixin ms-Icon--POI { content: $ms-icon-code-POI; }
+@mixin ms-Icon--POISolid { content: $ms-icon-code-POISolid; }
+@mixin ms-Icon--PollResults { content: $ms-icon-code-PollResults; }
+@mixin ms-Icon--PostUpdate { content: $ms-icon-code-PostUpdate; }
+@mixin ms-Icon--PowerApps { content: $ms-icon-code-PowerApps; }
+@mixin ms-Icon--PowerApps2Logo { content: $ms-icon-code-PowerApps2Logo; }
+@mixin ms-Icon--PowerAppsLogo { content: $ms-icon-code-PowerAppsLogo; }
+@mixin ms-Icon--PowerBILogo { content: $ms-icon-code-PowerBILogo; }
+@mixin ms-Icon--PowerBILogo16 { content: $ms-icon-code-PowerBILogo16; }
+@mixin ms-Icon--PowerBILogoBackplate16 { content: $ms-icon-code-PowerBILogoBackplate16; }
+@mixin ms-Icon--PowerButton { content: $ms-icon-code-PowerButton; }
+@mixin ms-Icon--PowerPointDocument { content: $ms-icon-code-PowerPointDocument; }
+@mixin ms-Icon--PowerPointLogo { content: $ms-icon-code-PowerPointLogo; }
+@mixin ms-Icon--PowerPointLogo16 { content: $ms-icon-code-PowerPointLogo16; }
+@mixin ms-Icon--PowerPointLogoFill { content: $ms-icon-code-PowerPointLogoFill; }
+@mixin ms-Icon--PowerPointLogoFill16 { content: $ms-icon-code-PowerPointLogoFill16; }
+@mixin ms-Icon--PowerPointLogoInverse { content: $ms-icon-code-PowerPointLogoInverse; }
+@mixin ms-Icon--PowerPointLogoInverse16 { content: $ms-icon-code-PowerPointLogoInverse16; }
+@mixin ms-Icon--PowerShell { content: $ms-icon-code-PowerShell; }
+@mixin ms-Icon--PowerShell2 { content: $ms-icon-code-PowerShell2; }
+@mixin ms-Icon--Precipitation { content: $ms-icon-code-Precipitation; }
+@mixin ms-Icon--PresenceChickletVideo { content: $ms-icon-code-PresenceChickletVideo; }
+@mixin ms-Icon--Presentation { content: $ms-icon-code-Presentation; }
+@mixin ms-Icon--Presentation12 { content: $ms-icon-code-Presentation12; }
+@mixin ms-Icon--Preview { content: $ms-icon-code-Preview; }
+@mixin ms-Icon--PreviewLink { content: $ms-icon-code-PreviewLink; }
+@mixin ms-Icon--Previous { content: $ms-icon-code-Previous; }
+@mixin ms-Icon--PrimaryCalendar { content: $ms-icon-code-PrimaryCalendar; }
+@mixin ms-Icon--Print { content: $ms-icon-code-Print; }
+@mixin ms-Icon--PrintfaxPrinterFile { content: $ms-icon-code-PrintfaxPrinterFile; }
+@mixin ms-Icon--Processing { content: $ms-icon-code-Processing; }
+@mixin ms-Icon--ProcessingCancel { content: $ms-icon-code-ProcessingCancel; }
+@mixin ms-Icon--ProcessingPause { content: $ms-icon-code-ProcessingPause; }
+@mixin ms-Icon--ProcessingRun { content: $ms-icon-code-ProcessingRun; }
+@mixin ms-Icon--ProcessMetaTask { content: $ms-icon-code-ProcessMetaTask; }
+@mixin ms-Icon--Product { content: $ms-icon-code-Product; }
+@mixin ms-Icon--ProductCatalog { content: $ms-icon-code-ProductCatalog; }
+@mixin ms-Icon--ProductionFloorManagement { content: $ms-icon-code-ProductionFloorManagement; }
+@mixin ms-Icon--ProductList { content: $ms-icon-code-ProductList; }
+@mixin ms-Icon--ProductRelease { content: $ms-icon-code-ProductRelease; }
+@mixin ms-Icon--ProductVariant { content: $ms-icon-code-ProductVariant; }
+@mixin ms-Icon--ProfileSearch { content: $ms-icon-code-ProfileSearch; }
+@mixin ms-Icon--ProFootball { content: $ms-icon-code-ProFootball; }
+@mixin ms-Icon--ProgressLoopInner { content: $ms-icon-code-ProgressLoopInner; }
+@mixin ms-Icon--ProgressLoopOuter { content: $ms-icon-code-ProgressLoopOuter; }
+@mixin ms-Icon--ProgressRingDots { content: $ms-icon-code-ProgressRingDots; }
+@mixin ms-Icon--ProHockey { content: $ms-icon-code-ProHockey; }
+@mixin ms-Icon--ProjectCollection { content: $ms-icon-code-ProjectCollection; }
+@mixin ms-Icon--ProjectDocument { content: $ms-icon-code-ProjectDocument; }
+@mixin ms-Icon--ProjectLogo16 { content: $ms-icon-code-ProjectLogo16; }
+@mixin ms-Icon--ProjectLogo32 { content: $ms-icon-code-ProjectLogo32; }
+@mixin ms-Icon--ProjectLogoFill16 { content: $ms-icon-code-ProjectLogoFill16; }
+@mixin ms-Icon--ProjectLogoFill32 { content: $ms-icon-code-ProjectLogoFill32; }
+@mixin ms-Icon--ProjectLogoInverse { content: $ms-icon-code-ProjectLogoInverse; }
+@mixin ms-Icon--PromotedDatabase { content: $ms-icon-code-PromotedDatabase; }
+@mixin ms-Icon--ProtectedDocument { content: $ms-icon-code-ProtectedDocument; }
+@mixin ms-Icon--ProtectionCenterLogo32 { content: $ms-icon-code-ProtectionCenterLogo32; }
+@mixin ms-Icon--ProtectRestrict { content: $ms-icon-code-ProtectRestrict; }
+@mixin ms-Icon--ProvisioningPackage { content: $ms-icon-code-ProvisioningPackage; }
+@mixin ms-Icon--PublicCalendar { content: $ms-icon-code-PublicCalendar; }
+@mixin ms-Icon--PublicContactCard { content: $ms-icon-code-PublicContactCard; }
+@mixin ms-Icon--PublicContactCardMirrored { content: $ms-icon-code-PublicContactCardMirrored; }
+@mixin ms-Icon--PublicEmail { content: $ms-icon-code-PublicEmail; }
+@mixin ms-Icon--PublicFolder { content: $ms-icon-code-PublicFolder; }
+@mixin ms-Icon--PublishContent { content: $ms-icon-code-PublishContent; }
+@mixin ms-Icon--PublishCourse { content: $ms-icon-code-PublishCourse; }
+@mixin ms-Icon--PublisherLogo { content: $ms-icon-code-PublisherLogo; }
+@mixin ms-Icon--PublisherLogo16 { content: $ms-icon-code-PublisherLogo16; }
+@mixin ms-Icon--PublisherLogoFill { content: $ms-icon-code-PublisherLogoFill; }
+@mixin ms-Icon--PublisherLogoFill16 { content: $ms-icon-code-PublisherLogoFill16; }
+@mixin ms-Icon--PublisherLogoInverse16 { content: $ms-icon-code-PublisherLogoInverse16; }
+@mixin ms-Icon--Puzzle { content: $ms-icon-code-Puzzle; }
+@mixin ms-Icon--PY { content: $ms-icon-code-PY; }
+@mixin ms-Icon--PythonLanguage { content: $ms-icon-code-PythonLanguage; }
+@mixin ms-Icon--QandA { content: $ms-icon-code-QandA; }
+@mixin ms-Icon--QandAMirror { content: $ms-icon-code-QandAMirror; }
+@mixin ms-Icon--QRCode { content: $ms-icon-code-QRCode; }
+@mixin ms-Icon--QuadColumn { content: $ms-icon-code-QuadColumn; }
+@mixin ms-Icon--Quantity { content: $ms-icon-code-Quantity; }
+@mixin ms-Icon--QuarterCircle { content: $ms-icon-code-QuarterCircle; }
+@mixin ms-Icon--QueryList { content: $ms-icon-code-QueryList; }
+@mixin ms-Icon--Questionnaire { content: $ms-icon-code-Questionnaire; }
+@mixin ms-Icon--QuestionnaireMirrored { content: $ms-icon-code-QuestionnaireMirrored; }
+@mixin ms-Icon--QuickNote { content: $ms-icon-code-QuickNote; }
+@mixin ms-Icon--QuickNoteSolid { content: $ms-icon-code-QuickNoteSolid; }
+@mixin ms-Icon--R { content: $ms-icon-code-R; }
+@mixin ms-Icon--RadioBtnOff { content: $ms-icon-code-RadioBtnOff; }
+@mixin ms-Icon--RadioBtnOn { content: $ms-icon-code-RadioBtnOn; }
+@mixin ms-Icon--RadioBullet { content: $ms-icon-code-RadioBullet; }
+@mixin ms-Icon--Rain { content: $ms-icon-code-Rain; }
+@mixin ms-Icon--RainShowersDay { content: $ms-icon-code-RainShowersDay; }
+@mixin ms-Icon--RainShowersNight { content: $ms-icon-code-RainShowersNight; }
+@mixin ms-Icon--RainSnow { content: $ms-icon-code-RainSnow; }
+@mixin ms-Icon--RawSource { content: $ms-icon-code-RawSource; }
+@mixin ms-Icon--Read { content: $ms-icon-code-Read; }
+@mixin ms-Icon--ReadingMode { content: $ms-icon-code-ReadingMode; }
+@mixin ms-Icon--ReadingModeSolid { content: $ms-icon-code-ReadingModeSolid; }
+@mixin ms-Icon--ReadOutLoud { content: $ms-icon-code-ReadOutLoud; }
+@mixin ms-Icon--RealEstate { content: $ms-icon-code-RealEstate; }
+@mixin ms-Icon--ReceiptCheck { content: $ms-icon-code-ReceiptCheck; }
+@mixin ms-Icon--ReceiptForward { content: $ms-icon-code-ReceiptForward; }
+@mixin ms-Icon--ReceiptReply { content: $ms-icon-code-ReceiptReply; }
+@mixin ms-Icon--ReceiptTentative { content: $ms-icon-code-ReceiptTentative; }
+@mixin ms-Icon--ReceiptTentativeMirrored { content: $ms-icon-code-ReceiptTentativeMirrored; }
+@mixin ms-Icon--ReceiptUndelivered { content: $ms-icon-code-ReceiptUndelivered; }
+@mixin ms-Icon--Recent { content: $ms-icon-code-Recent; }
+@mixin ms-Icon--Record2 { content: $ms-icon-code-Record2; }
+@mixin ms-Icon--RecruitmentManagement { content: $ms-icon-code-RecruitmentManagement; }
+@mixin ms-Icon--RectangleShape { content: $ms-icon-code-RectangleShape; }
+@mixin ms-Icon--RectangleShapeSolid { content: $ms-icon-code-RectangleShapeSolid; }
+@mixin ms-Icon--RectangularClipping { content: $ms-icon-code-RectangularClipping; }
+@mixin ms-Icon--RecurringEvent { content: $ms-icon-code-RecurringEvent; }
+@mixin ms-Icon--RecurringTask { content: $ms-icon-code-RecurringTask; }
+@mixin ms-Icon--RecycleBin { content: $ms-icon-code-RecycleBin; }
+@mixin ms-Icon--Redeploy { content: $ms-icon-code-Redeploy; }
+@mixin ms-Icon--RedEye { content: $ms-icon-code-RedEye; }
+@mixin ms-Icon--RedEye12 { content: $ms-icon-code-RedEye12; }
+@mixin ms-Icon--Redo { content: $ms-icon-code-Redo; }
+@mixin ms-Icon--Refresh { content: $ms-icon-code-Refresh; }
+@mixin ms-Icon--RegistryEditor { content: $ms-icon-code-RegistryEditor; }
+@mixin ms-Icon--Relationship { content: $ms-icon-code-Relationship; }
+@mixin ms-Icon--ReleaseDefinition { content: $ms-icon-code-ReleaseDefinition; }
+@mixin ms-Icon--ReleaseGate { content: $ms-icon-code-ReleaseGate; }
+@mixin ms-Icon--ReleaseGateCheck { content: $ms-icon-code-ReleaseGateCheck; }
+@mixin ms-Icon--ReleaseGateError { content: $ms-icon-code-ReleaseGateError; }
+@mixin ms-Icon--ReminderGroup { content: $ms-icon-code-ReminderGroup; }
+@mixin ms-Icon--ReminderPerson { content: $ms-icon-code-ReminderPerson; }
+@mixin ms-Icon--ReminderTime { content: $ms-icon-code-ReminderTime; }
+@mixin ms-Icon--Remote { content: $ms-icon-code-Remote; }
+@mixin ms-Icon--Remove { content: $ms-icon-code-Remove; }
+@mixin ms-Icon--RemoveContent { content: $ms-icon-code-RemoveContent; }
+@mixin ms-Icon--RemoveEvent { content: $ms-icon-code-RemoveEvent; }
+@mixin ms-Icon--RemoveFilter { content: $ms-icon-code-RemoveFilter; }
+@mixin ms-Icon--RemoveFromShoppingList { content: $ms-icon-code-RemoveFromShoppingList; }
+@mixin ms-Icon--RemoveFromTrash { content: $ms-icon-code-RemoveFromTrash; }
+@mixin ms-Icon--RemoveLink { content: $ms-icon-code-RemoveLink; }
+@mixin ms-Icon--RemoveLinkChain { content: $ms-icon-code-RemoveLinkChain; }
+@mixin ms-Icon--RemoveLinkX { content: $ms-icon-code-RemoveLinkX; }
+@mixin ms-Icon--RemoveOccurrence { content: $ms-icon-code-RemoveOccurrence; }
+@mixin ms-Icon--Rename { content: $ms-icon-code-Rename; }
+@mixin ms-Icon--RenewalCurrent { content: $ms-icon-code-RenewalCurrent; }
+@mixin ms-Icon--RenewalFuture { content: $ms-icon-code-RenewalFuture; }
+@mixin ms-Icon--ReopenPages { content: $ms-icon-code-ReopenPages; }
+@mixin ms-Icon--Repair { content: $ms-icon-code-Repair; }
+@mixin ms-Icon--RepeatAll { content: $ms-icon-code-RepeatAll; }
+@mixin ms-Icon--RepeatHeaderRows { content: $ms-icon-code-RepeatHeaderRows; }
+@mixin ms-Icon--RepeatOne { content: $ms-icon-code-RepeatOne; }
+@mixin ms-Icon--Reply { content: $ms-icon-code-Reply; }
+@mixin ms-Icon--ReplyAll { content: $ms-icon-code-ReplyAll; }
+@mixin ms-Icon--ReplyAllAlt { content: $ms-icon-code-ReplyAllAlt; }
+@mixin ms-Icon--ReplyAllMirrored { content: $ms-icon-code-ReplyAllMirrored; }
+@mixin ms-Icon--ReplyAlt { content: $ms-icon-code-ReplyAlt; }
+@mixin ms-Icon--ReplyMirrored { content: $ms-icon-code-ReplyMirrored; }
+@mixin ms-Icon--Repo { content: $ms-icon-code-Repo; }
+@mixin ms-Icon--ReportAdd { content: $ms-icon-code-ReportAdd; }
+@mixin ms-Icon--ReportDocument { content: $ms-icon-code-ReportDocument; }
+@mixin ms-Icon--ReportHacked { content: $ms-icon-code-ReportHacked; }
+@mixin ms-Icon--ReportLibrary { content: $ms-icon-code-ReportLibrary; }
+@mixin ms-Icon--ReportLibraryMirrored { content: $ms-icon-code-ReportLibraryMirrored; }
+@mixin ms-Icon--ReportLock { content: $ms-icon-code-ReportLock; }
+@mixin ms-Icon--ReportWarning { content: $ms-icon-code-ReportWarning; }
+@mixin ms-Icon--RepoSolid { content: $ms-icon-code-RepoSolid; }
+@mixin ms-Icon--Rerun { content: $ms-icon-code-Rerun; }
+@mixin ms-Icon--ReservationOrders { content: $ms-icon-code-ReservationOrders; }
+@mixin ms-Icon--Reset { content: $ms-icon-code-Reset; }
+@mixin ms-Icon--ResetDevice { content: $ms-icon-code-ResetDevice; }
+@mixin ms-Icon--ResponsesMenu { content: $ms-icon-code-ResponsesMenu; }
+@mixin ms-Icon--ReturnKey { content: $ms-icon-code-ReturnKey; }
+@mixin ms-Icon--ReturnToSession { content: $ms-icon-code-ReturnToSession; }
+@mixin ms-Icon--ReviewRequestMirroredSolid { content: $ms-icon-code-ReviewRequestMirroredSolid; }
+@mixin ms-Icon--ReviewRequestSolid { content: $ms-icon-code-ReviewRequestSolid; }
+@mixin ms-Icon--ReviewResponseSolid { content: $ms-icon-code-ReviewResponseSolid; }
+@mixin ms-Icon--ReviewSolid { content: $ms-icon-code-ReviewSolid; }
+@mixin ms-Icon--RevToggleKey { content: $ms-icon-code-RevToggleKey; }
+@mixin ms-Icon--Rewind { content: $ms-icon-code-Rewind; }
+@mixin ms-Icon--Ribbon { content: $ms-icon-code-Ribbon; }
+@mixin ms-Icon--RibbonSolid { content: $ms-icon-code-RibbonSolid; }
+@mixin ms-Icon--RightDoubleQuote { content: $ms-icon-code-RightDoubleQuote; }
+@mixin ms-Icon--RightTriangle { content: $ms-icon-code-RightTriangle; }
+@mixin ms-Icon--Ringer { content: $ms-icon-code-Ringer; }
+@mixin ms-Icon--RingerOff { content: $ms-icon-code-RingerOff; }
+@mixin ms-Icon--RingerRemove { content: $ms-icon-code-RingerRemove; }
+@mixin ms-Icon--RingerSolid { content: $ms-icon-code-RingerSolid; }
+@mixin ms-Icon--Robot { content: $ms-icon-code-Robot; }
+@mixin ms-Icon--Rocket { content: $ms-icon-code-Rocket; }
+@mixin ms-Icon--Room { content: $ms-icon-code-Room; }
+@mixin ms-Icon--Rotate { content: $ms-icon-code-Rotate; }
+@mixin ms-Icon--Rotate90Clockwise { content: $ms-icon-code-Rotate90Clockwise; }
+@mixin ms-Icon--Rotate90CounterClockwise { content: $ms-icon-code-Rotate90CounterClockwise; }
+@mixin ms-Icon--RowsChild { content: $ms-icon-code-RowsChild; }
+@mixin ms-Icon--RowsGroup { content: $ms-icon-code-RowsGroup; }
+@mixin ms-Icon--Rugby { content: $ms-icon-code-Rugby; }
+@mixin ms-Icon--Running { content: $ms-icon-code-Running; }
+@mixin ms-Icon--Sad { content: $ms-icon-code-Sad; }
+@mixin ms-Icon--SadSolid { content: $ms-icon-code-SadSolid; }
+@mixin ms-Icon--Save { content: $ms-icon-code-Save; }
+@mixin ms-Icon--SaveAll { content: $ms-icon-code-SaveAll; }
+@mixin ms-Icon--SaveAndClose { content: $ms-icon-code-SaveAndClose; }
+@mixin ms-Icon--SaveAs { content: $ms-icon-code-SaveAs; }
+@mixin ms-Icon--SaveTemplate { content: $ms-icon-code-SaveTemplate; }
+@mixin ms-Icon--SaveToMobile { content: $ms-icon-code-SaveToMobile; }
+@mixin ms-Icon--Savings { content: $ms-icon-code-Savings; }
+@mixin ms-Icon--ScaleUp { content: $ms-icon-code-ScaleUp; }
+@mixin ms-Icon--ScaleVolume { content: $ms-icon-code-ScaleVolume; }
+@mixin ms-Icon--ScatterChart { content: $ms-icon-code-ScatterChart; }
+@mixin ms-Icon--ScheduleEventAction { content: $ms-icon-code-ScheduleEventAction; }
+@mixin ms-Icon--SchoolDataSyncLogo { content: $ms-icon-code-SchoolDataSyncLogo; }
+@mixin ms-Icon--ScopeTemplate { content: $ms-icon-code-ScopeTemplate; }
+@mixin ms-Icon--ScreenCast { content: $ms-icon-code-ScreenCast; }
+@mixin ms-Icon--Script { content: $ms-icon-code-Script; }
+@mixin ms-Icon--ScrollUpDown { content: $ms-icon-code-ScrollUpDown; }
+@mixin ms-Icon--SDCard { content: $ms-icon-code-SDCard; }
+@mixin ms-Icon--Search { content: $ms-icon-code-Search; }
+@mixin ms-Icon--SearchAndApps { content: $ms-icon-code-SearchAndApps; }
+@mixin ms-Icon--SearchBookmark { content: $ms-icon-code-SearchBookmark; }
+@mixin ms-Icon--SearchCalendar { content: $ms-icon-code-SearchCalendar; }
+@mixin ms-Icon--SearchData { content: $ms-icon-code-SearchData; }
+@mixin ms-Icon--SearchIssue { content: $ms-icon-code-SearchIssue; }
+@mixin ms-Icon--SearchIssueMirrored { content: $ms-icon-code-SearchIssueMirrored; }
+@mixin ms-Icon--SearchNearby { content: $ms-icon-code-SearchNearby; }
+@mixin ms-Icon--SecondaryNav { content: $ms-icon-code-SecondaryNav; }
+@mixin ms-Icon--Section { content: $ms-icon-code-Section; }
+@mixin ms-Icon--Sections { content: $ms-icon-code-Sections; }
+@mixin ms-Icon--SecurityGroup { content: $ms-icon-code-SecurityGroup; }
+@mixin ms-Icon--SeeDo { content: $ms-icon-code-SeeDo; }
+@mixin ms-Icon--SelectAll { content: $ms-icon-code-SelectAll; }
+@mixin ms-Icon--Sell { content: $ms-icon-code-Sell; }
+@mixin ms-Icon--SemiboldWeight { content: $ms-icon-code-SemiboldWeight; }
+@mixin ms-Icon--Send { content: $ms-icon-code-Send; }
+@mixin ms-Icon--SendMirrored { content: $ms-icon-code-SendMirrored; }
+@mixin ms-Icon--SentimentAnalysis { content: $ms-icon-code-SentimentAnalysis; }
+@mixin ms-Icon--Separator { content: $ms-icon-code-Separator; }
+@mixin ms-Icon--Server { content: $ms-icon-code-Server; }
+@mixin ms-Icon--ServerEnviroment { content: $ms-icon-code-ServerEnviroment; }
+@mixin ms-Icon--ServerProcesses { content: $ms-icon-code-ServerProcesses; }
+@mixin ms-Icon--ServiceOff { content: $ms-icon-code-ServiceOff; }
+@mixin ms-Icon--SetAction { content: $ms-icon-code-SetAction; }
+@mixin ms-Icon--Settings { content: $ms-icon-code-Settings; }
+@mixin ms-Icon--ShakeDevice { content: $ms-icon-code-ShakeDevice; }
+@mixin ms-Icon--Shapes { content: $ms-icon-code-Shapes; }
+@mixin ms-Icon--ShapeSolid { content: $ms-icon-code-ShapeSolid; }
+@mixin ms-Icon--Share { content: $ms-icon-code-Share; }
+@mixin ms-Icon--SharedDatabase { content: $ms-icon-code-SharedDatabase; }
+@mixin ms-Icon--ShareiOS { content: $ms-icon-code-ShareiOS; }
+@mixin ms-Icon--SharepointAppIcon16 { content: $ms-icon-code-SharepointAppIcon16; }
+@mixin ms-Icon--SharepointLogo { content: $ms-icon-code-SharepointLogo; }
+@mixin ms-Icon--SharepointLogoFill { content: $ms-icon-code-SharepointLogoFill; }
+@mixin ms-Icon--SharepointLogoInverse { content: $ms-icon-code-SharepointLogoInverse; }
+@mixin ms-Icon--Shield { content: $ms-icon-code-Shield; }
+@mixin ms-Icon--ShieldAlert { content: $ms-icon-code-ShieldAlert; }
+@mixin ms-Icon--ShieldSolid { content: $ms-icon-code-ShieldSolid; }
+@mixin ms-Icon--Shirt { content: $ms-icon-code-Shirt; }
+@mixin ms-Icon--Shop { content: $ms-icon-code-Shop; }
+@mixin ms-Icon--ShoppingCart { content: $ms-icon-code-ShoppingCart; }
+@mixin ms-Icon--ShoppingCartSolid { content: $ms-icon-code-ShoppingCartSolid; }
+@mixin ms-Icon--ShopServer { content: $ms-icon-code-ShopServer; }
+@mixin ms-Icon--ShowGrid { content: $ms-icon-code-ShowGrid; }
+@mixin ms-Icon--ShowResults { content: $ms-icon-code-ShowResults; }
+@mixin ms-Icon--ShowResultsMirrored { content: $ms-icon-code-ShowResultsMirrored; }
+@mixin ms-Icon--ShowTimeAs { content: $ms-icon-code-ShowTimeAs; }
+@mixin ms-Icon--SidePanel { content: $ms-icon-code-SidePanel; }
+@mixin ms-Icon--SidePanelMirrored { content: $ms-icon-code-SidePanelMirrored; }
+@mixin ms-Icon--Signin { content: $ms-icon-code-Signin; }
+@mixin ms-Icon--SignOut { content: $ms-icon-code-SignOut; }
+@mixin ms-Icon--SingleBookmark { content: $ms-icon-code-SingleBookmark; }
+@mixin ms-Icon--SingleBookmarkSolid { content: $ms-icon-code-SingleBookmarkSolid; }
+@mixin ms-Icon--SingleColumn { content: $ms-icon-code-SingleColumn; }
+@mixin ms-Icon--SingleColumnEdit { content: $ms-icon-code-SingleColumnEdit; }
+@mixin ms-Icon--SIPMove { content: $ms-icon-code-SIPMove; }
+@mixin ms-Icon--SiteScan { content: $ms-icon-code-SiteScan; }
+@mixin ms-Icon--SizeLegacy { content: $ms-icon-code-SizeLegacy; }
+@mixin ms-Icon--SkipBack10 { content: $ms-icon-code-SkipBack10; }
+@mixin ms-Icon--SkipForward30 { content: $ms-icon-code-SkipForward30; }
+@mixin ms-Icon--SkiResorts { content: $ms-icon-code-SkiResorts; }
+@mixin ms-Icon--SkypeArrow { content: $ms-icon-code-SkypeArrow; }
+@mixin ms-Icon--SkypeCheck { content: $ms-icon-code-SkypeCheck; }
+@mixin ms-Icon--SkypeCircleArrow { content: $ms-icon-code-SkypeCircleArrow; }
+@mixin ms-Icon--SkypeCircleCheck { content: $ms-icon-code-SkypeCircleCheck; }
+@mixin ms-Icon--SkypeCircleClock { content: $ms-icon-code-SkypeCircleClock; }
+@mixin ms-Icon--SkypeCircleMinus { content: $ms-icon-code-SkypeCircleMinus; }
+@mixin ms-Icon--SkypeCircleSlash { content: $ms-icon-code-SkypeCircleSlash; }
+@mixin ms-Icon--SkypeClock { content: $ms-icon-code-SkypeClock; }
+@mixin ms-Icon--SkypeForBusinessLogo { content: $ms-icon-code-SkypeForBusinessLogo; }
+@mixin ms-Icon--SkypeForBusinessLogo16 { content: $ms-icon-code-SkypeForBusinessLogo16; }
+@mixin ms-Icon--SkypeForBusinessLogoFill { content: $ms-icon-code-SkypeForBusinessLogoFill; }
+@mixin ms-Icon--SkypeForBusinessLogoFill16 { content: $ms-icon-code-SkypeForBusinessLogoFill16; }
+@mixin ms-Icon--SkypeLogo { content: $ms-icon-code-SkypeLogo; }
+@mixin ms-Icon--SkypeLogo16 { content: $ms-icon-code-SkypeLogo16; }
+@mixin ms-Icon--SkypeMessage { content: $ms-icon-code-SkypeMessage; }
+@mixin ms-Icon--SkypeMinus { content: $ms-icon-code-SkypeMinus; }
+@mixin ms-Icon--SkypeSlash { content: $ms-icon-code-SkypeSlash; }
+@mixin ms-Icon--Slider { content: $ms-icon-code-Slider; }
+@mixin ms-Icon--SliderHandleSize { content: $ms-icon-code-SliderHandleSize; }
+@mixin ms-Icon--SliderThumb { content: $ms-icon-code-SliderThumb; }
+@mixin ms-Icon--Slideshow { content: $ms-icon-code-Slideshow; }
+@mixin ms-Icon--SmartGlassRemote { content: $ms-icon-code-SmartGlassRemote; }
+@mixin ms-Icon--SnapToGrid { content: $ms-icon-code-SnapToGrid; }
+@mixin ms-Icon--Snooze { content: $ms-icon-code-Snooze; }
+@mixin ms-Icon--Snow { content: $ms-icon-code-Snow; }
+@mixin ms-Icon--Snowflake { content: $ms-icon-code-Snowflake; }
+@mixin ms-Icon--SnowShowerDay { content: $ms-icon-code-SnowShowerDay; }
+@mixin ms-Icon--SnowShowerNight { content: $ms-icon-code-SnowShowerNight; }
+@mixin ms-Icon--Soccer { content: $ms-icon-code-Soccer; }
+@mixin ms-Icon--SocialListeningLogo { content: $ms-icon-code-SocialListeningLogo; }
+@mixin ms-Icon--Sort { content: $ms-icon-code-Sort; }
+@mixin ms-Icon--SortDown { content: $ms-icon-code-SortDown; }
+@mixin ms-Icon--SortLines { content: $ms-icon-code-SortLines; }
+@mixin ms-Icon--SortUp { content: $ms-icon-code-SortUp; }
+@mixin ms-Icon--Source { content: $ms-icon-code-Source; }
+@mixin ms-Icon--Spacer { content: $ms-icon-code-Spacer; }
+@mixin ms-Icon--Speakers { content: $ms-icon-code-Speakers; }
+@mixin ms-Icon--SpecialEvent { content: $ms-icon-code-SpecialEvent; }
+@mixin ms-Icon--SpeedHigh { content: $ms-icon-code-SpeedHigh; }
+@mixin ms-Icon--Spelling { content: $ms-icon-code-Spelling; }
+@mixin ms-Icon--Split { content: $ms-icon-code-Split; }
+@mixin ms-Icon--SplitObject { content: $ms-icon-code-SplitObject; }
+@mixin ms-Icon--Sprint { content: $ms-icon-code-Sprint; }
+@mixin ms-Icon--Squalls { content: $ms-icon-code-Squalls; }
+@mixin ms-Icon--SquareShape { content: $ms-icon-code-SquareShape; }
+@mixin ms-Icon--SquareShapeSolid { content: $ms-icon-code-SquareShapeSolid; }
+@mixin ms-Icon--Stack { content: $ms-icon-code-Stack; }
+@mixin ms-Icon--StackColumnChart { content: $ms-icon-code-StackColumnChart; }
+@mixin ms-Icon--StackedBarChart { content: $ms-icon-code-StackedBarChart; }
+@mixin ms-Icon--StackedColumnChart2 { content: $ms-icon-code-StackedColumnChart2; }
+@mixin ms-Icon--StackedColumnChart2Fill { content: $ms-icon-code-StackedColumnChart2Fill; }
+@mixin ms-Icon--StackedLineChart { content: $ms-icon-code-StackedLineChart; }
+@mixin ms-Icon--StackIndicator { content: $ms-icon-code-StackIndicator; }
+@mixin ms-Icon--StaffNotebookLogo16 { content: $ms-icon-code-StaffNotebookLogo16; }
+@mixin ms-Icon--StaffNotebookLogo32 { content: $ms-icon-code-StaffNotebookLogo32; }
+@mixin ms-Icon--StaffNotebookLogoFill16 { content: $ms-icon-code-StaffNotebookLogoFill16; }
+@mixin ms-Icon--StaffNotebookLogoFill32 { content: $ms-icon-code-StaffNotebookLogoFill32; }
+@mixin ms-Icon--StaffNotebookLogoInverted16 { content: $ms-icon-code-StaffNotebookLogoInverted16; }
+@mixin ms-Icon--StaffNotebookLogoInverted32 { content: $ms-icon-code-StaffNotebookLogoInverted32; }
+@mixin ms-Icon--Starburst { content: $ms-icon-code-Starburst; }
+@mixin ms-Icon--StarburstSolid { content: $ms-icon-code-StarburstSolid; }
+@mixin ms-Icon--StatusCircleBlock { content: $ms-icon-code-StatusCircleBlock; }
+@mixin ms-Icon--StatusCircleBlock2 { content: $ms-icon-code-StatusCircleBlock2; }
+@mixin ms-Icon--StatusCircleCheckmark { content: $ms-icon-code-StatusCircleCheckmark; }
+@mixin ms-Icon--StatusCircleErrorX { content: $ms-icon-code-StatusCircleErrorX; }
+@mixin ms-Icon--StatusCircleExclamation { content: $ms-icon-code-StatusCircleExclamation; }
+@mixin ms-Icon--StatusCircleInfo { content: $ms-icon-code-StatusCircleInfo; }
+@mixin ms-Icon--StatusCircleInner { content: $ms-icon-code-StatusCircleInner; }
+@mixin ms-Icon--StatusCircleOuter { content: $ms-icon-code-StatusCircleOuter; }
+@mixin ms-Icon--StatusCircleQuestionMark { content: $ms-icon-code-StatusCircleQuestionMark; }
+@mixin ms-Icon--StatusCircleRing { content: $ms-icon-code-StatusCircleRing; }
+@mixin ms-Icon--StatusCircleSync { content: $ms-icon-code-StatusCircleSync; }
+@mixin ms-Icon--StatusErrorFull { content: $ms-icon-code-StatusErrorFull; }
+@mixin ms-Icon--StatusTriangle { content: $ms-icon-code-StatusTriangle; }
+@mixin ms-Icon--StatusTriangleExclamation { content: $ms-icon-code-StatusTriangleExclamation; }
+@mixin ms-Icon--StatusTriangleInner { content: $ms-icon-code-StatusTriangleInner; }
+@mixin ms-Icon--StatusTriangleOuter { content: $ms-icon-code-StatusTriangleOuter; }
+@mixin ms-Icon--Step { content: $ms-icon-code-Step; }
+@mixin ms-Icon--StepInsert { content: $ms-icon-code-StepInsert; }
+@mixin ms-Icon--StepShared { content: $ms-icon-code-StepShared; }
+@mixin ms-Icon--StepSharedAdd { content: $ms-icon-code-StepSharedAdd; }
+@mixin ms-Icon--StepSharedInsert { content: $ms-icon-code-StepSharedInsert; }
+@mixin ms-Icon--StickyNotesOutlineAppIcon { content: $ms-icon-code-StickyNotesOutlineAppIcon; }
+@mixin ms-Icon--StickyNotesSolidAppIcon { content: $ms-icon-code-StickyNotesSolidAppIcon; }
+@mixin ms-Icon--StockDown { content: $ms-icon-code-StockDown; }
+@mixin ms-Icon--StockUp { content: $ms-icon-code-StockUp; }
+@mixin ms-Icon--Stop { content: $ms-icon-code-Stop; }
+@mixin ms-Icon--StopSolid { content: $ms-icon-code-StopSolid; }
+@mixin ms-Icon--Stopwatch { content: $ms-icon-code-Stopwatch; }
+@mixin ms-Icon--StorageOptical { content: $ms-icon-code-StorageOptical; }
+@mixin ms-Icon--StoreLogo16 { content: $ms-icon-code-StoreLogo16; }
+@mixin ms-Icon--StoreLogoMed20 { content: $ms-icon-code-StoreLogoMed20; }
+@mixin ms-Icon--Storyboard { content: $ms-icon-code-Storyboard; }
+@mixin ms-Icon--Streaming { content: $ms-icon-code-Streaming; }
+@mixin ms-Icon--StreamingOff { content: $ms-icon-code-StreamingOff; }
+@mixin ms-Icon--StreamLogo { content: $ms-icon-code-StreamLogo; }
+@mixin ms-Icon--Street { content: $ms-icon-code-Street; }
+@mixin ms-Icon--StreetsideSplitMinimize { content: $ms-icon-code-StreetsideSplitMinimize; }
+@mixin ms-Icon--Strikethrough { content: $ms-icon-code-Strikethrough; }
+@mixin ms-Icon--Subscribe { content: $ms-icon-code-Subscribe; }
+@mixin ms-Icon--Subscript { content: $ms-icon-code-Subscript; }
+@mixin ms-Icon--SubstitutionsIn { content: $ms-icon-code-SubstitutionsIn; }
+@mixin ms-Icon--Suitcase { content: $ms-icon-code-Suitcase; }
+@mixin ms-Icon--SunAdd { content: $ms-icon-code-SunAdd; }
+@mixin ms-Icon--Sunny { content: $ms-icon-code-Sunny; }
+@mixin ms-Icon--SunQuestionMark { content: $ms-icon-code-SunQuestionMark; }
+@mixin ms-Icon--Superscript { content: $ms-icon-code-Superscript; }
+@mixin ms-Icon--SurveyQuestions { content: $ms-icon-code-SurveyQuestions; }
+@mixin ms-Icon--SwayLogo16 { content: $ms-icon-code-SwayLogo16; }
+@mixin ms-Icon--SwayLogo32 { content: $ms-icon-code-SwayLogo32; }
+@mixin ms-Icon--SwayLogoFill16 { content: $ms-icon-code-SwayLogoFill16; }
+@mixin ms-Icon--SwayLogoFill32 { content: $ms-icon-code-SwayLogoFill32; }
+@mixin ms-Icon--SwayLogoInverse { content: $ms-icon-code-SwayLogoInverse; }
+@mixin ms-Icon--Switch { content: $ms-icon-code-Switch; }
+@mixin ms-Icon--SwitcherStartEnd { content: $ms-icon-code-SwitcherStartEnd; }
+@mixin ms-Icon--SwitchUser { content: $ms-icon-code-SwitchUser; }
+@mixin ms-Icon--Sync { content: $ms-icon-code-Sync; }
+@mixin ms-Icon--SyncFolder { content: $ms-icon-code-SyncFolder; }
+@mixin ms-Icon--SyncOccurence { content: $ms-icon-code-SyncOccurence; }
+@mixin ms-Icon--SyncStatus { content: $ms-icon-code-SyncStatus; }
+@mixin ms-Icon--SyncStatusSolid { content: $ms-icon-code-SyncStatusSolid; }
+@mixin ms-Icon--SyncToPC { content: $ms-icon-code-SyncToPC; }
+@mixin ms-Icon--System { content: $ms-icon-code-System; }
+@mixin ms-Icon--Tab { content: $ms-icon-code-Tab; }
+@mixin ms-Icon--TabCenter { content: $ms-icon-code-TabCenter; }
+@mixin ms-Icon--Table { content: $ms-icon-code-Table; }
+@mixin ms-Icon--TableBrandedColumn { content: $ms-icon-code-TableBrandedColumn; }
+@mixin ms-Icon--TableBrandedRow { content: $ms-icon-code-TableBrandedRow; }
+@mixin ms-Icon--TableComputed { content: $ms-icon-code-TableComputed; }
+@mixin ms-Icon--TableFirstColumn { content: $ms-icon-code-TableFirstColumn; }
+@mixin ms-Icon--TableGroup { content: $ms-icon-code-TableGroup; }
+@mixin ms-Icon--TableHeaderRow { content: $ms-icon-code-TableHeaderRow; }
+@mixin ms-Icon--TableLastColumn { content: $ms-icon-code-TableLastColumn; }
+@mixin ms-Icon--TableLink { content: $ms-icon-code-TableLink; }
+@mixin ms-Icon--Tablet { content: $ms-icon-code-Tablet; }
+@mixin ms-Icon--TabletMode { content: $ms-icon-code-TabletMode; }
+@mixin ms-Icon--TableTotalRow { content: $ms-icon-code-TableTotalRow; }
+@mixin ms-Icon--TabletSelected { content: $ms-icon-code-TabletSelected; }
+@mixin ms-Icon--TabOneColumn { content: $ms-icon-code-TabOneColumn; }
+@mixin ms-Icon--TabThreeColumn { content: $ms-icon-code-TabThreeColumn; }
+@mixin ms-Icon--TabTwoColumn { content: $ms-icon-code-TabTwoColumn; }
+@mixin ms-Icon--Tag { content: $ms-icon-code-Tag; }
+@mixin ms-Icon--TagGroup { content: $ms-icon-code-TagGroup; }
+@mixin ms-Icon--TagSolid { content: $ms-icon-code-TagSolid; }
+@mixin ms-Icon--TagUnknown { content: $ms-icon-code-TagUnknown; }
+@mixin ms-Icon--TagUnknown12 { content: $ms-icon-code-TagUnknown12; }
+@mixin ms-Icon--TagUnknown12Mirror { content: $ms-icon-code-TagUnknown12Mirror; }
+@mixin ms-Icon--TagUnknownMirror { content: $ms-icon-code-TagUnknownMirror; }
+@mixin ms-Icon--Taskboard { content: $ms-icon-code-Taskboard; }
+@mixin ms-Icon--TaskGroup { content: $ms-icon-code-TaskGroup; }
+@mixin ms-Icon--TaskGroupMirrored { content: $ms-icon-code-TaskGroupMirrored; }
+@mixin ms-Icon--TaskList { content: $ms-icon-code-TaskList; }
+@mixin ms-Icon--TaskLogo { content: $ms-icon-code-TaskLogo; }
+@mixin ms-Icon--TaskManager { content: $ms-icon-code-TaskManager; }
+@mixin ms-Icon--TaskManagerMirrored { content: $ms-icon-code-TaskManagerMirrored; }
+@mixin ms-Icon--TaskSolid { content: $ms-icon-code-TaskSolid; }
+@mixin ms-Icon--Taxi { content: $ms-icon-code-Taxi; }
+@mixin ms-Icon--TeamFavorite { content: $ms-icon-code-TeamFavorite; }
+@mixin ms-Icon--TeamsLogo { content: $ms-icon-code-TeamsLogo; }
+@mixin ms-Icon--TeamsLogo16 { content: $ms-icon-code-TeamsLogo16; }
+@mixin ms-Icon--TeamsLogoFill { content: $ms-icon-code-TeamsLogoFill; }
+@mixin ms-Icon--TeamsLogoFill16 { content: $ms-icon-code-TeamsLogoFill16; }
+@mixin ms-Icon--TeamsLogoInverse { content: $ms-icon-code-TeamsLogoInverse; }
+@mixin ms-Icon--Teamwork { content: $ms-icon-code-Teamwork; }
+@mixin ms-Icon--Teeth { content: $ms-icon-code-Teeth; }
+@mixin ms-Icon--Telemarketer { content: $ms-icon-code-Telemarketer; }
+@mixin ms-Icon--TemporaryUser { content: $ms-icon-code-TemporaryUser; }
+@mixin ms-Icon--Tennis { content: $ms-icon-code-Tennis; }
+@mixin ms-Icon--TestAutoSolid { content: $ms-icon-code-TestAutoSolid; }
+@mixin ms-Icon--TestBeaker { content: $ms-icon-code-TestBeaker; }
+@mixin ms-Icon--TestBeakerSolid { content: $ms-icon-code-TestBeakerSolid; }
+@mixin ms-Icon--TestCase { content: $ms-icon-code-TestCase; }
+@mixin ms-Icon--TestExploreSolid { content: $ms-icon-code-TestExploreSolid; }
+@mixin ms-Icon--TestImpactSolid { content: $ms-icon-code-TestImpactSolid; }
+@mixin ms-Icon--TestParameter { content: $ms-icon-code-TestParameter; }
+@mixin ms-Icon--TestPlan { content: $ms-icon-code-TestPlan; }
+@mixin ms-Icon--TestStep { content: $ms-icon-code-TestStep; }
+@mixin ms-Icon--TestSuite { content: $ms-icon-code-TestSuite; }
+@mixin ms-Icon--TestUserSolid { content: $ms-icon-code-TestUserSolid; }
+@mixin ms-Icon--TextAlignBottom { content: $ms-icon-code-TextAlignBottom; }
+@mixin ms-Icon--TextAlignMiddle { content: $ms-icon-code-TextAlignMiddle; }
+@mixin ms-Icon--TextAlignTop { content: $ms-icon-code-TextAlignTop; }
+@mixin ms-Icon--TextBox { content: $ms-icon-code-TextBox; }
+@mixin ms-Icon--TextCallout { content: $ms-icon-code-TextCallout; }
+@mixin ms-Icon--TextDocument { content: $ms-icon-code-TextDocument; }
+@mixin ms-Icon--TextDocumentShared { content: $ms-icon-code-TextDocumentShared; }
+@mixin ms-Icon--TextField { content: $ms-icon-code-TextField; }
+@mixin ms-Icon--TextOverflow { content: $ms-icon-code-TextOverflow; }
+@mixin ms-Icon--TextParagraphOption { content: $ms-icon-code-TextParagraphOption; }
+@mixin ms-Icon--TextRecognition { content: $ms-icon-code-TextRecognition; }
+@mixin ms-Icon--TextRotate270Degrees { content: $ms-icon-code-TextRotate270Degrees; }
+@mixin ms-Icon--TextRotate90Degrees { content: $ms-icon-code-TextRotate90Degrees; }
+@mixin ms-Icon--TextRotateHorizontal { content: $ms-icon-code-TextRotateHorizontal; }
+@mixin ms-Icon--TextRotation { content: $ms-icon-code-TextRotation; }
+@mixin ms-Icon--TFVCLogo { content: $ms-icon-code-TFVCLogo; }
+@mixin ms-Icon--ThisPC { content: $ms-icon-code-ThisPC; }
+@mixin ms-Icon--ThreeQuarterCircle { content: $ms-icon-code-ThreeQuarterCircle; }
+@mixin ms-Icon--ThumbnailView { content: $ms-icon-code-ThumbnailView; }
+@mixin ms-Icon--ThumbnailViewMirrored { content: $ms-icon-code-ThumbnailViewMirrored; }
+@mixin ms-Icon--Thunderstorms { content: $ms-icon-code-Thunderstorms; }
+@mixin ms-Icon--Ticket { content: $ms-icon-code-Ticket; }
+@mixin ms-Icon--Tiles { content: $ms-icon-code-Tiles; }
+@mixin ms-Icon--Tiles2 { content: $ms-icon-code-Tiles2; }
+@mixin ms-Icon--TimeEntry { content: $ms-icon-code-TimeEntry; }
+@mixin ms-Icon--Timeline { content: $ms-icon-code-Timeline; }
+@mixin ms-Icon--TimelineDelivery { content: $ms-icon-code-TimelineDelivery; }
+@mixin ms-Icon--TimelineMatrixView { content: $ms-icon-code-TimelineMatrixView; }
+@mixin ms-Icon--TimelineProgress { content: $ms-icon-code-TimelineProgress; }
+@mixin ms-Icon--TimePicker { content: $ms-icon-code-TimePicker; }
+@mixin ms-Icon--Timer { content: $ms-icon-code-Timer; }
+@mixin ms-Icon--TimeSheet { content: $ms-icon-code-TimeSheet; }
+@mixin ms-Icon--ToDoLogoBottom { content: $ms-icon-code-ToDoLogoBottom; }
+@mixin ms-Icon--ToDoLogoInverse { content: $ms-icon-code-ToDoLogoInverse; }
+@mixin ms-Icon--ToDoLogoOutline { content: $ms-icon-code-ToDoLogoOutline; }
+@mixin ms-Icon--ToDoLogoTop { content: $ms-icon-code-ToDoLogoTop; }
+@mixin ms-Icon--ToggleBorder { content: $ms-icon-code-ToggleBorder; }
+@mixin ms-Icon--ToggleFilled { content: $ms-icon-code-ToggleFilled; }
+@mixin ms-Icon--ToggleLeft { content: $ms-icon-code-ToggleLeft; }
+@mixin ms-Icon--ToggleRight { content: $ms-icon-code-ToggleRight; }
+@mixin ms-Icon--ToggleThumb { content: $ms-icon-code-ToggleThumb; }
+@mixin ms-Icon--Toll { content: $ms-icon-code-Toll; }
+@mixin ms-Icon--Toolbox { content: $ms-icon-code-Toolbox; }
+@mixin ms-Icon--Total { content: $ms-icon-code-Total; }
+@mixin ms-Icon--Touch { content: $ms-icon-code-Touch; }
+@mixin ms-Icon--TouchPointer { content: $ms-icon-code-TouchPointer; }
+@mixin ms-Icon--Trackers { content: $ms-icon-code-Trackers; }
+@mixin ms-Icon--TrackersMirrored { content: $ms-icon-code-TrackersMirrored; }
+@mixin ms-Icon--Train { content: $ms-icon-code-Train; }
+@mixin ms-Icon--TrainSolid { content: $ms-icon-code-TrainSolid; }
+@mixin ms-Icon--TransferCall { content: $ms-icon-code-TransferCall; }
+@mixin ms-Icon--Transition { content: $ms-icon-code-Transition; }
+@mixin ms-Icon--TransitionEffect { content: $ms-icon-code-TransitionEffect; }
+@mixin ms-Icon--TransitionPop { content: $ms-icon-code-TransitionPop; }
+@mixin ms-Icon--TransitionPush { content: $ms-icon-code-TransitionPush; }
+@mixin ms-Icon--Translate { content: $ms-icon-code-Translate; }
+@mixin ms-Icon--Trending12 { content: $ms-icon-code-Trending12; }
+@mixin ms-Icon--TriangleDown12 { content: $ms-icon-code-TriangleDown12; }
+@mixin ms-Icon--TriangleLeft12 { content: $ms-icon-code-TriangleLeft12; }
+@mixin ms-Icon--TriangleRight12 { content: $ms-icon-code-TriangleRight12; }
+@mixin ms-Icon--TriangleShape { content: $ms-icon-code-TriangleShape; }
+@mixin ms-Icon--TriangleShapeSolid { content: $ms-icon-code-TriangleShapeSolid; }
+@mixin ms-Icon--TriangleSolid { content: $ms-icon-code-TriangleSolid; }
+@mixin ms-Icon--TriangleSolidDown12 { content: $ms-icon-code-TriangleSolidDown12; }
+@mixin ms-Icon--TriangleSolidLeft12 { content: $ms-icon-code-TriangleSolidLeft12; }
+@mixin ms-Icon--TriangleSolidRight12 { content: $ms-icon-code-TriangleSolidRight12; }
+@mixin ms-Icon--TriangleSolidUp12 { content: $ms-icon-code-TriangleSolidUp12; }
+@mixin ms-Icon--TriangleUp12 { content: $ms-icon-code-TriangleUp12; }
+@mixin ms-Icon--TriggerApproval { content: $ms-icon-code-TriggerApproval; }
+@mixin ms-Icon--TriggerAuto { content: $ms-icon-code-TriggerAuto; }
+@mixin ms-Icon--TriggerUser { content: $ms-icon-code-TriggerUser; }
+@mixin ms-Icon--Trim { content: $ms-icon-code-Trim; }
+@mixin ms-Icon--TrimEnd { content: $ms-icon-code-TrimEnd; }
+@mixin ms-Icon--TrimStart { content: $ms-icon-code-TrimStart; }
+@mixin ms-Icon--TripleColumn { content: $ms-icon-code-TripleColumn; }
+@mixin ms-Icon--TripleColumnEdit { content: $ms-icon-code-TripleColumnEdit; }
+@mixin ms-Icon--TripleColumnWide { content: $ms-icon-code-TripleColumnWide; }
+@mixin ms-Icon--Trophy { content: $ms-icon-code-Trophy; }
+@mixin ms-Icon--Trophy2 { content: $ms-icon-code-Trophy2; }
+@mixin ms-Icon--Trophy2Solid { content: $ms-icon-code-Trophy2Solid; }
+@mixin ms-Icon--TurnRight { content: $ms-icon-code-TurnRight; }
+@mixin ms-Icon--TVMonitor { content: $ms-icon-code-TVMonitor; }
+@mixin ms-Icon--TVMonitorSelected { content: $ms-icon-code-TVMonitorSelected; }
+@mixin ms-Icon--TypeScriptLanguage { content: $ms-icon-code-TypeScriptLanguage; }
+@mixin ms-Icon--Umbrella { content: $ms-icon-code-Umbrella; }
+@mixin ms-Icon--Underline { content: $ms-icon-code-Underline; }
+@mixin ms-Icon--Undo { content: $ms-icon-code-Undo; }
+@mixin ms-Icon--Uneditable { content: $ms-icon-code-Uneditable; }
+@mixin ms-Icon--Uneditable2 { content: $ms-icon-code-Uneditable2; }
+@mixin ms-Icon--Uneditable2Mirrored { content: $ms-icon-code-Uneditable2Mirrored; }
+@mixin ms-Icon--UneditableMirrored { content: $ms-icon-code-UneditableMirrored; }
+@mixin ms-Icon--UneditableSolid12 { content: $ms-icon-code-UneditableSolid12; }
+@mixin ms-Icon--UneditableSolidMirrored12 { content: $ms-icon-code-UneditableSolidMirrored12; }
+@mixin ms-Icon--Unfavorite { content: $ms-icon-code-Unfavorite; }
+@mixin ms-Icon--UngroupObject { content: $ms-icon-code-UngroupObject; }
+@mixin ms-Icon--Unknown { content: $ms-icon-code-Unknown; }
+@mixin ms-Icon--UnknownCall { content: $ms-icon-code-UnknownCall; }
+@mixin ms-Icon--UnknownMirrored { content: $ms-icon-code-UnknownMirrored; }
+@mixin ms-Icon--UnknownMirroredSolid { content: $ms-icon-code-UnknownMirroredSolid; }
+@mixin ms-Icon--UnknownSolid { content: $ms-icon-code-UnknownSolid; }
+@mixin ms-Icon--Unlock { content: $ms-icon-code-Unlock; }
+@mixin ms-Icon--UnlockSolid { content: $ms-icon-code-UnlockSolid; }
+@mixin ms-Icon--Unpin { content: $ms-icon-code-Unpin; }
+@mixin ms-Icon--UnpublishContent { content: $ms-icon-code-UnpublishContent; }
+@mixin ms-Icon--UnSetColor { content: $ms-icon-code-UnSetColor; }
+@mixin ms-Icon--UnstackSelected { content: $ms-icon-code-UnstackSelected; }
+@mixin ms-Icon--Unsubscribe { content: $ms-icon-code-Unsubscribe; }
+@mixin ms-Icon--UnsyncFolder { content: $ms-icon-code-UnsyncFolder; }
+@mixin ms-Icon--UnsyncOccurence { content: $ms-icon-code-UnsyncOccurence; }
+@mixin ms-Icon--Untag { content: $ms-icon-code-Untag; }
+@mixin ms-Icon--Up { content: $ms-icon-code-Up; }
+@mixin ms-Icon--UpdateRestore { content: $ms-icon-code-UpdateRestore; }
+@mixin ms-Icon--UpgradeAnalysis { content: $ms-icon-code-UpgradeAnalysis; }
+@mixin ms-Icon--Upload { content: $ms-icon-code-Upload; }
+@mixin ms-Icon--URLBlock { content: $ms-icon-code-URLBlock; }
+@mixin ms-Icon--USB { content: $ms-icon-code-USB; }
+@mixin ms-Icon--UserEvent { content: $ms-icon-code-UserEvent; }
+@mixin ms-Icon--UserFollowed { content: $ms-icon-code-UserFollowed; }
+@mixin ms-Icon--UserGauge { content: $ms-icon-code-UserGauge; }
+@mixin ms-Icon--UserOptional { content: $ms-icon-code-UserOptional; }
+@mixin ms-Icon--UserPause { content: $ms-icon-code-UserPause; }
+@mixin ms-Icon--UserRemove { content: $ms-icon-code-UserRemove; }
+@mixin ms-Icon--UserSync { content: $ms-icon-code-UserSync; }
+@mixin ms-Icon--UserWarning { content: $ms-icon-code-UserWarning; }
+@mixin ms-Icon--Vacation { content: $ms-icon-code-Vacation; }
+@mixin ms-Icon--Vaccination { content: $ms-icon-code-Vaccination; }
+@mixin ms-Icon--Variable { content: $ms-icon-code-Variable; }
+@mixin ms-Icon--Variable2 { content: $ms-icon-code-Variable2; }
+@mixin ms-Icon--VariableGroup { content: $ms-icon-code-VariableGroup; }
+@mixin ms-Icon--VB { content: $ms-icon-code-VB; }
+@mixin ms-Icon--VennDiagram { content: $ms-icon-code-VennDiagram; }
+@mixin ms-Icon--VerifiedBrand { content: $ms-icon-code-VerifiedBrand; }
+@mixin ms-Icon--VerifiedBrandSolid { content: $ms-icon-code-VerifiedBrandSolid; }
+@mixin ms-Icon--VersionControlPush { content: $ms-icon-code-VersionControlPush; }
+@mixin ms-Icon--VerticalDistributeCenter { content: $ms-icon-code-VerticalDistributeCenter; }
+@mixin ms-Icon--Video { content: $ms-icon-code-Video; }
+@mixin ms-Icon--Video360Generic { content: $ms-icon-code-Video360Generic; }
+@mixin ms-Icon--VideoLightOff { content: $ms-icon-code-VideoLightOff; }
+@mixin ms-Icon--VideoOff { content: $ms-icon-code-VideoOff; }
+@mixin ms-Icon--VideoSearch { content: $ms-icon-code-VideoSearch; }
+@mixin ms-Icon--VideoSolid { content: $ms-icon-code-VideoSolid; }
+@mixin ms-Icon--View { content: $ms-icon-code-View; }
+@mixin ms-Icon--ViewAll { content: $ms-icon-code-ViewAll; }
+@mixin ms-Icon--ViewAll2 { content: $ms-icon-code-ViewAll2; }
+@mixin ms-Icon--ViewDashboard { content: $ms-icon-code-ViewDashboard; }
+@mixin ms-Icon--ViewInAR { content: $ms-icon-code-ViewInAR; }
+@mixin ms-Icon--ViewList { content: $ms-icon-code-ViewList; }
+@mixin ms-Icon--ViewListGroup { content: $ms-icon-code-ViewListGroup; }
+@mixin ms-Icon--ViewListTree { content: $ms-icon-code-ViewListTree; }
+@mixin ms-Icon--ViewOriginal { content: $ms-icon-code-ViewOriginal; }
+@mixin ms-Icon--VisioDiagram { content: $ms-icon-code-VisioDiagram; }
+@mixin ms-Icon--VisioDiagramSync { content: $ms-icon-code-VisioDiagramSync; }
+@mixin ms-Icon--VisioDocument { content: $ms-icon-code-VisioDocument; }
+@mixin ms-Icon--VisioLogo { content: $ms-icon-code-VisioLogo; }
+@mixin ms-Icon--VisioLogo16 { content: $ms-icon-code-VisioLogo16; }
+@mixin ms-Icon--VisioLogoFill { content: $ms-icon-code-VisioLogoFill; }
+@mixin ms-Icon--VisioLogoFill16 { content: $ms-icon-code-VisioLogoFill16; }
+@mixin ms-Icon--VisioLogoInverse { content: $ms-icon-code-VisioLogoInverse; }
+@mixin ms-Icon--VisioLogoInverse16 { content: $ms-icon-code-VisioLogoInverse16; }
+@mixin ms-Icon--VisualBasicLanguage { content: $ms-icon-code-VisualBasicLanguage; }
+@mixin ms-Icon--VisuallyImpaired { content: $ms-icon-code-VisuallyImpaired; }
+@mixin ms-Icon--VisualsFolder { content: $ms-icon-code-VisualsFolder; }
+@mixin ms-Icon--VisualsStore { content: $ms-icon-code-VisualsStore; }
+@mixin ms-Icon--VisualStudioIDELogo32 { content: $ms-icon-code-VisualStudioIDELogo32; }
+@mixin ms-Icon--VisualStudioLogo { content: $ms-icon-code-VisualStudioLogo; }
+@mixin ms-Icon--VoicemailForward { content: $ms-icon-code-VoicemailForward; }
+@mixin ms-Icon--VoicemailIRM { content: $ms-icon-code-VoicemailIRM; }
+@mixin ms-Icon--VoicemailReply { content: $ms-icon-code-VoicemailReply; }
+@mixin ms-Icon--Volume0 { content: $ms-icon-code-Volume0; }
+@mixin ms-Icon--Volume1 { content: $ms-icon-code-Volume1; }
+@mixin ms-Icon--Volume2 { content: $ms-icon-code-Volume2; }
+@mixin ms-Icon--Volume3 { content: $ms-icon-code-Volume3; }
+@mixin ms-Icon--VolumeDisabled { content: $ms-icon-code-VolumeDisabled; }
+@mixin ms-Icon--VSTSAltLogo1 { content: $ms-icon-code-VSTSAltLogo1; }
+@mixin ms-Icon--VSTSAltLogo2 { content: $ms-icon-code-VSTSAltLogo2; }
+@mixin ms-Icon--VSTSLogo { content: $ms-icon-code-VSTSLogo; }
+@mixin ms-Icon--Waffle { content: $ms-icon-code-Waffle; }
+@mixin ms-Icon--WaffleOffice365 { content: $ms-icon-code-WaffleOffice365; }
+@mixin ms-Icon--WaitlistConfirm { content: $ms-icon-code-WaitlistConfirm; }
+@mixin ms-Icon--WaitlistConfirmMirrored { content: $ms-icon-code-WaitlistConfirmMirrored; }
+@mixin ms-Icon--Warning { content: $ms-icon-code-Warning; }
+@mixin ms-Icon--Warning12 { content: $ms-icon-code-Warning12; }
+@mixin ms-Icon--WarningSolid { content: $ms-icon-code-WarningSolid; }
+@mixin ms-Icon--WavingHand { content: $ms-icon-code-WavingHand; }
+@mixin ms-Icon--WebAppBuilderFragment { content: $ms-icon-code-WebAppBuilderFragment; }
+@mixin ms-Icon--WebAppBuilderFragmentCreate { content: $ms-icon-code-WebAppBuilderFragmentCreate; }
+@mixin ms-Icon--WebAppBuilderModule { content: $ms-icon-code-WebAppBuilderModule; }
+@mixin ms-Icon--WebAppBuilderSlot { content: $ms-icon-code-WebAppBuilderSlot; }
+@mixin ms-Icon--Webcam2 { content: $ms-icon-code-Webcam2; }
+@mixin ms-Icon--Webcam2Off { content: $ms-icon-code-Webcam2Off; }
+@mixin ms-Icon--WebComponents { content: $ms-icon-code-WebComponents; }
+@mixin ms-Icon--WebEnvironment { content: $ms-icon-code-WebEnvironment; }
+@mixin ms-Icon--WebPublish { content: $ms-icon-code-WebPublish; }
+@mixin ms-Icon--Website { content: $ms-icon-code-Website; }
+@mixin ms-Icon--WebTemplate { content: $ms-icon-code-WebTemplate; }
+@mixin ms-Icon--Weights { content: $ms-icon-code-Weights; }
+@mixin ms-Icon--Wheelchair { content: $ms-icon-code-Wheelchair; }
+@mixin ms-Icon--WhiteBoardApp16 { content: $ms-icon-code-WhiteBoardApp16; }
+@mixin ms-Icon--WhiteBoardApp32 { content: $ms-icon-code-WhiteBoardApp32; }
+@mixin ms-Icon--WifiEthernet { content: $ms-icon-code-WifiEthernet; }
+@mixin ms-Icon--WifiWarning4 { content: $ms-icon-code-WifiWarning4; }
+@mixin ms-Icon--WindDirection { content: $ms-icon-code-WindDirection; }
+@mixin ms-Icon--WindowEdit { content: $ms-icon-code-WindowEdit; }
+@mixin ms-Icon--WindowsLogo { content: $ms-icon-code-WindowsLogo; }
+@mixin ms-Icon--Wines { content: $ms-icon-code-Wines; }
+@mixin ms-Icon--WipePhone { content: $ms-icon-code-WipePhone; }
+@mixin ms-Icon--WordDocument { content: $ms-icon-code-WordDocument; }
+@mixin ms-Icon--WordLogo { content: $ms-icon-code-WordLogo; }
+@mixin ms-Icon--WordLogo16 { content: $ms-icon-code-WordLogo16; }
+@mixin ms-Icon--WordLogoFill { content: $ms-icon-code-WordLogoFill; }
+@mixin ms-Icon--WordLogoFill16 { content: $ms-icon-code-WordLogoFill16; }
+@mixin ms-Icon--WordLogoInverse { content: $ms-icon-code-WordLogoInverse; }
+@mixin ms-Icon--WordLogoInverse16 { content: $ms-icon-code-WordLogoInverse16; }
+@mixin ms-Icon--Work { content: $ms-icon-code-Work; }
+@mixin ms-Icon--WorkFlow { content: $ms-icon-code-WorkFlow; }
+@mixin ms-Icon--WorkforceManagement { content: $ms-icon-code-WorkforceManagement; }
+@mixin ms-Icon--WorkItem { content: $ms-icon-code-WorkItem; }
+@mixin ms-Icon--WorkItemAlert { content: $ms-icon-code-WorkItemAlert; }
+@mixin ms-Icon--WorkItemBar { content: $ms-icon-code-WorkItemBar; }
+@mixin ms-Icon--WorkItemBarSolid { content: $ms-icon-code-WorkItemBarSolid; }
+@mixin ms-Icon--WorkItemBug { content: $ms-icon-code-WorkItemBug; }
+@mixin ms-Icon--World { content: $ms-icon-code-World; }
+@mixin ms-Icon--WorldClock { content: $ms-icon-code-WorldClock; }
+@mixin ms-Icon--YammerLogo { content: $ms-icon-code-YammerLogo; }
+@mixin ms-Icon--ZipFolder { content: $ms-icon-code-ZipFolder; }
+@mixin ms-Icon--Zoom { content: $ms-icon-code-Zoom; }
+@mixin ms-Icon--ZoomIn { content: $ms-icon-code-ZoomIn; }
+@mixin ms-Icon--ZoomOut { content: $ms-icon-code-ZoomOut; }
+@mixin ms-Icon--ZoomToFit { content: $ms-icon-code-ZoomToFit; }
+
+// Deprecated mixins, to be removed in the next major release.
+@mixin ms-Icon--HumanResources {
+  @warn 'The ms-Icon--HumanResources mixin has been deprecated and will be removed in a future major change.';
+  content: $ms-icon-code-HumanResources;
+}
+
+@mixin ms-Icon--OneDrive {
+  @warn 'The ms-Icon--OneDrive mixin has been deprecated and replaced with ms-Icon--OneDriveLogo. It will be removed in a future major change.';
+  content: $ms-icon-code-OneDriveLogo;
+}
+
+@mixin ms-Icon--StoreLogo {
+  @warn 'The ms-Icon--StoreLogo mixin has been deprecated and replaced with ms-Icon--StoreLogo16. It will be removed in a future major change.';
+  content: $ms-icon-code-StoreLogo16;
+}
+
+@mixin ms-Icon--StoreLogoMed {
+  @warn 'The ms-Icon--StoreLogoMed mixin has been deprecated and replaced with ms-Icon--StoreLogoMed20. It will be removed in a future major change.';
+  content: $ms-icon-code-StoreLogoMed20;
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_Responsive.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_Responsive.Mixins.scss
new file mode 100644
index 0000000..8bf5807
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_Responsive.Mixins.scss
@@ -0,0 +1,1487 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Small Screens
+@mixin ms-sm12 {
+  width: 100%;
+}
+@mixin ms-sm11 {
+  width: 91.66666666666666%;
+}
+@mixin ms-sm10 {
+  width: 83.33333333333334%;
+}
+@mixin ms-sm9 {
+  width: 75%;
+}
+@mixin ms-sm8 {
+  width: 66.66666666666666%;
+}
+@mixin ms-sm7 {
+  width: 58.333333333333336%;
+}
+@mixin ms-sm6 {
+  width: 50%;
+}
+@mixin ms-sm5 {
+  width: 41.66666666666667%;
+}
+@mixin ms-sm4 {
+  width: 33.33333333333333%;
+}
+@mixin ms-sm3 {
+  width: 25%;
+}
+@mixin ms-sm2 {
+  width: 16.666666666666664%;
+}
+@mixin ms-sm1 {
+  width: 8.333333333333332%;
+}
+@mixin ms-smPull12 {
+  @include ms-right(100%);
+}
+@mixin ms-smPull11 {
+  @include ms-right(91.66666666666666%);
+}
+@mixin ms-smPull10 {
+  @include ms-right(83.33333333333334%);
+}
+@mixin ms-smPull9 {
+  @include ms-right(75%);
+}
+@mixin ms-smPull8 {
+  @include ms-right(66.66666666666666%);
+}
+@mixin ms-smPull7 {
+  @include ms-right(58.333333333333336%);
+}
+@mixin ms-smPull6 {
+  @include ms-right(50%);
+}
+@mixin ms-smPull5 {
+  @include ms-right(41.66666666666667%);
+}
+@mixin ms-smPull4 {
+  @include ms-right(33.33333333333333%);
+}
+@mixin ms-smPull3 {
+  @include ms-right(25%);
+}
+@mixin ms-smPull2 {
+  @include ms-right(16.666666666666664%);
+}
+@mixin ms-smPull1 {
+  @include ms-right(8.333333333333332%);
+}
+@mixin ms-smPull0 {
+  @include ms-right(auto);
+}
+@mixin ms-smPush12 {
+  @include ms-left(100%);
+}
+@mixin ms-smPush11 {
+  @include ms-left(91.66666666666666%);
+}
+@mixin ms-smPush10 {
+  @include ms-left(83.33333333333334%);
+}
+@mixin ms-smPush9 {
+  @include ms-left(75%);
+}
+@mixin ms-smPush8 {
+  @include ms-left(66.66666666666666%);
+}
+@mixin ms-smPush7 {
+  @include ms-left(58.333333333333336%);
+}
+@mixin ms-smPush6 {
+  @include ms-left(50%);
+}
+@mixin ms-smPush5 {
+  @include ms-left(41.66666666666667%);
+}
+@mixin ms-smPush4 {
+  @include ms-left(33.33333333333333%);
+}
+@mixin ms-smPush3 {
+  @include ms-left(25%);
+}
+@mixin ms-smPush2 {
+  @include ms-left(16.666666666666664%);
+}
+@mixin ms-smPush1 {
+  @include ms-left(8.333333333333332%);
+}
+@mixin ms-smPush0 {
+  @include ms-left(auto);
+}
+
+// Small Offset classes 0 ... 11
+@mixin ms-smOffset11 {
+  @include ms-margin-left(91.66666666666666%);
+}
+@mixin ms-smOffset10 {
+  @include ms-margin-left(83.33333333333334%);
+}
+@mixin ms-smOffset9 {
+  @include ms-margin-left(75%);
+}
+@mixin ms-smOffset8 {
+  @include ms-margin-left(66.66666666666666%);
+}
+@mixin ms-smOffset7 {
+  @include ms-margin-left(58.333333333333336%);
+}
+@mixin ms-smOffset6 {
+  @include ms-margin-left(50%);
+}
+@mixin ms-smOffset5 {
+  @include ms-margin-left(41.66666666666667%);
+}
+@mixin ms-smOffset4 {
+  @include ms-margin-left(33.33333333333333%);
+}
+@mixin ms-smOffset3 {
+  @include ms-margin-left(25%);
+}
+@mixin ms-smOffset2 {
+  @include ms-margin-left(16.666666666666664%);
+}
+@mixin ms-smOffset1 {
+  @include ms-margin-left(8.333333333333332%);
+}
+@mixin ms-smOffset0 {
+  @include ms-margin-left(0);
+}
+
+// Medium Screens
+@mixin ms-md12 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 100%;
+  }
+}
+@mixin ms-md11 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 91.66666666666666%;
+  }
+}
+@mixin ms-md10 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 83.33333333333334%;
+  }
+}
+@mixin ms-md9 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 75%;
+  }
+}
+@mixin ms-md8 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 66.66666666666666%;
+  }
+}
+@mixin ms-md7 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 58.333333333333336%;
+  }
+}
+@mixin ms-md6 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 50%;
+  }
+}
+@mixin ms-md5 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 41.66666666666667%;
+  }
+}
+@mixin ms-md4 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 33.33333333333333%;
+  }
+}
+@mixin ms-md3 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 25%;
+  }
+}
+@mixin ms-md2 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 16.666666666666664%;
+  }
+}
+@mixin ms-md1 {
+  @media (min-width: $ms-screen-min-md) {
+    width: 8.333333333333332%;
+  }
+}
+@mixin ms-mdPull12 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(100%);
+  }
+}
+@mixin ms-mdPull11 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(91.66666666666666%);
+  }
+}
+@mixin ms-mdPull10 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(83.33333333333334%);
+  }
+}
+@mixin ms-mdPull9 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(75%);
+  }
+}
+@mixin ms-mdPull8 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(66.66666666666666%);
+  }
+}
+@mixin ms-mdPull7 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(58.333333333333336%);
+  }
+}
+@mixin ms-mdPull6 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(50%);
+  }
+}
+@mixin ms-mdPull5 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(41.66666666666667%);
+  }
+}
+@mixin ms-mdPull4 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(33.33333333333333%);
+  }
+}
+@mixin ms-mdPull3 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(25%);
+  }
+}
+@mixin ms-mdPull2 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(16.666666666666664%);
+  }
+}
+@mixin ms-mdPull1 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(8.333333333333332%);
+  }
+}
+@mixin ms-mdPull0 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-right(auto);
+  }
+}
+@mixin ms-mdPush12 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(100%);
+  }
+}
+@mixin ms-mdPush11 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(91.66666666666666%);
+  }
+}
+@mixin ms-mdPush10 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(83.33333333333334%);
+  }
+}
+@mixin ms-mdPush9 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(75%);
+  }
+}
+@mixin ms-mdPush8 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(66.66666666666666%);
+  }
+}
+@mixin ms-mdPush7 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(58.333333333333336%);
+  }
+}
+@mixin ms-mdPush6 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(50%);
+  }
+}
+@mixin ms-mdPush5 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(41.66666666666667%);
+  }
+}
+@mixin ms-mdPush4 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(33.33333333333333%);
+  }
+}
+@mixin ms-mdPush3 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(25%);
+  }
+}
+@mixin ms-mdPush2 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(16.666666666666664%);
+  }
+}
+@mixin ms-mdPush1 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(8.333333333333332%);
+  }
+}
+@mixin ms-mdPush0 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-left(auto);
+  }
+}
+
+// Medium Offset classes 0 ... 11
+@mixin ms-mdOffset11 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(91.66666666666666%);
+  }
+}
+@mixin ms-mdOffset10 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(83.33333333333334%);
+  }
+}
+@mixin ms-mdOffset9 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(75%);
+  }
+}
+@mixin ms-mdOffset8 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(66.66666666666666%);
+  }
+}
+@mixin ms-mdOffset7 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(58.333333333333336%);
+  }
+}
+@mixin ms-mdOffset6 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(50%);
+  }
+}
+@mixin ms-mdOffset5 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(41.66666666666667%);
+  }
+}
+@mixin ms-mdOffset4 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(33.33333333333333%);
+  }
+}
+@mixin ms-mdOffset3 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(25%);
+  }
+}
+@mixin ms-mdOffset2 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(16.666666666666664%);
+  }
+}
+@mixin ms-mdOffset1 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(8.333333333333332%);
+  }
+}
+@mixin ms-mdOffset0 {
+  @media (min-width: $ms-screen-min-md) {
+    @include ms-margin-left(0);
+  }
+}
+
+// Large screens
+@mixin ms-lg12 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 100%;
+  }
+}
+@mixin ms-lg11 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 91.66666666666666%;
+  }
+}
+@mixin ms-lg10 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 83.33333333333334%;
+  }
+}
+@mixin ms-lg9 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 75%;
+  }
+}
+@mixin ms-lg8 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 66.66666666666666%;
+  }
+}
+@mixin ms-lg7 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 58.333333333333336%;
+  }
+}
+@mixin ms-lg6 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 50%;
+  }
+}
+@mixin ms-lg5 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 41.66666666666667%;
+  }
+}
+@mixin ms-lg4 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 33.33333333333333%;
+  }
+}
+@mixin ms-lg3 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 25%;
+  }
+}
+@mixin ms-lg2 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 16.666666666666664%;
+  }
+}
+@mixin ms-lg1 {
+  @media (min-width: $ms-screen-min-lg) {
+    width: 8.333333333333332%;
+  }
+}
+@mixin ms-lgPull12 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(100%);
+  }
+}
+@mixin ms-lgPull11 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(91.66666666666666%);
+  }
+}
+@mixin ms-lgPull10 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(83.33333333333334%);
+  }
+}
+@mixin ms-lgPull9 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(75%);
+  }
+}
+@mixin ms-lgPull8 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(66.66666666666666%);
+  }
+}
+@mixin ms-lgPull7 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(58.333333333333336%);
+  }
+}
+@mixin ms-lgPull6 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(50%);
+  }
+}
+@mixin ms-lgPull5 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(41.66666666666667%);
+  }
+}
+@mixin ms-lgPull4 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(33.33333333333333%);
+  }
+}
+@mixin ms-lgPull3 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(25%);
+  }
+}
+@mixin ms-lgPull2 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(16.666666666666664%);
+  }
+}
+@mixin ms-lgPull1 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(8.333333333333332%);
+  }
+}
+@mixin ms-lgPull0 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-right(auto);
+  }
+}
+@mixin ms-lgPush12 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(100%);
+  }
+}
+@mixin ms-lgPush11 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(91.66666666666666%);
+  }
+}
+@mixin ms-lgPush10 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(83.33333333333334%);
+  }
+}
+@mixin ms-lgPush9 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(75%);
+  }
+}
+@mixin ms-lgPush8 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(66.66666666666666%);
+  }
+}
+@mixin ms-lgPush7 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(58.333333333333336%);
+  }
+}
+@mixin ms-lgPush6 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(50%);
+  }
+}
+@mixin ms-lgPush5 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(41.66666666666667%);
+  }
+}
+@mixin ms-lgPush4 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(33.33333333333333%);
+  }
+}
+@mixin ms-lgPush3 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(25%);
+  }
+}
+@mixin ms-lgPush2 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(16.666666666666664%);
+  }
+}
+@mixin ms-lgPush1 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(8.333333333333332%);
+  }
+}
+@mixin ms-lgPush0 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-left(auto);
+  }
+}
+
+// Large Offset classes 0 ... 11
+@mixin ms-lgOffset11 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(91.66666666666666%);
+  }
+}
+@mixin ms-lgOffset10 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(83.33333333333334%);
+  }
+}
+@mixin ms-lgOffset9 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(75%);
+  }
+}
+@mixin ms-lgOffset8 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(66.66666666666666%);
+  }
+}
+@mixin ms-lgOffset7 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(58.333333333333336%);
+  }
+}
+@mixin ms-lgOffset6 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(50%);
+  }
+}
+@mixin ms-lgOffset5 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(41.66666666666667%);
+  }
+}
+@mixin ms-lgOffset4 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(33.33333333333333%);
+  }
+}
+@mixin ms-lgOffset3 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(25%);
+  }
+}
+@mixin ms-lgOffset2 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(16.666666666666664%);
+  }
+}
+@mixin ms-lgOffset1 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(8.333333333333332%);
+  }
+}
+@mixin ms-lgOffset0 {
+  @media (min-width: $ms-screen-min-lg) {
+    @include ms-margin-left(0);
+  }
+}
+
+// Extra Large Screens
+@mixin ms-xl12 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 100%;
+  }
+}
+@mixin ms-xl11 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 91.66666666666666%;
+  }
+}
+@mixin ms-xl10 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 83.33333333333334%;
+  }
+}
+@mixin ms-xl9 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 75%;
+  }
+}
+@mixin ms-xl8 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 66.66666666666666%;
+  }
+}
+@mixin ms-xl7 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 58.333333333333336%;
+  }
+}
+@mixin ms-xl6 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 50%;
+  }
+}
+@mixin ms-xl5 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 41.66666666666667%;
+  }
+}
+@mixin ms-xl4 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 33.33333333333333%;
+  }
+}
+@mixin ms-xl3 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 25%;
+  }
+}
+@mixin ms-xl2 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 16.666666666666664%;
+  }
+}
+@mixin ms-xl1 {
+  @media (min-width: $ms-screen-min-xl) {
+    width: 8.333333333333332%;
+  }
+}
+@mixin ms-xlPull12 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(100%);
+  }
+}
+@mixin ms-xlPull11 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(91.66666666666666%);
+  }
+}
+@mixin ms-xlPull10 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(83.33333333333334%);
+  }
+}
+@mixin ms-xlPull9 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(75%);
+  }
+}
+@mixin ms-xlPull8 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(66.66666666666666%);
+  }
+}
+@mixin ms-xlPull7 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(58.333333333333336%);
+  }
+}
+@mixin ms-xlPull6 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(50%);
+  }
+}
+@mixin ms-xlPull5 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(41.66666666666667%);
+  }
+}
+@mixin ms-xlPull4 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(33.33333333333333%);
+  }
+}
+@mixin ms-xlPull3 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(25%);
+  }
+}
+@mixin ms-xlPull2 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(16.666666666666664%);
+  }
+}
+@mixin ms-xlPull1 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(8.333333333333332%);
+  }
+}
+@mixin ms-xlPull0 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-right(auto);
+  }
+}
+@mixin ms-xlPush12 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(100%);
+  }
+}
+@mixin ms-xlPush11 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(91.66666666666666%);
+  }
+}
+@mixin ms-xlPush10 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(83.33333333333334%);
+  }
+}
+@mixin ms-xlPush9 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(75%);
+  }
+}
+@mixin ms-xlPush8 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(66.66666666666666%);
+  }
+}
+@mixin ms-xlPush7 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(58.333333333333336%);
+  }
+}
+@mixin ms-xlPush6 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(50%);
+  }
+}
+@mixin ms-xlPush5 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(41.66666666666667%);
+  }
+}
+@mixin ms-xlPush4 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(33.33333333333333%);
+  }
+}
+@mixin ms-xlPush3 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(25%);
+  }
+}
+@mixin ms-xlPush2 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(16.666666666666664%);
+  }
+}
+@mixin ms-xlPush1 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(8.333333333333332%);
+  }
+}
+@mixin ms-xlPush0 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-left(auto);
+  }
+}
+
+// Large Offset classes 0 ... 11
+@mixin ms-xlOffset11 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(91.66666666666666%);
+  }
+}
+@mixin ms-xlOffset10 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(83.33333333333334%);
+  }
+}
+@mixin ms-xlOffset9 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(75%);
+  }
+}
+@mixin ms-xlOffset8 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(66.66666666666666%);
+  }
+}
+@mixin ms-xlOffset7 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(58.333333333333336%);
+  }
+}
+@mixin ms-xlOffset6 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(50%);
+  }
+}
+@mixin ms-xlOffset5 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(41.66666666666667%);
+  }
+}
+@mixin ms-xlOffset4 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(33.33333333333333%);
+  }
+}
+@mixin ms-xlOffset3 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(25%);
+  }
+}
+@mixin ms-xlOffset2 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(16.666666666666664%);
+  }
+}
+@mixin ms-xlOffset1 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(8.333333333333332%);
+  }
+}
+@mixin ms-xlOffset0 {
+  @media (min-width: $ms-screen-min-xl) {
+    @include ms-margin-left(0);
+  }
+}
+
+// XXL Screens
+@mixin ms-xxl12 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 100%;
+  }
+}
+@mixin ms-xxl11 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 91.66666666666666%;
+  }
+}
+@mixin ms-xxl10 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 83.33333333333334%;
+  }
+}
+@mixin ms-xxl9 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 75%;
+  }
+}
+@mixin ms-xxl8 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 66.66666666666666%;
+  }
+}
+@mixin ms-xxl7 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 58.333333333333336%;
+  }
+}
+@mixin ms-xxl6 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 50%;
+  }
+}
+@mixin ms-xxl5 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 41.66666666666667%;
+  }
+}
+@mixin ms-xxl4 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 33.33333333333333%;
+  }
+}
+@mixin ms-xxl3 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 25%;
+  }
+}
+@mixin ms-xxl2 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 16.666666666666664%;
+  }
+}
+@mixin ms-xxl1 {
+  @media (min-width: $ms-screen-min-xxl) {
+    width: 8.333333333333332%;
+  }
+}
+@mixin ms-xxlPull12 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(100%);
+  }
+}
+@mixin ms-xxlPull11 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(91.66666666666666%);
+  }
+}
+@mixin ms-xxlPull10 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(83.33333333333334%);
+  }
+}
+@mixin ms-xxlPull9 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(75%);
+  }
+}
+@mixin ms-xxlPull8 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(66.66666666666666%);
+  }
+}
+@mixin ms-xxlPull7 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(58.333333333333336%);
+  }
+}
+@mixin ms-xxlPull6 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(50%);
+  }
+}
+@mixin ms-xxlPull5 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(41.66666666666667%);
+  }
+}
+@mixin ms-xxlPull4 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(33.33333333333333%);
+  }
+}
+@mixin ms-xxlPull3 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(25%);
+  }
+}
+@mixin ms-xxlPull2 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(16.666666666666664%);
+  }
+}
+@mixin ms-xxlPull1 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(8.333333333333332%);
+  }
+}
+@mixin ms-xxlPull0 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-right(auto);
+  }
+}
+@mixin ms-xxlPush12 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(100%);
+  }
+}
+@mixin ms-xxlPush11 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(91.66666666666666%);
+  }
+}
+@mixin ms-xxlPush10 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(83.33333333333334%);
+  }
+}
+@mixin ms-xxlPush9 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(75%);
+  }
+}
+@mixin ms-xxlPush8 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(66.66666666666666%);
+  }
+}
+@mixin ms-xxlPush7 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(58.333333333333336%);
+  }
+}
+@mixin ms-xxlPush6 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(50%);
+  }
+}
+@mixin ms-xxlPush5 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(41.66666666666667%);
+  }
+}
+@mixin ms-xxlPush4 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(33.33333333333333%);
+  }
+}
+@mixin ms-xxlPush3 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(25%);
+  }
+}
+@mixin ms-xxlPush2 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(16.666666666666664%);
+  }
+}
+@mixin ms-xxlPush1 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(8.333333333333332%);
+  }
+}
+@mixin ms-xxlPush0 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-left(auto);
+  }
+}
+
+// Extra extra large Offset classes 0 ... 11
+@mixin ms-xxlOffset11 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(91.66666666666666%);
+  }
+}
+@mixin ms-xxlOffset10 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(83.33333333333334%);
+  }
+}
+@mixin ms-xxlOffset9 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(75%);
+  }
+}
+@mixin ms-xxlOffset8 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(66.66666666666666%);
+  }
+}
+@mixin ms-xxlOffset7 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(58.333333333333336%);
+  }
+}
+@mixin ms-xxlOffset6 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(50%);
+  }
+}
+@mixin ms-xxlOffset5 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(41.66666666666667%);
+  }
+}
+@mixin ms-xxlOffset4 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(33.33333333333333%);
+  }
+}
+@mixin ms-xxlOffset3 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(25%);
+  }
+}
+@mixin ms-xxlOffset2 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(16.666666666666664%);
+  }
+}
+@mixin ms-xxlOffset1 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(8.333333333333332%);
+  }
+}
+@mixin ms-xxlOffset0 {
+  @media (min-width: $ms-screen-min-xxl) {
+    @include ms-margin-left(0);
+  }
+}
+
+// Extra extra extra large screens
+@mixin ms-xxxl12 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 100%;
+  }
+}
+@mixin ms-xxxl11 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 91.66666666666666%;
+  }
+}
+@mixin ms-xxxl10 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 83.33333333333334%;
+  }
+}
+@mixin ms-xxxl9 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 75%;
+  }
+}
+@mixin ms-xxxl8 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 66.66666666666666%;
+  }
+}
+@mixin ms-xxxl7 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 58.333333333333336%;
+  }
+}
+@mixin ms-xxxl6 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 50%;
+  }
+}
+@mixin ms-xxxl5 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 41.66666666666667%;
+  }
+}
+@mixin ms-xxxl4 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 33.33333333333333%;
+  }
+}
+@mixin ms-xxxl3 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 25%;
+  }
+}
+@mixin ms-xxxl2 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 16.666666666666664%;
+  }
+}
+@mixin ms-xxxl1 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    width: 8.333333333333332%;
+  }
+}
+@mixin ms-xxxlPull12 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(100%);
+  }
+}
+@mixin ms-xxxlPull11 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(91.66666666666666%);
+  }
+}
+@mixin ms-xxxlPull10 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(83.33333333333334%);
+  }
+}
+@mixin ms-xxxlPull9 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(75%);
+  }
+}
+@mixin ms-xxxlPull8 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(66.66666666666666%);
+  }
+}
+@mixin ms-xxxlPull7 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(58.333333333333336%);
+  }
+}
+@mixin ms-xxxlPull6 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(50%);
+  }
+}
+@mixin ms-xxxlPull5 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(41.66666666666667%);
+  }
+}
+@mixin ms-xxxlPull4 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(33.33333333333333%);
+  }
+}
+@mixin ms-xxxlPull3 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(25%);
+  }
+}
+@mixin ms-xxxlPull2 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(16.666666666666664%);
+  }
+}
+@mixin ms-xxxlPull1 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(8.333333333333332%);
+  }
+}
+@mixin ms-xxxlPull0 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-right(auto);
+  }
+}
+@mixin ms-xxxlPush12 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(100%);
+  }
+}
+@mixin ms-xxxlPush11 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(91.66666666666666%);
+  }
+}
+@mixin ms-xxxlPush10 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(83.33333333333334%);
+  }
+}
+@mixin ms-xxxlPush9 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(75%);
+  }
+}
+@mixin ms-xxxlPush8 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(66.66666666666666%);
+  }
+}
+@mixin ms-xxxlPush7 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(58.333333333333336%);
+  }
+}
+@mixin ms-xxxlPush6 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(50%);
+  }
+}
+@mixin ms-xxxlPush5 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(41.66666666666667%);
+  }
+}
+@mixin ms-xxxlPush4 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(33.33333333333333%);
+  }
+}
+@mixin ms-xxxlPush3 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(25%);
+  }
+}
+@mixin ms-xxxlPush2 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(16.666666666666664%);
+  }
+}
+@mixin ms-xxxlPush1 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(8.333333333333332%);
+  }
+}
+@mixin ms-xxxlPush0 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-left(auto);
+  }
+}
+
+// Extra extra extra large Offset classes 0 ... 11
+@mixin ms-xxxlOffset11 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(91.66666666666666%);
+  }
+}
+@mixin ms-xxxlOffset10 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(83.33333333333334%);
+  }
+}
+@mixin ms-xxxlOffset9 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(75%);
+  }
+}
+@mixin ms-xxxlOffset8 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(66.66666666666666%);
+  }
+}
+@mixin ms-xxxlOffset7 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(58.333333333333336%);
+  }
+}
+@mixin ms-xxxlOffset6 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(50%);
+  }
+}
+@mixin ms-xxxlOffset5 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(41.66666666666667%);
+  }
+}
+@mixin ms-xxxlOffset4 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(33.33333333333333%);
+  }
+}
+@mixin ms-xxxlOffset3 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(25%);
+  }
+}
+@mixin ms-xxxlOffset2 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(16.666666666666664%);
+  }
+}
+@mixin ms-xxxlOffset1 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(8.333333333333332%);
+  }
+}
+@mixin ms-xxxlOffset0 {
+  @media (min-width: $ms-screen-min-xxxl) {
+    @include ms-margin-left(0);
+  }
+}
+
+// Min-width media queries.
+@mixin ms-screen-md-up {
+  @media only screen and (min-width: $ms-screen-min-md) {
+    @content;
+  }
+}
+
+@mixin ms-screen-lg-up {
+  @media only screen and (min-width: $ms-screen-min-lg) {
+    @content;
+  }
+}
+
+@mixin ms-screen-xl-up {
+  @media only screen and (min-width: $ms-screen-min-xl) {
+    @content;
+  }
+}
+
+@mixin ms-screen-xxl-up {
+  @media only screen and (min-width: $ms-screen-min-xxl) {
+    @content;
+  }
+}
+
+@mixin ms-screen-xxxl-up {
+  @media only screen and (min-width: $ms-screen-min-xxxl) {
+    @content;
+  }
+}
+
+// Max-width media queries.
+@mixin ms-screen-sm-down {
+  @media only screen and (max-width: $ms-screen-max-sm) {
+    @content;
+  }
+}
+
+@mixin ms-screen-md-down {
+  @media only screen and (max-width: $ms-screen-max-md) {
+    @content;
+  }
+}
+
+@mixin ms-screen-lg-down {
+  @media only screen and (max-width: $ms-screen-max-lg) {
+    @content;
+  }
+}
+
+@mixin ms-screen-xl-down {
+  @media only screen and (max-width: $ms-screen-max-xl) {
+    @content;
+  }
+}
+
+@mixin ms-screen-xxl-down {
+  @media only screen and (max-width: $ms-screen-max-xxl) {
+    @content;
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/mixins/_ScopedStyles.Mixins.scss b/packages/au1-app/src/resources/sass/mixins/_ScopedStyles.Mixins.scss
new file mode 100644
index 0000000..bb0ae06
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/mixins/_ScopedStyles.Mixins.scss
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+
+$ms-fabric-version-major: nth($ms-fabric-version, 1);
+$ms-fabric-version-minor: nth($ms-fabric-version, 2);
+$ms-fabric-version-patch: nth($ms-fabric-version, 3);
+
+// The CSS class for scoping styles to the current version of Fabric.
+$ms-fabric-version-suffix: '--v' + $ms-fabric-version-major + '-' + $ms-fabric-version-minor + '-' + $ms-fabric-version-patch;
+$ms-fabric-scope-class: '.ms-Fabric' + $ms-fabric-version-suffix;
+
+// A mixin to scope styles to the current version of Fabric.
+// Produces styles of the form .ms-Fabric-{version #} @content.
+@mixin scope-fabric {
+  #{$ms-fabric-scope-class} {
+    @content;
+  }
+}
diff --git a/packages/au1-app/src/resources/sass/variables/_Animation.Variables.MDL2.scss b/packages/au1-app/src/resources/sass/variables/_Animation.Variables.MDL2.scss
new file mode 100644
index 0000000..a768743
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Animation.Variables.MDL2.scss
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Easings
+$ms-animation-ease-1: cubic-bezier(0.1,0.9,0.2,1) !default;
+$ms-animation-ease-2: cubic-bezier(0.1,0.25,0.75,0.9) !default;
+
+// Durations
+$ms-animation-duration-1: 0.167s !default;
+$ms-animation-duration-2: 0.267s !default;
+$ms-animation-duration-3: 0.367s !default;
+$ms-animation-duration-4: 0.467s !default;
diff --git a/packages/au1-app/src/resources/sass/variables/_Animation.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Animation.Variables.scss
new file mode 100644
index 0000000..bc01626
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Animation.Variables.scss
@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Timing curves.
+$ms-motion-timing-accelerate: cubic-bezier(0.9, 0.1, 1, 0.2);
+$ms-motion-timing-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
+$ms-motion-timing-linear: cubic-bezier(0, 0, 1, 1);
+$ms-motion-timing-standard: cubic-bezier(0.8, 0, 0.2, 1);
+
+// Durations.
+$ms-motion-duration-1: 100ms;
+$ms-motion-duration-2: 200ms;
+$ms-motion-duration-3: 300ms;
+$ms-motion-duration-4: 400ms;
+
+// Deprecated MDL2 animation variables.
+@import "./Animation.Variables.MDL2";
diff --git a/packages/au1-app/src/resources/sass/variables/_BrandIcon.Variables.scss b/packages/au1-app/src/resources/sass/variables/_BrandIcon.Variables.scss
new file mode 100644
index 0000000..c741a9d
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_BrandIcon.Variables.scss
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Image paths
+$ms-brand-icon-product-images-path:   'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png';
+$ms-brand-icon-document-images-path:  'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent';
+
+// Names
+$ms-brand-icon-product-icons:  access excel infopath office onedrive onenote outlook powerpoint project sharepoint teams visio word;
+$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip;
+
+// Sizes
+$ms-brand-icon-sizes: 16 48 96;
diff --git a/packages/au1-app/src/resources/sass/variables/_Color.Variables.MDL2.scss b/packages/au1-app/src/resources/sass/variables/_Color.Variables.MDL2.scss
new file mode 100644
index 0000000..9cb673e
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Color.Variables.MDL2.scss
@@ -0,0 +1,77 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Theme
+$ms-color-themeDarker: $ms-color-communicationShade30 !default;
+$ms-color-themeDark: $ms-color-communicationShade20 !default;
+$ms-color-themeDarkAlt: $ms-color-communicationShade10 !default;
+$ms-color-themePrimary: $ms-color-communicationPrimary !default;
+$ms-color-themeSecondary: $ms-color-communicationTint10 !default;
+$ms-color-themeTertiary: #71afe5 !default;
+$ms-color-themeLight: $ms-color-communicationTint20 !default;
+$ms-color-themeLighter: $ms-color-communicationTint30 !default;
+$ms-color-themeLighterAlt: $ms-color-communicationTint40 !default;
+
+// Neutral
+// The original colors have been overridden by the new palette, with warmer grays.
+$ms-color-black: #000000 !default;
+$ms-color-neutralDark: $ms-color-gray190 !default;
+$ms-color-neutralPrimary: $ms-color-gray160 !default;
+$ms-color-neutralPrimaryAlt: $ms-color-gray150 !default;
+$ms-color-neutralSecondary: $ms-color-gray130 !default;
+$ms-color-neutralSecondaryAlt: $ms-color-gray120 !default;
+$ms-color-neutralTertiary: $ms-color-gray90 !default;
+$ms-color-neutralTertiaryAlt: $ms-color-gray60 !default;
+$ms-color-neutralQuaternary: $ms-color-gray50 !default;
+$ms-color-neutralQuaternaryAlt: $ms-color-gray40 !default;
+$ms-color-neutralLight: $ms-color-gray30 !default;
+$ms-color-neutralLighter: $ms-color-gray20 !default;
+$ms-color-neutralLighterAlt: $ms-color-gray10 !default;
+$ms-color-white: #ffffff !default;
+
+// Accent
+// Where possible, these colors have been mapped to the new palette.
+$ms-color-yellow:        #ffb900 !default;
+$ms-color-yellowLight:   #fff100 !default;
+$ms-color-orange:        #d83b01 !default;
+$ms-color-orangeLight:   #ea4300 !default;
+$ms-color-orangeLighter: #ff8c00 !default;
+$ms-color-redDark:       #a80000 !default;
+$ms-color-red:           #e81123 !default;
+$ms-color-magentaDark:   #5c005c !default;
+$ms-color-magenta:       #b4009e !default;
+$ms-color-magentaLight:  $ms-color-sharedMagentaPink10 !default;
+$ms-color-purpleDark:    #32145a !default;
+$ms-color-purple:        #5c2d91 !default;
+$ms-color-purpleLight:   #b4a0ff !default;
+$ms-color-blueDark:      #002050 !default;
+$ms-color-blueMid:       #00188f !default;
+$ms-color-blue:          #0078d4 !default;
+$ms-color-blueLight:     #00bcf2 !default;
+$ms-color-tealDark:      #004b50 !default;
+$ms-color-teal:          #008272 !default;
+$ms-color-tealLight:     #00b294 !default;
+$ms-color-greenDark:     #004b1c !default;
+$ms-color-green:         #107c10 !default;
+$ms-color-greenLight:    #bad80a !default;
+
+// Message
+$ms-color-info: $ms-color-neutralSecondaryAlt !default;
+$ms-color-infoBackground: $ms-color-neutralLighter !default;
+$ms-color-success: $ms-color-green !default;
+$ms-color-successBackground: #dff6dd !default;
+$ms-color-severeWarning: $ms-color-orange !default;
+$ms-color-severeWarningBackground: #fed9cc !default;
+$ms-color-alert: $ms-color-severeWarning !default; // Deprecated: Use $ms-color-severeWarning
+$ms-color-alertBackground: $ms-color-severeWarningBackground !default; // Deprecated: Use $ms-color-severeWarningBackground
+$ms-color-warning: $ms-color-neutralSecondaryAlt !default;
+$ms-color-warningBackground: #fff4ce !default;
+$ms-color-error: $ms-color-redDark !default;
+$ms-color-errorBackground: #fde7e9 !default;
+
+// High contrast
+$ms-color-contrastBlackDisabled: #00ff00 !default;
+$ms-color-contrastWhiteDisabled: #600000 !default;
+$ms-color-contrastBlackSelected: #1aebff !default;
+$ms-color-contrastWhiteSelected: #37006e !default;
diff --git a/packages/au1-app/src/resources/sass/variables/_Color.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Color.Variables.scss
new file mode 100644
index 0000000..611f3f2
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Color.Variables.scss
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+$ms-color-communicationShade30: #004578 !default;
+$ms-color-communicationShade20: #005a9e !default;
+$ms-color-communicationShade10: #106ebe !default;
+$ms-color-communicationPrimary: #0078d4 !default;
+$ms-color-communicationTint10: #2b88d8 !default;
+$ms-color-communicationTint20: #c7e0f4 !default;
+$ms-color-communicationTint30: #deecf9 !default;
+$ms-color-communicationTint40: #eff6fc !default;
+
+// Neutrals
+$ms-color-black: #000000 !default;
+$ms-color-gray220: #11100f !default;
+$ms-color-gray210: #161514 !default;
+$ms-color-gray200: #1b1a19 !default;
+$ms-color-gray190: #201f1e !default;
+$ms-color-gray180: #252423 !default;
+$ms-color-gray170: #292827 !default;
+$ms-color-gray160: #323130 !default;
+$ms-color-gray150: #3b3a39 !default;
+$ms-color-gray140: #484644 !default;
+$ms-color-gray130: #605e5c !default;
+$ms-color-gray120: #797775 !default;
+$ms-color-gray110: #8a8886 !default;
+$ms-color-gray100: #979593 !default;
+$ms-color-gray90: #a19f9d !default;
+$ms-color-gray80: #b3b0ad !default;
+$ms-color-gray70: #bebbb8 !default;
+$ms-color-gray60: #c8c6c4 !default;
+$ms-color-gray50: #d2d0ce !default;
+$ms-color-gray40: #e1dfdd !default;
+$ms-color-gray30: #edebe9 !default;
+$ms-color-gray20: #f3f2f1 !default;
+$ms-color-gray10: #faf9f8 !default;
+$ms-color-white: #ffffff !default;
+
+// Shared
+$ms-color-sharedPinkRed10: #750b1c !default;
+$ms-color-sharedRed20: #a4262c !default;
+$ms-color-sharedRed10: #d13438 !default;
+$ms-color-sharedRedOrange20: #603d30 !default;
+$ms-color-sharedRedOrange10: #da3b01 !default;
+$ms-color-sharedOrange30: #8e562e !default;
+$ms-color-sharedOrange20: #ca5010 !default;
+$ms-color-sharedOrange10: #ffaa44 !default;
+$ms-color-sharedYellow10: #fce100 !default;
+$ms-color-sharedOrangeYellow20: #986f0b !default;
+$ms-color-sharedOrangeYellow10: #c19c00 !default;
+$ms-color-sharedYellowGreen10: #8cbd18 !default;
+$ms-color-sharedGreen20: #0b6a0b !default;
+$ms-color-sharedGreen10: #498205 !default;
+$ms-color-sharedGreenCyan10: #00ad56 !default;
+$ms-color-sharedCyan40: #005e50 !default;
+$ms-color-sharedCyan30: #005b70 !default;
+$ms-color-sharedCyan20: #038387 !default;
+$ms-color-sharedCyan10: #00b7c3 !default;
+$ms-color-sharedCyanBlue20: #004e8c !default;
+$ms-color-sharedCyanBlue10: #0078d4 !default;
+$ms-color-sharedBlue10: #4f6bed !default;
+$ms-color-sharedBlueMagenta40: #373277 !default;
+$ms-color-sharedBlueMagenta30: #5c2e91 !default;
+$ms-color-sharedBlueMagenta20: #8764b8 !default;
+$ms-color-sharedBlueMagenta10: #8378de !default;
+$ms-color-sharedMagenta20: #881798 !default;
+$ms-color-sharedMagenta10: #c239b3 !default;
+$ms-color-sharedMagentaPink20: #9b0062 !default;
+$ms-color-sharedMagentaPink10: #e3008c !default;
+$ms-color-sharedGray40: #393939 !default;
+$ms-color-sharedGray30: #7a7574 !default;
+$ms-color-sharedGray20: #69797e !default;
+$ms-color-sharedGray10: #a0aeb2 !default;
+
+// Deprecated MDL2 color variables.
+@import "./Color.Variables.MDL2";
diff --git a/packages/au1-app/src/resources/sass/variables/_Depth.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Depth.Variables.scss
new file mode 100644
index 0000000..e55ae0d
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Depth.Variables.scss
@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+$ms-depth-shadow-0: 0 0 0 0 transparent !default;
+$ms-depth-shadow-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18) !default;
diff --git a/packages/au1-app/src/resources/sass/variables/_Font.Variables.MDL2.scss b/packages/au1-app/src/resources/sass/variables/_Font.Variables.MDL2.scss
new file mode 100644
index 0000000..38e2f02
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Font.Variables.MDL2.scss
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Weights
+$ms-font-weight-light:     100 !default;
+$ms-font-weight-semilight: 300 !default;
+
+// Sizes
+$ms-font-size-su:       42px !default;
+$ms-font-size-xxl:      28px !default;
+$ms-font-size-xl-plus:  24px !default;
+$ms-font-size-xl:       21px !default;
+$ms-font-size-l:        17px !default;
+$ms-font-size-m-plus:   15px !default;
+$ms-font-size-m:        14px !default;
+$ms-font-size-s-plus:   13px !default;
+$ms-font-size-s:        12px !default;
+$ms-font-size-xs:       11px !default;
+$ms-font-size-mi:       10px !default;
diff --git a/packages/au1-app/src/resources/sass/variables/_Font.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Font.Variables.scss
new file mode 100644
index 0000000..e20e890
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Font.Variables.scss
@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Font directory and paths
+$ms-font-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/fonts' !default;
+
+// Fallback fonts, if specified system or web fonts are unavailable.
+$ms-font-family-fallbacks: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
+
+// Language-specific font stacks.
+$ms-font-family-arabic:              'Segoe UI Web (Arabic)', $ms-font-family-fallbacks !default;
+$ms-font-family-chinese-simplified:  'Microsoft Yahei UI', Verdana, Simsun, $ms-font-family-fallbacks !default;
+$ms-font-family-chinese-traditional: 'Microsoft Jhenghei UI', Pmingliu, $ms-font-family-fallbacks !default;
+$ms-font-family-cyrillic:            'Segoe UI Web (Cyrillic)', $ms-font-family-fallbacks !default;
+$ms-font-family-east-european:       'Segoe UI Web (East European)', $ms-font-family-fallbacks !default;
+$ms-font-family-greek:               'Segoe UI Web (Greek)', $ms-font-family-fallbacks !default;
+$ms-font-family-hebrew:              'Segoe UI Web (Hebrew)', $ms-font-family-fallbacks !default;
+$ms-font-family-hindi:               'Nirmala UI', $ms-font-family-fallbacks !default;
+$ms-font-family-japanese:            'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-family-fallbacks !default;
+$ms-font-family-korean:              'Malgun Gothic', Gulim, $ms-font-family-fallbacks !default;
+$ms-font-family-lao:                 'Leelawadee UI Web', 'Lao UI', DokChampa, $ms-font-family-fallbacks !default;
+$ms-font-family-selawik:             'Selawik Web', $ms-font-family-fallbacks !default;
+$ms-font-family-thai:                'Leelawadee UI Web', 'Kmer UI', $ms-font-family-fallbacks !default;
+$ms-font-family-vietnamese:          'Segoe UI Web (Vietnamese)', $ms-font-family-fallbacks !default;
+$ms-font-family-west-european:       'Segoe UI Web (West European)', $ms-font-family-fallbacks !default;
+
+// Weights.
+$ms-font-weight-regular: 400 !default;
+$ms-font-weight-semibold: 600 !default;
+$ms-font-weight-bold: 700 !default;
+
+// Sizes.
+$ms-font-size-68: 68px !default;
+$ms-font-size-42: 42px !default;
+$ms-font-size-32: 32px !default;
+$ms-font-size-28: 28px !default;
+$ms-font-size-24: 24px !default;
+$ms-font-size-20: 20px !default;
+$ms-font-size-18: 18px !default;
+$ms-font-size-16: 16px !default;
+$ms-font-size-14: 14px !default;
+$ms-font-size-12: 12px !default;
+$ms-font-size-10: 10px !default;
+
+// Deprecated MDL2 font variables.
+@import "./Font.Variables.MDL2";
diff --git a/packages/au1-app/src/resources/sass/variables/_General.Variables.scss b/packages/au1-app/src/resources/sass/variables/_General.Variables.scss
new file mode 100644
index 0000000..239dabb
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_General.Variables.scss
@@ -0,0 +1,6 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Default focus border style.
+$ms-focus-border-width: 1px;
+$ms-focus-border-color: $ms-color-neutralSecondary;
+$ms-focus-border-style: solid;
diff --git a/packages/au1-app/src/resources/sass/variables/_Icon.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Icon.Variables.scss
new file mode 100644
index 0000000..190f905
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Icon.Variables.scss
@@ -0,0 +1,3877 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Icon directory and paths
+$ms-icon-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/icons' !default;
+
+// Sizes
+$ms-icon-size-xs: 10px;
+$ms-icon-size-s: 12px;
+$ms-icon-size-m: 16px;
+$ms-icon-size-l: 20px;
+
+// Icons
+$ms-icon-code-12PointStar: '\F505';
+$ms-icon-code-6PointStar: '\F504';
+$ms-icon-code-AADLogo: '\ED68';
+$ms-icon-code-Accept: '\E8FB';
+$ms-icon-code-AccessibiltyChecker: '\F835';
+$ms-icon-code-AccessLogo: '\ED69';
+$ms-icon-code-AccessLogoFill: '\F1DB';
+$ms-icon-code-AccountActivity: '\EFF4';
+$ms-icon-code-AccountBrowser: '\F652';
+$ms-icon-code-AccountManagement: '\F55C';
+$ms-icon-code-Accounts: '\E910';
+$ms-icon-code-ActionCenter: '\E91C';
+$ms-icon-code-ActivateOrders: '\EFE0';
+$ms-icon-code-ActivityFeed: '\F056';
+$ms-icon-code-Add: '\E710';
+$ms-icon-code-AddBookmark: '\F5B7';
+$ms-icon-code-AddEvent: '\EEB5';
+$ms-icon-code-AddFavorite: '\F0C8';
+$ms-icon-code-AddFavoriteFill: '\F0C9';
+$ms-icon-code-AddFriend: '\E8FA';
+$ms-icon-code-AddGroup: '\EE3D';
+$ms-icon-code-AddHome: '\F17B';
+$ms-icon-code-AddIn: '\F775';
+$ms-icon-code-AddLink: '\E35E';
+$ms-icon-code-AddNotes: '\EAE3';
+$ms-icon-code-AddOnlineMeeting: '\ED8E';
+$ms-icon-code-AddPhone: '\ED96';
+$ms-icon-code-AddReaction: '\F85D';
+$ms-icon-code-AddSpaceAfter: '\E3DF';
+$ms-icon-code-AddSpaceBefore: '\E3DE';
+$ms-icon-code-AddTo: '\ECC8';
+$ms-icon-code-AddToShoppingList: '\EA9A';
+$ms-icon-code-AddWork: '\F17C';
+$ms-icon-code-Admin: '\E7EF';
+$ms-icon-code-AdminALogo32: '\F4BA';
+$ms-icon-code-AdminALogoFill32: '\F4BB';
+$ms-icon-code-AdminALogoInverse32: '\ED6A';
+$ms-icon-code-AdminCLogoInverse32: '\ED6B';
+$ms-icon-code-AdminDLogoInverse32: '\ED6C';
+$ms-icon-code-AdminELogoInverse32: '\ED6D';
+$ms-icon-code-AdminLLogoInverse32: '\ED6E';
+$ms-icon-code-AdminMLogoInverse32: '\ED6F';
+$ms-icon-code-AdminOLogoInverse32: '\ED70';
+$ms-icon-code-AdminPLogoInverse32: '\ED71';
+$ms-icon-code-AdminSLogoInverse32: '\ED72';
+$ms-icon-code-AdminYLogoInverse32: '\ED73';
+$ms-icon-code-Airplane: '\E709';
+$ms-icon-code-AirplaneSolid: '\EB4C';
+$ms-icon-code-AirTickets: '\EF7A';
+$ms-icon-code-AlarmClock: '\E919';
+$ms-icon-code-Album: '\E7AB';
+$ms-icon-code-AlbumRemove: '\EC62';
+$ms-icon-code-AlertSettings: '\F8B6';
+$ms-icon-code-AlertSolid: '\F331';
+$ms-icon-code-AlignCenter: '\E8E3';
+$ms-icon-code-AlignHorizontalCenter: '\F4F4';
+$ms-icon-code-AlignHorizontalLeft: '\F4F3';
+$ms-icon-code-AlignHorizontalRight: '\F4F5';
+$ms-icon-code-AlignJustify: '\F51E';
+$ms-icon-code-AlignLeft: '\E8E4';
+$ms-icon-code-AlignRight: '\E8E2';
+$ms-icon-code-AlignVerticalBottom: '\F4F8';
+$ms-icon-code-AlignVerticalCenter: '\F4F7';
+$ms-icon-code-AlignVerticalTop: '\F4F6';
+$ms-icon-code-AllApps: '\E71D';
+$ms-icon-code-AllAppsMirrored: '\EA40';
+$ms-icon-code-AllCurrency: '\EAE4';
+$ms-icon-code-AltText: '\E397';
+$ms-icon-code-AnalyticsLogo: '\F1DE';
+$ms-icon-code-AnalyticsQuery: '\F1DF';
+$ms-icon-code-AnalyticsReport: '\F1E1';
+$ms-icon-code-AnalyticsView: '\F5F1';
+$ms-icon-code-AnchorLock: '\F511';
+$ms-icon-code-Annotation: '\E924';
+$ms-icon-code-AppIconDefault: '\ECAA';
+$ms-icon-code-AppIconDefaultAdd: '\EFDA';
+$ms-icon-code-AppIconDefaultList: '\EFDE';
+$ms-icon-code-Archive: '\F03F';
+$ms-icon-code-ArchiveUndo: '\E3A1';
+$ms-icon-code-AreaChart: '\E9D2';
+$ms-icon-code-ArrangeBringForward: '\F509';
+$ms-icon-code-ArrangeBringToFront: '\F506';
+$ms-icon-code-ArrangeByFrom: '\F678';
+$ms-icon-code-ArrangeSendBackward: '\F508';
+$ms-icon-code-ArrangeSendToBack: '\F507';
+$ms-icon-code-Arrivals: '\EB34';
+$ms-icon-code-ArrowDownRight8: '\EED5';
+$ms-icon-code-ArrowDownRightMirrored8: '\EEF0';
+$ms-icon-code-ArrowTallDownLeft: '\F2BF';
+$ms-icon-code-ArrowTallDownRight: '\F2C0';
+$ms-icon-code-ArrowTallUpLeft: '\F2BD';
+$ms-icon-code-ArrowTallUpRight: '\F2BE';
+$ms-icon-code-ArrowUpRight: '\F069';
+$ms-icon-code-ArrowUpRight8: '\EED4';
+$ms-icon-code-ArrowUpRightMirrored8: '\EEEF';
+$ms-icon-code-Articles: '\EAC1';
+$ms-icon-code-Ascending: '\EDC0';
+$ms-icon-code-AspectRatio: '\E799';
+$ms-icon-code-AssessmentGroup: '\F31A';
+$ms-icon-code-AssessmentGroupTemplate: '\F2B1';
+$ms-icon-code-AssetLibrary: '\EEB6';
+$ms-icon-code-Assign: '\E9D3';
+$ms-icon-code-Asterisk: '\EA38';
+$ms-icon-code-AsteriskSolid: '\F34D';
+$ms-icon-code-ATPLogo: '\EF85';
+$ms-icon-code-Attach: '\E723';
+$ms-icon-code-AustralianRules: '\EE70';
+$ms-icon-code-AuthenticatorApp: '\F6B1';
+$ms-icon-code-AutoDeploySettings: '\F3FA';
+$ms-icon-code-AutoEnhanceOff: '\E78E';
+$ms-icon-code-AutoEnhanceOn: '\E78D';
+$ms-icon-code-AutoFillTemplate: '\F313';
+$ms-icon-code-AutoFitContents: '\E3E8';
+$ms-icon-code-AutoFitWindow: '\E3E9';
+$ms-icon-code-AutoHeight: '\F512';
+$ms-icon-code-AutomateFlow: '\E3F5';
+$ms-icon-code-AutoRacing: '\EB24';
+$ms-icon-code-AwayStatus: '\EE6A';
+$ms-icon-code-AzureAPIManagement: '\F37F';
+$ms-icon-code-AzureKeyVault: '\F3B4';
+$ms-icon-code-AzureLogo: '\EB6A';
+$ms-icon-code-AzureServiceEndpoint: '\F380';
+$ms-icon-code-Back: '\E72B';
+$ms-icon-code-BackgroundColor: '\F42B';
+$ms-icon-code-Backlog: '\F2AC';
+$ms-icon-code-BacklogBoard: '\F444';
+$ms-icon-code-BacklogList: '\F6BF';
+$ms-icon-code-BackToWindow: '\E73F';
+$ms-icon-code-Badge: '\EC1B';
+$ms-icon-code-Balloons: '\ED7E';
+$ms-icon-code-Bank: '\E825';
+$ms-icon-code-BankSolid: '\F34F';
+$ms-icon-code-BarChart4: '\EAE7';
+$ms-icon-code-BarChartHorizontal: '\E9EB';
+$ms-icon-code-BarChartVertical: '\E9EC';
+$ms-icon-code-BarChartVerticalEdit: '\F89D';
+$ms-icon-code-BarChartVerticalFill: '\F830';
+$ms-icon-code-BarChartVerticalFilter: '\F77E';
+$ms-icon-code-BarChartVerticalFilterSolid: '\F77F';
+$ms-icon-code-Baseball: '\EB20';
+$ms-icon-code-BeerMug: '\F49E';
+$ms-icon-code-BIDashboard: '\F543';
+$ms-icon-code-BidiLtr: '\E9AA';
+$ms-icon-code-BidiRtl: '\E9AB';
+$ms-icon-code-BingLogo: '\EB6B';
+$ms-icon-code-BirthdayCake: '\EF8D';
+$ms-icon-code-BlockContact: '\E8F8';
+$ms-icon-code-Blocked: '\E733';
+$ms-icon-code-Blocked12: '\F62E';
+$ms-icon-code-Blocked2: '\ECE4';
+$ms-icon-code-Blocked2Solid: '\F737';
+$ms-icon-code-BlockedSite: '\E72F';
+$ms-icon-code-BlockedSiteSolid12: '\F70A';
+$ms-icon-code-BlockedSolid: '\F531';
+$ms-icon-code-Blog: '\F22B';
+$ms-icon-code-BlowingSnow: '\E9C9';
+$ms-icon-code-Blur: '\F28E';
+$ms-icon-code-Boards: '\EF68';
+$ms-icon-code-Bold: '\E8DD';
+$ms-icon-code-BookAnswers: '\F8A4';
+$ms-icon-code-BookingsLogo: '\EDC7';
+$ms-icon-code-BookmarkReport: '\F76B';
+$ms-icon-code-Bookmarks: '\E8A4';
+$ms-icon-code-BookmarksMirrored: '\EA41';
+$ms-icon-code-BorderDash: '\F50A';
+$ms-icon-code-BorderDot: '\F50B';
+$ms-icon-code-BoxAdditionSolid: '\F2D4';
+$ms-icon-code-BoxCheckmarkSolid: '\F2D7';
+$ms-icon-code-BoxMultiplySolid: '\F2D5';
+$ms-icon-code-BoxPlaySolid: '\F2D6';
+$ms-icon-code-BoxSubtractSolid: '\F2D3';
+$ms-icon-code-BranchCommit: '\F293';
+$ms-icon-code-BranchCompare: '\F294';
+$ms-icon-code-BranchFork: '\F173';
+$ms-icon-code-BranchFork2: '\F291';
+$ms-icon-code-BranchLocked: '\F292';
+$ms-icon-code-BranchMerge: '\F295';
+$ms-icon-code-BranchPullRequest: '\F296';
+$ms-icon-code-BranchSearch: '\F297';
+$ms-icon-code-BranchShelveset: '\F298';
+$ms-icon-code-Breadcrumb: '\EF8C';
+$ms-icon-code-Breakfast: '\F49C';
+$ms-icon-code-Brightness: '\E706';
+$ms-icon-code-Broom: '\EA99';
+$ms-icon-code-BrowserScreenShot: '\EBED';
+$ms-icon-code-BrowserTab: '\F5D7';
+$ms-icon-code-BrowserTabScreenshot: '\F5D8';
+$ms-icon-code-Brunch: '\F49D';
+$ms-icon-code-Brush: '\ECFF';
+$ms-icon-code-BucketColor: '\F1B6';
+$ms-icon-code-BucketColorFill: '\F1B7';
+$ms-icon-code-BufferTimeAfter: '\F0D0';
+$ms-icon-code-BufferTimeBefore: '\F0CF';
+$ms-icon-code-BufferTimeBoth: '\F0D1';
+$ms-icon-code-Bug: '\EBE8';
+$ms-icon-code-BugBlock: '\E400';
+$ms-icon-code-BugSolid: '\F335';
+$ms-icon-code-BugSync: '\E3FF';
+$ms-icon-code-Build: '\F28F';
+$ms-icon-code-BuildDefinition: '\F6E9';
+$ms-icon-code-BuildIssue: '\F319';
+$ms-icon-code-BuildQueue: '\F24F';
+$ms-icon-code-BuildQueueNew: '\F250';
+$ms-icon-code-BulkUpload: '\F548';
+$ms-icon-code-BulletedList: '\E8FD';
+$ms-icon-code-BulletedList2: '\F2C7';
+$ms-icon-code-BulletedList2Mirrored: '\F2C8';
+$ms-icon-code-BulletedListBullet: '\F793';
+$ms-icon-code-BulletedListBulletMirrored: '\F795';
+$ms-icon-code-BulletedListMirrored: '\EA42';
+$ms-icon-code-BulletedListText: '\F792';
+$ms-icon-code-BulletedListTextMirrored: '\F794';
+$ms-icon-code-BulletedTreeList: '\F84C';
+$ms-icon-code-Bullseye: '\F272';
+$ms-icon-code-BullseyeTarget: '\F5F0';
+$ms-icon-code-BullseyeTargetEdit: '\E319';
+$ms-icon-code-Bus: '\E806';
+$ms-icon-code-BusinessCenterLogo: '\F4B2';
+$ms-icon-code-BusinessHoursSign: '\F310';
+$ms-icon-code-BusSolid: '\EB47';
+$ms-icon-code-ButtonControl: '\F6C0';
+$ms-icon-code-Cafe: '\EC32';
+$ms-icon-code-Cake: '\ECA4';
+$ms-icon-code-Calculator: '\E8EF';
+$ms-icon-code-CalculatorAddition: '\E948';
+$ms-icon-code-CalculatorDelta: '\E406';
+$ms-icon-code-CalculatorEqualTo: '\E94E';
+$ms-icon-code-CalculatorMultiply: '\E947';
+$ms-icon-code-CalculatorNotEqualTo: '\F2D2';
+$ms-icon-code-CalculatorPercentage: '\E94C';
+$ms-icon-code-CalculatorSubtract: '\E949';
+$ms-icon-code-Calendar: '\E787';
+$ms-icon-code-CalendarAgenda: '\EE9A';
+$ms-icon-code-CalendarDay: '\E8BF';
+$ms-icon-code-CalendarMirrored: '\ED28';
+$ms-icon-code-CalendarReply: '\E8F5';
+$ms-icon-code-CalendarSettings: '\F558';
+$ms-icon-code-CalendarSettingsMirrored: '\F559';
+$ms-icon-code-CalendarWeek: '\E8C0';
+$ms-icon-code-CalendarWorkWeek: '\EF51';
+$ms-icon-code-CalendarYear: '\E371';
+$ms-icon-code-Calories: '\ECAD';
+$ms-icon-code-CaloriesAdd: '\F172';
+$ms-icon-code-Camera: '\E722';
+$ms-icon-code-CampaignTemplate: '\F811';
+$ms-icon-code-Cancel: '\E711';
+$ms-icon-code-CannedChat: '\F0F2';
+$ms-icon-code-Car: '\E804';
+$ms-icon-code-CaretBottomLeftCenter8: '\F365';
+$ms-icon-code-CaretBottomLeftSolid8: '\F121';
+$ms-icon-code-CaretBottomRightCenter8: '\F364';
+$ms-icon-code-CaretBottomRightSolid8: '\F122';
+$ms-icon-code-CaretDown8: '\EDD8';
+$ms-icon-code-CaretDownSolid8: '\EDDC';
+$ms-icon-code-CaretHollow: '\E817';
+$ms-icon-code-CaretHollowMirrored: '\EA45';
+$ms-icon-code-CaretLeft8: '\EDD5';
+$ms-icon-code-CaretLeftSolid8: '\EDD9';
+$ms-icon-code-CaretRight: '\F06B';
+$ms-icon-code-CaretRight8: '\EDD6';
+$ms-icon-code-CaretRightSolid8: '\EDDA';
+$ms-icon-code-CaretSolid: '\E818';
+$ms-icon-code-CaretSolid16: '\EE62';
+$ms-icon-code-CaretSolidDown: '\F08E';
+$ms-icon-code-CaretSolidLeft: '\F08D';
+$ms-icon-code-CaretSolidMirrored: '\EA46';
+$ms-icon-code-CaretSolidRight: '\F08F';
+$ms-icon-code-CaretSolidUp: '\F090';
+$ms-icon-code-CaretTopLeftCenter8: '\F367';
+$ms-icon-code-CaretTopLeftSolid8: '\EF54';
+$ms-icon-code-CaretTopRightCenter8: '\F366';
+$ms-icon-code-CaretTopRightSolid8: '\EF55';
+$ms-icon-code-CaretUp8: '\EDD7';
+$ms-icon-code-CaretUpSolid8: '\EDDB';
+$ms-icon-code-Cat: '\ED7F';
+$ms-icon-code-CellPhone: '\E8EA';
+$ms-icon-code-Certificate: '\EB95';
+$ms-icon-code-CertifiedDatabase: '\F5BB';
+$ms-icon-code-ChangeEntitlements: '\E310';
+$ms-icon-code-Chart: '\E999';
+$ms-icon-code-ChartSeries: '\F513';
+$ms-icon-code-ChartTemplate: '\F812';
+$ms-icon-code-ChartXAngle: '\F514';
+$ms-icon-code-ChartYAngle: '\F515';
+$ms-icon-code-Chat: '\E901';
+$ms-icon-code-ChatBot: '\F08B';
+$ms-icon-code-ChatInviteFriend: '\ECFE';
+$ms-icon-code-ChatSolid: '\F344';
+$ms-icon-code-Checkbox: '\E739';
+$ms-icon-code-CheckboxComposite: '\E73A';
+$ms-icon-code-CheckboxCompositeReversed: '\E73D';
+$ms-icon-code-CheckboxFill: '\E73B';
+$ms-icon-code-CheckboxIndeterminate: '\E73C';
+$ms-icon-code-CheckedOutByOther12: '\F630';
+$ms-icon-code-CheckedOutByYou12: '\F631';
+$ms-icon-code-CheckList: '\E9D5';
+$ms-icon-code-CheckListCheck: '\F7A9';
+$ms-icon-code-CheckListCheckMirrored: '\F7AB';
+$ms-icon-code-CheckListText: '\F7A8';
+$ms-icon-code-CheckListTextMirrored: '\F7AA';
+$ms-icon-code-CheckMark: '\E73E';
+$ms-icon-code-ChevronDown: '\E70D';
+$ms-icon-code-ChevronDownEnd6: '\F36F';
+$ms-icon-code-ChevronDownMed: '\E972';
+$ms-icon-code-ChevronDownSmall: '\E96E';
+$ms-icon-code-ChevronFold10: '\F36A';
+$ms-icon-code-ChevronLeft: '\E76B';
+$ms-icon-code-ChevronLeftEnd6: '\F371';
+$ms-icon-code-ChevronLeftMed: '\E973';
+$ms-icon-code-ChevronLeftSmall: '\E96F';
+$ms-icon-code-ChevronRight: '\E76C';
+$ms-icon-code-ChevronRightEnd6: '\F372';
+$ms-icon-code-ChevronRightMed: '\E974';
+$ms-icon-code-ChevronRightSmall: '\E970';
+$ms-icon-code-ChevronUnfold10: '\F369';
+$ms-icon-code-ChevronUp: '\E70E';
+$ms-icon-code-ChevronUpEnd6: '\F370';
+$ms-icon-code-ChevronUpMed: '\E971';
+$ms-icon-code-ChevronUpSmall: '\E96D';
+$ms-icon-code-Childof: '\F82D';
+$ms-icon-code-Chopsticks: '\F4A2';
+$ms-icon-code-ChromeBack: '\E830';
+$ms-icon-code-ChromeBackMirrored: '\EA47';
+$ms-icon-code-ChromeClose: '\E8BB';
+$ms-icon-code-ChromeFullScreen: '\E92D';
+$ms-icon-code-ChromeMinimize: '\E921';
+$ms-icon-code-ChromeRestore: '\E923';
+$ms-icon-code-CircleAddition: '\F2E3';
+$ms-icon-code-CircleAdditionSolid: '\F2E4';
+$ms-icon-code-CircleFill: '\EA3B';
+$ms-icon-code-CircleHalfFull: '\ED9E';
+$ms-icon-code-CirclePause: '\F2D9';
+$ms-icon-code-CirclePauseSolid: '\F2D8';
+$ms-icon-code-CirclePlus: '\EAEE';
+$ms-icon-code-CircleRing: '\EA3A';
+$ms-icon-code-CircleShape: '\F1A5';
+$ms-icon-code-CircleShapeSolid: '\F63C';
+$ms-icon-code-CircleStop: '\F2DC';
+$ms-icon-code-CircleStopSolid: '\F2DB';
+$ms-icon-code-CityNext: '\EC06';
+$ms-icon-code-CityNext2: '\EC07';
+$ms-icon-code-ClassNotebookLogo16: '\F488';
+$ms-icon-code-ClassNotebookLogo32: '\F486';
+$ms-icon-code-ClassNotebookLogoFill16: '\F489';
+$ms-icon-code-ClassNotebookLogoFill32: '\F487';
+$ms-icon-code-ClassNotebookLogoInverse: '\EDC8';
+$ms-icon-code-ClassNotebookLogoInverse16: '\F48B';
+$ms-icon-code-ClassNotebookLogoInverse32: '\F48A';
+$ms-icon-code-ClassroomLogo: '\EF75';
+$ms-icon-code-Clear: '\E894';
+$ms-icon-code-ClearFilter: '\EF8F';
+$ms-icon-code-ClearFormatting: '\EDDD';
+$ms-icon-code-ClearFormattingA: '\F79D';
+$ms-icon-code-ClearFormattingEraser: '\F79E';
+$ms-icon-code-ClearNight: '\E9C2';
+$ms-icon-code-ClearSelection: '\E8E6';
+$ms-icon-code-ClearSelectionMirrored: '\EA48';
+$ms-icon-code-ClipboardList: '\F0E3';
+$ms-icon-code-ClipboardListMirrored: '\F0E4';
+$ms-icon-code-ClipboardSolid: '\F5DC';
+$ms-icon-code-Clock: '\E917';
+$ms-icon-code-CloneToDesktop: '\F28C';
+$ms-icon-code-ClosedCaption: '\EF84';
+$ms-icon-code-ClosePane: '\E89F';
+$ms-icon-code-ClosePaneMirrored: '\EA49';
+$ms-icon-code-Cloud: '\E753';
+$ms-icon-code-CloudAdd: '\ECA9';
+$ms-icon-code-CloudDownload: '\EBD3';
+$ms-icon-code-CloudImportExport: '\EE55';
+$ms-icon-code-CloudUpload: '\EC8E';
+$ms-icon-code-CloudWeather: '\E9BE';
+$ms-icon-code-Cloudy: '\E9BF';
+$ms-icon-code-Cocktails: '\EA9D';
+$ms-icon-code-Code: '\E943';
+$ms-icon-code-CodeEdit: '\F544';
+$ms-icon-code-Coffee: '\EAEF';
+$ms-icon-code-CoffeeScript: '\F2FA';
+$ms-icon-code-CollapseContent: '\F165';
+$ms-icon-code-CollapseContentSingle: '\F166';
+$ms-icon-code-CollapseMenu: '\EF66';
+$ms-icon-code-CollegeFootball: '\EB26';
+$ms-icon-code-CollegeHoops: '\EB25';
+$ms-icon-code-Color: '\E790';
+$ms-icon-code-ColorSolid: '\F354';
+$ms-icon-code-ColumnLeftTwoThirds: '\F1D6';
+$ms-icon-code-ColumnLeftTwoThirdsEdit: '\F324';
+$ms-icon-code-ColumnOptions: '\F317';
+$ms-icon-code-ColumnRightTwoThirds: '\F1D7';
+$ms-icon-code-ColumnRightTwoThirdsEdit: '\F325';
+$ms-icon-code-ColumnVerticalSection: '\F81E';
+$ms-icon-code-ColumnVerticalSectionEdit: '\F806';
+$ms-icon-code-Combine: '\EDBB';
+$ms-icon-code-Combobox: '\F516';
+$ms-icon-code-CommandPrompt: '\E756';
+$ms-icon-code-Comment: '\E90A';
+$ms-icon-code-CommentActive: '\F804';
+$ms-icon-code-CommentAdd: '\F2B3';
+$ms-icon-code-CommentNext: '\F2B4';
+$ms-icon-code-CommentPrevious: '\F2B5';
+$ms-icon-code-CommentSolid: '\E30E';
+$ms-icon-code-CommentUrgent: '\F307';
+$ms-icon-code-Commitments: '\EC4D';
+$ms-icon-code-CommonDataServiceCDS: '\E377';
+$ms-icon-code-Communications: '\E95A';
+$ms-icon-code-CompanyDirectory: '\EF0D';
+$ms-icon-code-CompanyDirectoryMirrored: '\EF2B';
+$ms-icon-code-Compare: '\F057';
+$ms-icon-code-CompareUneven: '\E42E';
+$ms-icon-code-CompassNW: '\E942';
+$ms-icon-code-Completed: '\E930';
+$ms-icon-code-CompletedSolid: '\EC61';
+$ms-icon-code-ComplianceAudit: '\E369';
+$ms-icon-code-ConfigurationSolid: '\F334';
+$ms-icon-code-ConnectContacts: '\EFD4';
+$ms-icon-code-ConnectVirtualMachine: '\EE9D';
+$ms-icon-code-ConstructionCone: '\E98F';
+$ms-icon-code-ConstructionConeSolid: '\F339';
+$ms-icon-code-Contact: '\E77B';
+$ms-icon-code-ContactCard: '\EEBD';
+$ms-icon-code-ContactCardSettings: '\F556';
+$ms-icon-code-ContactCardSettingsMirrored: '\F557';
+$ms-icon-code-ContactHeart: '\F862';
+$ms-icon-code-ContactInfo: '\E779';
+$ms-icon-code-ContactLink: '\F25F';
+$ms-icon-code-ContactList: '\F7E5';
+$ms-icon-code-ContactLock: '\F400';
+$ms-icon-code-ContentFeed: '\E428';
+$ms-icon-code-ContentSettings: '\F647';
+$ms-icon-code-ContextMenu: '\F37C';
+$ms-icon-code-Contrast: '\E7A1';
+$ms-icon-code-Copy: '\E8C8';
+$ms-icon-code-CortanaLogoBeckonInner: '\F4C6';
+$ms-icon-code-CortanaLogoBeckonOuter: '\F4C7';
+$ms-icon-code-CortanaLogoInner: '\E832';
+$ms-icon-code-CortanaLogoOuter: '\E831';
+$ms-icon-code-CortanaLogoReadyInner: '\F4C8';
+$ms-icon-code-CortanaLogoReadyOuter: '\F4C9';
+$ms-icon-code-Cotton: '\EAF3';
+$ms-icon-code-Coupon: '\F7BC';
+$ms-icon-code-CPlusPlus: '\F2F4';
+$ms-icon-code-CPlusPlusLanguage: '\F2F3';
+$ms-icon-code-CreateMailRule: '\F67A';
+$ms-icon-code-Cricket: '\EB1E';
+$ms-icon-code-CRMProcesses: '\EFB1';
+$ms-icon-code-CRMReport: '\EFFE';
+$ms-icon-code-CRMServices: '\EFD2';
+$ms-icon-code-Crop: '\E7A8';
+$ms-icon-code-Crown: '\ED01';
+$ms-icon-code-CrownSolid: '\F336';
+$ms-icon-code-CSharp: '\F2F0';
+$ms-icon-code-CSharpLanguage: '\F2EF';
+$ms-icon-code-CSS: '\EBEF';
+$ms-icon-code-CubeShape: '\F1AA';
+$ms-icon-code-CubeShapeSolid: '\E421';
+$ms-icon-code-CustomizeToolbar: '\F828';
+$ms-icon-code-CustomList: '\EEBE';
+$ms-icon-code-CustomListMirrored: '\EEBF';
+$ms-icon-code-Cut: '\E8C6';
+$ms-icon-code-Cycling: '\EAC7';
+$ms-icon-code-D365CoreHR: '\F6BD';
+$ms-icon-code-D365CustomerInsights: '\F3C8';
+$ms-icon-code-D365ProjectOperations: '\E432';
+$ms-icon-code-D365TalentInsight: '\F6BC';
+$ms-icon-code-D365TalentLearn: '\F6BB';
+$ms-icon-code-DashboardAdd: '\F52D';
+$ms-icon-code-Database: '\EFC7';
+$ms-icon-code-DatabaseSync: '\F842';
+$ms-icon-code-DataConnectionLibrary: '\EEB7';
+$ms-icon-code-Dataflows: '\F7DD';
+$ms-icon-code-DataflowsLink: '\E366';
+$ms-icon-code-DataManagementSettings: '\EFC8';
+$ms-icon-code-DateTime: '\EC92';
+$ms-icon-code-DateTime12: '\F38F';
+$ms-icon-code-DateTime2: '\EA17';
+$ms-icon-code-DateTimeMirrored: '\EE93';
+$ms-icon-code-DeactivateOrders: '\EFE1';
+$ms-icon-code-Decimals: '\F218';
+$ms-icon-code-DecisionSolid: '\F350';
+$ms-icon-code-DeclineCall: '\F405';
+$ms-icon-code-DecreaseIndent: '\E39B';
+$ms-icon-code-DecreaseIndentArrow: '\F7A3';
+$ms-icon-code-DecreaseIndentArrowMirrored: '\F7A7';
+$ms-icon-code-DecreaseIndentLegacy: '\E290';
+$ms-icon-code-DecreaseIndentMirrored: '\E39C';
+$ms-icon-code-DecreaseIndentText: '\F7A2';
+$ms-icon-code-DecreaseIndentTextMirrored: '\F7A6';
+$ms-icon-code-DefaultRatio: '\F529';
+$ms-icon-code-DefectSolid: '\F449';
+$ms-icon-code-DefenderTVM: '\F6B3';
+$ms-icon-code-Delete: '\E74D';
+$ms-icon-code-DeleteColumns: '\F64E';
+$ms-icon-code-DeleteRows: '\F64F';
+$ms-icon-code-DeleteRowsMirrored: '\F650';
+$ms-icon-code-DeleteTable: '\F651';
+$ms-icon-code-DeliveryTruck: '\EBF4';
+$ms-icon-code-DelveAnalytics: '\EEEE';
+$ms-icon-code-DelveAnalyticsLogo: '\EDCA';
+$ms-icon-code-DelveLogo: '\F280';
+$ms-icon-code-DelveLogoFill: '\F281';
+$ms-icon-code-DelveLogoInverse: '\ED76';
+$ms-icon-code-DependencyAdd: '\E344';
+$ms-icon-code-DependencyRemove: '\E345';
+$ms-icon-code-Deploy: '\F29D';
+$ms-icon-code-Descending: '\EDC1';
+$ms-icon-code-Design: '\EB3C';
+$ms-icon-code-DesktopScreenshot: '\F5D9';
+$ms-icon-code-DeveloperTools: '\EC7A';
+$ms-icon-code-DeviceBug: '\E424';
+$ms-icon-code-DeviceOff: '\E402';
+$ms-icon-code-DeviceRun: '\E401';
+$ms-icon-code-Devices2: '\E975';
+$ms-icon-code-Devices3: '\EA6C';
+$ms-icon-code-Devices4: '\EB66';
+$ms-icon-code-Diagnostic: '\E9D9';
+$ms-icon-code-DiagnosticDataBarTooltip: '\F7DF';
+$ms-icon-code-Dialpad: '\E75F';
+$ms-icon-code-Diamond: '\ED02';
+$ms-icon-code-DiamondSolid: '\F34C';
+$ms-icon-code-Dictionary: '\E82D';
+$ms-icon-code-DictionaryRemove: '\F69A';
+$ms-icon-code-DietPlanNotebook: '\EAC8';
+$ms-icon-code-DiffInline: '\F309';
+$ms-icon-code-DiffSideBySide: '\F30A';
+$ms-icon-code-DisableUpdates: '\E8D8';
+$ms-icon-code-DisconnectVirtualMachine: '\F873';
+$ms-icon-code-Dislike: '\E8E0';
+$ms-icon-code-DislikeSolid: '\F3C0';
+$ms-icon-code-DistributeDown: '\F76A';
+$ms-icon-code-DockLeft: '\E90C';
+$ms-icon-code-DockLeftMirrored: '\EA4C';
+$ms-icon-code-DockRight: '\E90D';
+$ms-icon-code-DocLibrary: '\EEB8';
+$ms-icon-code-DocsLogoInverse: '\EDCB';
+$ms-icon-code-Document: '\E8A5';
+$ms-icon-code-DocumentApproval: '\F28B';
+$ms-icon-code-Documentation: '\EC17';
+$ms-icon-code-DocumentManagement: '\EFFC';
+$ms-icon-code-DocumentReply: '\EF57';
+$ms-icon-code-DocumentSearch: '\EF6C';
+$ms-icon-code-DocumentSet: '\EED6';
+$ms-icon-code-DOM: '\EC8D';
+$ms-icon-code-DonutChart: '\F368';
+$ms-icon-code-Door: '\EB75';
+$ms-icon-code-DoubleBookmark: '\EB8F';
+$ms-icon-code-DoubleChevronDown: '\EE04';
+$ms-icon-code-DoubleChevronDown12: '\EE97';
+$ms-icon-code-DoubleChevronDown8: '\F36B';
+$ms-icon-code-DoubleChevronLeft: '\EDBE';
+$ms-icon-code-DoubleChevronLeft12: '\EE98';
+$ms-icon-code-DoubleChevronLeft8: '\F36D';
+$ms-icon-code-DoubleChevronLeftMed: '\E991';
+$ms-icon-code-DoubleChevronLeftMedMirrored: '\EA4D';
+$ms-icon-code-DoubleChevronRight: '\EDBF';
+$ms-icon-code-DoubleChevronRight12: '\EE99';
+$ms-icon-code-DoubleChevronRight8: '\F36E';
+$ms-icon-code-DoubleChevronUp: '\EDBD';
+$ms-icon-code-DoubleChevronUp12: '\EE96';
+$ms-icon-code-DoubleChevronUp8: '\F36C';
+$ms-icon-code-DoubleColumn: '\F1D4';
+$ms-icon-code-DoubleColumnEdit: '\F322';
+$ms-icon-code-DoubleDownArrow: '\F769';
+$ms-icon-code-Down: '\E74B';
+$ms-icon-code-Download: '\E896';
+$ms-icon-code-DownloadDocument: '\F549';
+$ms-icon-code-DragObject: '\F553';
+$ms-icon-code-DrillDown: '\F532';
+$ms-icon-code-DrillDownSolid: '\F533';
+$ms-icon-code-DrillExpand: '\F534';
+$ms-icon-code-DrillShow: '\F535';
+$ms-icon-code-DrillThrough: '\F5B9';
+$ms-icon-code-DriverOff: '\E3FB';
+$ms-icon-code-DRM: '\ECA8';
+$ms-icon-code-Drop: '\EB42';
+$ms-icon-code-Dropdown: '\EDC5';
+$ms-icon-code-DropShape: '\F1A8';
+$ms-icon-code-DropShapeSolid: '\F63F';
+$ms-icon-code-DuplicateRow: '\F82A';
+$ms-icon-code-Duststorm: '\E9CD';
+$ms-icon-code-Dynamics365Logo: '\EDCC';
+$ms-icon-code-DynamicSMBLogo: '\EDCD';
+$ms-icon-code-EaseOfAccess: '\E776';
+$ms-icon-code-EatDrink: '\E807';
+$ms-icon-code-EdgeOldLogo: '\EC60';
+$ms-icon-code-eDiscovery: '\E370';
+$ms-icon-code-Edit: '\E70F';
+$ms-icon-code-EditContact: '\EFD3';
+$ms-icon-code-EditCreate: '\F3C9';
+$ms-icon-code-EditMail: '\EF61';
+$ms-icon-code-EditMirrored: '\EB7E';
+$ms-icon-code-EditNote: '\ED9D';
+$ms-icon-code-EditPhoto: '\EF77';
+$ms-icon-code-EditSolid12: '\F4B5';
+$ms-icon-code-EditSolidMirrored12: '\F4B6';
+$ms-icon-code-EditStyle: '\EF60';
+$ms-icon-code-Education: '\E7BE';
+$ms-icon-code-Ellipse: '\F4FB';
+$ms-icon-code-Embed: '\ECCE';
+$ms-icon-code-EMI: '\E731';
+$ms-icon-code-Emoji: '\E899';
+$ms-icon-code-Emoji2: '\E76E';
+$ms-icon-code-EmojiDisappointed: '\EA88';
+$ms-icon-code-EmojiNeutral: '\EA87';
+$ms-icon-code-EmojiTabSymbols: '\ED58';
+$ms-icon-code-EmptyRecycleBin: '\EF88';
+$ms-icon-code-Encryption: '\F69D';
+$ms-icon-code-EndPointSolid: '\EB4B';
+$ms-icon-code-EngineeringGroup: '\F362';
+$ms-icon-code-EntitlementPolicy: '\E346';
+$ms-icon-code-EntitlementRedemption: '\E347';
+$ms-icon-code-EntryDecline: '\F555';
+$ms-icon-code-EntryView: '\F554';
+$ms-icon-code-Equalizer: '\E9E9';
+$ms-icon-code-EraseTool: '\E75C';
+$ms-icon-code-Error: '\E783';
+$ms-icon-code-ErrorBadge: '\EA39';
+$ms-icon-code-Event: '\ECA3';
+$ms-icon-code-Event12: '\F763';
+$ms-icon-code-EventAccepted: '\F422';
+$ms-icon-code-EventDate: '\F059';
+$ms-icon-code-EventDateMissed12: '\F764';
+$ms-icon-code-EventDeclined: '\F425';
+$ms-icon-code-EventInfo: '\ED8B';
+$ms-icon-code-EventTentative: '\F423';
+$ms-icon-code-EventTentativeMirrored: '\F424';
+$ms-icon-code-EventToDoLogo: '\F869';
+$ms-icon-code-ExcelDocument: '\EF73';
+$ms-icon-code-ExcelLogo: '\F1E5';
+$ms-icon-code-ExcelLogo16: '\F397';
+$ms-icon-code-ExcelLogoFill: '\F1E6';
+$ms-icon-code-ExcelLogoFill16: '\F398';
+$ms-icon-code-ExcelLogoInverse: '\EC28';
+$ms-icon-code-ExcelLogoInverse16: '\F396';
+$ms-icon-code-ExchangeLogo: '\F284';
+$ms-icon-code-ExchangeLogoFill: '\F285';
+$ms-icon-code-ExchangeLogoInverse: '\ED78';
+$ms-icon-code-ExerciseTracker: '\EACC';
+$ms-icon-code-ExpandMenu: '\EF67';
+$ms-icon-code-ExploreContent: '\ECCD';
+$ms-icon-code-ExploreContentSingle: '\F164';
+$ms-icon-code-ExploreData: '\F5B6';
+$ms-icon-code-Export: '\EDE1';
+$ms-icon-code-ExportMirrored: '\EDE2';
+$ms-icon-code-ExternalBuild: '\F445';
+$ms-icon-code-ExternalTFVC: '\F446';
+$ms-icon-code-ExternalXAML: '\F447';
+$ms-icon-code-Eyedropper: '\EF3C';
+$ms-icon-code-EyeShadow: '\F7EB';
+$ms-icon-code-F12DevTools: '\EBEE';
+$ms-icon-code-FabricAssetLibrary: '\F09C';
+$ms-icon-code-FabricDataConnectionLibrary: '\F09D';
+$ms-icon-code-FabricDocLibrary: '\F09E';
+$ms-icon-code-FabricFolder: '\F0A9';
+$ms-icon-code-FabricFolderConfirm: '\F7FF';
+$ms-icon-code-FabricFolderFill: '\F0AA';
+$ms-icon-code-FabricFolderSearch: '\F0A4';
+$ms-icon-code-FabricFolderUpload: '\E3AC';
+$ms-icon-code-FabricFormLibrary: '\F09F';
+$ms-icon-code-FabricFormLibraryMirrored: '\F0A0';
+$ms-icon-code-FabricMovetoFolder: '\F0A5';
+$ms-icon-code-FabricNetworkFolder: '\F5E6';
+$ms-icon-code-FabricNewFolder: '\F0AB';
+$ms-icon-code-FabricOpenFolderHorizontal: '\F0A8';
+$ms-icon-code-FabricPictureLibrary: '\F0AC';
+$ms-icon-code-FabricPublicFolder: '\F0A3';
+$ms-icon-code-FabricReportLibrary: '\F0A1';
+$ms-icon-code-FabricReportLibraryMirrored: '\F0A2';
+$ms-icon-code-FabricSyncFolder: '\F0A7';
+$ms-icon-code-FabricTextHighlight: '\F79C';
+$ms-icon-code-FabricTextHighlightComposite: '\F7DA';
+$ms-icon-code-FabricUnsyncFolder: '\F0A6';
+$ms-icon-code-FabricUserFolder: '\F5E5';
+$ms-icon-code-Family: '\EBDA';
+$ms-icon-code-FangBody: '\ECEB';
+$ms-icon-code-FastForward: '\EB9D';
+$ms-icon-code-FastMode: '\F19A';
+$ms-icon-code-Favicon: '\E737';
+$ms-icon-code-FavoriteList: '\E728';
+$ms-icon-code-FavoriteStar: '\E734';
+$ms-icon-code-FavoriteStarFill: '\E735';
+$ms-icon-code-Fax: '\EF5C';
+$ms-icon-code-Feedback: '\ED15';
+$ms-icon-code-FeedbackRequestMirroredSolid: '\F35A';
+$ms-icon-code-FeedbackRequestSolid: '\F359';
+$ms-icon-code-FeedbackResponseSolid: '\F35B';
+$ms-icon-code-Ferry: '\E7E3';
+$ms-icon-code-FerrySolid: '\EB48';
+$ms-icon-code-FieldChanged: '\F2C3';
+$ms-icon-code-FieldEmpty: '\F2C1';
+$ms-icon-code-FieldFilled: '\F2C2';
+$ms-icon-code-FieldNotChanged: '\F2C4';
+$ms-icon-code-FieldReadOnly: '\F442';
+$ms-icon-code-FieldRequired: '\F443';
+$ms-icon-code-FileASPX: '\F2E9';
+$ms-icon-code-FileBug: '\F30D';
+$ms-icon-code-FileCode: '\F30E';
+$ms-icon-code-FileComment: '\F30F';
+$ms-icon-code-FileCSS: '\F2EA';
+$ms-icon-code-FileHTML: '\F2ED';
+$ms-icon-code-FileImage: '\F311';
+$ms-icon-code-FileJAVA: '\F2E8';
+$ms-icon-code-FileLess: '\F2EC';
+$ms-icon-code-FileOff: '\E3FC';
+$ms-icon-code-FilePDB: '\F2E5';
+$ms-icon-code-FileRequest: '\F789';
+$ms-icon-code-FileSass: '\F2EB';
+$ms-icon-code-FileSQL: '\F2E7';
+$ms-icon-code-FileSymlink: '\F312';
+$ms-icon-code-FileTemplate: '\F2E6';
+$ms-icon-code-FileTypeSolution: '\F387';
+$ms-icon-code-FileYML: '\F5DA';
+$ms-icon-code-Filter: '\E71C';
+$ms-icon-code-FilterAscending: '\F21A';
+$ms-icon-code-FilterDescending: '\F21B';
+$ms-icon-code-Filters: '\E795';
+$ms-icon-code-FilterSettings: '\F76C';
+$ms-icon-code-FilterSolid: '\F412';
+$ms-icon-code-FiltersSolid: '\F353';
+$ms-icon-code-Financial: '\E7BB';
+$ms-icon-code-FinancialMirroredSolid: '\F347';
+$ms-icon-code-FinancialSolid: '\F346';
+$ms-icon-code-Fingerprint: '\E928';
+$ms-icon-code-FitPage: '\E9A6';
+$ms-icon-code-FitWidth: '\E9A7';
+$ms-icon-code-FiveTileGrid: '\F274';
+$ms-icon-code-FixedAssetManagement: '\EF93';
+$ms-icon-code-FixedColumnWidth: '\E3EA';
+$ms-icon-code-Flag: '\E7C1';
+$ms-icon-code-FlameSolid: '\F1F3';
+$ms-icon-code-FlashAuto: '\E95C';
+$ms-icon-code-Flashlight: '\E754';
+$ms-icon-code-FlashOff: '\EA6E';
+$ms-icon-code-FlickDown: '\E935';
+$ms-icon-code-FlickLeft: '\E937';
+$ms-icon-code-FlickRight: '\E938';
+$ms-icon-code-FlickUp: '\E936';
+$ms-icon-code-Flow: '\EF90';
+$ms-icon-code-FlowChart: '\E9D4';
+$ms-icon-code-Flower: '\F54E';
+$ms-icon-code-FocalPoint: '\F277';
+$ms-icon-code-Focus: '\EA6F';
+$ms-icon-code-FocusView: '\F1A3';
+$ms-icon-code-Fog: '\E9CB';
+$ms-icon-code-Folder: '\E8B7';
+$ms-icon-code-FolderFill: '\E8D5';
+$ms-icon-code-FolderHorizontal: '\F12B';
+$ms-icon-code-FolderList: '\F2CE';
+$ms-icon-code-FolderListMirrored: '\F2CF';
+$ms-icon-code-FolderOpen: '\E838';
+$ms-icon-code-FolderQuery: '\F2CD';
+$ms-icon-code-FolderSearch: '\EF65';
+$ms-icon-code-FollowUser: '\EE05';
+$ms-icon-code-Font: '\E8D2';
+$ms-icon-code-FontColor: '\E8D3';
+$ms-icon-code-FontColorA: '\F4EC';
+$ms-icon-code-FontColorSwatch: '\F4ED';
+$ms-icon-code-FontDecrease: '\E8E7';
+$ms-icon-code-FontIncrease: '\E8E8';
+$ms-icon-code-FontSize: '\E8E9';
+$ms-icon-code-FontSize2: '\E3C0';
+$ms-icon-code-Footer: '\F82E';
+$ms-icon-code-FormatPainter: '\E3DC';
+$ms-icon-code-FormLibrary: '\EEB9';
+$ms-icon-code-FormLibraryMirrored: '\EEBA';
+$ms-icon-code-Forum: '\E378';
+$ms-icon-code-Forward: '\E72A';
+$ms-icon-code-ForwardEvent: '\ED8C';
+$ms-icon-code-Freezing: '\E9EF';
+$ms-icon-code-Frigid: '\E9CA';
+$ms-icon-code-FrontCamera: '\E96B';
+$ms-icon-code-FSharp: '\F2F6';
+$ms-icon-code-FSharpLanguage: '\F2F5';
+$ms-icon-code-FullCircleMask: '\E91F';
+$ms-icon-code-FullHistory: '\F31C';
+$ms-icon-code-FullScreen: '\E740';
+$ms-icon-code-FullView: '\F1A2';
+$ms-icon-code-FullWidth: '\F2FE';
+$ms-icon-code-FullWidthEdit: '\F2FF';
+$ms-icon-code-FunctionalManagerDashboard: '\F542';
+$ms-icon-code-FunnelChart: '\E9F1';
+$ms-icon-code-GallatinLogo: '\F496';
+$ms-icon-code-Game: '\E7FC';
+$ms-icon-code-Generate: '\E9DA';
+$ms-icon-code-GenericScan: '\EE6F';
+$ms-icon-code-GenericScanFilled: '\F7E3';
+$ms-icon-code-GIF: '\F4A9';
+$ms-icon-code-Giftbox: '\EC1F';
+$ms-icon-code-GiftboxOpen: '\F133';
+$ms-icon-code-GiftBoxSolid: '\F341';
+$ms-icon-code-GiftCard: '\EB8E';
+$ms-icon-code-GitGraph: '\F2CA';
+$ms-icon-code-Glasses: '\EA16';
+$ms-icon-code-Glimmer: '\ECF4';
+$ms-icon-code-GlobalNavButton: '\E700';
+$ms-icon-code-GlobalNavButtonActive: '\F89F';
+$ms-icon-code-Globe: '\E774';
+$ms-icon-code-Globe2: '\F49A';
+$ms-icon-code-GlobeFavorite: '\EF53';
+$ms-icon-code-Go: '\E8AD';
+$ms-icon-code-Golf: '\EB1F';
+$ms-icon-code-GoMirrored: '\EA4F';
+$ms-icon-code-GoToDashboard: '\EEED';
+$ms-icon-code-GotoToday: '\E8D1';
+$ms-icon-code-GreetingCard: '\F54B';
+$ms-icon-code-GridViewLarge: '\F234';
+$ms-icon-code-GridViewMedium: '\F233';
+$ms-icon-code-GridViewSmall: '\F232';
+$ms-icon-code-GripperBarHorizontal: '\E76F';
+$ms-icon-code-GripperBarVertical: '\E784';
+$ms-icon-code-GripperDotsVertical: '\F772';
+$ms-icon-code-GripperTool: '\E75E';
+$ms-icon-code-Group: '\E902';
+$ms-icon-code-GroupedAscending: '\EE67';
+$ms-icon-code-GroupedDescending: '\EE66';
+$ms-icon-code-GroupedList: '\EF74';
+$ms-icon-code-GroupList: '\F168';
+$ms-icon-code-GroupObject: '\F4F1';
+$ms-icon-code-GUID: '\F52B';
+$ms-icon-code-Guitar: '\F49B';
+$ms-icon-code-HailDay: '\EA00';
+$ms-icon-code-HailNight: '\EA13';
+$ms-icon-code-HalfAlpha: '\E97E';
+$ms-icon-code-HalfCircle: '\F501';
+$ms-icon-code-HandsFree: '\EAD0';
+$ms-icon-code-Handwriting: '\E929';
+$ms-icon-code-HardDrive: '\EDA2';
+$ms-icon-code-HardDriveGroup: '\F18F';
+$ms-icon-code-HardDriveLock: '\F55A';
+$ms-icon-code-HardDriveUnlock: '\F55B';
+$ms-icon-code-Header: '\F82F';
+$ms-icon-code-Header1: '\EA19';
+$ms-icon-code-Header2: '\EF36';
+$ms-icon-code-Header3: '\EF37';
+$ms-icon-code-Header4: '\EF38';
+$ms-icon-code-Headset: '\E95B';
+$ms-icon-code-HeadsetSolid: '\F348';
+$ms-icon-code-Health: '\E95E';
+$ms-icon-code-HealthRefresh: '\E3BD';
+$ms-icon-code-HealthSolid: '\F33F';
+$ms-icon-code-Heart: '\EB51';
+$ms-icon-code-HeartBroken: '\EA92';
+$ms-icon-code-HeartFill: '\EB52';
+$ms-icon-code-Help: '\E897';
+$ms-icon-code-HelpMirrored: '\EA51';
+$ms-icon-code-HexaditeInvestigation: '\E3F8';
+$ms-icon-code-HexaditeInvestigationCancel: '\E3F9';
+$ms-icon-code-HexaditeInvestigationSemiAuto: '\E3FA';
+$ms-icon-code-Hexagon: '\F4FE';
+$ms-icon-code-Hide: '\ED1A';
+$ms-icon-code-Hide2: '\EF89';
+$ms-icon-code-Hide3: '\F6AC';
+$ms-icon-code-Highlight: '\E7E6';
+$ms-icon-code-HighlightMappedShapes: '\F2A1';
+$ms-icon-code-HintText: '\F50F';
+$ms-icon-code-HistoricalWeather: '\EB43';
+$ms-icon-code-History: '\E81C';
+$ms-icon-code-Home: '\E80F';
+$ms-icon-code-HomeDropdown: '\E427';
+$ms-icon-code-HomeGroup: '\EC26';
+$ms-icon-code-HomeSolid: '\EA8A';
+$ms-icon-code-HomeVerify: '\F00E';
+$ms-icon-code-HorizontalDistributeCenter: '\F4F9';
+$ms-icon-code-HorizontalTabKey: '\E7FD';
+$ms-icon-code-Hospital: '\E91D';
+$ms-icon-code-Hotel: '\E824';
+$ms-icon-code-HourGlass: '\EA03';
+$ms-icon-code-IconSetsFlag: '\F2A4';
+$ms-icon-code-IDBadge: '\F427';
+$ms-icon-code-IgnoreConversation: '\E372';
+$ms-icon-code-ImageCrosshair: '\F2C9';
+$ms-icon-code-ImageDiff: '\F30B';
+$ms-icon-code-ImageInAR: '\E420';
+$ms-icon-code-ImagePixel: '\F30C';
+$ms-icon-code-ImageSearch: '\F4E8';
+$ms-icon-code-Import: '\E8B5';
+$ms-icon-code-ImportAllMirrored: '\EA53';
+$ms-icon-code-Important: '\E8C9';
+$ms-icon-code-ImportMirrored: '\EA52';
+$ms-icon-code-Inbox: '\F41C';
+$ms-icon-code-InboxCheck: '\EF64';
+$ms-icon-code-IncidentTriangle: '\E814';
+$ms-icon-code-IncomingCall: '\E77E';
+$ms-icon-code-IncreaseIndent: '\E399';
+$ms-icon-code-IncreaseIndentArrow: '\F7A1';
+$ms-icon-code-IncreaseIndentArrowMirrored: '\F7A5';
+$ms-icon-code-IncreaseIndentHanging: '\E39D';
+$ms-icon-code-IncreaseIndentHangingMirrored: '\E39E';
+$ms-icon-code-IncreaseIndentLegacy: '\E291';
+$ms-icon-code-IncreaseIndentMirrored: '\E39A';
+$ms-icon-code-IncreaseIndentText: '\F7A0';
+$ms-icon-code-IncreaseIndentTextMirrored: '\F7A4';
+$ms-icon-code-IndentFirstLine: '\E3DD';
+$ms-icon-code-Info: '\E946';
+$ms-icon-code-Info2: '\EA1F';
+$ms-icon-code-InformationBarriers: '\F803';
+$ms-icon-code-InfoSolid: '\F167';
+$ms-icon-code-InkingTool: '\E76D';
+$ms-icon-code-InputAddress: '\E41E';
+$ms-icon-code-Insert: '\F278';
+$ms-icon-code-InsertColumnsLeft: '\F64A';
+$ms-icon-code-InsertColumnsRight: '\F64B';
+$ms-icon-code-InsertRowsAbove: '\F64C';
+$ms-icon-code-InsertRowsBelow: '\F64D';
+$ms-icon-code-InsertSignatureLine: '\F677';
+$ms-icon-code-InsertTextBox: '\EC7D';
+$ms-icon-code-Insights: '\E3AF';
+$ms-icon-code-Installation: '\E311';
+$ms-icon-code-InstallToDrive: '\F28D';
+$ms-icon-code-InternalInvestigation: '\F854';
+$ms-icon-code-InternetSharing: '\E704';
+$ms-icon-code-IRMForward: '\F41F';
+$ms-icon-code-IRMForwardMirrored: '\F420';
+$ms-icon-code-IRMReply: '\F41D';
+$ms-icon-code-IRMReplyMirrored: '\F41E';
+$ms-icon-code-IssueSolid: '\F448';
+$ms-icon-code-IssueTracking: '\EEC0';
+$ms-icon-code-IssueTrackingMirrored: '\EEC1';
+$ms-icon-code-Italic: '\E8DB';
+$ms-icon-code-JavaScriptLanguage: '\F2EE';
+$ms-icon-code-JoinOnlineMeeting: '\ED8F';
+$ms-icon-code-JS: '\EBF0';
+$ms-icon-code-KaizalaLogo: '\F492';
+$ms-icon-code-KeyboardClassic: '\E765';
+$ms-icon-code-KeyPhraseExtraction: '\E395';
+$ms-icon-code-KnowledgeArticle: '\F000';
+$ms-icon-code-Label: '\E932';
+$ms-icon-code-LadybugSolid: '\F44A';
+$ms-icon-code-Lamp: '\EB19';
+$ms-icon-code-LandscapeOrientation: '\EF6B';
+$ms-icon-code-LaptopSecure: '\F552';
+$ms-icon-code-LaptopSelected: '\EC76';
+$ms-icon-code-LargeGrid: '\EECB';
+$ms-icon-code-LearningTools: '\F7DB';
+$ms-icon-code-Leave: '\F627';
+$ms-icon-code-LeaveUser: '\E3A8';
+$ms-icon-code-Library: '\E8F1';
+$ms-icon-code-Lifesaver: '\EF62';
+$ms-icon-code-LifesaverLock: '\EF63';
+$ms-icon-code-Light: '\E793';
+$ms-icon-code-Lightbulb: '\EA80';
+$ms-icon-code-LightningBolt: '\E945';
+$ms-icon-code-LightWeight: '\F4EE';
+$ms-icon-code-Like: '\E8E1';
+$ms-icon-code-LikeSolid: '\F3BF';
+$ms-icon-code-Line: '\F4FC';
+$ms-icon-code-LineChart: '\E9E6';
+$ms-icon-code-LineSpacing: '\F517';
+$ms-icon-code-LineStyle: '\F50C';
+$ms-icon-code-LineThickness: '\F50D';
+$ms-icon-code-Link: '\E71B';
+$ms-icon-code-Link12: '\F6E3';
+$ms-icon-code-LinkedDatabase: '\F779';
+$ms-icon-code-LinkedInLogo: '\F20A';
+$ms-icon-code-List: '\EA37';
+$ms-icon-code-ListMirrored: '\EA55';
+$ms-icon-code-LiveSite: '\F6A6';
+$ms-icon-code-LocaleLanguage: '\F2B7';
+$ms-icon-code-Location: '\E81D';
+$ms-icon-code-LocationCircle: '\E80E';
+$ms-icon-code-LocationDot: '\E827';
+$ms-icon-code-LocationFill: '\E920';
+$ms-icon-code-LocationOutline: '\F2D0';
+$ms-icon-code-Lock: '\E72E';
+$ms-icon-code-Lock12: '\F6E6';
+$ms-icon-code-LockSolid: '\E9A2';
+$ms-icon-code-LogRemove: '\F316';
+$ms-icon-code-LookupEntities: '\F5B5';
+$ms-icon-code-LowerBrightness: '\EC8A';
+$ms-icon-code-LyncLogo: '\ED79';
+$ms-icon-code-M365InvoicingLogo: '\F7C1';
+$ms-icon-code-MachineLearning: '\E3B8';
+$ms-icon-code-Mail: '\E715';
+$ms-icon-code-MailAlert: '\ED80';
+$ms-icon-code-MailAttached: '\F774';
+$ms-icon-code-MailCheck: '\ED81';
+$ms-icon-code-MailFill: '\E8A8';
+$ms-icon-code-MailForward: '\E89C';
+$ms-icon-code-MailForwardMirrored: '\EA56';
+$ms-icon-code-MailLowImportance: '\ED82';
+$ms-icon-code-MailOptions: '\F82C';
+$ms-icon-code-MailPause: '\ED83';
+$ms-icon-code-MailReminder: '\F418';
+$ms-icon-code-MailRepeat: '\ED84';
+$ms-icon-code-MailReply: '\E8CA';
+$ms-icon-code-MailReplyAll: '\E8C2';
+$ms-icon-code-MailReplyAllMirrored: '\EA58';
+$ms-icon-code-MailReplyMirrored: '\EA57';
+$ms-icon-code-MailSchedule: '\F72E';
+$ms-icon-code-MailSolid: '\F343';
+$ms-icon-code-MailTentative: '\F416';
+$ms-icon-code-MailTentativeMirrored: '\F417';
+$ms-icon-code-MailUndelivered: '\F415';
+$ms-icon-code-ManagerSelfService: '\EE23';
+$ms-icon-code-Manufacturing: '\E99C';
+$ms-icon-code-MapDirections: '\E816';
+$ms-icon-code-MapLayers: '\E81E';
+$ms-icon-code-MapPin: '\E707';
+$ms-icon-code-MapPin12: '\E3AE';
+$ms-icon-code-MapPinSolid: '\F52E';
+$ms-icon-code-MarkAsProtected: '\F6AE';
+$ms-icon-code-MarkDownLanguage: '\F2FB';
+$ms-icon-code-Market: '\EAFC';
+$ms-icon-code-MarketDown: '\EF42';
+$ms-icon-code-MasterDatabase: '\F5BA';
+$ms-icon-code-MaximumValue: '\F5BC';
+$ms-icon-code-Medal: '\EE38';
+$ms-icon-code-MedalSolid: '\F6B9';
+$ms-icon-code-Media: '\EA69';
+$ms-icon-code-MediaAdd: '\F510';
+$ms-icon-code-Medical: '\EAD4';
+$ms-icon-code-Megaphone: '\E789';
+$ms-icon-code-MegaphoneSolid: '\F332';
+$ms-icon-code-Memo: '\E77C';
+$ms-icon-code-Merge: '\E7D5';
+$ms-icon-code-MergeDuplicate: '\F29A';
+$ms-icon-code-Message: '\E8BD';
+$ms-icon-code-MessageFill: '\EC70';
+$ms-icon-code-MessageFriendRequest: '\F055';
+$ms-icon-code-MicOff: '\EC54';
+$ms-icon-code-MicOff2: '\F781';
+$ms-icon-code-Microphone: '\E720';
+$ms-icon-code-MicrosoftFlowLogo: '\F4B1';
+$ms-icon-code-MicrosoftStaffhubLogo: '\F130';
+$ms-icon-code-MicrosoftTranslatorLogo: '\F782';
+$ms-icon-code-MicrosoftTranslatorLogoBlue: '\F853';
+$ms-icon-code-MicrosoftTranslatorLogoGreen: '\F852';
+$ms-icon-code-MiniContract: '\E93B';
+$ms-icon-code-MiniContractMirrored: '\EA59';
+$ms-icon-code-MiniExpand: '\E93A';
+$ms-icon-code-MiniExpandMirrored: '\EA5A';
+$ms-icon-code-MiniLink: '\E732';
+$ms-icon-code-MinimumValue: '\F5BD';
+$ms-icon-code-MobileReport: '\F18A';
+$ms-icon-code-MobileSelected: '\EC75';
+$ms-icon-code-ModelingView: '\F871';
+$ms-icon-code-Money: '\EAFD';
+$ms-icon-code-More: '\E712';
+$ms-icon-code-MoreSports: '\EB22';
+$ms-icon-code-MoreVertical: '\F2BC';
+$ms-icon-code-MountainClimbing: '\F6DB';
+$ms-icon-code-Move: '\E7C2';
+$ms-icon-code-Movers: '\EBCD';
+$ms-icon-code-MoveToFolder: '\E8DE';
+$ms-icon-code-MSNLogo: '\EB6C';
+$ms-icon-code-MSNVideos: '\EB1C';
+$ms-icon-code-MSNVideosSolid: '\F2DA';
+$ms-icon-code-MultiSelect: '\E762';
+$ms-icon-code-MultiSelectMirrored: '\EA98';
+$ms-icon-code-MusicInCollection: '\E940';
+$ms-icon-code-MusicInCollectionFill: '\EA36';
+$ms-icon-code-MusicNote: '\EC4F';
+$ms-icon-code-MuteChat: '\F17A';
+$ms-icon-code-MyMoviesTV: '\EE6C';
+$ms-icon-code-MyNetwork: '\EC27';
+$ms-icon-code-Nav2DMapView: '\E800';
+$ms-icon-code-NavigateBack: '\F2DD';
+$ms-icon-code-NavigateBackMirrored: '\F2DE';
+$ms-icon-code-NavigateExternalInline: '\F35F';
+$ms-icon-code-NavigateForward: '\F2DF';
+$ms-icon-code-NavigateForwardMirrored: '\F2E0';
+$ms-icon-code-NavigationFlipper: '\F51D';
+$ms-icon-code-NetworkTower: '\EC05';
+$ms-icon-code-NewAnalyticsQuery: '\F1E0';
+$ms-icon-code-NewFolder: '\E8F4';
+$ms-icon-code-NewMail: '\F7EA';
+$ms-icon-code-News: '\E900';
+$ms-icon-code-NewsSearch: '\F4E9';
+$ms-icon-code-NewTeamProject: '\F2B2';
+$ms-icon-code-Next: '\E893';
+$ms-icon-code-NormalWeight: '\F4EF';
+$ms-icon-code-NoteForward: '\ED99';
+$ms-icon-code-NotePinned: '\ED9A';
+$ms-icon-code-NoteReply: '\ED98';
+$ms-icon-code-NotExecuted: '\F440';
+$ms-icon-code-NotImpactedSolid: '\F441';
+$ms-icon-code-NugetLogo: '\F44C';
+$ms-icon-code-NUIFace: '\EB68';
+$ms-icon-code-NumberedList: '\EA1C';
+$ms-icon-code-NumberedListMirrored: '\E398';
+$ms-icon-code-NumberedListNumber: '\F797';
+$ms-icon-code-NumberedListNumberMirrored: '\F799';
+$ms-icon-code-NumberedListText: '\F796';
+$ms-icon-code-NumberedListTextMirrored: '\F798';
+$ms-icon-code-NumberField: '\EDC4';
+$ms-icon-code-NumberSequence: '\F52A';
+$ms-icon-code-NumberSymbol: '\F7AC';
+$ms-icon-code-Octagon: '\F4FD';
+$ms-icon-code-OEM: '\E74C';
+$ms-icon-code-OfficeAddinsLogo: '\EEC7';
+$ms-icon-code-OfficeAssistantLogo: '\EDCE';
+$ms-icon-code-OfficeChat: '\F70F';
+$ms-icon-code-OfficeChatSolid: '\F710';
+$ms-icon-code-OfficeFormsLogo: '\F434';
+$ms-icon-code-OfficeFormsLogo16: '\F436';
+$ms-icon-code-OfficeFormsLogo24: '\F43B';
+$ms-icon-code-OfficeFormsLogoFill: '\F435';
+$ms-icon-code-OfficeFormsLogoFill16: '\F437';
+$ms-icon-code-OfficeFormsLogoFill24: '\F43C';
+$ms-icon-code-OfficeFormsLogoInverse: '\EF86';
+$ms-icon-code-OfficeFormsLogoInverse16: '\F433';
+$ms-icon-code-OfficeFormsLogoInverse24: '\F43A';
+$ms-icon-code-OfficeLogo: '\EB6E';
+$ms-icon-code-OfficeStoreLogo: '\EDCF';
+$ms-icon-code-OfficeVideoLogo: '\F282';
+$ms-icon-code-OfficeVideoLogoFill: '\F283';
+$ms-icon-code-OfficeVideoLogoInverse: '\ED7A';
+$ms-icon-code-OfflineOneDriveParachute: '\EEC8';
+$ms-icon-code-OfflineOneDriveParachuteDisabled: '\EEC9';
+$ms-icon-code-OfflineStorage: '\EC8C';
+$ms-icon-code-OfflineStorageSolid: '\F34E';
+$ms-icon-code-Onboarding: '\F3BA';
+$ms-icon-code-OneDriveAdd: '\EF32';
+$ms-icon-code-OneDriveFolder16: '\F53B';
+$ms-icon-code-OneDriveLogo: '\E941';
+$ms-icon-code-OneNoteEduLogoInverse: '\EDD0';
+$ms-icon-code-OneNoteLogo: '\F1E7';
+$ms-icon-code-OneNoteLogo16: '\F39A';
+$ms-icon-code-OneNoteLogoFill: '\F1E8';
+$ms-icon-code-OneNoteLogoFill16: '\F39B';
+$ms-icon-code-OneNoteLogoInverse: '\EC0D';
+$ms-icon-code-OneNoteLogoInverse16: '\F399';
+$ms-icon-code-OpenEnrollment: '\EF1C';
+$ms-icon-code-OpenFile: '\E8E5';
+$ms-icon-code-OpenFolderHorizontal: '\ED25';
+$ms-icon-code-OpenInNewTab: '\F6AB';
+$ms-icon-code-OpenInNewWindow: '\E8A7';
+$ms-icon-code-OpenPane: '\E8A0';
+$ms-icon-code-OpenPaneMirrored: '\EA5B';
+$ms-icon-code-OpenSource: '\EBC2';
+$ms-icon-code-OpenWith: '\E7AC';
+$ms-icon-code-OpenWithMirrored: '\EA5C';
+$ms-icon-code-Org: '\ECA6';
+$ms-icon-code-Orientation: '\E8B4';
+$ms-icon-code-Orientation2: '\F7E1';
+$ms-icon-code-OutlookLogo: '\F1E9';
+$ms-icon-code-OutlookLogo16: '\F39D';
+$ms-icon-code-OutlookLogoFill: '\F1EA';
+$ms-icon-code-OutlookLogoFill16: '\F39E';
+$ms-icon-code-OutlookLogoInverse: '\EB6D';
+$ms-icon-code-OutlookLogoInverse16: '\F39C';
+$ms-icon-code-OutOfOffice: '\ED34';
+$ms-icon-code-Package: '\E7B8';
+$ms-icon-code-Packages: '\F318';
+$ms-icon-code-Padding: '\F518';
+$ms-icon-code-PaddingBottom: '\F51A';
+$ms-icon-code-PaddingLeft: '\F51B';
+$ms-icon-code-PaddingRight: '\F51C';
+$ms-icon-code-PaddingTop: '\F519';
+$ms-icon-code-Page: '\E7C3';
+$ms-icon-code-PageAdd: '\EA1A';
+$ms-icon-code-PageArrowRight: '\EFB8';
+$ms-icon-code-PageCheckedin: '\F104';
+$ms-icon-code-PageCheckedOut: '\F02C';
+$ms-icon-code-PageData: '\E31C';
+$ms-icon-code-PageEdit: '\EFB6';
+$ms-icon-code-PageHeader: '\ECEE';
+$ms-icon-code-PageHeaderEdit: '\E31D';
+$ms-icon-code-PageLeft: '\E760';
+$ms-icon-code-PageLink: '\E302';
+$ms-icon-code-PageList: '\F106';
+$ms-icon-code-PageListFilter: '\F813';
+$ms-icon-code-PageListMirroredSolid: '\F33B';
+$ms-icon-code-PageListSolid: '\F33A';
+$ms-icon-code-PageLock: '\F43F';
+$ms-icon-code-PageRemove: '\EFBA';
+$ms-icon-code-PageRight: '\E761';
+$ms-icon-code-PageShared: '\F02D';
+$ms-icon-code-PageSolid: '\E729';
+$ms-icon-code-PanoIndicator: '\E7B0';
+$ms-icon-code-Parachute: '\F351';
+$ms-icon-code-ParachuteSolid: '\F352';
+$ms-icon-code-Parameter: '\F306';
+$ms-icon-code-ParkingLocation: '\E811';
+$ms-icon-code-ParkingLocationMirrored: '\EA5E';
+$ms-icon-code-ParkingMirroredSolid: '\F34B';
+$ms-icon-code-ParkingSolid: '\F34A';
+$ms-icon-code-PartlyCloudyDay: '\E9C0';
+$ms-icon-code-PartlyCloudyNight: '\E9C1';
+$ms-icon-code-PartyLeader: '\ECA7';
+$ms-icon-code-PassiveAuthentication: '\F32A';
+$ms-icon-code-PasswordField: '\F6AA';
+$ms-icon-code-Paste: '\E77F';
+$ms-icon-code-PasteAsCode: '\F5D6';
+$ms-icon-code-PasteAsText: '\F5D5';
+$ms-icon-code-Pause: '\E769';
+$ms-icon-code-PaymentCard: '\E8C7';
+$ms-icon-code-PC1: '\E977';
+$ms-icon-code-PDF: '\EA90';
+$ms-icon-code-PencilReply: '\EF7B';
+$ms-icon-code-Pentagon: '\F4FF';
+$ms-icon-code-PenWorkspace: '\EDC6';
+$ms-icon-code-People: '\E716';
+$ms-icon-code-PeopleAdd: '\EA15';
+$ms-icon-code-PeopleAlert: '\ED93';
+$ms-icon-code-PeopleBlock: '\ED91';
+$ms-icon-code-PeoplePause: '\ED94';
+$ms-icon-code-PeopleRepeat: '\ED92';
+$ms-icon-code-Permissions: '\E8D7';
+$ms-icon-code-PermissionsSolid: '\F349';
+$ms-icon-code-Personalize: '\E771';
+$ms-icon-code-Phishing: '\F679';
+$ms-icon-code-Phone: '\E717';
+$ms-icon-code-Photo: '\E91B';
+$ms-icon-code-Photo2: '\EB9F';
+$ms-icon-code-Photo2Add: '\ECAB';
+$ms-icon-code-Photo2Fill: '\F79F';
+$ms-icon-code-Photo2Remove: '\ECAC';
+$ms-icon-code-PhotoCollection: '\E7AA';
+$ms-icon-code-PhotoError: '\E3F7';
+$ms-icon-code-PhotoVideoMedia: '\F0B1';
+$ms-icon-code-Picture: '\E8B9';
+$ms-icon-code-PictureCenter: '\F522';
+$ms-icon-code-PictureFill: '\F523';
+$ms-icon-code-PictureLibrary: '\EEC2';
+$ms-icon-code-PicturePosition: '\F524';
+$ms-icon-code-PictureStretch: '\F525';
+$ms-icon-code-PictureTile: '\F526';
+$ms-icon-code-PieDouble: '\EB04';
+$ms-icon-code-PieSingle: '\EB05';
+$ms-icon-code-PieSingleSolid: '\F530';
+$ms-icon-code-Pill: '\EACB';
+$ms-icon-code-Pin: '\E718';
+$ms-icon-code-Pinned: '\E840';
+$ms-icon-code-PinnedFill: '\E842';
+$ms-icon-code-PinnedSolid: '\F676';
+$ms-icon-code-PinSolid12: '\E352';
+$ms-icon-code-PinSolidOff12: '\E353';
+$ms-icon-code-PivotChart: '\F24C';
+$ms-icon-code-PlainText: '\F834';
+$ms-icon-code-PlannerLogo: '\EDD1';
+$ms-icon-code-PlanView: '\F360';
+$ms-icon-code-Play: '\E768';
+$ms-icon-code-PlaybackRate1x: '\EC57';
+$ms-icon-code-PlayerSettings: '\EF58';
+$ms-icon-code-PlayResume: '\F2C6';
+$ms-icon-code-PlayReverse: '\F3E5';
+$ms-icon-code-PlayReverseResume: '\F3E4';
+$ms-icon-code-PlaySolid: '\F5B0';
+$ms-icon-code-Plug: '\F300';
+$ms-icon-code-PlugConnected: '\F302';
+$ms-icon-code-PlugDisconnected: '\F303';
+$ms-icon-code-PlugSolid: '\F301';
+$ms-icon-code-POI: '\ECAF';
+$ms-icon-code-POISolid: '\F2D1';
+$ms-icon-code-PollResults: '\F8A0';
+$ms-icon-code-PostUpdate: '\E8F3';
+$ms-icon-code-PowerApps: '\EDD2';
+$ms-icon-code-PowerApps2Logo: '\F092';
+$ms-icon-code-PowerAppsLogo: '\F091';
+$ms-icon-code-PowerBILogo: '\EA1E';
+$ms-icon-code-PowerBILogo16: '\F790';
+$ms-icon-code-PowerBILogoBackplate16: '\F791';
+$ms-icon-code-PowerButton: '\E7E8';
+$ms-icon-code-PowerPointDocument: '\EF72';
+$ms-icon-code-PowerPointLogo: '\F1EB';
+$ms-icon-code-PowerPointLogo16: '\F394';
+$ms-icon-code-PowerPointLogoFill: '\F1EC';
+$ms-icon-code-PowerPointLogoFill16: '\F395';
+$ms-icon-code-PowerPointLogoInverse: '\EC2A';
+$ms-icon-code-PowerPointLogoInverse16: '\F393';
+$ms-icon-code-PowerShell: '\F1FD';
+$ms-icon-code-PowerShell2: '\F730';
+$ms-icon-code-Precipitation: '\E9CF';
+$ms-icon-code-PresenceChickletVideo: '\E979';
+$ms-icon-code-Presentation: '\F6E4';
+$ms-icon-code-Presentation12: '\F6E5';
+$ms-icon-code-Preview: '\E8FF';
+$ms-icon-code-PreviewLink: '\E8A1';
+$ms-icon-code-Previous: '\E892';
+$ms-icon-code-PrimaryCalendar: '\F4AE';
+$ms-icon-code-Print: '\E749';
+$ms-icon-code-PrintfaxPrinterFile: '\E956';
+$ms-icon-code-Processing: '\E9F5';
+$ms-icon-code-ProcessingCancel: '\E403';
+$ms-icon-code-ProcessingPause: '\E405';
+$ms-icon-code-ProcessingRun: '\E404';
+$ms-icon-code-ProcessMetaTask: '\F290';
+$ms-icon-code-Product: '\ECDC';
+$ms-icon-code-ProductCatalog: '\EFE8';
+$ms-icon-code-ProductionFloorManagement: '\EE29';
+$ms-icon-code-ProductList: '\E31E';
+$ms-icon-code-ProductRelease: '\EE2E';
+$ms-icon-code-ProductVariant: '\EE30';
+$ms-icon-code-ProfileSearch: '\EF35';
+$ms-icon-code-ProFootball: '\EB27';
+$ms-icon-code-ProgressLoopInner: '\ECDE';
+$ms-icon-code-ProgressLoopOuter: '\ECDF';
+$ms-icon-code-ProgressRingDots: '\F16A';
+$ms-icon-code-ProHockey: '\EB28';
+$ms-icon-code-ProjectCollection: '\F363';
+$ms-icon-code-ProjectDocument: '\F759';
+$ms-icon-code-ProjectLogo16: '\F480';
+$ms-icon-code-ProjectLogo32: '\F47E';
+$ms-icon-code-ProjectLogoFill16: '\F481';
+$ms-icon-code-ProjectLogoFill32: '\F47F';
+$ms-icon-code-ProjectLogoInverse: '\EDD4';
+$ms-icon-code-PromotedDatabase: '\F77D';
+$ms-icon-code-ProtectedDocument: '\E8A6';
+$ms-icon-code-ProtectionCenterLogo32: '\F494';
+$ms-icon-code-ProtectRestrict: '\F22A';
+$ms-icon-code-ProvisioningPackage: '\E835';
+$ms-icon-code-PublicCalendar: '\EF6D';
+$ms-icon-code-PublicContactCard: '\EF6E';
+$ms-icon-code-PublicContactCardMirrored: '\F230';
+$ms-icon-code-PublicEmail: '\EF6F';
+$ms-icon-code-PublicFolder: '\EF70';
+$ms-icon-code-PublishContent: '\F0D4';
+$ms-icon-code-PublishCourse: '\F699';
+$ms-icon-code-PublisherLogo: '\F1ED';
+$ms-icon-code-PublisherLogo16: '\F3A0';
+$ms-icon-code-PublisherLogoFill: '\F1EE';
+$ms-icon-code-PublisherLogoFill16: '\F3A1';
+$ms-icon-code-PublisherLogoInverse16: '\F39F';
+$ms-icon-code-Puzzle: '\EA86';
+$ms-icon-code-PY: '\F2F9';
+$ms-icon-code-PythonLanguage: '\F2F8';
+$ms-icon-code-QandA: '\F8A2';
+$ms-icon-code-QandAMirror: '\F8A3';
+$ms-icon-code-QRCode: '\ED14';
+$ms-icon-code-QuadColumn: '\F66F';
+$ms-icon-code-Quantity: '\E9F8';
+$ms-icon-code-QuarterCircle: '\F502';
+$ms-icon-code-QueryList: '\F2B8';
+$ms-icon-code-Questionnaire: '\EE19';
+$ms-icon-code-QuestionnaireMirrored: '\EE4B';
+$ms-icon-code-QuickNote: '\E70B';
+$ms-icon-code-QuickNoteSolid: '\F338';
+$ms-icon-code-R: '\F4EB';
+$ms-icon-code-RadioBtnOff: '\ECCA';
+$ms-icon-code-RadioBtnOn: '\ECCB';
+$ms-icon-code-RadioBullet: '\E915';
+$ms-icon-code-Rain: '\E9C4';
+$ms-icon-code-RainShowersDay: '\E9C3';
+$ms-icon-code-RainShowersNight: '\EA0F';
+$ms-icon-code-RainSnow: '\E9C7';
+$ms-icon-code-RawSource: '\F299';
+$ms-icon-code-Read: '\E8C3';
+$ms-icon-code-ReadingMode: '\E736';
+$ms-icon-code-ReadingModeSolid: '\F33D';
+$ms-icon-code-ReadOutLoud: '\F112';
+$ms-icon-code-RealEstate: '\E758';
+$ms-icon-code-ReceiptCheck: '\EF5B';
+$ms-icon-code-ReceiptForward: '\EF59';
+$ms-icon-code-ReceiptReply: '\EF5A';
+$ms-icon-code-ReceiptTentative: '\F41A';
+$ms-icon-code-ReceiptTentativeMirrored: '\F41B';
+$ms-icon-code-ReceiptUndelivered: '\F419';
+$ms-icon-code-Recent: '\E823';
+$ms-icon-code-Record2: '\EA3F';
+$ms-icon-code-RecruitmentManagement: '\EE12';
+$ms-icon-code-RectangleShape: '\F1A9';
+$ms-icon-code-RectangleShapeSolid: '\F640';
+$ms-icon-code-RectangularClipping: '\F407';
+$ms-icon-code-RecurringEvent: '\EF5D';
+$ms-icon-code-RecurringTask: '\EDB2';
+$ms-icon-code-RecycleBin: '\EF87';
+$ms-icon-code-Redeploy: '\F29E';
+$ms-icon-code-RedEye: '\E7B3';
+$ms-icon-code-RedEye12: '\E3AD';
+$ms-icon-code-Redo: '\E7A6';
+$ms-icon-code-Refresh: '\E72C';
+$ms-icon-code-RegistryEditor: '\F1FF';
+$ms-icon-code-Relationship: '\F003';
+$ms-icon-code-ReleaseDefinition: '\F6EA';
+$ms-icon-code-ReleaseGate: '\F7BE';
+$ms-icon-code-ReleaseGateCheck: '\F7BF';
+$ms-icon-code-ReleaseGateError: '\F7C0';
+$ms-icon-code-ReminderGroup: '\EBF8';
+$ms-icon-code-ReminderPerson: '\EBF7';
+$ms-icon-code-ReminderTime: '\EBF9';
+$ms-icon-code-Remote: '\E8AF';
+$ms-icon-code-Remove: '\E738';
+$ms-icon-code-RemoveContent: '\ECC7';
+$ms-icon-code-RemoveEvent: '\ED8A';
+$ms-icon-code-RemoveFilter: '\EB08';
+$ms-icon-code-RemoveFromShoppingList: '\F7D5';
+$ms-icon-code-RemoveFromTrash: '\F82B';
+$ms-icon-code-RemoveLink: '\ED90';
+$ms-icon-code-RemoveLinkChain: '\F79A';
+$ms-icon-code-RemoveLinkX: '\F79B';
+$ms-icon-code-RemoveOccurrence: '\ED9B';
+$ms-icon-code-Rename: '\E8AC';
+$ms-icon-code-RenewalCurrent: '\F545';
+$ms-icon-code-RenewalFuture: '\F546';
+$ms-icon-code-ReopenPages: '\ED50';
+$ms-icon-code-Repair: '\E90F';
+$ms-icon-code-RepeatAll: '\E8EE';
+$ms-icon-code-RepeatHeaderRows: '\E3EB';
+$ms-icon-code-RepeatOne: '\E8ED';
+$ms-icon-code-Reply: '\E97A';
+$ms-icon-code-ReplyAll: '\EE0A';
+$ms-icon-code-ReplyAllAlt: '\EF5F';
+$ms-icon-code-ReplyAllMirrored: '\EE36';
+$ms-icon-code-ReplyAlt: '\EF5E';
+$ms-icon-code-ReplyMirrored: '\EE35';
+$ms-icon-code-Repo: '\F2CB';
+$ms-icon-code-ReportAdd: '\F52C';
+$ms-icon-code-ReportDocument: '\E9F9';
+$ms-icon-code-ReportHacked: '\E730';
+$ms-icon-code-ReportLibrary: '\EEBB';
+$ms-icon-code-ReportLibraryMirrored: '\EEBC';
+$ms-icon-code-ReportLock: '\F875';
+$ms-icon-code-ReportWarning: '\F569';
+$ms-icon-code-RepoSolid: '\F2CC';
+$ms-icon-code-Rerun: '\F8A1';
+$ms-icon-code-ReservationOrders: '\F845';
+$ms-icon-code-Reset: '\E423';
+$ms-icon-code-ResetDevice: '\ED10';
+$ms-icon-code-ResponsesMenu: '\F768';
+$ms-icon-code-ReturnKey: '\E751';
+$ms-icon-code-ReturnToSession: '\ED24';
+$ms-icon-code-ReviewRequestMirroredSolid: '\F357';
+$ms-icon-code-ReviewRequestSolid: '\F356';
+$ms-icon-code-ReviewResponseSolid: '\F358';
+$ms-icon-code-ReviewSolid: '\F355';
+$ms-icon-code-RevToggleKey: '\E845';
+$ms-icon-code-Rewind: '\EB9E';
+$ms-icon-code-Ribbon: '\E9D1';
+$ms-icon-code-RibbonSolid: '\F345';
+$ms-icon-code-RightDoubleQuote: '\E9B1';
+$ms-icon-code-RightTriangle: '\F500';
+$ms-icon-code-Ringer: '\EA8F';
+$ms-icon-code-RingerOff: '\F2C5';
+$ms-icon-code-RingerRemove: '\F279';
+$ms-icon-code-RingerSolid: '\EF3A';
+$ms-icon-code-Robot: '\E99A';
+$ms-icon-code-Rocket: '\F3B3';
+$ms-icon-code-Room: '\ED9F';
+$ms-icon-code-Rotate: '\E7AD';
+$ms-icon-code-Rotate90Clockwise: '\F80D';
+$ms-icon-code-Rotate90CounterClockwise: '\F80E';
+$ms-icon-code-RowsChild: '\F29C';
+$ms-icon-code-RowsGroup: '\F29B';
+$ms-icon-code-Rugby: '\EB2D';
+$ms-icon-code-Running: '\EADA';
+$ms-icon-code-Sad: '\E757';
+$ms-icon-code-SadSolid: '\F33E';
+$ms-icon-code-Save: '\E74E';
+$ms-icon-code-SaveAll: '\F203';
+$ms-icon-code-SaveAndClose: '\F038';
+$ms-icon-code-SaveAs: '\E792';
+$ms-icon-code-SaveTemplate: '\F6EC';
+$ms-icon-code-SaveToMobile: '\F7E0';
+$ms-icon-code-Savings: '\EB0B';
+$ms-icon-code-ScaleUp: '\ED09';
+$ms-icon-code-ScaleVolume: '\F18C';
+$ms-icon-code-ScatterChart: '\EFEB';
+$ms-icon-code-ScheduleEventAction: '\F1EF';
+$ms-icon-code-SchoolDataSyncLogo: '\E34C';
+$ms-icon-code-ScopeTemplate: '\F2B0';
+$ms-icon-code-ScreenCast: '\F7E2';
+$ms-icon-code-Script: '\F03A';
+$ms-icon-code-ScrollUpDown: '\EC8F';
+$ms-icon-code-SDCard: '\E7F1';
+$ms-icon-code-Search: '\E721';
+$ms-icon-code-SearchAndApps: '\E773';
+$ms-icon-code-SearchBookmark: '\F5B8';
+$ms-icon-code-SearchCalendar: '\F4AF';
+$ms-icon-code-SearchData: '\F3F1';
+$ms-icon-code-SearchIssue: '\F09A';
+$ms-icon-code-SearchIssueMirrored: '\F09B';
+$ms-icon-code-SearchNearby: '\E820';
+$ms-icon-code-SecondaryNav: '\F814';
+$ms-icon-code-Section: '\EC0C';
+$ms-icon-code-Sections: '\EF76';
+$ms-icon-code-SecurityGroup: '\ED85';
+$ms-icon-code-SeeDo: '\E808';
+$ms-icon-code-SelectAll: '\E8B3';
+$ms-icon-code-Sell: '\EB0C';
+$ms-icon-code-SemiboldWeight: '\F4F0';
+$ms-icon-code-Send: '\E724';
+$ms-icon-code-SendMirrored: '\EA63';
+$ms-icon-code-SentimentAnalysis: '\E393';
+$ms-icon-code-Separator: '\F35E';
+$ms-icon-code-Server: '\F201';
+$ms-icon-code-ServerEnviroment: '\F29F';
+$ms-icon-code-ServerProcesses: '\F1FE';
+$ms-icon-code-ServiceOff: '\E3FD';
+$ms-icon-code-SetAction: '\F071';
+$ms-icon-code-Settings: '\E713';
+$ms-icon-code-ShakeDevice: '\F80A';
+$ms-icon-code-Shapes: '\EC7C';
+$ms-icon-code-ShapeSolid: '\E422';
+$ms-icon-code-Share: '\E72D';
+$ms-icon-code-SharedDatabase: '\E3D9';
+$ms-icon-code-ShareiOS: '\EF79';
+$ms-icon-code-SharepointAppIcon16: '\E365';
+$ms-icon-code-SharepointLogo: '\F27E';
+$ms-icon-code-SharepointLogoFill: '\F27F';
+$ms-icon-code-SharepointLogoInverse: '\ED18';
+$ms-icon-code-Shield: '\EA18';
+$ms-icon-code-ShieldAlert: '\F7D7';
+$ms-icon-code-ShieldSolid: '\F340';
+$ms-icon-code-Shirt: '\ED00';
+$ms-icon-code-Shop: '\E719';
+$ms-icon-code-ShoppingCart: '\E7BF';
+$ms-icon-code-ShoppingCartSolid: '\F342';
+$ms-icon-code-ShopServer: '\F2B6';
+$ms-icon-code-ShowGrid: '\F7DE';
+$ms-icon-code-ShowResults: '\E8BC';
+$ms-icon-code-ShowResultsMirrored: '\EA65';
+$ms-icon-code-ShowTimeAs: '\F787';
+$ms-icon-code-SidePanel: '\EF52';
+$ms-icon-code-SidePanelMirrored: '\F221';
+$ms-icon-code-Signin: '\F286';
+$ms-icon-code-SignOut: '\F3B1';
+$ms-icon-code-SingleBookmark: '\EDFF';
+$ms-icon-code-SingleBookmarkSolid: '\EE00';
+$ms-icon-code-SingleColumn: '\F1D3';
+$ms-icon-code-SingleColumnEdit: '\F321';
+$ms-icon-code-SIPMove: '\E759';
+$ms-icon-code-SiteScan: '\EBEC';
+$ms-icon-code-SizeLegacy: '\E2B2';
+$ms-icon-code-SkipBack10: '\ED3C';
+$ms-icon-code-SkipForward30: '\ED3D';
+$ms-icon-code-SkiResorts: '\EB45';
+$ms-icon-code-SkypeArrow: '\F748';
+$ms-icon-code-SkypeCheck: '\EF80';
+$ms-icon-code-SkypeCircleArrow: '\F747';
+$ms-icon-code-SkypeCircleCheck: '\EF7D';
+$ms-icon-code-SkypeCircleClock: '\EF7E';
+$ms-icon-code-SkypeCircleMinus: '\EF7F';
+$ms-icon-code-SkypeCircleSlash: '\F825';
+$ms-icon-code-SkypeClock: '\EF81';
+$ms-icon-code-SkypeForBusinessLogo: '\F0FC';
+$ms-icon-code-SkypeForBusinessLogo16: '\F40F';
+$ms-icon-code-SkypeForBusinessLogoFill: '\F27D';
+$ms-icon-code-SkypeForBusinessLogoFill16: '\F410';
+$ms-icon-code-SkypeLogo: '\EB6F';
+$ms-icon-code-SkypeLogo16: '\F40E';
+$ms-icon-code-SkypeMessage: '\EF83';
+$ms-icon-code-SkypeMinus: '\EF82';
+$ms-icon-code-SkypeSlash: '\F826';
+$ms-icon-code-Slider: '\F527';
+$ms-icon-code-SliderHandleSize: '\F528';
+$ms-icon-code-SliderThumb: '\EC13';
+$ms-icon-code-Slideshow: '\E786';
+$ms-icon-code-SmartGlassRemote: '\F80B';
+$ms-icon-code-SnapToGrid: '\F7E4';
+$ms-icon-code-Snooze: '\F4BD';
+$ms-icon-code-Snow: '\E9C8';
+$ms-icon-code-Snowflake: '\EB46';
+$ms-icon-code-SnowShowerDay: '\E9FD';
+$ms-icon-code-SnowShowerNight: '\EA11';
+$ms-icon-code-Soccer: '\EB21';
+$ms-icon-code-SocialListeningLogo: '\ED7C';
+$ms-icon-code-Sort: '\E8CB';
+$ms-icon-code-SortDown: '\EE69';
+$ms-icon-code-SortLines: '\E9D0';
+$ms-icon-code-SortUp: '\EE68';
+$ms-icon-code-Source: '\EB1B';
+$ms-icon-code-Spacer: '\F40D';
+$ms-icon-code-Speakers: '\E7F5';
+$ms-icon-code-SpecialEvent: '\F536';
+$ms-icon-code-SpeedHigh: '\EC4A';
+$ms-icon-code-Spelling: '\F87B';
+$ms-icon-code-Split: '\EDBC';
+$ms-icon-code-SplitObject: '\F547';
+$ms-icon-code-Sprint: '\F3B0';
+$ms-icon-code-Squalls: '\E9CC';
+$ms-icon-code-SquareShape: '\F1A6';
+$ms-icon-code-SquareShapeSolid: '\F63D';
+$ms-icon-code-Stack: '\F26F';
+$ms-icon-code-StackColumnChart: '\E9FC';
+$ms-icon-code-StackedBarChart: '\F24D';
+$ms-icon-code-StackedColumnChart2: '\F666';
+$ms-icon-code-StackedColumnChart2Fill: '\F831';
+$ms-icon-code-StackedLineChart: '\F24E';
+$ms-icon-code-StackIndicator: '\E7FF';
+$ms-icon-code-StaffNotebookLogo16: '\F48E';
+$ms-icon-code-StaffNotebookLogo32: '\F48C';
+$ms-icon-code-StaffNotebookLogoFill16: '\F48F';
+$ms-icon-code-StaffNotebookLogoFill32: '\F48D';
+$ms-icon-code-StaffNotebookLogoInverted16: '\F491';
+$ms-icon-code-StaffNotebookLogoInverted32: '\F490';
+$ms-icon-code-Starburst: '\EF78';
+$ms-icon-code-StarburstSolid: '\F33C';
+$ms-icon-code-StatusCircleBlock: '\F140';
+$ms-icon-code-StatusCircleBlock2: '\F141';
+$ms-icon-code-StatusCircleCheckmark: '\F13E';
+$ms-icon-code-StatusCircleErrorX: '\F13D';
+$ms-icon-code-StatusCircleExclamation: '\F13C';
+$ms-icon-code-StatusCircleInfo: '\F13F';
+$ms-icon-code-StatusCircleInner: '\F137';
+$ms-icon-code-StatusCircleOuter: '\F136';
+$ms-icon-code-StatusCircleQuestionMark: '\F142';
+$ms-icon-code-StatusCircleRing: '\F138';
+$ms-icon-code-StatusCircleSync: '\F143';
+$ms-icon-code-StatusErrorFull: '\EB90';
+$ms-icon-code-StatusTriangle: '\EA82';
+$ms-icon-code-StatusTriangleExclamation: '\F13B';
+$ms-icon-code-StatusTriangleInner: '\F13A';
+$ms-icon-code-StatusTriangleOuter: '\F139';
+$ms-icon-code-Step: '\F241';
+$ms-icon-code-StepInsert: '\F242';
+$ms-icon-code-StepShared: '\F243';
+$ms-icon-code-StepSharedAdd: '\F244';
+$ms-icon-code-StepSharedInsert: '\F245';
+$ms-icon-code-StickyNotesOutlineAppIcon: '\E36A';
+$ms-icon-code-StickyNotesSolidAppIcon: '\E36B';
+$ms-icon-code-StockDown: '\EB0F';
+$ms-icon-code-StockUp: '\EB11';
+$ms-icon-code-Stop: '\E71A';
+$ms-icon-code-StopSolid: '\EE95';
+$ms-icon-code-Stopwatch: '\E916';
+$ms-icon-code-StorageOptical: '\E958';
+$ms-icon-code-StoreLogo16: '\EA96';
+$ms-icon-code-StoreLogoMed20: '\EA04';
+$ms-icon-code-Storyboard: '\F308';
+$ms-icon-code-Streaming: '\E93E';
+$ms-icon-code-StreamingOff: '\F2BB';
+$ms-icon-code-StreamLogo: '\F329';
+$ms-icon-code-Street: '\E913';
+$ms-icon-code-StreetsideSplitMinimize: '\E802';
+$ms-icon-code-Strikethrough: '\EDE0';
+$ms-icon-code-Subscribe: '\EDA1';
+$ms-icon-code-Subscript: '\EDDF';
+$ms-icon-code-SubstitutionsIn: '\EB31';
+$ms-icon-code-Suitcase: '\EDD3';
+$ms-icon-code-SunAdd: '\EF69';
+$ms-icon-code-Sunny: '\E9BD';
+$ms-icon-code-SunQuestionMark: '\EF6A';
+$ms-icon-code-Superscript: '\EDDE';
+$ms-icon-code-SurveyQuestions: '\F01B';
+$ms-icon-code-SwayLogo16: '\F484';
+$ms-icon-code-SwayLogo32: '\F482';
+$ms-icon-code-SwayLogoFill16: '\F485';
+$ms-icon-code-SwayLogoFill32: '\F483';
+$ms-icon-code-SwayLogoInverse: '\ED29';
+$ms-icon-code-Switch: '\E8AB';
+$ms-icon-code-SwitcherStartEnd: '\E810';
+$ms-icon-code-SwitchUser: '\E748';
+$ms-icon-code-Sync: '\E895';
+$ms-icon-code-SyncFolder: '\E8F7';
+$ms-icon-code-SyncOccurence: '\F4A3';
+$ms-icon-code-SyncStatus: '\F751';
+$ms-icon-code-SyncStatusSolid: '\F752';
+$ms-icon-code-SyncToPC: '\EE6E';
+$ms-icon-code-System: '\E770';
+$ms-icon-code-Tab: '\E7E9';
+$ms-icon-code-TabCenter: '\F100';
+$ms-icon-code-Table: '\ED86';
+$ms-icon-code-TableBrandedColumn: '\E3F1';
+$ms-icon-code-TableBrandedRow: '\E3EE';
+$ms-icon-code-TableComputed: '\F8F5';
+$ms-icon-code-TableFirstColumn: '\E3EF';
+$ms-icon-code-TableGroup: '\F6D9';
+$ms-icon-code-TableHeaderRow: '\E3EC';
+$ms-icon-code-TableLastColumn: '\E3F0';
+$ms-icon-code-TableLink: '\F77A';
+$ms-icon-code-Tablet: '\E70A';
+$ms-icon-code-TabletMode: '\EBFC';
+$ms-icon-code-TableTotalRow: '\E3ED';
+$ms-icon-code-TabletSelected: '\EC74';
+$ms-icon-code-TabOneColumn: '\F849';
+$ms-icon-code-TabThreeColumn: '\F84B';
+$ms-icon-code-TabTwoColumn: '\F84A';
+$ms-icon-code-Tag: '\E8EC';
+$ms-icon-code-TagGroup: '\E3F6';
+$ms-icon-code-TagSolid: '\F70E';
+$ms-icon-code-TagUnknown: '\F6DF';
+$ms-icon-code-TagUnknown12: '\F6E1';
+$ms-icon-code-TagUnknown12Mirror: '\F6E2';
+$ms-icon-code-TagUnknownMirror: '\F6E0';
+$ms-icon-code-Taskboard: '\F1C2';
+$ms-icon-code-TaskGroup: '\F2AE';
+$ms-icon-code-TaskGroupMirrored: '\F2AF';
+$ms-icon-code-TaskList: '\E3B6';
+$ms-icon-code-TaskLogo: '\F493';
+$ms-icon-code-TaskManager: '\EDB7';
+$ms-icon-code-TaskManagerMirrored: '\EDB8';
+$ms-icon-code-TaskSolid: '\F333';
+$ms-icon-code-Taxi: '\F4A1';
+$ms-icon-code-TeamFavorite: '\F2AD';
+$ms-icon-code-TeamsLogo: '\F27B';
+$ms-icon-code-TeamsLogo16: '\F40A';
+$ms-icon-code-TeamsLogoFill: '\F27C';
+$ms-icon-code-TeamsLogoFill16: '\F40B';
+$ms-icon-code-TeamsLogoInverse: '\F27A';
+$ms-icon-code-Teamwork: '\EA12';
+$ms-icon-code-Teeth: '\F4A0';
+$ms-icon-code-Telemarketer: '\E7B9';
+$ms-icon-code-TemporaryUser: '\EE58';
+$ms-icon-code-Tennis: '\EB33';
+$ms-icon-code-TestAutoSolid: '\F3A8';
+$ms-icon-code-TestBeaker: '\F3A5';
+$ms-icon-code-TestBeakerSolid: '\F3A6';
+$ms-icon-code-TestCase: '\F3AF';
+$ms-icon-code-TestExploreSolid: '\F3A7';
+$ms-icon-code-TestImpactSolid: '\F3AA';
+$ms-icon-code-TestParameter: '\F3AD';
+$ms-icon-code-TestPlan: '\F3AB';
+$ms-icon-code-TestStep: '\F3AC';
+$ms-icon-code-TestSuite: '\F3AE';
+$ms-icon-code-TestUserSolid: '\F3A9';
+$ms-icon-code-TextAlignBottom: '\E3E2';
+$ms-icon-code-TextAlignMiddle: '\E3E1';
+$ms-icon-code-TextAlignTop: '\E3E0';
+$ms-icon-code-TextBox: '\EDC2';
+$ms-icon-code-TextCallout: '\F2A2';
+$ms-icon-code-TextDocument: '\F029';
+$ms-icon-code-TextDocumentShared: '\F02B';
+$ms-icon-code-TextField: '\EDC3';
+$ms-icon-code-TextOverflow: '\F51F';
+$ms-icon-code-TextParagraphOption: '\E3E3';
+$ms-icon-code-TextRecognition: '\E394';
+$ms-icon-code-TextRotate270Degrees: '\E3E7';
+$ms-icon-code-TextRotate90Degrees: '\E3E6';
+$ms-icon-code-TextRotateHorizontal: '\E3E5';
+$ms-icon-code-TextRotation: '\E3E4';
+$ms-icon-code-TFVCLogo: '\F44D';
+$ms-icon-code-ThisPC: '\EC4E';
+$ms-icon-code-ThreeQuarterCircle: '\F503';
+$ms-icon-code-ThumbnailView: '\E7B6';
+$ms-icon-code-ThumbnailViewMirrored: '\EA67';
+$ms-icon-code-Thunderstorms: '\E9C6';
+$ms-icon-code-Ticket: '\EB54';
+$ms-icon-code-Tiles: '\ECA5';
+$ms-icon-code-Tiles2: '\EF7C';
+$ms-icon-code-TimeEntry: '\EF95';
+$ms-icon-code-Timeline: '\ED9C';
+$ms-icon-code-TimelineDelivery: '\F2AB';
+$ms-icon-code-TimelineMatrixView: '\F361';
+$ms-icon-code-TimelineProgress: '\F2AA';
+$ms-icon-code-TimePicker: '\E367';
+$ms-icon-code-Timer: '\E91E';
+$ms-icon-code-TimeSheet: '\EA05';
+$ms-icon-code-ToDoLogoBottom: '\F4B3';
+$ms-icon-code-ToDoLogoInverse: '\F4BC';
+$ms-icon-code-ToDoLogoOutline: '\F75B';
+$ms-icon-code-ToDoLogoTop: '\F4B4';
+$ms-icon-code-ToggleBorder: '\EC12';
+$ms-icon-code-ToggleFilled: '\EC11';
+$ms-icon-code-ToggleLeft: '\F19E';
+$ms-icon-code-ToggleRight: '\F19F';
+$ms-icon-code-ToggleThumb: '\EC14';
+$ms-icon-code-Toll: '\F160';
+$ms-icon-code-Toolbox: '\ECED';
+$ms-icon-code-Total: '\E9DF';
+$ms-icon-code-Touch: '\E815';
+$ms-icon-code-TouchPointer: '\E7C9';
+$ms-icon-code-Trackers: '\EADF';
+$ms-icon-code-TrackersMirrored: '\EE92';
+$ms-icon-code-Train: '\E7C0';
+$ms-icon-code-TrainSolid: '\EB4D';
+$ms-icon-code-TransferCall: '\ED95';
+$ms-icon-code-Transition: '\F3BC';
+$ms-icon-code-TransitionEffect: '\F5B4';
+$ms-icon-code-TransitionPop: '\F5B2';
+$ms-icon-code-TransitionPush: '\F5B3';
+$ms-icon-code-Translate: '\E7B2';
+$ms-icon-code-Trending12: '\F62D';
+$ms-icon-code-TriangleDown12: '\EED1';
+$ms-icon-code-TriangleLeft12: '\EED2';
+$ms-icon-code-TriangleRight12: '\EED3';
+$ms-icon-code-TriangleShape: '\F1A7';
+$ms-icon-code-TriangleShapeSolid: '\F63E';
+$ms-icon-code-TriangleSolid: '\EA08';
+$ms-icon-code-TriangleSolidDown12: '\EECD';
+$ms-icon-code-TriangleSolidLeft12: '\EECE';
+$ms-icon-code-TriangleSolidRight12: '\EECF';
+$ms-icon-code-TriangleSolidUp12: '\EECC';
+$ms-icon-code-TriangleUp12: '\EED0';
+$ms-icon-code-TriggerApproval: '\F3B2';
+$ms-icon-code-TriggerAuto: '\F24A';
+$ms-icon-code-TriggerUser: '\F24B';
+$ms-icon-code-Trim: '\E78A';
+$ms-icon-code-TrimEnd: '\F8BC';
+$ms-icon-code-TrimStart: '\F8BB';
+$ms-icon-code-TripleColumn: '\F1D5';
+$ms-icon-code-TripleColumnEdit: '\F323';
+$ms-icon-code-TripleColumnWide: '\F66E';
+$ms-icon-code-Trophy: '\ED3F';
+$ms-icon-code-Trophy2: '\F1AE';
+$ms-icon-code-Trophy2Solid: '\F337';
+$ms-icon-code-TurnRight: '\E7DB';
+$ms-icon-code-TVMonitor: '\E7F4';
+$ms-icon-code-TVMonitorSelected: '\EC77';
+$ms-icon-code-TypeScriptLanguage: '\F2F7';
+$ms-icon-code-Umbrella: '\EC04';
+$ms-icon-code-Underline: '\E8DC';
+$ms-icon-code-Undo: '\E7A7';
+$ms-icon-code-Uneditable: '\ED1D';
+$ms-icon-code-Uneditable2: '\F876';
+$ms-icon-code-Uneditable2Mirrored: '\F877';
+$ms-icon-code-UneditableMirrored: '\F4B9';
+$ms-icon-code-UneditableSolid12: '\F4B7';
+$ms-icon-code-UneditableSolidMirrored12: '\F4B8';
+$ms-icon-code-Unfavorite: '\E8D9';
+$ms-icon-code-UngroupObject: '\F4F2';
+$ms-icon-code-Unknown: '\E9CE';
+$ms-icon-code-UnknownCall: '\ED97';
+$ms-icon-code-UnknownMirrored: '\F22E';
+$ms-icon-code-UnknownMirroredSolid: '\F2E2';
+$ms-icon-code-UnknownSolid: '\F2E1';
+$ms-icon-code-Unlock: '\E785';
+$ms-icon-code-UnlockSolid: '\F304';
+$ms-icon-code-Unpin: '\E77A';
+$ms-icon-code-UnpublishContent: '\E31F';
+$ms-icon-code-UnSetColor: '\F3F9';
+$ms-icon-code-UnstackSelected: '\E7FE';
+$ms-icon-code-Unsubscribe: '\EDA0';
+$ms-icon-code-UnsyncFolder: '\E8F6';
+$ms-icon-code-UnsyncOccurence: '\F4A4';
+$ms-icon-code-Untag: '\F60B';
+$ms-icon-code-Up: '\E74A';
+$ms-icon-code-UpdateRestore: '\E777';
+$ms-icon-code-UpgradeAnalysis: '\EA0B';
+$ms-icon-code-Upload: '\E898';
+$ms-icon-code-URLBlock: '\E3FE';
+$ms-icon-code-USB: '\E88E';
+$ms-icon-code-UserEvent: '\F69C';
+$ms-icon-code-UserFollowed: '\F25C';
+$ms-icon-code-UserGauge: '\F6ED';
+$ms-icon-code-UserOptional: '\F767';
+$ms-icon-code-UserPause: '\F2BA';
+$ms-icon-code-UserRemove: '\F69B';
+$ms-icon-code-UserSync: '\F2B9';
+$ms-icon-code-UserWarning: '\E368';
+$ms-icon-code-Vacation: '\F49F';
+$ms-icon-code-Vaccination: '\EAE0';
+$ms-icon-code-Variable: '\F305';
+$ms-icon-code-Variable2: '\F86D';
+$ms-icon-code-VariableGroup: '\F31B';
+$ms-icon-code-VB: '\F2F2';
+$ms-icon-code-VennDiagram: '\F273';
+$ms-icon-code-VerifiedBrand: '\F7BD';
+$ms-icon-code-VerifiedBrandSolid: '\F6AD';
+$ms-icon-code-VersionControlPush: '\F664';
+$ms-icon-code-VerticalDistributeCenter: '\F4FA';
+$ms-icon-code-Video: '\E714';
+$ms-icon-code-Video360Generic: '\F609';
+$ms-icon-code-VideoLightOff: '\EA74';
+$ms-icon-code-VideoOff: '\F4B0';
+$ms-icon-code-VideoSearch: '\F4EA';
+$ms-icon-code-VideoSolid: '\EA0C';
+$ms-icon-code-View: '\E890';
+$ms-icon-code-ViewAll: '\E8A9';
+$ms-icon-code-ViewAll2: '\EF56';
+$ms-icon-code-ViewDashboard: '\F246';
+$ms-icon-code-ViewInAR: '\E41F';
+$ms-icon-code-ViewList: '\F247';
+$ms-icon-code-ViewListGroup: '\F248';
+$ms-icon-code-ViewListTree: '\F249';
+$ms-icon-code-ViewOriginal: '\E7B4';
+$ms-icon-code-VisioDiagram: '\F2A0';
+$ms-icon-code-VisioDiagramSync: '\F762';
+$ms-icon-code-VisioDocument: '\F2A9';
+$ms-icon-code-VisioLogo: '\F2A7';
+$ms-icon-code-VisioLogo16: '\F3A3';
+$ms-icon-code-VisioLogoFill: '\F2A8';
+$ms-icon-code-VisioLogoFill16: '\F3A4';
+$ms-icon-code-VisioLogoInverse: '\ED7D';
+$ms-icon-code-VisioLogoInverse16: '\F3A2';
+$ms-icon-code-VisualBasicLanguage: '\F2F1';
+$ms-icon-code-VisuallyImpaired: '\F866';
+$ms-icon-code-VisualsFolder: '\F520';
+$ms-icon-code-VisualsStore: '\F521';
+$ms-icon-code-VisualStudioIDELogo32: '\F5D0';
+$ms-icon-code-VisualStudioLogo: '\EC22';
+$ms-icon-code-VoicemailForward: '\ED87';
+$ms-icon-code-VoicemailIRM: '\F421';
+$ms-icon-code-VoicemailReply: '\ED88';
+$ms-icon-code-Volume0: '\E992';
+$ms-icon-code-Volume1: '\E993';
+$ms-icon-code-Volume2: '\E994';
+$ms-icon-code-Volume3: '\E995';
+$ms-icon-code-VolumeDisabled: '\EA85';
+$ms-icon-code-VSTSAltLogo1: '\F382';
+$ms-icon-code-VSTSAltLogo2: '\F383';
+$ms-icon-code-VSTSLogo: '\F381';
+$ms-icon-code-Waffle: '\ED89';
+$ms-icon-code-WaffleOffice365: '\F4E0';
+$ms-icon-code-WaitlistConfirm: '\F550';
+$ms-icon-code-WaitlistConfirmMirrored: '\F551';
+$ms-icon-code-Warning: '\E7BA';
+$ms-icon-code-Warning12: '\F62F';
+$ms-icon-code-WarningSolid: '\F736';
+$ms-icon-code-WavingHand: '\F807';
+$ms-icon-code-WebAppBuilderFragment: '\E314';
+$ms-icon-code-WebAppBuilderFragmentCreate: '\E31B';
+$ms-icon-code-WebAppBuilderModule: '\E313';
+$ms-icon-code-WebAppBuilderSlot: '\E315';
+$ms-icon-code-Webcam2: '\E960';
+$ms-icon-code-Webcam2Off: '\E36D';
+$ms-icon-code-WebComponents: '\EC8B';
+$ms-icon-code-WebEnvironment: '\E3DB';
+$ms-icon-code-WebPublish: '\F52F';
+$ms-icon-code-Website: '\EB41';
+$ms-icon-code-WebTemplate: '\F6B2';
+$ms-icon-code-Weights: '\EADB';
+$ms-icon-code-Wheelchair: '\F31F';
+$ms-icon-code-WhiteBoardApp16: '\F673';
+$ms-icon-code-WhiteBoardApp32: '\F674';
+$ms-icon-code-WifiEthernet: '\EE77';
+$ms-icon-code-WifiWarning4: '\EB63';
+$ms-icon-code-WindDirection: '\EBE6';
+$ms-icon-code-WindowEdit: '\F50E';
+$ms-icon-code-WindowsLogo: '\E782';
+$ms-icon-code-Wines: '\EABF';
+$ms-icon-code-WipePhone: '\ED8D';
+$ms-icon-code-WordDocument: '\EF71';
+$ms-icon-code-WordLogo: '\F1E3';
+$ms-icon-code-WordLogo16: '\F391';
+$ms-icon-code-WordLogoFill: '\F1E4';
+$ms-icon-code-WordLogoFill16: '\F392';
+$ms-icon-code-WordLogoInverse: '\EC29';
+$ms-icon-code-WordLogoInverse16: '\F390';
+$ms-icon-code-Work: '\E821';
+$ms-icon-code-WorkFlow: '\EA01';
+$ms-icon-code-WorkforceManagement: '\EE0F';
+$ms-icon-code-WorkItem: '\F314';
+$ms-icon-code-WorkItemAlert: '\F78F';
+$ms-icon-code-WorkItemBar: '\F35C';
+$ms-icon-code-WorkItemBarSolid: '\F35D';
+$ms-icon-code-WorkItemBug: '\F315';
+$ms-icon-code-World: '\E909';
+$ms-icon-code-WorldClock: '\E918';
+$ms-icon-code-YammerLogo: '\ED19';
+$ms-icon-code-ZipFolder: '\F012';
+$ms-icon-code-Zoom: '\E71E';
+$ms-icon-code-ZoomIn: '\E8A3';
+$ms-icon-code-ZoomOut: '\E71F';
+$ms-icon-code-ZoomToFit: '\F649';
+
+// Deprecated icons.
+$ms-icon-code-HumanResources: '\F240';
+$ms-icon-code-OneDrive: $ms-icon-code-OneDriveLogo;
+$ms-icon-code-ToggleOff: $ms-icon-code-ToggleRight;
+
+
+// A map containing icon names and values. Someday SCSS will support string
+// interpolation within a variable name and this map won't be necessary, as we'll
+// be able to do something like #{$ms-icon-code-#{$iconName}} to get the value.
+$ms-icon-map: (
+  '12PointStar': $ms-icon-code-12PointStar,
+  '6PointStar': $ms-icon-code-6PointStar,
+  'AADLogo': $ms-icon-code-AADLogo,
+  'Accept': $ms-icon-code-Accept,
+  'AccessibiltyChecker': $ms-icon-code-AccessibiltyChecker,
+  'AccessLogo': $ms-icon-code-AccessLogo,
+  'AccessLogoFill': $ms-icon-code-AccessLogoFill,
+  'AccountActivity': $ms-icon-code-AccountActivity,
+  'AccountBrowser': $ms-icon-code-AccountBrowser,
+  'AccountManagement': $ms-icon-code-AccountManagement,
+  'Accounts': $ms-icon-code-Accounts,
+  'ActionCenter': $ms-icon-code-ActionCenter,
+  'ActivateOrders': $ms-icon-code-ActivateOrders,
+  'ActivityFeed': $ms-icon-code-ActivityFeed,
+  'Add': $ms-icon-code-Add,
+  'AddBookmark': $ms-icon-code-AddBookmark,
+  'AddEvent': $ms-icon-code-AddEvent,
+  'AddFavorite': $ms-icon-code-AddFavorite,
+  'AddFavoriteFill': $ms-icon-code-AddFavoriteFill,
+  'AddFriend': $ms-icon-code-AddFriend,
+  'AddGroup': $ms-icon-code-AddGroup,
+  'AddHome': $ms-icon-code-AddHome,
+  'AddIn': $ms-icon-code-AddIn,
+  'AddLink': $ms-icon-code-AddLink,
+  'AddNotes': $ms-icon-code-AddNotes,
+  'AddOnlineMeeting': $ms-icon-code-AddOnlineMeeting,
+  'AddPhone': $ms-icon-code-AddPhone,
+  'AddReaction': $ms-icon-code-AddReaction,
+  'AddSpaceAfter': $ms-icon-code-AddSpaceAfter,
+  'AddSpaceBefore': $ms-icon-code-AddSpaceBefore,
+  'AddTo': $ms-icon-code-AddTo,
+  'AddToShoppingList': $ms-icon-code-AddToShoppingList,
+  'AddWork': $ms-icon-code-AddWork,
+  'Admin': $ms-icon-code-Admin,
+  'AdminALogo32': $ms-icon-code-AdminALogo32,
+  'AdminALogoFill32': $ms-icon-code-AdminALogoFill32,
+  'AdminALogoInverse32': $ms-icon-code-AdminALogoInverse32,
+  'AdminCLogoInverse32': $ms-icon-code-AdminCLogoInverse32,
+  'AdminDLogoInverse32': $ms-icon-code-AdminDLogoInverse32,
+  'AdminELogoInverse32': $ms-icon-code-AdminELogoInverse32,
+  'AdminLLogoInverse32': $ms-icon-code-AdminLLogoInverse32,
+  'AdminMLogoInverse32': $ms-icon-code-AdminMLogoInverse32,
+  'AdminOLogoInverse32': $ms-icon-code-AdminOLogoInverse32,
+  'AdminPLogoInverse32': $ms-icon-code-AdminPLogoInverse32,
+  'AdminSLogoInverse32': $ms-icon-code-AdminSLogoInverse32,
+  'AdminYLogoInverse32': $ms-icon-code-AdminYLogoInverse32,
+  'Airplane': $ms-icon-code-Airplane,
+  'AirplaneSolid': $ms-icon-code-AirplaneSolid,
+  'AirTickets': $ms-icon-code-AirTickets,
+  'AlarmClock': $ms-icon-code-AlarmClock,
+  'Album': $ms-icon-code-Album,
+  'AlbumRemove': $ms-icon-code-AlbumRemove,
+  'AlertSettings': $ms-icon-code-AlertSettings,
+  'AlertSolid': $ms-icon-code-AlertSolid,
+  'AlignCenter': $ms-icon-code-AlignCenter,
+  'AlignHorizontalCenter': $ms-icon-code-AlignHorizontalCenter,
+  'AlignHorizontalLeft': $ms-icon-code-AlignHorizontalLeft,
+  'AlignHorizontalRight': $ms-icon-code-AlignHorizontalRight,
+  'AlignJustify': $ms-icon-code-AlignJustify,
+  'AlignLeft': $ms-icon-code-AlignLeft,
+  'AlignRight': $ms-icon-code-AlignRight,
+  'AlignVerticalBottom': $ms-icon-code-AlignVerticalBottom,
+  'AlignVerticalCenter': $ms-icon-code-AlignVerticalCenter,
+  'AlignVerticalTop': $ms-icon-code-AlignVerticalTop,
+  'AllApps': $ms-icon-code-AllApps,
+  'AllAppsMirrored': $ms-icon-code-AllAppsMirrored,
+  'AllCurrency': $ms-icon-code-AllCurrency,
+  'AltText': $ms-icon-code-AltText,
+  'AnalyticsLogo': $ms-icon-code-AnalyticsLogo,
+  'AnalyticsQuery': $ms-icon-code-AnalyticsQuery,
+  'AnalyticsReport': $ms-icon-code-AnalyticsReport,
+  'AnalyticsView': $ms-icon-code-AnalyticsView,
+  'AnchorLock': $ms-icon-code-AnchorLock,
+  'Annotation': $ms-icon-code-Annotation,
+  'AppIconDefault': $ms-icon-code-AppIconDefault,
+  'AppIconDefaultAdd': $ms-icon-code-AppIconDefaultAdd,
+  'AppIconDefaultList': $ms-icon-code-AppIconDefaultList,
+  'Archive': $ms-icon-code-Archive,
+  'ArchiveUndo': $ms-icon-code-ArchiveUndo,
+  'AreaChart': $ms-icon-code-AreaChart,
+  'ArrangeBringForward': $ms-icon-code-ArrangeBringForward,
+  'ArrangeBringToFront': $ms-icon-code-ArrangeBringToFront,
+  'ArrangeByFrom': $ms-icon-code-ArrangeByFrom,
+  'ArrangeSendBackward': $ms-icon-code-ArrangeSendBackward,
+  'ArrangeSendToBack': $ms-icon-code-ArrangeSendToBack,
+  'Arrivals': $ms-icon-code-Arrivals,
+  'ArrowDownRight8': $ms-icon-code-ArrowDownRight8,
+  'ArrowDownRightMirrored8': $ms-icon-code-ArrowDownRightMirrored8,
+  'ArrowTallDownLeft': $ms-icon-code-ArrowTallDownLeft,
+  'ArrowTallDownRight': $ms-icon-code-ArrowTallDownRight,
+  'ArrowTallUpLeft': $ms-icon-code-ArrowTallUpLeft,
+  'ArrowTallUpRight': $ms-icon-code-ArrowTallUpRight,
+  'ArrowUpRight': $ms-icon-code-ArrowUpRight,
+  'ArrowUpRight8': $ms-icon-code-ArrowUpRight8,
+  'ArrowUpRightMirrored8': $ms-icon-code-ArrowUpRightMirrored8,
+  'Articles': $ms-icon-code-Articles,
+  'Ascending': $ms-icon-code-Ascending,
+  'AspectRatio': $ms-icon-code-AspectRatio,
+  'AssessmentGroup': $ms-icon-code-AssessmentGroup,
+  'AssessmentGroupTemplate': $ms-icon-code-AssessmentGroupTemplate,
+  'AssetLibrary': $ms-icon-code-AssetLibrary,
+  'Assign': $ms-icon-code-Assign,
+  'Asterisk': $ms-icon-code-Asterisk,
+  'AsteriskSolid': $ms-icon-code-AsteriskSolid,
+  'ATPLogo': $ms-icon-code-ATPLogo,
+  'Attach': $ms-icon-code-Attach,
+  'AustralianRules': $ms-icon-code-AustralianRules,
+  'AuthenticatorApp': $ms-icon-code-AuthenticatorApp,
+  'AutoDeploySettings': $ms-icon-code-AutoDeploySettings,
+  'AutoEnhanceOff': $ms-icon-code-AutoEnhanceOff,
+  'AutoEnhanceOn': $ms-icon-code-AutoEnhanceOn,
+  'AutoFillTemplate': $ms-icon-code-AutoFillTemplate,
+  'AutoFitContents': $ms-icon-code-AutoFitContents,
+  'AutoFitWindow': $ms-icon-code-AutoFitWindow,
+  'AutoHeight': $ms-icon-code-AutoHeight,
+  'AutomateFlow': $ms-icon-code-AutomateFlow,
+  'AutoRacing': $ms-icon-code-AutoRacing,
+  'AwayStatus': $ms-icon-code-AwayStatus,
+  'AzureAPIManagement': $ms-icon-code-AzureAPIManagement,
+  'AzureKeyVault': $ms-icon-code-AzureKeyVault,
+  'AzureLogo': $ms-icon-code-AzureLogo,
+  'AzureServiceEndpoint': $ms-icon-code-AzureServiceEndpoint,
+  'Back': $ms-icon-code-Back,
+  'BackgroundColor': $ms-icon-code-BackgroundColor,
+  'Backlog': $ms-icon-code-Backlog,
+  'BacklogBoard': $ms-icon-code-BacklogBoard,
+  'BacklogList': $ms-icon-code-BacklogList,
+  'BackToWindow': $ms-icon-code-BackToWindow,
+  'Badge': $ms-icon-code-Badge,
+  'Balloons': $ms-icon-code-Balloons,
+  'Bank': $ms-icon-code-Bank,
+  'BankSolid': $ms-icon-code-BankSolid,
+  'BarChart4': $ms-icon-code-BarChart4,
+  'BarChartHorizontal': $ms-icon-code-BarChartHorizontal,
+  'BarChartVertical': $ms-icon-code-BarChartVertical,
+  'BarChartVerticalEdit': $ms-icon-code-BarChartVerticalEdit,
+  'BarChartVerticalFill': $ms-icon-code-BarChartVerticalFill,
+  'BarChartVerticalFilter': $ms-icon-code-BarChartVerticalFilter,
+  'BarChartVerticalFilterSolid': $ms-icon-code-BarChartVerticalFilterSolid,
+  'Baseball': $ms-icon-code-Baseball,
+  'BeerMug': $ms-icon-code-BeerMug,
+  'BIDashboard': $ms-icon-code-BIDashboard,
+  'BidiLtr': $ms-icon-code-BidiLtr,
+  'BidiRtl': $ms-icon-code-BidiRtl,
+  'BingLogo': $ms-icon-code-BingLogo,
+  'BirthdayCake': $ms-icon-code-BirthdayCake,
+  'BlockContact': $ms-icon-code-BlockContact,
+  'Blocked': $ms-icon-code-Blocked,
+  'Blocked12': $ms-icon-code-Blocked12,
+  'Blocked2': $ms-icon-code-Blocked2,
+  'Blocked2Solid': $ms-icon-code-Blocked2Solid,
+  'BlockedSite': $ms-icon-code-BlockedSite,
+  'BlockedSiteSolid12': $ms-icon-code-BlockedSiteSolid12,
+  'BlockedSolid': $ms-icon-code-BlockedSolid,
+  'Blog': $ms-icon-code-Blog,
+  'BlowingSnow': $ms-icon-code-BlowingSnow,
+  'Blur': $ms-icon-code-Blur,
+  'Boards': $ms-icon-code-Boards,
+  'Bold': $ms-icon-code-Bold,
+  'BookAnswers': $ms-icon-code-BookAnswers,
+  'BookingsLogo': $ms-icon-code-BookingsLogo,
+  'BookmarkReport': $ms-icon-code-BookmarkReport,
+  'Bookmarks': $ms-icon-code-Bookmarks,
+  'BookmarksMirrored': $ms-icon-code-BookmarksMirrored,
+  'BorderDash': $ms-icon-code-BorderDash,
+  'BorderDot': $ms-icon-code-BorderDot,
+  'BoxAdditionSolid': $ms-icon-code-BoxAdditionSolid,
+  'BoxCheckmarkSolid': $ms-icon-code-BoxCheckmarkSolid,
+  'BoxMultiplySolid': $ms-icon-code-BoxMultiplySolid,
+  'BoxPlaySolid': $ms-icon-code-BoxPlaySolid,
+  'BoxSubtractSolid': $ms-icon-code-BoxSubtractSolid,
+  'BranchCommit': $ms-icon-code-BranchCommit,
+  'BranchCompare': $ms-icon-code-BranchCompare,
+  'BranchFork': $ms-icon-code-BranchFork,
+  'BranchFork2': $ms-icon-code-BranchFork2,
+  'BranchLocked': $ms-icon-code-BranchLocked,
+  'BranchMerge': $ms-icon-code-BranchMerge,
+  'BranchPullRequest': $ms-icon-code-BranchPullRequest,
+  'BranchSearch': $ms-icon-code-BranchSearch,
+  'BranchShelveset': $ms-icon-code-BranchShelveset,
+  'Breadcrumb': $ms-icon-code-Breadcrumb,
+  'Breakfast': $ms-icon-code-Breakfast,
+  'Brightness': $ms-icon-code-Brightness,
+  'Broom': $ms-icon-code-Broom,
+  'BrowserScreenShot': $ms-icon-code-BrowserScreenShot,
+  'BrowserTab': $ms-icon-code-BrowserTab,
+  'BrowserTabScreenshot': $ms-icon-code-BrowserTabScreenshot,
+  'Brunch': $ms-icon-code-Brunch,
+  'Brush': $ms-icon-code-Brush,
+  'BucketColor': $ms-icon-code-BucketColor,
+  'BucketColorFill': $ms-icon-code-BucketColorFill,
+  'BufferTimeAfter': $ms-icon-code-BufferTimeAfter,
+  'BufferTimeBefore': $ms-icon-code-BufferTimeBefore,
+  'BufferTimeBoth': $ms-icon-code-BufferTimeBoth,
+  'Bug': $ms-icon-code-Bug,
+  'BugBlock': $ms-icon-code-BugBlock,
+  'BugSolid': $ms-icon-code-BugSolid,
+  'BugSync': $ms-icon-code-BugSync,
+  'Build': $ms-icon-code-Build,
+  'BuildDefinition': $ms-icon-code-BuildDefinition,
+  'BuildIssue': $ms-icon-code-BuildIssue,
+  'BuildQueue': $ms-icon-code-BuildQueue,
+  'BuildQueueNew': $ms-icon-code-BuildQueueNew,
+  'BulkUpload': $ms-icon-code-BulkUpload,
+  'BulletedList': $ms-icon-code-BulletedList,
+  'BulletedList2': $ms-icon-code-BulletedList2,
+  'BulletedList2Mirrored': $ms-icon-code-BulletedList2Mirrored,
+  'BulletedListBullet': $ms-icon-code-BulletedListBullet,
+  'BulletedListBulletMirrored': $ms-icon-code-BulletedListBulletMirrored,
+  'BulletedListMirrored': $ms-icon-code-BulletedListMirrored,
+  'BulletedListText': $ms-icon-code-BulletedListText,
+  'BulletedListTextMirrored': $ms-icon-code-BulletedListTextMirrored,
+  'BulletedTreeList': $ms-icon-code-BulletedTreeList,
+  'Bullseye': $ms-icon-code-Bullseye,
+  'BullseyeTarget': $ms-icon-code-BullseyeTarget,
+  'BullseyeTargetEdit': $ms-icon-code-BullseyeTargetEdit,
+  'Bus': $ms-icon-code-Bus,
+  'BusinessCenterLogo': $ms-icon-code-BusinessCenterLogo,
+  'BusinessHoursSign': $ms-icon-code-BusinessHoursSign,
+  'BusSolid': $ms-icon-code-BusSolid,
+  'ButtonControl': $ms-icon-code-ButtonControl,
+  'Cafe': $ms-icon-code-Cafe,
+  'Cake': $ms-icon-code-Cake,
+  'Calculator': $ms-icon-code-Calculator,
+  'CalculatorAddition': $ms-icon-code-CalculatorAddition,
+  'CalculatorDelta': $ms-icon-code-CalculatorDelta,
+  'CalculatorEqualTo': $ms-icon-code-CalculatorEqualTo,
+  'CalculatorMultiply': $ms-icon-code-CalculatorMultiply,
+  'CalculatorNotEqualTo': $ms-icon-code-CalculatorNotEqualTo,
+  'CalculatorPercentage': $ms-icon-code-CalculatorPercentage,
+  'CalculatorSubtract': $ms-icon-code-CalculatorSubtract,
+  'Calendar': $ms-icon-code-Calendar,
+  'CalendarAgenda': $ms-icon-code-CalendarAgenda,
+  'CalendarDay': $ms-icon-code-CalendarDay,
+  'CalendarMirrored': $ms-icon-code-CalendarMirrored,
+  'CalendarReply': $ms-icon-code-CalendarReply,
+  'CalendarSettings': $ms-icon-code-CalendarSettings,
+  'CalendarSettingsMirrored': $ms-icon-code-CalendarSettingsMirrored,
+  'CalendarWeek': $ms-icon-code-CalendarWeek,
+  'CalendarWorkWeek': $ms-icon-code-CalendarWorkWeek,
+  'CalendarYear': $ms-icon-code-CalendarYear,
+  'Calories': $ms-icon-code-Calories,
+  'CaloriesAdd': $ms-icon-code-CaloriesAdd,
+  'Camera': $ms-icon-code-Camera,
+  'CampaignTemplate': $ms-icon-code-CampaignTemplate,
+  'Cancel': $ms-icon-code-Cancel,
+  'CannedChat': $ms-icon-code-CannedChat,
+  'Car': $ms-icon-code-Car,
+  'CaretBottomLeftCenter8': $ms-icon-code-CaretBottomLeftCenter8,
+  'CaretBottomLeftSolid8': $ms-icon-code-CaretBottomLeftSolid8,
+  'CaretBottomRightCenter8': $ms-icon-code-CaretBottomRightCenter8,
+  'CaretBottomRightSolid8': $ms-icon-code-CaretBottomRightSolid8,
+  'CaretDown8': $ms-icon-code-CaretDown8,
+  'CaretDownSolid8': $ms-icon-code-CaretDownSolid8,
+  'CaretHollow': $ms-icon-code-CaretHollow,
+  'CaretHollowMirrored': $ms-icon-code-CaretHollowMirrored,
+  'CaretLeft8': $ms-icon-code-CaretLeft8,
+  'CaretLeftSolid8': $ms-icon-code-CaretLeftSolid8,
+  'CaretRight': $ms-icon-code-CaretRight,
+  'CaretRight8': $ms-icon-code-CaretRight8,
+  'CaretRightSolid8': $ms-icon-code-CaretRightSolid8,
+  'CaretSolid': $ms-icon-code-CaretSolid,
+  'CaretSolid16': $ms-icon-code-CaretSolid16,
+  'CaretSolidDown': $ms-icon-code-CaretSolidDown,
+  'CaretSolidLeft': $ms-icon-code-CaretSolidLeft,
+  'CaretSolidMirrored': $ms-icon-code-CaretSolidMirrored,
+  'CaretSolidRight': $ms-icon-code-CaretSolidRight,
+  'CaretSolidUp': $ms-icon-code-CaretSolidUp,
+  'CaretTopLeftCenter8': $ms-icon-code-CaretTopLeftCenter8,
+  'CaretTopLeftSolid8': $ms-icon-code-CaretTopLeftSolid8,
+  'CaretTopRightCenter8': $ms-icon-code-CaretTopRightCenter8,
+  'CaretTopRightSolid8': $ms-icon-code-CaretTopRightSolid8,
+  'CaretUp8': $ms-icon-code-CaretUp8,
+  'CaretUpSolid8': $ms-icon-code-CaretUpSolid8,
+  'Cat': $ms-icon-code-Cat,
+  'CellPhone': $ms-icon-code-CellPhone,
+  'Certificate': $ms-icon-code-Certificate,
+  'CertifiedDatabase': $ms-icon-code-CertifiedDatabase,
+  'ChangeEntitlements': $ms-icon-code-ChangeEntitlements,
+  'Chart': $ms-icon-code-Chart,
+  'ChartSeries': $ms-icon-code-ChartSeries,
+  'ChartTemplate': $ms-icon-code-ChartTemplate,
+  'ChartXAngle': $ms-icon-code-ChartXAngle,
+  'ChartYAngle': $ms-icon-code-ChartYAngle,
+  'Chat': $ms-icon-code-Chat,
+  'ChatBot': $ms-icon-code-ChatBot,
+  'ChatInviteFriend': $ms-icon-code-ChatInviteFriend,
+  'ChatSolid': $ms-icon-code-ChatSolid,
+  'Checkbox': $ms-icon-code-Checkbox,
+  'CheckboxComposite': $ms-icon-code-CheckboxComposite,
+  'CheckboxCompositeReversed': $ms-icon-code-CheckboxCompositeReversed,
+  'CheckboxFill': $ms-icon-code-CheckboxFill,
+  'CheckboxIndeterminate': $ms-icon-code-CheckboxIndeterminate,
+  'CheckedOutByOther12': $ms-icon-code-CheckedOutByOther12,
+  'CheckedOutByYou12': $ms-icon-code-CheckedOutByYou12,
+  'CheckList': $ms-icon-code-CheckList,
+  'CheckListCheck': $ms-icon-code-CheckListCheck,
+  'CheckListCheckMirrored': $ms-icon-code-CheckListCheckMirrored,
+  'CheckListText': $ms-icon-code-CheckListText,
+  'CheckListTextMirrored': $ms-icon-code-CheckListTextMirrored,
+  'CheckMark': $ms-icon-code-CheckMark,
+  'ChevronDown': $ms-icon-code-ChevronDown,
+  'ChevronDownEnd6': $ms-icon-code-ChevronDownEnd6,
+  'ChevronDownMed': $ms-icon-code-ChevronDownMed,
+  'ChevronDownSmall': $ms-icon-code-ChevronDownSmall,
+  'ChevronFold10': $ms-icon-code-ChevronFold10,
+  'ChevronLeft': $ms-icon-code-ChevronLeft,
+  'ChevronLeftEnd6': $ms-icon-code-ChevronLeftEnd6,
+  'ChevronLeftMed': $ms-icon-code-ChevronLeftMed,
+  'ChevronLeftSmall': $ms-icon-code-ChevronLeftSmall,
+  'ChevronRight': $ms-icon-code-ChevronRight,
+  'ChevronRightEnd6': $ms-icon-code-ChevronRightEnd6,
+  'ChevronRightMed': $ms-icon-code-ChevronRightMed,
+  'ChevronRightSmall': $ms-icon-code-ChevronRightSmall,
+  'ChevronUnfold10': $ms-icon-code-ChevronUnfold10,
+  'ChevronUp': $ms-icon-code-ChevronUp,
+  'ChevronUpEnd6': $ms-icon-code-ChevronUpEnd6,
+  'ChevronUpMed': $ms-icon-code-ChevronUpMed,
+  'ChevronUpSmall': $ms-icon-code-ChevronUpSmall,
+  'Childof': $ms-icon-code-Childof,
+  'Chopsticks': $ms-icon-code-Chopsticks,
+  'ChromeBack': $ms-icon-code-ChromeBack,
+  'ChromeBackMirrored': $ms-icon-code-ChromeBackMirrored,
+  'ChromeClose': $ms-icon-code-ChromeClose,
+  'ChromeFullScreen': $ms-icon-code-ChromeFullScreen,
+  'ChromeMinimize': $ms-icon-code-ChromeMinimize,
+  'ChromeRestore': $ms-icon-code-ChromeRestore,
+  'CircleAddition': $ms-icon-code-CircleAddition,
+  'CircleAdditionSolid': $ms-icon-code-CircleAdditionSolid,
+  'CircleFill': $ms-icon-code-CircleFill,
+  'CircleHalfFull': $ms-icon-code-CircleHalfFull,
+  'CirclePause': $ms-icon-code-CirclePause,
+  'CirclePauseSolid': $ms-icon-code-CirclePauseSolid,
+  'CirclePlus': $ms-icon-code-CirclePlus,
+  'CircleRing': $ms-icon-code-CircleRing,
+  'CircleShape': $ms-icon-code-CircleShape,
+  'CircleShapeSolid': $ms-icon-code-CircleShapeSolid,
+  'CircleStop': $ms-icon-code-CircleStop,
+  'CircleStopSolid': $ms-icon-code-CircleStopSolid,
+  'CityNext': $ms-icon-code-CityNext,
+  'CityNext2': $ms-icon-code-CityNext2,
+  'ClassNotebookLogo16': $ms-icon-code-ClassNotebookLogo16,
+  'ClassNotebookLogo32': $ms-icon-code-ClassNotebookLogo32,
+  'ClassNotebookLogoFill16': $ms-icon-code-ClassNotebookLogoFill16,
+  'ClassNotebookLogoFill32': $ms-icon-code-ClassNotebookLogoFill32,
+  'ClassNotebookLogoInverse': $ms-icon-code-ClassNotebookLogoInverse,
+  'ClassNotebookLogoInverse16': $ms-icon-code-ClassNotebookLogoInverse16,
+  'ClassNotebookLogoInverse32': $ms-icon-code-ClassNotebookLogoInverse32,
+  'ClassroomLogo': $ms-icon-code-ClassroomLogo,
+  'Clear': $ms-icon-code-Clear,
+  'ClearFilter': $ms-icon-code-ClearFilter,
+  'ClearFormatting': $ms-icon-code-ClearFormatting,
+  'ClearFormattingA': $ms-icon-code-ClearFormattingA,
+  'ClearFormattingEraser': $ms-icon-code-ClearFormattingEraser,
+  'ClearNight': $ms-icon-code-ClearNight,
+  'ClearSelection': $ms-icon-code-ClearSelection,
+  'ClearSelectionMirrored': $ms-icon-code-ClearSelectionMirrored,
+  'ClipboardList': $ms-icon-code-ClipboardList,
+  'ClipboardListMirrored': $ms-icon-code-ClipboardListMirrored,
+  'ClipboardSolid': $ms-icon-code-ClipboardSolid,
+  'Clock': $ms-icon-code-Clock,
+  'CloneToDesktop': $ms-icon-code-CloneToDesktop,
+  'ClosedCaption': $ms-icon-code-ClosedCaption,
+  'ClosePane': $ms-icon-code-ClosePane,
+  'ClosePaneMirrored': $ms-icon-code-ClosePaneMirrored,
+  'Cloud': $ms-icon-code-Cloud,
+  'CloudAdd': $ms-icon-code-CloudAdd,
+  'CloudDownload': $ms-icon-code-CloudDownload,
+  'CloudImportExport': $ms-icon-code-CloudImportExport,
+  'CloudUpload': $ms-icon-code-CloudUpload,
+  'CloudWeather': $ms-icon-code-CloudWeather,
+  'Cloudy': $ms-icon-code-Cloudy,
+  'Cocktails': $ms-icon-code-Cocktails,
+  'Code': $ms-icon-code-Code,
+  'CodeEdit': $ms-icon-code-CodeEdit,
+  'Coffee': $ms-icon-code-Coffee,
+  'CoffeeScript': $ms-icon-code-CoffeeScript,
+  'CollapseContent': $ms-icon-code-CollapseContent,
+  'CollapseContentSingle': $ms-icon-code-CollapseContentSingle,
+  'CollapseMenu': $ms-icon-code-CollapseMenu,
+  'CollegeFootball': $ms-icon-code-CollegeFootball,
+  'CollegeHoops': $ms-icon-code-CollegeHoops,
+  'Color': $ms-icon-code-Color,
+  'ColorSolid': $ms-icon-code-ColorSolid,
+  'ColumnLeftTwoThirds': $ms-icon-code-ColumnLeftTwoThirds,
+  'ColumnLeftTwoThirdsEdit': $ms-icon-code-ColumnLeftTwoThirdsEdit,
+  'ColumnOptions': $ms-icon-code-ColumnOptions,
+  'ColumnRightTwoThirds': $ms-icon-code-ColumnRightTwoThirds,
+  'ColumnRightTwoThirdsEdit': $ms-icon-code-ColumnRightTwoThirdsEdit,
+  'ColumnVerticalSection': $ms-icon-code-ColumnVerticalSection,
+  'ColumnVerticalSectionEdit': $ms-icon-code-ColumnVerticalSectionEdit,
+  'Combine': $ms-icon-code-Combine,
+  'Combobox': $ms-icon-code-Combobox,
+  'CommandPrompt': $ms-icon-code-CommandPrompt,
+  'Comment': $ms-icon-code-Comment,
+  'CommentActive': $ms-icon-code-CommentActive,
+  'CommentAdd': $ms-icon-code-CommentAdd,
+  'CommentNext': $ms-icon-code-CommentNext,
+  'CommentPrevious': $ms-icon-code-CommentPrevious,
+  'CommentSolid': $ms-icon-code-CommentSolid,
+  'CommentUrgent': $ms-icon-code-CommentUrgent,
+  'Commitments': $ms-icon-code-Commitments,
+  'CommonDataServiceCDS': $ms-icon-code-CommonDataServiceCDS,
+  'Communications': $ms-icon-code-Communications,
+  'CompanyDirectory': $ms-icon-code-CompanyDirectory,
+  'CompanyDirectoryMirrored': $ms-icon-code-CompanyDirectoryMirrored,
+  'Compare': $ms-icon-code-Compare,
+  'CompareUneven': $ms-icon-code-CompareUneven,
+  'CompassNW': $ms-icon-code-CompassNW,
+  'Completed': $ms-icon-code-Completed,
+  'CompletedSolid': $ms-icon-code-CompletedSolid,
+  'ComplianceAudit': $ms-icon-code-ComplianceAudit,
+  'ConfigurationSolid': $ms-icon-code-ConfigurationSolid,
+  'ConnectContacts': $ms-icon-code-ConnectContacts,
+  'ConnectVirtualMachine': $ms-icon-code-ConnectVirtualMachine,
+  'ConstructionCone': $ms-icon-code-ConstructionCone,
+  'ConstructionConeSolid': $ms-icon-code-ConstructionConeSolid,
+  'Contact': $ms-icon-code-Contact,
+  'ContactCard': $ms-icon-code-ContactCard,
+  'ContactCardSettings': $ms-icon-code-ContactCardSettings,
+  'ContactCardSettingsMirrored': $ms-icon-code-ContactCardSettingsMirrored,
+  'ContactHeart': $ms-icon-code-ContactHeart,
+  'ContactInfo': $ms-icon-code-ContactInfo,
+  'ContactLink': $ms-icon-code-ContactLink,
+  'ContactList': $ms-icon-code-ContactList,
+  'ContactLock': $ms-icon-code-ContactLock,
+  'ContentFeed': $ms-icon-code-ContentFeed,
+  'ContentSettings': $ms-icon-code-ContentSettings,
+  'ContextMenu': $ms-icon-code-ContextMenu,
+  'Contrast': $ms-icon-code-Contrast,
+  'Copy': $ms-icon-code-Copy,
+  'CortanaLogoBeckonInner': $ms-icon-code-CortanaLogoBeckonInner,
+  'CortanaLogoBeckonOuter': $ms-icon-code-CortanaLogoBeckonOuter,
+  'CortanaLogoInner': $ms-icon-code-CortanaLogoInner,
+  'CortanaLogoOuter': $ms-icon-code-CortanaLogoOuter,
+  'CortanaLogoReadyInner': $ms-icon-code-CortanaLogoReadyInner,
+  'CortanaLogoReadyOuter': $ms-icon-code-CortanaLogoReadyOuter,
+  'Cotton': $ms-icon-code-Cotton,
+  'Coupon': $ms-icon-code-Coupon,
+  'CPlusPlus': $ms-icon-code-CPlusPlus,
+  'CPlusPlusLanguage': $ms-icon-code-CPlusPlusLanguage,
+  'CreateMailRule': $ms-icon-code-CreateMailRule,
+  'Cricket': $ms-icon-code-Cricket,
+  'CRMProcesses': $ms-icon-code-CRMProcesses,
+  'CRMReport': $ms-icon-code-CRMReport,
+  'CRMServices': $ms-icon-code-CRMServices,
+  'Crop': $ms-icon-code-Crop,
+  'Crown': $ms-icon-code-Crown,
+  'CrownSolid': $ms-icon-code-CrownSolid,
+  'CSharp': $ms-icon-code-CSharp,
+  'CSharpLanguage': $ms-icon-code-CSharpLanguage,
+  'CSS': $ms-icon-code-CSS,
+  'CubeShape': $ms-icon-code-CubeShape,
+  'CubeShapeSolid': $ms-icon-code-CubeShapeSolid,
+  'CustomizeToolbar': $ms-icon-code-CustomizeToolbar,
+  'CustomList': $ms-icon-code-CustomList,
+  'CustomListMirrored': $ms-icon-code-CustomListMirrored,
+  'Cut': $ms-icon-code-Cut,
+  'Cycling': $ms-icon-code-Cycling,
+  'D365CoreHR': $ms-icon-code-D365CoreHR,
+  'D365CustomerInsights': $ms-icon-code-D365CustomerInsights,
+  'D365ProjectOperations': $ms-icon-code-D365ProjectOperations,
+  'D365TalentInsight': $ms-icon-code-D365TalentInsight,
+  'D365TalentLearn': $ms-icon-code-D365TalentLearn,
+  'DashboardAdd': $ms-icon-code-DashboardAdd,
+  'Database': $ms-icon-code-Database,
+  'DatabaseSync': $ms-icon-code-DatabaseSync,
+  'DataConnectionLibrary': $ms-icon-code-DataConnectionLibrary,
+  'Dataflows': $ms-icon-code-Dataflows,
+  'DataflowsLink': $ms-icon-code-DataflowsLink,
+  'DataManagementSettings': $ms-icon-code-DataManagementSettings,
+  'DateTime': $ms-icon-code-DateTime,
+  'DateTime12': $ms-icon-code-DateTime12,
+  'DateTime2': $ms-icon-code-DateTime2,
+  'DateTimeMirrored': $ms-icon-code-DateTimeMirrored,
+  'DeactivateOrders': $ms-icon-code-DeactivateOrders,
+  'Decimals': $ms-icon-code-Decimals,
+  'DecisionSolid': $ms-icon-code-DecisionSolid,
+  'DeclineCall': $ms-icon-code-DeclineCall,
+  'DecreaseIndent': $ms-icon-code-DecreaseIndent,
+  'DecreaseIndentArrow': $ms-icon-code-DecreaseIndentArrow,
+  'DecreaseIndentArrowMirrored': $ms-icon-code-DecreaseIndentArrowMirrored,
+  'DecreaseIndentLegacy': $ms-icon-code-DecreaseIndentLegacy,
+  'DecreaseIndentMirrored': $ms-icon-code-DecreaseIndentMirrored,
+  'DecreaseIndentText': $ms-icon-code-DecreaseIndentText,
+  'DecreaseIndentTextMirrored': $ms-icon-code-DecreaseIndentTextMirrored,
+  'DefaultRatio': $ms-icon-code-DefaultRatio,
+  'DefectSolid': $ms-icon-code-DefectSolid,
+  'DefenderTVM': $ms-icon-code-DefenderTVM,
+  'Delete': $ms-icon-code-Delete,
+  'DeleteColumns': $ms-icon-code-DeleteColumns,
+  'DeleteRows': $ms-icon-code-DeleteRows,
+  'DeleteRowsMirrored': $ms-icon-code-DeleteRowsMirrored,
+  'DeleteTable': $ms-icon-code-DeleteTable,
+  'DeliveryTruck': $ms-icon-code-DeliveryTruck,
+  'DelveAnalytics': $ms-icon-code-DelveAnalytics,
+  'DelveAnalyticsLogo': $ms-icon-code-DelveAnalyticsLogo,
+  'DelveLogo': $ms-icon-code-DelveLogo,
+  'DelveLogoFill': $ms-icon-code-DelveLogoFill,
+  'DelveLogoInverse': $ms-icon-code-DelveLogoInverse,
+  'DependencyAdd': $ms-icon-code-DependencyAdd,
+  'DependencyRemove': $ms-icon-code-DependencyRemove,
+  'Deploy': $ms-icon-code-Deploy,
+  'Descending': $ms-icon-code-Descending,
+  'Design': $ms-icon-code-Design,
+  'DesktopScreenshot': $ms-icon-code-DesktopScreenshot,
+  'DeveloperTools': $ms-icon-code-DeveloperTools,
+  'DeviceBug': $ms-icon-code-DeviceBug,
+  'DeviceOff': $ms-icon-code-DeviceOff,
+  'DeviceRun': $ms-icon-code-DeviceRun,
+  'Devices2': $ms-icon-code-Devices2,
+  'Devices3': $ms-icon-code-Devices3,
+  'Devices4': $ms-icon-code-Devices4,
+  'Diagnostic': $ms-icon-code-Diagnostic,
+  'DiagnosticDataBarTooltip': $ms-icon-code-DiagnosticDataBarTooltip,
+  'Dialpad': $ms-icon-code-Dialpad,
+  'Diamond': $ms-icon-code-Diamond,
+  'DiamondSolid': $ms-icon-code-DiamondSolid,
+  'Dictionary': $ms-icon-code-Dictionary,
+  'DictionaryRemove': $ms-icon-code-DictionaryRemove,
+  'DietPlanNotebook': $ms-icon-code-DietPlanNotebook,
+  'DiffInline': $ms-icon-code-DiffInline,
+  'DiffSideBySide': $ms-icon-code-DiffSideBySide,
+  'DisableUpdates': $ms-icon-code-DisableUpdates,
+  'DisconnectVirtualMachine': $ms-icon-code-DisconnectVirtualMachine,
+  'Dislike': $ms-icon-code-Dislike,
+  'DislikeSolid': $ms-icon-code-DislikeSolid,
+  'DistributeDown': $ms-icon-code-DistributeDown,
+  'DockLeft': $ms-icon-code-DockLeft,
+  'DockLeftMirrored': $ms-icon-code-DockLeftMirrored,
+  'DockRight': $ms-icon-code-DockRight,
+  'DocLibrary': $ms-icon-code-DocLibrary,
+  'DocsLogoInverse': $ms-icon-code-DocsLogoInverse,
+  'Document': $ms-icon-code-Document,
+  'DocumentApproval': $ms-icon-code-DocumentApproval,
+  'Documentation': $ms-icon-code-Documentation,
+  'DocumentManagement': $ms-icon-code-DocumentManagement,
+  'DocumentReply': $ms-icon-code-DocumentReply,
+  'DocumentSearch': $ms-icon-code-DocumentSearch,
+  'DocumentSet': $ms-icon-code-DocumentSet,
+  'DOM': $ms-icon-code-DOM,
+  'DonutChart': $ms-icon-code-DonutChart,
+  'Door': $ms-icon-code-Door,
+  'DoubleBookmark': $ms-icon-code-DoubleBookmark,
+  'DoubleChevronDown': $ms-icon-code-DoubleChevronDown,
+  'DoubleChevronDown12': $ms-icon-code-DoubleChevronDown12,
+  'DoubleChevronDown8': $ms-icon-code-DoubleChevronDown8,
+  'DoubleChevronLeft': $ms-icon-code-DoubleChevronLeft,
+  'DoubleChevronLeft12': $ms-icon-code-DoubleChevronLeft12,
+  'DoubleChevronLeft8': $ms-icon-code-DoubleChevronLeft8,
+  'DoubleChevronLeftMed': $ms-icon-code-DoubleChevronLeftMed,
+  'DoubleChevronLeftMedMirrored': $ms-icon-code-DoubleChevronLeftMedMirrored,
+  'DoubleChevronRight': $ms-icon-code-DoubleChevronRight,
+  'DoubleChevronRight12': $ms-icon-code-DoubleChevronRight12,
+  'DoubleChevronRight8': $ms-icon-code-DoubleChevronRight8,
+  'DoubleChevronUp': $ms-icon-code-DoubleChevronUp,
+  'DoubleChevronUp12': $ms-icon-code-DoubleChevronUp12,
+  'DoubleChevronUp8': $ms-icon-code-DoubleChevronUp8,
+  'DoubleColumn': $ms-icon-code-DoubleColumn,
+  'DoubleColumnEdit': $ms-icon-code-DoubleColumnEdit,
+  'DoubleDownArrow': $ms-icon-code-DoubleDownArrow,
+  'Down': $ms-icon-code-Down,
+  'Download': $ms-icon-code-Download,
+  'DownloadDocument': $ms-icon-code-DownloadDocument,
+  'DragObject': $ms-icon-code-DragObject,
+  'DrillDown': $ms-icon-code-DrillDown,
+  'DrillDownSolid': $ms-icon-code-DrillDownSolid,
+  'DrillExpand': $ms-icon-code-DrillExpand,
+  'DrillShow': $ms-icon-code-DrillShow,
+  'DrillThrough': $ms-icon-code-DrillThrough,
+  'DriverOff': $ms-icon-code-DriverOff,
+  'DRM': $ms-icon-code-DRM,
+  'Drop': $ms-icon-code-Drop,
+  'Dropdown': $ms-icon-code-Dropdown,
+  'DropShape': $ms-icon-code-DropShape,
+  'DropShapeSolid': $ms-icon-code-DropShapeSolid,
+  'DuplicateRow': $ms-icon-code-DuplicateRow,
+  'Duststorm': $ms-icon-code-Duststorm,
+  'Dynamics365Logo': $ms-icon-code-Dynamics365Logo,
+  'DynamicSMBLogo': $ms-icon-code-DynamicSMBLogo,
+  'EaseOfAccess': $ms-icon-code-EaseOfAccess,
+  'EatDrink': $ms-icon-code-EatDrink,
+  'EdgeOldLogo': $ms-icon-code-EdgeOldLogo,
+  'eDiscovery': $ms-icon-code-eDiscovery,
+  'Edit': $ms-icon-code-Edit,
+  'EditContact': $ms-icon-code-EditContact,
+  'EditCreate': $ms-icon-code-EditCreate,
+  'EditMail': $ms-icon-code-EditMail,
+  'EditMirrored': $ms-icon-code-EditMirrored,
+  'EditNote': $ms-icon-code-EditNote,
+  'EditPhoto': $ms-icon-code-EditPhoto,
+  'EditSolid12': $ms-icon-code-EditSolid12,
+  'EditSolidMirrored12': $ms-icon-code-EditSolidMirrored12,
+  'EditStyle': $ms-icon-code-EditStyle,
+  'Education': $ms-icon-code-Education,
+  'Ellipse': $ms-icon-code-Ellipse,
+  'Embed': $ms-icon-code-Embed,
+  'EMI': $ms-icon-code-EMI,
+  'Emoji': $ms-icon-code-Emoji,
+  'Emoji2': $ms-icon-code-Emoji2,
+  'EmojiDisappointed': $ms-icon-code-EmojiDisappointed,
+  'EmojiNeutral': $ms-icon-code-EmojiNeutral,
+  'EmojiTabSymbols': $ms-icon-code-EmojiTabSymbols,
+  'EmptyRecycleBin': $ms-icon-code-EmptyRecycleBin,
+  'Encryption': $ms-icon-code-Encryption,
+  'EndPointSolid': $ms-icon-code-EndPointSolid,
+  'EngineeringGroup': $ms-icon-code-EngineeringGroup,
+  'EntitlementPolicy': $ms-icon-code-EntitlementPolicy,
+  'EntitlementRedemption': $ms-icon-code-EntitlementRedemption,
+  'EntryDecline': $ms-icon-code-EntryDecline,
+  'EntryView': $ms-icon-code-EntryView,
+  'Equalizer': $ms-icon-code-Equalizer,
+  'EraseTool': $ms-icon-code-EraseTool,
+  'Error': $ms-icon-code-Error,
+  'ErrorBadge': $ms-icon-code-ErrorBadge,
+  'Event': $ms-icon-code-Event,
+  'Event12': $ms-icon-code-Event12,
+  'EventAccepted': $ms-icon-code-EventAccepted,
+  'EventDate': $ms-icon-code-EventDate,
+  'EventDateMissed12': $ms-icon-code-EventDateMissed12,
+  'EventDeclined': $ms-icon-code-EventDeclined,
+  'EventInfo': $ms-icon-code-EventInfo,
+  'EventTentative': $ms-icon-code-EventTentative,
+  'EventTentativeMirrored': $ms-icon-code-EventTentativeMirrored,
+  'EventToDoLogo': $ms-icon-code-EventToDoLogo,
+  'ExcelDocument': $ms-icon-code-ExcelDocument,
+  'ExcelLogo': $ms-icon-code-ExcelLogo,
+  'ExcelLogo16': $ms-icon-code-ExcelLogo16,
+  'ExcelLogoFill': $ms-icon-code-ExcelLogoFill,
+  'ExcelLogoFill16': $ms-icon-code-ExcelLogoFill16,
+  'ExcelLogoInverse': $ms-icon-code-ExcelLogoInverse,
+  'ExcelLogoInverse16': $ms-icon-code-ExcelLogoInverse16,
+  'ExchangeLogo': $ms-icon-code-ExchangeLogo,
+  'ExchangeLogoFill': $ms-icon-code-ExchangeLogoFill,
+  'ExchangeLogoInverse': $ms-icon-code-ExchangeLogoInverse,
+  'ExerciseTracker': $ms-icon-code-ExerciseTracker,
+  'ExpandMenu': $ms-icon-code-ExpandMenu,
+  'ExploreContent': $ms-icon-code-ExploreContent,
+  'ExploreContentSingle': $ms-icon-code-ExploreContentSingle,
+  'ExploreData': $ms-icon-code-ExploreData,
+  'Export': $ms-icon-code-Export,
+  'ExportMirrored': $ms-icon-code-ExportMirrored,
+  'ExternalBuild': $ms-icon-code-ExternalBuild,
+  'ExternalTFVC': $ms-icon-code-ExternalTFVC,
+  'ExternalXAML': $ms-icon-code-ExternalXAML,
+  'Eyedropper': $ms-icon-code-Eyedropper,
+  'EyeShadow': $ms-icon-code-EyeShadow,
+  'F12DevTools': $ms-icon-code-F12DevTools,
+  'FabricAssetLibrary': $ms-icon-code-FabricAssetLibrary,
+  'FabricDataConnectionLibrary': $ms-icon-code-FabricDataConnectionLibrary,
+  'FabricDocLibrary': $ms-icon-code-FabricDocLibrary,
+  'FabricFolder': $ms-icon-code-FabricFolder,
+  'FabricFolderConfirm': $ms-icon-code-FabricFolderConfirm,
+  'FabricFolderFill': $ms-icon-code-FabricFolderFill,
+  'FabricFolderSearch': $ms-icon-code-FabricFolderSearch,
+  'FabricFolderUpload': $ms-icon-code-FabricFolderUpload,
+  'FabricFormLibrary': $ms-icon-code-FabricFormLibrary,
+  'FabricFormLibraryMirrored': $ms-icon-code-FabricFormLibraryMirrored,
+  'FabricMovetoFolder': $ms-icon-code-FabricMovetoFolder,
+  'FabricNetworkFolder': $ms-icon-code-FabricNetworkFolder,
+  'FabricNewFolder': $ms-icon-code-FabricNewFolder,
+  'FabricOpenFolderHorizontal': $ms-icon-code-FabricOpenFolderHorizontal,
+  'FabricPictureLibrary': $ms-icon-code-FabricPictureLibrary,
+  'FabricPublicFolder': $ms-icon-code-FabricPublicFolder,
+  'FabricReportLibrary': $ms-icon-code-FabricReportLibrary,
+  'FabricReportLibraryMirrored': $ms-icon-code-FabricReportLibraryMirrored,
+  'FabricSyncFolder': $ms-icon-code-FabricSyncFolder,
+  'FabricTextHighlight': $ms-icon-code-FabricTextHighlight,
+  'FabricTextHighlightComposite': $ms-icon-code-FabricTextHighlightComposite,
+  'FabricUnsyncFolder': $ms-icon-code-FabricUnsyncFolder,
+  'FabricUserFolder': $ms-icon-code-FabricUserFolder,
+  'Family': $ms-icon-code-Family,
+  'FangBody': $ms-icon-code-FangBody,
+  'FastForward': $ms-icon-code-FastForward,
+  'FastMode': $ms-icon-code-FastMode,
+  'Favicon': $ms-icon-code-Favicon,
+  'FavoriteList': $ms-icon-code-FavoriteList,
+  'FavoriteStar': $ms-icon-code-FavoriteStar,
+  'FavoriteStarFill': $ms-icon-code-FavoriteStarFill,
+  'Fax': $ms-icon-code-Fax,
+  'Feedback': $ms-icon-code-Feedback,
+  'FeedbackRequestMirroredSolid': $ms-icon-code-FeedbackRequestMirroredSolid,
+  'FeedbackRequestSolid': $ms-icon-code-FeedbackRequestSolid,
+  'FeedbackResponseSolid': $ms-icon-code-FeedbackResponseSolid,
+  'Ferry': $ms-icon-code-Ferry,
+  'FerrySolid': $ms-icon-code-FerrySolid,
+  'FieldChanged': $ms-icon-code-FieldChanged,
+  'FieldEmpty': $ms-icon-code-FieldEmpty,
+  'FieldFilled': $ms-icon-code-FieldFilled,
+  'FieldNotChanged': $ms-icon-code-FieldNotChanged,
+  'FieldReadOnly': $ms-icon-code-FieldReadOnly,
+  'FieldRequired': $ms-icon-code-FieldRequired,
+  'FileASPX': $ms-icon-code-FileASPX,
+  'FileBug': $ms-icon-code-FileBug,
+  'FileCode': $ms-icon-code-FileCode,
+  'FileComment': $ms-icon-code-FileComment,
+  'FileCSS': $ms-icon-code-FileCSS,
+  'FileHTML': $ms-icon-code-FileHTML,
+  'FileImage': $ms-icon-code-FileImage,
+  'FileJAVA': $ms-icon-code-FileJAVA,
+  'FileLess': $ms-icon-code-FileLess,
+  'FileOff': $ms-icon-code-FileOff,
+  'FilePDB': $ms-icon-code-FilePDB,
+  'FileRequest': $ms-icon-code-FileRequest,
+  'FileSass': $ms-icon-code-FileSass,
+  'FileSQL': $ms-icon-code-FileSQL,
+  'FileSymlink': $ms-icon-code-FileSymlink,
+  'FileTemplate': $ms-icon-code-FileTemplate,
+  'FileTypeSolution': $ms-icon-code-FileTypeSolution,
+  'FileYML': $ms-icon-code-FileYML,
+  'Filter': $ms-icon-code-Filter,
+  'FilterAscending': $ms-icon-code-FilterAscending,
+  'FilterDescending': $ms-icon-code-FilterDescending,
+  'Filters': $ms-icon-code-Filters,
+  'FilterSettings': $ms-icon-code-FilterSettings,
+  'FilterSolid': $ms-icon-code-FilterSolid,
+  'FiltersSolid': $ms-icon-code-FiltersSolid,
+  'Financial': $ms-icon-code-Financial,
+  'FinancialMirroredSolid': $ms-icon-code-FinancialMirroredSolid,
+  'FinancialSolid': $ms-icon-code-FinancialSolid,
+  'Fingerprint': $ms-icon-code-Fingerprint,
+  'FitPage': $ms-icon-code-FitPage,
+  'FitWidth': $ms-icon-code-FitWidth,
+  'FiveTileGrid': $ms-icon-code-FiveTileGrid,
+  'FixedAssetManagement': $ms-icon-code-FixedAssetManagement,
+  'FixedColumnWidth': $ms-icon-code-FixedColumnWidth,
+  'Flag': $ms-icon-code-Flag,
+  'FlameSolid': $ms-icon-code-FlameSolid,
+  'FlashAuto': $ms-icon-code-FlashAuto,
+  'Flashlight': $ms-icon-code-Flashlight,
+  'FlashOff': $ms-icon-code-FlashOff,
+  'FlickDown': $ms-icon-code-FlickDown,
+  'FlickLeft': $ms-icon-code-FlickLeft,
+  'FlickRight': $ms-icon-code-FlickRight,
+  'FlickUp': $ms-icon-code-FlickUp,
+  'Flow': $ms-icon-code-Flow,
+  'FlowChart': $ms-icon-code-FlowChart,
+  'Flower': $ms-icon-code-Flower,
+  'FocalPoint': $ms-icon-code-FocalPoint,
+  'Focus': $ms-icon-code-Focus,
+  'FocusView': $ms-icon-code-FocusView,
+  'Fog': $ms-icon-code-Fog,
+  'Folder': $ms-icon-code-Folder,
+  'FolderFill': $ms-icon-code-FolderFill,
+  'FolderHorizontal': $ms-icon-code-FolderHorizontal,
+  'FolderList': $ms-icon-code-FolderList,
+  'FolderListMirrored': $ms-icon-code-FolderListMirrored,
+  'FolderOpen': $ms-icon-code-FolderOpen,
+  'FolderQuery': $ms-icon-code-FolderQuery,
+  'FolderSearch': $ms-icon-code-FolderSearch,
+  'FollowUser': $ms-icon-code-FollowUser,
+  'Font': $ms-icon-code-Font,
+  'FontColor': $ms-icon-code-FontColor,
+  'FontColorA': $ms-icon-code-FontColorA,
+  'FontColorSwatch': $ms-icon-code-FontColorSwatch,
+  'FontDecrease': $ms-icon-code-FontDecrease,
+  'FontIncrease': $ms-icon-code-FontIncrease,
+  'FontSize': $ms-icon-code-FontSize,
+  'FontSize2': $ms-icon-code-FontSize2,
+  'Footer': $ms-icon-code-Footer,
+  'FormatPainter': $ms-icon-code-FormatPainter,
+  'FormLibrary': $ms-icon-code-FormLibrary,
+  'FormLibraryMirrored': $ms-icon-code-FormLibraryMirrored,
+  'Forum': $ms-icon-code-Forum,
+  'Forward': $ms-icon-code-Forward,
+  'ForwardEvent': $ms-icon-code-ForwardEvent,
+  'Freezing': $ms-icon-code-Freezing,
+  'Frigid': $ms-icon-code-Frigid,
+  'FrontCamera': $ms-icon-code-FrontCamera,
+  'FSharp': $ms-icon-code-FSharp,
+  'FSharpLanguage': $ms-icon-code-FSharpLanguage,
+  'FullCircleMask': $ms-icon-code-FullCircleMask,
+  'FullHistory': $ms-icon-code-FullHistory,
+  'FullScreen': $ms-icon-code-FullScreen,
+  'FullView': $ms-icon-code-FullView,
+  'FullWidth': $ms-icon-code-FullWidth,
+  'FullWidthEdit': $ms-icon-code-FullWidthEdit,
+  'FunctionalManagerDashboard': $ms-icon-code-FunctionalManagerDashboard,
+  'FunnelChart': $ms-icon-code-FunnelChart,
+  'GallatinLogo': $ms-icon-code-GallatinLogo,
+  'Game': $ms-icon-code-Game,
+  'Generate': $ms-icon-code-Generate,
+  'GenericScan': $ms-icon-code-GenericScan,
+  'GenericScanFilled': $ms-icon-code-GenericScanFilled,
+  'GIF': $ms-icon-code-GIF,
+  'Giftbox': $ms-icon-code-Giftbox,
+  'GiftboxOpen': $ms-icon-code-GiftboxOpen,
+  'GiftBoxSolid': $ms-icon-code-GiftBoxSolid,
+  'GiftCard': $ms-icon-code-GiftCard,
+  'GitGraph': $ms-icon-code-GitGraph,
+  'Glasses': $ms-icon-code-Glasses,
+  'Glimmer': $ms-icon-code-Glimmer,
+  'GlobalNavButton': $ms-icon-code-GlobalNavButton,
+  'GlobalNavButtonActive': $ms-icon-code-GlobalNavButtonActive,
+  'Globe': $ms-icon-code-Globe,
+  'Globe2': $ms-icon-code-Globe2,
+  'GlobeFavorite': $ms-icon-code-GlobeFavorite,
+  'Go': $ms-icon-code-Go,
+  'Golf': $ms-icon-code-Golf,
+  'GoMirrored': $ms-icon-code-GoMirrored,
+  'GoToDashboard': $ms-icon-code-GoToDashboard,
+  'GotoToday': $ms-icon-code-GotoToday,
+  'GreetingCard': $ms-icon-code-GreetingCard,
+  'GridViewLarge': $ms-icon-code-GridViewLarge,
+  'GridViewMedium': $ms-icon-code-GridViewMedium,
+  'GridViewSmall': $ms-icon-code-GridViewSmall,
+  'GripperBarHorizontal': $ms-icon-code-GripperBarHorizontal,
+  'GripperBarVertical': $ms-icon-code-GripperBarVertical,
+  'GripperDotsVertical': $ms-icon-code-GripperDotsVertical,
+  'GripperTool': $ms-icon-code-GripperTool,
+  'Group': $ms-icon-code-Group,
+  'GroupedAscending': $ms-icon-code-GroupedAscending,
+  'GroupedDescending': $ms-icon-code-GroupedDescending,
+  'GroupedList': $ms-icon-code-GroupedList,
+  'GroupList': $ms-icon-code-GroupList,
+  'GroupObject': $ms-icon-code-GroupObject,
+  'GUID': $ms-icon-code-GUID,
+  'Guitar': $ms-icon-code-Guitar,
+  'HailDay': $ms-icon-code-HailDay,
+  'HailNight': $ms-icon-code-HailNight,
+  'HalfAlpha': $ms-icon-code-HalfAlpha,
+  'HalfCircle': $ms-icon-code-HalfCircle,
+  'HandsFree': $ms-icon-code-HandsFree,
+  'Handwriting': $ms-icon-code-Handwriting,
+  'HardDrive': $ms-icon-code-HardDrive,
+  'HardDriveGroup': $ms-icon-code-HardDriveGroup,
+  'HardDriveLock': $ms-icon-code-HardDriveLock,
+  'HardDriveUnlock': $ms-icon-code-HardDriveUnlock,
+  'Header': $ms-icon-code-Header,
+  'Header1': $ms-icon-code-Header1,
+  'Header2': $ms-icon-code-Header2,
+  'Header3': $ms-icon-code-Header3,
+  'Header4': $ms-icon-code-Header4,
+  'Headset': $ms-icon-code-Headset,
+  'HeadsetSolid': $ms-icon-code-HeadsetSolid,
+  'Health': $ms-icon-code-Health,
+  'HealthRefresh': $ms-icon-code-HealthRefresh,
+  'HealthSolid': $ms-icon-code-HealthSolid,
+  'Heart': $ms-icon-code-Heart,
+  'HeartBroken': $ms-icon-code-HeartBroken,
+  'HeartFill': $ms-icon-code-HeartFill,
+  'Help': $ms-icon-code-Help,
+  'HelpMirrored': $ms-icon-code-HelpMirrored,
+  'HexaditeInvestigation': $ms-icon-code-HexaditeInvestigation,
+  'HexaditeInvestigationCancel': $ms-icon-code-HexaditeInvestigationCancel,
+  'HexaditeInvestigationSemiAuto': $ms-icon-code-HexaditeInvestigationSemiAuto,
+  'Hexagon': $ms-icon-code-Hexagon,
+  'Hide': $ms-icon-code-Hide,
+  'Hide2': $ms-icon-code-Hide2,
+  'Hide3': $ms-icon-code-Hide3,
+  'Highlight': $ms-icon-code-Highlight,
+  'HighlightMappedShapes': $ms-icon-code-HighlightMappedShapes,
+  'HintText': $ms-icon-code-HintText,
+  'HistoricalWeather': $ms-icon-code-HistoricalWeather,
+  'History': $ms-icon-code-History,
+  'Home': $ms-icon-code-Home,
+  'HomeDropdown': $ms-icon-code-HomeDropdown,
+  'HomeGroup': $ms-icon-code-HomeGroup,
+  'HomeSolid': $ms-icon-code-HomeSolid,
+  'HomeVerify': $ms-icon-code-HomeVerify,
+  'HorizontalDistributeCenter': $ms-icon-code-HorizontalDistributeCenter,
+  'HorizontalTabKey': $ms-icon-code-HorizontalTabKey,
+  'Hospital': $ms-icon-code-Hospital,
+  'Hotel': $ms-icon-code-Hotel,
+  'HourGlass': $ms-icon-code-HourGlass,
+  'IconSetsFlag': $ms-icon-code-IconSetsFlag,
+  'IDBadge': $ms-icon-code-IDBadge,
+  'IgnoreConversation': $ms-icon-code-IgnoreConversation,
+  'ImageCrosshair': $ms-icon-code-ImageCrosshair,
+  'ImageDiff': $ms-icon-code-ImageDiff,
+  'ImageInAR': $ms-icon-code-ImageInAR,
+  'ImagePixel': $ms-icon-code-ImagePixel,
+  'ImageSearch': $ms-icon-code-ImageSearch,
+  'Import': $ms-icon-code-Import,
+  'ImportAllMirrored': $ms-icon-code-ImportAllMirrored,
+  'Important': $ms-icon-code-Important,
+  'ImportMirrored': $ms-icon-code-ImportMirrored,
+  'Inbox': $ms-icon-code-Inbox,
+  'InboxCheck': $ms-icon-code-InboxCheck,
+  'IncidentTriangle': $ms-icon-code-IncidentTriangle,
+  'IncomingCall': $ms-icon-code-IncomingCall,
+  'IncreaseIndent': $ms-icon-code-IncreaseIndent,
+  'IncreaseIndentArrow': $ms-icon-code-IncreaseIndentArrow,
+  'IncreaseIndentArrowMirrored': $ms-icon-code-IncreaseIndentArrowMirrored,
+  'IncreaseIndentHanging': $ms-icon-code-IncreaseIndentHanging,
+  'IncreaseIndentHangingMirrored': $ms-icon-code-IncreaseIndentHangingMirrored,
+  'IncreaseIndentLegacy': $ms-icon-code-IncreaseIndentLegacy,
+  'IncreaseIndentMirrored': $ms-icon-code-IncreaseIndentMirrored,
+  'IncreaseIndentText': $ms-icon-code-IncreaseIndentText,
+  'IncreaseIndentTextMirrored': $ms-icon-code-IncreaseIndentTextMirrored,
+  'IndentFirstLine': $ms-icon-code-IndentFirstLine,
+  'Info': $ms-icon-code-Info,
+  'Info2': $ms-icon-code-Info2,
+  'InformationBarriers': $ms-icon-code-InformationBarriers,
+  'InfoSolid': $ms-icon-code-InfoSolid,
+  'InkingTool': $ms-icon-code-InkingTool,
+  'InputAddress': $ms-icon-code-InputAddress,
+  'Insert': $ms-icon-code-Insert,
+  'InsertColumnsLeft': $ms-icon-code-InsertColumnsLeft,
+  'InsertColumnsRight': $ms-icon-code-InsertColumnsRight,
+  'InsertRowsAbove': $ms-icon-code-InsertRowsAbove,
+  'InsertRowsBelow': $ms-icon-code-InsertRowsBelow,
+  'InsertSignatureLine': $ms-icon-code-InsertSignatureLine,
+  'InsertTextBox': $ms-icon-code-InsertTextBox,
+  'Insights': $ms-icon-code-Insights,
+  'Installation': $ms-icon-code-Installation,
+  'InstallToDrive': $ms-icon-code-InstallToDrive,
+  'InternalInvestigation': $ms-icon-code-InternalInvestigation,
+  'InternetSharing': $ms-icon-code-InternetSharing,
+  'IRMForward': $ms-icon-code-IRMForward,
+  'IRMForwardMirrored': $ms-icon-code-IRMForwardMirrored,
+  'IRMReply': $ms-icon-code-IRMReply,
+  'IRMReplyMirrored': $ms-icon-code-IRMReplyMirrored,
+  'IssueSolid': $ms-icon-code-IssueSolid,
+  'IssueTracking': $ms-icon-code-IssueTracking,
+  'IssueTrackingMirrored': $ms-icon-code-IssueTrackingMirrored,
+  'Italic': $ms-icon-code-Italic,
+  'JavaScriptLanguage': $ms-icon-code-JavaScriptLanguage,
+  'JoinOnlineMeeting': $ms-icon-code-JoinOnlineMeeting,
+  'JS': $ms-icon-code-JS,
+  'KaizalaLogo': $ms-icon-code-KaizalaLogo,
+  'KeyboardClassic': $ms-icon-code-KeyboardClassic,
+  'KeyPhraseExtraction': $ms-icon-code-KeyPhraseExtraction,
+  'KnowledgeArticle': $ms-icon-code-KnowledgeArticle,
+  'Label': $ms-icon-code-Label,
+  'LadybugSolid': $ms-icon-code-LadybugSolid,
+  'Lamp': $ms-icon-code-Lamp,
+  'LandscapeOrientation': $ms-icon-code-LandscapeOrientation,
+  'LaptopSecure': $ms-icon-code-LaptopSecure,
+  'LaptopSelected': $ms-icon-code-LaptopSelected,
+  'LargeGrid': $ms-icon-code-LargeGrid,
+  'LearningTools': $ms-icon-code-LearningTools,
+  'Leave': $ms-icon-code-Leave,
+  'LeaveUser': $ms-icon-code-LeaveUser,
+  'Library': $ms-icon-code-Library,
+  'Lifesaver': $ms-icon-code-Lifesaver,
+  'LifesaverLock': $ms-icon-code-LifesaverLock,
+  'Light': $ms-icon-code-Light,
+  'Lightbulb': $ms-icon-code-Lightbulb,
+  'LightningBolt': $ms-icon-code-LightningBolt,
+  'LightWeight': $ms-icon-code-LightWeight,
+  'Like': $ms-icon-code-Like,
+  'LikeSolid': $ms-icon-code-LikeSolid,
+  'Line': $ms-icon-code-Line,
+  'LineChart': $ms-icon-code-LineChart,
+  'LineSpacing': $ms-icon-code-LineSpacing,
+  'LineStyle': $ms-icon-code-LineStyle,
+  'LineThickness': $ms-icon-code-LineThickness,
+  'Link': $ms-icon-code-Link,
+  'Link12': $ms-icon-code-Link12,
+  'LinkedDatabase': $ms-icon-code-LinkedDatabase,
+  'LinkedInLogo': $ms-icon-code-LinkedInLogo,
+  'List': $ms-icon-code-List,
+  'ListMirrored': $ms-icon-code-ListMirrored,
+  'LiveSite': $ms-icon-code-LiveSite,
+  'LocaleLanguage': $ms-icon-code-LocaleLanguage,
+  'Location': $ms-icon-code-Location,
+  'LocationCircle': $ms-icon-code-LocationCircle,
+  'LocationDot': $ms-icon-code-LocationDot,
+  'LocationFill': $ms-icon-code-LocationFill,
+  'LocationOutline': $ms-icon-code-LocationOutline,
+  'Lock': $ms-icon-code-Lock,
+  'Lock12': $ms-icon-code-Lock12,
+  'LockSolid': $ms-icon-code-LockSolid,
+  'LogRemove': $ms-icon-code-LogRemove,
+  'LookupEntities': $ms-icon-code-LookupEntities,
+  'LowerBrightness': $ms-icon-code-LowerBrightness,
+  'LyncLogo': $ms-icon-code-LyncLogo,
+  'M365InvoicingLogo': $ms-icon-code-M365InvoicingLogo,
+  'MachineLearning': $ms-icon-code-MachineLearning,
+  'Mail': $ms-icon-code-Mail,
+  'MailAlert': $ms-icon-code-MailAlert,
+  'MailAttached': $ms-icon-code-MailAttached,
+  'MailCheck': $ms-icon-code-MailCheck,
+  'MailFill': $ms-icon-code-MailFill,
+  'MailForward': $ms-icon-code-MailForward,
+  'MailForwardMirrored': $ms-icon-code-MailForwardMirrored,
+  'MailLowImportance': $ms-icon-code-MailLowImportance,
+  'MailOptions': $ms-icon-code-MailOptions,
+  'MailPause': $ms-icon-code-MailPause,
+  'MailReminder': $ms-icon-code-MailReminder,
+  'MailRepeat': $ms-icon-code-MailRepeat,
+  'MailReply': $ms-icon-code-MailReply,
+  'MailReplyAll': $ms-icon-code-MailReplyAll,
+  'MailReplyAllMirrored': $ms-icon-code-MailReplyAllMirrored,
+  'MailReplyMirrored': $ms-icon-code-MailReplyMirrored,
+  'MailSchedule': $ms-icon-code-MailSchedule,
+  'MailSolid': $ms-icon-code-MailSolid,
+  'MailTentative': $ms-icon-code-MailTentative,
+  'MailTentativeMirrored': $ms-icon-code-MailTentativeMirrored,
+  'MailUndelivered': $ms-icon-code-MailUndelivered,
+  'ManagerSelfService': $ms-icon-code-ManagerSelfService,
+  'Manufacturing': $ms-icon-code-Manufacturing,
+  'MapDirections': $ms-icon-code-MapDirections,
+  'MapLayers': $ms-icon-code-MapLayers,
+  'MapPin': $ms-icon-code-MapPin,
+  'MapPin12': $ms-icon-code-MapPin12,
+  'MapPinSolid': $ms-icon-code-MapPinSolid,
+  'MarkAsProtected': $ms-icon-code-MarkAsProtected,
+  'MarkDownLanguage': $ms-icon-code-MarkDownLanguage,
+  'Market': $ms-icon-code-Market,
+  'MarketDown': $ms-icon-code-MarketDown,
+  'MasterDatabase': $ms-icon-code-MasterDatabase,
+  'MaximumValue': $ms-icon-code-MaximumValue,
+  'Medal': $ms-icon-code-Medal,
+  'MedalSolid': $ms-icon-code-MedalSolid,
+  'Media': $ms-icon-code-Media,
+  'MediaAdd': $ms-icon-code-MediaAdd,
+  'Medical': $ms-icon-code-Medical,
+  'Megaphone': $ms-icon-code-Megaphone,
+  'MegaphoneSolid': $ms-icon-code-MegaphoneSolid,
+  'Memo': $ms-icon-code-Memo,
+  'Merge': $ms-icon-code-Merge,
+  'MergeDuplicate': $ms-icon-code-MergeDuplicate,
+  'Message': $ms-icon-code-Message,
+  'MessageFill': $ms-icon-code-MessageFill,
+  'MessageFriendRequest': $ms-icon-code-MessageFriendRequest,
+  'MicOff': $ms-icon-code-MicOff,
+  'MicOff2': $ms-icon-code-MicOff2,
+  'Microphone': $ms-icon-code-Microphone,
+  'MicrosoftFlowLogo': $ms-icon-code-MicrosoftFlowLogo,
+  'MicrosoftStaffhubLogo': $ms-icon-code-MicrosoftStaffhubLogo,
+  'MicrosoftTranslatorLogo': $ms-icon-code-MicrosoftTranslatorLogo,
+  'MicrosoftTranslatorLogoBlue': $ms-icon-code-MicrosoftTranslatorLogoBlue,
+  'MicrosoftTranslatorLogoGreen': $ms-icon-code-MicrosoftTranslatorLogoGreen,
+  'MiniContract': $ms-icon-code-MiniContract,
+  'MiniContractMirrored': $ms-icon-code-MiniContractMirrored,
+  'MiniExpand': $ms-icon-code-MiniExpand,
+  'MiniExpandMirrored': $ms-icon-code-MiniExpandMirrored,
+  'MiniLink': $ms-icon-code-MiniLink,
+  'MinimumValue': $ms-icon-code-MinimumValue,
+  'MobileReport': $ms-icon-code-MobileReport,
+  'MobileSelected': $ms-icon-code-MobileSelected,
+  'ModelingView': $ms-icon-code-ModelingView,
+  'Money': $ms-icon-code-Money,
+  'More': $ms-icon-code-More,
+  'MoreSports': $ms-icon-code-MoreSports,
+  'MoreVertical': $ms-icon-code-MoreVertical,
+  'MountainClimbing': $ms-icon-code-MountainClimbing,
+  'Move': $ms-icon-code-Move,
+  'Movers': $ms-icon-code-Movers,
+  'MoveToFolder': $ms-icon-code-MoveToFolder,
+  'MSNLogo': $ms-icon-code-MSNLogo,
+  'MSNVideos': $ms-icon-code-MSNVideos,
+  'MSNVideosSolid': $ms-icon-code-MSNVideosSolid,
+  'MultiSelect': $ms-icon-code-MultiSelect,
+  'MultiSelectMirrored': $ms-icon-code-MultiSelectMirrored,
+  'MusicInCollection': $ms-icon-code-MusicInCollection,
+  'MusicInCollectionFill': $ms-icon-code-MusicInCollectionFill,
+  'MusicNote': $ms-icon-code-MusicNote,
+  'MuteChat': $ms-icon-code-MuteChat,
+  'MyMoviesTV': $ms-icon-code-MyMoviesTV,
+  'MyNetwork': $ms-icon-code-MyNetwork,
+  'Nav2DMapView': $ms-icon-code-Nav2DMapView,
+  'NavigateBack': $ms-icon-code-NavigateBack,
+  'NavigateBackMirrored': $ms-icon-code-NavigateBackMirrored,
+  'NavigateExternalInline': $ms-icon-code-NavigateExternalInline,
+  'NavigateForward': $ms-icon-code-NavigateForward,
+  'NavigateForwardMirrored': $ms-icon-code-NavigateForwardMirrored,
+  'NavigationFlipper': $ms-icon-code-NavigationFlipper,
+  'NetworkTower': $ms-icon-code-NetworkTower,
+  'NewAnalyticsQuery': $ms-icon-code-NewAnalyticsQuery,
+  'NewFolder': $ms-icon-code-NewFolder,
+  'NewMail': $ms-icon-code-NewMail,
+  'News': $ms-icon-code-News,
+  'NewsSearch': $ms-icon-code-NewsSearch,
+  'NewTeamProject': $ms-icon-code-NewTeamProject,
+  'Next': $ms-icon-code-Next,
+  'NormalWeight': $ms-icon-code-NormalWeight,
+  'NoteForward': $ms-icon-code-NoteForward,
+  'NotePinned': $ms-icon-code-NotePinned,
+  'NoteReply': $ms-icon-code-NoteReply,
+  'NotExecuted': $ms-icon-code-NotExecuted,
+  'NotImpactedSolid': $ms-icon-code-NotImpactedSolid,
+  'NugetLogo': $ms-icon-code-NugetLogo,
+  'NUIFace': $ms-icon-code-NUIFace,
+  'NumberedList': $ms-icon-code-NumberedList,
+  'NumberedListMirrored': $ms-icon-code-NumberedListMirrored,
+  'NumberedListNumber': $ms-icon-code-NumberedListNumber,
+  'NumberedListNumberMirrored': $ms-icon-code-NumberedListNumberMirrored,
+  'NumberedListText': $ms-icon-code-NumberedListText,
+  'NumberedListTextMirrored': $ms-icon-code-NumberedListTextMirrored,
+  'NumberField': $ms-icon-code-NumberField,
+  'NumberSequence': $ms-icon-code-NumberSequence,
+  'NumberSymbol': $ms-icon-code-NumberSymbol,
+  'Octagon': $ms-icon-code-Octagon,
+  'OEM': $ms-icon-code-OEM,
+  'OfficeAddinsLogo': $ms-icon-code-OfficeAddinsLogo,
+  'OfficeAssistantLogo': $ms-icon-code-OfficeAssistantLogo,
+  'OfficeChat': $ms-icon-code-OfficeChat,
+  'OfficeChatSolid': $ms-icon-code-OfficeChatSolid,
+  'OfficeFormsLogo': $ms-icon-code-OfficeFormsLogo,
+  'OfficeFormsLogo16': $ms-icon-code-OfficeFormsLogo16,
+  'OfficeFormsLogo24': $ms-icon-code-OfficeFormsLogo24,
+  'OfficeFormsLogoFill': $ms-icon-code-OfficeFormsLogoFill,
+  'OfficeFormsLogoFill16': $ms-icon-code-OfficeFormsLogoFill16,
+  'OfficeFormsLogoFill24': $ms-icon-code-OfficeFormsLogoFill24,
+  'OfficeFormsLogoInverse': $ms-icon-code-OfficeFormsLogoInverse,
+  'OfficeFormsLogoInverse16': $ms-icon-code-OfficeFormsLogoInverse16,
+  'OfficeFormsLogoInverse24': $ms-icon-code-OfficeFormsLogoInverse24,
+  'OfficeLogo': $ms-icon-code-OfficeLogo,
+  'OfficeStoreLogo': $ms-icon-code-OfficeStoreLogo,
+  'OfficeVideoLogo': $ms-icon-code-OfficeVideoLogo,
+  'OfficeVideoLogoFill': $ms-icon-code-OfficeVideoLogoFill,
+  'OfficeVideoLogoInverse': $ms-icon-code-OfficeVideoLogoInverse,
+  'OfflineOneDriveParachute': $ms-icon-code-OfflineOneDriveParachute,
+  'OfflineOneDriveParachuteDisabled': $ms-icon-code-OfflineOneDriveParachuteDisabled,
+  'OfflineStorage': $ms-icon-code-OfflineStorage,
+  'OfflineStorageSolid': $ms-icon-code-OfflineStorageSolid,
+  'Onboarding': $ms-icon-code-Onboarding,
+  'OneDriveAdd': $ms-icon-code-OneDriveAdd,
+  'OneDriveFolder16': $ms-icon-code-OneDriveFolder16,
+  'OneDriveLogo': $ms-icon-code-OneDriveLogo,
+  'OneNoteEduLogoInverse': $ms-icon-code-OneNoteEduLogoInverse,
+  'OneNoteLogo': $ms-icon-code-OneNoteLogo,
+  'OneNoteLogo16': $ms-icon-code-OneNoteLogo16,
+  'OneNoteLogoFill': $ms-icon-code-OneNoteLogoFill,
+  'OneNoteLogoFill16': $ms-icon-code-OneNoteLogoFill16,
+  'OneNoteLogoInverse': $ms-icon-code-OneNoteLogoInverse,
+  'OneNoteLogoInverse16': $ms-icon-code-OneNoteLogoInverse16,
+  'OpenEnrollment': $ms-icon-code-OpenEnrollment,
+  'OpenFile': $ms-icon-code-OpenFile,
+  'OpenFolderHorizontal': $ms-icon-code-OpenFolderHorizontal,
+  'OpenInNewTab': $ms-icon-code-OpenInNewTab,
+  'OpenInNewWindow': $ms-icon-code-OpenInNewWindow,
+  'OpenPane': $ms-icon-code-OpenPane,
+  'OpenPaneMirrored': $ms-icon-code-OpenPaneMirrored,
+  'OpenSource': $ms-icon-code-OpenSource,
+  'OpenWith': $ms-icon-code-OpenWith,
+  'OpenWithMirrored': $ms-icon-code-OpenWithMirrored,
+  'Org': $ms-icon-code-Org,
+  'Orientation': $ms-icon-code-Orientation,
+  'Orientation2': $ms-icon-code-Orientation2,
+  'OutlookLogo': $ms-icon-code-OutlookLogo,
+  'OutlookLogo16': $ms-icon-code-OutlookLogo16,
+  'OutlookLogoFill': $ms-icon-code-OutlookLogoFill,
+  'OutlookLogoFill16': $ms-icon-code-OutlookLogoFill16,
+  'OutlookLogoInverse': $ms-icon-code-OutlookLogoInverse,
+  'OutlookLogoInverse16': $ms-icon-code-OutlookLogoInverse16,
+  'OutOfOffice': $ms-icon-code-OutOfOffice,
+  'Package': $ms-icon-code-Package,
+  'Packages': $ms-icon-code-Packages,
+  'Padding': $ms-icon-code-Padding,
+  'PaddingBottom': $ms-icon-code-PaddingBottom,
+  'PaddingLeft': $ms-icon-code-PaddingLeft,
+  'PaddingRight': $ms-icon-code-PaddingRight,
+  'PaddingTop': $ms-icon-code-PaddingTop,
+  'Page': $ms-icon-code-Page,
+  'PageAdd': $ms-icon-code-PageAdd,
+  'PageArrowRight': $ms-icon-code-PageArrowRight,
+  'PageCheckedin': $ms-icon-code-PageCheckedin,
+  'PageCheckedOut': $ms-icon-code-PageCheckedOut,
+  'PageData': $ms-icon-code-PageData,
+  'PageEdit': $ms-icon-code-PageEdit,
+  'PageHeader': $ms-icon-code-PageHeader,
+  'PageHeaderEdit': $ms-icon-code-PageHeaderEdit,
+  'PageLeft': $ms-icon-code-PageLeft,
+  'PageLink': $ms-icon-code-PageLink,
+  'PageList': $ms-icon-code-PageList,
+  'PageListFilter': $ms-icon-code-PageListFilter,
+  'PageListMirroredSolid': $ms-icon-code-PageListMirroredSolid,
+  'PageListSolid': $ms-icon-code-PageListSolid,
+  'PageLock': $ms-icon-code-PageLock,
+  'PageRemove': $ms-icon-code-PageRemove,
+  'PageRight': $ms-icon-code-PageRight,
+  'PageShared': $ms-icon-code-PageShared,
+  'PageSolid': $ms-icon-code-PageSolid,
+  'PanoIndicator': $ms-icon-code-PanoIndicator,
+  'Parachute': $ms-icon-code-Parachute,
+  'ParachuteSolid': $ms-icon-code-ParachuteSolid,
+  'Parameter': $ms-icon-code-Parameter,
+  'ParkingLocation': $ms-icon-code-ParkingLocation,
+  'ParkingLocationMirrored': $ms-icon-code-ParkingLocationMirrored,
+  'ParkingMirroredSolid': $ms-icon-code-ParkingMirroredSolid,
+  'ParkingSolid': $ms-icon-code-ParkingSolid,
+  'PartlyCloudyDay': $ms-icon-code-PartlyCloudyDay,
+  'PartlyCloudyNight': $ms-icon-code-PartlyCloudyNight,
+  'PartyLeader': $ms-icon-code-PartyLeader,
+  'PassiveAuthentication': $ms-icon-code-PassiveAuthentication,
+  'PasswordField': $ms-icon-code-PasswordField,
+  'Paste': $ms-icon-code-Paste,
+  'PasteAsCode': $ms-icon-code-PasteAsCode,
+  'PasteAsText': $ms-icon-code-PasteAsText,
+  'Pause': $ms-icon-code-Pause,
+  'PaymentCard': $ms-icon-code-PaymentCard,
+  'PC1': $ms-icon-code-PC1,
+  'PDF': $ms-icon-code-PDF,
+  'PencilReply': $ms-icon-code-PencilReply,
+  'Pentagon': $ms-icon-code-Pentagon,
+  'PenWorkspace': $ms-icon-code-PenWorkspace,
+  'People': $ms-icon-code-People,
+  'PeopleAdd': $ms-icon-code-PeopleAdd,
+  'PeopleAlert': $ms-icon-code-PeopleAlert,
+  'PeopleBlock': $ms-icon-code-PeopleBlock,
+  'PeoplePause': $ms-icon-code-PeoplePause,
+  'PeopleRepeat': $ms-icon-code-PeopleRepeat,
+  'Permissions': $ms-icon-code-Permissions,
+  'PermissionsSolid': $ms-icon-code-PermissionsSolid,
+  'Personalize': $ms-icon-code-Personalize,
+  'Phishing': $ms-icon-code-Phishing,
+  'Phone': $ms-icon-code-Phone,
+  'Photo': $ms-icon-code-Photo,
+  'Photo2': $ms-icon-code-Photo2,
+  'Photo2Add': $ms-icon-code-Photo2Add,
+  'Photo2Fill': $ms-icon-code-Photo2Fill,
+  'Photo2Remove': $ms-icon-code-Photo2Remove,
+  'PhotoCollection': $ms-icon-code-PhotoCollection,
+  'PhotoError': $ms-icon-code-PhotoError,
+  'PhotoVideoMedia': $ms-icon-code-PhotoVideoMedia,
+  'Picture': $ms-icon-code-Picture,
+  'PictureCenter': $ms-icon-code-PictureCenter,
+  'PictureFill': $ms-icon-code-PictureFill,
+  'PictureLibrary': $ms-icon-code-PictureLibrary,
+  'PicturePosition': $ms-icon-code-PicturePosition,
+  'PictureStretch': $ms-icon-code-PictureStretch,
+  'PictureTile': $ms-icon-code-PictureTile,
+  'PieDouble': $ms-icon-code-PieDouble,
+  'PieSingle': $ms-icon-code-PieSingle,
+  'PieSingleSolid': $ms-icon-code-PieSingleSolid,
+  'Pill': $ms-icon-code-Pill,
+  'Pin': $ms-icon-code-Pin,
+  'Pinned': $ms-icon-code-Pinned,
+  'PinnedFill': $ms-icon-code-PinnedFill,
+  'PinnedSolid': $ms-icon-code-PinnedSolid,
+  'PinSolid12': $ms-icon-code-PinSolid12,
+  'PinSolidOff12': $ms-icon-code-PinSolidOff12,
+  'PivotChart': $ms-icon-code-PivotChart,
+  'PlainText': $ms-icon-code-PlainText,
+  'PlannerLogo': $ms-icon-code-PlannerLogo,
+  'PlanView': $ms-icon-code-PlanView,
+  'Play': $ms-icon-code-Play,
+  'PlaybackRate1x': $ms-icon-code-PlaybackRate1x,
+  'PlayerSettings': $ms-icon-code-PlayerSettings,
+  'PlayResume': $ms-icon-code-PlayResume,
+  'PlayReverse': $ms-icon-code-PlayReverse,
+  'PlayReverseResume': $ms-icon-code-PlayReverseResume,
+  'PlaySolid': $ms-icon-code-PlaySolid,
+  'Plug': $ms-icon-code-Plug,
+  'PlugConnected': $ms-icon-code-PlugConnected,
+  'PlugDisconnected': $ms-icon-code-PlugDisconnected,
+  'PlugSolid': $ms-icon-code-PlugSolid,
+  'POI': $ms-icon-code-POI,
+  'POISolid': $ms-icon-code-POISolid,
+  'PollResults': $ms-icon-code-PollResults,
+  'PostUpdate': $ms-icon-code-PostUpdate,
+  'PowerApps': $ms-icon-code-PowerApps,
+  'PowerApps2Logo': $ms-icon-code-PowerApps2Logo,
+  'PowerAppsLogo': $ms-icon-code-PowerAppsLogo,
+  'PowerBILogo': $ms-icon-code-PowerBILogo,
+  'PowerBILogo16': $ms-icon-code-PowerBILogo16,
+  'PowerBILogoBackplate16': $ms-icon-code-PowerBILogoBackplate16,
+  'PowerButton': $ms-icon-code-PowerButton,
+  'PowerPointDocument': $ms-icon-code-PowerPointDocument,
+  'PowerPointLogo': $ms-icon-code-PowerPointLogo,
+  'PowerPointLogo16': $ms-icon-code-PowerPointLogo16,
+  'PowerPointLogoFill': $ms-icon-code-PowerPointLogoFill,
+  'PowerPointLogoFill16': $ms-icon-code-PowerPointLogoFill16,
+  'PowerPointLogoInverse': $ms-icon-code-PowerPointLogoInverse,
+  'PowerPointLogoInverse16': $ms-icon-code-PowerPointLogoInverse16,
+  'PowerShell': $ms-icon-code-PowerShell,
+  'PowerShell2': $ms-icon-code-PowerShell2,
+  'Precipitation': $ms-icon-code-Precipitation,
+  'PresenceChickletVideo': $ms-icon-code-PresenceChickletVideo,
+  'Presentation': $ms-icon-code-Presentation,
+  'Presentation12': $ms-icon-code-Presentation12,
+  'Preview': $ms-icon-code-Preview,
+  'PreviewLink': $ms-icon-code-PreviewLink,
+  'Previous': $ms-icon-code-Previous,
+  'PrimaryCalendar': $ms-icon-code-PrimaryCalendar,
+  'Print': $ms-icon-code-Print,
+  'PrintfaxPrinterFile': $ms-icon-code-PrintfaxPrinterFile,
+  'Processing': $ms-icon-code-Processing,
+  'ProcessingCancel': $ms-icon-code-ProcessingCancel,
+  'ProcessingPause': $ms-icon-code-ProcessingPause,
+  'ProcessingRun': $ms-icon-code-ProcessingRun,
+  'ProcessMetaTask': $ms-icon-code-ProcessMetaTask,
+  'Product': $ms-icon-code-Product,
+  'ProductCatalog': $ms-icon-code-ProductCatalog,
+  'ProductionFloorManagement': $ms-icon-code-ProductionFloorManagement,
+  'ProductList': $ms-icon-code-ProductList,
+  'ProductRelease': $ms-icon-code-ProductRelease,
+  'ProductVariant': $ms-icon-code-ProductVariant,
+  'ProfileSearch': $ms-icon-code-ProfileSearch,
+  'ProFootball': $ms-icon-code-ProFootball,
+  'ProgressLoopInner': $ms-icon-code-ProgressLoopInner,
+  'ProgressLoopOuter': $ms-icon-code-ProgressLoopOuter,
+  'ProgressRingDots': $ms-icon-code-ProgressRingDots,
+  'ProHockey': $ms-icon-code-ProHockey,
+  'ProjectCollection': $ms-icon-code-ProjectCollection,
+  'ProjectDocument': $ms-icon-code-ProjectDocument,
+  'ProjectLogo16': $ms-icon-code-ProjectLogo16,
+  'ProjectLogo32': $ms-icon-code-ProjectLogo32,
+  'ProjectLogoFill16': $ms-icon-code-ProjectLogoFill16,
+  'ProjectLogoFill32': $ms-icon-code-ProjectLogoFill32,
+  'ProjectLogoInverse': $ms-icon-code-ProjectLogoInverse,
+  'PromotedDatabase': $ms-icon-code-PromotedDatabase,
+  'ProtectedDocument': $ms-icon-code-ProtectedDocument,
+  'ProtectionCenterLogo32': $ms-icon-code-ProtectionCenterLogo32,
+  'ProtectRestrict': $ms-icon-code-ProtectRestrict,
+  'ProvisioningPackage': $ms-icon-code-ProvisioningPackage,
+  'PublicCalendar': $ms-icon-code-PublicCalendar,
+  'PublicContactCard': $ms-icon-code-PublicContactCard,
+  'PublicContactCardMirrored': $ms-icon-code-PublicContactCardMirrored,
+  'PublicEmail': $ms-icon-code-PublicEmail,
+  'PublicFolder': $ms-icon-code-PublicFolder,
+  'PublishContent': $ms-icon-code-PublishContent,
+  'PublishCourse': $ms-icon-code-PublishCourse,
+  'PublisherLogo': $ms-icon-code-PublisherLogo,
+  'PublisherLogo16': $ms-icon-code-PublisherLogo16,
+  'PublisherLogoFill': $ms-icon-code-PublisherLogoFill,
+  'PublisherLogoFill16': $ms-icon-code-PublisherLogoFill16,
+  'PublisherLogoInverse16': $ms-icon-code-PublisherLogoInverse16,
+  'Puzzle': $ms-icon-code-Puzzle,
+  'PY': $ms-icon-code-PY,
+  'PythonLanguage': $ms-icon-code-PythonLanguage,
+  'QandA': $ms-icon-code-QandA,
+  'QandAMirror': $ms-icon-code-QandAMirror,
+  'QRCode': $ms-icon-code-QRCode,
+  'QuadColumn': $ms-icon-code-QuadColumn,
+  'Quantity': $ms-icon-code-Quantity,
+  'QuarterCircle': $ms-icon-code-QuarterCircle,
+  'QueryList': $ms-icon-code-QueryList,
+  'Questionnaire': $ms-icon-code-Questionnaire,
+  'QuestionnaireMirrored': $ms-icon-code-QuestionnaireMirrored,
+  'QuickNote': $ms-icon-code-QuickNote,
+  'QuickNoteSolid': $ms-icon-code-QuickNoteSolid,
+  'R': $ms-icon-code-R,
+  'RadioBtnOff': $ms-icon-code-RadioBtnOff,
+  'RadioBtnOn': $ms-icon-code-RadioBtnOn,
+  'RadioBullet': $ms-icon-code-RadioBullet,
+  'Rain': $ms-icon-code-Rain,
+  'RainShowersDay': $ms-icon-code-RainShowersDay,
+  'RainShowersNight': $ms-icon-code-RainShowersNight,
+  'RainSnow': $ms-icon-code-RainSnow,
+  'RawSource': $ms-icon-code-RawSource,
+  'Read': $ms-icon-code-Read,
+  'ReadingMode': $ms-icon-code-ReadingMode,
+  'ReadingModeSolid': $ms-icon-code-ReadingModeSolid,
+  'ReadOutLoud': $ms-icon-code-ReadOutLoud,
+  'RealEstate': $ms-icon-code-RealEstate,
+  'ReceiptCheck': $ms-icon-code-ReceiptCheck,
+  'ReceiptForward': $ms-icon-code-ReceiptForward,
+  'ReceiptReply': $ms-icon-code-ReceiptReply,
+  'ReceiptTentative': $ms-icon-code-ReceiptTentative,
+  'ReceiptTentativeMirrored': $ms-icon-code-ReceiptTentativeMirrored,
+  'ReceiptUndelivered': $ms-icon-code-ReceiptUndelivered,
+  'Recent': $ms-icon-code-Recent,
+  'Record2': $ms-icon-code-Record2,
+  'RecruitmentManagement': $ms-icon-code-RecruitmentManagement,
+  'RectangleShape': $ms-icon-code-RectangleShape,
+  'RectangleShapeSolid': $ms-icon-code-RectangleShapeSolid,
+  'RectangularClipping': $ms-icon-code-RectangularClipping,
+  'RecurringEvent': $ms-icon-code-RecurringEvent,
+  'RecurringTask': $ms-icon-code-RecurringTask,
+  'RecycleBin': $ms-icon-code-RecycleBin,
+  'Redeploy': $ms-icon-code-Redeploy,
+  'RedEye': $ms-icon-code-RedEye,
+  'RedEye12': $ms-icon-code-RedEye12,
+  'Redo': $ms-icon-code-Redo,
+  'Refresh': $ms-icon-code-Refresh,
+  'RegistryEditor': $ms-icon-code-RegistryEditor,
+  'Relationship': $ms-icon-code-Relationship,
+  'ReleaseDefinition': $ms-icon-code-ReleaseDefinition,
+  'ReleaseGate': $ms-icon-code-ReleaseGate,
+  'ReleaseGateCheck': $ms-icon-code-ReleaseGateCheck,
+  'ReleaseGateError': $ms-icon-code-ReleaseGateError,
+  'ReminderGroup': $ms-icon-code-ReminderGroup,
+  'ReminderPerson': $ms-icon-code-ReminderPerson,
+  'ReminderTime': $ms-icon-code-ReminderTime,
+  'Remote': $ms-icon-code-Remote,
+  'Remove': $ms-icon-code-Remove,
+  'RemoveContent': $ms-icon-code-RemoveContent,
+  'RemoveEvent': $ms-icon-code-RemoveEvent,
+  'RemoveFilter': $ms-icon-code-RemoveFilter,
+  'RemoveFromShoppingList': $ms-icon-code-RemoveFromShoppingList,
+  'RemoveFromTrash': $ms-icon-code-RemoveFromTrash,
+  'RemoveLink': $ms-icon-code-RemoveLink,
+  'RemoveLinkChain': $ms-icon-code-RemoveLinkChain,
+  'RemoveLinkX': $ms-icon-code-RemoveLinkX,
+  'RemoveOccurrence': $ms-icon-code-RemoveOccurrence,
+  'Rename': $ms-icon-code-Rename,
+  'RenewalCurrent': $ms-icon-code-RenewalCurrent,
+  'RenewalFuture': $ms-icon-code-RenewalFuture,
+  'ReopenPages': $ms-icon-code-ReopenPages,
+  'Repair': $ms-icon-code-Repair,
+  'RepeatAll': $ms-icon-code-RepeatAll,
+  'RepeatHeaderRows': $ms-icon-code-RepeatHeaderRows,
+  'RepeatOne': $ms-icon-code-RepeatOne,
+  'Reply': $ms-icon-code-Reply,
+  'ReplyAll': $ms-icon-code-ReplyAll,
+  'ReplyAllAlt': $ms-icon-code-ReplyAllAlt,
+  'ReplyAllMirrored': $ms-icon-code-ReplyAllMirrored,
+  'ReplyAlt': $ms-icon-code-ReplyAlt,
+  'ReplyMirrored': $ms-icon-code-ReplyMirrored,
+  'Repo': $ms-icon-code-Repo,
+  'ReportAdd': $ms-icon-code-ReportAdd,
+  'ReportDocument': $ms-icon-code-ReportDocument,
+  'ReportHacked': $ms-icon-code-ReportHacked,
+  'ReportLibrary': $ms-icon-code-ReportLibrary,
+  'ReportLibraryMirrored': $ms-icon-code-ReportLibraryMirrored,
+  'ReportLock': $ms-icon-code-ReportLock,
+  'ReportWarning': $ms-icon-code-ReportWarning,
+  'RepoSolid': $ms-icon-code-RepoSolid,
+  'Rerun': $ms-icon-code-Rerun,
+  'ReservationOrders': $ms-icon-code-ReservationOrders,
+  'Reset': $ms-icon-code-Reset,
+  'ResetDevice': $ms-icon-code-ResetDevice,
+  'ResponsesMenu': $ms-icon-code-ResponsesMenu,
+  'ReturnKey': $ms-icon-code-ReturnKey,
+  'ReturnToSession': $ms-icon-code-ReturnToSession,
+  'ReviewRequestMirroredSolid': $ms-icon-code-ReviewRequestMirroredSolid,
+  'ReviewRequestSolid': $ms-icon-code-ReviewRequestSolid,
+  'ReviewResponseSolid': $ms-icon-code-ReviewResponseSolid,
+  'ReviewSolid': $ms-icon-code-ReviewSolid,
+  'RevToggleKey': $ms-icon-code-RevToggleKey,
+  'Rewind': $ms-icon-code-Rewind,
+  'Ribbon': $ms-icon-code-Ribbon,
+  'RibbonSolid': $ms-icon-code-RibbonSolid,
+  'RightDoubleQuote': $ms-icon-code-RightDoubleQuote,
+  'RightTriangle': $ms-icon-code-RightTriangle,
+  'Ringer': $ms-icon-code-Ringer,
+  'RingerOff': $ms-icon-code-RingerOff,
+  'RingerRemove': $ms-icon-code-RingerRemove,
+  'RingerSolid': $ms-icon-code-RingerSolid,
+  'Robot': $ms-icon-code-Robot,
+  'Rocket': $ms-icon-code-Rocket,
+  'Room': $ms-icon-code-Room,
+  'Rotate': $ms-icon-code-Rotate,
+  'Rotate90Clockwise': $ms-icon-code-Rotate90Clockwise,
+  'Rotate90CounterClockwise': $ms-icon-code-Rotate90CounterClockwise,
+  'RowsChild': $ms-icon-code-RowsChild,
+  'RowsGroup': $ms-icon-code-RowsGroup,
+  'Rugby': $ms-icon-code-Rugby,
+  'Running': $ms-icon-code-Running,
+  'Sad': $ms-icon-code-Sad,
+  'SadSolid': $ms-icon-code-SadSolid,
+  'Save': $ms-icon-code-Save,
+  'SaveAll': $ms-icon-code-SaveAll,
+  'SaveAndClose': $ms-icon-code-SaveAndClose,
+  'SaveAs': $ms-icon-code-SaveAs,
+  'SaveTemplate': $ms-icon-code-SaveTemplate,
+  'SaveToMobile': $ms-icon-code-SaveToMobile,
+  'Savings': $ms-icon-code-Savings,
+  'ScaleUp': $ms-icon-code-ScaleUp,
+  'ScaleVolume': $ms-icon-code-ScaleVolume,
+  'ScatterChart': $ms-icon-code-ScatterChart,
+  'ScheduleEventAction': $ms-icon-code-ScheduleEventAction,
+  'SchoolDataSyncLogo': $ms-icon-code-SchoolDataSyncLogo,
+  'ScopeTemplate': $ms-icon-code-ScopeTemplate,
+  'ScreenCast': $ms-icon-code-ScreenCast,
+  'Script': $ms-icon-code-Script,
+  'ScrollUpDown': $ms-icon-code-ScrollUpDown,
+  'SDCard': $ms-icon-code-SDCard,
+  'Search': $ms-icon-code-Search,
+  'SearchAndApps': $ms-icon-code-SearchAndApps,
+  'SearchBookmark': $ms-icon-code-SearchBookmark,
+  'SearchCalendar': $ms-icon-code-SearchCalendar,
+  'SearchData': $ms-icon-code-SearchData,
+  'SearchIssue': $ms-icon-code-SearchIssue,
+  'SearchIssueMirrored': $ms-icon-code-SearchIssueMirrored,
+  'SearchNearby': $ms-icon-code-SearchNearby,
+  'SecondaryNav': $ms-icon-code-SecondaryNav,
+  'Section': $ms-icon-code-Section,
+  'Sections': $ms-icon-code-Sections,
+  'SecurityGroup': $ms-icon-code-SecurityGroup,
+  'SeeDo': $ms-icon-code-SeeDo,
+  'SelectAll': $ms-icon-code-SelectAll,
+  'Sell': $ms-icon-code-Sell,
+  'SemiboldWeight': $ms-icon-code-SemiboldWeight,
+  'Send': $ms-icon-code-Send,
+  'SendMirrored': $ms-icon-code-SendMirrored,
+  'SentimentAnalysis': $ms-icon-code-SentimentAnalysis,
+  'Separator': $ms-icon-code-Separator,
+  'Server': $ms-icon-code-Server,
+  'ServerEnviroment': $ms-icon-code-ServerEnviroment,
+  'ServerProcesses': $ms-icon-code-ServerProcesses,
+  'ServiceOff': $ms-icon-code-ServiceOff,
+  'SetAction': $ms-icon-code-SetAction,
+  'Settings': $ms-icon-code-Settings,
+  'ShakeDevice': $ms-icon-code-ShakeDevice,
+  'Shapes': $ms-icon-code-Shapes,
+  'ShapeSolid': $ms-icon-code-ShapeSolid,
+  'Share': $ms-icon-code-Share,
+  'SharedDatabase': $ms-icon-code-SharedDatabase,
+  'ShareiOS': $ms-icon-code-ShareiOS,
+  'SharepointAppIcon16': $ms-icon-code-SharepointAppIcon16,
+  'SharepointLogo': $ms-icon-code-SharepointLogo,
+  'SharepointLogoFill': $ms-icon-code-SharepointLogoFill,
+  'SharepointLogoInverse': $ms-icon-code-SharepointLogoInverse,
+  'Shield': $ms-icon-code-Shield,
+  'ShieldAlert': $ms-icon-code-ShieldAlert,
+  'ShieldSolid': $ms-icon-code-ShieldSolid,
+  'Shirt': $ms-icon-code-Shirt,
+  'Shop': $ms-icon-code-Shop,
+  'ShoppingCart': $ms-icon-code-ShoppingCart,
+  'ShoppingCartSolid': $ms-icon-code-ShoppingCartSolid,
+  'ShopServer': $ms-icon-code-ShopServer,
+  'ShowGrid': $ms-icon-code-ShowGrid,
+  'ShowResults': $ms-icon-code-ShowResults,
+  'ShowResultsMirrored': $ms-icon-code-ShowResultsMirrored,
+  'ShowTimeAs': $ms-icon-code-ShowTimeAs,
+  'SidePanel': $ms-icon-code-SidePanel,
+  'SidePanelMirrored': $ms-icon-code-SidePanelMirrored,
+  'Signin': $ms-icon-code-Signin,
+  'SignOut': $ms-icon-code-SignOut,
+  'SingleBookmark': $ms-icon-code-SingleBookmark,
+  'SingleBookmarkSolid': $ms-icon-code-SingleBookmarkSolid,
+  'SingleColumn': $ms-icon-code-SingleColumn,
+  'SingleColumnEdit': $ms-icon-code-SingleColumnEdit,
+  'SIPMove': $ms-icon-code-SIPMove,
+  'SiteScan': $ms-icon-code-SiteScan,
+  'SizeLegacy': $ms-icon-code-SizeLegacy,
+  'SkipBack10': $ms-icon-code-SkipBack10,
+  'SkipForward30': $ms-icon-code-SkipForward30,
+  'SkiResorts': $ms-icon-code-SkiResorts,
+  'SkypeArrow': $ms-icon-code-SkypeArrow,
+  'SkypeCheck': $ms-icon-code-SkypeCheck,
+  'SkypeCircleArrow': $ms-icon-code-SkypeCircleArrow,
+  'SkypeCircleCheck': $ms-icon-code-SkypeCircleCheck,
+  'SkypeCircleClock': $ms-icon-code-SkypeCircleClock,
+  'SkypeCircleMinus': $ms-icon-code-SkypeCircleMinus,
+  'SkypeCircleSlash': $ms-icon-code-SkypeCircleSlash,
+  'SkypeClock': $ms-icon-code-SkypeClock,
+  'SkypeForBusinessLogo': $ms-icon-code-SkypeForBusinessLogo,
+  'SkypeForBusinessLogo16': $ms-icon-code-SkypeForBusinessLogo16,
+  'SkypeForBusinessLogoFill': $ms-icon-code-SkypeForBusinessLogoFill,
+  'SkypeForBusinessLogoFill16': $ms-icon-code-SkypeForBusinessLogoFill16,
+  'SkypeLogo': $ms-icon-code-SkypeLogo,
+  'SkypeLogo16': $ms-icon-code-SkypeLogo16,
+  'SkypeMessage': $ms-icon-code-SkypeMessage,
+  'SkypeMinus': $ms-icon-code-SkypeMinus,
+  'SkypeSlash': $ms-icon-code-SkypeSlash,
+  'Slider': $ms-icon-code-Slider,
+  'SliderHandleSize': $ms-icon-code-SliderHandleSize,
+  'SliderThumb': $ms-icon-code-SliderThumb,
+  'Slideshow': $ms-icon-code-Slideshow,
+  'SmartGlassRemote': $ms-icon-code-SmartGlassRemote,
+  'SnapToGrid': $ms-icon-code-SnapToGrid,
+  'Snooze': $ms-icon-code-Snooze,
+  'Snow': $ms-icon-code-Snow,
+  'Snowflake': $ms-icon-code-Snowflake,
+  'SnowShowerDay': $ms-icon-code-SnowShowerDay,
+  'SnowShowerNight': $ms-icon-code-SnowShowerNight,
+  'Soccer': $ms-icon-code-Soccer,
+  'SocialListeningLogo': $ms-icon-code-SocialListeningLogo,
+  'Sort': $ms-icon-code-Sort,
+  'SortDown': $ms-icon-code-SortDown,
+  'SortLines': $ms-icon-code-SortLines,
+  'SortUp': $ms-icon-code-SortUp,
+  'Source': $ms-icon-code-Source,
+  'Spacer': $ms-icon-code-Spacer,
+  'Speakers': $ms-icon-code-Speakers,
+  'SpecialEvent': $ms-icon-code-SpecialEvent,
+  'SpeedHigh': $ms-icon-code-SpeedHigh,
+  'Spelling': $ms-icon-code-Spelling,
+  'Split': $ms-icon-code-Split,
+  'SplitObject': $ms-icon-code-SplitObject,
+  'Sprint': $ms-icon-code-Sprint,
+  'Squalls': $ms-icon-code-Squalls,
+  'SquareShape': $ms-icon-code-SquareShape,
+  'SquareShapeSolid': $ms-icon-code-SquareShapeSolid,
+  'Stack': $ms-icon-code-Stack,
+  'StackColumnChart': $ms-icon-code-StackColumnChart,
+  'StackedBarChart': $ms-icon-code-StackedBarChart,
+  'StackedColumnChart2': $ms-icon-code-StackedColumnChart2,
+  'StackedColumnChart2Fill': $ms-icon-code-StackedColumnChart2Fill,
+  'StackedLineChart': $ms-icon-code-StackedLineChart,
+  'StackIndicator': $ms-icon-code-StackIndicator,
+  'StaffNotebookLogo16': $ms-icon-code-StaffNotebookLogo16,
+  'StaffNotebookLogo32': $ms-icon-code-StaffNotebookLogo32,
+  'StaffNotebookLogoFill16': $ms-icon-code-StaffNotebookLogoFill16,
+  'StaffNotebookLogoFill32': $ms-icon-code-StaffNotebookLogoFill32,
+  'StaffNotebookLogoInverted16': $ms-icon-code-StaffNotebookLogoInverted16,
+  'StaffNotebookLogoInverted32': $ms-icon-code-StaffNotebookLogoInverted32,
+  'Starburst': $ms-icon-code-Starburst,
+  'StarburstSolid': $ms-icon-code-StarburstSolid,
+  'StatusCircleBlock': $ms-icon-code-StatusCircleBlock,
+  'StatusCircleBlock2': $ms-icon-code-StatusCircleBlock2,
+  'StatusCircleCheckmark': $ms-icon-code-StatusCircleCheckmark,
+  'StatusCircleErrorX': $ms-icon-code-StatusCircleErrorX,
+  'StatusCircleExclamation': $ms-icon-code-StatusCircleExclamation,
+  'StatusCircleInfo': $ms-icon-code-StatusCircleInfo,
+  'StatusCircleInner': $ms-icon-code-StatusCircleInner,
+  'StatusCircleOuter': $ms-icon-code-StatusCircleOuter,
+  'StatusCircleQuestionMark': $ms-icon-code-StatusCircleQuestionMark,
+  'StatusCircleRing': $ms-icon-code-StatusCircleRing,
+  'StatusCircleSync': $ms-icon-code-StatusCircleSync,
+  'StatusErrorFull': $ms-icon-code-StatusErrorFull,
+  'StatusTriangle': $ms-icon-code-StatusTriangle,
+  'StatusTriangleExclamation': $ms-icon-code-StatusTriangleExclamation,
+  'StatusTriangleInner': $ms-icon-code-StatusTriangleInner,
+  'StatusTriangleOuter': $ms-icon-code-StatusTriangleOuter,
+  'Step': $ms-icon-code-Step,
+  'StepInsert': $ms-icon-code-StepInsert,
+  'StepShared': $ms-icon-code-StepShared,
+  'StepSharedAdd': $ms-icon-code-StepSharedAdd,
+  'StepSharedInsert': $ms-icon-code-StepSharedInsert,
+  'StickyNotesOutlineAppIcon': $ms-icon-code-StickyNotesOutlineAppIcon,
+  'StickyNotesSolidAppIcon': $ms-icon-code-StickyNotesSolidAppIcon,
+  'StockDown': $ms-icon-code-StockDown,
+  'StockUp': $ms-icon-code-StockUp,
+  'Stop': $ms-icon-code-Stop,
+  'StopSolid': $ms-icon-code-StopSolid,
+  'Stopwatch': $ms-icon-code-Stopwatch,
+  'StorageOptical': $ms-icon-code-StorageOptical,
+  'StoreLogo16': $ms-icon-code-StoreLogo16,
+  'StoreLogoMed20': $ms-icon-code-StoreLogoMed20,
+  'Storyboard': $ms-icon-code-Storyboard,
+  'Streaming': $ms-icon-code-Streaming,
+  'StreamingOff': $ms-icon-code-StreamingOff,
+  'StreamLogo': $ms-icon-code-StreamLogo,
+  'Street': $ms-icon-code-Street,
+  'StreetsideSplitMinimize': $ms-icon-code-StreetsideSplitMinimize,
+  'Strikethrough': $ms-icon-code-Strikethrough,
+  'Subscribe': $ms-icon-code-Subscribe,
+  'Subscript': $ms-icon-code-Subscript,
+  'SubstitutionsIn': $ms-icon-code-SubstitutionsIn,
+  'Suitcase': $ms-icon-code-Suitcase,
+  'SunAdd': $ms-icon-code-SunAdd,
+  'Sunny': $ms-icon-code-Sunny,
+  'SunQuestionMark': $ms-icon-code-SunQuestionMark,
+  'Superscript': $ms-icon-code-Superscript,
+  'SurveyQuestions': $ms-icon-code-SurveyQuestions,
+  'SwayLogo16': $ms-icon-code-SwayLogo16,
+  'SwayLogo32': $ms-icon-code-SwayLogo32,
+  'SwayLogoFill16': $ms-icon-code-SwayLogoFill16,
+  'SwayLogoFill32': $ms-icon-code-SwayLogoFill32,
+  'SwayLogoInverse': $ms-icon-code-SwayLogoInverse,
+  'Switch': $ms-icon-code-Switch,
+  'SwitcherStartEnd': $ms-icon-code-SwitcherStartEnd,
+  'SwitchUser': $ms-icon-code-SwitchUser,
+  'Sync': $ms-icon-code-Sync,
+  'SyncFolder': $ms-icon-code-SyncFolder,
+  'SyncOccurence': $ms-icon-code-SyncOccurence,
+  'SyncStatus': $ms-icon-code-SyncStatus,
+  'SyncStatusSolid': $ms-icon-code-SyncStatusSolid,
+  'SyncToPC': $ms-icon-code-SyncToPC,
+  'System': $ms-icon-code-System,
+  'Tab': $ms-icon-code-Tab,
+  'TabCenter': $ms-icon-code-TabCenter,
+  'Table': $ms-icon-code-Table,
+  'TableBrandedColumn': $ms-icon-code-TableBrandedColumn,
+  'TableBrandedRow': $ms-icon-code-TableBrandedRow,
+  'TableComputed': $ms-icon-code-TableComputed,
+  'TableFirstColumn': $ms-icon-code-TableFirstColumn,
+  'TableGroup': $ms-icon-code-TableGroup,
+  'TableHeaderRow': $ms-icon-code-TableHeaderRow,
+  'TableLastColumn': $ms-icon-code-TableLastColumn,
+  'TableLink': $ms-icon-code-TableLink,
+  'Tablet': $ms-icon-code-Tablet,
+  'TabletMode': $ms-icon-code-TabletMode,
+  'TableTotalRow': $ms-icon-code-TableTotalRow,
+  'TabletSelected': $ms-icon-code-TabletSelected,
+  'TabOneColumn': $ms-icon-code-TabOneColumn,
+  'TabThreeColumn': $ms-icon-code-TabThreeColumn,
+  'TabTwoColumn': $ms-icon-code-TabTwoColumn,
+  'Tag': $ms-icon-code-Tag,
+  'TagGroup': $ms-icon-code-TagGroup,
+  'TagSolid': $ms-icon-code-TagSolid,
+  'TagUnknown': $ms-icon-code-TagUnknown,
+  'TagUnknown12': $ms-icon-code-TagUnknown12,
+  'TagUnknown12Mirror': $ms-icon-code-TagUnknown12Mirror,
+  'TagUnknownMirror': $ms-icon-code-TagUnknownMirror,
+  'Taskboard': $ms-icon-code-Taskboard,
+  'TaskGroup': $ms-icon-code-TaskGroup,
+  'TaskGroupMirrored': $ms-icon-code-TaskGroupMirrored,
+  'TaskList': $ms-icon-code-TaskList,
+  'TaskLogo': $ms-icon-code-TaskLogo,
+  'TaskManager': $ms-icon-code-TaskManager,
+  'TaskManagerMirrored': $ms-icon-code-TaskManagerMirrored,
+  'TaskSolid': $ms-icon-code-TaskSolid,
+  'Taxi': $ms-icon-code-Taxi,
+  'TeamFavorite': $ms-icon-code-TeamFavorite,
+  'TeamsLogo': $ms-icon-code-TeamsLogo,
+  'TeamsLogo16': $ms-icon-code-TeamsLogo16,
+  'TeamsLogoFill': $ms-icon-code-TeamsLogoFill,
+  'TeamsLogoFill16': $ms-icon-code-TeamsLogoFill16,
+  'TeamsLogoInverse': $ms-icon-code-TeamsLogoInverse,
+  'Teamwork': $ms-icon-code-Teamwork,
+  'Teeth': $ms-icon-code-Teeth,
+  'Telemarketer': $ms-icon-code-Telemarketer,
+  'TemporaryUser': $ms-icon-code-TemporaryUser,
+  'Tennis': $ms-icon-code-Tennis,
+  'TestAutoSolid': $ms-icon-code-TestAutoSolid,
+  'TestBeaker': $ms-icon-code-TestBeaker,
+  'TestBeakerSolid': $ms-icon-code-TestBeakerSolid,
+  'TestCase': $ms-icon-code-TestCase,
+  'TestExploreSolid': $ms-icon-code-TestExploreSolid,
+  'TestImpactSolid': $ms-icon-code-TestImpactSolid,
+  'TestParameter': $ms-icon-code-TestParameter,
+  'TestPlan': $ms-icon-code-TestPlan,
+  'TestStep': $ms-icon-code-TestStep,
+  'TestSuite': $ms-icon-code-TestSuite,
+  'TestUserSolid': $ms-icon-code-TestUserSolid,
+  'TextAlignBottom': $ms-icon-code-TextAlignBottom,
+  'TextAlignMiddle': $ms-icon-code-TextAlignMiddle,
+  'TextAlignTop': $ms-icon-code-TextAlignTop,
+  'TextBox': $ms-icon-code-TextBox,
+  'TextCallout': $ms-icon-code-TextCallout,
+  'TextDocument': $ms-icon-code-TextDocument,
+  'TextDocumentShared': $ms-icon-code-TextDocumentShared,
+  'TextField': $ms-icon-code-TextField,
+  'TextOverflow': $ms-icon-code-TextOverflow,
+  'TextParagraphOption': $ms-icon-code-TextParagraphOption,
+  'TextRecognition': $ms-icon-code-TextRecognition,
+  'TextRotate270Degrees': $ms-icon-code-TextRotate270Degrees,
+  'TextRotate90Degrees': $ms-icon-code-TextRotate90Degrees,
+  'TextRotateHorizontal': $ms-icon-code-TextRotateHorizontal,
+  'TextRotation': $ms-icon-code-TextRotation,
+  'TFVCLogo': $ms-icon-code-TFVCLogo,
+  'ThisPC': $ms-icon-code-ThisPC,
+  'ThreeQuarterCircle': $ms-icon-code-ThreeQuarterCircle,
+  'ThumbnailView': $ms-icon-code-ThumbnailView,
+  'ThumbnailViewMirrored': $ms-icon-code-ThumbnailViewMirrored,
+  'Thunderstorms': $ms-icon-code-Thunderstorms,
+  'Ticket': $ms-icon-code-Ticket,
+  'Tiles': $ms-icon-code-Tiles,
+  'Tiles2': $ms-icon-code-Tiles2,
+  'TimeEntry': $ms-icon-code-TimeEntry,
+  'Timeline': $ms-icon-code-Timeline,
+  'TimelineDelivery': $ms-icon-code-TimelineDelivery,
+  'TimelineMatrixView': $ms-icon-code-TimelineMatrixView,
+  'TimelineProgress': $ms-icon-code-TimelineProgress,
+  'TimePicker': $ms-icon-code-TimePicker,
+  'Timer': $ms-icon-code-Timer,
+  'TimeSheet': $ms-icon-code-TimeSheet,
+  'ToDoLogoBottom': $ms-icon-code-ToDoLogoBottom,
+  'ToDoLogoInverse': $ms-icon-code-ToDoLogoInverse,
+  'ToDoLogoOutline': $ms-icon-code-ToDoLogoOutline,
+  'ToDoLogoTop': $ms-icon-code-ToDoLogoTop,
+  'ToggleBorder': $ms-icon-code-ToggleBorder,
+  'ToggleFilled': $ms-icon-code-ToggleFilled,
+  'ToggleLeft': $ms-icon-code-ToggleLeft,
+  'ToggleRight': $ms-icon-code-ToggleRight,
+  'ToggleThumb': $ms-icon-code-ToggleThumb,
+  'Toll': $ms-icon-code-Toll,
+  'Toolbox': $ms-icon-code-Toolbox,
+  'Total': $ms-icon-code-Total,
+  'Touch': $ms-icon-code-Touch,
+  'TouchPointer': $ms-icon-code-TouchPointer,
+  'Trackers': $ms-icon-code-Trackers,
+  'TrackersMirrored': $ms-icon-code-TrackersMirrored,
+  'Train': $ms-icon-code-Train,
+  'TrainSolid': $ms-icon-code-TrainSolid,
+  'TransferCall': $ms-icon-code-TransferCall,
+  'Transition': $ms-icon-code-Transition,
+  'TransitionEffect': $ms-icon-code-TransitionEffect,
+  'TransitionPop': $ms-icon-code-TransitionPop,
+  'TransitionPush': $ms-icon-code-TransitionPush,
+  'Translate': $ms-icon-code-Translate,
+  'Trending12': $ms-icon-code-Trending12,
+  'TriangleDown12': $ms-icon-code-TriangleDown12,
+  'TriangleLeft12': $ms-icon-code-TriangleLeft12,
+  'TriangleRight12': $ms-icon-code-TriangleRight12,
+  'TriangleShape': $ms-icon-code-TriangleShape,
+  'TriangleShapeSolid': $ms-icon-code-TriangleShapeSolid,
+  'TriangleSolid': $ms-icon-code-TriangleSolid,
+  'TriangleSolidDown12': $ms-icon-code-TriangleSolidDown12,
+  'TriangleSolidLeft12': $ms-icon-code-TriangleSolidLeft12,
+  'TriangleSolidRight12': $ms-icon-code-TriangleSolidRight12,
+  'TriangleSolidUp12': $ms-icon-code-TriangleSolidUp12,
+  'TriangleUp12': $ms-icon-code-TriangleUp12,
+  'TriggerApproval': $ms-icon-code-TriggerApproval,
+  'TriggerAuto': $ms-icon-code-TriggerAuto,
+  'TriggerUser': $ms-icon-code-TriggerUser,
+  'Trim': $ms-icon-code-Trim,
+  'TrimEnd': $ms-icon-code-TrimEnd,
+  'TrimStart': $ms-icon-code-TrimStart,
+  'TripleColumn': $ms-icon-code-TripleColumn,
+  'TripleColumnEdit': $ms-icon-code-TripleColumnEdit,
+  'TripleColumnWide': $ms-icon-code-TripleColumnWide,
+  'Trophy': $ms-icon-code-Trophy,
+  'Trophy2': $ms-icon-code-Trophy2,
+  'Trophy2Solid': $ms-icon-code-Trophy2Solid,
+  'TurnRight': $ms-icon-code-TurnRight,
+  'TVMonitor': $ms-icon-code-TVMonitor,
+  'TVMonitorSelected': $ms-icon-code-TVMonitorSelected,
+  'TypeScriptLanguage': $ms-icon-code-TypeScriptLanguage,
+  'Umbrella': $ms-icon-code-Umbrella,
+  'Underline': $ms-icon-code-Underline,
+  'Undo': $ms-icon-code-Undo,
+  'Uneditable': $ms-icon-code-Uneditable,
+  'Uneditable2': $ms-icon-code-Uneditable2,
+  'Uneditable2Mirrored': $ms-icon-code-Uneditable2Mirrored,
+  'UneditableMirrored': $ms-icon-code-UneditableMirrored,
+  'UneditableSolid12': $ms-icon-code-UneditableSolid12,
+  'UneditableSolidMirrored12': $ms-icon-code-UneditableSolidMirrored12,
+  'Unfavorite': $ms-icon-code-Unfavorite,
+  'UngroupObject': $ms-icon-code-UngroupObject,
+  'Unknown': $ms-icon-code-Unknown,
+  'UnknownCall': $ms-icon-code-UnknownCall,
+  'UnknownMirrored': $ms-icon-code-UnknownMirrored,
+  'UnknownMirroredSolid': $ms-icon-code-UnknownMirroredSolid,
+  'UnknownSolid': $ms-icon-code-UnknownSolid,
+  'Unlock': $ms-icon-code-Unlock,
+  'UnlockSolid': $ms-icon-code-UnlockSolid,
+  'Unpin': $ms-icon-code-Unpin,
+  'UnpublishContent': $ms-icon-code-UnpublishContent,
+  'UnSetColor': $ms-icon-code-UnSetColor,
+  'UnstackSelected': $ms-icon-code-UnstackSelected,
+  'Unsubscribe': $ms-icon-code-Unsubscribe,
+  'UnsyncFolder': $ms-icon-code-UnsyncFolder,
+  'UnsyncOccurence': $ms-icon-code-UnsyncOccurence,
+  'Untag': $ms-icon-code-Untag,
+  'Up': $ms-icon-code-Up,
+  'UpdateRestore': $ms-icon-code-UpdateRestore,
+  'UpgradeAnalysis': $ms-icon-code-UpgradeAnalysis,
+  'Upload': $ms-icon-code-Upload,
+  'URLBlock': $ms-icon-code-URLBlock,
+  'USB': $ms-icon-code-USB,
+  'UserEvent': $ms-icon-code-UserEvent,
+  'UserFollowed': $ms-icon-code-UserFollowed,
+  'UserGauge': $ms-icon-code-UserGauge,
+  'UserOptional': $ms-icon-code-UserOptional,
+  'UserPause': $ms-icon-code-UserPause,
+  'UserRemove': $ms-icon-code-UserRemove,
+  'UserSync': $ms-icon-code-UserSync,
+  'UserWarning': $ms-icon-code-UserWarning,
+  'Vacation': $ms-icon-code-Vacation,
+  'Vaccination': $ms-icon-code-Vaccination,
+  'Variable': $ms-icon-code-Variable,
+  'Variable2': $ms-icon-code-Variable2,
+  'VariableGroup': $ms-icon-code-VariableGroup,
+  'VB': $ms-icon-code-VB,
+  'VennDiagram': $ms-icon-code-VennDiagram,
+  'VerifiedBrand': $ms-icon-code-VerifiedBrand,
+  'VerifiedBrandSolid': $ms-icon-code-VerifiedBrandSolid,
+  'VersionControlPush': $ms-icon-code-VersionControlPush,
+  'VerticalDistributeCenter': $ms-icon-code-VerticalDistributeCenter,
+  'Video': $ms-icon-code-Video,
+  'Video360Generic': $ms-icon-code-Video360Generic,
+  'VideoLightOff': $ms-icon-code-VideoLightOff,
+  'VideoOff': $ms-icon-code-VideoOff,
+  'VideoSearch': $ms-icon-code-VideoSearch,
+  'VideoSolid': $ms-icon-code-VideoSolid,
+  'View': $ms-icon-code-View,
+  'ViewAll': $ms-icon-code-ViewAll,
+  'ViewAll2': $ms-icon-code-ViewAll2,
+  'ViewDashboard': $ms-icon-code-ViewDashboard,
+  'ViewInAR': $ms-icon-code-ViewInAR,
+  'ViewList': $ms-icon-code-ViewList,
+  'ViewListGroup': $ms-icon-code-ViewListGroup,
+  'ViewListTree': $ms-icon-code-ViewListTree,
+  'ViewOriginal': $ms-icon-code-ViewOriginal,
+  'VisioDiagram': $ms-icon-code-VisioDiagram,
+  'VisioDiagramSync': $ms-icon-code-VisioDiagramSync,
+  'VisioDocument': $ms-icon-code-VisioDocument,
+  'VisioLogo': $ms-icon-code-VisioLogo,
+  'VisioLogo16': $ms-icon-code-VisioLogo16,
+  'VisioLogoFill': $ms-icon-code-VisioLogoFill,
+  'VisioLogoFill16': $ms-icon-code-VisioLogoFill16,
+  'VisioLogoInverse': $ms-icon-code-VisioLogoInverse,
+  'VisioLogoInverse16': $ms-icon-code-VisioLogoInverse16,
+  'VisualBasicLanguage': $ms-icon-code-VisualBasicLanguage,
+  'VisuallyImpaired': $ms-icon-code-VisuallyImpaired,
+  'VisualsFolder': $ms-icon-code-VisualsFolder,
+  'VisualsStore': $ms-icon-code-VisualsStore,
+  'VisualStudioIDELogo32': $ms-icon-code-VisualStudioIDELogo32,
+  'VisualStudioLogo': $ms-icon-code-VisualStudioLogo,
+  'VoicemailForward': $ms-icon-code-VoicemailForward,
+  'VoicemailIRM': $ms-icon-code-VoicemailIRM,
+  'VoicemailReply': $ms-icon-code-VoicemailReply,
+  'Volume0': $ms-icon-code-Volume0,
+  'Volume1': $ms-icon-code-Volume1,
+  'Volume2': $ms-icon-code-Volume2,
+  'Volume3': $ms-icon-code-Volume3,
+  'VolumeDisabled': $ms-icon-code-VolumeDisabled,
+  'VSTSAltLogo1': $ms-icon-code-VSTSAltLogo1,
+  'VSTSAltLogo2': $ms-icon-code-VSTSAltLogo2,
+  'VSTSLogo': $ms-icon-code-VSTSLogo,
+  'Waffle': $ms-icon-code-Waffle,
+  'WaffleOffice365': $ms-icon-code-WaffleOffice365,
+  'WaitlistConfirm': $ms-icon-code-WaitlistConfirm,
+  'WaitlistConfirmMirrored': $ms-icon-code-WaitlistConfirmMirrored,
+  'Warning': $ms-icon-code-Warning,
+  'Warning12': $ms-icon-code-Warning12,
+  'WarningSolid': $ms-icon-code-WarningSolid,
+  'WavingHand': $ms-icon-code-WavingHand,
+  'WebAppBuilderFragment': $ms-icon-code-WebAppBuilderFragment,
+  'WebAppBuilderFragmentCreate': $ms-icon-code-WebAppBuilderFragmentCreate,
+  'WebAppBuilderModule': $ms-icon-code-WebAppBuilderModule,
+  'WebAppBuilderSlot': $ms-icon-code-WebAppBuilderSlot,
+  'Webcam2': $ms-icon-code-Webcam2,
+  'Webcam2Off': $ms-icon-code-Webcam2Off,
+  'WebComponents': $ms-icon-code-WebComponents,
+  'WebEnvironment': $ms-icon-code-WebEnvironment,
+  'WebPublish': $ms-icon-code-WebPublish,
+  'Website': $ms-icon-code-Website,
+  'WebTemplate': $ms-icon-code-WebTemplate,
+  'Weights': $ms-icon-code-Weights,
+  'Wheelchair': $ms-icon-code-Wheelchair,
+  'WhiteBoardApp16': $ms-icon-code-WhiteBoardApp16,
+  'WhiteBoardApp32': $ms-icon-code-WhiteBoardApp32,
+  'WifiEthernet': $ms-icon-code-WifiEthernet,
+  'WifiWarning4': $ms-icon-code-WifiWarning4,
+  'WindDirection': $ms-icon-code-WindDirection,
+  'WindowEdit': $ms-icon-code-WindowEdit,
+  'WindowsLogo': $ms-icon-code-WindowsLogo,
+  'Wines': $ms-icon-code-Wines,
+  'WipePhone': $ms-icon-code-WipePhone,
+  'WordDocument': $ms-icon-code-WordDocument,
+  'WordLogo': $ms-icon-code-WordLogo,
+  'WordLogo16': $ms-icon-code-WordLogo16,
+  'WordLogoFill': $ms-icon-code-WordLogoFill,
+  'WordLogoFill16': $ms-icon-code-WordLogoFill16,
+  'WordLogoInverse': $ms-icon-code-WordLogoInverse,
+  'WordLogoInverse16': $ms-icon-code-WordLogoInverse16,
+  'Work': $ms-icon-code-Work,
+  'WorkFlow': $ms-icon-code-WorkFlow,
+  'WorkforceManagement': $ms-icon-code-WorkforceManagement,
+  'WorkItem': $ms-icon-code-WorkItem,
+  'WorkItemAlert': $ms-icon-code-WorkItemAlert,
+  'WorkItemBar': $ms-icon-code-WorkItemBar,
+  'WorkItemBarSolid': $ms-icon-code-WorkItemBarSolid,
+  'WorkItemBug': $ms-icon-code-WorkItemBug,
+  'World': $ms-icon-code-World,
+  'WorldClock': $ms-icon-code-WorldClock,
+  'YammerLogo': $ms-icon-code-YammerLogo,
+  'ZipFolder': $ms-icon-code-ZipFolder,
+  'Zoom': $ms-icon-code-Zoom,
+  'ZoomIn': $ms-icon-code-ZoomIn,
+  'ZoomOut': $ms-icon-code-ZoomOut,
+  'ZoomToFit': $ms-icon-code-ZoomToFit,
+
+  // Deprecated icons.
+  'HumanResources': $ms-icon-code-HumanResources,
+  'StoreLogo': $ms-icon-code-StoreLogo16,
+  'OneDrive': $ms-icon-code-OneDriveLogo,
+  'ToggleOff': $ms-icon-code-ToggleRight,
+  'StoreLogoMed': $ms-icon-code-StoreLogoMed20
+);
diff --git a/packages/au1-app/src/resources/sass/variables/_Responsive.Variables.scss b/packages/au1-app/src/resources/sass/variables/_Responsive.Variables.scss
new file mode 100644
index 0000000..0a70fa9
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_Responsive.Variables.scss
@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Minimum widths for each breakpoint.
+$ms-screen-min-sm: 320px !default;
+$ms-screen-min-md: 480px !default;
+$ms-screen-min-lg: 640px !default;
+$ms-screen-min-xl: 1024px !default;
+$ms-screen-min-xxl: 1366px !default;
+$ms-screen-min-xxxl: 1920px !default;
+
+// Maximum widths for each breakpoint. These are set to values like 479.99999px to prevent an issue where a browser's
+// width may not be a whole pixel value, creating the potential for multiple media queries to apply simultaneously.
+// See: http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem
+$ms-screen-max-sm: ($ms-screen-min-md - 0.00001);
+$ms-screen-max-md: ($ms-screen-min-lg - 0.00001);
+$ms-screen-max-lg: ($ms-screen-min-xl - 0.00001);
+$ms-screen-max-xl: ($ms-screen-min-xxl - 0.00001);
+$ms-screen-max-xxl: ($ms-screen-min-xxxl - 0.00001);
diff --git a/packages/au1-app/src/resources/sass/variables/_ZIndex.Variables.scss b/packages/au1-app/src/resources/sass/variables/_ZIndex.Variables.scss
new file mode 100644
index 0000000..8c30a98
--- /dev/null
+++ b/packages/au1-app/src/resources/sass/variables/_ZIndex.Variables.scss
@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Large ranges
+$ms-zIndex-0: 0 !default;
+$ms-zIndex-1: 100 !default;
+$ms-zIndex-2: 200 !default;
+$ms-zIndex-3: 300 !default;
+$ms-zIndex-4: 400 !default;
+$ms-zIndex-5: 500 !default;
+
+// Small ranges
+$ms-zIndex-back:   0 !default;
+$ms-zIndex-middle: 5 !default;
+$ms-zIndex-front:  10 !default;
diff --git a/packages/au1-app/src/resources/styles/common/_common.scss b/packages/au1-app/src/resources/styles/common/_common.scss
new file mode 100644
index 0000000..66ceaee
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_common.scss
@@ -0,0 +1,10 @@
+@import '../../sass/References';
+@import './i18n';
+@import './themeOverrides';
+@import './focusBorder';
+@import './semanticColorVariables';
+@import './highContrast';
+
+// Screen sizes that align with UHF breakpoints for the website
+$uhf-screen-min-mobile: 768px;
+$uhf-screen-max-mobile: ($uhf-screen-min-mobile - 1);
diff --git a/packages/au1-app/src/resources/styles/common/_exampleStyles.scss b/packages/au1-app/src/resources/styles/common/_exampleStyles.scss
new file mode 100644
index 0000000..3ac72bf
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_exampleStyles.scss
@@ -0,0 +1,9 @@
+@import './variables';
+
+.exampleCheckbox {
+  margin: $exampleCheckbox-margin;
+}
+
+.exampleLabel {
+  margin: $exampleLabel-margin;
+}
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/styles/common/_focusBorder.scss b/packages/au1-app/src/resources/styles/common/_focusBorder.scss
new file mode 100644
index 0000000..f44de84
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_focusBorder.scss
@@ -0,0 +1,63 @@
+@import './semanticColorVariables';
+
+@mixin focus-clear() {
+  &::-moz-focus-inner {
+    // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671
+    border: 0;
+  }
+
+  & {
+    // Clear browser specific focus styles and use transparent as placeholder for focus style
+    outline: transparent;
+  }
+}
+
+@mixin focus($onFocus: true) {
+  @if $onFocus {
+    :global(.ms-Fabric.is-focusVisible) &:focus {
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
+@mixin focus-border($padding: 0, $color: $focusedBorderColor, $thickness: 1px, $onFocus: true, $position: relative) {
+  @include focus-clear();
+
+  & {
+    // It is MUST because the pseudo-element is absolute position.
+    position: $position;
+  }
+
+  @include focus($onFocus) {
+    &:after {
+      @include after-outline($padding, $color, $thickness);
+    }
+  }
+}
+
+// When focus is set using the keyboard, apply an outline.
+@mixin after-outline ($padding: 0, $color: $focusedBorderColor, $thickness: 1px) {
+    content: '';
+    position: absolute;
+    top: $padding;
+    right: $padding;
+    bottom: $padding;
+    left: $padding;
+
+    // Make the content not respond to mouse/touch event. Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
+    pointer-events: none;
+
+    // Add focus border with $color
+    border: $thickness solid $color;
+}
+
+
+// When focus is set using the keyboard, apply an outline.
+@mixin focus-outline {
+  :global(.ms-Fabric.is-focusVisible) &:focus {
+    outline: 1px solid $focusedBorderColor;
+  }
+}
diff --git a/packages/au1-app/src/resources/styles/common/_highContrast.scss b/packages/au1-app/src/resources/styles/common/_highContrast.scss
new file mode 100644
index 0000000..833eb71
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_highContrast.scss
@@ -0,0 +1,17 @@
+@mixin high-contrast {
+  @media screen and (-ms-high-contrast: active) {
+    @content;
+  }
+}
+
+@mixin high-contrast-black-on-white {
+  @media screen and (-ms-high-contrast: black-on-white) {
+   @content;
+  }
+}
+
+@mixin high-contrast-white-on-black {
+  @media screen and (-ms-high-contrast: white-on-black) {
+   @content;
+  }
+}
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/styles/common/_i18n.scss b/packages/au1-app/src/resources/styles/common/_i18n.scss
new file mode 100644
index 0000000..e7c5230
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_i18n.scss
@@ -0,0 +1,295 @@
+// Some things copied from WinJS with <3
+
+
+// LTR mixin definition
+@mixin LTR {
+    html[dir='ltr'] & {
+        @content;
+    }
+}
+
+// RTL mixin definition
+@mixin RTL {
+    html[dir='rtl'] & {
+        @content;
+    }
+}
+
+// Use baseRTL for a root element of a control that needs rtl support
+@mixin baseRtl {
+    @include RTL {
+        direction: rtl;
+        unicode-bidi: bidi-override;
+    }
+}
+
+/*
+    Common CSS property mixins with support for RTL.
+    Use these mixins when you want to automatically create RTL versions of your properties.
+    They are in alphabetical order (a-z).
+*/
+
+@mixin border-color($top, $right, $bottom, $left) {
+    border-color: $top $right $bottom $left;
+    @include RTL {
+        border-color: $top $left $bottom $right;
+    }
+}
+
+@mixin border-left($width, $style, $color) {
+    @include LTR {
+        border-left: $width $style $color;
+    }
+    @include RTL {
+        border-right: $width $style $color;
+    }
+}
+
+@mixin border-left-color($color) {
+    @include LTR {
+        border-left-color: $color;
+    }
+    @include RTL {
+        border-right-color: $color;
+    }
+}
+
+@mixin border-left-style($style) {
+    @include LTR {
+        border-left-style: $style;
+    }
+    @include RTL {
+        border-right-style: $style;
+    }
+}
+
+@mixin border-left-width($width) {
+    @include LTR {
+        border-left-width: $width;
+    }
+    @include RTL {
+        border-right-width: $width;
+    }
+}
+
+@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+    border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+    @include RTL {
+        border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+    }
+}
+
+@mixin border-right($width, $style, $color) {
+    @include LTR {
+        border-right: $width $style $color;
+    }
+    @include RTL {
+        border-left: $width $style $color;
+    }
+}
+
+@mixin border-right-color($color) {
+    @include LTR {
+        border-right-color: $color;
+    }
+    @include RTL {
+        border-left-color: $color;
+    }
+}
+
+@mixin border-right-style($style) {
+    @include LTR {
+         border-right-style: $style;
+    }
+    @include RTL {
+        border-left-style: $style;
+    }
+}
+
+@mixin border-right-width($width) {
+    @include LTR {
+        border-right-width: $width;
+    }
+    @include RTL {
+        border-left-width: $width;
+    }
+}
+
+@mixin clear($side) {
+    @if $side == left {
+        @include LTR {
+            clear: $side;
+        }
+        @include RTL {
+            clear: right;
+        }
+    } @else if $side == right {
+        @include LTR {
+            clear: $side;
+        }
+
+        @include RTL {
+            clear: left;
+        }
+    } @else {
+        clear: $side;
+    }
+}
+
+@mixin float($direction) {
+    @if $direction == left {
+        @include LTR {
+            float: left;
+        }
+        @include RTL {
+            float: right;
+        }
+    } @else {
+        @include LTR {
+            float: right;
+        }
+        @include RTL {
+            float: left;
+        }
+    }
+}
+
+@mixin left($distance) {
+    @include LTR {
+        left: $distance;
+    }
+    @include RTL {
+        right: $distance;
+    }
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+    margin: $top $right $bottom $left;
+    @include RTL {
+        margin: $top $left $bottom $right;
+    }
+}
+
+@mixin margin-left($distance) {
+    @include LTR {
+        margin-left: $distance;
+    }
+    @include RTL {
+        margin-right: $distance;
+    }
+}
+
+@mixin margin-right($distance) {
+    @include LTR {
+        margin-right: $distance;
+    }
+    @include RTL {
+        margin-left: $distance;
+    }
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+    padding: $top $right $bottom $left;
+    @include RTL {
+        padding: $top $left $bottom $right;
+    }
+}
+
+@mixin padding-left($distance) {
+    @include LTR {
+        padding-left: $distance;
+    }
+    @include RTL {
+        padding-right: $distance;
+    }
+}
+
+@mixin padding-right($distance) {
+    @include LTR {
+        padding-right: $distance;
+    }
+    @include RTL {
+        padding-left: $distance;
+    }
+}
+
+@mixin right($distance) {
+    @include LTR {
+        right: $distance;
+    }
+    @include RTL {
+        left: $distance;
+    }
+}
+
+@mixin text-align($direction) {
+    @if $direction == left {
+        @include LTR {
+            text-align: left;
+        }
+        @include RTL {
+            text-align: right;
+        }
+    } @else {
+        @include LTR {
+            text-align: right;
+        }
+        @include RTL {
+            text-align: left;
+        }
+    }
+}
+
+@mixin box-shadow($left, $etc) {
+    @include LTR {
+        box-shadow: $left $etc;
+    }
+
+    @include RTL {
+        box-shadow: -$left $etc;
+    }
+}
+
+@mixin transform-scaleX($scaleX: 1) {
+    @include LTR {
+        transform: scaleX($scaleX);
+    }
+    @include RTL {
+        transform: scaleX(-$scaleX);
+    }
+}
+
+@mixin transform-translateX($distance) {
+    @include LTR {
+        transform: translateX($distance);
+    }
+    @include RTL {
+        transform: translateX(-$distance);
+    }
+}
+
+// only supported when ONLY left/right are declared
+@mixin transition-property($direction) {
+    @if $direction == left {
+        @include LTR {
+            transition-property: left;
+        }
+        @include RTL {
+            transition-property: right;
+        }
+    } @else {
+        @include LTR {
+            transition-property: right;
+        }
+        @include RTL {
+            transition-property: left;
+        }
+    }
+}
+
+// Disables high contrast color adjusts for Edge/IE11
+@mixin highContrastAdjust {
+  @media screen and (-ms-high-contrast: active),  screen and (-ms-high-contrast: black-on-white) {
+    -ms-high-contrast-adjust: none;
+  }
+}
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/styles/common/_semanticColorVariables.scss b/packages/au1-app/src/resources/styles/common/_semanticColorVariables.scss
new file mode 100644
index 0000000..8da4afc
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_semanticColorVariables.scss
@@ -0,0 +1,94 @@
+@import './themeOverrides';
+
+$focusedBorderColor: $ms-color-neutralSecondary;
+
+$bodyBackgroundColor: $ms-color-white;
+$bodyForegroundColor: $ms-color-neutralPrimary;
+
+/* Primary item colors, used for Nav, DetailsList headers, Pivots */
+$unselectedBackgroundColor: $bodyBackgroundColor;
+$unselectedForegroundColor: $bodyForegroundColor;
+
+$disabledBackgroundColor: $bodyBackgroundColor;
+$disabledForegroundColor: $ms-color-neutralTertiaryAlt;
+
+$unselectedHoverBackgroundColor: $ms-color-neutralLighterAlt;
+$unselectedHoverForegroundColor: $bodyForegroundColor;
+
+$unselectedActiveBackgroundColor: $ms-color-neutralLight;
+$unselectedActiveForegroundColor: $bodyForegroundColor;
+
+$selectedBackgroundColor: $ms-color-neutralLighter;
+$selectedForegroundColor: $ms-color-neutralPrimary;
+
+$selectedHoverBackgroundColor: $ms-color-neutralLighter;
+$selectedHoverForegroundColor: $ms-color-neutralDark;
+
+$selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt;
+$selectedActiveForegroundColor: $ms-color-neutralPrimary;
+
+$dividerColor: $ms-color-neutralLight;
+
+// *** New semantic slots
+// todo: convert to theme tokens
+
+/*** BASIC ***/
+$bodyBackgroundColor: $ms-color-white;
+$bodyTextColor: $ms-color-neutralPrimary;
+$bodySubtextColor: $ms-color-neutralSecondary;
+
+$disabledBackgroundColor: $ms-color-neutralLighter;
+$disabledTextColor: $ms-color-neutralTertiaryAlt;
+$disabledSubtextColor: $ms-color-neutralQuaternary;
+
+$focusBorderColor: $ms-color-black;
+
+// $errorBackgroundColor: todo
+$errorTextColor: $ms-color-redDark;
+
+/*** Text fields ***/
+$fieldBackgroundColor: $ms-color-white;
+$fieldTextColor: $ms-color-neutralPrimary;
+
+$fieldBorderColor: $ms-color-neutralTertiary;
+$fieldBorderHoverColor: $ms-color-neutralDark;
+$fieldBorderFocusColor: $ms-color-themePrimary;
+
+$fieldPlaceholderColor: $ms-color-neutralTertiary;
+
+/*** State controls ***/
+$controlBackgroundColor: $ms-color-white;
+$controlBackgroundSelectedColor: $ms-color-themePrimary;
+$controlBackgroundSelectedHoverColor: $ms-color-themeDarkAlt;
+
+$controlForegroundColor: $ms-color-neutralPrimary;
+$controlForegroundHoverColor: $ms-color-black;
+$controlForegroundSelectedColor: $ms-color-white;
+
+$controlBorderUnselectedColor: $ms-color-neutralTertiary;
+$controlBorderUnselectedHoverColor: $ms-color-neutralPrimary;
+// $controlBorderSelectedColor: unused
+$controlBorderSelectedHoverColor: $ms-color-themePrimary;
+
+/*** Menus ***/
+$menuBackgroundColor: $ms-color-white;
+$menuBackgroundHoverColor: $ms-color-neutralLighter;
+$menuBackgroundSelectedColor: $ms-color-neutralLight;
+
+$menuTextColor: $ms-color-neutralPrimary;
+$menuTextSelectedColor: $ms-color-black;
+$menuTextDisabledColor: $ms-color-neutralTertiaryAlt;
+
+$menuIconColor: $ms-color-themeDarkAlt;
+
+$menuHeaderColor: $ms-color-themeDarkAlt;
+
+$menuDividerColor: $ms-color-neutralLight;
+
+/*** Lists ***/
+$listBackgroundColor: transparent;
+$listTextColor: $ms-color-neutralPrimary;
+
+$listItemHoverColor: $ms-color-neutralLighter;
+$listItemSelectedColor: $ms-color-neutralQuaternary;
+$listItemSelectedHoverColor: $ms-color-neutralQuaternaryAlt;
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/styles/common/_themeOverrides.scss b/packages/au1-app/src/resources/styles/common/_themeOverrides.scss
new file mode 100644
index 0000000..44912e2
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_themeOverrides.scss
@@ -0,0 +1,67 @@
+/* themed tokens */
+$ms-color-themeDarker: "[theme:themeDarker, default: #004578]";
+$ms-color-themeDark: "[theme:themeDark, default: #005a9e]";
+$ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]";
+$ms-color-themePrimary: "[theme:themePrimary, default: #0078d7]";
+$ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]";
+$ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]";
+$ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]";
+$ms-color-themeLighter: "[theme:themeLighter, default: #deecf9]";
+$ms-color-themeLighterAlt: "[theme:themeLighterAlt, default: #eff6fc]";
+$ms-color-black: "[theme:black, default: #000000]";
+$ms-color-neutralDark: "[theme:neutralDark, default: #212121]";
+$ms-color-neutralPrimary: "[theme:neutralPrimary, default: #333333]";
+$ms-color-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default: #3c3c3c]";
+$ms-color-neutralSecondary: "[theme:neutralSecondary, default: #666666]";
+$ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #767676]";
+$ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a6a6a6]";
+$ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]";
+$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d0d0d0]";
+$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #dadada]";
+$ms-color-neutralLight: "[theme:neutralLight, default: #eaeaea]";
+$ms-color-neutralLighter: "[theme:neutralLighter, default: #f4f4f4]";
+$ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #f8f8f8]";
+$ms-color-white: "[theme:white, default: #ffffff]";
+$ms-color-blackTranslucent40: "[theme:blackTranslucent40, default: rgba(0,0,0,.4)]";
+$ms-color-whiteTranslucent40: "[theme:whiteTranslucent40, default: rgba(255,255,255,.4)]";
+$ms-color-yellow: "[theme:yellow, default: #ffb900]";
+$ms-color-yellowLight: "[theme:yellowLight, default: #fff100]";
+$ms-color-orange: "[theme:orange, default: #d83b01]";
+$ms-color-orangeLight: "[theme:orangeLight, default: #ff8c00]";
+$ms-color-redDark: "[theme:redDark, default: #a80000]";
+$ms-color-red: "[theme:red, default: #e81123]";
+$ms-color-magentaDark: "[theme:magentaDark, default: #5c005c]";
+$ms-color-magenta: "[theme:magenta, default: #b4009e]";
+$ms-color-magentaLight: "[theme:magentaLight, default: #e3008c]";
+$ms-color-purpleDark: "[theme:purpleDark, default: #32145a]";
+$ms-color-purple: "[theme:purple, default: #5c2d91]";
+$ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]";
+$ms-color-blueDark: "[theme:blueDark, default: #002050]";
+$ms-color-blueMid: "[theme:blueMid, default: #00188f]";
+$ms-color-blue: "[theme:blue, default: #0078d7]";
+$ms-color-blueLight: "[theme:blueLight, default: #00bcf2]";
+$ms-color-tealDark: "[theme:tealDark, default: #004b50]";
+$ms-color-teal: "[theme:teal, default: #008272]";
+$ms-color-tealLight: "[theme:tealLight, default: #00b294]";
+$ms-color-greenDark: "[theme:greenDark, default: #004b1c]";
+$ms-color-green: "[theme:green, default: #107c10]";
+$ms-color-greenLight: "[theme:greenLight, default: #bad80a]";
+$ms-color-error: "[theme:error, default: #a80000]";
+$ms-color-errorText: "[theme:errorText, default: #333333]";
+$ms-color-errorBackground: "[theme:errorBackground, default: #fde7e9]";
+$ms-color-success: "[theme:success, default: #107c10]";
+$ms-color-successText: "[theme:successText, default: #333333]";
+$ms-color-successBackground: "[theme:successBackground, default: #dff6dd]";
+$ms-color-alert: "[theme:alert, default: #d83b01]";
+$ms-color-alertText: "[theme:alertText, default: #333333]";
+$ms-color-alertBackground: "[theme:alertBackground, default: #deecf9]";
+$ms-color-warning: "[theme:warning, default: #767676]";
+$ms-color-warningText: "[theme:warningText, default: #333333]";
+$ms-color-warningBackground: "[theme:warningBackground, default: #fff4ce]";
+$ms-color-severeWarning: "[theme:severeWarning, default: #d83b01]";
+$ms-color-severeWarningText: "[theme:severeWarningText, default: #333333]";
+$ms-color-severeWarningBackground: "[theme:severeWarningBackground, default: #fed9cc]";
+$ms-color-info: "[theme:info, default: #767676]";
+$ms-color-infoText: "[theme:infoText, default: #333333]";
+$ms-color-infoBackground: "[theme:infoBackground, default: #f4f4f4]";
+$ms-color-orangeLighter: "[theme:orangeLighter, default: #ea4300]";
diff --git a/packages/au1-app/src/resources/styles/common/_variables.scss b/packages/au1-app/src/resources/styles/common/_variables.scss
new file mode 100644
index 0000000..01c323c
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/common/_variables.scss
@@ -0,0 +1,2 @@
+$exampleLabel-margin: 10px 0;
+$exampleCheckbox-margin: 10px 0;
\ No newline at end of file
diff --git a/packages/au1-app/src/resources/styles/components/details-list/DetailsHeader.scss b/packages/au1-app/src/resources/styles/components/details-list/DetailsHeader.scss
new file mode 100644
index 0000000..0cd22a6
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/components/details-list/DetailsHeader.scss
@@ -0,0 +1,197 @@
+@import '../../common/common';
+
+$iconForegroundColor: $ms-color-neutralSecondary;
+$headerForegroundColor: $ms-color-neutralPrimary;
+$headerBackgroundColor: $ms-color-white;
+$dropdownChevronForegroundColor: $ms-color-neutralTertiary;
+$rowHeight: 32px;
+$resizerColor: $ms-color-neutralTertiaryAlt;
+$cellPadding: 8px;
+$isPaddedMargin: 24px;
+
+.root {
+  display: inline-block;
+  background: $headerBackgroundColor;
+  position: relative;
+  min-width: 100%;
+  vertical-align: top;
+  height: $rowHeight;
+  line-height: $rowHeight;
+  white-space: nowrap;
+  padding-bottom: 1px;
+  border-bottom: 1px solid $dividerColor;
+  cursor: default;
+  user-select: none;
+
+  &.rootIsSelectAllHidden {
+    .cell.cellIsCheck {
+      visibility: hidden;
+    }
+  }
+}
+
+.cellWrapperPadded {
+  @include ms-padding-right($isPaddedMargin + $cellPadding);
+}
+
+.cell {
+  @include ms-font-s;
+  color: $headerForegroundColor;
+  @include focus-border();
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 $cellPadding;
+  border: none;
+  line-height: inherit;
+  margin: 0;
+  height: $rowHeight;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include ms-text-align(left);
+
+  &.cellIsCheck {
+    position: relative;
+    padding: 0;
+    margin: 0;
+  }
+
+  &.cellIsActionable {
+
+    &:hover {
+      color: $ms-color-neutralPrimary;
+      background: $unselectedHoverBackgroundColor;
+    }
+
+    &:active {
+      background: $unselectedActiveBackgroundColor;
+    }
+  }
+
+  &.cellIsEmpty {
+    text-overflow: clip;
+  }
+}
+
+.cellSizer {
+  @include focus-clear();
+
+  display: inline-block;
+  position: relative;
+  cursor: ew-resize;
+  bottom: 0;
+  top: 0;
+  margin: 0 -8px;
+  overflow: hidden;
+  height: inherit;
+  background: transparent;
+  z-index: 1;
+  width: 16px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: $resizerColor;
+    opacity: 0;
+    left: 50%;
+  }
+
+  &:focus:after,
+  &:hover:after,
+  &.cellIsResizing:after {
+    opacity: 1;
+    transition: opacity .3s linear;
+  }
+
+  &.cellIsResizing:after {
+    @include ms-drop-shadow();
+  }
+}
+
+.collapseButton {
+  text-align: center;
+  transform: rotate(-180deg);
+  transform-origin: 50% 50%;
+  transition: transform .1s linear;
+  width: 20px;
+  outline: 0;
+
+  &.collapseButtonIsCollapsed {
+    transform: rotate(0deg);
+  }
+}
+
+.iconOnlyHeader {
+  .nearIcon {
+    @include ms-padding-left(0);
+  }
+}
+
+.nearIcon {
+  color: $iconForegroundColor;
+  opacity: 1;
+  @include ms-padding-left(8px);
+
+  &.sortIcon {
+    @include ms-padding-left(4px);
+    position: relative;
+    top: 1px;
+  }
+}
+
+.cell .filterChevron {
+  color: $dropdownChevronForegroundColor;
+  @include ms-padding-left(4px);
+  vertical-align: middle;
+}
+
+.cellTitle {
+  display: block;
+  overflow: hidden;
+  @include focus-border($position: absolute);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0 8px;
+}
+
+:global(.ms-TooltipHost).checkTooltip {
+  display: block;
+}
+
+.cellTooltip {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.sizingOverlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  cursor: ew-resize;
+  background: rgba(255, 255, 255, 0);
+
+  @include high-contrast {
+    background: transparent;
+    -ms-high-contrast-adjust: none;
+  }
+}
+
+.cell .collapseButton {
+  @include ms-padding-right(0);
+}
+
+.accessibleLabel {
+  @include ms-screenReaderOnly;
+}
diff --git a/packages/au1-app/src/resources/styles/components/details-list/DetailsList.scss b/packages/au1-app/src/resources/styles/components/details-list/DetailsList.scss
new file mode 100644
index 0000000..a38a902
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/components/details-list/DetailsList.scss
@@ -0,0 +1,37 @@
+@import '../../common/common';
+
+$detailsList-background-color: $listBackgroundColor;
+$detailsList-text-color: $listTextColor;
+
+.ms-DetailsList {
+  position: relative;
+  font-size: $ms-font-size-s;
+  background: $detailsList-background-color;
+  color: $detailsList-text-color;
+}
+
+.focusZone {
+  display: inline-block;
+  vertical-align: top;
+  min-width: 100%;
+  min-height: 1px;
+}
+
+.rootIsHorizontalConstrained {
+  overflow-x: auto;
+  overflow-y: visible;
+
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Set the min height for a row to 38px so even rendering empty cells takes that space. */
+.root :global(.ms-List-cell) {
+  min-height: 38px;
+  word-break: break-word;
+}
+
+.rootCompact {
+  :global(.ms-List-cell) {
+    min-height: 32px;
+  }
+}
diff --git a/packages/au1-app/src/resources/styles/components/details-list/DetailsRow.scss b/packages/au1-app/src/resources/styles/components/details-list/DetailsRow.scss
new file mode 100644
index 0000000..9c4f079
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/components/details-list/DetailsRow.scss
@@ -0,0 +1,234 @@
+@import '../../common/common';
+
+$rowHeight: 42px;
+$compactRowHeight: 32px;
+$rowVerticalPadding: 11px;
+$rowHorizontalPadding: 8px;
+$compactRowVerticalPadding: 6px;
+$isPaddedMargin: 24px;
+
+
+/* DetailsList Colors */
+// Default
+$detailsList-item-default-header-text-color: $ms-color-neutralPrimary;
+$detailsList-item-default-meta-text-color: $ms-color-neutralSecondaryAlt;
+$detailsList-item-default-background-color: $ms-color-white;
+
+// Hover
+$detailsList-item-hover-text-color: $ms-color-neutralPrimary;
+$detailsList-item-hover-meta-text-color: $ms-color-neutralSecondary;
+$detailsList-item-hover-color-background: $ms-color-neutralLighter;
+
+// Selected
+$detailsList-item-selected-text-color: $ms-color-neutralDark;
+$detailsList-item-selected-meta-text-color: $ms-color-neutralPrimary;
+$detailsList-item-selected-background-color: $ms-color-neutralLight;
+
+// Selected Hover
+$detailsList-item-selected-hover-text-color: $ms-color-black;
+$detailsList-item-selected-hover-meta-text-color: $ms-color-neutralDark;
+$detailsList-item-selected-hover-background-color: $ms-color-neutralQuaternaryAlt;
+
+// Focus
+$detailsList-item-focus-header-text-color: $ms-color-black;
+$detailsList-item-focus-background-color: $ms-color-neutralQuaternaryAlt;
+$detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
+
+
+// Compact mode rules
+:global(.ms-DetailsList--Compact) {
+  .root {
+    min-height: $compactRowHeight;
+    border: 0;
+  }
+
+  .cell {
+    min-height: $compactRowHeight;
+    padding: $compactRowVerticalPadding $rowHorizontalPadding;
+  }
+
+  .check {
+    padding: $rowHorizontalPadding;
+  }
+}
+
+:global(.ms-List-cell:first-child) {
+  .root {
+    // Don't show border-top for first row's pseudo element
+    &:before {
+      display: none;
+    }
+  }
+}
+
+// Default state
+.root {
+  @include focus-border(0, $ms-color-neutralSecondary);
+
+  border-bottom: 1px solid $ms-color-neutralLighter;
+  background: $detailsList-item-default-background-color;
+  color: $detailsList-item-default-meta-text-color;
+  display: flex;
+  min-width: 100%;
+  min-height: $rowHeight;
+  white-space: nowrap;
+  padding: 0;
+  box-sizing: border-box;
+
+  @include ms-text-align(left);
+  vertical-align: top;
+
+  // Default State hover
+  &:hover {
+    background: $detailsList-item-hover-color-background;
+    color: $detailsList-item-hover-meta-text-color;
+  }
+}
+
+// Selected State
+.rootIsSelected {
+  @include focus-border(0, $ms-color-themePrimary);
+
+  color: $detailsList-item-selected-meta-text-color;
+  background: $detailsList-item-selected-background-color;
+  border-bottom: 1px solid $ms-color-white;
+
+  .cell {
+    // Selected State Header cell
+    &.isRowHeader {
+      color: $detailsList-item-selected-text-color;
+
+      @include high-contrast {
+        color: HighlightText;
+      }
+    }
+
+    @include high-contrast {
+      background: Highlight;
+      color: HighlightText;
+      -ms-high-contrast-adjust: none;
+    }
+  }
+
+  &:before {
+    position: absolute;
+    display: block;
+    top: -1px;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    content: '';
+    border-top: 1px solid $ms-color-white;
+  }
+
+  // Selected State hover
+  &:hover {
+    background: $detailsList-item-selected-hover-background-color;
+
+    // Selected State hover meta cell
+    .cell {
+      color: $detailsList-item-selected-hover-meta-text-color;
+
+      @include high-contrast {
+        color: HighlightText;
+      }
+
+      // Selected State hover Header cell
+      &.isRowHeader {
+        color: $detailsList-item-selected-hover-text-color;
+
+        @include high-contrast {
+          color: HighlightText;
+        }
+      }
+    }
+  }
+
+  // Focus state
+  &:focus {
+    background: $detailsList-item-focus-background-color;
+
+    // Selected State hover meta cell
+    .cell {
+      color: $detailsList-item-focus-meta-text-color;
+
+      @include high-contrast {
+        color: HighlightText;
+      }
+
+      // Row header cell
+      &.isRowHeader {
+        color: $detailsList-item-focus-header-text-color;
+
+        @include high-contrast {
+          color: HighlightText;
+        }
+      }
+    }
+  }
+}
+
+.rootIsContentUnselectable {
+  user-select: none;
+  cursor: default;
+}
+
+// Default cell state
+.cell {
+  @include focus-border();
+
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: $rowVerticalPadding $rowHorizontalPadding;
+  min-height: $rowHeight;
+  vertical-align: top;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.checkCell {
+    padding: 0;
+  }
+
+  & > button {
+    max-width: 100%;
+  }
+
+  // Default header cell state
+  &.isRowHeader {
+    color: $detailsList-item-default-header-text-color;
+    font-size: $ms-font-size-m;
+  }
+
+  [data-is-focusable=true] {
+    @include focus-border(0, $ms-color-neutralSecondary);
+  }
+}
+
+
+.isPadded {
+  @include ms-padding-right($isPaddedMargin + $rowHorizontalPadding);
+
+  &.checkCell {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.isMultiline {
+  white-space: normal;
+  word-break: break-word;
+  text-overflow: clip;
+}
+
+.fields {
+  display: flex;
+  align-items: stretch;
+}
+
+.cellMeasurer .cell {
+  overflow: visible;
+  white-space: nowrap;
+}
diff --git a/packages/au1-app/src/resources/styles/components/details-list/DetailsRowCheck.scss b/packages/au1-app/src/resources/styles/components/details-list/DetailsRowCheck.scss
new file mode 100644
index 0000000..a00a376
--- /dev/null
+++ b/packages/au1-app/src/resources/styles/components/details-list/DetailsRowCheck.scss
@@ -0,0 +1,48 @@
+
+@import '../../common/common';
+
+.check {
+  @include focus-border();
+
+  display: inline-block;
+  cursor: default;
+  box-sizing: border-box;
+  vertical-align: top;
+  background: none;
+  border: none;
+  opacity: 0;
+
+  &:focus {
+    opacity: 1;
+  }
+}
+
+button.check {
+  height: 40px;
+  width: 40px;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.owner {
+  &.isSelected,
+  &.isVisible,
+  &:hover {
+    .check {
+      opacity: 1;
+    }
+  }
+
+  @include focus(true) {
+    .check {
+      opacity: 1;
+    }
+  }
+}
+
+.isDisabled {
+  visibility: hidden;
+}
diff --git a/packages/au1-app/src/routes/monday-integration/index.html b/packages/au1-app/src/routes/monday-integration/index.html
new file mode 100644
index 0000000..df6e1c5
--- /dev/null
+++ b/packages/au1-app/src/routes/monday-integration/index.html
@@ -0,0 +1,157 @@
+<template>
+  <h1>Monday Integration</h1>
+
+  <!-- In order to show items I need a code to iterate it with repeater -->
+  
+  <div class="ms-Grid">
+    <div class="ms-Grid-row">
+      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg3">
+        <div class="ms-TextField is-required">
+          <div class="ms-TextField-wrapper">
+            <label for="name" class="ms-Label">Name</label>
+            <div class="ms-TextField-fieldGroup">
+              <input type="text" id="name" class="ms-TextField-field" value.bind="name">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
+        <label class="ms-Label">Status</label>
+        <select value.bind="selectedStatus">
+          <option repeat.for="status of statuses" model.bind="status">${status}</option>
+        </select>
+      </div>        
+    </div>
+  </div>
+  <div class="ms-Grid">
+    <div class="ms-Grid-row">
+      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg3">
+        <div class="ms-TextField">
+          <div class="ms-TextField-wrapper">
+            <label for="name" class="ms-Label">Epics</label>
+            <div class="ms-TextField-fieldGroup">
+              <input type="text" id="name" class="ms-TextField-field" value.bind="epics">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
+        <label class="ms-Label">Priority</label>
+        <select value.bind="selectedPriority">
+          <option repeat.for="priority of priorities" model.bind="priority">${priority}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div class="ms-Grid">
+    <div class="ms-Grid-row">
+      <div class="ms-Grid-col ms-lg1">
+        <div class="SubmitButton">
+          <button class="ms-Button ms-Button--primary" click.delegate="add()"><span class="ms-Button-label">Add</span></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
+  <div class="ms-DetailsList">
+    <div class="ms-DetailsHeader">
+      <div role="presentation" class="ms-DetailsList-headerWrapper">
+        <div class="ms-DetailsHeader-cell is-actionable" style="width: 410px;">
+          <span class="ms-DetailsHeader-cellName">Name</span></div>
+        <div class="ms-DetailsHeader-cell is-actionable" style="width: 160px;" repeat.for="column of columns">${column.title}</div>
+      </div>
+    </div>
+    <div class="ms-DetailsList-contentWrapper">
+      <template repeat.for="item of items">
+        <div class="ms-DetailsRow">
+          <div class="ms-DetailsRow-cell" style="width: 390px;">${item.name}</div>
+          <div class="ms-DetailsRow-cell" style="width: 150px;" repeat.for="cell of item.column_values">${cell.text}</div>
+        </div>
+      </template>
+      <template if.bind="items.length === 0">
+        <div class="ms-DetailsRow">No items found.</div>
+      </template>
+    </div>
+  </div>
+
+  <!-- <div class="root-333">
+    <div class="ms-Viewport" style="min-width: 1px; min-height: 1px;">
+      <div class="ms-DetailsList is-horizontalConstrained root-337" data-automationid="DetailsList"
+        data-is-scrollable="false">
+        <div role="grid" aria-rowcount="201" aria-colcount="3" aria-readonly="true">
+          <div role="presentation" class="ms-DetailsList-headerWrapper">
+            <div role="row" class="ms-FocusZone css-227 ms-DetailsHeader root-339" data-automationid="DetailsHeader"
+              data-focuszone-id="FocusZone1099">
+              <div role="columnheader" aria-sort="none" aria-colindex="2" class="ms-DetailsHeader-cell is-actionable"
+                data-is-draggable="false" draggable="false" data-automationid="ColumnsHeaderColumn"
+                data-item-key="column1" style="width: 220px;"><span class="cellTooltip-367">
+                  <span
+                    id="header1098-column1" aria-labelledby="header1098-column1-name"
+                    class="ms-DetailsHeader-cellTitle cellTitle-365" data-is-focusable="true" aria-haspopup="false"
+                    tabindex="0">
+                    <span class="ms-DetailsHeader-cellName cellName-366">Name</span>
+                  </span>
+              </div>
+              <div aria-hidden="true" role="button" data-is-focusable="false" data-sizer-index="0"
+                class="ms-DetailsHeader-cellSizer cellSizer-346 cellSizerStart-347" tabindex="-1"></div>
+              <div role="columnheader" aria-sort="none" aria-colindex="3"
+                class="ms-DetailsHeader-cell is-actionable root-359" data-is-draggable="false" draggable="false"
+                data-automationid="ColumnsHeaderColumn" data-item-key="column2" style="width: 1244px;"><span
+                  class="cellTooltip-367"><span id="header1098-column2" aria-labelledby="header1098-column2-name"
+                    class="ms-DetailsHeader-cellTitle cellTitle-365" data-is-focusable="true" aria-haspopup="false"
+                    tabindex="-1"><span id="header1098-column2-name"
+                      class="ms-DetailsHeader-cellName cellName-366">Value</span></span></span></div>
+              <div aria-hidden="true" role="button" data-is-focusable="false" data-sizer-index="1"
+                class="ms-DetailsHeader-cellSizer cellSizer-346 cellSizerEnd-348" tabindex="-1"></div>
+            </div>
+          </div>
+          <div role="presentation" class="ms-DetailsList-contentWrapper">
+            <div class="ms-SelectionZone" role="presentation">
+              <div class="ms-FocusZone" data-focuszone-id="FocusZone1100">
+                <div role="presentation" class="ms-List">
+                  <div role="presentation" class="ms-List-surface">
+                    <div class="ms-List-page" role="presentation">
+                      <div role="presentation" class="ms-List-cell" data-list-index="0" data-automationid="ListCell">
+                        <div data-is-focusable="true" id="row1253-0" role="row"
+                          class="ms-FocusZone css-227 ms-DetailsRow is-contentUnselectable root-373"
+                          data-selection-index="0" data-selection-touch-invoke="true" data-item-index="0"
+                          aria-rowindex="2" data-automationid="DetailsRow" aria-selected="false"
+                          data-focuszone-id="FocusZone1102" tabindex="0" style="min-width: 1424px;">
+                          <div role="gridcell" aria-colindex="1" data-selection-toggle="true"
+                            class="ms-DetailsRow-cell ms-DetailsRow-cellCheck checkCell-378">
+                            <div id="row1253-0-checkbox" aria-label="select row"
+                              aria-labelledby="row1253-0-checkbox row1253-0-header" role="checkbox"
+                              class="ms-DetailsRow-check ms-Check-checkHost check-355" aria-checked="false"
+                              data-selection-toggle="true" data-automationid="DetailsRowCheck" tabindex="-1">
+                              <div class="ms-Check root-356"><i data-icon-name="CircleRing" aria-hidden="true"
+                                  class="ms-Icon root-37 css-225 ms-Check-circle circle-357"
+                                  style="font-family: FabricMDL2Icons;"></i><i data-icon-name="StatusCircleCheckmark"
+                                  aria-hidden="true" class="ms-Icon root-37 css-225 ms-Check-check check-358"
+                                  style="font-family: FabricMDL2Icons;"></i></div>
+                            </div>
+                          </div>
+                          <div class="ms-DetailsRow-fields fields-380" data-automationid="DetailsRowFields"
+                            role="presentation">
+                            <div role="gridcell" aria-readonly="true" aria-colindex="2"
+                              class="ms-DetailsRow-cell cell-376 cellUnpadded-374" data-automationid="DetailsRowCell"
+                              data-automation-key="column1" style="width: 220px;">Item 0</div>
+                            <div role="gridcell" aria-readonly="true" aria-colindex="3"
+                              class="ms-DetailsRow-cell cell-376 cellUnpadded-374" data-automationid="DetailsRowCell"
+                              data-automation-key="column2" style="width: 1244px;">0</div>
+                          </div><span role="checkbox" class="checkCover-379" aria-checked="false"
+                            data-selection-toggle="true"></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div> -->
+</template>
diff --git a/packages/au1-app/src/routes/monday-integration/index.ts b/packages/au1-app/src/routes/monday-integration/index.ts
new file mode 100644
index 0000000..74ebdc9
--- /dev/null
+++ b/packages/au1-app/src/routes/monday-integration/index.ts
@@ -0,0 +1,130 @@
+export class Index {
+  private readonly columns_ids: string =
+    '["task_status", "task_priority", "task_epic"]';
+
+  public name: string = "";
+  public selectedStatus: string = "Ready to start";
+  public statuses: string[];
+  public selectedPriority: string = "Medium";
+  public priorities: string[];
+  public epics: string;
+  public columns: [];
+  public items: [];
+
+  activate(_params: any, _routeConfig: any, _navigationInstruction: any) {
+    let query = `query {
+      boards (ids: [3870778277]) {
+        name
+        id
+        items_count
+        columns (ids: ${this.columns_ids}) {
+          title
+          settings_str
+          type
+        }
+        items {
+          name      
+            column_values (ids: ${this.columns_ids}) {
+              title
+              text
+            }     
+        }
+      }
+    }`;
+
+    this.executeQuery(query);
+  }
+
+  add() {
+    if (!this.name) {
+      alert("Please enter a name");
+      return;
+    }
+
+    const query = `mutation { create_item (board_id: 3870778277, item_name: "${this.name}", column_values: "{\\"task_status\\": \\"${this.selectedStatus}\\"}") { 
+      board {
+        name
+        id
+         items_count,
+        columns (ids: ${this.columns_ids}) {
+          title
+        }
+        items {
+          name      
+           column_values (ids: ${this.columns_ids}) {
+            title
+            text
+          }     
+        }
+      }     
+     } }`;
+
+    this.executeMutation(query);
+  }
+
+  private executeMutation(query: string) {
+    fetch("https://api.monday.com/v2", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: process.env.MONDAY_API_KEY,
+      },
+      body: JSON.stringify({
+        query: query,
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        console.log(JSON.stringify(res, null, 2));
+        this.items = res.data.create_item.board.items;
+        this.name = this.selectedStatus = this.selectedPriority = this.epics = "";
+      });
+  }
+
+  private executeQuery(query: string) {
+    fetch("https://api.monday.com/v2", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: process.env.MONDAY_API_KEY,
+      },
+      body: JSON.stringify({
+        query: query,
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        console.log(JSON.stringify(res, null, 2));
+        this.columns = res.data.boards[0].columns;
+                
+        for (let i = 0; i < res.data.boards[0].columns.length; i++) {
+          const settings: string = res.data.boards[0].columns[i].settings_str;
+          const labels: string[] = this.extractLabels(settings);
+
+          if (res.data.boards[0].columns[i].title === "Status") {
+            this.statuses = labels;
+          }
+          
+          if (res.data.boards[0].columns[i].title === "Priority") {
+            this.priorities = labels;
+          }
+        }         
+        
+        this.items = res.data.boards[0].items;
+      });
+  }
+
+  private extractLabels(settings: string): string[] {
+    if (!settings.includes('labels_positions_v2') && !settings.includes('labels')) {
+      return [];
+    }
+    const settingsObj = JSON.parse(settings);
+    const labels = Object.keys(settingsObj.labels);
+    labels.sort((a, b) => {
+      return (
+        settingsObj.labels_positions_v2[a] - settingsObj.labels_positions_v2[b]
+      );
+    });
+    return labels.map((label) => settingsObj.labels[label]);
+  }
+}
diff --git a/packages/au1-app/test/unit/app.spec.ts b/packages/au1-app/test/unit/app.spec.ts
index 875e0d5..f04cf21 100644
--- a/packages/au1-app/test/unit/app.spec.ts
+++ b/packages/au1-app/test/unit/app.spec.ts
@@ -16,7 +16,8 @@ describe('Stage App Component', () => {
   it('should render message', done => {
     component.create(bootstrap).then(() => {
       const view = component.element;
-      expect(view.textContent!.trim()).toBe('Hello World!');
+      console.log(view.textContent);
+      expect(view.textContent!.trim()).toBe('Get Started');
       done();
     }).catch(e => {
       fail(e);
diff --git a/packages/au1-app/webpack.config.js b/packages/au1-app/webpack.config.js
index ddcd735..0743813 100644
--- a/packages/au1-app/webpack.config.js
+++ b/packages/au1-app/webpack.config.js
@@ -7,6 +7,7 @@ const project = require('./aurelia_project/aurelia.json');
 const { AureliaPlugin } = require('aurelia-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
 
 // config helpers:
 const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
@@ -292,6 +293,7 @@ module.exports = ({ production }, { analyze, hmr, port, host }) => ({
      * remove those before the webpack build. In that case consider disabling the plugin, and instead use something like
      * `del` (https://www.npmjs.com/package/del), or `rimraf` (https://www.npmjs.com/package/rimraf).
      */
-    new CleanWebpackPlugin()
+    new CleanWebpackPlugin(),
+    new Dotenv()
   ]
 });
diff --git a/packages/au1-component/package.json b/packages/au1-component/package.json
index e89f31b..96c7106 100644
--- a/packages/au1-component/package.json
+++ b/packages/au1-component/package.json
@@ -38,10 +38,10 @@
     "node": ">=14.15.0"
   },
   "overrides": {
-    "chokidar": "^3.0.0",
+    "chokidar": "^3.5.3",
     "glob-stream": "^7.0.0",
-    "glob-parent": "^6.0.0",
-    "micromatch": "^4.0.0"
+    "glob-parent": "^6.0.2",
+    "micromatch": "^4.0.5"
   },
   "main": "dist/commonjs/index.js",
   "module": "dist/native-modules/index.js",
diff --git a/yarn.lock b/yarn.lock
index 72ce8a4..4a495f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2077,51 +2077,6 @@ __metadata:
   dependencies:
     "@devops-example/au1-component": ^0.1.0
     "@devops-example/fast-components": ^0.1.0
-    "@playwright/test": ^1.31.1
-    "@types/jest": ^29.4.0
-    "@types/node": ^18.14.1
-    "@types/webpack": ^5.28.0
-    "@typescript-eslint/eslint-plugin": ^5.53.0
-    "@typescript-eslint/parser": ^5.53.0
-    app-settings-loader: ^2.0.8
-    aurelia-cli: ^3.0.1
-    aurelia-loader-nodejs: ^1.1.0
-    aurelia-pal-nodejs: ^2.0.0
-    aurelia-testing: ^1.1.0
-    aurelia-webpack-plugin: ^5.0.5
-    autoprefixer: ^10.4.13
-    clean-webpack-plugin: ^4.0.0
-    copy-webpack-plugin: ^11.0.0
-    css-loader: ^6.7.3
-    cssnano: ^5.1.15
-    duplicate-package-checker-webpack-plugin: ^3.0.0
-    eslint: ^8.34.0
-    expose-loader: ^4.0.0
-    gulp: ^4.0.2
-    gulp-eslint: ^6.0.0
-    html-loader: ^4.2.0
-    html-webpack-plugin: ^5.5.0
-    jest: ^29.4.3
-    jest-cli: ^29.4.3
-    jest-transform-stub: ^2.0.0
-    json-loader: ^0.5.7
-    mini-css-extract-plugin: ^2.7.2
-    minimatch: ^5.1.6
-    postcss: ^8.4.21
-    postcss-loader: ^7.0.2
-    promise-polyfill: ^8.3.0
-    sass: ^1.58.3
-    sass-loader: ^13.2.0
-    style-loader: ^3.3.1
-    tree-kill: ^1.2.2
-    ts-jest: ^29.0.5
-    ts-loader: ^9.4.2
-    tslib: ^2.5.0
-    typescript: ^4.9.5
-    webpack: ^5.75.0
-    webpack-bundle-analyzer: ^4.8.0
-    webpack-cli: ^5.0.1
-    webpack-dev-server: ^4.11.1
   languageName: unknown
   linkType: soft
 
@@ -2305,27 +2260,249 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@eslint/eslintrc@npm:2.0.0"
+"@eslint-community/eslint-utils@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@eslint-community/eslint-utils@npm:4.2.0"
+  dependencies:
+    eslint-visitor-keys: ^3.3.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 82fdd1cc2a5d169def0e665ec790580ef708e7df9c91f20006595dc90e3bd42ec31c8976a2eeccd336286301a72e937c0ddf3ab4b7377d7014997c36333a7d22
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@eslint-community/regexpp@npm:4.4.0"
+  checksum: 2d127af0c752b80e8a782eacfe996a86925d21de92da3ffc6f9e615e701145e44a62e26bdd88bfac2cd76779c39ba8d9875a91046ec5e7e5f23cb647c247ea6a
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@eslint/eslintrc@npm:2.0.1"
   dependencies:
     ajv: ^6.12.4
     debug: ^4.3.2
-    espree: ^9.4.0
+    espree: ^9.5.0
     globals: ^13.19.0
     ignore: ^5.2.0
     import-fresh: ^3.2.1
     js-yaml: ^4.1.0
     minimatch: ^3.1.2
     strip-json-comments: ^3.1.1
-  checksum: 31119c8ca06723d80384f18f5c78e0530d8e6306ad36379868650131a8b10dd7cffd7aff79a5deb3a2e9933660823052623d268532bae9538ded53d5b19a69a6
+  checksum: 56b9192a687a450db53a7b883daf9f0f447c43b3510189cf88808a7a2467c2a302a42a50f184cc6d5a9faf3d1df890a2ef0fd0d60b751f32a3e9dfea717c6b48
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:8.36.0":
+  version: 8.36.0
+  resolution: "@eslint/js@npm:8.36.0"
+  checksum: b7d6b84b823c8c7784be390741196617565527b1f7c0977fde9455bfb57fd88f81c074a03dd878757d2c33fa29f24291e9ecbc1425710f067917324b55e1bf3a
+  languageName: node
+  linkType: hard
+
+"@fluentui/date-time-utilities@npm:^8.5.6":
+  version: 8.5.6
+  resolution: "@fluentui/date-time-utilities@npm:8.5.6"
+  dependencies:
+    "@fluentui/set-version": ^8.2.6
+    tslib: ^2.1.0
+  checksum: 98b4164b9aae9668857a84871c94c01f76cb70ad5a7d8031598494f0b6bb3606dfa0a823a99a7ffb1828250e04cbc367360fca67bbcd2b20a67620228e3c33e6
+  languageName: node
+  linkType: hard
+
+"@fluentui/dom-utilities@npm:^2.2.6":
+  version: 2.2.6
+  resolution: "@fluentui/dom-utilities@npm:2.2.6"
+  dependencies:
+    "@fluentui/set-version": ^8.2.6
+    tslib: ^2.1.0
+  checksum: 051f83e43fcfd292fd9514534ed145069e20e2e319d229778fa22801bc61996ba14b5ac03a5474bbfe161633ba88fcbc02e3a305bcf784f2fcab5f3b85eaf78b
+  languageName: node
+  linkType: hard
+
+"@fluentui/font-icons-mdl2@npm:^8.5.13":
+  version: 8.5.13
+  resolution: "@fluentui/font-icons-mdl2@npm:8.5.13"
+  dependencies:
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/style-utilities": ^8.9.6
+    "@fluentui/utilities": ^8.13.9
+    tslib: ^2.1.0
+  checksum: c45ba9dfcff7ff5f9d543189ade928d1f7b6ee3380f3707db5cd24ea46d1894a66a35e04b19f422994a926c632f83cafab45c04065ebd4b334e112d6a450aa5e
+  languageName: node
+  linkType: hard
+
+"@fluentui/foundation-legacy@npm:^8.2.33":
+  version: 8.2.33
+  resolution: "@fluentui/foundation-legacy@npm:8.2.33"
+  dependencies:
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/style-utilities": ^8.9.6
+    "@fluentui/utilities": ^8.13.9
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: a6ffaa200d3aff2469ab02cedf78590615e8186427dc70527d9047b360a0d39d0e3ee58dd8c7ffd292ed3c52629ccd47529832cab055a8e1c92f5d6e6ad98718
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.35.0":
-  version: 8.35.0
-  resolution: "@eslint/js@npm:8.35.0"
-  checksum: 6687ceff659a6d617e37823f809dc9c4b096535961a81acead27d26b1a51a4cf608a5e59d831ddd57f24f6f8bb99340a4a0e19f9c99b390fbb4b275f51ed5f5e
+"@fluentui/keyboard-key@npm:^0.4.6":
+  version: 0.4.6
+  resolution: "@fluentui/keyboard-key@npm:0.4.6"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: 375fc31bb02125ea455514eaee5a4a849366b22c718fe1199b320a1750daedc60a41e3cf3d81fd03e3f70f2e5e623de157e74906a14cecfe17834ac946c71478
+  languageName: node
+  linkType: hard
+
+"@fluentui/merge-styles@npm:^8.5.7":
+  version: 8.5.7
+  resolution: "@fluentui/merge-styles@npm:8.5.7"
+  dependencies:
+    "@fluentui/set-version": ^8.2.6
+    tslib: ^2.1.0
+  checksum: 0649eeb430ec3839de153d032ead61b46925d5cd93772cca91b84c05d91a621709a926527bcbb9f971dd53360bb4bca7a46c438fb58edeb0405416f4b0b7d7fb
+  languageName: node
+  linkType: hard
+
+"@fluentui/react-focus@npm:^8.8.19":
+  version: 8.8.19
+  resolution: "@fluentui/react-focus@npm:8.8.19"
+  dependencies:
+    "@fluentui/keyboard-key": ^0.4.6
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/style-utilities": ^8.9.6
+    "@fluentui/utilities": ^8.13.9
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: 478a94b8e926b538897bc797c4ab8863b86657ab62a4ca290e18372c0791fa4eea3e3ebefeb3e4f8e448269aba7cbc326d3ebb5fd783bc8dfb09fe6680b7f2a3
+  languageName: node
+  linkType: hard
+
+"@fluentui/react-hooks@npm:^8.6.20":
+  version: 8.6.20
+  resolution: "@fluentui/react-hooks@npm:8.6.20"
+  dependencies:
+    "@fluentui/react-window-provider": ^2.2.9
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/utilities": ^8.13.9
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: dec5459991ff68cc34e6038061cff95cbeb58917a7dae2e1a7b18698edd0f5dfe69de7340d6db59cbf750f53fb2ddca63166c12ad602266a38287d4bbb4faf39
+  languageName: node
+  linkType: hard
+
+"@fluentui/react-portal-compat-context@npm:^9.0.4":
+  version: 9.0.4
+  resolution: "@fluentui/react-portal-compat-context@npm:9.0.4"
+  dependencies:
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: 6892391b676bc7922c25c35f455b877ff27ad020c3257d86a4da5db4a3289c4d489d4e5fdf20bf264575fa454aaeb8ddf895dc43ceebe90815abd320d470153b
+  languageName: node
+  linkType: hard
+
+"@fluentui/react-window-provider@npm:^2.2.9":
+  version: 2.2.9
+  resolution: "@fluentui/react-window-provider@npm:2.2.9"
+  dependencies:
+    "@fluentui/set-version": ^8.2.6
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: c7532432f8fc2cda0acae637dc76251d7f3b62bd65db84da208720f6d134fde084862d73fb991aae31ede1e041db53d9f1390e5af531f2adfc4bb14962af3819
+  languageName: node
+  linkType: hard
+
+"@fluentui/react@npm:^8.106.7":
+  version: 8.106.7
+  resolution: "@fluentui/react@npm:8.106.7"
+  dependencies:
+    "@fluentui/date-time-utilities": ^8.5.6
+    "@fluentui/font-icons-mdl2": ^8.5.13
+    "@fluentui/foundation-legacy": ^8.2.33
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/react-focus": ^8.8.19
+    "@fluentui/react-hooks": ^8.6.20
+    "@fluentui/react-portal-compat-context": ^9.0.4
+    "@fluentui/react-window-provider": ^2.2.9
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/style-utilities": ^8.9.6
+    "@fluentui/theme": ^2.6.25
+    "@fluentui/utilities": ^8.13.9
+    "@microsoft/load-themed-styles": ^1.10.26
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    "@types/react-dom": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+    react-dom: ">=16.8.0 <19.0.0"
+  checksum: ec12f32f392617f4b9bb051734ec150fce73f50b92468aa93ca9d5b8b1da693cdd7badc66524f21a9ad77b7337b01683d09fff55a8164cb62575627f072b27b1
+  languageName: node
+  linkType: hard
+
+"@fluentui/set-version@npm:^8.2.6":
+  version: 8.2.6
+  resolution: "@fluentui/set-version@npm:8.2.6"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: 485b65137789607cbb717f3f720d179137e671e23cc49013e314bdf0076b7f5e13a5680a91fc6789124fd94d4c9c28a6ada28f99db7fcd453a197ed9eacd4edd
+  languageName: node
+  linkType: hard
+
+"@fluentui/style-utilities@npm:^8.9.6":
+  version: 8.9.6
+  resolution: "@fluentui/style-utilities@npm:8.9.6"
+  dependencies:
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/theme": ^2.6.25
+    "@fluentui/utilities": ^8.13.9
+    "@microsoft/load-themed-styles": ^1.10.26
+    tslib: ^2.1.0
+  checksum: 7b018b4cdfb5f33c6a608a19aeec1e45fbe318ce1d4822bb9aa93925f7201b7e36dc68945981c2bf482d6f1bf5cda0905a327580adf2ff46fcb84b1ceab8e595
+  languageName: node
+  linkType: hard
+
+"@fluentui/theme@npm:^2.6.25":
+  version: 2.6.25
+  resolution: "@fluentui/theme@npm:2.6.25"
+  dependencies:
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/set-version": ^8.2.6
+    "@fluentui/utilities": ^8.13.9
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: 676bb9af6eca7e3ccc633f623f80c07b238370e27cf56514579a6871c4d5da668ee8f21e8a028efc49344a26155f03be88b4905664d9ffb7082dbec3087b23b3
+  languageName: node
+  linkType: hard
+
+"@fluentui/utilities@npm:^8.13.9":
+  version: 8.13.9
+  resolution: "@fluentui/utilities@npm:8.13.9"
+  dependencies:
+    "@fluentui/dom-utilities": ^2.2.6
+    "@fluentui/merge-styles": ^8.5.7
+    "@fluentui/set-version": ^8.2.6
+    tslib: ^2.1.0
+  peerDependencies:
+    "@types/react": ">=16.8.0 <19.0.0"
+    react: ">=16.8.0 <19.0.0"
+  checksum: ad18e325d483ea91c62e1ac26d17c1b9209dfe6fcea8889e40e464107db6e54c7f152a356f66a3e752217555ba7bcfbf1714081dd68d3229948766c04cd066d0
   languageName: node
   linkType: hard
 
@@ -2381,50 +2558,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/console@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/console@npm:29.4.3"
+"@jest/console@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/console@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     chalk: ^4.0.0
-    jest-message-util: ^29.4.3
-    jest-util: ^29.4.3
+    jest-message-util: ^29.5.0
+    jest-util: ^29.5.0
     slash: ^3.0.0
-  checksum: 8d9b163febe735153b523db527742309f4d598eda22f17f04e030060329bd3da4de7420fc1f7812f7a16f08273654a7de094c4b4e8b81a99dbfc17cfb1629008
+  checksum: 9f4f4b8fabd1221361b7f2e92d4a90f5f8c2e2b29077249996ab3c8b7f765175ffee795368f8d6b5b2bb3adb32dc09319f7270c7c787b0d259e624e00e0f64a5
   languageName: node
   linkType: hard
 
-"@jest/core@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/core@npm:29.4.3"
+"@jest/core@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/core@npm:29.5.0"
   dependencies:
-    "@jest/console": ^29.4.3
-    "@jest/reporters": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/transform": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/console": ^29.5.0
+    "@jest/reporters": ^29.5.0
+    "@jest/test-result": ^29.5.0
+    "@jest/transform": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     ansi-escapes: ^4.2.1
     chalk: ^4.0.0
     ci-info: ^3.2.0
     exit: ^0.1.2
     graceful-fs: ^4.2.9
-    jest-changed-files: ^29.4.3
-    jest-config: ^29.4.3
-    jest-haste-map: ^29.4.3
-    jest-message-util: ^29.4.3
+    jest-changed-files: ^29.5.0
+    jest-config: ^29.5.0
+    jest-haste-map: ^29.5.0
+    jest-message-util: ^29.5.0
     jest-regex-util: ^29.4.3
-    jest-resolve: ^29.4.3
-    jest-resolve-dependencies: ^29.4.3
-    jest-runner: ^29.4.3
-    jest-runtime: ^29.4.3
-    jest-snapshot: ^29.4.3
-    jest-util: ^29.4.3
-    jest-validate: ^29.4.3
-    jest-watcher: ^29.4.3
+    jest-resolve: ^29.5.0
+    jest-resolve-dependencies: ^29.5.0
+    jest-runner: ^29.5.0
+    jest-runtime: ^29.5.0
+    jest-snapshot: ^29.5.0
+    jest-util: ^29.5.0
+    jest-validate: ^29.5.0
+    jest-watcher: ^29.5.0
     micromatch: ^4.0.4
-    pretty-format: ^29.4.3
+    pretty-format: ^29.5.0
     slash: ^3.0.0
     strip-ansi: ^6.0.0
   peerDependencies:
@@ -2432,19 +2609,19 @@ __metadata:
   peerDependenciesMeta:
     node-notifier:
       optional: true
-  checksum: 4aa10644d66f44f051d5dd9cdcedce27acc71216dbcc5e7adebdea458e27aefe27c78f457d7efd49f58b968c35f42de5a521590876e2013593e675120b9e6ab1
+  checksum: 9e8f5243fe82d5a57f3971e1b96f320058df7c315328a3a827263f3b17f64be10c80f4a9c1b1773628b64d2de6d607c70b5b2d5bf13e7f5ad04223e9ef6aac06
   languageName: node
   linkType: hard
 
-"@jest/environment@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/environment@npm:29.4.3"
+"@jest/environment@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/environment@npm:29.5.0"
   dependencies:
-    "@jest/fake-timers": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/fake-timers": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
-    jest-mock: ^29.4.3
-  checksum: 7c1b0cc4e84b90f8a3bbeca9bbf088882c88aee70a81b3b8e24265dcb1cbc302cd1eee3319089cf65bfd39adbaea344903c712afea106cb8da6c86088d99c5fb
+    jest-mock: ^29.5.0
+  checksum: 921de6325cd4817dec6685e5ff299b499b6379f3f9cf489b4b13588ee1f3820a0c77b49e6a087996b6de8f629f6f5251e636cba08d1bdb97d8071cc7d033c88a
   languageName: node
   linkType: hard
 
@@ -2457,51 +2634,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/expect@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/expect@npm:29.4.3"
+"@jest/expect-utils@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/expect-utils@npm:29.5.0"
   dependencies:
-    expect: ^29.4.3
-    jest-snapshot: ^29.4.3
-  checksum: 08d0d40077ec99a7491fe59d05821dbd31126cfba70875855d8a063698b7126b5f6c309c50811caacc6ae2f727c6e44f51bdcf1d6c1ea832b4f020045ef22d45
+    jest-get-type: ^29.4.3
+  checksum: c46fb677c88535cf83cf29f0a5b1f376c6a1109ddda266ad7da1a9cbc53cb441fa402dd61fc7b111ffc99603c11a9b3357ee41a1c0e035a58830bcb360871476
   languageName: node
   linkType: hard
 
-"@jest/fake-timers@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/fake-timers@npm:29.4.3"
+"@jest/expect@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/expect@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    expect: ^29.5.0
+    jest-snapshot: ^29.5.0
+  checksum: bd10e295111547e6339137107d83986ab48d46561525393834d7d2d8b2ae9d5626653f3f5e48e5c3fa742ac982e97bdf1f541b53b9e1d117a247b08e938527f6
+  languageName: node
+  linkType: hard
+
+"@jest/fake-timers@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/fake-timers@npm:29.5.0"
+  dependencies:
+    "@jest/types": ^29.5.0
     "@sinonjs/fake-timers": ^10.0.2
     "@types/node": "*"
-    jest-message-util: ^29.4.3
-    jest-mock: ^29.4.3
-    jest-util: ^29.4.3
-  checksum: adaceb9143c395cccf3d7baa0e49b7042c3092a554e8283146df19926247e34c21b5bde5688bb90e9e87b4a02e4587926c5d858ee0a38d397a63175d0a127874
+    jest-message-util: ^29.5.0
+    jest-mock: ^29.5.0
+    jest-util: ^29.5.0
+  checksum: 69930c6922341f244151ec0d27640852ec96237f730fc024da1f53143d31b43cde75d92f9d8e5937981cdce3b31416abc3a7090a0d22c2377512c4a6613244ee
   languageName: node
   linkType: hard
 
-"@jest/globals@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/globals@npm:29.4.3"
+"@jest/globals@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/globals@npm:29.5.0"
   dependencies:
-    "@jest/environment": ^29.4.3
-    "@jest/expect": ^29.4.3
-    "@jest/types": ^29.4.3
-    jest-mock: ^29.4.3
-  checksum: ea76b546ceb4aa5ce2bb3726df12f989b23150b51c9f7664790caa81b943012a657cf3a8525498af1c3518cdb387f54b816cfba1b0ddd22c7b20f03b1d7290b4
+    "@jest/environment": ^29.5.0
+    "@jest/expect": ^29.5.0
+    "@jest/types": ^29.5.0
+    jest-mock: ^29.5.0
+  checksum: b309ab8f21b571a7c672608682e84bbdd3d2b554ddf81e4e32617fec0a69094a290ab42e3c8b2c66ba891882bfb1b8b2736720ea1285b3ad646d55c2abefedd9
   languageName: node
   linkType: hard
 
-"@jest/reporters@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/reporters@npm:29.4.3"
+"@jest/reporters@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/reporters@npm:29.5.0"
   dependencies:
     "@bcoe/v8-coverage": ^0.2.3
-    "@jest/console": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/transform": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/console": ^29.5.0
+    "@jest/test-result": ^29.5.0
+    "@jest/transform": ^29.5.0
+    "@jest/types": ^29.5.0
     "@jridgewell/trace-mapping": ^0.3.15
     "@types/node": "*"
     chalk: ^4.0.0
@@ -2514,9 +2700,9 @@ __metadata:
     istanbul-lib-report: ^3.0.0
     istanbul-lib-source-maps: ^4.0.0
     istanbul-reports: ^3.1.3
-    jest-message-util: ^29.4.3
-    jest-util: ^29.4.3
-    jest-worker: ^29.4.3
+    jest-message-util: ^29.5.0
+    jest-util: ^29.5.0
+    jest-worker: ^29.5.0
     slash: ^3.0.0
     string-length: ^4.0.1
     strip-ansi: ^6.0.0
@@ -2526,7 +2712,7 @@ __metadata:
   peerDependenciesMeta:
     node-notifier:
       optional: true
-  checksum: 7aa2e429c915bd96c3334962addd69d2bbf52065725757ddde26b293f8c4420a1e8c65363cc3e1e5ec89100a5273ccd3771bec58325a2cc0d97afdc81995073a
+  checksum: 481268aac9a4a75cc49c4df1273d6b111808dec815e9d009dad717c32383ebb0cebac76e820ad1ab44e207540e1c2fe1e640d44c4f262de92ab1933e057fdeeb
   languageName: node
   linkType: hard
 
@@ -2550,50 +2736,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/test-result@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/test-result@npm:29.4.3"
+"@jest/test-result@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/test-result@npm:29.5.0"
   dependencies:
-    "@jest/console": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/console": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/istanbul-lib-coverage": ^2.0.0
     collect-v8-coverage: ^1.0.0
-  checksum: 164f102b96619ec283c2c39e208b8048e4674f75bf3c3a4f2e95048ae0f9226105add684b25f10d286d91c221625f877e2c1cfc3da46c42d7e1804da239318cb
+  checksum: 2e8ff5242227ab960c520c3ea0f6544c595cc1c42fa3873c158e9f4f685f4ec9670ec08a4af94ae3885c0005a43550a9595191ffbc27a0965df27d9d98bbf901
   languageName: node
   linkType: hard
 
-"@jest/test-sequencer@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/test-sequencer@npm:29.4.3"
+"@jest/test-sequencer@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/test-sequencer@npm:29.5.0"
   dependencies:
-    "@jest/test-result": ^29.4.3
+    "@jest/test-result": ^29.5.0
     graceful-fs: ^4.2.9
-    jest-haste-map: ^29.4.3
+    jest-haste-map: ^29.5.0
     slash: ^3.0.0
-  checksum: 145e1fa9379e5be3587bde6d585b8aee5cf4442b06926928a87e9aec7de5be91b581711d627c6ca13144d244fe05e5d248c13b366b51bedc404f9dcfbfd79e9e
+  checksum: eca34b4aeb2fda6dfb7f9f4b064c858a7adf64ec5c6091b6f4ed9d3c19549177cbadcf1c615c4c182688fa1cf085c8c55c3ca6eea40719a34554b0bf071d842e
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "@jest/transform@npm:29.4.3"
+"@jest/transform@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/transform@npm:29.5.0"
   dependencies:
     "@babel/core": ^7.11.6
-    "@jest/types": ^29.4.3
+    "@jest/types": ^29.5.0
     "@jridgewell/trace-mapping": ^0.3.15
     babel-plugin-istanbul: ^6.1.1
     chalk: ^4.0.0
     convert-source-map: ^2.0.0
     fast-json-stable-stringify: ^2.1.0
     graceful-fs: ^4.2.9
-    jest-haste-map: ^29.4.3
+    jest-haste-map: ^29.5.0
     jest-regex-util: ^29.4.3
-    jest-util: ^29.4.3
+    jest-util: ^29.5.0
     micromatch: ^4.0.4
     pirates: ^4.0.4
     slash: ^3.0.0
     write-file-atomic: ^4.0.2
-  checksum: 082d74e04044213aa7baa8de29f8383e5010034f867969c8602a2447a4ef2f484cfaf2491eba3179ce42f369f7a0af419cbd087910f7e5caf7aa5d1fe03f2ff9
+  checksum: d55d604085c157cf5112e165ff5ac1fa788873b3b31265fb4734ca59892ee24e44119964cc47eb6d178dd9512bbb6c576d1e20e51a201ff4e24d31e818a1c92d
   languageName: node
   linkType: hard
 
@@ -2611,6 +2797,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/types@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "@jest/types@npm:29.5.0"
+  dependencies:
+    "@jest/schemas": ^29.4.3
+    "@types/istanbul-lib-coverage": ^2.0.0
+    "@types/istanbul-reports": ^3.0.0
+    "@types/node": "*"
+    "@types/yargs": ^17.0.8
+    chalk: ^4.0.0
+  checksum: 1811f94b19cf8a9460a289c4f056796cfc373480e0492692a6125a553cd1a63824bd846d7bb78820b7b6f758f6dd3c2d4558293bb676d541b2fa59c70fdf9d39
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.1.0":
   version: 0.1.1
   resolution: "@jridgewell/gen-mapping@npm:0.1.1"
@@ -2842,6 +3042,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@microsoft/load-themed-styles@npm:^1.10.26":
+  version: 1.10.295
+  resolution: "@microsoft/load-themed-styles@npm:1.10.295"
+  checksum: 56e955b57fe0157aa4a32543d241171bc639256e43db6a4a8a687fffb994ccdbc62ec39bca5c722d40a579cf173bd55fb3de8123b7b09ae937fc11e498558a1f
+  languageName: node
+  linkType: hard
+
+"@n8d/htwoo-core@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@n8d/htwoo-core@npm:1.3.0"
+  checksum: bb97ed87ce1159d96c33a11061880e19d542a067916d4758bbfcf254d4d446099d08b8901da5ca61ff4a2e81479c508391c777dcba4ac187f08b02ca0192ab68
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -2889,19 +3103,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.31.1":
-  version: 1.31.1
-  resolution: "@playwright/test@npm:1.31.1"
+"@playwright/test@npm:^1.31.2":
+  version: 1.31.2
+  resolution: "@playwright/test@npm:1.31.2"
   dependencies:
     "@types/node": "*"
     fsevents: 2.3.2
-    playwright-core: 1.31.1
+    playwright-core: 1.31.2
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 9e3364034c1390658d05f7dc0b0bbbae1464267331b738f986f37bef2630d7689446dabef8de0aa1b5acbdf3f5654114e07b8b2e3828917e1c0a6664eb37f145
+  checksum: 5459ee0ce15b9a54337f4c26e2ee2d29c11e67e6207c167158eb180a4bea6659c988a2897f51dbebf591fc879f0d81f417e70936b9d8a001448c957939882588
   languageName: node
   linkType: hard
 
@@ -3180,7 +3394,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/is-ci@npm:^3, @types/is-ci@npm:^3.0.0":
+"@types/is-ci@npm:^3.0.0":
   version: 3.0.0
   resolution: "@types/is-ci@npm:3.0.0"
   dependencies:
@@ -3214,13 +3428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^29.4.0":
-  version: 29.4.0
-  resolution: "@types/jest@npm:29.4.0"
+"@types/jest@npm:^29.4.4":
+  version: 29.4.4
+  resolution: "@types/jest@npm:29.4.4"
   dependencies:
     expect: ^29.0.0
     pretty-format: ^29.0.0
-  checksum: 23760282362a252e6690314584d83a47512d4cd61663e957ed3398ecf98195fe931c45606ee2f9def12f8ed7d8aa102d492ec42d26facdaf8b78094a31e6568e
+  checksum: 754c21d996c3457c761e55c4076a2dd14d82e6290c3f57122db17aa07ef59c12af7df50a82a06845ef9ba1fbf75bb024a1fed68426514618856bda7fb90eb773
   languageName: node
   linkType: hard
 
@@ -3268,7 +3482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^18.14.1":
+"@types/node@npm:*":
   version: 18.14.2
   resolution: "@types/node@npm:18.14.2"
   checksum: 53c07e721f6ae33de71306f6a0b75dae6066a4f55bd5484c93bd59ff25f0c5f004ceafeef509a4d0cb9e24a247efc34d50489bcc1b05a53ecc68e2fc088e65cb
@@ -3289,6 +3503,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.15.3":
+  version: 18.15.3
+  resolution: "@types/node@npm:18.15.3"
+  checksum: 31b1d92475a82c30de29aa6c0771b18a276552d191283b4423ba2d61b3f01159bf0d02576c0b7cc834b043997893800db6bb47f246083ed85aa45e79c80875d7
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.1
   resolution: "@types/normalize-package-data@npm:2.4.1"
@@ -3455,18 +3676,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.53.0"
+"@typescript-eslint/eslint-plugin@npm:^5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.53.0
-    "@typescript-eslint/type-utils": 5.53.0
-    "@typescript-eslint/utils": 5.53.0
+    "@eslint-community/regexpp": ^4.4.0
+    "@typescript-eslint/scope-manager": 5.55.0
+    "@typescript-eslint/type-utils": 5.55.0
+    "@typescript-eslint/utils": 5.55.0
     debug: ^4.3.4
     grapheme-splitter: ^1.0.4
     ignore: ^5.2.0
     natural-compare-lite: ^1.4.0
-    regexpp: ^3.2.0
     semver: ^7.3.7
     tsutils: ^3.21.0
   peerDependencies:
@@ -3475,43 +3696,43 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 12dffe65969d8e5248c86a700fe46a737e55ecafb276933e747b4731eab6266fe55e2d43a34b8b340179fe248e127d861cd016a7614b1b9804cd0687c99616d1
+  checksum: e3239ec6016eeb73b8b4d8310581978e28b8d3378140a8eb70bd8e33ffd332266020c19d493e0ccae4edfd4abd6097608718c50308fe6288f4ffeb8e4784efd9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/parser@npm:5.53.0"
+"@typescript-eslint/parser@npm:^5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/parser@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.53.0
-    "@typescript-eslint/types": 5.53.0
-    "@typescript-eslint/typescript-estree": 5.53.0
+    "@typescript-eslint/scope-manager": 5.55.0
+    "@typescript-eslint/types": 5.55.0
+    "@typescript-eslint/typescript-estree": 5.55.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 979e5d63793a9e64998b1f956ba0f00f8a2674db3a664fafce7b2433323f5248bd776af8305e2419d73a9d94c55176fee099abc5c153b4cc52e5765c725c1edd
+  checksum: 48a20dc7e67960b5168b77bfb9d11d053a21d57bb83cf7b59f750191cbca5eea3b4636a8e6e75cc0aca5a84cdef91fed5440934fc2935f8c6fa71630a253a50c
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.53.0"
+"@typescript-eslint/scope-manager@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/types": 5.53.0
-    "@typescript-eslint/visitor-keys": 5.53.0
-  checksum: 51f31dc01e95908611f402441f58404da80a338c0237b2b82f4a7b0b2e8868c4bfe8f7cf44b2567dd56533de609156a5d4ac54bb1f9f09c7014b99428aef2543
+    "@typescript-eslint/types": 5.55.0
+    "@typescript-eslint/visitor-keys": 5.55.0
+  checksum: f253db88f69a29e4abe2f567d0a611cc3e7fb1a911a2cc54a2f6baf16e3de4d1883b3f8e45ee61b3db9fa5543dda0fd7b608de9d28ba6173ab49bfd17ff90cad
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/type-utils@npm:5.53.0"
+"@typescript-eslint/type-utils@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/type-utils@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.53.0
-    "@typescript-eslint/utils": 5.53.0
+    "@typescript-eslint/typescript-estree": 5.55.0
+    "@typescript-eslint/utils": 5.55.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -3519,23 +3740,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 52c40967c5fabd58c2ae8bf519ef89e4feb511e4df630aeaeac8335661a79b6b3a32d30a61a5f1d8acc703f21c4d90751a5d41cda1b35d08867524da11bc2e1d
+  checksum: 5c60d441355b51f96b596324068c10605c74abb46748c0bbc6d8f7f2ea40acb6b4bda3b537105fa189172324c56d18bd88e7102e67f99f8c03bc05c6d0e2023d
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/types@npm:5.53.0"
-  checksum: b0eaf23de4ab13697d4d2095838c959a3f410c30f0d19091e5ca08e62320c3cc3c72bcb631823fb6a4fbb31db0a059e386a0801244930d0a88a6a698e5f46548
+"@typescript-eslint/types@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/types@npm:5.55.0"
+  checksum: 7d851f09a2106514d3a9c7164d34758f30abfe554e3c7a02be75cdc7e16644e23ca32840a8f39a0321bc509927fb4d98ce91b22b21e8544ac56cef33b815a864
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.53.0"
+"@typescript-eslint/typescript-estree@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/types": 5.53.0
-    "@typescript-eslint/visitor-keys": 5.53.0
+    "@typescript-eslint/types": 5.55.0
+    "@typescript-eslint/visitor-keys": 5.55.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -3544,35 +3765,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 6e119c8e4167c8495d728c5556a834545a9c064918dd5e7b79b0d836726f4f8e2a0297b0ac82bf2b71f1e5427552217d0b59d8fb1406fd79bd3bf91b75dca873
+  checksum: d24a11aee3d01067018d99804f420aecb8af88e43bf170d5d14f6480bd378c0a81ce49a37f5d6c36e5f0f319e3fa8b099720f295f2767338be1a4f7e9a5323e1
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/utils@npm:5.53.0"
+"@typescript-eslint/utils@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/utils@npm:5.55.0"
   dependencies:
+    "@eslint-community/eslint-utils": ^4.2.0
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.53.0
-    "@typescript-eslint/types": 5.53.0
-    "@typescript-eslint/typescript-estree": 5.53.0
+    "@typescript-eslint/scope-manager": 5.55.0
+    "@typescript-eslint/types": 5.55.0
+    "@typescript-eslint/typescript-estree": 5.55.0
     eslint-scope: ^5.1.1
-    eslint-utils: ^3.0.0
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 18e6bac14ae853385a74123759850bca367904723e170c37416fc014673eb714afb6bb090367bff61494a8387e941b6af65ee5f4f845f7177fabb4df85e01643
+  checksum: 368cfc3fb9d6af6901e739e2e41c3f7f1c1244576607445f4f59d95eccb237f73e1a75e7f0816ec9a32a0f1ec6bb4a3602a99e17e70fe184e62f7c69dcbe4b8d
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.53.0":
-  version: 5.53.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.53.0"
+"@typescript-eslint/visitor-keys@npm:5.55.0":
+  version: 5.55.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.55.0"
   dependencies:
-    "@typescript-eslint/types": 5.53.0
+    "@typescript-eslint/types": 5.55.0
     eslint-visitor-keys: ^3.3.0
-  checksum: 090695883c15364c6f401e97f56b13db0f31c1114f3bd22562bd41734864d27f6a3c80de33957e9dedab2d5f94b0f4480ba3fde1d4574e74dca4593917b7b54a
+  checksum: 0b24c72dff99dd2cf41c19d20067f8ab20a38aa2e82c79c5530bec7cf651031e95c80702fc21c813c9b94e5f3d4cd210f13967b2966ef38abe548cb5f05848a3
   languageName: node
   linkType: hard
 
@@ -4662,7 +4883,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aurelia-loader@npm:^1.0.0":
+"aurelia-loader@npm:^1.0.0, aurelia-loader@npm:^1.0.2":
   version: 1.0.2
   resolution: "aurelia-loader@npm:1.0.2"
   dependencies:
@@ -4686,7 +4907,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aurelia-metadata@npm:^1.0.0, aurelia-metadata@npm:^1.0.2, aurelia-metadata@npm:^1.0.4":
+"aurelia-metadata@npm:^1.0.0, aurelia-metadata@npm:^1.0.2, aurelia-metadata@npm:^1.0.4, aurelia-metadata@npm:^1.0.7":
   version: 1.0.7
   resolution: "aurelia-metadata@npm:1.0.7"
   dependencies:
@@ -4887,12 +5108,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.4.13":
-  version: 10.4.13
-  resolution: "autoprefixer@npm:10.4.13"
+"autoprefixer@npm:^10.4.14":
+  version: 10.4.14
+  resolution: "autoprefixer@npm:10.4.14"
   dependencies:
-    browserslist: ^4.21.4
-    caniuse-lite: ^1.0.30001426
+    browserslist: ^4.21.5
+    caniuse-lite: ^1.0.30001464
     fraction.js: ^4.2.0
     normalize-range: ^0.1.2
     picocolors: ^1.0.0
@@ -4901,7 +5122,7 @@ __metadata:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: dcb1cb7ae96a3363d65d82e52f9a0a7d8c982256f6fd032d7e1ec311f099c23acfebfd517ff8e96bf93f716a66c4ea2b80c60aa19efd2f474ce434bd75ef7b79
+  checksum: e9f18e664a4e4a54a8f4ec5f6b49ed228ec45afaa76efcae361c93721795dc5ab644f36d2fdfc0dea446b02a8067b9372f91542ea431994399e972781ed46d95
   languageName: node
   linkType: hard
 
@@ -4926,20 +5147,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-jest@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "babel-jest@npm:29.4.3"
+"babel-jest@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "babel-jest@npm:29.5.0"
   dependencies:
-    "@jest/transform": ^29.4.3
+    "@jest/transform": ^29.5.0
     "@types/babel__core": ^7.1.14
     babel-plugin-istanbul: ^6.1.1
-    babel-preset-jest: ^29.4.3
+    babel-preset-jest: ^29.5.0
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
     slash: ^3.0.0
   peerDependencies:
     "@babel/core": ^7.8.0
-  checksum: a1a95937adb5e717dbffc2eb9e583fa6d26c7e5d5b07bb492a2d7f68631510a363e9ff097eafb642ad642dfac9dc2b13872b584f680e166a4f0922c98ea95853
+  checksum: eafb6d37deb71f0c80bf3c80215aa46732153e5e8bcd73f6ff47d92e5c0c98c8f7f75995d0efec6289c371edad3693cd8fa2367b0661c4deb71a3a7117267ede
   languageName: node
   linkType: hard
 
@@ -4963,15 +5184,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-jest-hoist@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "babel-plugin-jest-hoist@npm:29.4.3"
+"babel-plugin-jest-hoist@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "babel-plugin-jest-hoist@npm:29.5.0"
   dependencies:
     "@babel/template": ^7.3.3
     "@babel/types": ^7.3.3
     "@types/babel__core": ^7.1.14
     "@types/babel__traverse": ^7.0.6
-  checksum: c8702a6db6b30ec39dfb9f8e72b501c13895231ed80b15ed2648448f9f0c7b7cc4b1529beac31802ae655f63479a05110ca612815aa25fb1b0e6c874e1589137
+  checksum: 099b5254073b6bc985b6d2d045ad26fb8ed30ff8ae6404c4fe8ee7cd0e98a820f69e3dfb871c7c65aae0f4b65af77046244c07bb92d49ef9005c90eedf681539
   languageName: node
   linkType: hard
 
@@ -5033,15 +5254,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "babel-preset-jest@npm:29.4.3"
+"babel-preset-jest@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "babel-preset-jest@npm:29.5.0"
   dependencies:
-    babel-plugin-jest-hoist: ^29.4.3
+    babel-plugin-jest-hoist: ^29.5.0
     babel-preset-current-node-syntax: ^1.0.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: a091721861ea2f8d969ace8fe06570cff8f2e847dbc6e4800abacbe63f72131abde615ce0a3b6648472c97e55a5be7f8bf7ae381e2b194ad2fa1737096febcf5
+  checksum: 5566ca2762766c9319b4973d018d2fa08c0fcf6415c72cc54f4c8e7199e851ea8f5e6c6730f03ed7ed44fc8beefa959dd15911f2647dee47c615ff4faeddb1ad
   languageName: node
   linkType: hard
 
@@ -5756,13 +5977,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001426, caniuse-lite@npm:^1.0.30001449":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001449":
   version: 1.0.30001457
   resolution: "caniuse-lite@npm:1.0.30001457"
   checksum: f311a7c5098681962402a86a0a367014ee91c3135395ee68bbfaf45caf0e36d581e42d7c5b1526ce99484a228e6cf5cf0e400678292c65f5a21512a3fc7a5fb6
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001464":
+  version: 1.0.30001466
+  resolution: "caniuse-lite@npm:1.0.30001466"
+  checksum: d81d0801f72162ebb7edb222cb48702f351e1a2d6acc9f340913f5b07e28c2105d1d2de9f0633c9b89e1aa1cd14f5d9154e270bf7b61296a7209745b32bdb01c
+  languageName: node
+  linkType: hard
+
 "caseless@npm:~0.12.0":
   version: 0.12.0
   resolution: "caseless@npm:0.12.0"
@@ -6592,7 +6820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1":
+"cosmiconfig@npm:^7.0.1":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
   dependencies:
@@ -6920,9 +7148,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:^12.7.0":
-  version: 12.7.0
-  resolution: "cypress@npm:12.7.0"
+"cypress@npm:^12.8.1":
+  version: 12.8.1
+  resolution: "cypress@npm:12.8.1"
   dependencies:
     "@cypress/request": ^2.88.10
     "@cypress/xvfb": ^1.2.4
@@ -6968,7 +7196,7 @@ __metadata:
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: a9489f7f254dcee1b8a374d14d175c8f8681a3388e4c02181e0486f064f4de59bfc79dec1f401605332d3a5869bf2ba06b3a1653a5c287e447810d756d470078
+  checksum: a229f2b3ff20b1b533f6d4670303596aef596a394db77ea8eafe2fa8f175b79b9d48ba66262513fa806076be5c857e159539f6d8fd9acf4df9936a2fa649bf1e
   languageName: node
   linkType: hard
 
@@ -7515,6 +7743,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dot-env@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "dot-env@npm:0.0.1"
+  checksum: d991d0b06683734a768e18913c7575ebe7e15d0857bcee3d7a99efe24c240c42d6456c3ea8c603543cbf24590692d9584919e3dccc4001bf924d0517d1e31170
+  languageName: node
+  linkType: hard
+
 "dot-prop@npm:^5.1.0":
   version: 5.3.0
   resolution: "dot-prop@npm:5.3.0"
@@ -7524,6 +7759,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv-defaults@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "dotenv-defaults@npm:2.0.2"
+  dependencies:
+    dotenv: ^8.2.0
+  checksum: c005960bd048e2189c4799e729c41f362e415e6e0b54313d3f31e853a84b049bf770b25cb21c112c2805bb13a8376edc9de451fb514abf8546392d327c27f6e5
+  languageName: node
+  linkType: hard
+
+"dotenv-webpack@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "dotenv-webpack@npm:8.0.1"
+  dependencies:
+    dotenv-defaults: ^2.0.2
+  peerDependencies:
+    webpack: ^4 || ^5
+  checksum: ee73eda78df90bcf7446763dfe5e518a2054ed6222783856912d2c6a255fdfc041854e125e036ff2603b06fb44f5234713fad5feecb1e66a54fe78a35a98fb87
+  languageName: node
+  linkType: hard
+
+"dotenv@npm:^8.2.0":
+  version: 8.6.0
+  resolution: "dotenv@npm:8.6.0"
+  checksum: 38e902c80b0666ab59e9310a3d24ed237029a7ce34d976796349765ac96b8d769f6df19090f1f471b77a25ca391971efde8a1ea63bb83111bd8bec8e5cc9b2cd
+  languageName: node
+  linkType: hard
+
 "duplexer2@npm:^0.1.2, duplexer2@npm:~0.1.0, duplexer2@npm:~0.1.2":
   version: 0.1.4
   resolution: "duplexer2@npm:0.1.4"
@@ -8251,17 +8513,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-utils@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "eslint-utils@npm:3.0.0"
-  dependencies:
-    eslint-visitor-keys: ^2.0.0
-  peerDependencies:
-    eslint: ">=5"
-  checksum: 0668fe02f5adab2e5a367eee5089f4c39033af20499df88fe4e6aba2015c20720404d8c3d6349b6f716b08fdf91b9da4e5d5481f265049278099c4c836ccb619
-  languageName: node
-  linkType: hard
-
 "eslint-visitor-keys@npm:^1.1.0":
   version: 1.3.0
   resolution: "eslint-visitor-keys@npm:1.3.0"
@@ -8269,13 +8520,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "eslint-visitor-keys@npm:2.1.0"
-  checksum: e3081d7dd2611a35f0388bbdc2f5da60b3a3c5b8b6e928daffff7391146b434d691577aa95064c8b7faad0b8a680266bcda0a42439c18c717b80e6718d7e267d
-  languageName: node
-  linkType: hard
-
 "eslint-visitor-keys@npm:^3.3.0":
   version: 3.3.0
   resolution: "eslint-visitor-keys@npm:3.3.0"
@@ -8330,12 +8574,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.34.0":
-  version: 8.35.0
-  resolution: "eslint@npm:8.35.0"
+"eslint@npm:^8.36.0":
+  version: 8.36.0
+  resolution: "eslint@npm:8.36.0"
   dependencies:
-    "@eslint/eslintrc": ^2.0.0
-    "@eslint/js": 8.35.0
+    "@eslint-community/eslint-utils": ^4.2.0
+    "@eslint-community/regexpp": ^4.4.0
+    "@eslint/eslintrc": ^2.0.1
+    "@eslint/js": 8.36.0
     "@humanwhocodes/config-array": ^0.11.8
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
@@ -8346,9 +8592,8 @@ __metadata:
     doctrine: ^3.0.0
     escape-string-regexp: ^4.0.0
     eslint-scope: ^7.1.1
-    eslint-utils: ^3.0.0
     eslint-visitor-keys: ^3.3.0
-    espree: ^9.4.0
+    espree: ^9.5.0
     esquery: ^1.4.2
     esutils: ^2.0.2
     fast-deep-equal: ^3.1.3
@@ -8370,13 +8615,12 @@ __metadata:
     minimatch: ^3.1.2
     natural-compare: ^1.4.0
     optionator: ^0.9.1
-    regexpp: ^3.2.0
     strip-ansi: ^6.0.1
     strip-json-comments: ^3.1.0
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 6212173691d90b1bc94dd3d640e1f210374b30c3905fc0a15e501cf71c6ca52aa3d80ea7a9a245adaaed26d6019169e01fb6881b3f2885b188d37069c749308c
+  checksum: e9a961fc3b3de5cff5a1cb2c92eeffaa7e155a715489e30b3e1e76f186bd1255e0481e09564f2094733c0b1dbd3453499fb72ae7c043c83156e11e6d965b2304
   languageName: node
   linkType: hard
 
@@ -8391,14 +8635,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^9.4.0":
-  version: 9.4.1
-  resolution: "espree@npm:9.4.1"
+"espree@npm:^9.5.0":
+  version: 9.5.0
+  resolution: "espree@npm:9.5.0"
   dependencies:
     acorn: ^8.8.0
     acorn-jsx: ^5.3.2
     eslint-visitor-keys: ^3.3.0
-  checksum: 4d266b0cf81c7dfe69e542c7df0f246e78d29f5b04dda36e514eb4c7af117ee6cfbd3280e560571ed82ff6c9c3f0003c05b82583fc7a94006db7497c4fe4270e
+  checksum: a7f110aefb6407e0d3237aa635ab3cea87106ae63748dd23c67031afccc640d04c4209fca2daf16e2233c82efb505faead0fb84097478fd9cc6e8f8dd80bf99d
   languageName: node
   linkType: hard
 
@@ -8531,9 +8775,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "execa@npm:7.0.0"
+"execa@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "execa@npm:7.1.1"
   dependencies:
     cross-spawn: ^7.0.3
     get-stream: ^6.0.1
@@ -8544,7 +8788,7 @@ __metadata:
     onetime: ^6.0.0
     signal-exit: ^3.0.7
     strip-final-newline: ^3.0.0
-  checksum: be7c7b6d1e5473f628e46888b0cf8279da483c1a6000dd494a2059cc26591ded57ba46be1c9bdde1ec895e7eb8b18911174aba425cd971d41d140a9405da9a02
+  checksum: 21fa46fc69314ace4068cf820142bdde5b643a5d89831c2c9349479c1555bff137a291b8e749e7efca36535e4e0a8c772c11008ca2e84d2cbd6ca141a3c8f937
   languageName: node
   linkType: hard
 
@@ -8595,7 +8839,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:^29.0.0, expect@npm:^29.4.3":
+"expect@npm:^29.0.0":
   version: 29.4.3
   resolution: "expect@npm:29.4.3"
   dependencies:
@@ -8608,12 +8852,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expose-loader@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "expose-loader@npm:4.0.0"
+"expect@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "expect@npm:29.5.0"
+  dependencies:
+    "@jest/expect-utils": ^29.5.0
+    jest-get-type: ^29.4.3
+    jest-matcher-utils: ^29.5.0
+    jest-message-util: ^29.5.0
+    jest-util: ^29.5.0
+  checksum: 58f70b38693df6e5c6892db1bcd050f0e518d6f785175dc53917d4fa6a7359a048e5690e19ddcb96b65c4493881dd89a3dabdab1a84dfa55c10cdbdabf37b2d7
+  languageName: node
+  linkType: hard
+
+"expose-loader@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "expose-loader@npm:4.1.0"
   peerDependencies:
     webpack: ^5.0.0
-  checksum: a674397dfb93e961aade42e09c78e28c63314f5050231e3b5ecc48a0a2d8aebc70327d3bbde5a9e4e0c28a3e02d18d2f8c0de844025f696d00964707611224c1
+  checksum: 2e5f6b85302fdaadeed9c170f2bfa063faa61921f4bd2f1a032e43c5c097e14eea225a59dd7349155ff5c4322193b20d21ed5ec5fc3554f75121b299d2d6f828
   languageName: node
   linkType: hard
 
@@ -9178,24 +9435,38 @@ __metadata:
     "@commitlint/config-conventional": ^17.4.4
     "@commitlint/config-lerna-scopes": ^17.4.2
     "@cypress/browserify-preprocessor": ^3.0.2
+    "@fluentui/react": ^8.106.7
     "@manypkg/cli": ^0.20.0
     "@microsoft/fast-components": ^2.30.6
     "@microsoft/fast-element": ^1.11.0
     "@microsoft/fast-foundation": ^2.47.1-0
     "@microsoft/fast-web-utilities": ^6.0.0
+    "@n8d/htwoo-core": ^1.3.0
+    "@playwright/test": ^1.31.2
     "@types/copyfiles": ^2.4.1
-    "@types/is-ci": ^3
+    "@types/is-ci": ^3.0.0
+    "@types/jest": ^29.4.4
+    "@types/node": ^18.15.3
+    "@types/webpack": ^5.28.0
+    "@typescript-eslint/eslint-plugin": ^5.55.0
+    "@typescript-eslint/parser": ^5.55.0
+    app-settings-loader: ^2.0.8
     aurelia-binding: ^2.5.4
     aurelia-bootstrapper: ^2.4.0
+    aurelia-cli: ^3.0.1
     aurelia-dependency-injection: ^1.5.2
     aurelia-event-aggregator: ^1.0.3
     aurelia-framework: ^1.4.1
     aurelia-history-browser: ^1.4.0
     aurelia-hot-module-reload: ^0.3.0
+    aurelia-loader: ^1.0.2
+    aurelia-loader-nodejs: ^1.1.0
     aurelia-loader-webpack: ^2.2.5
     aurelia-logging: ^1.5.2
     aurelia-logging-console: ^1.1.1
+    aurelia-metadata: ^1.0.7
     aurelia-pal: ^1.8.2
+    aurelia-pal-nodejs: ^2.0.0
     aurelia-path: ^1.1.7
     aurelia-router: ^1.7.1
     aurelia-task-queue: ^1.3.3
@@ -9203,27 +9474,56 @@ __metadata:
     aurelia-templating-binding: ^1.6.0
     aurelia-templating-resources: ^1.14.3
     aurelia-templating-router: ^1.5.0
+    aurelia-testing: ^1.1.0
     aurelia-typed-observable-plugin: ^0.5.1
     aurelia-validation: 2.0.0-rc1
     aurelia-webpack-plugin: ^5.0.5
+    autoprefixer: ^10.4.14
     clean-webpack-plugin: ^4.0.0
     concurrently: ^7.6.0
+    copy-webpack-plugin: ^11.0.0
     copyfiles: ^2.4.1
-    cypress: ^12.7.0
+    css-loader: ^6.7.3
+    cssnano: ^5.1.15
+    cypress: ^12.8.1
     cypress-visual-regression: ^2.1.1
-    execa: ^7.0.0
+    dot-env: ^0.0.1
+    dotenv-webpack: ^8.0.1
+    duplicate-package-checker-webpack-plugin: ^3.0.0
+    eslint: ^8.36.0
+    execa: ^7.1.1
+    expose-loader: ^4.1.0
+    gulp: ^4.0.2
+    gulp-eslint: ^6.0.0
+    html-loader: ^4.2.0
+    html-webpack-plugin: ^5.5.0
     husky: ^8.0.3
     is-ci: ^3.0.1
+    jest: ^29.5.0
+    jest-cli: ^29.5.0
+    jest-transform-stub: ^2.0.0
+    json-loader: ^0.5.7
+    mini-css-extract-plugin: ^2.7.4
+    minimatch: ^5.1.6
     office-ui-fabric-core: ^11.1.0
-    resolve-typescript-plugin: ^2.0.0
+    postcss: ^8.4.21
+    postcss-loader: ^7.1.0
+    promise-polyfill: ^8.3.0
+    resolve-typescript-plugin: ^2.0.1
+    sass: ^1.59.3
+    sass-loader: ^13.2.0
     source-map-loader: ^4.0.1
+    style-loader: ^3.3.2
+    tree-kill: ^1.2.2
+    ts-jest: ^29.0.5
     ts-loader: ^9.4.2
     tslib: ^2.5.0
     turbo: ^1.8.3
     typescript: ^4.9.5
-    webpack: ^5.75.0
+    webpack: ^5.76.2
+    webpack-bundle-analyzer: ^4.8.0
     webpack-cli: ^5.0.1
-    webpack-dev-server: ^4.11.1
+    webpack-dev-server: ^4.12.0
   languageName: unknown
   linkType: soft
 
@@ -11274,57 +11574,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-changed-files@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-changed-files@npm:29.4.3"
+"jest-changed-files@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-changed-files@npm:29.5.0"
   dependencies:
     execa: ^5.0.0
     p-limit: ^3.1.0
-  checksum: 9a70bd8e92b37e18ad26d8bea97c516f41119fb7046b4255a13c76d557b0e54fa0629726de5a093fadfd6a0a08ce45da65a57086664d505b8db4b3133133e141
+  checksum: a67a7cb3c11f8f92bd1b7c79e84f724cbd11a9ad51f3cdadafe3ce7ee3c79ee50dbea128f920f5fddc807e9e4e83f5462143094391feedd959a77dd20ab96cf3
   languageName: node
   linkType: hard
 
-"jest-circus@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-circus@npm:29.4.3"
+"jest-circus@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-circus@npm:29.5.0"
   dependencies:
-    "@jest/environment": ^29.4.3
-    "@jest/expect": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/environment": ^29.5.0
+    "@jest/expect": ^29.5.0
+    "@jest/test-result": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     chalk: ^4.0.0
     co: ^4.6.0
     dedent: ^0.7.0
     is-generator-fn: ^2.0.0
-    jest-each: ^29.4.3
-    jest-matcher-utils: ^29.4.3
-    jest-message-util: ^29.4.3
-    jest-runtime: ^29.4.3
-    jest-snapshot: ^29.4.3
-    jest-util: ^29.4.3
+    jest-each: ^29.5.0
+    jest-matcher-utils: ^29.5.0
+    jest-message-util: ^29.5.0
+    jest-runtime: ^29.5.0
+    jest-snapshot: ^29.5.0
+    jest-util: ^29.5.0
     p-limit: ^3.1.0
-    pretty-format: ^29.4.3
+    pretty-format: ^29.5.0
+    pure-rand: ^6.0.0
     slash: ^3.0.0
     stack-utils: ^2.0.3
-  checksum: 2739bef9c888743b49ff3fe303131381618e5d2f250f613a91240d9c86e19e6874fc904cbd8bcb02ec9ec59a84e5dae4ffec929f0c6171e87ddbc05508a137f4
+  checksum: 44ff5d06acedae6de6c866e20e3b61f83e29ab94cf9f960826e7e667de49c12dd9ab9dffd7fa3b7d1f9688a8b5bfb1ebebadbea69d9ed0d3f66af4a0ff8c2b27
   languageName: node
   linkType: hard
 
-"jest-cli@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-cli@npm:29.4.3"
+"jest-cli@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-cli@npm:29.5.0"
   dependencies:
-    "@jest/core": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/core": ^29.5.0
+    "@jest/test-result": ^29.5.0
+    "@jest/types": ^29.5.0
     chalk: ^4.0.0
     exit: ^0.1.2
     graceful-fs: ^4.2.9
     import-local: ^3.0.2
-    jest-config: ^29.4.3
-    jest-util: ^29.4.3
-    jest-validate: ^29.4.3
+    jest-config: ^29.5.0
+    jest-util: ^29.5.0
+    jest-validate: ^29.5.0
     prompts: ^2.0.1
     yargs: ^17.3.1
   peerDependencies:
@@ -11334,34 +11635,34 @@ __metadata:
       optional: true
   bin:
     jest: bin/jest.js
-  checksum: f4c9f6d76cde2c60a4169acbebb3f862728be03bcf3fe0077d2e55da7f9f3c3e9483cfa6e936832d35eabf96ee5ebf0300c4b0bd43cffff099801793466bfdd8
+  checksum: 39897bbbc0f0d8a6b975ab12fd13887eaa28d92e3dee9e0173a5cb913ae8cc2ae46e090d38c6d723e84d9d6724429cd08685b4e505fa447d31ca615630c7dbba
   languageName: node
   linkType: hard
 
-"jest-config@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-config@npm:29.4.3"
+"jest-config@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-config@npm:29.5.0"
   dependencies:
     "@babel/core": ^7.11.6
-    "@jest/test-sequencer": ^29.4.3
-    "@jest/types": ^29.4.3
-    babel-jest: ^29.4.3
+    "@jest/test-sequencer": ^29.5.0
+    "@jest/types": ^29.5.0
+    babel-jest: ^29.5.0
     chalk: ^4.0.0
     ci-info: ^3.2.0
     deepmerge: ^4.2.2
     glob: ^7.1.3
     graceful-fs: ^4.2.9
-    jest-circus: ^29.4.3
-    jest-environment-node: ^29.4.3
+    jest-circus: ^29.5.0
+    jest-environment-node: ^29.5.0
     jest-get-type: ^29.4.3
     jest-regex-util: ^29.4.3
-    jest-resolve: ^29.4.3
-    jest-runner: ^29.4.3
-    jest-util: ^29.4.3
-    jest-validate: ^29.4.3
+    jest-resolve: ^29.5.0
+    jest-runner: ^29.5.0
+    jest-util: ^29.5.0
+    jest-validate: ^29.5.0
     micromatch: ^4.0.4
     parse-json: ^5.2.0
-    pretty-format: ^29.4.3
+    pretty-format: ^29.5.0
     slash: ^3.0.0
     strip-json-comments: ^3.1.1
   peerDependencies:
@@ -11372,7 +11673,7 @@ __metadata:
       optional: true
     ts-node:
       optional: true
-  checksum: 92f9a9c6850b18682cb01892774a33967472af23a5844438d8c68077d5f2a29b15b665e4e4db7de3d74002a6dca158cd5b2cb9f5debfd2cce5e1aee6c74e3873
+  checksum: c37c4dab964c54ab293d4e302d40b09687037ac9d00b88348ec42366970747feeaf265e12e3750cd3660b40c518d4031335eda11ac10b70b10e60797ebbd4b9c
   languageName: node
   linkType: hard
 
@@ -11388,6 +11689,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-diff@npm:29.5.0"
+  dependencies:
+    chalk: ^4.0.0
+    diff-sequences: ^29.4.3
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.5.0
+  checksum: dfd0f4a299b5d127779c76b40106c37854c89c3e0785098c717d52822d6620d227f6234c3a9291df204d619e799e3654159213bf93220f79c8e92a55475a3d39
+  languageName: node
+  linkType: hard
+
 "jest-docblock@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-docblock@npm:29.4.3"
@@ -11397,30 +11710,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-each@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-each@npm:29.4.3"
+"jest-each@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-each@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    "@jest/types": ^29.5.0
     chalk: ^4.0.0
     jest-get-type: ^29.4.3
-    jest-util: ^29.4.3
-    pretty-format: ^29.4.3
-  checksum: 1f72738338399efab0139eaea18bc198be0c6ed889770c8cbfa70bf9c724e8171fe1d3a29a94f9f39b8493ee6b2529bb350fb7c7c75e0d7eddfd28c253c79f9d
+    jest-util: ^29.5.0
+    pretty-format: ^29.5.0
+  checksum: b8b297534d25834c5d4e31e4c687359787b1e402519e42664eb704cc3a12a7a91a017565a75acb02e8cf9afd3f4eef3350bd785276bec0900184641b765ff7a5
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-environment-node@npm:29.4.3"
+"jest-environment-node@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-environment-node@npm:29.5.0"
   dependencies:
-    "@jest/environment": ^29.4.3
-    "@jest/fake-timers": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/environment": ^29.5.0
+    "@jest/fake-timers": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
-    jest-mock: ^29.4.3
-    jest-util: ^29.4.3
-  checksum: 3c7362edfdbd516e83af7367c95dde35761a482b174de9735c07633405486ec73e19624e9bea4333fca33c24e8d65eaa1aa6594e0cb6bfeeeb564ccc431ee61d
+    jest-mock: ^29.5.0
+    jest-util: ^29.5.0
+  checksum: 57981911cc20a4219b0da9e22b2e3c9f31b505e43f78e61c899e3227ded455ce1a3a9483842c69cfa4532f02cfb536ae0995bf245f9211608edacfc1e478d411
   languageName: node
   linkType: hard
 
@@ -11431,11 +11744,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-haste-map@npm:29.4.3"
+"jest-haste-map@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-haste-map@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    "@jest/types": ^29.5.0
     "@types/graceful-fs": ^4.1.3
     "@types/node": "*"
     anymatch: ^3.0.3
@@ -11443,24 +11756,24 @@ __metadata:
     fsevents: ^2.3.2
     graceful-fs: ^4.2.9
     jest-regex-util: ^29.4.3
-    jest-util: ^29.4.3
-    jest-worker: ^29.4.3
+    jest-util: ^29.5.0
+    jest-worker: ^29.5.0
     micromatch: ^4.0.4
     walker: ^1.0.8
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: c7a83ebe6008b3fe96a96235e8153092e54b14df68e0f4205faedec57450df26b658578495a71c6d82494c01fbb44bca98c1506a6b2b9c920696dcc5d2e2bc59
+  checksum: 3828ff7783f168e34be2c63887f82a01634261f605dcae062d83f979a61c37739e21b9607ecb962256aea3fbe5a530a1acee062d0026fcb47c607c12796cf3b7
   languageName: node
   linkType: hard
 
-"jest-leak-detector@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-leak-detector@npm:29.4.3"
+"jest-leak-detector@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-leak-detector@npm:29.5.0"
   dependencies:
     jest-get-type: ^29.4.3
-    pretty-format: ^29.4.3
-  checksum: ec2b45e6f0abce81bd0dd0f6fd06b433c24d1ec865267af7640fae540ec868b93752598e407a9184d9c7419cbf32e8789007cc8c1be1a84f8f7321a0f8ad01f1
+    pretty-format: ^29.5.0
+  checksum: 0fb845da7ac9cdfc9b3b2e35f6f623a41c547d7dc0103ceb0349013459d00de5870b5689a625e7e37f9644934b40e8f1dcdd5422d14d57470600350364676313
   languageName: node
   linkType: hard
 
@@ -11476,6 +11789,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-matcher-utils@npm:29.5.0"
+  dependencies:
+    chalk: ^4.0.0
+    jest-diff: ^29.5.0
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.5.0
+  checksum: 1d3e8c746e484a58ce194e3aad152eff21fd0896e8b8bf3d4ab1a4e2cbfed95fb143646f4ad9fdf6e42212b9e8fc033268b58e011b044a9929df45485deb5ac9
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-message-util@npm:29.4.3"
@@ -11493,14 +11818,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-mock@npm:29.4.3"
+"jest-message-util@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-message-util@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    "@babel/code-frame": ^7.12.13
+    "@jest/types": ^29.5.0
+    "@types/stack-utils": ^2.0.0
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    micromatch: ^4.0.4
+    pretty-format: ^29.5.0
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: daddece6bbf846eb6a2ab9be9f2446e54085bef4e5cecd13d2a538fa9c01cb89d38e564c6b74fd8e12d37ed9eface8a362240ae9f21d68b214590631e7a0d8bf
+  languageName: node
+  linkType: hard
+
+"jest-mock@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-mock@npm:29.5.0"
+  dependencies:
+    "@jest/types": ^29.5.0
     "@types/node": "*"
-    jest-util: ^29.4.3
-  checksum: 8eb4a29b02d2cd03faac0290b6df6d23b4ffa43f72b21c7fff3c7dd04a2797355b1e85862b70b15341dd33ee3a693b17db5520a6f6e6b81ee75601987de6a1a2
+    jest-util: ^29.5.0
+  checksum: 2a9cf07509948fa8608898c445f04fe4dd6e2049ff431e5531eee028c808d3ba3c67f226ac87b0cf383feaa1055776900d197c895e89783016886ac17a4ff10c
   languageName: node
   linkType: hard
 
@@ -11523,95 +11865,95 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-resolve-dependencies@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-resolve-dependencies@npm:29.4.3"
+"jest-resolve-dependencies@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-resolve-dependencies@npm:29.5.0"
   dependencies:
     jest-regex-util: ^29.4.3
-    jest-snapshot: ^29.4.3
-  checksum: 3ad934cd2170c9658d8800f84a975dafc866ec85b7ce391c640c09c3744ced337787620d8667dc8d1fa5e0b1493f973caa1a1bb980e4e6a50b46a1720baf0bd1
+    jest-snapshot: ^29.5.0
+  checksum: 479d2e5365d58fe23f2b87001e2e0adcbffe0147700e85abdec8f14b9703b0a55758c1929a9989e3f5d5e954fb88870ea4bfa04783523b664562fcf5f10b0edf
   languageName: node
   linkType: hard
 
-"jest-resolve@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-resolve@npm:29.4.3"
+"jest-resolve@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-resolve@npm:29.5.0"
   dependencies:
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
-    jest-haste-map: ^29.4.3
+    jest-haste-map: ^29.5.0
     jest-pnp-resolver: ^1.2.2
-    jest-util: ^29.4.3
-    jest-validate: ^29.4.3
+    jest-util: ^29.5.0
+    jest-validate: ^29.5.0
     resolve: ^1.20.0
     resolve.exports: ^2.0.0
     slash: ^3.0.0
-  checksum: 056a66beccf833f3c7e5a8fc9bfec218886e87b0b103decdbdf11893669539df489d1490cd6d5f0eea35731e8be0d2e955a6710498f970d2eae734da4df029dc
+  checksum: 9a125f3cf323ceef512089339d35f3ee37f79fe16a831fb6a26773ea6a229b9e490d108fec7af334142e91845b5996de8e7cdd85a4d8d617078737d804e29c8f
   languageName: node
   linkType: hard
 
-"jest-runner@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-runner@npm:29.4.3"
+"jest-runner@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-runner@npm:29.5.0"
   dependencies:
-    "@jest/console": ^29.4.3
-    "@jest/environment": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/transform": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/console": ^29.5.0
+    "@jest/environment": ^29.5.0
+    "@jest/test-result": ^29.5.0
+    "@jest/transform": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     chalk: ^4.0.0
     emittery: ^0.13.1
     graceful-fs: ^4.2.9
     jest-docblock: ^29.4.3
-    jest-environment-node: ^29.4.3
-    jest-haste-map: ^29.4.3
-    jest-leak-detector: ^29.4.3
-    jest-message-util: ^29.4.3
-    jest-resolve: ^29.4.3
-    jest-runtime: ^29.4.3
-    jest-util: ^29.4.3
-    jest-watcher: ^29.4.3
-    jest-worker: ^29.4.3
+    jest-environment-node: ^29.5.0
+    jest-haste-map: ^29.5.0
+    jest-leak-detector: ^29.5.0
+    jest-message-util: ^29.5.0
+    jest-resolve: ^29.5.0
+    jest-runtime: ^29.5.0
+    jest-util: ^29.5.0
+    jest-watcher: ^29.5.0
+    jest-worker: ^29.5.0
     p-limit: ^3.1.0
     source-map-support: 0.5.13
-  checksum: c41108e5da01e0b8fdc2a06c5042eb49bb1d8db0e0d4651769fd1b9fe84ab45188617c11a3a8e1c83748b29bfe57dd77001ec57e86e3e3c30f3534e0314f8882
+  checksum: 437dea69c5dddca22032259787bac74790d5a171c9d804711415f31e5d1abfb64fa52f54a9015bb17a12b858fd0cf3f75ef6f3c9e94255a8596e179f707229c4
   languageName: node
   linkType: hard
 
-"jest-runtime@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-runtime@npm:29.4.3"
+"jest-runtime@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-runtime@npm:29.5.0"
   dependencies:
-    "@jest/environment": ^29.4.3
-    "@jest/fake-timers": ^29.4.3
-    "@jest/globals": ^29.4.3
+    "@jest/environment": ^29.5.0
+    "@jest/fake-timers": ^29.5.0
+    "@jest/globals": ^29.5.0
     "@jest/source-map": ^29.4.3
-    "@jest/test-result": ^29.4.3
-    "@jest/transform": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/test-result": ^29.5.0
+    "@jest/transform": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     chalk: ^4.0.0
     cjs-module-lexer: ^1.0.0
     collect-v8-coverage: ^1.0.0
     glob: ^7.1.3
     graceful-fs: ^4.2.9
-    jest-haste-map: ^29.4.3
-    jest-message-util: ^29.4.3
-    jest-mock: ^29.4.3
+    jest-haste-map: ^29.5.0
+    jest-message-util: ^29.5.0
+    jest-mock: ^29.5.0
     jest-regex-util: ^29.4.3
-    jest-resolve: ^29.4.3
-    jest-snapshot: ^29.4.3
-    jest-util: ^29.4.3
+    jest-resolve: ^29.5.0
+    jest-snapshot: ^29.5.0
+    jest-util: ^29.5.0
     slash: ^3.0.0
     strip-bom: ^4.0.0
-  checksum: b99f8a910d1a38e7476058ba04ad44dfd3d93e837bb7c301d691e646a1085412fde87f06fbe271c9145f0e72d89400bfa7f6994bc30d456c7742269f37d0f570
+  checksum: 7af27bd9d54cf1c5735404cf8d76c6509d5610b1ec0106a21baa815c1aff15d774ce534ac2834bc440dccfe6348bae1885fd9a806f23a94ddafdc0f5bae4b09d
   languageName: node
   linkType: hard
 
-"jest-snapshot@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-snapshot@npm:29.4.3"
+"jest-snapshot@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-snapshot@npm:29.5.0"
   dependencies:
     "@babel/core": ^7.11.6
     "@babel/generator": ^7.7.2
@@ -11619,25 +11961,24 @@ __metadata:
     "@babel/plugin-syntax-typescript": ^7.7.2
     "@babel/traverse": ^7.7.2
     "@babel/types": ^7.3.3
-    "@jest/expect-utils": ^29.4.3
-    "@jest/transform": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/expect-utils": ^29.5.0
+    "@jest/transform": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/babel__traverse": ^7.0.6
     "@types/prettier": ^2.1.5
     babel-preset-current-node-syntax: ^1.0.0
     chalk: ^4.0.0
-    expect: ^29.4.3
+    expect: ^29.5.0
     graceful-fs: ^4.2.9
-    jest-diff: ^29.4.3
+    jest-diff: ^29.5.0
     jest-get-type: ^29.4.3
-    jest-haste-map: ^29.4.3
-    jest-matcher-utils: ^29.4.3
-    jest-message-util: ^29.4.3
-    jest-util: ^29.4.3
+    jest-matcher-utils: ^29.5.0
+    jest-message-util: ^29.5.0
+    jest-util: ^29.5.0
     natural-compare: ^1.4.0
-    pretty-format: ^29.4.3
+    pretty-format: ^29.5.0
     semver: ^7.3.5
-  checksum: 79ba52f2435e23ce72b1309be4b17fdbcb299d1c2ce97ebb61df9a62711e9463035f63b4c849181b2fe5aa17b3e09d30ee4668cc25fb3c6f59511c010b4d9494
+  checksum: fe5df54122ed10eed625de6416a45bc4958d5062b018f05b152bf9785ab7f355dcd55e40cf5da63895bf8278f8d7b2bb4059b2cfbfdee18f509d455d37d8aa2b
   languageName: node
   linkType: hard
 
@@ -11662,33 +12003,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-validate@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-validate@npm:29.4.3"
+"jest-util@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-util@npm:29.5.0"
   dependencies:
-    "@jest/types": ^29.4.3
+    "@jest/types": ^29.5.0
+    "@types/node": "*"
+    chalk: ^4.0.0
+    ci-info: ^3.2.0
+    graceful-fs: ^4.2.9
+    picomatch: ^2.2.3
+  checksum: fd9212950d34d2ecad8c990dda0d8ea59a8a554b0c188b53ea5d6c4a0829a64f2e1d49e6e85e812014933d17426d7136da4785f9cf76fff1799de51b88bc85d3
+  languageName: node
+  linkType: hard
+
+"jest-validate@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-validate@npm:29.5.0"
+  dependencies:
+    "@jest/types": ^29.5.0
     camelcase: ^6.2.0
     chalk: ^4.0.0
     jest-get-type: ^29.4.3
     leven: ^3.1.0
-    pretty-format: ^29.4.3
-  checksum: 983e56430d86bed238448cae031535c1d908f760aa312cd4a4ec0e92f3bc1b6675415ddf57cdeceedb8ad9c698e5bcd10f0a856dfc93a8923bdecc7733f4ba80
+    pretty-format: ^29.5.0
+  checksum: 43ca5df7cb75572a254ac3e92fbbe7be6b6a1be898cc1e887a45d55ea003f7a112717d814a674d37f9f18f52d8de40873c8f084f17664ae562736c78dd44c6a1
   languageName: node
   linkType: hard
 
-"jest-watcher@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-watcher@npm:29.4.3"
+"jest-watcher@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-watcher@npm:29.5.0"
   dependencies:
-    "@jest/test-result": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/test-result": ^29.5.0
+    "@jest/types": ^29.5.0
     "@types/node": "*"
     ansi-escapes: ^4.2.1
     chalk: ^4.0.0
     emittery: ^0.13.1
-    jest-util: ^29.4.3
+    jest-util: ^29.5.0
     string-length: ^4.0.1
-  checksum: 44b64991b3414db853c3756f14690028f4edef7aebfb204a4291cc1901c2239fa27a8687c5c5abbecc74bf613e0bb9b1378bf766430c9febcc71e9c0cb5ad8fc
+  checksum: 62303ac7bdc7e61a8b4239a239d018f7527739da2b2be6a81a7be25b74ca769f1c43ee8558ce8e72bb857245c46d6e03af331227ffb00a57280abb2a928aa776
   languageName: node
   linkType: hard
 
@@ -11703,26 +12058,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest-worker@npm:29.4.3"
+"jest-worker@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest-worker@npm:29.5.0"
   dependencies:
     "@types/node": "*"
-    jest-util: ^29.4.3
+    jest-util: ^29.5.0
     merge-stream: ^2.0.0
     supports-color: ^8.0.0
-  checksum: c99ae66f257564613e72c5797c3a68f21a22e1c1fb5f30d14695ff5b508a0d2405f22748f13a3df8d1015b5e16abb130170f81f047ff68f58b6b1d2ff6ebc51b
+  checksum: 1151a1ae3602b1ea7c42a8f1efe2b5a7bf927039deaa0827bf978880169899b705744e288f80a63603fb3fc2985e0071234986af7dc2c21c7a64333d8777c7c9
   languageName: node
   linkType: hard
 
-"jest@npm:^29.4.3":
-  version: 29.4.3
-  resolution: "jest@npm:29.4.3"
+"jest@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "jest@npm:29.5.0"
   dependencies:
-    "@jest/core": ^29.4.3
-    "@jest/types": ^29.4.3
+    "@jest/core": ^29.5.0
+    "@jest/types": ^29.5.0
     import-local: ^3.0.2
-    jest-cli: ^29.4.3
+    jest-cli: ^29.5.0
   peerDependencies:
     node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
   peerDependenciesMeta:
@@ -11730,7 +12085,7 @@ __metadata:
       optional: true
   bin:
     jest: bin/jest.js
-  checksum: 084d10d1ceaade3c40e6d3bbd71b9b71b8919ba6fbd6f1f6699bdc259a6ba2f7350c7ccbfa10c11f7e3e01662853650a6244210179542fe4ba87e77dc3f3109f
+  checksum: a8ff2eb0f421623412236e23cbe67c638127fffde466cba9606bc0c0553b4c1e5cb116d7e0ef990b5d1712851652c8ee461373b578df50857fe635b94ff455d5
   languageName: node
   linkType: hard
 
@@ -12052,7 +12407,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"klona@npm:^2.0.4, klona@npm:^2.0.5":
+"klona@npm:^2.0.4, klona@npm:^2.0.6":
   version: 2.0.6
   resolution: "klona@npm:2.0.6"
   checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
@@ -12079,6 +12434,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"launch-editor@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "launch-editor@npm:2.6.0"
+  dependencies:
+    picocolors: ^1.0.0
+    shell-quote: ^1.7.3
+  checksum: 48e4230643e8fdb5c14c11314706d58d9f3fbafe2606be3d6e37da1918ad8bfe39dd87875c726a1b59b9f4da99d87ec3e36d4c528464f0b820f9e91e5cb1c02d
+  languageName: node
+  linkType: hard
+
 "lazy-ass@npm:^1.6.0":
   version: 1.6.0
   resolution: "lazy-ass@npm:1.6.0"
@@ -12788,14 +13153,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-css-extract-plugin@npm:^2.7.2":
-  version: 2.7.2
-  resolution: "mini-css-extract-plugin@npm:2.7.2"
+"mini-css-extract-plugin@npm:^2.7.4":
+  version: 2.7.4
+  resolution: "mini-css-extract-plugin@npm:2.7.4"
   dependencies:
     schema-utils: ^4.0.0
   peerDependencies:
     webpack: ^5.0.0
-  checksum: cd65611d6dc452f230c6ebba8a47bc5f5146b813b13b0b402c6f4a69f6451242eeea781152bebd31cad8ca7c7e95dac91e7e464087f18fb65b2d1097b58cf4ae
+  checksum: 5776458eb78fff06eeebfa6682b5387c52cdaff0f6a5012769e81487f91d78b8fd1c6d114d04748de82825a8d155fd8324dbce86da8ceda9f299b4850f77d133
   languageName: node
   linkType: hard
 
@@ -14129,12 +14494,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.31.1":
-  version: 1.31.1
-  resolution: "playwright-core@npm:1.31.1"
+"playwright-core@npm:1.31.2":
+  version: 1.31.2
+  resolution: "playwright-core@npm:1.31.2"
   bin:
     playwright: cli.js
-  checksum: 8add37db15e607c11c356c82dd65926813d116bbea513bfb18f4d89c03e8d9c2b36b86ca980c8754f4e90b3d6ecbff3f4fd1165cd828e73de986ab3f53238362
+  checksum: bf1257b7d80b9d027c99cbfa7ab9d47a2110ec804422b3e3d623bbb3c43e06df7bec4764ca1d852a6d62c76e35c8776efb19941f42ce738db9bc92e7f1b6281c
   languageName: node
   linkType: hard
 
@@ -14245,17 +14610,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "postcss-loader@npm:7.0.2"
+"postcss-loader@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "postcss-loader@npm:7.1.0"
   dependencies:
-    cosmiconfig: ^7.0.0
-    klona: ^2.0.5
+    cosmiconfig: ^8.0.0
+    klona: ^2.0.6
     semver: ^7.3.8
   peerDependencies:
     postcss: ^7.0.0 || ^8.0.1
     webpack: ^5.0.0
-  checksum: 2d251537d482eb751f812c96c8b515f46d7c9905cad7afab33f0f34872670619b7440cefc9e2babbf89fb11b4708850d522d79fa5ff788227587645e78f16638
+  checksum: 44e4018a8f2f81150f501a5ca56e59571d81c965b5a8581f5dbae5e55a113b79bde33c3de0d4397cbf36a3be0c24b7e7e37f0154b6e63df16185edd086d4e352
   languageName: node
   linkType: hard
 
@@ -14632,6 +14997,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^29.5.0":
+  version: 29.5.0
+  resolution: "pretty-format@npm:29.5.0"
+  dependencies:
+    "@jest/schemas": ^29.4.3
+    ansi-styles: ^5.0.0
+    react-is: ^18.0.0
+  checksum: 4065356b558e6db25b4d41a01efb386935a6c06a0c9c104ef5ce59f2f476b8210edb8b3949b386e60ada0a6dc5ebcb2e6ccddc8c64dfd1a9943c3c3a9e7eaf89
+  languageName: node
+  linkType: hard
+
 "pretty-hrtime@npm:^1.0.0":
   version: 1.0.3
   resolution: "pretty-hrtime@npm:1.0.3"
@@ -14791,6 +15167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pure-rand@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "pure-rand@npm:6.0.1"
+  checksum: 4bb565399993b815658a72e359f574ce4f04827a42a905105d61163ae86f456d91595a0e4241e7bce04328fae0638ae70ac0428d93ecb55971c465bd084f8648
+  languageName: node
+  linkType: hard
+
 "q@npm:^1.5.1":
   version: 1.5.1
   resolution: "q@npm:1.5.1"
@@ -15153,13 +15536,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexpp@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "regexpp@npm:3.2.0"
-  checksum: a78dc5c7158ad9ddcfe01aa9144f46e192ddbfa7b263895a70a5c6c73edd9ce85faf7c0430e59ac38839e1734e275b9c3de5c57ee3ab6edc0e0b1bdebefccef8
-  languageName: node
-  linkType: hard
-
 "regexpu-core@npm:^5.3.1":
   version: 5.3.1
   resolution: "regexpu-core@npm:5.3.1"
@@ -15439,14 +15815,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-typescript-plugin@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "resolve-typescript-plugin@npm:2.0.0"
+"resolve-typescript-plugin@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "resolve-typescript-plugin@npm:2.0.1"
   dependencies:
-    tslib: 2.4.0
+    tslib: 2.5.0
   peerDependencies:
     webpack: ^4.0.0 || ^5.0.0
-  checksum: 4a5236f7e6bdfc5e3fdf441c0c3a6f3ccc555356c8c894ef1736f6eaa526c5ca9a4b21e951416d24bc492ac51d59dd81cbcb88a6e117efa64fadcc82c38cba53
+  checksum: 78c557cb6a7a14f15be0032e3a0b90c7209ae04c12bcced88eb4360d8dda1910e23f8016b20c09b07db19c6871b04d292b5af3472ded41d8189b379bbdaa8116
   languageName: node
   linkType: hard
 
@@ -15696,16 +16072,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.58.3":
-  version: 1.58.3
-  resolution: "sass@npm:1.58.3"
+"sass@npm:^1.59.3":
+  version: 1.59.3
+  resolution: "sass@npm:1.59.3"
   dependencies:
     chokidar: ">=3.0.0 <4.0.0"
     immutable: ^4.0.0
     source-map-js: ">=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 35a2b98c037ef80fdc93c9b0be846e6ccc7d75596351a37ee79c397e66666d0a754c52c4696e746c0aff32327471e185343ca349e998a58340411adc9d0489a5
+  checksum: 839b5282cdf7d0ba3fdbfb605277dd584a8c40fa3e3e58ad905d64cd812acfb82ff0a4072d4981673db884ee61505472ff07c5c5a8a497f16ba013b183ba6473
   languageName: node
   linkType: hard
 
@@ -16696,12 +17072,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-loader@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "style-loader@npm:3.3.1"
+"style-loader@npm:^3.3.2":
+  version: 3.3.2
+  resolution: "style-loader@npm:3.3.2"
   peerDependencies:
     webpack: ^5.0.0
-  checksum: 470feef680f59e2fce4d6601b5c55b88c01ad8d1dd693c528ffd591ff5fd7c01a4eff3bdbe62f26f847d6bd2430c9ab594be23307cfe7a3446ab236683f0d066
+  checksum: 5ee5ce2dc885369eccb55d429376e83d02570d473ac5edeb69fd65ee894847f1e51429cf078351f617bd04516ece8a1dd967f9f40464bd8fa76d903c6b2a6f08
   languageName: node
   linkType: hard
 
@@ -17239,10 +17615,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.4.0":
-  version: 2.4.0
-  resolution: "tslib@npm:2.4.0"
-  checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
+"tslib@npm:2.5.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
   languageName: node
   linkType: hard
 
@@ -17253,13 +17629,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.5.0":
-  version: 2.5.0
-  resolution: "tslib@npm:2.5.0"
-  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
-  languageName: node
-  linkType: hard
-
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"
@@ -18124,9 +18493,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-server@npm:^4.11.1":
-  version: 4.11.1
-  resolution: "webpack-dev-server@npm:4.11.1"
+"webpack-dev-server@npm:^4.12.0":
+  version: 4.12.0
+  resolution: "webpack-dev-server@npm:4.12.0"
   dependencies:
     "@types/bonjour": ^3.5.9
     "@types/connect-history-api-fallback": ^1.3.5
@@ -18147,6 +18516,7 @@ __metadata:
     html-entities: ^2.3.2
     http-proxy-middleware: ^2.0.3
     ipaddr.js: ^2.0.1
+    launch-editor: ^2.6.0
     open: ^8.0.9
     p-retry: ^4.5.0
     rimraf: ^3.0.2
@@ -18156,7 +18526,7 @@ __metadata:
     sockjs: ^0.3.24
     spdy: ^4.0.2
     webpack-dev-middleware: ^5.3.1
-    ws: ^8.4.2
+    ws: ^8.13.0
   peerDependencies:
     webpack: ^4.37.0 || ^5.0.0
   peerDependenciesMeta:
@@ -18164,7 +18534,7 @@ __metadata:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: b7601a39ee0f413988259e29a36835b0a68522cfaa161de5b7ec99b3399acdd99d44189add4aaf4a5191258bb130f9cf3e68919324a1955c7557f5fe6ab0d96c
+  checksum: 3e33acb774457ee787038d66c12e04c3e4a9f91bbff7ca143083e4ac1937b1615a1b9e7387ec623df8ebc36f56b3c34742578c09f665fe811b6e38d2e8222a94
   languageName: node
   linkType: hard
 
@@ -18185,7 +18555,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:^5, webpack@npm:^5.75.0":
+"webpack@npm:^5":
   version: 5.75.0
   resolution: "webpack@npm:5.75.0"
   dependencies:
@@ -18222,6 +18592,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack@npm:^5.76.2":
+  version: 5.76.2
+  resolution: "webpack@npm:5.76.2"
+  dependencies:
+    "@types/eslint-scope": ^3.7.3
+    "@types/estree": ^0.0.51
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/wasm-edit": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    acorn: ^8.7.1
+    acorn-import-assertions: ^1.7.6
+    browserslist: ^4.14.5
+    chrome-trace-event: ^1.0.2
+    enhanced-resolve: ^5.10.0
+    es-module-lexer: ^0.9.0
+    eslint-scope: 5.1.1
+    events: ^3.2.0
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.2.9
+    json-parse-even-better-errors: ^2.3.1
+    loader-runner: ^4.2.0
+    mime-types: ^2.1.27
+    neo-async: ^2.6.2
+    schema-utils: ^3.1.0
+    tapable: ^2.1.1
+    terser-webpack-plugin: ^5.1.3
+    watchpack: ^2.4.0
+    webpack-sources: ^3.2.3
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 86db98299a175c371031449c26077e87b33acd8f45de7f7945ed4b9b37c8ca11bc5169af9c44743efccd4d55e08042a3aa3a3bc42aff831309a0821ffbcd395e
+  languageName: node
+  linkType: hard
+
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"
@@ -18436,9 +18843,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.4.2":
-  version: 8.12.1
-  resolution: "ws@npm:8.12.1"
+"ws@npm:^8.13.0":
+  version: 8.13.0
+  resolution: "ws@npm:8.13.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -18447,7 +18854,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 97301c1c4d838fc81bd413f370f75c12aabe44527b31323b761eab3043a9ecb7e32ffd668548382c9a6a5ad3a1c3a9249608e8338e6b939f2f9540f1e21970b5
+  checksum: 53e991bbf928faf5dc6efac9b8eb9ab6497c69feeb94f963d648b7a3530a720b19ec2e0ec037344257e05a4f35bd9ad04d9de6f289615ffb133282031b18c61c
   languageName: node
   linkType: hard