@fluentui/react-button 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/lib-commonjs/components/Button/useButtonStyles.js

@@ -3,24 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useButtonStyles = exports.buttonSpacing = void 0;
+exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster"); // TODO: These are named in design specs but not hoisted to global/alias yet.
-//       We're tracking these here to determine how we can hoist them.
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
-exports.buttonSpacing = {
-  smallest: '2px',
-  smaller: '4px',
-  small: '6px',
-  medium: '8px',
-  large: '12px',
-  larger: '16px'
-};
+exports.buttonClassName = 'fui-Button';
 
-var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Bt984gj": "f122n59",
     "mc9l5x": "ftuwxu6",
@@ -31,33 +24,34 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
     "B2u0y6b": "f1n52uh2",
-    "Bpg54ce": "f1a3p1vp",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
     "ygn44y": "f1cmbuwj",
     "Huce71": "fz5stix",
-    "ayd6f0": "fcm7iae",
+    "De3pzq": "fxugw4r",
     "sj55zd": "f19n0e5",
-    "g2u3we": "fj3muxo",
-    "h3c5rm": ["f1akhkt", "f1lxtadh"],
-    "B9xav0g": "f1aperda",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
     "B4j52fo": "f192inf7",
     "Bekrc4i": ["f5tn483", "f1ojsxk5"],
     "Bn0qgzm": "f1vxd6vx",
     "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
     "Bahqtrf": "fk6fouc",
     "oeaueh": "f1s6fcnf",
-    "v4pbla": "f56u8ty",
+    "Jwef8y": "f1knas48",
     "Bgoe8wy": "fvcxoqz",
     "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
     "oetu4i": "f1xlaoq0",
     "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
     "Bi91k9c": "fax3udt",
     "eoavqd": "f8491dx",
-    "vv34bc": "fzgy25m",
+    "ecr2s2": "fb40n2d",
     "B6oc9vd": "fvs00aa",
     "ak43y8": ["f1assf6x", "f4ruux4"],
     "wmxk5l": "fumykes",
@@ -70,24 +64,24 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "a9b677": "fly5x3f"
   },
   "outline": {
-    "ayd6f0": "f1gjiv6l",
-    "v4pbla": "f62j56f",
-    "vv34bc": "flt377r"
+    "De3pzq": "f1c21dwh",
+    "Jwef8y": "fjxutwb",
+    "ecr2s2": "fophhak"
   },
   "primary": {
-    "ayd6f0": "f1tdnksq",
+    "De3pzq": "ffp7eso",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
     "sj55zd": "f1phragk",
-    "v4pbla": "f1fitrdm",
+    "Jwef8y": "f15wkkf3",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
     "Bi91k9c": "f1rq72xc",
-    "vv34bc": "f4ihffn",
+    "ecr2s2": "fsp1bjw",
     "B6oc9vd": "ff472gp",
     "ak43y8": ["f4yyc7m", "ft2aflc"],
     "wmxk5l": "fggejwh",
@@ -95,19 +89,19 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "lj723h": "f18otbis"
   },
   "subtle": {
-    "ayd6f0": "f11q0hf9",
+    "De3pzq": "fhovq9v",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
     "sj55zd": "fkfq4zb",
-    "v4pbla": "f4wzgrt",
+    "Jwef8y": "f1t94bn6",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
     "Bi91k9c": "f139oj5f",
-    "vv34bc": "f1be4e1d",
+    "ecr2s2": "f1wfn5kd",
     "B6oc9vd": "ff472gp",
     "ak43y8": ["f4yyc7m", "ft2aflc"],
     "wmxk5l": "fggejwh",
@@ -115,19 +109,19 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "lj723h": "f19au66r"
   },
   "transparent": {
-    "ayd6f0": "f1gjiv6l",
+    "De3pzq": "f1c21dwh",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
     "sj55zd": "fkfq4zb",
-    "v4pbla": "f62j56f",
+    "Jwef8y": "fjxutwb",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
     "Bi91k9c": "f139oj5f",
-    "vv34bc": "flt377r",
+    "ecr2s2": "fophhak",
     "B6oc9vd": "ff472gp",
     "ak43y8": ["f4yyc7m", "ft2aflc"],
     "wmxk5l": "fggejwh",
@@ -135,74 +129,92 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "lj723h": "f19au66r"
   },
   "circular": {
-    "Dimara": "f44lkw9"
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
   },
   "rounded": {},
   "square": {
-    "Dimara": "f1fabniw"
+    "Bbmb7ep": ["fzi6hpg", "fyowgf4"],
+    "Beyfa6y": ["fyowgf4", "fzi6hpg"],
+    "B7oj6ja": ["f3fg2lr", "f13av6d4"],
+    "Btl43ni": ["f13av6d4", "f3fg2lr"]
   },
   "small": {
-    "rmohyg": "f4xv25i",
+    "i8kkvl": "f1q8lukm",
+    "Belr9w4": "f1ma2n7n",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["f19lj068", "f177v4lu"],
     "Byoj8tv": "f1qch9an",
     "uwmqm3": ["f177v4lu", "f19lj068"],
     "Bqenvij": "frvgh55",
     "Bf4jedk": "fh7ncta",
-    "Dimara": "fq9zq91",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
     "Be2twd7": "fy9rknc",
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
-    "rmohyg": "f19jf40t",
+    "i8kkvl": "fgfbwa2",
+    "Belr9w4": "f1y3hx6l",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["f11qrl6u", "fjlbh76"],
     "Byoj8tv": "f1qch9an",
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
     "Bqenvij": "f1d2rq10",
     "Bf4jedk": "f14es27b",
-    "Dimara": "ft85np5",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "fl43uef",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
-    "rmohyg": "f19jf40t",
+    "i8kkvl": "fgfbwa2",
+    "Belr9w4": "f1y3hx6l",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["f1gbmcue", "f1rh9g5y"],
     "Byoj8tv": "f1qch9an",
     "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
     "Bqenvij": "fbhnoac",
     "Bf4jedk": "f14es27b",
-    "Dimara": "ft85np5",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
     "Be2twd7": "fod5ikn",
     "Bhrd7zp": "fl43uef",
     "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;}", ".f1a3p1vp{overflow:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fcm7iae{background:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}", ".f1gjiv6l{background:var(--colorTransparentBackground);}", ".f1tdnksq{background: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);}", ".f11q0hf9{background:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f4xv25i{gap:4px;}", ".f1g0x7ka{padding-top:0;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1qch9an{padding-bottom:0;}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".fq9zq91{border-radius:var(--borderRadiusSmall);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f19jf40t{gap:6px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
-  "h": [".f56u8ty:hover{background: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);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".f62j56f:hover{background:var(--colorTransparentBackgroundHover);}", ".f1fitrdm:hover{background: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);}", ".f4wzgrt:hover{background:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
-  "a": [".fzgy25m:active{background:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".f4ihffn:active{background:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1be4e1d:active{background:var(--colorSubtleBackgroundPressed);}", ".f19au66r: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;}", ".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;}", ".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}", ".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);}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1g0x7ka{padding-top:0;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1qch9an{padding-bottom:0;}", ".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);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".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);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
+  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
 });
 
