@fluentui/react-button 9.5.3 → 9.6.1

package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js

@@ -0,0 +1,495 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    buttonClassNames: function() {
+        return buttonClassNames;
+    },
+    useButtonStyles_unstable: function() {
+        return useButtonStyles_unstable;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const buttonClassNames = {
+    root: 'fui-Button',
+    icon: 'fui-Button__icon'
+};
+const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingSmallWithIcon = '1px';
+const buttonSpacingMedium = '5px';
+const buttonSpacingLarge = '8px';
+const buttonSpacingLargeWithIcon = '7px';
+/* Firefox has box shadow sizing issue at some zoom levels
+ * this will ensure the inset boxShadow is always uniform
+ * without affecting other browser platforms
+ */ const boxShadowStrokeWidthThinMoz = `calc(${_reacttheme.tokens.strokeWidthThin} + 0.25px)`;
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    margin: 0,
+    overflow: 'hidden',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    fontFamily: _reacttheme.tokens.fontFamilyBase,
+    outlineStyle: 'none',
+    ':hover': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+        borderColor: _reacttheme.tokens.colorNeutralStroke1Hover,
+        color: _reacttheme.tokens.colorNeutralForeground1Hover,
+        cursor: 'pointer'
+    },
+    ':hover:active': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+        borderColor: _reacttheme.tokens.colorNeutralStroke1Pressed,
+        color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+        outlineStyle: 'none'
+    },
+    padding: `${buttonSpacingMedium} ${_reacttheme.tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    fontWeight: _reacttheme.tokens.fontWeightSemibold,
+    lineHeight: _reacttheme.tokens.lineHeightBase300,
+    // Transition styles
+    transitionDuration: _reacttheme.tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms'
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':focus': {
+            borderColor: 'ButtonText'
+        },
+        ':hover': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        },
+        ':hover:active': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        }
+    },
+    // Focus styles
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderColor: _reacttheme.tokens.colorStrokeFocus2,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        borderWidth: '1px',
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2}
+      inset
+    `,
+        zIndex: 1
+    }),
+    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+    '@supports (-moz-appearance:button)': {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2}
+      inset
+    `
+        })
+    }
+});
+const useIconBaseClassName = (0, _react.makeResetStyles)({
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    fontSize: '20px',
+    height: '20px',
+    width: '20px',
+    [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
+});
+const useRootStyles = (0, _react.makeStyles)({
+    // Appearance variations
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+        }
+    },
+    primary: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            ..._react.shorthands.borderColor('HighlightText'),
+            color: 'HighlightText',
+            forcedColorAdjust: 'none',
+            ':hover': {
+                backgroundColor: 'HighlightText',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            },
+            ':hover:active': {
+                backgroundColor: 'HighlightText',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            }
+        }
+    },
+    secondary: {},
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2Hover,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2BrandHover,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2BrandPressed,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+                color: 'Highlight'
+            },
+            ':hover:active': {
+                backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+                color: 'Highlight'
+            }
+        }
+    },
+    // Shape variations
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    },
+    rounded: {},
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    },
+    // Size variations
+    small: {
+        minWidth: '64px',
+        padding: `${buttonSpacingSmall} ${_reacttheme.tokens.spacingHorizontalS}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        lineHeight: _reacttheme.tokens.lineHeightBase200
+    },
+    smallWithIcon: {
+        paddingBottom: buttonSpacingSmallWithIcon,
+        paddingTop: buttonSpacingSmallWithIcon
+    },
+    medium: {},
+    large: {
+        minWidth: '96px',
+        padding: `${buttonSpacingLarge} ${_reacttheme.tokens.spacingHorizontalL}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        lineHeight: _reacttheme.tokens.lineHeightBase400
+    },
+    largeWithIcon: {
+        paddingBottom: buttonSpacingLargeWithIcon,
+        paddingTop: buttonSpacingLargeWithIcon
+    }
+});
+const useRootDisabledStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        [`& .${buttonClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            backgroundColor: 'ButtonFace',
+            ..._react.shorthands.borderColor('GrayText'),
+            color: 'GrayText',
+            [`& .${buttonClassNames.icon}`]: {
+                color: 'GrayText'
+            },
+            ':focus': {
+                ..._react.shorthands.borderColor('GrayText')
+            },
+            ':hover': {
+                backgroundColor: 'ButtonFace',
+                ..._react.shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                backgroundColor: 'ButtonFace',
+                ..._react.shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground
+        }
+    },
+    primary: {
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active': {
+            ..._react.shorthands.borderColor('transparent')
+        }
+    },
+    secondary: {},
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        }
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        }
+    }
+});
+const useRootFocusStyles = (0, _react.makeStyles)({
+    // Shape variations
+    circular: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    }),
+    rounded: {},
+    square: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    }),
+    // Primary styles
+    primary: {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2),
+            boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset,  0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
+            ':hover': {
+                boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset`,
+                ..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2)
+            }
+        }),
+        // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+        '@supports (-moz-appearance:button)': {
+            ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+                boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset,  0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
+                ':hover': {
+                    boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset`
+                }
+            })
+        }
+    },
+    // Size variations
+    small: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusSmall
+    }),
+    medium: {},
+    large: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusLarge
+    })
+});
+const useRootIconOnlyStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        padding: buttonSpacingSmallWithIcon,
+        minWidth: '24px',
+        maxWidth: '24px'
+    },
+    medium: {
+        padding: buttonSpacingMedium,
+        minWidth: '32px',
+        maxWidth: '32px'
+    },
+    large: {
+        padding: buttonSpacingLargeWithIcon,
+        minWidth: '40px',
+        maxWidth: '40px'
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        fontSize: '20px',
+        height: '20px',
+        width: '20px',
+        [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalXS
+    },
+    medium: {},
+    large: {
+        fontSize: '24px',
+        height: '24px',
+        width: '24px',
+        [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    // Icon position variations
+    before: {
+        marginRight: `var(${iconSpacingVar})`
+    },
+    after: {
+        marginLeft: `var(${iconSpacingVar})`
+    }
+});
+const useButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const iconBaseClassName = useIconBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const rootFocusStyles = useRootFocusStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = (0, _react.mergeClasses)(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], iconOnly && rootIconOnlyStyles[size], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/useButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, 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 buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n */\nconst boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  textDecorationLine: 'none',\n  verticalAlign: 'middle',\n\n  margin: 0,\n  overflow: 'hidden',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n  fontFamily: tokens.fontFamilyBase,\n  outlineStyle: 'none',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground1Hover,\n\n    cursor: 'pointer',\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground1Pressed,\n\n    outlineStyle: 'none',\n  },\n\n  padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n  minWidth: '96px',\n  borderRadius: tokens.borderRadiusMedium,\n\n  fontSize: tokens.fontSizeBase300,\n  fontWeight: tokens.fontWeightSemibold,\n  lineHeight: tokens.lineHeightBase300,\n\n  // Transition styles\n\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  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    ':focus': {\n      borderColor: 'ButtonText',\n    },\n\n    ':hover': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n\n    ':hover:active': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  // Focus styles\n\n  ...createCustomFocusIndicatorStyle({\n    borderColor: tokens.colorStrokeFocus2,\n    borderRadius: tokens.borderRadiusMedium,\n    borderWidth: '1px',\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n      inset\n    `,\n    zIndex: 1,\n  }),\n\n  // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n  '@supports (-moz-appearance:button)': {\n    ...createCustomFocusIndicatorStyle({\n      boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n      inset\n    `,\n    }),\n  },\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  fontSize: '20px',\n  height: '20px',\n  width: '20px',\n\n  [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\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    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('HighlightText'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\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      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\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      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n\n        [`& .${buttonClassNames.icon}`]: {\n          color: 'Highlight',\n        },\n      },\n      ':hover:active': {\n        color: 'Highlight',\n\n        [`& .${buttonClassNames.icon}`]: {\n          color: 'Highlight',\n        },\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      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: tokens.colorTransparentBackground,\n        color: 'Highlight',\n      },\n      ':hover:active': {\n        backgroundColor: tokens.colorTransparentBackground,\n        color: 'Highlight',\n      },\n    },\n  },\n\n  // Shape variations\n  circular: { borderRadius: tokens.borderRadiusCircular },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: { borderRadius: tokens.borderRadiusNone },\n\n  // Size variations\n  small: {\n    minWidth: '64px',\n    padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n    borderRadius: tokens.borderRadiusMedium,\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  smallWithIcon: {\n    paddingBottom: buttonSpacingSmallWithIcon,\n    paddingTop: buttonSpacingSmallWithIcon,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    minWidth: '96px',\n    padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n    borderRadius: tokens.borderRadiusMedium,\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  largeWithIcon: {\n    paddingBottom: buttonSpacingLargeWithIcon,\n    paddingTop: buttonSpacingLargeWithIcon,\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    [`& .${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\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      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\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      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: 'GrayText',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n\n        [`& .${buttonClassNames.icon}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n\n        [`& .${buttonClassNames.icon}`]: {\n          color: 'GrayText',\n        },\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  // Shape variations\n  circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n\n  // Primary styles\n  primary: {\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorStrokeFocus2),\n      boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n      ':hover': {\n        boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n        ...shorthands.borderColor(tokens.colorStrokeFocus2),\n      },\n    }),\n\n    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n    '@supports (-moz-appearance:button)': {\n      ...createCustomFocusIndicatorStyle({\n        boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n        ':hover': {\n          boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,\n        },\n      }),\n    },\n  },\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }),\n  medium: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    padding: buttonSpacingSmallWithIcon,\n\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  medium: {\n    padding: buttonSpacingMedium,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacingLargeWithIcon,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    /* defined in base styles */\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  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\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, icon, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n    rootBaseClassName,\n\n    appearance && rootStyles[appearance],\n\n    rootStyles[size],\n    icon && size === 'small' && rootStyles.smallWithIcon,\n    icon && size === 'large' && rootStyles.largeWithIcon,\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    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      iconBaseClassName,\n      !!state.root.children && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","makeStyles","makeResetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","margin","overflow","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","border","colorNeutralStroke1","fontFamily","fontFamilyBase","outlineStyle","colorNeutralBackground1Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground1Hover","cursor","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","padding","spacingHorizontalM","minWidth","borderRadius","borderRadiusMedium","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase300","transitionDuration","durationFaster","transitionProperty","transitionTimingFunction","curveEasyEase","forcedColorAdjust","colorStrokeFocus2","borderWidth","outline","strokeWidthThick","colorTransparentStroke","boxShadow","zIndex","useIconBaseClassName","height","width","spacingHorizontalSNudge","useRootStyles","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackground","colorNeutralForeground2","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorNeutralForeground2BrandPressed","transparent","circular","borderRadiusCircular","rounded","square","borderRadiusNone","small","spacingHorizontalS","fontSizeBase200","fontWeightRegular","lineHeightBase200","smallWithIcon","paddingBottom","paddingTop","medium","large","spacingHorizontalL","fontSizeBase400","lineHeightBase400","largeWithIcon","useRootDisabledStyles","base","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","highContrast","useRootFocusStyles","shadow2","borderRadiusSmall","borderRadiusLarge","useRootIconOnlyStyles","maxWidth","useIconStyles","spacingHorizontalXS","before","marginRight","after","marginLeft","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('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"],"names":["CompoundButton","React","forwardRef","props","ref","state","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","renderCompoundButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;sCACuB;mCACH;+CACM;qCAGL;AAKrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IAEjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACrC,0FAA0F;AAC5F;AAEAL,eAAeU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('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"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;sCACe,yBAAyB;mCAC5B,sBAAsB;+CAChB,mCAAmC;qCAGxC,kCAAkC;AAKvE,uBAAMA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,iDAAAA,EAA2BK,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOR,mDAAAA,EAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"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"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"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"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,cAAc;eAAdA,8BAAc;;IAIdC,wBAAwB;eAAxBA,uDAAwB;;IAFxBC,6BAA6B;eAA7BA,mDAA6B;;IAEHC,gCAAgC;eAAhCA,+DAAgC;;IAD1DC,0BAA0B;eAA1BA,6CAA0B;;;gCAHJ;sCAEe;mCACH;+CACgC"}
+{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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  assertSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && (\n        <state.contentContainer>\n          {state.root.children}\n          {state.secondaryContent && <state.secondaryContent />}\n        </state.contentContainer>\n      )}\n\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["renderCompoundButton_unstable","state","assertSlots","iconOnly","iconPosition","_jsxs","root","icon","_jsx","contentContainer","children","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IACjC,MAAM,EAAEE,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAEnC,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRF,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;YACrD,CAACJ,YAAAA,WAAAA,GACAE,IAAAA,gBAAA,EAACJ,MAAMQ,gBAAgB,EAAA;;oBACpBR,MAAMK,IAAI,CAACI,QAAQ;oBACnBT,MAAMU,gBAAgB,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACP,MAAMU,gBAAgB,EAAA,CAAA;;;YAIrDP,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;;;AAG5D"}
+{"version":3,"sources":["../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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  assertSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && (\n        <state.contentContainer>\n          {state.root.children}\n          {state.secondaryContent && <state.secondaryContent />}\n        </state.contentContainer>\n      )}\n\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,sCAAsC,CAACC;QAC5CF,2BAAAA,EAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAAA,WAAAA,GACA,oBAAA,EAACD,MAAMK,gBAAgB,EAAA;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\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"],"names":["useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","useButton_unstable","components","root","icon","slot","always","elementType","optional","iconOnly","Boolean","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;gCACF;uBACc;AAQ5B,MAAMA,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGC,IAAAA,yBAAAA,EAAmBH,OAAOC,IAAI;QAEjC,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNC,MAAM;YACNR,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBS,oBAAAA,CAAKC,MAAM,CAACV,kBAAkB;YAAEW,aAAa;QAAO;QACtEV,kBAAkBQ,oBAAAA,CAAKG,QAAQ,CAACX,kBAAkB;YAAEU,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DP,MAAMS,QAAQ,GAAGC,QAAQV,CAAAA,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYW,QAAQ,AAARA,KAAY,CAACb,MAAMa,QAAQ,IAAI,CAAA,CAAA,AAACX,CAAAA,0BAAAA,MAAMH,gBAAgB,AAAhBA,MAAgB,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBW,QAAQ,AAARA;IAE7F,OAAOX;AACT"}
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\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"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":";;;;+BAUaG;;;;;;;iEAVU,QAAQ;gCACV,4BAA4B;uBACd,kBAAkB;AAQ9C,mCAAmC,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,OAAGN,yBAAAA,EAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,oBAAAA,CAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,oBAAAA,CAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,CAAAA,CAAAA,cAAAA,MAAMG,IAAAA,AAAI,MAAA,QAAVH,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYS,QAAAA,AAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,CAAA,CAAA,CAACT,0BAAAA,MAAMH,gBAAAA,AAAgB,MAAA,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBS,QAAAA,AAAQ;IAErG,OAAOT;AACT,EAAE"}