@fluentui/react-button 0.0.0-nightlyf3ce1fbe1d20211110.1 → 0.0.0-nightlyfc5cfdc52420220215.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderSplitButton = void 0;
+exports.renderSplitButton_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -13,13 +13,16 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  */
 
 
-const renderSplitButton = state => {
+const renderSplitButton_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, ['root', 'menuButton', 'primaryActionButton']);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), React.createElement(slots.primaryActionButton, Object.assign({}, slotProps.primaryActionButton)), React.createElement(slots.menuButton, Object.assign({}, slotProps.menuButton)));
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.primaryActionButton && React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
+  }), slots.menuButton && React.createElement(slots.menuButton, { ...slotProps.menuButton
+  }));
 };
 
-exports.renderSplitButton = renderSplitButton;
+exports.renderSplitButton_unstable = renderSplitButton_unstable;
 //# sourceMappingURL=renderSplitButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,EAAkC,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAAlC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,IAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourceRoot":""}

package/lib-commonjs/components/SplitButton/useSplitButton.d.ts

@@ -5,4 +5,4 @@ import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
  * @param props - User provided props to the SplitButton component.
  * @param ref - User provided ref to be passed to the SplitButton component.
  */
-export declare const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
+export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSplitButton = void 0;
+exports.useSplitButton_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
@@ -17,7 +17,7 @@ const MenuButton_1 = /*#__PURE__*/require("../MenuButton/MenuButton");
  */
 
 
-const useSplitButton = (props, ref) => {
+const useSplitButton_unstable = (props, ref) => {
   const {
     appearance,
     block = false,
@@ -27,15 +27,18 @@ const useSplitButton = (props, ref) => {
     icon,
     iconPosition = 'before',
     menuButton,
+    menuIcon,
     primaryActionButton,
     shape = 'rounded',
     size = 'medium'
   } = props;
+  const baseId = react_utilities_1.useId('splitButton-');
   const menuButtonShorthand = react_utilities_1.resolveShorthand(menuButton, {
     defaultProps: {
       appearance,
       disabled,
       disabledFocusable,
+      menuIcon,
       shape,
       size
     }
@@ -49,10 +52,17 @@ const useSplitButton = (props, ref) => {
       disabledFocusable,
       icon,
       iconPosition,
+      id: baseId + '__primaryActionButton',
       shape,
       size
     }
-  });
+  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
+  // by the user.
+
+  if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+  }
+
   return {
     // Props passed at the top-level
     appearance,
@@ -77,5 +87,5 @@ const useSplitButton = (props, ref) => {
   };
 };
 
-exports.useSplitButton = useSplitButton;
+exports.useSplitButton_unstable = useSplitButton_unstable;
 //# sourceMappingURL=useSplitButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,cAAc,GAAG,CAC5B,KAD4B,EAE5B,GAF4B,KAGR;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,mBATI;AAUJ,IAAA,KAAK,GAAG,SAVJ;AAWJ,IAAA,IAAI,GAAG;AAXH,MAYF,KAZJ;AAaA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,KAJY;AAKZ,MAAA;AALY;AADyC,GAA7B,CAA5B;AASA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,KARY;AASZ,MAAA;AATY;AAD2D,GAAtC,CAArC;AAcA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA7DM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;AAEA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY;AADyC,GAA7B,CAA5B;AAWA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY;AAD2D,GAAtC,CAArC,CA7BoB,CA4CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA/EM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts

@@ -1,3 +1,3 @@
 import type { SplitButtonState } from './SplitButton.types';
 export declare const splitButtonClassName = "fui-SplitButton";
-export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
+export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;

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/ToggleButton.types.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonProps, ButtonState } from '../Button/Button.types';
-export declare type ToggleButtonCommons = {
+declare type ToggleButtonCommons = {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * If passed, `ToggleButton` ignores the `defaultChecked` property.
@@ -17,3 +17,4 @@ export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommon
     defaultChecked?: boolean;
 };
 export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
+export {};

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