@fluentui/react-button 0.20.3 → 0.20.6

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 19 May 2022 12:26:46 GMT",
+      "date": "Wed, 17 Aug 2022 12:19:35 GMT",
+      "tag": "@fluentui/react-button_v0.20.6",
+      "version": "0.20.6",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @uifabric/utilities to v7.35.0",
+            "author": "tmichon@microsoft.com",
+            "commit": "94cb7fbdc1b68428d8ea8d69a19a1bcf1f11484d",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 27 Jul 2022 12:27:44 GMT",
+      "tag": "@fluentui/react-button_v0.20.5",
+      "version": "0.20.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "update snaps",
+            "author": "mgodbolt@microsoft.com",
+            "commit": "44b414628d8160cf6fd7803a3f769ef2553008d2",
+            "package": "@fluentui/react-button"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @uifabric/styling to v7.21.1",
+            "author": "mgodbolt@microsoft.com",
+            "commit": "44b414628d8160cf6fd7803a3f769ef2553008d2",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 08 Jul 2022 12:23:25 GMT",
+      "tag": "@fluentui/react-button_v0.20.4",
+      "version": "0.20.4",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Update high-contrast mixins to support forced-colors (#23285)",
+            "author": "tmichon@microsoft.com",
+            "commit": "8af82b8d27be6989321e4c80e9b2221d280d21da",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 19 May 2022 12:29:07 GMT",
       "tag": "@fluentui/react-button_v0.20.3",
       "version": "0.20.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 19 May 2022 12:26:46 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Aug 2022 12:19:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.20.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.6)
+
+Wed, 17 Aug 2022 12:19:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.5..@fluentui/react-button_v0.20.6)
+
+### Patches
+
+- Bump @uifabric/utilities to v7.35.0 ([PR #24370](https://github.com/microsoft/fluentui/pull/24370) by tmichon@microsoft.com)
+
+## [0.20.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.5)
+
+Wed, 27 Jul 2022 12:27:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.4..@fluentui/react-button_v0.20.5)
+
+### Patches
+
+- Bump @uifabric/styling to v7.21.1 ([PR #24022](https://github.com/microsoft/fluentui/pull/24022) by mgodbolt@microsoft.com)
+
+## [0.20.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.4)
+
+Fri, 08 Jul 2022 12:23:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.3..@fluentui/react-button_v0.20.4)
+
+### Patches
+
+- Update high-contrast mixins to support forced-colors (#23285) ([PR #23465](https://github.com/microsoft/fluentui/pull/23465) by tmichon@microsoft.com)
+
 ## [0.20.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.3)
 
-Thu, 19 May 2022 12:26:46 GMT 
+Thu, 19 May 2022 12:29:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.2..@fluentui/react-button_v0.20.3)
 
 ### Patches

package/dist/demo-app.js

@@ -740,7 +740,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n\n\n//
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\n__webpack_require__(/*! ./version */ \"../react-hooks/src/version.ts\");\ntslib_1.__exportStar(__webpack_require__(/*! ./useAsync */ \"../react-hooks/src/useAsync.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useBoolean */ \"../react-hooks/src/useBoolean.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useConst */ \"../react-hooks/src/useConst.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useConstCallback */ \"../react-hooks/src/useConstCallback.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useControllableValue */ \"../react-hooks/src/useControllableValue.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useForceUpdate */ \"../react-hooks/src/useForceUpdate.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useId */ \"../react-hooks/src/useId.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useMergedRefs */ \"../react-hooks/src/useMergedRefs.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useOnEvent */ \"../react-hooks/src/useOnEvent.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./usePrevious */ \"../react-hooks/src/usePrevious.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useRefEffect */ \"../react-hooks/src/useRefEffect.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useSetInterval */ \"../react-hooks/src/useSetInterval.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useSetTimeout */ \"../react-hooks/src/useSetTimeout.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useTarget */ \"../react-hooks/src/useTarget.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useWarnings */ \"../react-hooks/src/useWarnings.ts\"), exports);\n\n\n//# sourceURL=webpack:///../react-hooks/src/index.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\n__webpack_require__(/*! ./version */ \"../react-hooks/src/version.ts\");\ntslib_1.__exportStar(__webpack_require__(/*! ./useAsync */ \"../react-hooks/src/useAsync.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useBoolean */ \"../react-hooks/src/useBoolean.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useConst */ \"../react-hooks/src/useConst.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useConstCallback */ \"../react-hooks/src/useConstCallback.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useControllableValue */ \"../react-hooks/src/useControllableValue.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useEventCallback */ \"../react-hooks/src/useEventCallback.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useForceUpdate */ \"../react-hooks/src/useForceUpdate.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useId */ \"../react-hooks/src/useId.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useMergedRefs */ \"../react-hooks/src/useMergedRefs.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useOnEvent */ \"../react-hooks/src/useOnEvent.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./usePrevious */ \"../react-hooks/src/usePrevious.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useRefEffect */ \"../react-hooks/src/useRefEffect.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useSetInterval */ \"../react-hooks/src/useSetInterval.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useSetTimeout */ \"../react-hooks/src/useSetTimeout.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useTarget */ \"../react-hooks/src/useTarget.ts\"), exports);\ntslib_1.__exportStar(__webpack_require__(/*! ./useWarnings */ \"../react-hooks/src/useWarnings.ts\"), exports);\n\n\n//# sourceURL=webpack:///../react-hooks/src/index.ts?");
 
 /***/ }),
 
@@ -804,6 +804,18 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 
 /***/ }),
 
+/***/ "../react-hooks/src/useEventCallback.ts":
+/*!**********************************************!*\
+  !*** ../react-hooks/src/useEventCallback.ts ***!
+  \**********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __webpack_require__(/*! react */ \"react\");\nvar useConst_1 = __webpack_require__(/*! ./useConst */ \"../react-hooks/src/useConst.ts\");\n/**\n * Modified `useCallback` that returns the same function reference every time, but internally calls\n * the most-recently passed callback implementation. Can be useful in situations such as:\n * - Event handler dependencies change too frequently, such as user props which might change on\n *   every render, or volatile values such as useState/useDispatch\n * - Callback must be referenced in a captured context (such as a window event handler or unmount\n *   handler that's registered once) but needs access to the latest props\n *\n * In general, prefer `useCallback` unless you've encountered one of the problems above.\n *\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * @param fn - The callback function that will be used\n * @returns A function which is referentially stable but internally calls the most recently passed callback\n */\nfunction useEventCallback(fn) {\n    var callbackRef = React.useRef(function () {\n        throw new Error('Cannot call an event handler while rendering');\n    });\n    React.useLayoutEffect(function () {\n        callbackRef.current = fn;\n    }, [fn]);\n    // useConst rather than useCallback to ensure the reference is always stable\n    // (useCallback's deps list is an optimization, not a guarantee)\n    return useConst_1.useConst(function () { return function () {\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        var callback = callbackRef.current;\n        return callback.apply(void 0, args);\n    }; });\n}\nexports.useEventCallback = useEventCallback;\n\n\n//# sourceURL=webpack:///../react-hooks/src/useEventCallback.ts?");
+
+/***/ }),
+
 /***/ "../react-hooks/src/useForceUpdate.ts":
 /*!********************************************!*\
   !*** ../react-hooks/src/useForceUpdate.ts ***!
@@ -932,7 +944,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/react-hooks', '7.14.1');\n\n\n//# sourceURL=webpack:///../react-hooks/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/react-hooks', '7.15.0');\n\n\n//# sourceURL=webpack:///../react-hooks/src/version.ts?");
 
 /***/ }),
 
@@ -24799,7 +24811,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-icons', '0.4.3');\n\n\n//# sourceURL=webpack:///../react-icons/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-icons', '0.4.4');\n\n\n//# sourceURL=webpack:///../react-icons/src/version.ts?");
 
 /***/ }),
 
@@ -24871,7 +24883,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-shared-contexts', '0.1.2');\n\n\n//# sourceURL=webpack:///../react-shared-contexts/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-shared-contexts', '0.1.3');\n\n\n//# sourceURL=webpack:///../react-shared-contexts/src/version.ts?");
 
 /***/ }),
 
@@ -24943,7 +24955,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-stylesheets', '0.2.5');\n\n\n//# sourceURL=webpack:///../react-stylesheets/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-stylesheets', '0.2.6');\n\n\n//# sourceURL=webpack:///../react-stylesheets/src/version.ts?");
 
 /***/ }),
 
@@ -25207,7 +25219,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar th
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-theme-provider', '0.19.2');\n\n\n//# sourceURL=webpack:///../react-theme-provider/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-theme-provider', '0.19.5');\n\n\n//# sourceURL=webpack:///../react-theme-provider/src/version.ts?");
 
 /***/ }),
 
@@ -25399,7 +25411,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), (forced-colors: active)';\nexports.HighContrastSelectorWhite = '@media screen and (-ms-high-contrast: black-on-white), (forced-colors: black-on-white)';\nexports.HighContrastSelectorBlack = '@media screen and (-ms-high-contrast: white-on-black), (forced-colors: white-on-black)';\nexports.EdgeChromiumHighContrastSelector = '@media screen and (forced-colors: active)';\nexports.ScreenWidthMinSmall = 320;\nexports.ScreenWidthMinMedium = 480;\nexports.ScreenWidthMinLarge = 640;\nexports.ScreenWidthMinXLarge = 1024;\nexports.ScreenWidthMinXXLarge = 1366;\nexports.ScreenWidthMinXXXLarge = 1920;\nexports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;\nexports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;\nexports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;\nexports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;\nexports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;\nexports.ScreenWidthMinUhfMobile = 768;\nfunction getScreenSelector(min, max) {\n    var minSelector = typeof min === 'number' ? \" and (min-width: \" + min + \"px)\" : '';\n    var maxSelector = typeof max === 'number' ? \" and (max-width: \" + max + \"px)\" : '';\n    return \"@media only screen\" + minSelector + maxSelector;\n}\nexports.getScreenSelector = getScreenSelector;\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nfunction getHighContrastNoAdjustStyle() {\n    return {\n        forcedColorAdjust: 'none',\n        MsHighContrastAdjust: 'none',\n    };\n}\nexports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\nfunction getEdgeChromiumNoHighContrastAdjustSelector() {\n    var _a;\n    return _a = {},\n        _a[exports.EdgeChromiumHighContrastSelector] = {\n            forcedColorAdjust: 'none',\n        },\n        _a;\n}\nexports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;\n\n\n//# sourceURL=webpack:///../styling/src/styles/CommonStyles.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexports.HighContrastSelectorWhite = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexports.HighContrastSelectorBlack = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexports.ScreenWidthMinSmall = 320;\nexports.ScreenWidthMinMedium = 480;\nexports.ScreenWidthMinLarge = 640;\nexports.ScreenWidthMinXLarge = 1024;\nexports.ScreenWidthMinXXLarge = 1366;\nexports.ScreenWidthMinXXXLarge = 1920;\nexports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;\nexports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;\nexports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;\nexports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;\nexports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;\nexports.ScreenWidthMinUhfMobile = 768;\nfunction getScreenSelector(min, max) {\n    var minSelector = typeof min === 'number' ? \" and (min-width: \" + min + \"px)\" : '';\n    var maxSelector = typeof max === 'number' ? \" and (max-width: \" + max + \"px)\" : '';\n    return \"@media only screen\" + minSelector + maxSelector;\n}\nexports.getScreenSelector = getScreenSelector;\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nfunction getHighContrastNoAdjustStyle() {\n    return {\n        forcedColorAdjust: 'none',\n        MsHighContrastAdjust: 'none',\n    };\n}\nexports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nfunction getEdgeChromiumNoHighContrastAdjustSelector() {\n    var _a;\n    return _a = {},\n        // eslint-disable-next-line deprecation/deprecation\n        _a[exports.EdgeChromiumHighContrastSelector] = {\n            forcedColorAdjust: 'none',\n            MsHighContrastAdjust: 'none',\n        },\n        _a;\n}\nexports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;\n\n\n//# sourceURL=webpack:///../styling/src/styles/CommonStyles.ts?");
 
 /***/ }),
 
