@fluentui/react-button 9.0.0-alpha.87 → 9.0.0-alpha.88

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

@@ -0,0 +1,55 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButton = exports.splitButtonShorthandProps = void 0;
+    exports.splitButtonShorthandProps = ['button', 'menuButton'];
+    var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.splitButtonShorthandProps });
+    /**
+     * Given user props, defines default props for the SplitButton and returns processed state.
+     * @param props - User provided props to the SplitButton component.
+     * @param ref - User provided ref to be passed to the SplitButton component.
+     */
+    var useSplitButton = function (props, ref, defaultProps) {
+        var resolvedShorthandProps = react_utilities_1.resolveShorthandProps(props, exports.splitButtonShorthandProps);
+        var className = props.className;
+        var button = resolvedShorthandProps.button, buttonRef = resolvedShorthandProps.buttonRef, circular = resolvedShorthandProps.circular, disabled = resolvedShorthandProps.disabled, disabledFocusable = resolvedShorthandProps.disabledFocusable, menuButton = resolvedShorthandProps.menuButton, menuButtonRef = resolvedShorthandProps.menuButtonRef, outline = resolvedShorthandProps.outline, primary = resolvedShorthandProps.primary, _a = resolvedShorthandProps.size, size = _a === void 0 ? 'medium' : _a, subtle = resolvedShorthandProps.subtle, transparent = resolvedShorthandProps.transparent, userProps = tslib_1.__rest(resolvedShorthandProps, ["button", "buttonRef", "circular", "disabled", "disabledFocusable", "menuButton", "menuButtonRef", "outline", "primary", "size", "subtle", "transparent"]);
+        // TODO: To be resolved when moving to simplified prop merging
+        // const buttonInternalRef = React.useRef<HTMLElement | null>(null);
+        // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);
+        var state = mergeProps({
+            'aria-disabled': disabled,
+            as: 'div',
+            className: className,
+            ref: ref,
+            size: size,
+            button: tslib_1.__assign(tslib_1.__assign({ as: 'button', 
+                // TODO: To be resolved when moving to simplified prop merging
+                // ref: useMergedRefs(buttonRef, buttonInternalRef),
+                circular: circular,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                outline: outline,
+                primary: primary,
+                size: size,
+                subtle: subtle,
+                transparent: transparent }, userProps), button),
+            menuButton: tslib_1.__assign({ as: 'button', 
+                // TODO: To be resolved when moving to simplified prop merging
+                // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),
+                circular: circular,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                outline: outline,
+                primary: primary,
+                size: size,
+                subtle: subtle,
+                transparent: transparent }, menuButton),
+        }, 
+        // TODO: To be resolved when moving to simplified prop merging
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        defaultProps, resolvedShorthandProps);
+        return state;
+    };
+    exports.useSplitButton = useSplitButton;
+});
+//# sourceMappingURL=useSplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;IAIa,QAAA,yBAAyB,GAAsC,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAErG,IAAM,UAAU,GAAG,gCAAc,CAAmB,EAAE,SAAS,EAAE,iCAAyB,EAAE,CAAC,CAAC;IAE9F;;;;OAIG;IACI,IAAM,cAAc,GAAG,UAC5B,KAAuB,EACvB,GAA2B,EAC3B,YAA+B;QAE/B,IAAM,sBAAsB,GAAG,uCAAqB,CAAC,KAAK,EAAE,iCAAyB,CAAC,CAAC;QAC/E,IAAA,SAAS,GAAK,KAAK,UAAV,CAAW;QAE1B,IAAA,MAAM,GAaJ,sBAAsB,OAblB,EACN,SAAS,GAYP,sBAAsB,UAZf,EACT,QAAQ,GAWN,sBAAsB,SAXhB,EACR,QAAQ,GAUN,sBAAsB,SAVhB,EACR,iBAAiB,GASf,sBAAsB,kBATP,EACjB,UAAU,GAQR,sBAAsB,WARd,EACV,aAAa,GAOX,sBAAsB,cAPX,EACb,OAAO,GAML,sBAAsB,QANjB,EACP,OAAO,GAKL,sBAAsB,QALjB,EACP,KAIE,sBAAsB,KAJT,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,MAAM,GAGJ,sBAAsB,OAHlB,EACN,WAAW,GAET,sBAAsB,YAFb,EACR,SAAS,kBACV,sBAAsB,EAdpB,0JAcL,CADa,CACa;QAE3B,8DAA8D;QAC9D,oEAAoE;QACpE,wEAAwE;QAExE,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,eAAe,EAAE,QAAQ;YACzB,EAAE,EAAE,KAAK;YACT,SAAS,WAAA;YACT,GAAG,KAAA;YACH,IAAI,MAAA;YAEJ,MAAM,sCACJ,EAAE,EAAE,QAAQ;gBACZ,8DAA8D;gBAC9D,oDAAoD;gBACpD,QAAQ,UAAA;gBACR,QAAQ,UAAA;gBACR,iBAAiB,mBAAA;gBACjB,OAAO,SAAA;gBACP,OAAO,SAAA;gBACP,IAAI,MAAA;gBACJ,MAAM,QAAA;gBACN,WAAW,aAAA,IACR,SAAS,GACT,MAAM,CACV;YAED,UAAU,qBACR,EAAE,EAAE,QAAQ;gBACZ,8DAA8D;gBAC9D,4DAA4D;gBAC5D,QAAQ,UAAA;gBACR,QAAQ,UAAA;gBACR,iBAAiB,mBAAA;gBACjB,OAAO,SAAA;gBACP,OAAO,SAAA;gBACP,IAAI,MAAA;gBACJ,MAAM,QAAA;gBACN,WAAW,aAAA,IACR,UAAU,CACd;SACF;QACD,8DAA8D;QAC9D,8DAA8D;QAC9D,YAAmB,EACnB,sBAAsB,CACvB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzEW,QAAA,cAAc,kBAyEzB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[] = ['button', 'menuButton'];\n\nconst mergeProps = makeMergeProps<SplitButtonState>({ deepMerge: splitButtonShorthandProps });\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: SplitButtonProps,\n): SplitButtonState => {\n  const resolvedShorthandProps = resolveShorthandProps(props, splitButtonShorthandProps);\n  const { className } = props;\n  const {\n    button,\n    buttonRef,\n    circular,\n    disabled,\n    disabledFocusable,\n    menuButton,\n    menuButtonRef,\n    outline,\n    primary,\n    size = 'medium',\n    subtle,\n    transparent,\n    ...userProps\n  } = resolvedShorthandProps;\n\n  // TODO: To be resolved when moving to simplified prop merging\n  // const buttonInternalRef = React.useRef<HTMLElement | null>(null);\n  // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);\n\n  const state = mergeProps(\n    {\n      'aria-disabled': disabled,\n      as: 'div',\n      className,\n      ref,\n      size,\n\n      button: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(buttonRef, buttonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...userProps,\n        ...button,\n      },\n\n      menuButton: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...menuButton,\n      },\n    },\n    // TODO: To be resolved when moving to simplified prop merging\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultProps as any,\n    resolvedShorthandProps,\n  );\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,2 @@
+import type { SplitButtonState } from './SplitButton.types';
+export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;

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