-var useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
   "base": {
-    "ayd6f0": "fqst6tg",
+    "De3pzq": "f1bg9a2p",
     "g2u3we": "f1jj8ep1",
     "h3c5rm": ["f15xbau", "fy0fskl"],
     "B9xav0g": "f4ikngz",
     "zhjwy3": ["fy0fskl", "f15xbau"],
     "sj55zd": "f1s2aq7o",
     "Bceei9c": "fdrzuqr",
-    "v4pbla": "f1nil5o8",
+    "Jwef8y": "f1falr9n",
     "Bgoe8wy": "f12mpcsy",
     "Bwzppfd": ["f1gwvigk", "f18rmfxp"],
     "oetu4i": "f1jnshp0",
     "gg5e9n": ["f18rmfxp", "f1gwvigk"],
     "Bi91k9c": "fvgxktp",
     "eoavqd": "fphbwmw",
-    "vv34bc": "fkqx3al",
+    "ecr2s2": "f1ryyzvn",
     "B6oc9vd": "fdi4vxw",
     "ak43y8": ["f4ryxzl", "fkdgpbx"],
     "wmxk5l": "fcmhn06",
@@ -211,9 +223,9 @@ var useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Bwh3duv": "fq67hom"
   },
   "outline": {
-    "ayd6f0": "f1gjiv6l",
-    "v4pbla": "f62j56f",
-    "vv34bc": "flt377r"
+    "De3pzq": "f1c21dwh",
+    "Jwef8y": "fjxutwb",
+    "ecr2s2": "fophhak"
   },
   "primary": {
     "g2u3we": "f1p3nwhy",
@@ -230,61 +242,64 @@ var useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "B50zh58": ["ft2aflc", "f4yyc7m"]
   },
   "subtle": {
-    "ayd6f0": "f1k2sg7s",
+    "De3pzq": "f3rmtva",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "v4pbla": "f1vc35iv",
+    "Jwef8y": "f1cio4g9",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "vv34bc": "f17oliv9",
+    "ecr2s2": "f1rot6hk",
     "B6oc9vd": "ff472gp",
     "ak43y8": ["f4yyc7m", "ft2aflc"],
     "wmxk5l": "fggejwh",
     "B50zh58": ["ft2aflc", "f4yyc7m"]
   },
   "transparent": {
-    "ayd6f0": "f1k2sg7s",
+    "De3pzq": "f3rmtva",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "v4pbla": "f1vc35iv",
+    "Jwef8y": "f1cio4g9",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "vv34bc": "f17oliv9",
+    "ecr2s2": "f1rot6hk",
     "B6oc9vd": "ff472gp",
     "ak43y8": ["f4yyc7m", "ft2aflc"],
     "wmxk5l": "fggejwh",
     "B50zh58": ["ft2aflc", "f4yyc7m"]
   }
 }, {
-  "d": [".fqst6tg{background: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;}", ".f1gjiv6l{background:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1k2sg7s{background:none;}"],
-  "h": [".f1nil5o8:hover{background: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;}", ".f62j56f:hover{background:var(--colorTransparentBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1vc35iv:hover{background:none;}"],
-  "a": [".fkqx3al:active{background:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f17oliv9:active{background:none;}"]
+  "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;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}"],
+  "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
 });
 
