@fluentui/react-button 9.1.7 → 9.1.9

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

@@ -0,0 +1,211 @@
+define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react", "../Button/useButtonStyles"], function (require, exports, tslib_1, react_theme_1, react_1, useButtonStyles_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = void 0;
+    exports.compoundButtonClassNames = {
+        root: 'fui-CompoundButton',
+        icon: 'fui-CompoundButton__icon',
+        contentContainer: 'fui-CompoundButton__contentContainer',
+        secondaryContent: 'fui-CompoundButton__secondaryContent',
+    };
+    var useRootStyles = react_1.makeStyles({
+        // Base styles
+        base: (_a = {
+                height: 'auto'
+            },
+            _a["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            _a[':hover'] = (_b = {},
+                _b["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2Hover,
+                },
+                _b),
+            _a[':hover:active'] = (_c = {},
+                _c["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+                },
+                _c),
+            _a),
+        // High contrast styles
+        highContrast: {
+            '@media (forced-colors: active)': {
+                ':hover': (_d = {},
+                    _d["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                        color: 'Highlight',
+                    },
+                    _d),
+                ':hover:active': (_e = {},
+                    _e["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                        color: 'Highlight',
+                    },
+                    _e),
+            },
+        },
+        // Appearance variations
+        outline: {
+        /* No styles */
+        },
+        primary: (_f = {},
+            _f["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
+            },
+            _f[':hover'] = (_g = {},
+                _g["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
+                },
+                _g),
+            _f[':hover:active'] = (_h = {},
+                _h["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
+                },
+                _h),
+            _f),
+        secondary: {
+        /* The secondary styles are exactly the same as the base styles. */
+        },
+        subtle: (_j = {},
+            _j["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            _j[':hover'] = (_k = {},
+                _k["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2Hover,
+                },
+                _k),
+            _j[':hover:active'] = (_l = {},
+                _l["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+                },
+                _l),
+            _j),
+        transparent: (_m = {},
+            _m["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            _m[':hover'] = (_o = {},
+                _o["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
+                },
+                _o),
+            _m[':hover:active'] = (_p = {},
+                _p["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
+                },
+                _p),
+            _m),
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalS, react_theme_1.tokens.spacingHorizontalS, react_theme_1.tokens.spacingHorizontalMNudge, react_theme_1.tokens.spacingHorizontalS)), { fontSize: react_theme_1.tokens.fontSizeBase300, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('14px', react_theme_1.tokens.spacingHorizontalM, react_theme_1.tokens.spacingHorizontalL, react_theme_1.tokens.spacingHorizontalM)), { fontSize: react_theme_1.tokens.fontSizeBase300, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
+        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('18px', react_theme_1.tokens.spacingHorizontalL, react_theme_1.tokens.spacingHorizontalXL, react_theme_1.tokens.spacingHorizontalL)), { fontSize: react_theme_1.tokens.fontSizeBase400, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+        // Disabled styles
+        disabled: (_q = {},
+            _q["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            _q[':hover'] = (_r = {},
+                _r["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                },
+                _r),
+            _q[':hover:active'] = (_s = {},
+                _s["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                },
+                _s),
+            _q),
+        // Disabled high contrast styles
+        disabledHighContrast: {
+            '@media (forced-colors: active)': (_t = {},
+                _t["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: 'GrayText',
+                },
+                _t[':hover'] = (_u = {},
+                    _u["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                        color: 'GrayText',
+                    },
+                    _u),
+                _t[':hover:active'] = (_v = {},
+                    _v["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                        color: 'GrayText',
+                    },
+                    _v),
+                _t),
+        },
+    });
+    var useRootIconOnlyStyles = react_1.makeStyles({
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { maxWidth: '48px', minWidth: '48px' }),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalSNudge)), { maxWidth: '52px', minWidth: '52px' }),
+        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalS)), { maxWidth: '56px', minWidth: '56px' }),
+    });
+    var useIconStyles = react_1.makeStyles({
+        // Base styles
+        base: {
+            fontSize: '40px',
+            height: '40px',
+            width: '40px',
+        },
+        // Icon position variations
+        before: {
+            marginRight: react_theme_1.tokens.spacingHorizontalM,
+        },
+        after: {
+            marginLeft: react_theme_1.tokens.spacingHorizontalM,
+        },
+    });
+    var useContentContainerStyles = react_1.makeStyles({
+        // Base styles
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            textAlign: 'left',
+        },
+    });
+    var useSecondaryContentStyles = react_1.makeStyles({
+        // Base styles
+        base: {
+            lineHeight: '100%',
+            fontWeight: react_theme_1.tokens.fontWeightRegular,
+        },
+        // Size variations
+        small: {
+            fontSize: react_theme_1.tokens.fontSizeBase200,
+        },
+        medium: {
+            fontSize: react_theme_1.tokens.fontSizeBase200,
+        },
+        large: {
+            fontSize: react_theme_1.tokens.fontSizeBase300,
+        },
+    });
+    var useCompoundButtonStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        var rootIconOnlyStyles = useRootIconOnlyStyles();
+        var iconStyles = useIconStyles();
+        var contentContainerStyles = useContentContainerStyles();
+        var secondaryContentStyles = useSecondaryContentStyles();
+        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, iconOnly = state.iconOnly, iconPosition = state.iconPosition, size = state.size;
+        state.root.className = react_1.mergeClasses(exports.compoundButtonClassNames.root, 
+        // Root styles
+        rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], 
+        // Disabled styles
+        (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, 
+        // Icon-only styles
+        iconOnly && rootIconOnlyStyles[size], 
+        // User provided class name
+        state.root.className);
+        state.contentContainer.className = react_1.mergeClasses(exports.compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+        }
+        if (state.secondaryContent) {
+            state.secondaryContent.className = react_1.mergeClasses(exports.compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+        }
+        useButtonStyles_1.useButtonStyles_unstable(state);
+        return state;
+    };
+    exports.useCompoundButtonStyles_unstable = useCompoundButtonStyles_unstable;
+});
+//# sourceMappingURL=useCompoundButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCompoundButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,17 @@
+define(["require", "exports", "react", "./renderMenuButton", "./useMenuButton", "./useMenuButtonStyles"], function (require, exports, React, renderMenuButton_1, useMenuButton_1, useMenuButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuButton = void 0;
+    /**
+     * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
+     * menus.
+     */
+    exports.MenuButton = React.forwardRef(function (props, ref) {
+        var state = useMenuButton_1.useMenuButton_unstable(props, ref);
+        useMenuButtonStyles_1.useMenuButtonStyles_unstable(state);
+        return renderMenuButton_1.renderMenuButton_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.MenuButton.displayName = 'MenuButton';
+});
+//# sourceMappingURL=MenuButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QAEpC,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACxC,0FAA0F;IAC5F,CAAC,CAAyC,CAAC;IAE3C,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"]}

package/lib-amd/components/MenuButton/MenuButton.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=MenuButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"]}

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

@@ -0,0 +1,12 @@
+define(["require", "exports", "tslib", "./MenuButton.types", "./MenuButton", "./renderMenuButton", "./useMenuButton", "./useMenuButtonStyles"], function (require, exports, tslib_1, MenuButton_types_1, MenuButton_1, renderMenuButton_1, useMenuButton_1, useMenuButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuButtonStyles_unstable = exports.menuButtonClassNames = void 0;
+    tslib_1.__exportStar(MenuButton_types_1, exports);
+    tslib_1.__exportStar(MenuButton_1, exports);
+    tslib_1.__exportStar(renderMenuButton_1, exports);
+    tslib_1.__exportStar(useMenuButton_1, exports);
+    Object.defineProperty(exports, "menuButtonClassNames", { enumerable: true, get: function () { return useMenuButtonStyles_1.menuButtonClassNames; } });
+    Object.defineProperty(exports, "useMenuButtonStyles_unstable", { enumerable: true, get: function () { return useMenuButtonStyles_1.useMenuButtonStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/index.ts"],"names":[],"mappings":";;;;IAAA,kDAAmC;IACnC,4CAA6B;IAC7B,kDAAmC;IACnC,+CAAgC;IACvB,2HAAA,oBAAoB,OAAA;IAAE,mIAAA,4BAA4B,OAAA","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderMenuButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB;QACxD,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QACtD,IAAA,IAAI,GAAe,KAAK,KAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAEjC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ;YACpC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAA,CAAC,IAAI,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CACpF,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,yBAAyB,6BAWpC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/MenuButton/useMenuButton.js

@@ -0,0 +1,30 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-utilities", "../Button/index"], function (require, exports, tslib_1, React, react_icons_1, react_utilities_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuButton_unstable = void 0;
+    /**
+     * Given user props, returns the final state for a MenuButton.
+     */
+    var useMenuButton_unstable = function (_a, ref) {
+        var _b;
+        var menuIcon = _a.menuIcon, props = tslib_1.__rest(_a, ["menuIcon"]);
+        var buttonState = index_1.useButton_unstable(props, ref);
+        buttonState.root['aria-expanded'] = (_b = props['aria-expanded']) !== null && _b !== void 0 ? _b : false;
+        return tslib_1.__assign(tslib_1.__assign({}, buttonState), { 
+            // State calculated from a set of props
+            iconOnly: Boolean(!props.children), 
+            // Slots definition
+            components: {
+                root: 'button',
+                icon: 'span',
+                menuIcon: 'span',
+            }, menuIcon: react_utilities_1.resolveShorthand(menuIcon, {
+                defaultProps: {
+                    children: React.createElement(react_icons_1.ChevronDownRegular, null),
+                },
+                required: true,
+            }) });
+    };
+    exports.useMenuButton_unstable = useMenuButton_unstable;
+});
+//# sourceMappingURL=useMenuButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UACpC,EAAuC,EACvC,GAAqD;;QADnD,IAAA,QAAQ,cAAA,EAAK,KAAK,sBAApB,YAAsB,CAAF;QAGpB,IAAM,WAAW,GAAG,0BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACnD,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,MAAA,KAAK,CAAC,eAAe,CAAC,mCAAI,KAAK,CAAC;QAEpE,6CAEK,WAAW;YAEd,uCAAuC;YACvC,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;YAElC,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,MAAM;aACjB,EAED,QAAQ,EAAE,kCAAgB,CAAC,QAAQ,EAAE;gBACnC,YAAY,EAAE;oBACZ,QAAQ,EAAE,oBAAC,gCAAkB,OAAG;iBACjC;gBACD,QAAQ,EAAE,IAAI;aACf,CAAC,IACF;IACJ,CAAC,CAAC;IA5BW,QAAA,sBAAsB,0BA4BjC","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"]}

package/lib-amd/components/MenuButton/useMenuButtonStyles.js

@@ -0,0 +1,97 @@
+define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react-theme", "@griffel/react", "../Button/useButtonStyles"], function (require, exports, tslib_1, react_icons_1, react_theme_1, react_1, useButtonStyles_1) {
+    "use strict";
+    var _a;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuButtonStyles_unstable = exports.menuButtonClassNames = void 0;
+    exports.menuButtonClassNames = {
+        root: 'fui-MenuButton',
+        icon: 'fui-MenuButton__icon',
+        menuIcon: 'fui-MenuButton__menuIcon',
+    };
+    var useRootExpandedStyles = react_1.makeStyles({
+        base: (_a = {},
+            _a["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'inline',
+            },
+            _a["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'none',
+            },
+            _a),
+        // Appearance variations
+        outline: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThicker)), { color: react_theme_1.tokens.colorNeutralForeground1Selected }),
+        primary: {
+            backgroundColor: react_theme_1.tokens.colorBrandBackgroundSelected,
+        },
+        secondary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Selected }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)), { color: react_theme_1.tokens.colorNeutralForeground1Selected }),
+        subtle: {
+            backgroundColor: react_theme_1.tokens.colorSubtleBackgroundSelected,
+            color: react_theme_1.tokens.colorNeutralForeground2Selected,
+        },
+        transparent: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackgroundSelected,
+            color: react_theme_1.tokens.colorNeutralForeground2BrandSelected,
+        },
+    });
+    var useIconExpandedStyles = react_1.makeStyles({
+        // Appearance variations
+        outline: {
+            color: react_theme_1.tokens.colorNeutralForeground1Selected,
+        },
+        primary: {
+        /* The primary styles are exactly the same as the base styles. */
+        },
+        secondary: {
+            color: react_theme_1.tokens.colorNeutralForeground1Selected,
+        },
+        subtle: {
+            color: react_theme_1.tokens.colorNeutralForeground2BrandSelected,
+        },
+        transparent: {
+            color: react_theme_1.tokens.colorNeutralForeground2BrandSelected,
+        },
+    });
+    var useMenuIconStyles = react_1.makeStyles({
+        base: {
+            lineHeight: 0,
+        },
+        // Size appearance
+        small: {
+            fontSize: '12px',
+            height: '12px',
+            lineHeight: react_theme_1.tokens.lineHeightBase200,
+            width: '12px',
+        },
+        medium: {
+            fontSize: '12px',
+            height: '12px',
+            lineHeight: react_theme_1.tokens.lineHeightBase200,
+            width: '12px',
+        },
+        large: {
+            fontSize: '16px',
+            height: '16px',
+            lineHeight: react_theme_1.tokens.lineHeightBase400,
+            width: '16px',
+        },
+        // Not-icon only
+        notIconOnly: {
+            marginLeft: react_theme_1.tokens.spacingHorizontalXS,
+        },
+    });
+    var useMenuButtonStyles_unstable = function (state) {
+        var rootExpandedStyles = useRootExpandedStyles();
+        var iconExpandedStyles = useIconExpandedStyles();
+        var menuIconStyles = useMenuIconStyles();
+        state.root.className = react_1.mergeClasses(exports.menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance], state.icon.className);
+        }
+        if (state.menuIcon) {
+            state.menuIcon.className = react_1.mergeClasses(exports.menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+        }
+        useButtonStyles_1.useButtonStyles_unstable(tslib_1.__assign(tslib_1.__assign({}, state), { iconPosition: 'before' }));
+        return state;
+    };
+    exports.useMenuButtonStyles_unstable = useMenuButtonStyles_unstable;
+});
+//# sourceMappingURL=useMenuButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,17 @@
+define(["require", "exports", "react", "./renderSplitButton", "./useSplitButton", "./useSplitButtonStyles"], function (require, exports, React, renderSplitButton_1, useSplitButton_1, useSplitButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SplitButton = void 0;
+    /**
+     * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
+     * action, while interacting with the second one opens a menu with secondary actions.
+     */
+    exports.SplitButton = React.forwardRef(function (props, ref) {
+        var state = useSplitButton_1.useSplitButton_unstable(props, ref);
+        useSplitButtonStyles_1.useSplitButtonStyles_unstable(state);
+        return renderSplitButton_1.renderSplitButton_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.SplitButton.displayName = 'SplitButton';
+});
+//# sourceMappingURL=SplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QAErC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;QACzC,0FAA0F;IAC5F,CAAC,CAA0C,CAAC;IAE5C,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where 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: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=SplitButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"]}

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

@@ -0,0 +1,12 @@
+define(["require", "exports", "tslib", "./SplitButton", "./SplitButton.types", "./renderSplitButton", "./useSplitButton", "./useSplitButtonStyles"], function (require, exports, tslib_1, SplitButton_1, SplitButton_types_1, renderSplitButton_1, useSplitButton_1, useSplitButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = void 0;
+    tslib_1.__exportStar(SplitButton_1, exports);
+    tslib_1.__exportStar(SplitButton_types_1, exports);
+    tslib_1.__exportStar(renderSplitButton_1, exports);
+    tslib_1.__exportStar(useSplitButton_1, exports);
+    Object.defineProperty(exports, "splitButtonClassNames", { enumerable: true, get: function () { return useSplitButtonStyles_1.splitButtonClassNames; } });
+    Object.defineProperty(exports, "useSplitButtonStyles_unstable", { enumerable: true, get: function () { return useSplitButtonStyles_1.useSplitButtonStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/index.ts"],"names":[],"mappings":";;;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACxB,6HAAA,qBAAqB,OAAA;IAAE,qIAAA,6BAA6B,OAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

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

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderSplitButton_unstable = void 0;
+    /**
+     * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+     */
+    var renderSplitButton_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.primaryActionButton && React.createElement(slots.primaryActionButton, tslib_1.__assign({}, slotProps.primaryActionButton)),
+            slots.menuButton && React.createElement(slots.menuButton, tslib_1.__assign({}, slotProps.menuButton))));
+    };
+    exports.renderSplitButton_unstable = renderSplitButton_unstable;
+});
+//# sourceMappingURL=renderSplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSplitButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,mBAAmB,IAAI,oBAAC,KAAK,CAAC,mBAAmB,uBAAK,SAAS,CAAC,mBAAmB,EAAI;YAC7F,KAAK,CAAC,UAAU,IAAI,oBAAC,KAAK,CAAC,UAAU,uBAAK,SAAS,CAAC,UAAU,EAAI,CACxD,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,0BAA0B,8BASrC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,67 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../Button/Button", "../MenuButton/MenuButton"], function (require, exports, tslib_1, react_utilities_1, Button_1, MenuButton_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButton_unstable = void 0;
+    /**
+     * 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_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'secondary' : _a, children = props.children, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.disabledFocusable, disabledFocusable = _c === void 0 ? false : _c, icon = props.icon, _d = props.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, menuButton = props.menuButton, menuIcon = props.menuIcon, primaryActionButton = props.primaryActionButton, _e = props.shape, shape = _e === void 0 ? 'rounded' : _e, _f = props.size, size = _f === void 0 ? 'medium' : _f;
+        var baseId = react_utilities_1.useId('splitButton-');
+        var menuButtonShorthand = react_utilities_1.resolveShorthand(menuButton, {
+            defaultProps: {
+                appearance: appearance,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                menuIcon: menuIcon,
+                shape: shape,
+                size: size,
+            },
+            required: true,
+        });
+        var primaryActionButtonShorthand = react_utilities_1.resolveShorthand(primaryActionButton, {
+            defaultProps: {
+                appearance: appearance,
+                children: children,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                icon: icon,
+                iconPosition: iconPosition,
+                id: baseId + '__primaryActionButton',
+                shape: shape,
+                size: size,
+            },
+            required: true,
+        });
+        // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
+        // by the user.
+        if (menuButtonShorthand &&
+            primaryActionButtonShorthand &&
+            !menuButtonShorthand['aria-label'] &&
+            !menuButtonShorthand['aria-labelledby']) {
+            menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+        }
+        return {
+            // Props passed at the top-level
+            appearance: appearance,
+            disabled: disabled,
+            disabledFocusable: disabledFocusable,
+            iconPosition: iconPosition,
+            shape: shape,
+            size: size,
+            // Slots definition
+            components: {
+                root: 'div',
+                menuButton: MenuButton_1.MenuButton,
+                primaryActionButton: Button_1.Button,
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
+            menuButton: menuButtonShorthand,
+            primaryActionButton: primaryActionButtonShorthand,
+        };
+    };
+    exports.useSplitButton_unstable = useSplitButton_unstable;
+});
+//# sourceMappingURL=useSplitButton.js.map