@@ -0,0 +1,123 @@
+define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButtonStyles = void 0;
+    var SplitButtonClassNames = {
+        button: 'SplitButton-button',
+        menuButton: 'SplitButton-menuButton',
+    };
+    var useStyles = react_make_styles_1.makeStyles({
+        root: function (theme) {
+            var _a;
+            return (_a = {
+                    display: 'inline-flex',
+                    justifyContent: 'stretch',
+                    position: 'relative'
+                },
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.button] = {
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                },
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.menuButton] = {
+                    borderLeftWidth: 0,
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
+                },
+                _a);
+        },
+        rootBlock: {
+            width: '100%',
+        },
+        rootPrimary: function (theme) {
+            var _a, _b, _c;
+            return (_a = {},
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.button] = {
+                    borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,
+                },
+                _a[':hover'] = (_b = {},
+                    _b["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,
+                    },
+                    _b),
+                _a[':active'] = (_c = {},
+                    _c["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,
+                    },
+                    _c),
+                _a);
+        },
+        rootSubtle: function (theme) {
+            var _a, _b, _c;
+            return (_a = {},
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.button] = {
+                    borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                },
+                _a[':hover'] = (_b = {},
+                    _b["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                    },
+                    _b),
+                _a[':active'] = (_c = {},
+                    _c["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                    },
+                    _c),
+                _a);
+        },
+        rootTransparent: function (theme) {
+            var _a, _b, _c;
+            return (_a = {},
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.button] = {
+                    borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                },
+                _a[':hover'] = (_b = {},
+                    _b["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                    },
+                    _b),
+                _a[':active'] = (_c = {},
+                    _c["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,
+                    },
+                    _c),
+                _a);
+        },
+        rootDisabled: function (theme) {
+            var _a, _b, _c;
+            return (_a = {},
+                // Use classnames to increase specificy of styles and avoid collisions.
+                _a["& ." + SplitButtonClassNames.button] = {
+                    borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,
+                },
+                _a[':hover'] = (_b = {},
+                    _b["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,
+                    },
+                    _b),
+                _a[':active'] = (_c = {},
+                    _c["& ." + SplitButtonClassNames.button] = {
+                        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,
+                    },
+                    _c),
+                _a);
+        },
+    });
+    var useSplitButtonStyles = function (state) {
+        var styles = useStyles();
+        state.className = react_make_styles_1.mergeClasses(styles.root, state.block && styles.rootBlock, state.primary && styles.rootPrimary, state.subtle && styles.rootSubtle, state.transparent && styles.rootTransparent, state.disabled && styles.rootDisabled, state.className);
+        if (state.button) {
+            state.button.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.button, state.button.className);
+        }
+        if (state.menuButton) {
+            state.menuButton.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);
+        }
+        return state;
+    };
+    exports.useSplitButtonStyles = useSplitButtonStyles;
+});
+//# sourceMappingURL=useSplitButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButtonStyles.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { SplitButtonState } from './SplitButton.types';\n\nconst SplitButtonClassNames = {\n  button: 'SplitButton-button',\n  menuButton: 'SplitButton-menuButton',\n};\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  }),\n  rootBlock: {\n    width: '100%',\n  },\n  rootPrimary: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n  }),\n  rootSubtle: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootTransparent: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootDisabled: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n  }),\n});\n\nexport const useSplitButtonStyles = (state: SplitButtonState): SplitButtonState => {\n  const styles = useStyles();\n\n  state.className = mergeClasses(\n    styles.root,\n    state.block && styles.rootBlock,\n    state.primary && styles.rootPrimary,\n    state.subtle && styles.rootSubtle,\n    state.transparent && styles.rootTransparent,\n    state.disabled && styles.rootDisabled,\n    state.className,\n  );\n\n  if (state.button) {\n    state.button.className = mergeClasses(SplitButtonClassNames.button, state.button.className);\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}

