first commit

node_modules/@fluentui/react/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fabric-assets-license

node_modules/@fluentui/react/README.md

@@ -0,0 +1,107 @@
+# [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)
+
+**The React-based front-end framework for building web experiences.**
+
+[![npm version](https://badge.fury.io/js/%40fluentui%2Freact.svg)](https://badge.fury.io/js/%40fluentui%2Freact) [![Build Status](https://img.shields.io/azure-devops/build/uifabric/fabricpublic/164/master?style=flat-square)](https://dev.azure.com/uifabric/fabricpublic/_build?definitionId=164)
+
+Fluent UI React (formerly Office UI Fabric React) is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.
+
+**What's changed in version 8? See the [release notes](https://github.com/microsoft/fluentui/wiki/Version-8-release-notes).**
+
+_(If you're looking for [Fluent UI Northstar](https://aka.ms/fluent-ui), formerly Stardust, use `@fluentui/react-northstar` instead.)_
+
+## Component documentation
+
+See the [main Fluent UI website](https://developer.microsoft.com/en-us/fluentui) for the list of available components, API and usage documentation, and styling information.
+
+## Who uses Fluent UI React?
+
+![image](https://user-images.githubusercontent.com/785361/50458071-45b58d00-0915-11e9-90c0-ad8789c99db5.png)
+
+\+ 45 additional Microsoft sites and products
+
+## Contents
+
+- [Using Fluent UI React](#using-fluent-ui-react)
+  - [Integrating in your project](#integrating-in-your-project)
+  - [Version policy](#version-policy)
+  - [Browser support](#browser-support)
+  - [Right-to-left support](#right-to-left-support)
+  - [Server-side rendering](#server-side-rendering)
+  - [Advanced usage](#advanced-usage)
+- [Contribute to Fluent UI React](#contribute-to-fluent-ui-react)
+- [Licenses](#licenses)
+- [Changelog](#changelog)
+- [More information](#more-information)
+
+## Using Fluent UI React
+
+### Creating a new app
+
+To create a simple React app using [Create React App](https://create-react-app.dev), [install Node.js](https://nodejs.org), then run:
+
+```sh
+npx create-react-app my-app --template @fluentui/cra-template
+cd my-app
+npm start
+```
+
+### Integrating in an existing project
+
+```sh
+npm i @fluentui/react
+```
+
+This will add the package as a dependency in your `package.json` file and download it under `node_modules/@fluentui/react`.
+
+The library includes ES module entry points under the `lib` folder (use `lib-amd` if you need AMD, or `lib-commonjs` if you need commonjs).
+
+### Version policy
+
+Fluent UI React adheres to [semantic versioning](http://www.semver.org/). However, we only consider constructs directly importable at the package level or from files at the root (e.g. `@fluentui/react/lib/Utilities` or `@fluentui/react/lib-amd/Styling`) to be part of our API surface. Everything else is considered package-internal and may be subject to changes, moves, renames, etc.
+
+### Browser support
+
+Fluent UI React supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer<sup>\*</sup>. See the [browser support doc](https://github.com/microsoft/fluentui/wiki/Browser-Support) for more information.
+
+<sup>\*</sup>**NOTE**: [Internet Explorer 11 has been sunset](https://github.com/microsoft/fluentui/wiki/Internet-Explorer-11-Sunset). Features and bug fixes after the sunset date may not be compatible with IE11.
+
+### Right-to-left support
+
+All components can render in LTR or RTL, depending on the `dir` attribute set on the `html` element (`dir="rtl"` will flip the direction of everything). You can also use the `setRTL` API if you don't have control over the `html` element's rendering. Example:
+
+```tsx
+import { setRTL } from '@fluentui/react/lib/Utilities';
+
+setRTL(true);
+```
+
+### Server-side rendering
+
+Fluent UI React components can be rendered in a server-side Node environment (or used in tests which run in an SSR-like environment), but it requires customizing how styles and SCSS files are loaded. See the [server-side rendering documentation](https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing) for examples of how to handle this.
+
+### Advanced usage
+
+For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our [advanced documentation](https://github.com/microsoft/fluentui/wiki/Advanced-Usage).
+
+## Contribute to Fluent UI React
+
+Please take a look at our [contribution guidelines](https://github.com/microsoft/fluentui/wiki/Contributing) to learn how to make changes, build the repo and submit your contributions to Fluent UI.
+
+## Licenses
+
+All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
+
+Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the [assets license agreement](https://aka.ms/fluentui-assets-license).
+
+## Changelog
+
+We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the [releases](https://github.com/microsoft/fluentui/releases) page.
+
+## More information
+
+Please see the [wiki](https://github.com/microsoft/fluentui/wiki).
+
+---
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

node_modules/@fluentui/react/__mocks__/@fluentui/utilities.ts

@@ -0,0 +1,54 @@
+export * from '@fluentui/utilities';
+import { Async } from '@fluentui/utilities';
+
+declare function setTimeout(cb: Function, delay: number): number;
+
+// Known issue with jest's runAllTimers and debounce implementations resulting in
+// "Ran 100000 timers, and there are still more! Assuming we've hit an infinite recursion and bailing out..."
+// https://github.com/facebook/jest/issues/3465
+// Mock impl inspired from issue.
+class MockAsync extends Async {
+  private _timeoutId: number | undefined;
+
+  public debounce(callback: Function, timeout: number) {
+    this._timeoutId = undefined;
+    const debounced = (...args: any[]) => {
+      if (this._timeoutId) {
+        clearTimeout(this._timeoutId);
+        this._timeoutId = undefined;
+      }
+      // Callback functions throughout repo aren't binding properly, so we have to access
+      // Async's private _parent member and invoke callbacks the same way Async.debounce does.
+      const invokeFunction = () => callback.apply((this as any)._parent, args);
+      this._timeoutId = setTimeout(invokeFunction, timeout);
+    };
+
+    const cancel = () => {
+      if (this._timeoutId) {
+        clearTimeout(this._timeoutId);
+        this._timeoutId = undefined;
+      }
+    };
+
+    (debounced as any).cancel = cancel;
+
+    return debounced as any;
+  }
+
+  public dispose() {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
+    this._timeoutId = undefined;
+
+    super.dispose();
+  }
+
+  protected _logError(e: any) {
+    super._logError(e);
+    // Don't eat errors thrown from async callbacks
+    throw e;
+  }
+}
+
+export { MockAsync as Async };

node_modules/@fluentui/react/config/api-extractor.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@fluentui/scripts-api-extractor/api-extractor.common.json"
+}

node_modules/@fluentui/react/config/pre-copy.json

@@ -0,0 +1,16 @@
+{
+  "copyTo": {
+    "dist/sass": [
+      "office-ui-fabric-core/dist/sass/**/*",
+      "@fluentui/common-styles/src/_highContrast.scss",
+      "@fluentui/common-styles/src/_i18n.scss",
+      "@fluentui/common-styles/src/_semanticSlots.scss",
+      "@fluentui/common-styles/src/_themeOverrides.scss",
+      "@fluentui/common-styles/src/_legacyThemePalette.scss",
+      "@fluentui/common-styles/src/_effects.scss",
+      "@fluentui/common-styles/src/_themeVariables.scss",
+      "@fluentui/common-styles/src/ThemingSass.scss"
+    ],
+    "dist/css": ["office-ui-fabric-core/dist/css/**/*"]
+  }
+}

node_modules/@fluentui/react/config/tests.js

@@ -0,0 +1,8 @@
+/** Jest test setup file. */
+
+require('@testing-library/jest-dom');
+
+const { initializeIcons } = require('@fluentui/font-icons-mdl2');
+
+// Initialize icons.
+initializeIcons('');

node_modules/@fluentui/react/dist/fluentui-react.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluentui-react.umd.js","mappings":"AAAA","sources":["webpack://FluentUIReact/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\", \"ReactDOM\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"FluentUIReact\"] = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse\n\t\troot[\"FluentUIReact\"] = factory(root[\"React\"], root[\"ReactDOM\"]);\n})(self, function(__WEBPACK_EXTERNAL_MODULE__883__, __WEBPACK_EXTERNAL_MODULE__845__) {\nreturn "],"names":[],"sourceRoot":""}

node_modules/@fluentui/react/dist/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';

node_modules/@fluentui/react/dist/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';

node_modules/@fluentui/react/dist/sass/ThemingSass.scss

@@ -0,0 +1,6 @@
+/** Imports all theming-related SASS files. */
+@import './effects';
+@import './legacyThemePalette';
+@import './semanticSlots';
+@import './themeOverrides';
+@import './themeVariables';

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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);
+  }
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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);

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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]';

node_modules/@fluentui/react/dist/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;
+  }
+}

node_modules/@fluentui/react/dist/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;
+  }
+}

node_modules/@fluentui/react/dist/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]";

node_modules/@fluentui/react/dist/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 */

node_modules/@fluentui/react/dist/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]";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+		}
+	}
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+    }
+  }
+}

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;
+}

node_modules/@fluentui/react/dist/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;
+  }
+}

node_modules/@fluentui/react/dist/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;
+  }
+}

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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";

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/dist/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);

node_modules/@fluentui/react/dist/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;

node_modules/@fluentui/react/empty-entrypoint.js

@@ -0,0 +1,2 @@
+// empty entrypoint on purpose to address this issue:
+// https://github.com/webpack/webpack-dev-server/issues/2876

node_modules/@fluentui/react/just.config.ts

@@ -0,0 +1,11 @@
+import { task, webpackDevServerTask, preset } from '@fluentui/scripts-tasks';
+
+preset();
+
+task('build', 'build:react-with-umd');
+task(
+  'mf',
+  webpackDevServerTask({
+    config: 'webpack.mf.config.js',
+  }),
+);

node_modules/@fluentui/react/lib-amd/ActivityItem.d.ts

@@ -0,0 +1 @@
+export * from './components/ActivityItem/index';

node_modules/@fluentui/react/lib-amd/ActivityItem.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ActivityItem/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ActivityItem.js.map

node_modules/@fluentui/react/lib-amd/ActivityItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityItem.js","sourceRoot":"../src/","sources":["ActivityItem.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/ActivityItem/index';\n"]}

node_modules/@fluentui/react/lib-amd/Announced.d.ts

@@ -0,0 +1 @@
+export * from './components/Announced/index';

node_modules/@fluentui/react/lib-amd/Announced.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Announced/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Announced.js.map

node_modules/@fluentui/react/lib-amd/Announced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Announced.js","sourceRoot":"../src/","sources":["Announced.ts"],"names":[],"mappings":";;;IAAA,uCAA6C","sourcesContent":["export * from './components/Announced/index';\n"]}

node_modules/@fluentui/react/lib-amd/Autofill.d.ts

@@ -0,0 +1 @@
+export * from './components/Autofill/index';

node_modules/@fluentui/react/lib-amd/Autofill.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Autofill/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Autofill.js.map

node_modules/@fluentui/react/lib-amd/Autofill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autofill.js","sourceRoot":"../src/","sources":["Autofill.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/Autofill/index';\n"]}

node_modules/@fluentui/react/lib-amd/Breadcrumb.d.ts

@@ -0,0 +1 @@
+export * from './components/Breadcrumb/index';

node_modules/@fluentui/react/lib-amd/Breadcrumb.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Breadcrumb/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Breadcrumb.js.map

node_modules/@fluentui/react/lib-amd/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"../src/","sources":["Breadcrumb.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/Breadcrumb/index';\n"]}

node_modules/@fluentui/react/lib-amd/Button.d.ts

@@ -0,0 +1 @@
+export * from './components/Button/index';

node_modules/@fluentui/react/lib-amd/Button.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Button/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Button.js.map

node_modules/@fluentui/react/lib-amd/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["Button.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Button/index';\n"]}

node_modules/@fluentui/react/lib-amd/ButtonGrid.d.ts

@@ -0,0 +1 @@
+export * from './utilities/ButtonGrid/index';

node_modules/@fluentui/react/lib-amd/ButtonGrid.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./utilities/ButtonGrid/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ButtonGrid.js.map

node_modules/@fluentui/react/lib-amd/ButtonGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGrid.js","sourceRoot":"../src/","sources":["ButtonGrid.ts"],"names":[],"mappings":";;;IAAA,uCAA6C","sourcesContent":["export * from './utilities/ButtonGrid/index';\n"]}

node_modules/@fluentui/react/lib-amd/Calendar.d.ts

@@ -0,0 +1 @@
+export * from './components/Calendar/index';

node_modules/@fluentui/react/lib-amd/Calendar.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Calendar/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Calendar.js.map

node_modules/@fluentui/react/lib-amd/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"../src/","sources":["Calendar.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/Calendar/index';\n"]}

node_modules/@fluentui/react/lib-amd/Callout.d.ts

@@ -0,0 +1 @@
+export * from './components/Callout/index';