@fluentui/react-button 0.0.0-nightly050f89bf0020211102.1 → 0.0.0-nightly442708a36520211209.1

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -1,11 +1,12 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-var SplitButtonClassNames = {
-  primaryActionButton: 'SplitButton-primaryActionButton',
-  menuButton: 'SplitButton-menuButton'
+export const splitButtonClassName = 'fui-SplitButton';
+const SplitButtonClassNames = {
+  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
+  menuButton: `${splitButtonClassName}-menuButton`
 };
 
-var useFocusStyles = /*#__PURE__*/__styles({
+const useFocusStyles = /*#__PURE__*/__styles({
   "primaryActionButton": {
     "B486eqv": "f2hkw1w",
     "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
@@ -22,59 +23,61 @@ var useFocusStyles = /*#__PURE__*/__styles({
   "d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
 });
 
-var useRootStyles = /*#__PURE__*/__styles({
+const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
     "Brf1p80": "fsxf2b5",
     "qhf8xq": "f10pi13n",
     "ha4doy": "fmrv4ls",
-    "ipgm0c": ["f178uykt", "f90yzzo"],
-    "B6cuk21": ["f1bxd3c5", "f1ekv84t"],
-    "bajz6s": ["fnux5s6", "f5nfhee"],
-    "Bzqncq": ["f19wc9x7", "f5bevrs"],
-    "Flt4rd": ["f1wefiyg", "f1leuqsa"]
+    "mfjwoh": ["fwj9yvy", "f1lzjiju"],
+    "ibxugx": ["f1a35zaw", "f1l6wyf7"],
+    "Bqvcgfq": ["f104opbk", "f147sopj"],
+    "Baxitl6": ["fxs6g7p", "f1moly3t"],
+    "zkjfwm": ["f1m1y7kk", "ff82swa"]
   },
   "block": {
     "a9b677": "fly5x3f"
   },
   "outline": {},
   "primary": {
-    "Bxrr62k": ["f8z1slf", "f1qj10op"],
-    "wqijrc": ["fmrqvvu", "fu0z9tm"],
-    "Bsk9mq6": ["f1naws84", "f1ry7auu"]
+    "Bt6mj9": ["fptrtw7", "f51449u"],
+    "xhdd7j": ["f1n4yg8a", "fbebbjo"],
+    "Jxu9b0": ["fnmoi2n", "f1l3povx"]
   },
   "subtle": {
-    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
-    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
-    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
   },
   "transparent": {
-    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
-    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
-    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
   },
   "circular": {},
   "rounded": {},
   "square": {},
   "disabled": {
-    "Bxrr62k": ["f11wzqjl", "f1a5dzic"],
-    "wqijrc": ["fhk4lgh", "f1r7ztp2"],
-    "Bsk9mq6": ["f1ot7jx6", "f1qvd61g"]
+    "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
+    "xhdd7j": ["f3cl9o2", "f12vilfs"],
+    "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f178uykt .SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f90yzzo .SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1bxd3c5 .SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1ekv84t .SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f8z1slf .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1qj10op .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1xobncs .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1xirlzn .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11wzqjl .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1a5dzic .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "h": [".fmrqvvu:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fu0z9tm:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1hmsn3f:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fi0rm9z:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fhk4lgh:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1r7ztp2:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "a": [".f1naws84:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ry7auu:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fam4u78:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1hqq1j6:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1ot7jx6:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1qvd61g:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
 });
 
-export var useSplitButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var focusStyles = useFocusStyles();
-  var appearance = state.appearance,
-      block = state.block,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable;
-  state.root.className = mergeClasses(rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+export const useSplitButtonStyles = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    block,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
 
   if (state.menuButton) {
     state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,iCADO;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,WAAW,GAAG,cAAc,EAAlC;AAEQ,MAAA,UAAU,GAAyC,KAAK,CAA9C,UAAV;AAAA,MAAY,KAAK,GAAkC,KAAK,CAAvC,KAAjB;AAAA,MAAmB,QAAQ,GAAwB,KAAK,CAA7B,QAA3B;AAAA,MAA6B,iBAAiB,GAAK,KAAK,CAAV,iBAA9C;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,UAAU,CAAC,IADsB,EAEjC,KAAK,IAAI,UAAU,CAAC,KAFa,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CA/BM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourceRoot":""}

package/lib/components/ToggleButton/ToggleButton.js

@@ -6,8 +6,8 @@ import { useToggleButtonStyles } from './useToggleButtonStyles';
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
 
-export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useToggleButton(props, ref);
+export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useToggleButton(props, ref);
   useToggleButtonStyles(state);
   return renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });

package/lib/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9F,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CAL8F,CAM9F;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}

package/lib/components/ToggleButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { useToggleButtonStyles } from './useToggleButtonStyles';
+export { toggleButtonClassName, useToggleButtonStyles } from './useToggleButtonStyles';

package/lib/components/ToggleButton/index.js

@@ -2,5 +2,5 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { useToggleButtonStyles } from './useToggleButtonStyles';
+export { toggleButtonClassName, useToggleButtonStyles } from './useToggleButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,4 +1,3 @@
-import { __assign, __rest } from "tslib";
 import { useControllableState } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useButton } from '../Button/useButton';
@@ -9,42 +8,41 @@ import { useButton } from '../Button/useButton';
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
 
-export var useToggleButton = function (_a, ref) {
-  var _b;
-
-  var checked = _a.checked,
-      defaultChecked = _a.defaultChecked,
-      props = __rest(_a, ["checked", "defaultChecked"]);
-
-  var buttonState = useButton(props, ref);
-  var _c = buttonState.root,
-      role = _c.role,
-      onClick = _c.onClick;
-
-  var _d = useControllableState({
+export const useToggleButton = ({
+  checked,
+  defaultChecked,
+  ...props
+}, ref) => {
+  const buttonState = useButton(props, ref);
+  const {
+    role,
+    onClick
+  } = buttonState.root;
+  const [checkedValue, setCheckedValue] = useControllableState({
     state: checked,
     defaultState: defaultChecked,
     initialState: false
-  }),
-      checkedValue = _d[0],
-      setCheckedValue = _d[1];
-
-  var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
-  return __assign(__assign({}, buttonState), {
+  });
+  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+  return { // Button state
+    ...buttonState,
     // State calculated from a set of props
     checked: checkedValue,
     // Slots definition
-    root: __assign(__assign({}, buttonState.root), (_b = {}, _b[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue, _b.onClick = React.useCallback(function (ev) {
-      if (onClick) {
-        onClick(ev);
+    root: { ...buttonState.root,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !!checkedValue,
+      onClick: React.useCallback(ev => {
+        if (onClick) {
+          onClick(ev);
 
-        if (ev.defaultPrevented) {
-          return;
+          if (ev.defaultPrevented) {
+            return;
+          }
         }
-      }
 
-      setCheckedValue(!checkedValue);
-    }, [checkedValue, setCheckedValue, onClick]), _b))
-  });
+        setCheckedValue(!checkedValue);
+      }, [checkedValue, setCheckedValue, onClick])
+    }
+  };
 };
 //# sourceMappingURL=useToggleButton.js.map

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,qBAA1B;AAGA;;;;;AAKG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,EAD6B,EAE7B,GAF6B,EAEwB;;;AADnD,MAAA,OAAO,GAAA,EAAA,CAAA,OAAP;AAAA,MAAS,cAAc,GAAA,EAAA,CAAA,cAAvB;AAAA,MAA4B,KAAK,GAAA,MAAA,CAAA,EAAA,EAAnC,CAAA,SAAA,EAAA,gBAAA,CAAmC,CAAjC;;AAGF,MAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACM,MAAA,EAAA,GAAoB,WAAW,CAAC,IAAhC;AAAA,MAAE,IAAI,GAAA,EAAA,CAAA,IAAN;AAAA,MAAQ,OAAO,GAAA,EAAA,CAAA,OAAf;;AAEA,MAAA,EAAA,GAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B;;AAMN,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,OAAO,EAAE,YAHK;AAKd;AACA,IAAA,IAAI,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,WAAW,CAAC,IADb,CAAA,GACiB,EAAA,GAAA,EAAA,EAAA,EAAA,CAClB,kBAAkB,GAAG,cAAH,GAAoB,cADpB,CAAA,GACqC,CAAC,CAAC,YADvC,EAEnB,EAAA,CAAA,OAAA,GAAS,KAAK,CAAC,WAAN,CACP,UAAA,EAAA,EAAE;AACA,UAAI,OAAJ,EAAa;AACX,QAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,YAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,MAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,KAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO,CAFU,EAelB,EAhBC;AANU,GAFhB,CAAA;AA2BD,CA1CM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,qBAA1B;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,eAAe,GAAG,CAC7B;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CAD6B,EAE7B,GAF6B,KAGR;AACrB,QAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,CAAC,CAAC,YAFtD;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,OAAJ,EAAa;AACX,UAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,QAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,OAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO;AAHL;AARD,GAAP;AA2BD,CA1CM","sourceRoot":""}

package/lib/components/ToggleButton/useToggleButtonStyles.d.ts

@@ -1,2 +1,3 @@
 import type { ToggleButtonState } from './ToggleButton.types';
+export declare const toggleButtonClassName = "fui-ToggleButton";
 export declare const useToggleButtonStyles: (state: ToggleButtonState) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -1,9 +1,10 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, __styles } from '@fluentui/react-make-styles';
 import { useButtonStyles } from '../Button/useButtonStyles';
+export const toggleButtonClassName = 'fui-ToggleButton';
 
-var useCheckedStyles = /*#__PURE__*/__styles({
+const useCheckedStyles = /*#__PURE__*/__styles({
   "base": {
-    "ayd6f0": "fg85c1j",
+    "De3pzq": "f1nfm20t",
     "g2u3we": "fj3muxo",
     "h3c5rm": ["f1akhkt", "f1lxtadh"],
     "B9xav0g": "f1aperda",
@@ -13,13 +14,13 @@ var useCheckedStyles = /*#__PURE__*/__styles({
     "Bekrc4i": ["f5tn483", "f1ojsxk5"],
     "Bn0qgzm": "f1vxd6vx",
     "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "v4pbla": "f56u8ty",
+    "Jwef8y": "f1knas48",
     "Bgoe8wy": "fvcxoqz",
     "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
     "oetu4i": "f1xlaoq0",
     "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
     "Bi91k9c": "fax3udt",
-    "vv34bc": "fzgy25m",
+    "ecr2s2": "fb40n2d",
     "B6oc9vd": "fvs00aa",
     "ak43y8": ["f1assf6x", "f4ruux4"],
     "wmxk5l": "fumykes",
@@ -27,24 +28,24 @@ var useCheckedStyles = /*#__PURE__*/__styles({
     "lj723h": "f1r2dosr"
   },
   "outline": {
-    "ayd6f0": "f6r4cvw",
-    "v4pbla": "f62j56f",
-    "vv34bc": "flt377r"
+    "De3pzq": "f1q9pm1r",
+    "Jwef8y": "fjxutwb",
+    "ecr2s2": "fophhak"
   },
   "primary": {
-    "ayd6f0": "fvinvdn",
+    "De3pzq": "f8w4g0q",
     "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",
@@ -52,19 +53,19 @@ var useCheckedStyles = /*#__PURE__*/__styles({
     "lj723h": "f18otbis"
   },
   "subtle": {
-    "ayd6f0": "f1n839y3",
+    "De3pzq": "fq5gl1p",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
     "sj55zd": "f1qj7y59",
-    "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",
@@ -72,19 +73,19 @@ var useCheckedStyles = /*#__PURE__*/__styles({
     "lj723h": "f19au66r"
   },
   "transparent": {
-    "ayd6f0": "f6r4cvw",
+    "De3pzq": "f1q9pm1r",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
     "sj55zd": "f1qj7y59",
-    "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",
@@ -92,26 +93,26 @@ var useCheckedStyles = /*#__PURE__*/__styles({
     "lj723h": "f19au66r"
   }
 }, {
-  "d": [".fg85c1j{background:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".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);}", ".f6r4cvw{background:var(--colorTransparentBackgroundSelected);}", ".fvinvdn{background:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1n839y3{background:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
-  "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);}", ".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);}", ".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": [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  "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);}", ".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);}", ".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 useDisabledStyles = /*#__PURE__*/__styles({
+const useDisabledStyles = /*#__PURE__*/__styles({
   "base": {
-    "ayd6f0": "fqst6tg",
+    "De3pzq": "f1bg9a2p",
     "g2u3we": "f1jj8ep1",
     "h3c5rm": ["f15xbau", "fy0fskl"],
     "B9xav0g": "f4ikngz",
     "zhjwy3": ["fy0fskl", "f15xbau"],
     "sj55zd": "f1s2aq7o",
-    "v4pbla": "f1nil5o8",
+    "Jwef8y": "f1falr9n",
     "Bgoe8wy": "f12mpcsy",
     "Bwzppfd": ["f1gwvigk", "f18rmfxp"],
     "oetu4i": "f1jnshp0",
     "gg5e9n": ["f18rmfxp", "f1gwvigk"],
     "Bi91k9c": "fvgxktp",
-    "vv34bc": "fkqx3al",
+    "ecr2s2": "f1ryyzvn",
     "B6oc9vd": "fdi4vxw",
     "ak43y8": ["f4ryxzl", "fkdgpbx"],
     "wmxk5l": "fcmhn06",
@@ -134,53 +135,55 @@ var useDisabledStyles = /*#__PURE__*/__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);}", ".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);}", ".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);}", ".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);}", ".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);}", ".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);}", ".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;}"]
 });
 
-export var useToggleButtonStyles = function (state) {
-  var checkedStyles = useCheckedStyles();
-  var disabledStyles = useDisabledStyles();
-  var appearance = state.appearance,
-      checked = state.checked,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable;
-  state.root.className = mergeClasses( // Checked styles
+export const useToggleButtonStyles = state => {
+  const checkedStyles = useCheckedStyles();
+  const disabledStyles = useDisabledStyles();
+  const {
+    appearance,
+    checked,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(toggleButtonClassName, // Checked styles
   checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
   (disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
   state.root.className);

package/lib/components/ToggleButton/useToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,IAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAiEA,OAAO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEQ,MAAA,UAAU,GAA2C,KAAK,CAAhD,UAAV;AAAA,MAAY,OAAO,GAAkC,KAAK,CAAvC,OAAnB;AAAA,MAAqB,QAAQ,GAAwB,KAAK,CAA7B,QAA7B;AAAA,MAA+B,iBAAiB,GAAK,KAAK,CAAV,iBAAhD;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,EACjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAFQ,EAGjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CAHL,EAKjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IANjB,EAOjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAP9B,EASjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAVsB,CAAnC;AAaA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAtBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,6BAArD;AACA,SAAS,eAAT,QAAgC,2BAAhC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAiEA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAgD;AACnF,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAxBM","sourceRoot":""}

package/lib-commonjs/Button.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Button/index"), exports);
 //# sourceMappingURL=Button.js.map

package/lib-commonjs/CompoundButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/CompoundButton/index"), exports);
 //# sourceMappingURL=CompoundButton.js.map

package/lib-commonjs/MenuButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuButton/index"), exports);
 //# sourceMappingURL=MenuButton.js.map

package/lib-commonjs/SplitButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/SplitButton/index"), exports);
 //# sourceMappingURL=SplitButton.js.map

package/lib-commonjs/ToggleButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/ToggleButton/index"), exports);
 //# sourceMappingURL=ToggleButton.js.map

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

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Button = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderButton_1 = /*#__PURE__*/require("./renderButton");
+const renderButton_1 = /*#__PURE__*/require("./renderButton");
 
-var useButton_1 = /*#__PURE__*/require("./useButton");
+const useButton_1 = /*#__PURE__*/require("./useButton");
 
-var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
+const useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
 /**
  * Buttons give people a way to trigger an action.
  */
 
 
-exports.Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useButton_1.useButton(props, ref);
+exports.Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useButton_1.useButton(props, ref);
   useButtonStyles_1.useButtonStyles(state);
   return renderButton_1.renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALkF,CAMlF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}

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

@@ -2,4 +2,4 @@ export * from './Button';
 export * from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { useButtonStyles } from './useButtonStyles';
+export { buttonClassName, useButtonStyles } from './useButtonStyles';