@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

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

@@ -0,0 +1,365 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonStyles = exports.buttonSpacing = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+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.
+
+
+exports.buttonSpacing = {
+  smallest: '2px',
+  smaller: '4px',
+  small: '6px',
+  medium: '8px',
+  large: '12px',
+  larger: '16px'
+};
+
+var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23",
+    "ha4doy": "fmrv4ls",
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "B2u0y6b": "f1n52uh2",
+    "Bpg54ce": "f1a3p1vp",
+    "ygn44y": "f1cmbuwj",
+    "Huce71": "fz5stix",
+    "ayd6f0": "fcm7iae",
+    "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"],
+    "Bahqtrf": "fk6fouc",
+    "oeaueh": "f1s6fcnf",
+    "v4pbla": "f56u8ty",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Bi91k9c": "fax3udt",
+    "eoavqd": "f8491dx",
+    "vv34bc": "fzgy25m",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"],
+    "lj723h": "f1r2dosr",
+    "zwc60e": "fb0xa7e"
+  },
+  "block": {
+    "B2u0y6b": "f6dzj5z",
+    "a9b677": "fly5x3f"
+  },
+  "outline": {
+    "ayd6f0": "f1gjiv6l",
+    "v4pbla": "f62j56f",
+    "vv34bc": "flt377r"
+  },
+  "primary": {
+    "ayd6f0": "f1tdnksq",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1phragk",
+    "v4pbla": "f1fitrdm",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f1rq72xc",
+    "vv34bc": "f4ihffn",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f18otbis"
+  },
+  "subtle": {
+    "ayd6f0": "f11q0hf9",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "fkfq4zb",
+    "v4pbla": "f4wzgrt",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "f1be4e1d",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "transparent": {
+    "ayd6f0": "f1gjiv6l",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "fkfq4zb",
+    "v4pbla": "f62j56f",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "flt377r",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "circular": {
+    "Dimara": "f44lkw9"
+  },
+  "rounded": {},
+  "square": {
+    "Dimara": "f1fabniw"
+  },
+  "small": {
+    "rmohyg": "f4xv25i",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "Bqenvij": "frvgh55",
+    "Bf4jedk": "fh7ncta",
+    "Dimara": "fq9zq91",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "medium": {
+    "rmohyg": "f19jf40t",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "Bqenvij": "f1d2rq10",
+    "Bf4jedk": "f14es27b",
+    "Dimara": "ft85np5",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "rmohyg": "f19jf40t",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f1gbmcue", "f1rh9g5y"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
+    "Bqenvij": "fbhnoac",
+    "Bf4jedk": "f14es27b",
+    "Dimara": "ft85np5",
+    "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);}"]
+});
+
+var useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "ayd6f0": "fqst6tg",
+    "g2u3we": "f1jj8ep1",
+    "h3c5rm": ["f15xbau", "fy0fskl"],
+    "B9xav0g": "f4ikngz",
+    "zhjwy3": ["fy0fskl", "f15xbau"],
+    "sj55zd": "f1s2aq7o",
+    "Bceei9c": "fdrzuqr",
+    "v4pbla": "f1nil5o8",
+    "Bgoe8wy": "f12mpcsy",
+    "Bwzppfd": ["f1gwvigk", "f18rmfxp"],
+    "oetu4i": "f1jnshp0",
+    "gg5e9n": ["f18rmfxp", "f1gwvigk"],
+    "Bi91k9c": "fvgxktp",
+    "eoavqd": "fphbwmw",
+    "vv34bc": "fkqx3al",
+    "B6oc9vd": "fdi4vxw",
+    "ak43y8": ["f4ryxzl", "fkdgpbx"],
+    "wmxk5l": "fcmhn06",
+    "B50zh58": ["fkdgpbx", "f4ryxzl"],
+    "lj723h": "f19wldhg",
+    "Bwh3duv": "fq67hom"
+  },
+  "outline": {
+    "ayd6f0": "f1gjiv6l",
+    "v4pbla": "f62j56f",
+    "vv34bc": "flt377r"
+  },
+  "primary": {
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "subtle": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "transparent": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "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;}"]
+});
+
+var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {},
+  "circular": {},
+  "rounded": {},
+  "primary": {},
+  "square": {},
+  "small": {},
+  "medium": {},
+  "large": {}
+}, {});
+
+var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "small": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f8wuabp", "fycuoez"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "Bf4jedk": "f107v6xj",
+    "B2u0y6b": "f17iyk3w"
+  },
+  "medium": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f8wuabp", "fycuoez"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "Bf4jedk": "fwbmr0d",
+    "B2u0y6b": "f44c6la"
+  },
+  "large": {
+    "z8tnut": "f1xp5gbu",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "Bf4jedk": "f12clzc2",
+    "B2u0y6b": "fjy1crr"
+  }
+}, {
+  "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({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
+  },
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "large": {
+    "Be2twd7": "f1rt2boy",
+    "Bqenvij": "frvgh55",
+    "a9b677": "fq4mcun"
+  }
+}, {
+  "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
+  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
+  iconOnly && rootIconOnlyStyles[size], // User provided class name
+  state.root.className);
+
+  if (state.icon) {
+    state.icon.className = react_make_styles_1.mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
+  }
+
+  return state;
+};
+
+exports.useButtonStyles = useButtonStyles;
+//# sourceMappingURL=useButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { CompoundButtonProps } from './CompoundButton.types';
+import type { CompoundButtonProps } from './CompoundButton.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled CompoundButton, using the `useCompoundButton` hook.
- * {@docCategory Button}
+ * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<Pick<CompoundButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;

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

