@fluentui/react-button 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButtonStyles = void 0;
+exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassName = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./CompoundButton"), exports);
 
@@ -17,10 +17,16 @@ tslib_1.__exportStar(require("./useCompoundButton"), exports);
 
 var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
 
-Object.defineProperty(exports, "useCompoundButtonStyles", {
+Object.defineProperty(exports, "compoundButtonClassName", {
   enumerable: true,
   get: function () {
-    return useCompoundButtonStyles_1.useCompoundButtonStyles;
+    return useCompoundButtonStyles_1.compoundButtonClassName;
+  }
+});
+Object.defineProperty(exports, "useCompoundButtonStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return useCompoundButtonStyles_1.useCompoundButtonStyles_unstable;
   }
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,gCAAA;AAAgC;AAAhC,CAAA","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"],"sourceRoot":"../src/"}

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

@@ -2,4 +2,4 @@ import type { CompoundButtonState } from './CompoundButton.types';
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
-export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;
+export declare const renderCompoundButton_unstable: (state: CompoundButtonState) => JSX.Element;

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

@@ -3,27 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCompoundButton = void 0;
+exports.renderCompoundButton_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
 
 
-var renderCompoundButton = function (state) {
-  var _a = react_utilities_1.getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  var iconOnly = state.iconOnly,
-      iconPosition = state.iconPosition;
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && React.createElement(slots.contentContainer, tslib_1.__assign({}, slotProps.contentContainer), slotProps.root.children, React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))), iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
+const renderCompoundButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    iconOnly,
+    iconPosition
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), !iconOnly && React.createElement(slots.contentContainer, { ...slotProps.contentContainer
+  }, slotProps.root.children, slots.secondaryContent && React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  })), iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }));
 };
 
-exports.renderCompoundButton = renderCompoundButton;
+exports.renderCompoundButton_unstable = renderCompoundButton_unstable;
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAArC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAME,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAR7C,CADF;AAYD,CAhBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,4 +5,4 @@ import type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.
  * @param props - User provided props to the CompoundButton component.
  * @param ref - User provided ref to be passed to the CompoundButton component.
  */
-export declare const useCompoundButton: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
+export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;

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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButton = void 0;
+exports.useCompoundButton_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var index_1 = /*#__PURE__*/require("../Button/index");
+const index_1 = /*#__PURE__*/require("../Button/index");
 /**
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @param props - User provided props to the CompoundButton component.
@@ -17,12 +15,13 @@ var index_1 = /*#__PURE__*/require("../Button/index");
  */
 
 
-var useCompoundButton = function (_a, ref) {
-  var contentContainer = _a.contentContainer,
-      secondaryContent = _a.secondaryContent,
-      props = tslib_1.__rest(_a, ["contentContainer", "secondaryContent"]);
-
-  return tslib_1.__assign(tslib_1.__assign({}, index_1.useButton(props, ref)), {
+const useCompoundButton_unstable = ({
+  contentContainer,
+  secondaryContent,
+  ...props
+}, ref) => {
+  return { // Button state
+    ...index_1.useButton_unstable(props, ref),
     // Slots definition
     components: {
       root: 'button',
@@ -34,8 +33,8 @@ var useCompoundButton = function (_a, ref) {
       required: true
     }),
     secondaryContent: react_utilities_1.resolveShorthand(secondaryContent)
-  });
+  };
 };
 
-exports.useCompoundButton = useCompoundButton;
+exports.useCompoundButton_unstable = useCompoundButton_unstable;
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;;;AAIG;;;AACI,IAAM,iBAAiB,GAAG,UAC/B,EAD+B,EAE/B,GAF+B,EAEsB;AADnD,MAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAhB;AAAA,MAAkB,gBAAgB,GAAA,EAAA,CAAA,gBAAlC;AAAA,MAAuC,KAAK,GAAA,OAAA,CAAA,MAAA,CAAA,EAAA,EAA9C,CAAA,kBAAA,EAAA,kBAAA,CAA8C,CAA5C;;AAGF,SAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAEK,OAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAFL,CAAA,EAE0B;AAExB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KAHY;AASxB,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CATM;AAUxB,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAVM,GAF1B,CAAA;AAcD,CAlBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;AACvB,SAAO,EACL;AACA,OAAG,OAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAFE;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CAXb;AAYL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAZb,GAAP;AAcD,CAlBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useButton_unstable } from '../Button/index';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  return {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,2 +1,3 @@
 import type { CompoundButtonState } from './CompoundButton.types';
-export declare const useCompoundButtonStyles: (state: CompoundButtonState) => CompoundButtonState;
+export declare const compoundButtonClassName = "fui-CompoundButton";
+export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;

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

@@ -3,76 +3,80 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButtonStyles = void 0;
+exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
-var CompoundButtonClassNames = {
-  secondaryContent: 'CompoundButton-secondaryContent'
+const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
+
+exports.compoundButtonClassName = 'fui-CompoundButton';
+const CompoundButtonClassNames = {
+  secondaryContent: `${exports.compoundButtonClassName}-secondaryContent`
 };
 
-var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
-    "rmohyg": "fsbu5mz",
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
     "Bqenvij": "f11ysow2",
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f1b73140",
-    "B7j81dy": "f19sbf7w"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f8rpug0",
+    "n4n7rj": "fre7xro"
   },
   "outline": {},
   "primary": {
-    "Bekya5a": "f1wrmfx5",
-    "Bi863bl": "fl6im4w",
-    "B7j81dy": "f1y0ndy"
+    "Bma4kx5": "f1ur7rb7",
+    "l15nfm": "f1itoici",
+    "n4n7rj": "f1uen3ov"
   },
   "subtle": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f1l9nom2",
+    "n4n7rj": "fvjq8kx"
   },
   "transparent": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f1l9nom2",