-var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootFocusStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "B486eqv": "f2hkw1w",
     "Bnmjwt4": "flfsvnh",
     "Jopkrh": ["f1781m5e", "flvaaa9"],
     "hhrs2v": "f50u1b5",
     "B7jbng7": ["flvaaa9", "f1781m5e"],
+    "Bh48x57": "f19j8a82",
     "B32s92o": "f4mghqd",
     "B5hngm5": "fhcq1yo",
-    "Bh48x57": "f19j8a82",
-    "D4py6b": ["f9ycirn", "fj27422"],
+    "D4py6b": "f9ycirn",
     "Bgwpjed": "fpt6wn7"
   },
   "circular": {
     "B486eqv": "f2hkw1w",
-    "Big6zof": "f6dohij"
+    "B8j0l6": ["f11yy61d", "f5edc3x"],
+    "Ekyhi": ["f5edc3x", "f11yy61d"],
+    "Bmrpcm6": ["f1aea4n", "f4jo73o"],
+    "Beswxhl": ["f4jo73o", "f1aea4n"]
   },
   "rounded": {},
   "primary": {
@@ -293,30 +308,42 @@ var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Jopkrh": ["fhoxsto", "f19qf7vm"],
     "hhrs2v": "f1tl0rof",
     "B7jbng7": ["f19qf7vm", "fhoxsto"],
-    "D4py6b": ["f15m8qn2", "f5p9mqa"]
+    "D4py6b": "f15m8qn2"
   },
   "square": {
     "B486eqv": "f2hkw1w",
-    "Big6zof": "f1x6jsgk"
+    "B8j0l6": ["f5oco9f", "fiz44lb"],
+    "Ekyhi": ["fiz44lb", "f5oco9f"],
+    "Bmrpcm6": ["f1d1ywej", "flv4e1y"],
+    "Beswxhl": ["flv4e1y", "f1d1ywej"]
   },
   "small": {
     "B486eqv": "f2hkw1w",
-    "Big6zof": "f1cqgkc0"
+    "B8j0l6": ["f1dzjeht", "f1fw97sp"],
+    "Ekyhi": ["f1fw97sp", "f1dzjeht"],
+    "Bmrpcm6": ["f1hr3vfr", "f1fepg9x"],
+    "Beswxhl": ["f1fepg9x", "f1hr3vfr"]
   },
   "medium": {
     "B486eqv": "f2hkw1w",
-    "Big6zof": "fhf9ij9"
+    "B8j0l6": ["f1ezw2km", "f18buiid"],
+    "Ekyhi": ["f18buiid", "f1ezw2km"],
+    "Bmrpcm6": ["f1hat8c3", "f10ee3ek"],
+    "Beswxhl": ["f10ee3ek", "f1hat8c3"]
   },
   "large": {
     "B486eqv": "f2hkw1w",
-    "Big6zof": "fnsjjqm"
+    "B8j0l6": ["f8iz5lg", "fzmqelg"],
+    "Ekyhi": ["fzmqelg", "f8iz5lg"],
+    "Bmrpcm6": ["f1ywuu4l", "f721nif"],
+    "Beswxhl": ["f721nif", "f1ywuu4l"]
   }
 }, {
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fj27422:focus{box-shadow:var(--shadow-4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f6dohij:focus{border-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f5p9mqa:focus{box-shadow:var(--shadow-2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1x6jsgk:focus{border-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1cqgkc0:focus{border-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .fhf9ij9:focus{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fnsjjqm:focus{border-radius:var(--borderRadiusLarge);}"]
+  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f11yy61d:focus{border-bottom-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5edc3x:focus{border-bottom-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f1aea4n:focus{border-top-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f4jo73o:focus{border-top-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f5oco9f:focus{border-bottom-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fiz44lb:focus{border-bottom-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1d1ywej:focus{border-top-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .flv4e1y:focus{border-top-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1dzjeht:focus{border-bottom-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fw97sp:focus{border-bottom-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1hr3vfr:focus{border-top-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fepg9x:focus{border-top-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1ezw2km:focus{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f18buiid:focus{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1hat8c3:focus{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f10ee3ek:focus{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f8iz5lg:focus{border-bottom-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .fzmqelg:focus{border-bottom-left-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f1ywuu4l:focus{border-top-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f721nif:focus{border-top-left-radius:var(--borderRadiusLarge);}"]
 });
 
-var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
   "small": {
     "z8tnut": "f10ra9hq",
     "z189sj": ["f8wuabp", "fycuoez"],
@@ -345,7 +372,7 @@ var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
 });
 
-var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useIconStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Bt984gj": "f122n59",
     "mc9l5x": "ftuwxu6",
@@ -370,20 +397,22 @@ var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "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;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
 });
 
-var useButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var rootDisabledStyles = useRootDisabledStyles();
-  var rootFocusStyles = useRootFocusStyles();
-  var rootIconOnlyStyles = useRootIconOnlyStyles();
-  var iconStyles = useIconStyles();
-  var appearance = state.appearance,
-      block = state.block,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable,
-      iconOnly = state.iconOnly,
-      shape = state.shape,
-      size = state.size;
-  state.root.className = react_make_styles_1.mergeClasses( // Root styles
+const useButtonStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const rootFocusStyles = useRootFocusStyles();
+  const rootIconOnlyStyles = useRootIconOnlyStyles();
+  const iconStyles = useIconStyles();
+  const {
+    appearance,
+    block,
+    disabled,
+    disabledFocusable,
+    iconOnly,
+    shape,
+    size
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.buttonClassName, // Root styles
   rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
   rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
@@ -391,11 +420,11 @@ var useButtonStyles = function (state) {
   state.root.className);
 
   if (state.icon) {
-    state.icon.className = react_make_styles_1.mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
+    state.icon.className = react_1.mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
   }
 
   return state;
 };
 
-exports.useButtonStyles = useButtonStyles;
+exports.useButtonStyles_unstable = useButtonStyles_unstable;
 //# sourceMappingURL=useButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ButtonState } from './Button.types';\n\nexport const buttonClassName = 'fui-Button';\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.colorNeutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1,\n\n      outlineStyle: 'none',\n    },\n  },\n\n  // Block styles\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':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    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\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    ':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    ':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.gap('4px'),\n    ...shorthands.padding('0', '8px'),\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.gap('6px'),\n    ...shorthands.padding('0', '12px'),\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.gap('6px'),\n    ...shorthands.padding('0', '16px'),\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\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  subtle: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':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    ':active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n  // used by the outline pseudo-element. Need to introduce a text container for children and set\n  // overflow there so that default focus outline can work\n  //\n  // base: createFocusOutlineStyle(),\n  // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n  // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n  // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: 'transparent',\n    outlineWidth: '2px',\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {},\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\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('4px'),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding('4px'),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding('6px'),\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  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\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, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassName,\n\n    // Root styles\n    rootStyles.base,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\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(iconStyles.base, iconStyles[size], state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CompoundButton/CompoundButton.js

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CompoundButton = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
+const renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
 
-var useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
+const useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
 
-var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
+const useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
 
 
-exports.CompoundButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCompoundButton_1.useCompoundButton(props, ref);
-  useCompoundButtonStyles_1.useCompoundButtonStyles(state);
-  return renderCompoundButton_1.renderCompoundButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+exports.CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCompoundButton_1.useCompoundButton_unstable(props, ref);
+  useCompoundButtonStyles_1.useCompoundButtonStyles_unstable(state);
+  return renderCompoundButton_1.renderCompoundButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.CompoundButton.displayName = 'CompoundButton';
 //# sourceMappingURL=CompoundButton.js.map

package/lib-commonjs/components/CompoundButton/CompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClG,MAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP,CALkG,CAMlG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts

@@ -1,14 +1,14 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
 export declare type CompoundButtonSlots = ButtonSlots & {
     /**
      * Second line of text that describes the action this button takes.
      */
-    secondaryContent?: IntrinsicShorthandProps<'span'>;
+    secondaryContent?: Slot<'span'>;
     /**
      * Container that wraps the children and the secondaryContent slot.
      */
-    contentContainer: IntrinsicShorthandProps<'span'>;
+    contentContainer: NonNullable<Slot<'span'>>;
 };
-export declare type CompoundButtonProps = ComponentProps<CompoundButtonSlots> & Partial<ButtonCommons>;
+export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
 export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;

package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/CompoundButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './CompoundButton';
 export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export { useCompoundButtonStyles } from './useCompoundButtonStyles';
+export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';