package/lib-amd/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';
+export * from './SplitButton';
 export * from './ToggleButton';

package/lib-amd/index.js

@@ -1,9 +1,10 @@
-define(["require", "exports", "tslib", "./Button", "./CompoundButton", "./MenuButton", "./ToggleButton"], function (require, exports, tslib_1, Button_1, CompoundButton_1, MenuButton_1, ToggleButton_1) {
+define(["require", "exports", "tslib", "./Button", "./CompoundButton", "./MenuButton", "./SplitButton", "./ToggleButton"], function (require, exports, tslib_1, Button_1, CompoundButton_1, MenuButton_1, SplitButton_1, ToggleButton_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(Button_1, exports);
     tslib_1.__exportStar(CompoundButton_1, exports);
     tslib_1.__exportStar(MenuButton_1, exports);
+    tslib_1.__exportStar(SplitButton_1, exports);
     tslib_1.__exportStar(ToggleButton_1, exports);
 });
 //# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,gDAAiC;IACjC,4CAA6B;IAC7B,8CAA+B","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './ToggleButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,gDAAiC;IACjC,4CAA6B;IAC7B,6CAA8B;IAC9B,8CAA+B","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"]}

package/lib-commonjs/SplitButton.d.ts

@@ -0,0 +1 @@
+export * from './components/SplitButton/index';

package/lib-commonjs/SplitButton.js

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

package/lib-commonjs/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SplitButton/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,WAAA,CAAA,0BAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAEG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAF/B,EAGG,CAAC,QAAD,IAAa,QAHhB,EAIG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAJ/B,CADF;AAQD,CAZM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,WAAA,CAAA,0BAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;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,IAAa,QAFhB,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n    zIndex: 1,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,mBAAA,CAAA,kCAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAEG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAF/B,EAGG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,QADH,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAJJ,EASG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAT/B,CADF;AAaD,CAjBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { 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 = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*loading && <slots.loader {...slotProps.loader} />*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,mBAAA,CAAA,kCAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;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,QADH,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,CAhBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { 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 = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,wBAAwB,GAAG;AAC/B,EAAA,gBAAgB,EAAE;AADa,CAAjC;;AAIA,IAAM,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA+GA,IAAM,qBAAqB,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,EAA9B;;AAqBA,IAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAQA,IAAM,yBAAyB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAQA,IAAM,yBAAyB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAiBO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,UAAU,CAAC,IADK,EAEhB,UAAU,CAAC,KAAK,CAAC,IAAP,CAFM,EAGhB,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OAHZ,EAIhB,KAAK,CAAC,MAAN,IAAgB,UAAU,CAAC,MAJX,EAKhB,KAAK,CAAC,WAAN,IAAqB,UAAU,CAAC,WALhB,EAMhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN1C,EAOhB,KAAK,CAAC,QAAN,IAAkB,kBAAkB,CAAC,KAAK,CAAC,IAAP,CAPpB,EAQhB,KAAK,CAAC,SARU,CAAlB;AAWA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,UAAU,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAvB;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,mBAAA,CAAA,YAAA,CAAa,sBAAsB,CAAC,IAApC,EAA0C,KAAK,CAAC,gBAAN,CAAuB,SAAjE,CAAnC;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,mBAAA,CAAA,YAAA,CACjC,wBAAwB,CAAC,gBADQ,EAEjC,sBAAsB,CAAC,IAFU,EAGjC,sBAAsB,CAAC,KAAK,CAAC,IAAP,CAHW,EAIjC,KAAK,CAAC,gBAAN,CAAuB,SAJU,CAAnC;AAOA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -23,8 +23,9 @@ var renderMenuButton = function (state) {
       slotProps = _a.slotProps;
 
   var children = state.children,
+      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 && children, !iconOnly && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon)));
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && children, (!iconOnly || !icon.children) && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon)));
 };
 
 exports.renderMenuButton = renderMenuButton;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,eAAA,CAAA,8BAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAe,KAAK,CAApB,QAAR;AAAA,MAAU,QAAQ,GAAK,KAAK,CAAV,QAAlB;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,QAFhB,EAGG,CAAC,QAAD,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHhB,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {!iconOnly && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,eAAA,CAAA,8BAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAqB,KAAK,CAA1B,QAAR;AAAA,MAAU,IAAI,GAAe,KAAK,CAApB,IAAd;AAAA,MAAgB,QAAQ,GAAK,KAAK,CAAV,QAAxB;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,QAFhB,EAGG,CAAC,CAAC,QAAD,IAAa,CAAC,IAAI,CAAC,QAApB,KAAiC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHpC,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {(!iconOnly || !icon.children) && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,8BAAA,GAAmE,CAAC,MAAD,EAAS,UAAT,CAAnE;AAEb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAAgC;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAAhC,CAAnB;AAEA;;;;AAIG;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAsD,YAAtD,EAAoF;AAC/G,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,QAAQ,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KANZ;AAOE;AACA,IAAA,IAAI,EAAE,QARR;AASE,IAAA,IAAI,EAAE;AATR,GADsB,EAYtB,YAAY,IAAI,iBAAA,CAAA,qBAAA,CAAsB,YAAtB,EAAoC,OAAA,CAAA,8BAApC,CAZM,EAatB,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,OAAA,CAAA,8BAA7B,CAbsB,CAAxB;AAgBA,EAAA,oBAAA,CAAA,kBAAA,CAAmB,KAAnB;AAEA,SAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/**\n * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Button slots\n      icon: { as: 'span' },\n      // MenuButton slots\n      menuIcon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, menuButtonShorthandPropsCompat),\n    resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n  ) as MenuButtonState;\n\n  useMenuButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,8BAAA,GAAmE,CAAC,MAAD,EAAS,UAAT,CAAnE;AAEb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAAgC;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAAhC,CAAnB;AAEA;;;;AAIG;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAsD,YAAtD,EAAoF;AAC/G,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,QAAQ,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KANZ;AAOE;AACA,IAAA,IAAI,EAAE,QARR;AASE,IAAA,IAAI,EAAE;AATR,GADsB,EAYtB,YAAY,IAAI,iBAAA,CAAA,qBAAA,CAAsB,YAAtB,EAAoC,OAAA,CAAA,8BAApC,CAZM,EAatB,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,OAAA,CAAA,8BAA7B,CAbsB,CAAxB;AAgBA,EAAA,oBAAA,CAAA,kBAAA,CAAmB,KAAnB;AAEA,SAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/**\n * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Button slots\n      icon: { as: 'span' },\n      // MenuButton slots\n      menuIcon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, menuButtonShorthandPropsCompat),\n    resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n  );\n\n  useMenuButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -20,8 +20,10 @@ var useButtonState_1 = /*#__PURE__*/require("../Button/useButtonState");
 var useMenuButtonState = function (state) {
   // It behaves like a button.
   useButtonState_1.useButtonState(state);
-  var menuIcon = state.menuIcon,
+  var children = state.children,
+      menuIcon = state.menuIcon,
       size = state.size;
+  state.iconOnly = !children;
 
   if (!menuIcon.children) {
     if (size === 'large') {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB;AACvD;AACA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEQ,MAAA,QAAQ,GAAW,KAAK,CAAhB,QAAR;AAAA,MAAU,IAAI,GAAK,KAAK,CAAV,IAAd;;AACR,MAAI,CAAC,QAAQ,CAAC,QAAd,EAAwB;AACtB,QAAI,IAAI,KAAK,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,QAAT,GAAoB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,oBAAD,EAAqB,IAArB,CAApB;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,QAAT,GAAoB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,oBAAD,EAAqB,IAArB,CAApB;AACD;AACF;;AAED,SAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\n/**\n * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any\n * additional MenuButton specific processing.\n * @param state - MenuButtonButton state to mutate.\n */\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n  // It behaves like a button.\n  useButtonState(state);\n\n  const { menuIcon, size } = state;\n  if (!menuIcon.children) {\n    if (size === 'large') {\n      menuIcon.children = <ChevronDown24Regular />;\n    } else {\n      menuIcon.children = <ChevronDown20Regular />;\n    }\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB;AACvD;AACA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEQ,MAAA,QAAQ,GAAqB,KAAK,CAA1B,QAAR;AAAA,MAAU,QAAQ,GAAW,KAAK,CAAhB,QAAlB;AAAA,MAAoB,IAAI,GAAK,KAAK,CAAV,IAAxB;AACR,EAAA,KAAK,CAAC,QAAN,GAAiB,CAAC,QAAlB;;AACA,MAAI,CAAC,QAAQ,CAAC,QAAd,EAAwB;AACtB,QAAI,IAAI,KAAK,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,QAAT,GAAoB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,oBAAD,EAAqB,IAArB,CAApB;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,QAAT,GAAoB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,oBAAD,EAAqB,IAArB,CAApB;AACD;AACF;;AAED,SAAO,KAAP;AACD,CAfM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\n/**\n * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any\n * additional MenuButton specific processing.\n * @param state - MenuButtonButton state to mutate.\n */\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n  // It behaves like a button.\n  useButtonState(state);\n\n  const { children, menuIcon, size } = state;\n  state.iconOnly = !children;\n  if (!menuIcon.children) {\n    if (size === 'large') {\n      menuIcon.children = <ChevronDown24Regular />;\n    } else {\n      menuIcon.children = <ChevronDown20Regular />;\n    }\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,iBAAiB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAkBO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,cAAc,CAAC,KAAK,CAAC,IAAP,CAA3B,EAAyC,KAAK,CAAC,QAAN,CAAe,SAAxD,CAA3B;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,iBAAiB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAkBO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,cAAc,CAAC,KAAK,CAAC,IAAP,CAA3B,EAAyC,KAAK,CAAC,QAAN,CAAe,SAAxD,CAA3B;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { SplitButtonProps } from './SplitButton.types';
+/**
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
+ */
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitButton = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var index_1 = /*#__PURE__*/require("../Button/index");
+
+var index_2 = /*#__PURE__*/require("../MenuButton/index");
+
+var renderSplitButton_1 = /*#__PURE__*/require("./renderSplitButton");
+
+var useSplitButton_1 = /*#__PURE__*/require("./useSplitButton");
+
+var useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
+/**
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
+ */
+
+
+exports.SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useSplitButton_1.useSplitButton(props, ref, {
+    button: {
+      as: index_1.Button
+    },
+    menuButton: {
+      as: index_2.MenuButton
+    }
+  });
+  useSplitButtonStyles_1.useSplitButtonStyles(state);
+  return renderSplitButton_1.renderSplitButton(state);
+});
+exports.SplitButton.displayName = 'SplitButton';
+//# sourceMappingURL=SplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,WAAA,gBAAc,KAAK,CAAC,UAAN,CAAgD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,gBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,GAAtB,EAA2B;AACvC,IAAA,MAAM,EAAE;AAAE,MAAA,EAAE,EAAE,OAAA,CAAA;AAAN,KAD+B;AAEvC,IAAA,UAAU,EAAE;AAAE,MAAA,EAAE,EAAE,OAAA,CAAA;AAAN;AAF2B,GAA3B,CAAd;AAKA,EAAA,sBAAA,CAAA,oBAAA,CAAqB,KAArB;AAEA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CAT0B,CAAd;AAWb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Button } from '../Button/index';\nimport { MenuButton } from '../MenuButton/index';\nimport { renderSplitButton } from './renderSplitButton';\nimport { useSplitButton } from './useSplitButton';\nimport { useSplitButtonStyles } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>((props, ref) => {\n  const state = useSplitButton(props, ref, {\n    button: { as: Button },\n    menuButton: { as: MenuButton },\n  });\n\n  useSplitButtonStyles(state);\n\n  return renderSplitButton(state);\n});\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}