+    "n4n7rj": "fvjq8kx"
   },
   "small": {
     "z8tnut": "fp9bwmr",
     "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f150uoa4",
+    "Byoj8tv": "f1fow5ox",
     "uwmqm3": ["f177v4lu", "f19lj068"],
     "Be2twd7": "fkhj508",
     "Bg96gwp": "f1i3iumi"
   },
   "medium": {
-    "z8tnut": "f1kcqot9",
+    "z8tnut": "fbtff6s",
     "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
+    "Byoj8tv": "fp67ikv",
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
     "Be2twd7": "fkhj508",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
-    "z8tnut": "fqag9an",
+    "z8tnut": "fm4bm3s",
     "z189sj": ["f1gbmcue", "f1rh9g5y"],
-    "Byoj8tv": "fp67ikv",
+    "Byoj8tv": "fe2my4m",
     "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k"
   },
   "disabled": {
-    "Bekya5a": "f1ygg8x6",
-    "Bi863bl": "fhtktt2",
-    "B7j81dy": "f1v2jbe6"
+    "Bma4kx5": "fj9njph",
+    "l15nfm": "fr13fpv",
+    "n4n7rj": "f1xrf5v0"
   }
 }, {
-  "d": [".fsbu5mz{gap:12px;}", ".f11ysow2{height:auto;}", ".f1smw4j4 .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1wrmfx5 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1ygg8x6 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "h": [".f1b73140:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".fl6im4w:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f182e9fe:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fhtktt2:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "a": [".f19sbf7w:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1y0ndy:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fdrkfd0:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1v2jbe6:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  "h": [".f8rpug0:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1itoici:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1l9nom2:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fr13fpv:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  "a": [".fre7xro:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1uen3ov:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fvjq8kx:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1xrf5v0:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
 });
 
-var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
   "small": {
     "z8tnut": "f10ra9hq",
     "z189sj": ["f8wuabp", "fycuoez"],
@@ -101,7 +105,7 @@ var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
 });
 
-var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useIconStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Be2twd7": "fndrnj9",
     "Bqenvij": "fbhnoac",
@@ -111,7 +115,7 @@ var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}"]
 });
 
-var useContentContainerStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useContentContainerStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
@@ -121,10 +125,9 @@ var useContentContainerStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"]
 });
 
