@fluentui/react-button 0.20.3 → 0.20.4

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 19 May 2022 12:26:46 GMT",
+      "date": "Fri, 08 Jul 2022 12:21:37 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,21 @@
 # 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 Fri, 08 Jul 2022 12:21:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.20.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.4)
+
+Fri, 08 Jul 2022 12:21:37 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.14.2');\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.3');\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), @media 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), @media 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), @media 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), @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 */\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.20.2');\n\n\n//# sourceURL=webpack:///../styling/src/version.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.3');\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.b62d8e661c9c65ff8e37.bundle.js"></script><script src="vendors~main.b62d8e661c9c65ff8e37.bundle.js"></script><script src="main.b62d8e661c9c65ff8e37.bundle.js"></script></body></html>