@@ -1,20 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_theme_provider_1 = require("@fluentui/react-theme-provider");
-var utilities_1 = require("@fluentui/utilities");
-var useCompoundButton_1 = require("./useCompoundButton");
-var useCompoundButtonClasses_1 = require("./useCompoundButtonClasses");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompoundButton = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
+
+var useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
+
+var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
 /**
- * Define a styled CompoundButton, using the `useCompoundButton` hook.
- * {@docCategory Button}
+ * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-exports.CompoundButton = React.forwardRef(function (props, ref) {
-    var _a = useCompoundButton_1.useCompoundButton(props, ref), render = _a.render, state = _a.state;
-    useCompoundButtonClasses_1.useCompoundButtonClasses(state);
-    utilities_1.useFocusRects(state.ref);
-    react_theme_provider_1.useInlineTokens(state, '--button');
-    return render(state);
+
+
+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.displayName = 'CompoundButton';
 //# sourceMappingURL=CompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,uEAAiE;AACjE,iDAAoD;AAEpD,yDAAwD;AACxD,uEAAsE;AAEtE;;;GAGG;AACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG;IACpF,IAAA,sDAAiD,EAA/C,kBAAM,EAAE,gBAAuC,CAAC;IAExD,mDAAwB,CAAC,KAAK,CAAC,CAAC;IAChC,yBAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,sCAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useFocusRects } from '@fluentui/utilities';\nimport { CompoundButtonProps } from './CompoundButton.types';\nimport { useCompoundButton } from './useCompoundButton';\nimport { useCompoundButtonClasses } from './useCompoundButtonClasses';\n\n/**\n * Define a styled CompoundButton, using the `useCompoundButton` hook.\n * {@docCategory Button}\n */\nexport const CompoundButton = React.forwardRef<HTMLElement, CompoundButtonProps>((props, ref) => {\n  const { render, state } = useCompoundButton(props, ref);\n\n  useCompoundButtonClasses(state);\n  useFocusRects(state.ref);\n  useInlineTokens(state, '--button');\n\n  return render(state);\n});\n\nCompoundButton.displayName = 'CompoundButton';\n"]}
+{"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":""}

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

@@ -1,33 +1,14 @@
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonProps extends ButtonProps {
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } 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?: ShorthandProps;
+    secondaryContent?: IntrinsicShorthandProps<'span'>;
     /**
-     * Container that wraps the children and secondaryContent slots.
+     * Container that wraps the children and the secondaryContent slot.
      */
-    contentContainer?: ShorthandProps;
-}
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonState extends CompoundButtonProps {
-}
-/**
- * {@docCategory Button}
- */
-export declare type CompoundButtonTokens = ButtonTokens & {
-    secondaryContentColor?: string;
-    secondaryContentFontSize?: string;
-    secondaryContentFontWeight?: string;
-    secondaryContentGap?: string;
+    contentContainer: IntrinsicShorthandProps<'span'>;
 };