@@ -25639,7 +25651,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar bu
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/styling', '7.20.1');\n\n\n//# sourceURL=webpack:///../styling/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/styling', '7.21.1');\n\n\n//# sourceURL=webpack:///../styling/src/version.ts?");
 
 /***/ }),
 
@@ -27055,7 +27067,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ge
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Selection_types_1 = __webpack_require__(/*! ./Selection.types */ \"../utilities/src/selection/Selection.types.ts\");\nvar EventGroup_1 = __webpack_require__(/*! ../EventGroup */ \"../utilities/src/EventGroup.ts\");\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n    /**\n     * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n     * object with a `getKey` implementation. Providing options is optional otherwise.\n     * (At most one `options` object is accepted.)\n     */\n    function Selection() {\n        var options = []; // Otherwise, arguments require options with `getKey`.\n        for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n        ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n        ; _i++ // Otherwise, arguments require options with `getKey`.\n        ) {\n            options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n        }\n        var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? Selection_types_1.SelectionMode.multiple : _c;\n        this.mode = selectionMode;\n        this._getKey = getKey || defaultGetKey;\n        this._changeEventSuppressionCount = 0;\n        this._exemptedCount = 0;\n        this._anchoredIndex = 0;\n        this._unselectableCount = 0;\n        this._onSelectionChanged = onSelectionChanged;\n        this._onItemsChanged = onItemsChanged;\n        this._canSelectItem = canSelectItem;\n        this._keyToIndexMap = {};\n        this._isModal = false;\n        this.setItems(items || [], true);\n        this.count = this.getSelectedCount();\n    }\n    Selection.prototype.canSelectItem = function (item, index) {\n        if (typeof index === 'number' && index < 0) {\n            return false;\n        }\n        return this._canSelectItem(item, index);\n    };\n    Selection.prototype.getKey = function (item, index) {\n        var key = this._getKey(item, index);\n        return typeof key === 'number' || key ? \"\" + key : '';\n    };\n    Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n        this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n        if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n            this._hasChanged = false;\n            if (!suppressChange) {\n                this._change();\n            }\n        }\n    };\n    Selection.prototype.isModal = function () {\n        return this._isModal;\n    };\n    Selection.prototype.setModal = function (isModal) {\n        if (this._isModal !== isModal) {\n            this.setChangeEvents(false);\n            this._isModal = isModal;\n            if (!isModal) {\n                this.setAllSelected(false);\n            }\n            this._change();\n            this.setChangeEvents(true);\n        }\n    };\n    /**\n     * Selection needs the items, call this method to set them. If the set\n     * of items is the same, this will re-evaluate selection and index maps.\n     * Otherwise, shouldClear should be set to true, so that selection is\n     * cleared.\n     */\n    Selection.prototype.setItems = function (items, shouldClear) {\n        if (shouldClear === void 0) { shouldClear = true; }\n        var newKeyToIndexMap = {};\n        var newUnselectableIndices = {};\n        var hasSelectionChanged = false;\n        this.setChangeEvents(false);\n        // Reset the unselectable count.\n        this._unselectableCount = 0;\n        var haveItemsChanged = false;\n        // Build lookup table for quick selection evaluation.\n        for (var i = 0; i < items.length; i++) {\n            var item = items[i];\n            if (item) {\n                var key = this.getKey(item, i);\n                if (key) {\n                    if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n                        haveItemsChanged = true;\n                    }\n                    newKeyToIndexMap[key] = i;\n                }\n            }\n            newUnselectableIndices[i] = item && !this.canSelectItem(item);\n            if (newUnselectableIndices[i]) {\n                this._unselectableCount++;\n            }\n        }\n        if (shouldClear || items.length === 0) {\n            this._setAllSelected(false, true);\n        }\n        // Check the exemption list for discrepencies.\n        var newExemptedIndicies = {};\n        var newExemptedCount = 0;\n        for (var indexProperty in this._exemptedIndices) {\n            if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n                var index = Number(indexProperty);\n                var item = this._items[index];\n                var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n                var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n                if (newIndex === undefined) {\n                    // The item has likely been replaced or removed.\n                    hasSelectionChanged = true;\n                }\n                else {\n                    // We know the new index of the item. update the existing exemption table.\n                    newExemptedIndicies[newIndex] = true;\n                    newExemptedCount++;\n                    hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n                }\n            }\n        }\n        if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n            // If everything was selected but the number of items has changed, selection has changed.\n            hasSelectionChanged = true;\n        }\n        if (!haveItemsChanged) {\n            for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n                var key = _a[_i];\n                if (!(key in newKeyToIndexMap)) {\n                    haveItemsChanged = true;\n                    break;\n                }\n            }\n        }\n        this._exemptedIndices = newExemptedIndicies;\n        this._exemptedCount = newExemptedCount;\n        this._keyToIndexMap = newKeyToIndexMap;\n        this._unselectableIndices = newUnselectableIndices;\n        this._items = items;\n        this._selectedItems = null;\n        if (hasSelectionChanged) {\n            this._updateCount();\n        }\n        if (haveItemsChanged) {\n            EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_ITEMS_CHANGE);\n            if (this._onItemsChanged) {\n                this._onItemsChanged();\n            }\n        }\n        if (hasSelectionChanged) {\n            this._change();\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.getItems = function () {\n        return this._items;\n    };\n    Selection.prototype.getSelection = function () {\n        if (!this._selectedItems) {\n            this._selectedItems = [];\n            var items = this._items;\n            if (items) {\n                for (var i = 0; i < items.length; i++) {\n                    if (this.isIndexSelected(i)) {\n                        this._selectedItems.push(items[i]);\n                    }\n                }\n            }\n        }\n        return this._selectedItems;\n    };\n    Selection.prototype.getSelectedCount = function () {\n        return this._isAllSelected\n            ? this._items.length - this._exemptedCount - this._unselectableCount\n            : this._exemptedCount;\n    };\n    Selection.prototype.getSelectedIndices = function () {\n        if (!this._selectedIndices) {\n            this._selectedIndices = [];\n            var items = this._items;\n            if (items) {\n                for (var i = 0; i < items.length; i++) {\n                    if (this.isIndexSelected(i)) {\n                        this._selectedIndices.push(i);\n                    }\n                }\n            }\n        }\n        return this._selectedIndices;\n    };\n    Selection.prototype.getItemIndex = function (key) {\n        var index = this._keyToIndexMap[key];\n        return (index !== null && index !== void 0 ? index : -1);\n    };\n    Selection.prototype.isRangeSelected = function (fromIndex, count) {\n        if (count === 0) {\n            return false;\n        }\n        var endIndex = fromIndex + count;\n        for (var i = fromIndex; i < endIndex; i++) {\n            if (!this.isIndexSelected(i)) {\n                return false;\n            }\n        }\n        return true;\n    };\n    Selection.prototype.isAllSelected = function () {\n        var selectableCount = this._items.length - this._unselectableCount;\n        // In single mode, we can only have a max of 1 item.\n        if (this.mode === Selection_types_1.SelectionMode.single) {\n            selectableCount = Math.min(selectableCount, 1);\n        }\n        return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n            (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n    };\n    Selection.prototype.isKeySelected = function (key) {\n        var index = this._keyToIndexMap[key];\n        return this.isIndexSelected(index);\n    };\n    Selection.prototype.isIndexSelected = function (index) {\n        return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n            (!this._isAllSelected && this._exemptedIndices[index]));\n    };\n    Selection.prototype.setAllSelected = function (isAllSelected) {\n        if (isAllSelected && this.mode !== Selection_types_1.SelectionMode.multiple) {\n            return;\n        }\n        var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n        this.setChangeEvents(false);\n        if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n            this._exemptedIndices = {};\n            if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n                this._exemptedCount = 0;\n                this._isAllSelected = isAllSelected;\n                this._change();\n            }\n            this._updateCount();\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n        var index = this._keyToIndexMap[key];\n        if (index >= 0) {\n            this.setIndexSelected(index, isSelected, shouldAnchor);\n        }\n    };\n    Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        // Clamp the index.\n        index = Math.min(Math.max(0, index), this._items.length - 1);\n        // No-op on out of bounds selections.\n        if (index < 0 || index >= this._items.length) {\n            return;\n        }\n        this.setChangeEvents(false);\n        var isExempt = this._exemptedIndices[index];\n        var canSelect = !this._unselectableIndices[index];\n        if (canSelect) {\n            if (isSelected && this.mode === Selection_types_1.SelectionMode.single) {\n                // If this is single-select, the previous selection should be removed.\n                this._setAllSelected(false, true);\n            }\n            // Determine if we need to remove the exemption.\n            if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n                delete this._exemptedIndices[index];\n                this._exemptedCount--;\n            }\n            // Determine if we need to add the exemption.\n            if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n                this._exemptedIndices[index] = true;\n                this._exemptedCount++;\n            }\n            if (shouldAnchor) {\n                this._anchoredIndex = index;\n            }\n        }\n        this._updateCount();\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.selectToKey = function (key, clearSelection) {\n        this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n    };\n    Selection.prototype.selectToIndex = function (index, clearSelection) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        if (this.mode === Selection_types_1.SelectionMode.single) {\n            this.setIndexSelected(index, true, true);\n            return;\n        }\n        var anchorIndex = this._anchoredIndex || 0;\n        var startIndex = Math.min(index, anchorIndex);\n        var endIndex = Math.max(index, anchorIndex);\n        this.setChangeEvents(false);\n        if (clearSelection) {\n            this._setAllSelected(false, true);\n        }\n        for (; startIndex <= endIndex; startIndex++) {\n            this.setIndexSelected(startIndex, true, false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.toggleAllSelected = function () {\n        this.setAllSelected(!this.isAllSelected());\n    };\n    Selection.prototype.toggleKeySelected = function (key) {\n        this.setKeySelected(key, !this.isKeySelected(key), true);\n    };\n    Selection.prototype.toggleIndexSelected = function (index) {\n        this.setIndexSelected(index, !this.isIndexSelected(index), true);\n    };\n    Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        var isRangeSelected = this.isRangeSelected(fromIndex, count);\n        var endIndex = fromIndex + count;\n        if (this.mode === Selection_types_1.SelectionMode.single && count > 1) {\n            return;\n        }\n        this.setChangeEvents(false);\n        for (var i = fromIndex; i < endIndex; i++) {\n            this.setIndexSelected(i, !isRangeSelected, false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype._updateCount = function (preserveModalState) {\n        if (preserveModalState === void 0) { preserveModalState = false; }\n        var count = this.getSelectedCount();\n        if (count !== this.count) {\n            this.count = count;\n            this._change();\n        }\n        if (!this.count && !preserveModalState) {\n            this.setModal(false);\n        }\n    };\n    Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n        if (preserveModalState === void 0) { preserveModalState = false; }\n        if (isAllSelected && this.mode !== Selection_types_1.SelectionMode.multiple) {\n            return;\n        }\n        var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n        this.setChangeEvents(false);\n        if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n            this._exemptedIndices = {};\n            if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n                this._exemptedCount = 0;\n                this._isAllSelected = isAllSelected;\n                this._change();\n            }\n            this._updateCount(preserveModalState);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype._change = function () {\n        if (this._changeEventSuppressionCount === 0) {\n            this._selectedItems = null;\n            this._selectedIndices = undefined;\n            EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_CHANGE);\n            if (this._onSelectionChanged) {\n                this._onSelectionChanged();\n            }\n        }\n        else {\n            this._hasChanged = true;\n        }\n    };\n    return Selection;\n}());\nexports.Selection = Selection;\nfunction defaultGetKey(item, index) {\n    // 0 may be used as a key\n    var _a = (item || {}).key, key = _a === void 0 ? \"\" + index : _a;\n    return key;\n}\n\n\n//# sourceURL=webpack:///../utilities/src/selection/Selection.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Selection_types_1 = __webpack_require__(/*! ./Selection.types */ \"../utilities/src/selection/Selection.types.ts\");\nvar EventGroup_1 = __webpack_require__(/*! ../EventGroup */ \"../utilities/src/EventGroup.ts\");\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n    /**\n     * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n     * object with a `getKey` implementation. Providing options is optional otherwise.\n     * (At most one `options` object is accepted.)\n     */\n    function Selection() {\n        var options = []; // Otherwise, arguments require options with `getKey`.\n        for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n        ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n        ; _i++ // Otherwise, arguments require options with `getKey`.\n        ) {\n            options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n        }\n        var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? Selection_types_1.SelectionMode.multiple : _c;\n        this.mode = selectionMode;\n        this._getKey = getKey || defaultGetKey;\n        this._changeEventSuppressionCount = 0;\n        this._exemptedCount = 0;\n        this._anchoredIndex = 0;\n        this._unselectableCount = 0;\n        this._onSelectionChanged = onSelectionChanged;\n        this._onItemsChanged = onItemsChanged;\n        this._canSelectItem = canSelectItem;\n        this._keyToIndexMap = {};\n        this._isModal = false;\n        this.setItems(items || [], true);\n        this.count = this.getSelectedCount();\n    }\n    Selection.prototype.canSelectItem = function (item, index) {\n        if (typeof index === 'number' && index < 0) {\n            return false;\n        }\n        return this._canSelectItem(item, index);\n    };\n    Selection.prototype.getKey = function (item, index) {\n        var key = this._getKey(item, index);\n        return typeof key === 'number' || key ? \"\" + key : '';\n    };\n    Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n        this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n        if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n            this._hasChanged = false;\n            if (!suppressChange) {\n                this._change();\n            }\n        }\n    };\n    Selection.prototype.isModal = function () {\n        return this._isModal;\n    };\n    Selection.prototype.setModal = function (isModal) {\n        if (this._isModal !== isModal) {\n            this.setChangeEvents(false);\n            this._isModal = isModal;\n            if (!isModal) {\n                this.setAllSelected(false);\n            }\n            this._change();\n            this.setChangeEvents(true);\n        }\n    };\n    /**\n     * Selection needs the items, call this method to set them. If the set\n     * of items is the same, this will re-evaluate selection and index maps.\n     * Otherwise, shouldClear should be set to true, so that selection is\n     * cleared.\n     */\n    Selection.prototype.setItems = function (items, shouldClear) {\n        if (shouldClear === void 0) { shouldClear = true; }\n        var newKeyToIndexMap = {};\n        var newUnselectableIndices = {};\n        var hasSelectionChanged = false;\n        this.setChangeEvents(false);\n        // Reset the unselectable count.\n        this._unselectableCount = 0;\n        var haveItemsChanged = false;\n        // Build lookup table for quick selection evaluation.\n        for (var i = 0; i < items.length; i++) {\n            var item = items[i];\n            if (item) {\n                var key = this.getKey(item, i);\n                if (key) {\n                    if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n                        haveItemsChanged = true;\n                    }\n                    newKeyToIndexMap[key] = i;\n                }\n            }\n            newUnselectableIndices[i] = item && !this.canSelectItem(item);\n            if (newUnselectableIndices[i]) {\n                this._unselectableCount++;\n            }\n        }\n        if (shouldClear || items.length === 0) {\n            this._setAllSelected(false, true);\n        }\n        // Check the exemption list for discrepencies.\n        var newExemptedIndicies = {};\n        var newExemptedCount = 0;\n        for (var indexProperty in this._exemptedIndices) {\n            if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n                var index = Number(indexProperty);\n                var item = this._items[index];\n                var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n                var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n                if (newIndex === undefined) {\n                    // The item has likely been replaced or removed.\n                    hasSelectionChanged = true;\n                }\n                else {\n                    // We know the new index of the item. update the existing exemption table.\n                    newExemptedIndicies[newIndex] = true;\n                    newExemptedCount++;\n                    hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n                }\n            }\n        }\n        if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n            // If everything was selected but the number of items has changed, selection has changed.\n            hasSelectionChanged = true;\n        }\n        if (!haveItemsChanged) {\n            for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n                var key = _a[_i];\n                if (!(key in newKeyToIndexMap)) {\n                    haveItemsChanged = true;\n                    break;\n                }\n            }\n        }\n        this._exemptedIndices = newExemptedIndicies;\n        this._exemptedCount = newExemptedCount;\n        this._keyToIndexMap = newKeyToIndexMap;\n        this._unselectableIndices = newUnselectableIndices;\n        this._items = items;\n        this._selectedItems = null;\n        if (hasSelectionChanged) {\n            this._updateCount();\n        }\n        if (haveItemsChanged) {\n            EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_ITEMS_CHANGE);\n            if (this._onItemsChanged) {\n                this._onItemsChanged();\n            }\n        }\n        if (hasSelectionChanged) {\n            this._change();\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.getItems = function () {\n        return this._items;\n    };\n    Selection.prototype.getSelection = function () {\n        if (!this._selectedItems) {\n            this._selectedItems = [];\n            var items = this._items;\n            if (items) {\n                for (var i = 0; i < items.length; i++) {\n                    if (this.isIndexSelected(i)) {\n                        this._selectedItems.push(items[i]);\n                    }\n                }\n            }\n        }\n        return this._selectedItems;\n    };\n    Selection.prototype.getSelectedCount = function () {\n        return this._isAllSelected\n            ? this._items.length - this._exemptedCount - this._unselectableCount\n            : this._exemptedCount;\n    };\n    Selection.prototype.getSelectedIndices = function () {\n        if (!this._selectedIndices) {\n            this._selectedIndices = [];\n            var items = this._items;\n            if (items) {\n                for (var i = 0; i < items.length; i++) {\n                    if (this.isIndexSelected(i)) {\n                        this._selectedIndices.push(i);\n                    }\n                }\n            }\n        }\n        return this._selectedIndices;\n    };\n    Selection.prototype.getItemIndex = function (key) {\n        var index = this._keyToIndexMap[key];\n        return (index !== null && index !== void 0 ? index : -1);\n    };\n    Selection.prototype.isRangeSelected = function (fromIndex, count) {\n        if (count === 0) {\n            return false;\n        }\n        var endIndex = fromIndex + count;\n        for (var i = fromIndex; i < endIndex; i++) {\n            if (!this.isIndexSelected(i)) {\n                return false;\n            }\n        }\n        return true;\n    };\n    Selection.prototype.isAllSelected = function () {\n        var selectableCount = this._items.length - this._unselectableCount;\n        // In single mode, we can only have a max of 1 item.\n        if (this.mode === Selection_types_1.SelectionMode.single) {\n            selectableCount = Math.min(selectableCount, 1);\n        }\n        return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n            (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n    };\n    Selection.prototype.isKeySelected = function (key) {\n        var index = this._keyToIndexMap[key];\n        return this.isIndexSelected(index);\n    };\n    Selection.prototype.isIndexSelected = function (index) {\n        return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n            (!this._isAllSelected && this._exemptedIndices[index]));\n    };\n    Selection.prototype.setAllSelected = function (isAllSelected) {\n        if (isAllSelected && this.mode !== Selection_types_1.SelectionMode.multiple) {\n            return;\n        }\n        var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n        this.setChangeEvents(false);\n        if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n            this._exemptedIndices = {};\n            if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n                this._exemptedCount = 0;\n                this._isAllSelected = isAllSelected;\n                this._change();\n            }\n            this._updateCount();\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n        var index = this._keyToIndexMap[key];\n        if (index >= 0) {\n            this.setIndexSelected(index, isSelected, shouldAnchor);\n        }\n    };\n    Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        // No-op on out of bounds selections.\n        if (index < 0 || index >= this._items.length) {\n            return;\n        }\n        this.setChangeEvents(false);\n        var isExempt = this._exemptedIndices[index];\n        var canSelect = !this._unselectableIndices[index];\n        if (canSelect) {\n            if (isSelected && this.mode === Selection_types_1.SelectionMode.single) {\n                // If this is single-select, the previous selection should be removed.\n                this._setAllSelected(false, true);\n            }\n            // Determine if we need to remove the exemption.\n            if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n                delete this._exemptedIndices[index];\n                this._exemptedCount--;\n            }\n            // Determine if we need to add the exemption.\n            if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n                this._exemptedIndices[index] = true;\n                this._exemptedCount++;\n            }\n            if (shouldAnchor) {\n                this._anchoredIndex = index;\n            }\n        }\n        this._updateCount();\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.setRangeSelected = function (fromIndex, count, isSelected, shouldAnchor) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        // No-op on out of bounds selections.\n        if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {\n            return;\n        }\n        this.setChangeEvents(false);\n        var anchorIndex = this._anchoredIndex || 0;\n        var startIndex = fromIndex;\n        var endIndex = fromIndex + count - 1;\n        var newAnchorIndex = anchorIndex >= endIndex ? startIndex : endIndex;\n        for (; startIndex <= endIndex; startIndex++) {\n            this.setIndexSelected(startIndex, isSelected, shouldAnchor ? startIndex === newAnchorIndex : false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.selectToKey = function (key, clearSelection) {\n        this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n    };\n    Selection.prototype.selectToRange = function (fromIndex, count, clearSelection) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        if (this.mode === Selection_types_1.SelectionMode.single) {\n            if (count === 1) {\n                this.setIndexSelected(fromIndex, true, true);\n            }\n            return;\n        }\n        var anchorIndex = this._anchoredIndex || 0;\n        var startIndex = Math.min(fromIndex, anchorIndex);\n        var endIndex = Math.max(fromIndex + count - 1, anchorIndex);\n        this.setChangeEvents(false);\n        if (clearSelection) {\n            this._setAllSelected(false, true);\n        }\n        for (; startIndex <= endIndex; startIndex++) {\n            this.setIndexSelected(startIndex, true, false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.selectToIndex = function (index, clearSelection) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        if (this.mode === Selection_types_1.SelectionMode.single) {\n            this.setIndexSelected(index, true, true);\n            return;\n        }\n        var anchorIndex = this._anchoredIndex || 0;\n        var startIndex = Math.min(index, anchorIndex);\n        var endIndex = Math.max(index, anchorIndex);\n        this.setChangeEvents(false);\n        if (clearSelection) {\n            this._setAllSelected(false, true);\n        }\n        for (; startIndex <= endIndex; startIndex++) {\n            this.setIndexSelected(startIndex, true, false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype.toggleAllSelected = function () {\n        this.setAllSelected(!this.isAllSelected());\n    };\n    Selection.prototype.toggleKeySelected = function (key) {\n        this.setKeySelected(key, !this.isKeySelected(key), true);\n    };\n    Selection.prototype.toggleIndexSelected = function (index) {\n        this.setIndexSelected(index, !this.isIndexSelected(index), true);\n    };\n    Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n        if (this.mode === Selection_types_1.SelectionMode.none) {\n            return;\n        }\n        var isRangeSelected = this.isRangeSelected(fromIndex, count);\n        var endIndex = fromIndex + count;\n        if (this.mode === Selection_types_1.SelectionMode.single && count > 1) {\n            return;\n        }\n        this.setChangeEvents(false);\n        for (var i = fromIndex; i < endIndex; i++) {\n            this.setIndexSelected(i, !isRangeSelected, false);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype._updateCount = function (preserveModalState) {\n        if (preserveModalState === void 0) { preserveModalState = false; }\n        var count = this.getSelectedCount();\n        if (count !== this.count) {\n            this.count = count;\n            this._change();\n        }\n        if (!this.count && !preserveModalState) {\n            this.setModal(false);\n        }\n    };\n    Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n        if (preserveModalState === void 0) { preserveModalState = false; }\n        if (isAllSelected && this.mode !== Selection_types_1.SelectionMode.multiple) {\n            return;\n        }\n        var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n        this.setChangeEvents(false);\n        if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n            this._exemptedIndices = {};\n            if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n                this._exemptedCount = 0;\n                this._isAllSelected = isAllSelected;\n                this._change();\n            }\n            this._updateCount(preserveModalState);\n        }\n        this.setChangeEvents(true);\n    };\n    Selection.prototype._change = function () {\n        if (this._changeEventSuppressionCount === 0) {\n            this._selectedItems = null;\n            this._selectedIndices = undefined;\n            EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_CHANGE);\n            if (this._onSelectionChanged) {\n                this._onSelectionChanged();\n            }\n        }\n        else {\n            this._hasChanged = true;\n        }\n    };\n    return Selection;\n}());\nexports.Selection = Selection;\nfunction defaultGetKey(item, index) {\n    // 0 may be used as a key\n    var _a = (item || {}).key, key = _a === void 0 ? \"\" + index : _a;\n    return key;\n}\n\n\n//# sourceURL=webpack:///../utilities/src/selection/Selection.ts?");
 
 /***/ }),
 