-var useSecondaryContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useSecondaryContentStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Bg96gwp": "flkuc6h",
-    "B6of3ja": "fvjh0tl",
     "Bhrd7zp": "figsok6"
   },
   "small": {
@@ -137,39 +140,41 @@ var useSecondaryContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Be2twd7": "fkhj508"
   }
 }, {
-  "d": [".flkuc6h{line-height:100%;}", ".fvjh0tl{margin-top:4px;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
+  "d": [".flkuc6h{line-height:100%;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
 });
 
-var useCompoundButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var rootIconOnlyStyles = useRootIconOnlyStyles();
-  var iconStyles = useIconStyles();
-  var contentContainerStyles = useContentContainerStyles();
-  var secondaryContentStyles = useSecondaryContentStyles();
-  var appearance = state.appearance,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable,
-      iconOnly = state.iconOnly,
-      size = state.size;
-  state.root.className = react_make_styles_1.mergeClasses( // Root styles
+const useCompoundButtonStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const rootIconOnlyStyles = useRootIconOnlyStyles();
+  const iconStyles = useIconStyles();
+  const contentContainerStyles = useContentContainerStyles();
+  const secondaryContentStyles = useSecondaryContentStyles();
+  const {
+    appearance,
+    disabled,
+    disabledFocusable,
+    iconOnly,
+    size
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.compoundButtonClassName, // Root styles
   rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
   (disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
   iconOnly && rootIconOnlyStyles[size], // User provided class name
   state.root.className);
 
   if (state.icon) {
-    state.icon.className = react_make_styles_1.mergeClasses(iconStyles.base, state.icon.className);
+    state.icon.className = react_1.mergeClasses(iconStyles.base, state.icon.className);
   }
 
-  state.contentContainer.className = react_make_styles_1.mergeClasses(contentContainerStyles.base, state.contentContainer.className);
+  state.contentContainer.className = react_1.mergeClasses(contentContainerStyles.base, state.contentContainer.className);
 
   if (state.secondaryContent) {
-    state.secondaryContent.className = react_make_styles_1.mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    state.secondaryContent.className = react_1.mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
   }
 
-  useButtonStyles_1.useButtonStyles(state);
+  useButtonStyles_1.useButtonStyles_unstable(state);
   return state;
 };
 
-exports.useCompoundButtonStyles = useCompoundButtonStyles;
+exports.useCompoundButtonStyles_unstable = useCompoundButtonStyles_unstable;
 //# sourceMappingURL=useCompoundButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassName = 'fui-CompoundButton';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: `${compoundButtonClassName}-secondaryContent`,\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    ...shorthands.gap('12px'),\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  subtle: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding('8px', '8px', '10px', '8px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', '12px', '16px', '12px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', '16px', '20px', '16px'),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding('4px'),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding('6px'),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding('8px'),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassName,\n\n    // Root styles\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n  }\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      CompoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuButton = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderMenuButton_1 = /*#__PURE__*/require("./renderMenuButton");
+const renderMenuButton_1 = /*#__PURE__*/require("./renderMenuButton");
 
-var useMenuButton_1 = /*#__PURE__*/require("./useMenuButton");
+const useMenuButton_1 = /*#__PURE__*/require("./useMenuButton");
 
-var useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
+const useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
 /**
  * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
  */
 
 
-exports.MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useMenuButton_1.useMenuButton(props, ref);
-  useMenuButtonStyles_1.useMenuButtonStyles(state);
-  return renderMenuButton_1.renderMenuButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+exports.MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuButton_1.useMenuButton_unstable(props, ref);
+  useMenuButtonStyles_1.useMenuButtonStyles_unstable(state);
+  return renderMenuButton_1.renderMenuButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.MenuButton.displayName = 'MenuButton';
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AAEA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP,CAL0F,CAM1F;AACD,CAP+D,CAAnD;AASb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AAEA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP,CAL8F,CAM9F;AACD,CAP+D,CAAnD;AASb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * MenuButtons are buttons that handle opening and closing a menu when they are triggered.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"sourceRoot":"../src/"}

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

@@ -1,11 +1,10 @@
-import type { MenuTriggerChildProps } from '@fluentui/react-menu';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
 export declare type MenuButtonSlots = ButtonSlots & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */
-    menuIcon?: IntrinsicShorthandProps<'span'>;
+    menuIcon?: Slot<'span'>;
 };
-export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
+export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
 export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;

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

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

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

@@ -2,4 +2,4 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { useMenuButtonStyles } from './useMenuButtonStyles';
+export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuButtonStyles = void 0;
+exports.useMenuButtonStyles_unstable = exports.menuButtonClassName = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./MenuButton.types"), exports);
 
@@ -17,10 +17,16 @@ tslib_1.__exportStar(require("./useMenuButton"), exports);
 
 var useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
 
-Object.defineProperty(exports, "useMenuButtonStyles", {
+Object.defineProperty(exports, "menuButtonClassName", {
   enumerable: true,
   get: function () {
-    return useMenuButtonStyles_1.useMenuButtonStyles;
+    return useMenuButtonStyles_1.menuButtonClassName;
+  }
+});
+Object.defineProperty(exports, "useMenuButtonStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return useMenuButtonStyles_1.useMenuButtonStyles_unstable;
   }
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA","sourceRoot":""}
+{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AAAqB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts

@@ -2,4 +2,4 @@ import type { MenuButtonState } from './MenuButton.types';
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
-export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;
+export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;

package/lib-commonjs/components/MenuButton/renderMenuButton.js

@@ -3,27 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuButton = void 0;
+exports.renderMenuButton_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
 
 
-var renderMenuButton = function (state) {
-  var _a = react_utilities_1.getSlots(state, ['root', 'icon', 'menuIcon']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  var icon = state.icon,
-      iconOnly = state.iconOnly;
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon)));
+const renderMenuButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    icon,
+    iconOnly
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && React.createElement(slots.menuIcon, { ...slotProps.menuIcon
+  }));
 };
 
-exports.renderMenuButton = renderMenuButton;
+exports.renderMenuButton_unstable = renderMenuButton_unstable;
 //# sourceMappingURL=renderMenuButton.js.map

package/lib-commonjs/components/MenuButton/renderMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,CAAC,MAAD,EAAS,MAAT,EAAiB,UAAjB,CAAjC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,IAAI,GAAe,KAAK,CAApB,IAAJ;AAAA,MAAM,QAAQ,GAAK,KAAK,CAAV,QAAd;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHrC,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,IAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuButton/useMenuButton.d.ts

@@ -3,4 +3,4 @@ import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
 /**
  * Given user props, returns the final state for a MenuButton.
  */
-export declare const useMenuButton: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
+export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;