@fluentui/react-button 0.0.0-nightlyc0273fdc6920211123.1 → 0.0.0-nightlyc49127232120220201.1

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js

@@ -3,19 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSplitButtonStyles = exports.splitButtonClassName = void 0;
+exports.useSplitButtonStyles_unstable = exports.splitButtonClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 exports.splitButtonClassName = 'fui-SplitButton';
 const SplitButtonClassNames = {
   primaryActionButton: `${exports.splitButtonClassName}-primaryActionButton`,
   menuButton: `${exports.splitButtonClassName}-menuButton`
 };
 
-const useFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useFocusStyles = /*#__PURE__*/react_1.__styles({
   "primaryActionButton": {
     "B486eqv": "f2hkw1w",
     "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
@@ -32,7 +34,7 @@ const useFocusStyles = /*#__PURE__*/react_make_styles_1.__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;}"]
 });
 
-const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
     "Brf1p80": "fsxf2b5",
@@ -77,7 +79,7 @@ const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "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);}"]
 });
 
-const useSplitButtonStyles = state => {
+const useSplitButtonStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
   const {
@@ -86,18 +88,18 @@ const useSplitButtonStyles = state => {
     disabled,
     disabledFocusable
   } = state;
-  state.root.className = react_make_styles_1.mergeClasses(exports.splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
 
   if (state.menuButton) {
-    state.menuButton.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+    state.menuButton.className = react_1.mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
   }
 
   if (state.primaryActionButton) {
-    state.primaryActionButton.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+    state.primaryActionButton.className = react_1.mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
   }
 
   return state;
 };
 
-exports.useSplitButtonStyles = useSplitButtonStyles;
+exports.useSplitButtonStyles_unstable = useSplitButtonStyles_unstable;
 //# sourceMappingURL=useSplitButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AAEb,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,OAAA,CAAA,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,OAAA,CAAA,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;;AAgHO,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,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,mBAAA,CAAA,YAAA,CAC3B,qBAAqB,CAAC,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,mBAAA,CAAA,YAAA,CACpC,qBAAqB,CAAC,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AAEb,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,OAAA,CAAA,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,OAAA,CAAA,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;;AAgHO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,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,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,qBAAqB,CAAC,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,qBAAqB,CAAC,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourceRoot":""}

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

@@ -18,9 +18,9 @@ const useToggleButtonStyles_1 = /*#__PURE__*/require("./useToggleButtonStyles");
 
 
 exports.ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useToggleButton_1.useToggleButton(props, ref);
-  useToggleButtonStyles_1.useToggleButtonStyles(state);
-  return renderToggleButton_1.renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  const state = useToggleButton_1.useToggleButton_unstable(props, ref);
+  useToggleButtonStyles_1.useToggleButtonStyles_unstable(state);
+  return renderToggleButton_1.renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.ToggleButton.displayName = 'ToggleButton';
 //# sourceMappingURL=ToggleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,iBAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,GAAvB,CAAd;AAEA,EAAA,uBAAA,CAAA,qBAAA,CAAsB,KAAtB;AAEA,SAAO,oBAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAP,CALkG,CAMlG;AACD,CAPmE,CAAvD;AASb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;AAEA,EAAA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;AAEA,SAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP,CALkG,CAMlG;AACD,CAPmE,CAAvD;AASb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourceRoot":""}

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToggleButtonStyles = exports.toggleButtonClassName = void 0;
+exports.useToggleButtonStyles_unstable = exports.toggleButtonClassName = void 0;
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
@@ -23,10 +23,10 @@ Object.defineProperty(exports, "toggleButtonClassName", {
     return useToggleButtonStyles_1.toggleButtonClassName;
   }
 });
-Object.defineProperty(exports, "useToggleButtonStyles", {
+Object.defineProperty(exports, "useToggleButtonStyles_unstable", {
   enumerable: true,
   get: function () {
-    return useToggleButtonStyles_1.useToggleButtonStyles;
+    return useToggleButtonStyles_1.useToggleButtonStyles_unstable;
   }
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,8BAAA;AAA8B;AAA9B,CAAA","sourceRoot":""}

package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts

@@ -1 +1 @@
-export { renderButton as renderToggleButton } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';

package/lib-commonjs/components/ToggleButton/renderToggleButton.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderToggleButton = void 0;
+exports.renderToggleButton_unstable = void 0;
 
 var renderButton_1 = /*#__PURE__*/require("../Button/renderButton");
 
-Object.defineProperty(exports, "renderToggleButton", {
+Object.defineProperty(exports, "renderToggleButton_unstable", {
   enumerable: true,
   get: function () {
-    return renderButton_1.renderButton;
+    return renderButton_1.renderButton_unstable;
   }
 });
 //# sourceMappingURL=renderToggleButton.js.map

package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,YAAA;AAAY;AAAZ,CAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA","sourceRoot":""}

package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts

@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-export declare const useToggleButton: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
+export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;

package/lib-commonjs/components/ToggleButton/useToggleButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToggleButton = void 0;
+exports.useToggleButton_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
@@ -18,12 +18,16 @@ const useButton_1 = /*#__PURE__*/require("../Button/useButton");
  */
 
 
-const useToggleButton = ({
+const useToggleButton_unstable = ({
   checked,
   defaultChecked,
   ...props
 }, ref) => {
-  const buttonState = useButton_1.useButton(props, ref);
+  const {
+    disabled,
+    disabledFocusable
+  } = props;
+  const buttonState = useButton_1.useButton_unstable(props, ref);
   const {
     role,
     onClick
@@ -40,7 +44,7 @@ const useToggleButton = ({
     checked: checkedValue,
     // Slots definition
     root: { ...buttonState.root,
-      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !!checkedValue,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !disabled && !disabledFocusable && checkedValue,
       onClick: React.useCallback(ev => {
         if (onClick) {
           onClick(ev);
@@ -56,5 +60,5 @@ const useToggleButton = ({
   };
 };
 
-exports.useToggleButton = useToggleButton;
+exports.useToggleButton_unstable = useToggleButton_unstable;
 //# sourceMappingURL=useToggleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,eAAe,GAAG,CAC7B;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CAD6B,EAE7B,GAF6B,KAGR;AACrB,QAAM,WAAW,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAApB;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,iBAAA,CAAA,oBAAA,CAAqB;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAArB,CAAxC;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;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAApB;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,iBAAA,CAAA,oBAAA,CAAqB;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAArB,CAAxC;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,QAAD,IAAa,CAAC,iBAAd,IAAmC,YAFvF;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,CA3CM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourceRoot":""}

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

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

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToggleButtonStyles = exports.toggleButtonClassName = void 0;
+exports.useToggleButtonStyles_unstable = exports.toggleButtonClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
 
 exports.toggleButtonClassName = 'fui-ToggleButton';
 
-const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useCheckedStyles = /*#__PURE__*/react_1.__styles({
   "base": {
-    "ayd6f0": "fg85c1j",
+    "De3pzq": "f1nfm20t",
     "g2u3we": "fj3muxo",
     "h3c5rm": ["f1akhkt", "f1lxtadh"],
     "B9xav0g": "f1aperda",
@@ -23,13 +25,13 @@ const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__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",
@@ -37,24 +39,24 @@ const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__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",
@@ -62,19 +64,19 @@ const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__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",
@@ -82,19 +84,19 @@ const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__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",
@@ -102,26 +104,26 @@ const useCheckedStyles = /*#__PURE__*/react_make_styles_1.__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);}"]
 });
 
-const useDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useDisabledStyles = /*#__PURE__*/react_1.__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",
@@ -144,46 +146,46 @@ const useDisabledStyles = /*#__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);}", ".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;}"]
 });
 
-const useToggleButtonStyles = state => {
+const useToggleButtonStyles_unstable = state => {
   const checkedStyles = useCheckedStyles();
   const disabledStyles = useDisabledStyles();
   const {
@@ -192,13 +194,13 @@ const useToggleButtonStyles = state => {
     disabled,
     disabledFocusable
   } = state;
-  state.root.className = react_make_styles_1.mergeClasses(exports.toggleButtonClassName, // Checked styles
+  state.root.className = react_1.mergeClasses(exports.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);
-  useButtonStyles_1.useButtonStyles(state);
+  useButtonStyles_1.useButtonStyles_unstable(state);
   return state;
 };
 
-exports.useToggleButtonStyles = useToggleButtonStyles;
+exports.useToggleButtonStyles_unstable = useToggleButtonStyles_unstable;
 //# sourceMappingURL=useToggleButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAAwB,kBAAxB;;AAEb,MAAM,gBAAgB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;;AAiEO,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,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBADqB,EAGrB;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJJ,EAKrB,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALjB,EAOrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IAR7B,EASrB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT1C,EAWrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAeA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAAwB,kBAAxB;;AAEb,MAAM,gBAAgB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;;AAiEO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,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,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBADqB,EAGrB;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJJ,EAKrB,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALjB,EAOrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IAR7B,EASrB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT1C,EAWrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAeA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "0.0.0-nightlyc0273fdc6920211123.1",
+  "version": "0.0.0-nightlyc49127232120220201.1",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,18 +19,17 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-button/src && yarn docs",
-    "storybook": "start-storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-button/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
-    "@fluentui/babel-make-styles": "0.0.0-nightlyc0273fdc6920211123.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightlyc0273fdc6920211123.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightlyc0273fdc6920211123.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightlyc49127232120220201.1",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,12 +43,12 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightlyc0273fdc6920211123.1",
-    "@fluentui/react-aria": "0.0.0-nightlyc0273fdc6920211123.1",
-    "@fluentui/react-icons": "^1.1.140",
-    "@fluentui/react-make-styles": "0.0.0-nightlyc0273fdc6920211123.1",
-    "@fluentui/react-tabster": "0.0.0-nightlyc0273fdc6920211123.1",
-    "@fluentui/react-utilities": "0.0.0-nightlyc0273fdc6920211123.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightlyc49127232120220201.1",
+    "@fluentui/react-aria": "0.0.0-nightlyc49127232120220201.1",
+    "@fluentui/react-icons": "^2.0.154-beta.5",
+    "@fluentui/react-tabster": "0.0.0-nightlyc49127232120220201.1",
+    "@fluentui/react-utilities": "0.0.0-nightlyc49127232120220201.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib/common/isConformant.js

@@ -1,13 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-  const defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    disabledTests: ['has-docblock', 'kebab-aria-attributes'],
-    extraTests: makeStylesTests,
-    skipAsPropTests: true
-  };
-  baseIsConformant(defaultOptions, testInfo);
-}
-//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,EAAiB,uBAAjB,CAH4C;AAI3D,IAAA,UAAU,EAAE,eAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib-commonjs/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib-commonjs/common/isConformant.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isConformant = void 0;
-
-const react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
-
-const react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
-
-function isConformant(testInfo) {
-  const defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    disabledTests: ['has-docblock', 'kebab-aria-attributes'],
-    extraTests: react_conformance_make_styles_1.default,
-    skipAsPropTests: true
-  };
-  react_conformance_1.isConformant(defaultOptions, testInfo);
-}
-
-exports.isConformant = isConformant;
-//# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,EAAiB,uBAAjB,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}