-/**
- * {@docCategory Button}
- */
-export declare type CompoundButtonVariants = ButtonVariants<CompoundButtonTokens>;
+export declare type CompoundButtonProps = ComponentProps<CompoundButtonSlots> & Partial<ButtonCommons>;
+export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;

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

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=CompoundButton.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';\n\n/**\n * {@docCategory Button}\n */\nexport interface CompoundButtonProps extends ButtonProps {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandProps;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandProps;\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface CompoundButtonState extends CompoundButtonProps {}\n\n/**\n * {@docCategory Button}\n */\nexport type CompoundButtonTokens = ButtonTokens & {\n  secondaryContentColor?: string;\n  secondaryContentFontSize?: string;\n  secondaryContentFontWeight?: string;\n  secondaryContentGap?: string;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type CompoundButtonVariants = ButtonVariants<CompoundButtonTokens>;\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

@@ -1,4 +1,5 @@
 export * from './CompoundButton';
 export * from './CompoundButton.types';
+export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export * from './useCompoundButtonClasses';
+export { useCompoundButtonStyles } from './useCompoundButtonStyles';

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

@@ -1,7 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCompoundButtonStyles = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./CompoundButton"), exports);
+
+tslib_1.__exportStar(require("./CompoundButton.types"), exports);
+
+tslib_1.__exportStar(require("./renderCompoundButton"), exports);
+
 tslib_1.__exportStar(require("./useCompoundButton"), exports);
-tslib_1.__exportStar(require("./useCompoundButtonClasses"), exports);
+
+var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
+
+Object.defineProperty(exports, "useCompoundButtonStyles", {
+  enumerable: true,
+  get: function () {
+    return useCompoundButtonStyles_1.useCompoundButtonStyles;
+  }
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CompoundButton/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AAEjC,8DAAoC;AACpC,qEAA2C","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './useCompoundButton';\nexport * from './useCompoundButtonClasses';\n"]}
+{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourceRoot":""}

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

@@ -1,5 +1,5 @@
-import { CompoundButtonState } from './CompoundButton.types';
+import type { CompoundButtonState } from './CompoundButton.types';
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
 export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;

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

@@ -1,21 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var index_1 = require("@fluentui/react-compose/lib-commonjs/next/index");
-var useCompoundButton_1 = require("./useCompoundButton");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCompoundButton = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
-exports.renderCompoundButton = function (state) {
-    var _a = index_1.getSlots(state, useCompoundButton_1.compoundButtonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var loading = state.loading, iconPosition = state.iconPosition, iconOnly = state.iconOnly;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-        loading && React.createElement(slots.loader, tslib_1.__assign({}, slotProps.loader)),
-        iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-        !iconOnly && (React.createElement(slots.contentContainer, tslib_1.__assign({}, slotProps.contentContainer),
-            React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
-            React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent)))),
-        iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+
+
+var renderCompoundButton = function (state) {
+  var _a = react_utilities_1.getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  var iconOnly = state.iconOnly,
+      iconPosition = state.iconPosition;
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && React.createElement(slots.contentContainer, tslib_1.__assign({}, slotProps.contentContainer), slotProps.root.children, React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))), iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
 };
+
+exports.renderCompoundButton = renderCompoundButton;
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,gEAAkE;AAElE,yDAAmE;AAEnE;;GAEG;AACU,QAAA,oBAAoB,GAAG,UAAC,KAA0B;IACvD,IAAA,8EAAoE,EAAlE,gBAAK,EAAE,wBAA2D,CAAC;IACnE,IAAA,uBAAO,EAAE,iCAAY,EAAE,yBAAQ,CAAW;IAElD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;QAC3B,OAAO,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;QACjD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;QAC9D,CAAC,QAAQ,IAAI,CACZ,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB;YACpD,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACxC,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CACnC,CAC1B;QACA,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-compose/lib/next/index';\nimport { CompoundButtonState } from './CompoundButton.types';\nimport { compoundButtonShorthandProps } from './useCompoundButton';\n\n/**\n * Define the render function. Given the state of a button, renders it.\n */\nexport const renderCompoundButton = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots(state, compoundButtonShorthandProps);\n  const { loading, iconPosition, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {loading && <slots.loader {...slotProps.loader} />}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          <slots.content {...slotProps.content} />\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAArC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAME,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}