@@ -27151,7 +27163,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/utilities', '7.34.0');\n\n\n//# sourceURL=webpack:///../utilities/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/utilities', '7.34.1');\n\n\n//# sourceURL=webpack:///../utilities/src/version.ts?");
 
 /***/ }),
 
@@ -27355,7 +27367,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar _a, _b, _c, _d, _e, _f, _g, _h, _j;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\n/* eslint-disable @typescript-eslint/naming-convention */\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar GlobalClassNames = {\n    root: 'ms-Button',\n    icon: 'ms-Button-icon',\n};\nexports.ButtonSizeVariants = {\n    size_smallest: {\n        height: 'var(--button-size-smallest)',\n        minHeight: 'var(--button-size-smallest)',\n    },\n    size_smaller: {\n        height: 'var(--button-size-smaller)',\n        minHeight: 'var(--button-size-smaller)',\n    },\n    size_small: {\n        height: 'var(--button-size-small)',\n        minHeight: 'var(--button-size-small)',\n    },\n    size_large: {\n        height: 'var(--button-size-large)',\n        minHeight: 'var(--button-size-large)',\n    },\n    size_larger: {\n        height: 'var(--button-size-larger)',\n        minHeight: 'var(--button-size-larger)',\n    },\n    size_largest: {\n        height: 'var(--button-size-largest)',\n        minHeight: 'var(--button-size-largest)',\n    },\n};\nexports.useButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'Button',\n    prefix: '--button',\n    styles: {\n        root: [\n            GlobalClassNames.root,\n            (_a = {\n                    cursor: 'pointer',\n                    alignItems: 'center',\n                    borderStyle: 'solid',\n                    display: 'inline-flex',\n                    justifyContent: 'center',\n                    outline: 'none',\n                    position: 'relative',\n                    userSelect: 'none',\n                    boxSizing: 'border-box',\n                    verticalAlign: 'middle',\n                    textDecoration: 'none',\n                    background: 'var(--button-background)',\n                    color: 'var(--button-contentColor)',\n                    borderColor: 'var(--button-borderColor)',\n                    borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n                    borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n                    borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n                    borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n                    borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n                    borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n                    borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n                    borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n                    boxShadow: 'var(--button-boxShadow)',\n                    width: 'var(--button-width)',\n                    maxWidth: 'var(--button-maxWidth)',\n                    minWidth: 'var(--button-minWidth)',\n                    height: 'var(--button-height)',\n                    minHeight: 'var(--button-minHeight)',\n                    paddingLeft: 'var(--button-paddingLeft)',\n                    paddingRight: 'var(--button-paddingRight)',\n                    paddingTop: 'var(--button-paddingTop)',\n                    paddingBottom: 'var(--button-paddingBottom)',\n                    transition: 'var(--button-transition)',\n                    whiteSpace: 'var(--button-whiteSpace)',\n                    fontFamily: 'var(--button-fontFamily)',\n                    fontSize: 'var(--button-fontSize)',\n                    fontWeight: 'var(--button-fontWeight)',\n                    WebkitFontSmoothing: 'antialiased',\n                    MozOsxFontSmoothing: 'grayscale',\n                    ':global(.ms-Fabric--isFocusVisible) &:focus::after': (_b = {\n                            content: '\"\"',\n                            position: 'absolute',\n                            left: -1,\n                            right: -1,\n                            top: -1,\n                            bottom: -1,\n                            borderWidth: 'var(--button-focusWidth, 2px)',\n                            borderStyle: 'solid',\n                            borderColor: 'var(--button-focusColor, black)',\n                            borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n                            borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n                            borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n                            borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n                            zIndex: 1\n                        },\n                        _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                            borderColor: 'var(--button-highContrast-focusColor)',\n                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n                        },\n                        _b)\n                },\n                _a['& > *:not(:first-child)'] = {\n                    marginLeft: 'var(--button-contentGap)',\n                },\n                _a[styling_1.EdgeChromiumHighContrastSelector] = (_c = {\n                        forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n                        background: 'var(--button-highContrast-background)',\n                        borderColor: 'var(--button-highContrast-borderColor)',\n                        color: 'var(--button-highContrast-contentColor)'\n                    },\n                    _c[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-highContrast-iconColor)',\n                    },\n                    _c),\n                _a['&:hover'] = (_d = {\n                        background: 'var(--button-hovered-background, var(--button-background))',\n                        color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n                        borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n                        boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))'\n                    },\n                    _d[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n                    },\n                    _d[styling_1.EdgeChromiumHighContrastSelector] = (_e = {\n                            background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n                            borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n                            color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))'\n                        },\n                        _e[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n                        },\n                        _e),\n                    _d),\n                _a['&:active'] = (_f = {\n                        background: 'var(--button-pressed-background, var(--button-hovered-background))',\n                        color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n                        borderColor: 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n                        boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n                        transform: 'var(--button-pressed-transform)',\n                        transition: 'var(--button-pressed-transition)'\n                    },\n                    _f[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n                    },\n                    _f[styling_1.EdgeChromiumHighContrastSelector] = (_g = {\n                            background: 'var(--button-highContrast-pressed-background, ' +\n                                'var(--button-highContrast-hovered-background, ' +\n                                'var(--button-highContrast-background)))',\n                            borderColor: 'var(--button-highContrast-pressed-borderColor, ' +\n                                'var(--button-highContrast-hovered-borderColor, ' +\n                                'var(--button-highContrast-borderColor)))',\n                            color: 'var(--button-highContrast-pressed-contentColor, ' +\n                                'var(--button-highContrast-hovered-contentColor, ' +\n                                'var(--button-highContarst-contentColor)))'\n                        },\n                        _g[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-pressed-iconColor, ' +\n                                'var(--button-highContrast-hovered-iconColor, ' +\n                                'var(--button-highContrast-iconColor)))',\n                        },\n                        _g),\n                    _f),\n                _a['&[aria-disabled=true]'] = (_h = {\n                        pointerEvents: 'none',\n                        opacity: 'var(--button-disabled-opacity)',\n                        backgroundColor: 'var(--button-disabled-background)',\n                        color: 'var(--button-disabled-contentColor)',\n                        borderColor: 'var(--button-disabled-borderColor)',\n                        boxShadow: 'var(--button-disabled-boxShadow)'\n                    },\n                    _h[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-disabled-iconColor)',\n                    },\n                    _h[styling_1.EdgeChromiumHighContrastSelector] = (_j = {\n                            background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n                            borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n                            color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))'\n                        },\n                        _j[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n                        },\n                        _j),\n                    _h),\n                _a),\n        ],\n        icon: [\n            GlobalClassNames.icon,\n            {\n                color: 'var(--button-iconColor)',\n                display: 'flex',\n                flexShrink: 0,\n                alignItems: 'center',\n                justifyContent: 'center',\n                width: 'var(--button-iconSize)',\n                height: 'var(--button-iconSize)',\n                fontSize: 'var(--button-iconSize, inherit)',\n                fontWeight: 'normal',\n                lineHeight: '1',\n            },\n        ],\n        content: {\n            lineHeight: '1',\n        },\n    },\n    variants: function (theme) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;\n        var fonts = theme.fonts, effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;\n        return tslib_1.__assign({ root: {\n                size: {\n                    smallest: '24px',\n                    smaller: '24px',\n                    small: '24px',\n                    regular: '32px',\n                    large: '40px',\n                    larger: '48px',\n                    largest: '64px',\n                },\n                // Sizing tokens\n                iconSize: (_b = (_a = fonts) === null || _a === void 0 ? void 0 : _a.mediumPlus) === null || _b === void 0 ? void 0 : _b.fontSize,\n                borderWidth: '1px',\n                boxShadow: 'none',\n                borderRadius: (_c = effects) === null || _c === void 0 ? void 0 : _c.roundedCorner2,\n                paddingLeft: '20px',\n                paddingRight: '20px',\n                paddingTop: '0',\n                paddingBottom: '0',\n                margin: '0',\n                width: 'auto',\n                minWidth: '96px',\n                maxWidth: '280px',\n                minHeight: 'var(--button-size-regular)',\n                contentGap: '8px',\n                // Font tokens\n                fontWeight: '600',\n                fontSize: (_e = (_d = fonts) === null || _d === void 0 ? void 0 : _d.medium) === null || _e === void 0 ? void 0 : _e.fontSize,\n                fontFamily: (_g = (_f = fonts) === null || _f === void 0 ? void 0 : _f.medium) === null || _g === void 0 ? void 0 : _g.fontFamily,\n                // Color tokens\n                focusColor: (_h = palette) === null || _h === void 0 ? void 0 : _h.black,\n                focusInnerColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.white,\n                background: (_k = semanticColors) === null || _k === void 0 ? void 0 : _k.buttonBackground,\n                borderColor: (_l = semanticColors) === null || _l === void 0 ? void 0 : _l.buttonBorder,\n                contentColor: (_m = semanticColors) === null || _m === void 0 ? void 0 : _m.buttonText,\n                iconColor: 'inherit',\n                hovered: {\n                    background: (_o = semanticColors) === null || _o === void 0 ? void 0 : _o.buttonBackgroundHovered,\n                    contentColor: (_p = semanticColors) === null || _p === void 0 ? void 0 : _p.buttonTextHovered,\n                },\n                pressed: {\n                    background: (_q = semanticColors) === null || _q === void 0 ? void 0 : _q.buttonBackgroundPressed,\n                    contentColor: (_r = semanticColors) === null || _r === void 0 ? void 0 : _r.buttonTextPressed,\n                },\n                disabled: {\n                    background: (_s = semanticColors) === null || _s === void 0 ? void 0 : _s.buttonBackgroundDisabled,\n                    borderColor: (_t = semanticColors) === null || _t === void 0 ? void 0 : _t.buttonBorderDisabled,\n                    contentColor: (_u = semanticColors) === null || _u === void 0 ? void 0 : _u.buttonTextDisabled,\n                },\n                highContrast: {\n                    borderColor: 'WindowText',\n                    contentColor: 'WindowText',\n                    iconColor: 'WindowText',\n                    hovered: {\n                        borderColor: 'Highlight',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    pressed: {\n                        borderColor: 'Highlight',\n                        contentColor: 'WindowText',\n                        iconColor: 'WindowText',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'GrayText',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, circular: {\n                borderRadius: '50000px',\n            }, block: {\n                width: '100%',\n                maxWidth: 'none',\n            }, iconOnly: {\n                minWidth: 'var(--button-height)',\n                width: 'var(--button-height, var(--button-minHeight))',\n                paddingTop: '0',\n                paddingBottom: '0',\n                paddingLeft: '0',\n                paddingRight: '0',\n            }, primary: {\n                background: 'var(--color-brand-background)',\n                borderColor: 'var(--color-brand-borderColor)',\n                contentColor: 'var(--color-brand-contentColor)',\n                iconColor: 'inherit',\n                forcedColorAdjust: 'none',\n                hovered: {\n                    background: 'var(--color-brand-hovered-background)',\n                    borderColor: 'var(--color-brand-hovered-borderColor)',\n                    contentColor: 'var(--color-brand-hovered-contentColor)',\n                },\n                pressed: {\n                    background: 'var(--color-brand-pressed-background)',\n                    borderColor: 'var(--color-brand-pressed-borderColor)',\n                    contentColor: 'var(--color-brand-pressed-contentColor)',\n                },\n                highContrast: {\n                    background: 'WindowText',\n                    borderColor: 'WindowText',\n                    contentColor: 'Window',\n                    focusColor: 'WindowText',\n                    focusInnerColor: 'Window',\n                    iconColor: 'Window',\n                    hovered: {\n                        background: 'Highlight',\n                        borderColor: 'Highlight',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                    pressed: {\n                        background: 'WindowText',\n                        borderColor: 'WindowText',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'GrayText',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, \n            // TODO: no references to palette.\n            ghost: {\n                background: 'transparent',\n                borderColor: 'transparent',\n                contentColor: (_v = palette) === null || _v === void 0 ? void 0 : _v.neutralPrimary,\n                fontWeight: 'normal',\n                iconColor: (_w = palette) === null || _w === void 0 ? void 0 : _w.themeDarkAlt,\n                forcedColorAdjust: 'none',\n                disabled: {\n                    background: (_x = semanticColors) === null || _x === void 0 ? void 0 : _x.disabledBackground,\n                    contentColor: (_y = palette) === null || _y === void 0 ? void 0 : _y.neutralTertiary,\n                    iconColor: 'inherit',\n                },\n                expanded: {\n                    contentColor: (_z = palette) === null || _z === void 0 ? void 0 : _z.themePrimary,\n                },\n                focused: {\n                    contentColor: (_0 = palette) === null || _0 === void 0 ? void 0 : _0.neutralPrimary,\n                    iconColor: (_1 = palette) === null || _1 === void 0 ? void 0 : _1.themeDarkAlt,\n                },\n                hovered: {\n                    background: (_2 = palette) === null || _2 === void 0 ? void 0 : _2.neutralLighter,\n                    contentColor: (_3 = palette) === null || _3 === void 0 ? void 0 : _3.themePrimary,\n                    iconColor: (_4 = palette) === null || _4 === void 0 ? void 0 : _4.themePrimary,\n                },\n                pressed: {\n                    background: (_5 = palette) === null || _5 === void 0 ? void 0 : _5.neutralLight,\n                    contentColor: (_6 = palette) === null || _6 === void 0 ? void 0 : _6.black,\n                    iconColor: (_7 = palette) === null || _7 === void 0 ? void 0 : _7.themeDarker,\n                },\n                highContrast: {\n                    background: 'Window',\n                    borderColor: 'transparent',\n                    contentColor: 'WindowText',\n                    iconColor: 'WindowText',\n                    hovered: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    pressed: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, \n            // TODO: no references to palette.\n            transparent: {\n                background: 'transparent',\n                borderColor: 'transparent',\n                contentColor: (_8 = palette) === null || _8 === void 0 ? void 0 : _8.neutralPrimary,\n                fontWeight: 'normal',\n                iconColor: (_9 = palette) === null || _9 === void 0 ? void 0 : _9.themeDarkAlt,\n                disabled: {\n                    background: 'transparent',\n                    borderColor: 'transparent',\n                    contentColor: palette.neutralTertiary,\n                    iconColor: 'inherit',\n                },\n                hovered: {\n                    background: 'transparent',\n                    contentColor: (_10 = palette) === null || _10 === void 0 ? void 0 : _10.themePrimary,\n                    iconColor: (_11 = palette) === null || _11 === void 0 ? void 0 : _11.themePrimary,\n                },\n                pressed: {\n                    background: 'transparent',\n                    contentColor: (_12 = palette) === null || _12 === void 0 ? void 0 : _12.black,\n                    iconColor: (_13 = palette) === null || _13 === void 0 ? void 0 : _13.themeDarker,\n                },\n            } }, exports.ButtonSizeVariants);\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/Button/useButtonClasses.ts?");
+eval("\nvar _a, _b, _c, _d, _e, _f, _g, _h, _j;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\n/* eslint-disable @typescript-eslint/naming-convention */\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar GlobalClassNames = {\n    root: 'ms-Button',\n    icon: 'ms-Button-icon',\n};\nexports.ButtonSizeVariants = {\n    size_smallest: {\n        height: 'var(--button-size-smallest)',\n        minHeight: 'var(--button-size-smallest)',\n    },\n    size_smaller: {\n        height: 'var(--button-size-smaller)',\n        minHeight: 'var(--button-size-smaller)',\n    },\n    size_small: {\n        height: 'var(--button-size-small)',\n        minHeight: 'var(--button-size-small)',\n    },\n    size_large: {\n        height: 'var(--button-size-large)',\n        minHeight: 'var(--button-size-large)',\n    },\n    size_larger: {\n        height: 'var(--button-size-larger)',\n        minHeight: 'var(--button-size-larger)',\n    },\n    size_largest: {\n        height: 'var(--button-size-largest)',\n        minHeight: 'var(--button-size-largest)',\n    },\n};\nexports.useButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'Button',\n    prefix: '--button',\n    styles: {\n        root: [\n            GlobalClassNames.root,\n            (_a = {\n                    cursor: 'pointer',\n                    alignItems: 'center',\n                    borderStyle: 'solid',\n                    display: 'inline-flex',\n                    justifyContent: 'center',\n                    outline: 'none',\n                    position: 'relative',\n                    userSelect: 'none',\n                    boxSizing: 'border-box',\n                    verticalAlign: 'middle',\n                    textDecoration: 'none',\n                    background: 'var(--button-background)',\n                    color: 'var(--button-contentColor)',\n                    borderColor: 'var(--button-borderColor)',\n                    borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n                    borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n                    borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n                    borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n                    borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n                    borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n                    borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n                    borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n                    boxShadow: 'var(--button-boxShadow)',\n                    width: 'var(--button-width)',\n                    maxWidth: 'var(--button-maxWidth)',\n                    minWidth: 'var(--button-minWidth)',\n                    height: 'var(--button-height)',\n                    minHeight: 'var(--button-minHeight)',\n                    paddingLeft: 'var(--button-paddingLeft)',\n                    paddingRight: 'var(--button-paddingRight)',\n                    paddingTop: 'var(--button-paddingTop)',\n                    paddingBottom: 'var(--button-paddingBottom)',\n                    transition: 'var(--button-transition)',\n                    whiteSpace: 'var(--button-whiteSpace)',\n                    fontFamily: 'var(--button-fontFamily)',\n                    fontSize: 'var(--button-fontSize)',\n                    fontWeight: 'var(--button-fontWeight)',\n                    WebkitFontSmoothing: 'antialiased',\n                    MozOsxFontSmoothing: 'grayscale',\n                    ':global(.ms-Fabric--isFocusVisible) &:focus::after': (_b = {\n                            content: '\"\"',\n                            position: 'absolute',\n                            left: -1,\n                            right: -1,\n                            top: -1,\n                            bottom: -1,\n                            borderWidth: 'var(--button-focusWidth, 2px)',\n                            borderStyle: 'solid',\n                            borderColor: 'var(--button-focusColor, black)',\n                            borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n                            borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n                            borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n                            borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n                            zIndex: 1\n                        },\n                        // eslint-disable-next-line deprecation/deprecation\n                        _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                            borderColor: 'var(--button-highContrast-focusColor)',\n                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n                        },\n                        _b)\n                },\n                _a['& > *:not(:first-child)'] = {\n                    marginLeft: 'var(--button-contentGap)',\n                },\n                // eslint-disable-next-line deprecation/deprecation\n                _a[styling_1.EdgeChromiumHighContrastSelector] = (_c = {\n                        forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n                        background: 'var(--button-highContrast-background)',\n                        borderColor: 'var(--button-highContrast-borderColor)',\n                        color: 'var(--button-highContrast-contentColor)'\n                    },\n                    _c[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-highContrast-iconColor)',\n                    },\n                    _c),\n                _a['&:hover'] = (_d = {\n                        background: 'var(--button-hovered-background, var(--button-background))',\n                        color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n                        borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n                        boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))'\n                    },\n                    _d[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n                    },\n                    // eslint-disable-next-line deprecation/deprecation\n                    _d[styling_1.EdgeChromiumHighContrastSelector] = (_e = {\n                            background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n                            borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n                            color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))'\n                        },\n                        _e[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n                        },\n                        _e),\n                    _d),\n                _a['&:active'] = (_f = {\n                        background: 'var(--button-pressed-background, var(--button-hovered-background))',\n                        color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n                        borderColor: 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n                        boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n                        transform: 'var(--button-pressed-transform)',\n                        transition: 'var(--button-pressed-transition)'\n                    },\n                    _f[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n                    },\n                    // eslint-disable-next-line deprecation/deprecation\n                    _f[styling_1.EdgeChromiumHighContrastSelector] = (_g = {\n                            background: 'var(--button-highContrast-pressed-background, ' +\n                                'var(--button-highContrast-hovered-background, ' +\n                                'var(--button-highContrast-background)))',\n                            borderColor: 'var(--button-highContrast-pressed-borderColor, ' +\n                                'var(--button-highContrast-hovered-borderColor, ' +\n                                'var(--button-highContrast-borderColor)))',\n                            color: 'var(--button-highContrast-pressed-contentColor, ' +\n                                'var(--button-highContrast-hovered-contentColor, ' +\n                                'var(--button-highContarst-contentColor)))'\n                        },\n                        _g[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-pressed-iconColor, ' +\n                                'var(--button-highContrast-hovered-iconColor, ' +\n                                'var(--button-highContrast-iconColor)))',\n                        },\n                        _g),\n                    _f),\n                _a['&[aria-disabled=true]'] = (_h = {\n                        pointerEvents: 'none',\n                        opacity: 'var(--button-disabled-opacity)',\n                        backgroundColor: 'var(--button-disabled-background)',\n                        color: 'var(--button-disabled-contentColor)',\n                        borderColor: 'var(--button-disabled-borderColor)',\n                        boxShadow: 'var(--button-disabled-boxShadow)'\n                    },\n                    _h[\".\" + GlobalClassNames.icon] = {\n                        color: 'var(--button-disabled-iconColor)',\n                    },\n                    // eslint-disable-next-line deprecation/deprecation\n                    _h[styling_1.EdgeChromiumHighContrastSelector] = (_j = {\n                            background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n                            borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n                            color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))'\n                        },\n                        _j[\".\" + GlobalClassNames.icon] = {\n                            color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n                        },\n                        _j),\n                    _h),\n                _a),\n        ],\n        icon: [\n            GlobalClassNames.icon,\n            {\n                color: 'var(--button-iconColor)',\n                display: 'flex',\n                flexShrink: 0,\n                alignItems: 'center',\n                justifyContent: 'center',\n                width: 'var(--button-iconSize)',\n                height: 'var(--button-iconSize)',\n                fontSize: 'var(--button-iconSize, inherit)',\n                fontWeight: 'normal',\n                lineHeight: '1',\n            },\n        ],\n        content: {\n            lineHeight: '1',\n        },\n    },\n    variants: function (theme) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;\n        var fonts = theme.fonts, effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;\n        return tslib_1.__assign({ root: {\n                size: {\n                    smallest: '24px',\n                    smaller: '24px',\n                    small: '24px',\n                    regular: '32px',\n                    large: '40px',\n                    larger: '48px',\n                    largest: '64px',\n                },\n                // Sizing tokens\n                iconSize: (_b = (_a = fonts) === null || _a === void 0 ? void 0 : _a.mediumPlus) === null || _b === void 0 ? void 0 : _b.fontSize,\n                borderWidth: '1px',\n                boxShadow: 'none',\n                borderRadius: (_c = effects) === null || _c === void 0 ? void 0 : _c.roundedCorner2,\n                paddingLeft: '20px',\n                paddingRight: '20px',\n                paddingTop: '0',\n                paddingBottom: '0',\n                margin: '0',\n                width: 'auto',\n                minWidth: '96px',\n                maxWidth: '280px',\n                minHeight: 'var(--button-size-regular)',\n                contentGap: '8px',\n                // Font tokens\n                fontWeight: '600',\n                fontSize: (_e = (_d = fonts) === null || _d === void 0 ? void 0 : _d.medium) === null || _e === void 0 ? void 0 : _e.fontSize,\n                fontFamily: (_g = (_f = fonts) === null || _f === void 0 ? void 0 : _f.medium) === null || _g === void 0 ? void 0 : _g.fontFamily,\n                // Color tokens\n                focusColor: (_h = palette) === null || _h === void 0 ? void 0 : _h.black,\n                focusInnerColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.white,\n                background: (_k = semanticColors) === null || _k === void 0 ? void 0 : _k.buttonBackground,\n                borderColor: (_l = semanticColors) === null || _l === void 0 ? void 0 : _l.buttonBorder,\n                contentColor: (_m = semanticColors) === null || _m === void 0 ? void 0 : _m.buttonText,\n                iconColor: 'inherit',\n                hovered: {\n                    background: (_o = semanticColors) === null || _o === void 0 ? void 0 : _o.buttonBackgroundHovered,\n                    contentColor: (_p = semanticColors) === null || _p === void 0 ? void 0 : _p.buttonTextHovered,\n                },\n                pressed: {\n                    background: (_q = semanticColors) === null || _q === void 0 ? void 0 : _q.buttonBackgroundPressed,\n                    contentColor: (_r = semanticColors) === null || _r === void 0 ? void 0 : _r.buttonTextPressed,\n                },\n                disabled: {\n                    background: (_s = semanticColors) === null || _s === void 0 ? void 0 : _s.buttonBackgroundDisabled,\n                    borderColor: (_t = semanticColors) === null || _t === void 0 ? void 0 : _t.buttonBorderDisabled,\n                    contentColor: (_u = semanticColors) === null || _u === void 0 ? void 0 : _u.buttonTextDisabled,\n                },\n                highContrast: {\n                    borderColor: 'WindowText',\n                    contentColor: 'WindowText',\n                    iconColor: 'WindowText',\n                    hovered: {\n                        borderColor: 'Highlight',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    pressed: {\n                        borderColor: 'Highlight',\n                        contentColor: 'WindowText',\n                        iconColor: 'WindowText',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'GrayText',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, circular: {\n                borderRadius: '50000px',\n            }, block: {\n                width: '100%',\n                maxWidth: 'none',\n            }, iconOnly: {\n                minWidth: 'var(--button-height)',\n                width: 'var(--button-height, var(--button-minHeight))',\n                paddingTop: '0',\n                paddingBottom: '0',\n                paddingLeft: '0',\n                paddingRight: '0',\n            }, primary: {\n                background: 'var(--color-brand-background)',\n                borderColor: 'var(--color-brand-borderColor)',\n                contentColor: 'var(--color-brand-contentColor)',\n                iconColor: 'inherit',\n                forcedColorAdjust: 'none',\n                hovered: {\n                    background: 'var(--color-brand-hovered-background)',\n                    borderColor: 'var(--color-brand-hovered-borderColor)',\n                    contentColor: 'var(--color-brand-hovered-contentColor)',\n                },\n                pressed: {\n                    background: 'var(--color-brand-pressed-background)',\n                    borderColor: 'var(--color-brand-pressed-borderColor)',\n                    contentColor: 'var(--color-brand-pressed-contentColor)',\n                },\n                highContrast: {\n                    background: 'WindowText',\n                    borderColor: 'WindowText',\n                    contentColor: 'Window',\n                    focusColor: 'WindowText',\n                    focusInnerColor: 'Window',\n                    iconColor: 'Window',\n                    hovered: {\n                        background: 'Highlight',\n                        borderColor: 'Highlight',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                    pressed: {\n                        background: 'WindowText',\n                        borderColor: 'WindowText',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'GrayText',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, \n            // TODO: no references to palette.\n            ghost: {\n                background: 'transparent',\n                borderColor: 'transparent',\n                contentColor: (_v = palette) === null || _v === void 0 ? void 0 : _v.neutralPrimary,\n                fontWeight: 'normal',\n                iconColor: (_w = palette) === null || _w === void 0 ? void 0 : _w.themeDarkAlt,\n                forcedColorAdjust: 'none',\n                disabled: {\n                    background: (_x = semanticColors) === null || _x === void 0 ? void 0 : _x.disabledBackground,\n                    contentColor: (_y = palette) === null || _y === void 0 ? void 0 : _y.neutralTertiary,\n                    iconColor: 'inherit',\n                },\n                expanded: {\n                    contentColor: (_z = palette) === null || _z === void 0 ? void 0 : _z.themePrimary,\n                },\n                focused: {\n                    contentColor: (_0 = palette) === null || _0 === void 0 ? void 0 : _0.neutralPrimary,\n                    iconColor: (_1 = palette) === null || _1 === void 0 ? void 0 : _1.themeDarkAlt,\n                },\n                hovered: {\n                    background: (_2 = palette) === null || _2 === void 0 ? void 0 : _2.neutralLighter,\n                    contentColor: (_3 = palette) === null || _3 === void 0 ? void 0 : _3.themePrimary,\n                    iconColor: (_4 = palette) === null || _4 === void 0 ? void 0 : _4.themePrimary,\n                },\n                pressed: {\n                    background: (_5 = palette) === null || _5 === void 0 ? void 0 : _5.neutralLight,\n                    contentColor: (_6 = palette) === null || _6 === void 0 ? void 0 : _6.black,\n                    iconColor: (_7 = palette) === null || _7 === void 0 ? void 0 : _7.themeDarker,\n                },\n                highContrast: {\n                    background: 'Window',\n                    borderColor: 'transparent',\n                    contentColor: 'WindowText',\n                    iconColor: 'WindowText',\n                    hovered: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    pressed: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                    disabled: {\n                        background: 'Window',\n                        borderColor: 'transparent',\n                        contentColor: 'GrayText',\n                        iconColor: 'GrayText',\n                    },\n                },\n            }, \n            // TODO: no references to palette.\n            transparent: {\n                background: 'transparent',\n                borderColor: 'transparent',\n                contentColor: (_8 = palette) === null || _8 === void 0 ? void 0 : _8.neutralPrimary,\n                fontWeight: 'normal',\n                iconColor: (_9 = palette) === null || _9 === void 0 ? void 0 : _9.themeDarkAlt,\n                disabled: {\n                    background: 'transparent',\n                    borderColor: 'transparent',\n                    contentColor: palette.neutralTertiary,\n                    iconColor: 'inherit',\n                },\n                hovered: {\n                    background: 'transparent',\n                    contentColor: (_10 = palette) === null || _10 === void 0 ? void 0 : _10.themePrimary,\n                    iconColor: (_11 = palette) === null || _11 === void 0 ? void 0 : _11.themePrimary,\n                },\n                pressed: {\n                    background: 'transparent',\n                    contentColor: (_12 = palette) === null || _12 === void 0 ? void 0 : _12.black,\n                    iconColor: (_13 = palette) === null || _13 === void 0 ? void 0 : _13.themeDarker,\n                },\n            } }, exports.ButtonSizeVariants);\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/Button/useButtonClasses.ts?");
 
 /***/ }),
 
@@ -27607,7 +27619,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar _a, _b, _c, _d;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar index_1 = __webpack_require__(/*! ../Button/index */ \"./src/components/Button/index.ts\");\nvar GlobalClassNames = {\n    root: 'ms-SplitButton',\n    button: 'ms-SplitButton-button',\n    menuButton: 'ms-SplitButton-menuButton',\n};\nvar menuButtonWidth = '32px';\nexports.useSplitButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'SplitButton',\n    prefix: '--button',\n    styles: {\n        root: [\n            GlobalClassNames.root,\n            {\n                display: 'inline-flex',\n                justifyContent: 'stretch',\n                position: 'relative',\n                // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n                '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n            },\n        ],\n        button: [\n            GlobalClassNames.button,\n            {\n                '--button-borderRightWidth': 0,\n                '--button-borderTopRightRadius': 0,\n                '--button-borderBottomRightRadius': 0,\n            },\n        ],\n        menuButton: [\n            GlobalClassNames.menuButton,\n            (_a = {},\n                // Scope the override to a child component, increase specificity.\n                _a[\".\" + GlobalClassNames.root + \" &\"] = {\n                    width: menuButtonWidth,\n                    minWidth: menuButtonWidth,\n                    '--button-borderLeftWidth': 0,\n                    '--button-borderTopLeftRadius': 0,\n                    '--button-borderBottomLeftRadius': 0,\n                    '--button-iconColor': 'var(--button-menuIconColor)',\n                    '--button-iconSize': 'var(--button-splitMenuIconSize)',\n                },\n                _a),\n        ],\n        divider: (_b = {\n                width: 'var(--button-dividerThickness)',\n                backgroundColor: 'var(--button-dividerColor)',\n                position: 'absolute',\n                right: menuButtonWidth,\n                top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n                bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'\n            },\n            _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                backgroundColor: 'var(--button-highContrast-dividerColor)',\n            },\n            _b[\".\" + GlobalClassNames.root + \"[aria-disabled=\\\"true\\\"] &\"] = (_c = {\n                    backgroundColor: 'var(--button-disabled-dividerColor)'\n                },\n                _c[styling_1.EdgeChromiumHighContrastSelector] = {\n                    backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n                },\n                _c),\n            _b),\n        _block: (_d = {\n                width: '100%',\n                maxWidth: '100%'\n            },\n            _d[\".\" + GlobalClassNames.button] = {\n                flexGrow: 1,\n                maxWidth: '100%',\n            },\n            _d[\".\" + GlobalClassNames.menuButton] = {\n                width: menuButtonWidth,\n            },\n            _d),\n    },\n    variants: function (theme) {\n        var _a;\n        var palette = theme.palette, semanticColors = theme.semanticColors;\n        return tslib_1.__assign({ root: {\n                size: {\n                    smallest: '24px',\n                    smaller: '24px',\n                    small: '24px',\n                    regular: '32px',\n                    large: '40px',\n                    larger: '48px',\n                    largest: '64px',\n                },\n                dividerThickness: '1px',\n                dividerColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralTertiaryAlt,\n                disabled: {\n                    dividerColor: semanticColors.disabledText,\n                },\n                menuIconColor: 'var(--body-menuIconColor)',\n                menuIconSize: '12px',\n                highContrast: {\n                    dividerColor: 'WindowText',\n                    disabled: {\n                        dividerColor: 'GrayText',\n                    },\n                },\n            }, primary: {\n                dividerColor: palette.white,\n                disabled: {\n                    dividerColor: semanticColors.disabledText,\n                },\n                highContrast: {\n                    dividerColor: 'Window',\n                    disabled: {\n                        dividerColor: 'GrayText',\n                    },\n                },\n            }, transparent: {\n                menuIconColor: palette.neutralSecondary,\n            } }, index_1.ButtonSizeVariants);\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/SplitButton/useSplitButtonClasses.tsx?");
+eval("\nvar _a, _b, _c, _d;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar tslib_1 = __webpack_require__(/*! tslib */ \"../../node_modules/tslib/tslib.es6.js\");\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar index_1 = __webpack_require__(/*! ../Button/index */ \"./src/components/Button/index.ts\");\nvar GlobalClassNames = {\n    root: 'ms-SplitButton',\n    button: 'ms-SplitButton-button',\n    menuButton: 'ms-SplitButton-menuButton',\n};\nvar menuButtonWidth = '32px';\nexports.useSplitButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'SplitButton',\n    prefix: '--button',\n    styles: {\n        root: [\n            GlobalClassNames.root,\n            {\n                display: 'inline-flex',\n                justifyContent: 'stretch',\n                position: 'relative',\n                // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n                '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n            },\n        ],\n        button: [\n            GlobalClassNames.button,\n            {\n                '--button-borderRightWidth': 0,\n                '--button-borderTopRightRadius': 0,\n                '--button-borderBottomRightRadius': 0,\n            },\n        ],\n        menuButton: [\n            GlobalClassNames.menuButton,\n            (_a = {},\n                // Scope the override to a child component, increase specificity.\n                _a[\".\" + GlobalClassNames.root + \" &\"] = {\n                    width: menuButtonWidth,\n                    minWidth: menuButtonWidth,\n                    '--button-borderLeftWidth': 0,\n                    '--button-borderTopLeftRadius': 0,\n                    '--button-borderBottomLeftRadius': 0,\n                    '--button-iconColor': 'var(--button-menuIconColor)',\n                    '--button-iconSize': 'var(--button-splitMenuIconSize)',\n                },\n                _a),\n        ],\n        divider: (_b = {\n                width: 'var(--button-dividerThickness)',\n                backgroundColor: 'var(--button-dividerColor)',\n                position: 'absolute',\n                right: menuButtonWidth,\n                top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n                bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'\n            },\n            // eslint-disable-next-line deprecation/deprecation\n            _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                backgroundColor: 'var(--button-highContrast-dividerColor)',\n            },\n            _b[\".\" + GlobalClassNames.root + \"[aria-disabled=\\\"true\\\"] &\"] = (_c = {\n                    backgroundColor: 'var(--button-disabled-dividerColor)'\n                },\n                // eslint-disable-next-line deprecation/deprecation\n                _c[styling_1.EdgeChromiumHighContrastSelector] = {\n                    backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n                },\n                _c),\n            _b),\n        _block: (_d = {\n                width: '100%',\n                maxWidth: '100%'\n            },\n            _d[\".\" + GlobalClassNames.button] = {\n                flexGrow: 1,\n                maxWidth: '100%',\n            },\n            _d[\".\" + GlobalClassNames.menuButton] = {\n                width: menuButtonWidth,\n            },\n            _d),\n    },\n    variants: function (theme) {\n        var _a;\n        var palette = theme.palette, semanticColors = theme.semanticColors;\n        return tslib_1.__assign({ root: {\n                size: {\n                    smallest: '24px',\n                    smaller: '24px',\n                    small: '24px',\n                    regular: '32px',\n                    large: '40px',\n                    larger: '48px',\n                    largest: '64px',\n                },\n                dividerThickness: '1px',\n                dividerColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralTertiaryAlt,\n                disabled: {\n                    dividerColor: semanticColors.disabledText,\n                },\n                menuIconColor: 'var(--body-menuIconColor)',\n                menuIconSize: '12px',\n                highContrast: {\n                    dividerColor: 'WindowText',\n                    disabled: {\n                        dividerColor: 'GrayText',\n                    },\n                },\n            }, primary: {\n                dividerColor: palette.white,\n                disabled: {\n                    dividerColor: semanticColors.disabledText,\n                },\n                highContrast: {\n                    dividerColor: 'Window',\n                    disabled: {\n                        dividerColor: 'GrayText',\n                    },\n                },\n            }, transparent: {\n                menuIconColor: palette.neutralSecondary,\n            } }, index_1.ButtonSizeVariants);\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/SplitButton/useSplitButtonClasses.tsx?");
 
 /***/ }),
 
