@fluentui/react-button 9.1.0 → 9.1.1

package/CHANGELOG.json

@@ -2,7 +2,96 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Wed, 03 Aug 2022 16:00:06 GMT",
+      "date": "Thu, 15 Sep 2022 09:45:17 GMT",
+      "tag": "@fluentui/react-button_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "humberto_makoto@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "17b9063802b28bf7f4b1c4d439623819ad8940fa",
+            "comment": "fix: Adding 'aria-expanded=false' to collapsed MenuButtons."
+          },
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "6bc03a4e9ee815da750466f9dc2d25df1373f3e9",
+            "comment": "chore: Remove max-width style from Button components."
+          },
+          {
+            "author": "humberto_makoto@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "ef3ea2307fd97c893eded2164d96f1f56e378fd3",
+            "comment": "chore: Cleaning up tokens in Button components so they better adhere to the design spec."
+          },
+          {
+            "author": "humberto_makoto@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "28f55597050bcdd293e57e7d1fdc87802150c59d",
+            "comment": "fix: Wrapping long text in Button components."
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "e598325b985cad3e5057f00893e0176416edd292",
+            "comment": "refactor: Replace useMergedEventCallbacks utility with mergeCallbacks"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-aria to v9.2.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.1.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "e176621e71d595c6d17655c108db0b73eb9ec188",
+            "comment": "chore: Removing CompoundButtonAsToggleButton story since it was using non-exported functions."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:39 GMT",
       "tag": "@fluentui/react-button_v9.1.0",
       "version": "9.1.0",
       "comments": {
@@ -17,19 +106,19 @@
             "author": "beachball",
             "package": "@fluentui/react-button",
             "comment": "Bump @fluentui/react-aria to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
             "comment": "Bump @fluentui/react-tabster to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,20 +1,39 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Wed, 03 Aug 2022 16:00:06 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:45:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.1.1)
+
+Thu, 15 Sep 2022 09:45:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.1.0..@fluentui/react-button_v9.1.1)
+
+### Patches
+
+- fix: Adding 'aria-expanded=false' to collapsed MenuButtons. ([PR #24782](https://github.com/microsoft/fluentui/pull/24782) by humberto_makoto@hotmail.com)
+- chore: Remove max-width style from Button components. ([PR #24647](https://github.com/microsoft/fluentui/pull/24647) by makotom@microsoft.com)
+- chore: Cleaning up tokens in Button components so they better adhere to the design spec. ([PR #24732](https://github.com/microsoft/fluentui/pull/24732) by humberto_makoto@hotmail.com)
+- fix: Wrapping long text in Button components. ([PR #24682](https://github.com/microsoft/fluentui/pull/24682) by humberto_makoto@hotmail.com)
+- refactor: Replace useMergedEventCallbacks utility with mergeCallbacks ([PR #24152](https://github.com/microsoft/fluentui/pull/24152) by behowell@microsoft.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.2.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.1.0)
 
-Wed, 03 Aug 2022 16:00:06 GMT 
+Wed, 03 Aug 2022 16:03:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.3..@fluentui/react-button_v9.1.0)
 
 ### Minor changes
 
 - chore: Updates Button to use useARIAButton over useARIAButtonShorthand ([PR #24032](https://github.com/microsoft/fluentui/pull/24032) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-aria to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-aria to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 
 ### Patches
 

package/lib/components/Button/useButtonStyles.js

@@ -7,6 +7,8 @@ export const buttonClassNames = {
   icon: 'fui-Button__icon'
 };
 const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingMedium = '5px';
 
 const useRootStyles = /*#__PURE__*/__styles({
   "base": {
@@ -18,11 +20,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     "t21cq0": ["f11qmguv", "f1tyq0we"],
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "B2u0y6b": "f1n52uh2",
     "B68tc82": "f1p9o1ba",
     "Bmxbyg5": "f1sil6mw",
-    "ygn44y": "f1cmbuwj",
-    "Huce71": "fz5stix",
     "De3pzq": "fxugw4r",
     "sj55zd": "f19n0e5",
     "B4j52fo": "f192inf7",
@@ -116,13 +115,13 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "Bi91k9c": "f139oj5f",
+    "Bi91k9c": "fnwyq0v",
     "iro3zm": "fsv2rcd",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"],
-    "B2d53fq": "f1fg1p5m"
+    "B2d53fq": "f1omzyqd"
   },
   "transparent": {
     "De3pzq": "f1c21dwh",
@@ -158,26 +157,24 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Btl43ni": ["f13av6d4", "f3fg2lr"]
   },
   "small": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1khb0e9",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "f1jnq6q7",
     "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "Bqenvij": "frvgh55",
     "Bf4jedk": "fh7ncta",
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Bbmb7ep": ["fclariu", "fyjfh2l"],
+    "Beyfa6y": ["fyjfh2l", "fclariu"],
+    "B7oj6ja": ["f11xeu6h", "f1knf8zw"],
+    "Btl43ni": ["f1knf8zw", "f11xeu6h"],
     "Be2twd7": "fy9rknc",
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1sbtcvk",
     "z189sj": ["fw5db7e", "f1uw59to"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "fdghr9",
     "uwmqm3": ["f1uw59to", "fw5db7e"],
-    "Bqenvij": "f1d2rq10",
     "Bf4jedk": "f14es27b",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -188,11 +185,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1kwiid1",
     "z189sj": ["fjodcmx", "fhx4nu"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "f5b47ha",
     "uwmqm3": ["fhx4nu", "fjodcmx"],
-    "Bqenvij": "fbhnoac",
     "Bf4jedk": "f14es27b",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -203,8 +199,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "faaz57k"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1n52uh2{max-width:280px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fh7ncta{min-width:64px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1sbtcvk{padding-top:5px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fdghr9{padding-bottom:5px;}", ".f14es27b{min-width:96px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
+  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
   "m": [["@media (forced-colors: active){.f8rnyb3:focus{border-top-color:ButtonText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fhb3ry5:focus{border-right-color:ButtonText;}.f11223yd:focus{border-left-color:ButtonText;}}", {
@@ -295,8 +291,8 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
   },
   "outline": {
     "De3pzq": "f1c21dwh",
-    "Jwef8y": "fjxutwb",
-    "iro3zm": "fwiml72"
+    "Jwef8y": "f9ql6rf",
+    "iro3zm": "f3h1zc4"
   },
   "primary": {
     "g2u3we": "f1p3nwhy",
@@ -314,42 +310,42 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
   },
   "secondary": {},
   "subtle": {
-    "De3pzq": "f3rmtva",
+    "De3pzq": "f1c21dwh",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Jwef8y": "f1cio4g9",
+    "Jwef8y": "f9ql6rf",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "iro3zm": "fvaszet",
+    "iro3zm": "f3h1zc4",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"]
   },
   "transparent": {
-    "De3pzq": "f3rmtva",
+    "De3pzq": "f1c21dwh",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Jwef8y": "f1cio4g9",
+    "Jwef8y": "f9ql6rf",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "iro3zm": "fvaszet",
+    "iro3zm": "f3h1zc4",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"]
   }
 }, {
-  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f3rmtva{background-color:transparent;}"],
-  "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}", ".fvaszet:hover:active{background-color:transparent;}"],
+  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
+  "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}"],
   "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
@@ -395,70 +391,70 @@ const useRootFocusStyles = /*#__PURE__*/__styles({
   "base": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Bvjrn4i": "fvvvjju",
-    "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
-    "vkx7if": "f3za06g",
-    "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
-    "H7go31": "fsr4n9e",
-    "ns4vmj": "f149st4k",
-    "me5axj": "f1tn340u",
-    "rxxk6d": ["fvw539d", "fvw539d"],
-    "Bvty6zf": "f17m5bi4"
+    "r6j8yp": "fzz1rnl",
+    "w235jp": ["f1hpg7at", "fh6rkwf"],
+    "Bjm0d8m": "f1ny4l2p",
+    "jwfw70": ["fh6rkwf", "f1hpg7at"],
+    "Hbfjuj": "f3rp3js",
+    "zog540": "f1rsleix",
+    "yj03m6": "fv9e16l",
+    "Bcbq7yz": ["f1e1uf74", "f1e1uf74"],
+    "kr7n4t": "f15l0jh8"
   },
   "circular": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Blqbbns": ["fsq2tb7", "f19ii4is"],
-    "Btk8k70": ["f19ii4is", "fsq2tb7"],
-    "Bc7ih7v": ["f1f8rjqz", "f165mcj7"],
-    "b12hc5": ["f165mcj7", "f1f8rjqz"]
+    "B3fzizb": ["f1gr658c", "fz9uktw"],
+    "zxn10j": ["fz9uktw", "f1gr658c"],
+    "Bs5i094": ["f947r6p", "f1ecwm5t"],
+    "Beda4ul": ["f1ecwm5t", "f947r6p"]
   },
   "rounded": {},
   "square": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Blqbbns": ["frjxlmy", "f1ka46jk"],
-    "Btk8k70": ["f1ka46jk", "frjxlmy"],
-    "Bc7ih7v": ["f12jal9s", "fd9r1w9"],
-    "b12hc5": ["fd9r1w9", "f12jal9s"]
+    "B3fzizb": ["f10sz6u9", "fnb1cyx"],
+    "zxn10j": ["fnb1cyx", "f10sz6u9"],
+    "Bs5i094": ["f4vuef", "f1mmwllp"],
+    "Beda4ul": ["f1mmwllp", "f4vuef"]
   },
   "primary": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Bvjrn4i": "f15i23w7",
-    "Bfjx6ro": ["fso3g8m", "f14k2nux"],
-    "vkx7if": "f3zee7g",
-    "Bhdpb9s": ["f14k2nux", "fso3g8m"],
-    "rxxk6d": "fj0vrxu"
+    "r6j8yp": "f1yg6d3y",
+    "w235jp": ["f12447lo", "f6gc21s"],
+    "Bjm0d8m": "f1qg05n1",
+    "jwfw70": ["f6gc21s", "f12447lo"],
+    "Bcbq7yz": "fvp2bj7"
   },
   "small": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Blqbbns": ["f1ew88zs", "fl5vele"],
-    "Btk8k70": ["fl5vele", "f1ew88zs"],
-    "Bc7ih7v": ["f17fjjy2", "fpelyz4"],
-    "b12hc5": ["fpelyz4", "f17fjjy2"]
+    "B3fzizb": ["f1sfnwev", "f129zd7g"],
+    "zxn10j": ["f129zd7g", "f1sfnwev"],
+    "Bs5i094": ["f19i0cdt", "f1wivjbl"],
+    "Beda4ul": ["f1wivjbl", "f19i0cdt"]
   },
   "medium": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Blqbbns": ["fzz88m", "fk1i6se"],
-    "Btk8k70": ["fk1i6se", "fzz88m"],
-    "Bc7ih7v": ["fvnxzrg", "fnckckv"],
-    "b12hc5": ["fnckckv", "fvnxzrg"]
+    "B3fzizb": ["f4s7boy", "fhtq267"],
+    "zxn10j": ["fhtq267", "f4s7boy"],
+    "Bs5i094": ["f911gz9", "f1c94j14"],
+    "Beda4ul": ["f1c94j14", "f911gz9"]
   },
   "large": {
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "Blqbbns": ["f3y0lgu", "f8nszav"],
-    "Btk8k70": ["f8nszav", "f3y0lgu"],
-    "Bc7ih7v": ["f1vyogrc", "f3sv5uf"],
-    "b12hc5": ["f3sv5uf", "f1vyogrc"]
+    "B3fzizb": ["f1bnioy3", "f194dlff"],
+    "zxn10j": ["f194dlff", "f1bnioy3"],
+    "Bs5i094": ["f1u2riu4", "f17ik75h"],
+    "Beda4ul": ["f17ik75h", "f1u2riu4"]
   }
 }, {
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "d": [".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .fsr4n9e.fui-focus-visible{outline-color:transparent;}", ".fui-FluentProvider .f149st4k.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1tn340u.fui-focus-visible{outline-style:solid;}", ".fui-FluentProvider .fvw539d.fui-focus-visible{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", ".fui-FluentProvider .f17m5bi4.fui-focus-visible{z-index:1;}", ".fui-FluentProvider .fsq2tb7.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fui-FluentProvider .f19ii4is.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fui-FluentProvider .f1f8rjqz.fui-focus-visible{border-top-right-radius:var(--borderRadiusCircular);}", ".fui-FluentProvider .f165mcj7.fui-focus-visible{border-top-left-radius:var(--borderRadiusCircular);}", ".fui-FluentProvider .frjxlmy.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusNone);}", ".fui-FluentProvider .f1ka46jk.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusNone);}", ".fui-FluentProvider .f12jal9s.fui-focus-visible{border-top-right-radius:var(--borderRadiusNone);}", ".fui-FluentProvider .fd9r1w9.fui-focus-visible{border-top-left-radius:var(--borderRadiusNone);}", ".fui-FluentProvider .f15i23w7.fui-focus-visible{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".fui-FluentProvider .fso3g8m.fui-focus-visible{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fui-FluentProvider .f14k2nux.fui-focus-visible{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fui-FluentProvider .f3zee7g.fui-focus-visible{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".fui-FluentProvider .fj0vrxu.fui-focus-visible{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1ew88zs.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fui-FluentProvider .fl5vele.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fui-FluentProvider .f17fjjy2.fui-focus-visible{border-top-right-radius:var(--borderRadiusSmall);}", ".fui-FluentProvider .fpelyz4.fui-focus-visible{border-top-left-radius:var(--borderRadiusSmall);}", ".fui-FluentProvider .fzz88m.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fk1i6se.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fvnxzrg.fui-focus-visible{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fnckckv.fui-focus-visible{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f3y0lgu.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusLarge);}", ".fui-FluentProvider .f8nszav.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fui-FluentProvider .f1vyogrc.fui-focus-visible{border-top-right-radius:var(--borderRadiusLarge);}", ".fui-FluentProvider .f3sv5uf.fui-focus-visible{border-top-left-radius:var(--borderRadiusLarge);}"]
+  "d": [".fzz1rnl.fui-focus-visible{border-top-color:var(--colorTransparentStroke);}", ".f1hpg7at.fui-focus-visible{border-right-color:var(--colorTransparentStroke);}", ".fh6rkwf.fui-focus-visible{border-left-color:var(--colorTransparentStroke);}", ".f1ny4l2p.fui-focus-visible{border-bottom-color:var(--colorTransparentStroke);}", ".f3rp3js.fui-focus-visible{outline-color:var(--colorTransparentStroke);}", ".f1rsleix.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fv9e16l.fui-focus-visible{outline-style:solid;}", ".f1e1uf74.fui-focus-visible{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", ".f15l0jh8.fui-focus-visible{z-index:1;}", ".f1gr658c.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fz9uktw.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f947r6p.fui-focus-visible{border-top-right-radius:var(--borderRadiusCircular);}", ".f1ecwm5t.fui-focus-visible{border-top-left-radius:var(--borderRadiusCircular);}", ".f10sz6u9.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusNone);}", ".fnb1cyx.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusNone);}", ".f4vuef.fui-focus-visible{border-top-right-radius:var(--borderRadiusNone);}", ".f1mmwllp.fui-focus-visible{border-top-left-radius:var(--borderRadiusNone);}", ".f1yg6d3y.fui-focus-visible{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f12447lo.fui-focus-visible{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f6gc21s.fui-focus-visible{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1qg05n1.fui-focus-visible{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".fvp2bj7.fui-focus-visible{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", ".f1sfnwev.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f129zd7g.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f19i0cdt.fui-focus-visible{border-top-right-radius:var(--borderRadiusSmall);}", ".f1wivjbl.fui-focus-visible{border-top-left-radius:var(--borderRadiusSmall);}", ".f4s7boy.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fhtq267.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f911gz9.fui-focus-visible{border-top-right-radius:var(--borderRadiusMedium);}", ".f1c94j14.fui-focus-visible{border-top-left-radius:var(--borderRadiusMedium);}", ".f1bnioy3.fui-focus-visible{border-bottom-right-radius:var(--borderRadiusLarge);}", ".f194dlff.fui-focus-visible{border-bottom-left-radius:var(--borderRadiusLarge);}", ".f1u2riu4.fui-focus-visible{border-top-right-radius:var(--borderRadiusLarge);}", ".f17ik75h.fui-focus-visible{border-top-left-radius:var(--borderRadiusLarge);}"]
 });
 
 const useRootIconOnlyStyles = /*#__PURE__*/__styles({
@@ -514,6 +510,10 @@ const useIconStyles = /*#__PURE__*/__styles({
     "a9b677": "fq4mcun",
     "Bqrlyyl": "f1exjqw5"
   },
+  "subtle": {
+    "Bi91k9c": "f139oj5f",
+    "B2d53fq": "f1fg1p5m"
+  },
   "before": {
     "t21cq0": ["f1nizpg2", "f1a695kz"]
   },
@@ -521,7 +521,8 @@ const useIconStyles = /*#__PURE__*/__styles({
     "Frg6f3": ["f1a695kz", "f1nizpg2"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"],
+  "h": [".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"]
 });
 
 export const useButtonStyles_unstable = state => {
@@ -547,7 +548,7 @@ export const useButtonStyles_unstable = state => {
   state.root.className);
 
   if (state.icon) {
-    state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+    state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], appearance === 'subtle' && iconStyles.subtle, iconStyles[size], state.icon.className);
   }
 
   return state;

package/lib/components/Button/useButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    ...shorthands.margin(0),\n\n    maxWidth: '280px',\n\n    ...shorthands.overflow('hidden'),\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n    fontFamily: tokens.fontFamilyBase,\n\n    outlineStyle: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n\n      cursor: 'pointer',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n\n      outlineStyle: 'none',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        ...shorthands.borderColor('ButtonText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalS),\n\n    height: '24px',\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalM),\n\n    height: '32px',\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalL),\n\n    height: '40px',\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: 'transparent',\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  }),\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    rootFocusStyles.base,\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    ...shorthands.margin(0),\n\n    ...shorthands.overflow('hidden'),\n\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n    fontFamily: tokens.fontFamilyBase,\n\n    outlineStyle: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n\n      cursor: 'pointer',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n\n      outlineStyle: 'none',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        ...shorthands.borderColor('ButtonText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium, tokens.spacingHorizontalM),\n\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),\n\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    outlineColor: tokens.colorTransparentStroke,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  }),\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Appearance variations\n  subtle: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    rootFocusStyles.base,\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      appearance === 'subtle' && iconStyles.subtle,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}