@fluentui/react-button 9.1.7 → 9.1.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAClD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEzC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC5E,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ;YAChC,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,qBAAqB,yBAWhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, 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_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Button/useButton.js

@@ -0,0 +1,40 @@
+define(["require", "exports", "@fluentui/react-aria", "@fluentui/react-utilities"], function (require, exports, react_aria_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButton_unstable = void 0;
+    /**
+     * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+     * @param props - User provided props to the Button component.
+     * @param ref - User provided ref to be passed to the Button component.
+     */
+    var useButton_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'secondary' : _a, _b = props.as, as = _b === void 0 ? 'button' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.disabledFocusable, disabledFocusable = _d === void 0 ? false : _d, icon = props.icon, _e = props.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = props.shape, shape = _f === void 0 ? 'rounded' : _f, _g = props.size, size = _g === void 0 ? 'medium' : _g;
+        var iconShorthand = react_utilities_1.resolveShorthand(icon);
+        return {
+            // Props passed at the top-level
+            appearance: appearance,
+            disabled: disabled,
+            disabledFocusable: disabledFocusable,
+            iconPosition: iconPosition,
+            shape: shape,
+            size: size,
+            // State calculated from a set of props
+            iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+            // Slots definition
+            components: {
+                root: 'button',
+                icon: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonShorthand(props, {
+                required: true,
+                defaultProps: {
+                    ref: ref,
+                    type: 'button',
+                },
+            })),
+            icon: iconShorthand,
+        };
+    };
+    exports.useButton_unstable = useButton_unstable;
+});
+//# sourceMappingURL=useButton.js.map

package/lib-amd/components/Button/useButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButton.ts"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAChC,KAAkB,EAClB,GAAqD;QAGnD,IAAA,KAQE,KAAK,WARiB,EAAxB,UAAU,mBAAG,WAAW,KAAA,EACxB,KAOE,KAAK,GAPM,EAAb,EAAE,mBAAG,QAAQ,KAAA,EACb,KAME,KAAK,SANS,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAKE,KAAK,kBALkB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,aAHgB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,KAEE,KAAK,MAFU,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACjB,KACE,KAAK,KADQ,EAAf,IAAI,mBAAG,QAAQ,KAAA,CACP;QACV,IAAM,aAAa,GAAG,kCAAgB,CAAC,IAAI,CAAC,CAAC;QAE7C,OAAO;YACL,gCAAgC;YAChC,UAAU,YAAA;YACV,QAAQ,UAAA;YACR,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,KAAK,OAAA;YACL,IAAI,MAAA;YAEJ,uCAAuC;YACvC,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAE7D,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;aACb;YAED,IAAI,EAAE,uCAAqB,CACzB,EAAE,EACF,mCAAsB,CAA2B,KAAK,EAAE;gBACtD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,GAAG,EAAE,GAAuD;oBAC5D,IAAI,EAAE,QAAQ;iBACf;aACF,CAAC,CACH;YACD,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC,CAAC;IA9CW,QAAA,kBAAkB,sBA8C7B","sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const {\n    appearance = 'secondary',\n    as = 'button',\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n        required: true,\n        defaultProps: {\n          ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n          type: 'button',\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"]}

package/lib-amd/components/Button/useButtonStyles.js