@@ -27691,7 +27703,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar us
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar _a, _b, _c;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nexports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'ToggleButton',\n    prefix: '--button',\n    styles: {\n        // When checked is applied, apply the right tokens to the right css properties.\n        _checked: (_a = {\n                background: 'var(--button-checked-background)',\n                color: 'var(--button-checked-contentColor)',\n                '.ms-Button-icon': {\n                    color: 'var(--button-checked-iconColor)',\n                }\n            },\n            _a[styling_1.EdgeChromiumHighContrastSelector] = {\n                background: 'var(--button-highContrast-checked-background)',\n                color: 'var(--button-highContrast-checked-contentColor)',\n                '.ms-Button-icon': {\n                    color: 'var(--button-highContrast-checked-iconColor)',\n                },\n            },\n            _a[':hover'] = (_b = {\n                    background: 'var(--button-checkedHovered-background)',\n                    color: 'var(--button-checkedHovered-contentColor)',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-checkedHovered-iconColor)',\n                    }\n                },\n                _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                    background: 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n                    color: 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n                    },\n                },\n                _b),\n            _a[':active'] = (_c = {\n                    background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n                    color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n                    }\n                },\n                _c[styling_1.EdgeChromiumHighContrastSelector] = {\n                    background: 'var(--button-highContrast-checkedPressed-background, ' +\n                        'var(--button-highContrast-checkedHovered-background, ' +\n                        'var(--button-highContrast-checked-background)))',\n                    color: 'var(--button-highContrast-checked--pressed-contentColor, ' +\n                        'var(--button-highContrast-checked--hovered-contentColor, ' +\n                        'var(--button-highContrast-checked-contentColor)))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-highContrast-checkedPressed-iconColor, ' +\n                            'var(--button-highContrast-checkedHovered-iconColor, ' +\n                            '--button-highContrast-checked-iconColor)))',\n                    },\n                },\n                _c),\n            _a),\n    },\n    variants: function (theme) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n        var palette = theme.palette, semanticColors = theme.semanticColors;\n        return {\n            root: {\n                checked: {\n                    background: (_a = semanticColors) === null || _a === void 0 ? void 0 : _a.buttonBackgroundPressed,\n                    contentColor: (_b = semanticColors) === null || _b === void 0 ? void 0 : _b.buttonTextChecked,\n                },\n                checkedHovered: {\n                    background: (_c = semanticColors) === null || _c === void 0 ? void 0 : _c.buttonBackgroundPressed,\n                    contentColor: (_d = semanticColors) === null || _d === void 0 ? void 0 : _d.buttonTextCheckedHovered,\n                },\n                highContrast: {\n                    checked: {\n                        background: 'Window',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                },\n            },\n            primary: {\n                checked: {\n                    background: 'var(--color-brand-checked-background)',\n                    contentColor: 'var(--color-brand-checked-contentColor)',\n                },\n                checkedHovered: {\n                    background: 'var(--color-brand-checkedHovered-background)',\n                    contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n                },\n                checkedPressed: {\n                    background: 'var(--color-brand-checkedPressed-background)',\n                    contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n                },\n                highContrast: {\n                    checked: {\n                        background: 'Highlight',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                },\n            },\n            ghost: {\n                checked: {\n                    background: (_e = palette) === null || _e === void 0 ? void 0 : _e.neutralLight,\n                    contentColor: (_f = palette) === null || _f === void 0 ? void 0 : _f.neutralDark,\n                    iconColor: (_g = palette) === null || _g === void 0 ? void 0 : _g.themeDark,\n                },\n                checkedHovered: {\n                    background: (_h = palette) === null || _h === void 0 ? void 0 : _h.neutralQuaternaryAlt,\n                    contentColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.neutralDark,\n                    iconColor: (_k = palette) === null || _k === void 0 ? void 0 : _k.themeDark,\n                },\n            },\n            transparent: {\n                checked: {\n                    background: 'transparent',\n                    contentColor: (_l = palette) === null || _l === void 0 ? void 0 : _l.themePrimary,\n                    iconColor: (_m = palette) === null || _m === void 0 ? void 0 : _m.themePrimary,\n                },\n                checkedHovered: {\n                    background: 'transparent',\n                    contentColor: (_o = palette) === null || _o === void 0 ? void 0 : _o.black,\n                    iconColor: (_p = palette) === null || _p === void 0 ? void 0 : _p.themeDarker,\n                },\n            },\n        };\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/ToggleButton/useToggleButtonClasses.tsx?");
+eval("\nvar _a, _b, _c;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar styling_1 = __webpack_require__(/*! @uifabric/styling */ \"../styling/src/index.ts\");\nvar react_theme_provider_1 = __webpack_require__(/*! @fluentui/react-theme-provider */ \"../react-theme-provider/src/index.ts\");\nexports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({\n    name: 'ToggleButton',\n    prefix: '--button',\n    styles: {\n        // When checked is applied, apply the right tokens to the right css properties.\n        _checked: (_a = {\n                background: 'var(--button-checked-background)',\n                color: 'var(--button-checked-contentColor)',\n                '.ms-Button-icon': {\n                    color: 'var(--button-checked-iconColor)',\n                }\n            },\n            // eslint-disable-next-line deprecation/deprecation\n            _a[styling_1.EdgeChromiumHighContrastSelector] = {\n                background: 'var(--button-highContrast-checked-background)',\n                color: 'var(--button-highContrast-checked-contentColor)',\n                '.ms-Button-icon': {\n                    color: 'var(--button-highContrast-checked-iconColor)',\n                },\n            },\n            _a[':hover'] = (_b = {\n                    background: 'var(--button-checkedHovered-background)',\n                    color: 'var(--button-checkedHovered-contentColor)',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-checkedHovered-iconColor)',\n                    }\n                },\n                // eslint-disable-next-line deprecation/deprecation\n                _b[styling_1.EdgeChromiumHighContrastSelector] = {\n                    background: 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n                    color: 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n                    },\n                },\n                _b),\n            _a[':active'] = (_c = {\n                    background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n                    color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n                    }\n                },\n                // eslint-disable-next-line deprecation/deprecation\n                _c[styling_1.EdgeChromiumHighContrastSelector] = {\n                    background: 'var(--button-highContrast-checkedPressed-background, ' +\n                        'var(--button-highContrast-checkedHovered-background, ' +\n                        'var(--button-highContrast-checked-background)))',\n                    color: 'var(--button-highContrast-checked--pressed-contentColor, ' +\n                        'var(--button-highContrast-checked--hovered-contentColor, ' +\n                        'var(--button-highContrast-checked-contentColor)))',\n                    '.ms-Button-icon': {\n                        color: 'var(--button-highContrast-checkedPressed-iconColor, ' +\n                            'var(--button-highContrast-checkedHovered-iconColor, ' +\n                            '--button-highContrast-checked-iconColor)))',\n                    },\n                },\n                _c),\n            _a),\n    },\n    variants: function (theme) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n        var palette = theme.palette, semanticColors = theme.semanticColors;\n        return {\n            root: {\n                checked: {\n                    background: (_a = semanticColors) === null || _a === void 0 ? void 0 : _a.buttonBackgroundPressed,\n                    contentColor: (_b = semanticColors) === null || _b === void 0 ? void 0 : _b.buttonTextChecked,\n                },\n                checkedHovered: {\n                    background: (_c = semanticColors) === null || _c === void 0 ? void 0 : _c.buttonBackgroundPressed,\n                    contentColor: (_d = semanticColors) === null || _d === void 0 ? void 0 : _d.buttonTextCheckedHovered,\n                },\n                highContrast: {\n                    checked: {\n                        background: 'Window',\n                        contentColor: 'Highlight',\n                        iconColor: 'Highlight',\n                    },\n                },\n            },\n            primary: {\n                checked: {\n                    background: 'var(--color-brand-checked-background)',\n                    contentColor: 'var(--color-brand-checked-contentColor)',\n                },\n                checkedHovered: {\n                    background: 'var(--color-brand-checkedHovered-background)',\n                    contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n                },\n                checkedPressed: {\n                    background: 'var(--color-brand-checkedPressed-background)',\n                    contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n                },\n                highContrast: {\n                    checked: {\n                        background: 'Highlight',\n                        contentColor: 'Window',\n                        iconColor: 'Window',\n                    },\n                },\n            },\n            ghost: {\n                checked: {\n                    background: (_e = palette) === null || _e === void 0 ? void 0 : _e.neutralLight,\n                    contentColor: (_f = palette) === null || _f === void 0 ? void 0 : _f.neutralDark,\n                    iconColor: (_g = palette) === null || _g === void 0 ? void 0 : _g.themeDark,\n                },\n                checkedHovered: {\n                    background: (_h = palette) === null || _h === void 0 ? void 0 : _h.neutralQuaternaryAlt,\n                    contentColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.neutralDark,\n                    iconColor: (_k = palette) === null || _k === void 0 ? void 0 : _k.themeDark,\n                },\n            },\n            transparent: {\n                checked: {\n                    background: 'transparent',\n                    contentColor: (_l = palette) === null || _l === void 0 ? void 0 : _l.themePrimary,\n                    iconColor: (_m = palette) === null || _m === void 0 ? void 0 : _m.themePrimary,\n                },\n                checkedHovered: {\n                    background: 'transparent',\n                    contentColor: (_o = palette) === null || _o === void 0 ? void 0 : _o.black,\n                    iconColor: (_p = palette) === null || _p === void 0 ? void 0 : _p.themeDarker,\n                },\n            },\n        };\n    },\n});\n\n\n//# sourceURL=webpack:///./src/components/ToggleButton/useToggleButtonClasses.tsx?");
 
 /***/ }),
 
@@ -27715,7 +27727,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-button', '0.20.2');\n\n\n//# sourceURL=webpack:///./src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-button', '0.20.5');\n\n\n//# sourceURL=webpack:///./src/version.ts?");
 
 /***/ }),
 

package/dist-storybook/iframe.html

@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.87dadd1789d336577e59.bundle.js"></script><script src="vendors~main.87dadd1789d336577e59.bundle.js"></script><script src="main.87dadd1789d336577e59.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.79b142f95c33679e88d5.bundle.js"></script><script src="vendors~main.79b142f95c33679e88d5.bundle.js"></script><script src="main.79b142f95c33679e88d5.bundle.js"></script></body></html>