@@ -0,0 +1,187 @@
+define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react-tabster", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_icons_1, react_tabster_1, react_theme_1, react_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
+    exports.buttonClassNames = {
+        root: 'fui-Button',
+        icon: 'fui-Button__icon',
+    };
+    var iconSpacingVar = '--fui-Button__icon--spacing';
+    var buttonSpacingSmall = '3px';
+    var buttonSpacingMedium = '5px';
+    var useRootStyles = react_1.makeStyles({
+        // Base styles
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle' }, react_1.shorthands.margin(0)), react_1.shorthands.overflow('hidden')), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1 }), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), (_a = { color: react_theme_1.tokens.colorNeutralForeground1Hover, cursor: 'pointer' }, _a["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'inline',
+            }, _a["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'none',
+            }, _a)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), (_b = { color: react_theme_1.tokens.colorNeutralForeground1Pressed, outlineStyle: 'none' }, _b["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'inline',
+            }, _b["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'none',
+            }, _b)) }),
+        // Transition styles
+        transition: {
+            transitionDuration: react_theme_1.tokens.durationFaster,
+            transitionProperty: 'background, border, color',
+            transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+            },
+        },
+        // High contrast styles
+        highContrast: {
+            '@media (forced-colors: active)': {
+                ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('ButtonText')),
+                ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
+                ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
+            },
+        },
+        // Appearance variations
+        outline: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
+            },
+            ':hover:active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
+            },
+        },
+        primary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }) }),
+        secondary: {
+        /* The secondary styles are exactly the same as the base styles. */
+        },
+        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover }, react_1.shorthands.borderColor('transparent')), (_c = { color: react_theme_1.tokens.colorNeutralForeground2Hover }, _c["& ." + exports.buttonClassNames.icon] = {
+                color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
+            }, _c)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed }, react_1.shorthands.borderColor('transparent')), (_d = { color: react_theme_1.tokens.colorNeutralForeground2Pressed }, _d["& ." + exports.buttonClassNames.icon] = {
+                color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
+            }, _d)) }),
+        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandHover }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandPressed }) }),
+        // Shape variations
+        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
+        rounded: {
+        /* The borderRadius rounded styles are handled in the size variations */
+        },
+        square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), { minWidth: '64px' }), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
+        medium: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingMedium, react_theme_1.tokens.spacingHorizontalM)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase300, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
+        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalL)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+    });
+    var useRootDisabledStyles = react_1.makeStyles({
+        // Base styles
+        base: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_e = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _e["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'none',
+            }, _e["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'inline',
+            }, _e)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_f = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _f["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'none',
+            }, _f["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'inline',
+            }, _f)) }),
+        // High contrast styles
+        highContrast: {
+            '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
+        },
+        // Appearance variations
+        outline: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+            ':hover:active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+        },
+        primary: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')) }),
+        secondary: {
+        /* The secondary styles are exactly the same as the base styles. */
+        },
+        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
+        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
+    });
+    var useRootFocusStyles = react_1.makeStyles({
+        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)), { outlineColor: react_theme_1.tokens.colorTransparentStroke, outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 })),
+        // Shape variations
+        circular: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular))),
+        rounded: {
+        /* The rounded styles are exactly the same as the base styles. */
+        },
+        square: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone))),
+        // Primary styles
+        primary: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralForegroundOnBrand)), { boxShadow: react_theme_1.tokens.shadow2 + ", 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 })),
+        // Size variations
+        small: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall))),
+        medium: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium))),
+        large: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge))),
+    });
+    var useRootIconOnlyStyles = react_1.makeStyles({
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '28px', maxWidth: '28px' }),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '32px', maxWidth: '32px' }),
+        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalSNudge)), { minWidth: '40px', maxWidth: '40px' }),
+    });
+    var useIconStyles = react_1.makeStyles({
+        // Base styles
+        base: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            justifyContent: 'center',
+        },
+        // Size variations
+        small: (_g = {
+                fontSize: '20px',
+                height: '20px',
+                width: '20px'
+            },
+            _g[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalXS,
+            _g),
+        medium: (_h = {
+                fontSize: '20px',
+                height: '20px',
+                width: '20px'
+            },
+            _h[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _h),
+        large: (_j = {
+                fontSize: '24px',
+                height: '24px',
+                width: '24px'
+            },
+            _j[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _j),
+        // Icon position variations
+        before: {
+            marginRight: "var(" + iconSpacingVar + ")",
+        },
+        after: {
+            marginLeft: "var(" + iconSpacingVar + ")",
+        },
+    });
+    var useButtonStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        var rootDisabledStyles = useRootDisabledStyles();
+        var rootFocusStyles = useRootFocusStyles();
+        var rootIconOnlyStyles = useRootIconOnlyStyles();
+        var iconStyles = useIconStyles();
+        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
+        state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, 
+        // Root styles
+        rootStyles.base, rootStyles.transition, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], 
+        // Disabled styles
+        (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], 
+        // Focus styles
+        rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], 
+        // Icon-only styles
+        iconOnly && rootIconOnlyStyles[size], 
+        // User provided class name
+        state.root.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+        }
+        return state;
+    };
+    exports.useButtonStyles_unstable = useButtonStyles_unstable;
+});
+//# sourceMappingURL=useButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n\n    ...shorthands.margin(0),\n\n    ...shorthands.overflow('hidden'),\n\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n    fontFamily: tokens.fontFamilyBase,\n\n    outlineStyle: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n\n      cursor: 'pointer',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n\n      outlineStyle: 'none',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n  },\n\n  // Transition styles\n  transition: {\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        ...shorthands.borderColor('ButtonText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium, tokens.spacingHorizontalM),\n\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),\n\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    outlineColor: tokens.colorTransparentStroke,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  }),\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.transition,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    rootFocusStyles.base,\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderCompoundButton", "./useCompoundButton", "./useCompoundButtonStyles"], function (require, exports, React, renderCompoundButton_1, useCompoundButton_1, useCompoundButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CompoundButton = void 0;
+    /**
+     * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
+     */
+    exports.CompoundButton = React.forwardRef(function (props, ref) {
+        var state = useCompoundButton_1.useCompoundButton_unstable(props, ref);
+        useCompoundButtonStyles_1.useCompoundButtonStyles_unstable(state);
+        return renderCompoundButton_1.renderCompoundButton_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.CompoundButton.displayName = 'CompoundButton';
+});
+//# sourceMappingURL=CompoundButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,cAAc,GAA6C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClG,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErD,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAExC,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;QAC5C,0FAA0F;IAC5F,CAAC,CAA6C,CAAC;IAE/C,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.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 CompoundButtonSlots = ButtonSlots & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Container that wraps the children and the secondaryContent slot.\n   */\n  contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"]}

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

@@ -0,0 +1,12 @@
+define(["require", "exports", "tslib", "./CompoundButton", "./CompoundButton.types", "./renderCompoundButton", "./useCompoundButton", "./useCompoundButtonStyles"], function (require, exports, tslib_1, CompoundButton_1, CompoundButton_types_1, renderCompoundButton_1, useCompoundButton_1, useCompoundButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = void 0;
+    tslib_1.__exportStar(CompoundButton_1, exports);
+    tslib_1.__exportStar(CompoundButton_types_1, exports);
+    tslib_1.__exportStar(renderCompoundButton_1, exports);
+    tslib_1.__exportStar(useCompoundButton_1, exports);
+    Object.defineProperty(exports, "compoundButtonClassNames", { enumerable: true, get: function () { return useCompoundButtonStyles_1.compoundButtonClassNames; } });
+    Object.defineProperty(exports, "useCompoundButtonStyles_unstable", { enumerable: true, get: function () { return useCompoundButtonStyles_1.useCompoundButtonStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC;IAC3B,mIAAA,wBAAwB,OAAA;IAAE,2IAAA,gCAAgC,OAAA","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}

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

@@ -0,0 +1,20 @@
+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.renderCompoundButton_unstable = void 0;
+    /**
+     * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
+     */
+    var renderCompoundButton_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        var iconOnly = state.iconOnly, iconPosition = state.iconPosition;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            !iconOnly && (React.createElement(slots.contentContainer, tslib_1.__assign({}, slotProps.contentContainer),
+                slotProps.root.children,
+                slots.secondaryContent && React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent)))),
+            iconPosition === 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+    };
+    exports.renderCompoundButton_unstable = renderCompoundButton_unstable;
+});
+//# sourceMappingURL=renderCompoundButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderCompoundButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAA0B;QAChE,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAC1D,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEzC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC5E,CAAC,QAAQ,IAAI,CACZ,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB;gBACnD,SAAS,CAAC,IAAI,CAAC,QAAQ;gBACvB,KAAK,CAAC,gBAAgB,IAAI,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC9D,CAC1B;YACA,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,6BAA6B,iCAgBxC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,27 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../Button/index"], function (require, exports, tslib_1, react_utilities_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCompoundButton_unstable = void 0;
+    /**
+     * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+     * @param props - User provided props to the CompoundButton component.
+     * @param ref - User provided ref to be passed to the CompoundButton component.
+     */
+    var useCompoundButton_unstable = function (_a, ref) {
+        var _b, _c;
+        var contentContainer = _a.contentContainer, secondaryContent = _a.secondaryContent, props = tslib_1.__rest(_a, ["contentContainer", "secondaryContent"]);
+        var state = tslib_1.__assign(tslib_1.__assign({}, index_1.useButton_unstable(props, ref)), { 
+            // Slots definition
+            components: {
+                root: 'button',
+                icon: 'span',
+                contentContainer: 'span',
+                secondaryContent: 'span',
+            }, contentContainer: react_utilities_1.resolveShorthand(contentContainer, { required: true }), secondaryContent: react_utilities_1.resolveShorthand(secondaryContent) });
+        // Recalculate iconOnly to take into account secondaryContent.
+        state.iconOnly = Boolean(((_b = state.icon) === null || _b === void 0 ? void 0 : _b.children) && !props.children && !((_c = state.secondaryContent) === null || _c === void 0 ? void 0 : _c.children));
+        return state;
+    };
+    exports.useCompoundButton_unstable = useCompoundButton_unstable;
+});
+//# sourceMappingURL=useCompoundButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCompoundButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACI,IAAM,0BAA0B,GAAG,UACxC,EAAqE,EACrE,GAAqD;;QADnD,IAAA,gBAAgB,sBAAA,EAAE,gBAAgB,sBAAA,EAAK,KAAK,sBAA9C,wCAAgD,CAAF;QAG9C,IAAM,KAAK,yCAEN,0BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC;YAEjC,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,gBAAgB,EAAE,MAAM;gBACxB,gBAAgB,EAAE,MAAM;aACzB,EACD,gBAAgB,EAAE,kCAAgB,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EACxE,gBAAgB,EAAE,kCAAgB,CAAC,gBAAgB,CAAC,GACrD,CAAC;QAEF,8DAA8D;QAC9D,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,QAAQ,KAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,QAAQ,CAAA,CAAC,CAAC;QAEvG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAvBW,QAAA,0BAA0B,8BAuBrC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"]}