@fluentui/react-button 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.1

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

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","f","i","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.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\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    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    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  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.colorTransparentStroke,\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\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\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    minWidth: '64px',\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\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    ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n    ...shorthands.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\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      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'ButtonFace',\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  // 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: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.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  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 !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","f","i","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["../../../src/components/Button/useButtonStyles.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\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    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    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  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.colorTransparentStroke,\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\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\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    minWidth: '64px',\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\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    ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n    ...shorthands.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\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      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'ButtonFace',\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  // 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: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.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  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 !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/CompoundButton/CompoundButton.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { renderCompoundButton_unstable } from './renderCompoundButton';
-import { useCompoundButton_unstable } from './useCompoundButton';
-import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderCompoundButton_unstable } from "./renderCompoundButton";
+import { useCompoundButton_unstable } from "./useCompoundButton";
+import { useCompoundButtonStyles_unstable } from "./useCompoundButtonStyles";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
@@ -17,5 +17,5 @@ export const CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Casting is required due to lack of distributive union to support unions on @types/react
 });
 
-CompoundButton.displayName = 'CompoundButton';
+CompoundButton.displayName = "CompoundButton";
 //# sourceMappingURL=CompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHooks_unstable","CompoundButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-button/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';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHooks_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  const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAM;IAAEN,gCAAgC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC5FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,6BAA6B,CAACQ,KAAK,CAAC;EAC3C;AACF,CAAC,CAA6C;;AAE9CJ,cAAc,CAACM,WAAW,GAAG,gBAAgB"}
+{"version":3,"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHooks_unstable","CompoundButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"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';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHooks_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  const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,gCAAgC,QAAQ;AAGjD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,cAAA,gBAA2DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDL,gCAAA,CAAiCM,KAAA;EAEjC,MAAM;IAAEN,gCAAA,EAAkCO;EAAe,CAAE,GAAGN,4BAAA;EAC9DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,6BAAA,CAA8BQ,KAAA;EACrC;AACF;;AAEAJ,cAAA,CAAeM,WAAW,GAAG"}

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

@@ -1 +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"]}
+{"version":3,"names":[],"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"],"mappings":"AAAA"}

package/lib/components/CompoundButton/index.js

@@ -1,6 +1,6 @@
-export * from './CompoundButton';
-export * from './CompoundButton.types';
-export * from './renderCompoundButton';
-export * from './useCompoundButton';
-export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
+export * from "./CompoundButton";
+export * from "./CompoundButton.types";
+export * from "./renderCompoundButton";
+export * from "./useCompoundButton";
+export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from "./useCompoundButtonStyles";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}
+{"version":3,"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable"],"sources":["../../../src/components/CompoundButton/index.ts"],"sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,wBAAwB,EAAEC,gCAAgC,QAAQ"}

package/lib/components/CompoundButton/renderCompoundButton.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import * as React from "react";
+import { getSlots } from "@fluentui/react-utilities";
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
@@ -12,16 +12,6 @@ export const renderCompoundButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, {
-    ...slotProps.contentContainer
-  }, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, {
-    ...slotProps.secondaryContent
-  })), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== "after" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === "after" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));
 };
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EACjE,MAAM;IAAEG,QAAQ;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAExC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BF,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,EAC5E,CAACJ,QAAQ,iBACRN,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACO,gBAAgB;IAAA,GAAKN,SAAS,CAACM;EAAgB,GACnDN,SAAS,CAACI,IAAI,CAACG,QAAQ,EACvBR,KAAK,CAACS,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACS,gBAAgB;IAAA,GAAKR,SAAS,CAACQ;EAAgB,EAAI,CAExF,EACAN,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CAClE;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA8BE,KAAA;EAC3D,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BF,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,GACxE,CAACJ,QAAA,iBACAN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,gBAAgB,EAAKN,SAAA,CAAUM,gBAAgB,EACnDN,SAAA,CAAUI,IAAI,CAACG,QAAQ,EACvBR,KAAA,CAAMS,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMS,gBAAgB,EAAKR,SAAA,CAAUQ,gBAAgB,IAGpFN,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAG/E"}

package/lib/components/CompoundButton/useCompoundButton.js

@@ -1,5 +1,6 @@
-import { resolveShorthand } from '@fluentui/react-utilities';
-import { useButton_unstable } from '../Button/index';
+import * as React from "react";
+import { resolveShorthand } from "@fluentui/react-utilities";
+import { useButton_unstable } from "../Button/index";
 /**
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @param props - User provided props to the CompoundButton component.
@@ -10,16 +11,15 @@ export const useCompoundButton_unstable = ({
   secondaryContent,
   ...props
 }, ref) => {
-  var _a, _b;
   const state = {
     // Button state
     ...useButton_unstable(props, ref),
     // Slots definition
     components: {
-      root: 'button',
-      icon: 'span',
-      contentContainer: 'span',
-      secondaryContent: 'span'
+      root: "button",
+      icon: "span",
+      contentContainer: "span",
+      secondaryContent: "span"
     },
     contentContainer: resolveShorthand(contentContainer, {
       required: true
@@ -27,7 +27,7 @@ export const useCompoundButton_unstable = ({
     secondaryContent: resolveShorthand(secondaryContent)
   };
   // Recalculate iconOnly to take into account secondaryContent.
-  state.iconOnly = Boolean(((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children) && !props.children && !((_b = state.secondaryContent) === null || _b === void 0 ? void 0 : _b.children));
+  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);
   return state;
 };
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","_a","children","_b"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButton.ts"],"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"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD;;;;;AAKA,OAAO,MAAMC,0BAA0B,GAAGA,CACxC;EAAEC,gBAAgB;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAuB,EACrEC,GAAqD,KAC9B;;EACvB,MAAMC,KAAK,GAAwB;IACjC;IACA,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;IAEjC;IACAE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,MAAM;MACZP,gBAAgB,EAAE,MAAM;MACxBC,gBAAgB,EAAE;KACnB;IACDD,gBAAgB,EAAEH,gBAAgB,CAACG,gBAAgB,EAAE;MAAEQ,QAAQ,EAAE;IAAI,CAAE,CAAC;IACxEP,gBAAgB,EAAEJ,gBAAgB,CAACI,gBAAgB;GACpD;EAED;EACAG,KAAK,CAACK,QAAQ,GAAGC,OAAO,CAAC,EAAAC,EAAA,GAAAP,KAAK,CAACG,IAAI,cAAAI,EAAA,uBAAAA,EAAA,CAAEC,QAAQ,KAAI,CAACV,KAAK,CAACU,QAAQ,IAAI,EAAC,CAAAC,EAAA,GAAAT,KAAK,CAACH,gBAAgB,cAAAY,EAAA,uBAAAA,EAAA,CAAED,QAAQ,EAAC;EAEtG,OAAOR,KAAK;AACd,CAAC"}
+{"version":3,"names":["React","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","children"],"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;AAKA,OAAO,MAAMC,0BAAA,GAA6BA,CACxC;EAAEC,gBAAA;EAAkBC,gBAAA;EAAkB,GAAGC;AAAA,CAA4B,EACrEC,GAAA,KACwB;EACxB,MAAMC,KAAA,GAA6B;IACjC;IACA,GAAGN,kBAAA,CAAmBI,KAAA,EAAOC,GAAA,CAAI;IAEjC;IACAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;MACNP,gBAAA,EAAkB;MAClBC,gBAAA,EAAkB;IACpB;IACAD,gBAAA,EAAkBH,gBAAA,CAAiBG,gBAAA,EAAkB;MAAEQ,QAAA,EAAU;IAAK;IACtEP,gBAAA,EAAkBJ,gBAAA,CAAiBI,gBAAA;EACrC;EAEA;EACAG,KAAA,CAAMK,QAAQ,GAAGC,OAAA,CAAQN,KAAA,CAAMG,IAAI,EAAEI,QAAA,IAAY,CAACT,KAAA,CAAMS,QAAQ,IAAI,CAACP,KAAA,CAAMH,gBAAgB,EAAEU,QAAA;EAE7F,OAAOP,KAAA;AACT"}

package/lib/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,11 +1,11 @@
-import { tokens } from '@fluentui/react-theme';
-import { shorthands, mergeClasses, __styles } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles';
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, __styles } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles";
 export const compoundButtonClassNames = {
-  root: 'fui-CompoundButton',
-  icon: 'fui-CompoundButton__icon',
-  contentContainer: 'fui-CompoundButton__contentContainer',
-  secondaryContent: 'fui-CompoundButton__secondaryContent'
+  root: "fui-CompoundButton",
+  icon: "fui-CompoundButton__icon",
+  contentContainer: "fui-CompoundButton__contentContainer",
+  secondaryContent: "fui-CompoundButton__secondaryContent"
 };
 const useRootStyles = /*#__PURE__*/__styles({
   base: {

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

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

package/lib/components/MenuButton/MenuButton.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { renderMenuButton_unstable } from './renderMenuButton';
-import { useMenuButton_unstable } from './useMenuButton';
-import { useMenuButtonStyles_unstable } from './useMenuButtonStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderMenuButton_unstable } from "./renderMenuButton";
+import { useMenuButton_unstable } from "./useMenuButton";
+import { useMenuButtonStyles_unstable } from "./useMenuButtonStyles";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
  * menus.
@@ -18,5 +18,5 @@ export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Casting is required due to lack of distributive union to support unions on @types/react
 });
 
-MenuButton.displayName = 'MenuButton';
+MenuButton.displayName = "MenuButton";
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHooks_unstable","MenuButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AAGpE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,UAAU,gBAAyCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDL,4BAA4B,CAACM,KAAK,CAAC;EAEnC,MAAM;IAAEN,4BAA4B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACxFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,yBAAyB,CAACQ,KAAK,CAAC;EACvC;AACF,CAAC,CAAyC;;AAE1CJ,UAAU,CAACM,WAAW,GAAG,YAAY"}
+{"version":3,"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHooks_unstable","MenuButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7B,MAAM;IAAEN,4BAAA,EAA8BO;EAAe,CAAE,GAAGN,4BAAA;EAC1DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,yBAAA,CAA0BQ,KAAA;EACjC;AACF;;AAEAJ,UAAA,CAAWM,WAAW,GAAG"}

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

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

package/lib/components/MenuButton/index.js

@@ -1,6 +1,6 @@
-export * from './MenuButton.types';
-export * from './MenuButton';
-export * from './renderMenuButton';
-export * from './useMenuButton';
-export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export * from "./MenuButton.types";
+export * from "./MenuButton";
+export * from "./renderMenuButton";
+export * from "./useMenuButton";
+export { menuButtonClassNames, useMenuButtonStyles_unstable } from "./useMenuButtonStyles";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}
+{"version":3,"names":["menuButtonClassNames","useMenuButtonStyles_unstable"],"sources":["../../../src/components/MenuButton/index.ts"],"sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,oBAAoB,EAAEC,4BAA4B,QAAQ"}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import * as React from "react";
+import { getSlots } from "@fluentui/react-utilities";
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
@@ -12,12 +12,6 @@ export const renderMenuButton_unstable = state => {
     icon,
     iconOnly
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, {
-    ...slotProps.menuIcon
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && slotProps.root.children, (!iconOnly || !icon?.children) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, slotProps.menuIcon));
 };
 //# sourceMappingURL=renderMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAC7D,MAAM;IAAEG,IAAI;IAAEC;EAAQ,CAAE,GAAGJ,KAAK;EAEhC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BL,KAAK,CAACE,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,EAAI,EAChD,CAACC,QAAQ,IAAIF,SAAS,CAACI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAQ,IAAI,EAACD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ,MAAKN,KAAK,CAACO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CACpF;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG,IAAA;IAAMC;EAAQ,CAAE,GAAGJ,KAAA;EAE3B,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BL,KAAA,CAAME,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,GAC5C,CAACC,QAAA,IAAYF,SAAA,CAAUI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAA,IAAY,CAACD,IAAA,EAAMI,QAAO,KAAMN,KAAA,CAAMO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,QAAQ,EAAKN,SAAA,CAAUM,QAAQ;AAGjG"}

package/lib/components/MenuButton/useMenuButton.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { ChevronDownRegular } from '@fluentui/react-icons';
-import { resolveShorthand } from '@fluentui/react-utilities';
-import { useButton_unstable } from '../Button/index';
+import * as React from "react";
+import { ChevronDownRegular } from "@fluentui/react-icons";
+import { resolveShorthand } from "@fluentui/react-utilities";
+import { useButton_unstable } from "../Button/index";
 /**
  * Given user props, returns the final state for a MenuButton.
  */
@@ -9,9 +9,8 @@ export const useMenuButton_unstable = ({
   menuIcon,
   ...props
 }, ref) => {
-  var _a;
   const buttonState = useButton_unstable(props, ref);
-  buttonState.root['aria-expanded'] = (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : false;
+  buttonState.root["aria-expanded"] = props["aria-expanded"] ?? false;
   return {
     // Button state
     ...buttonState,
@@ -19,9 +18,9 @@ export const useMenuButton_unstable = ({
     iconOnly: Boolean(!props.children),
     // Slots definition
     components: {
-      root: 'button',
-      icon: 'span',
-      menuIcon: 'span'
+      root: "button",
+      icon: "span",
+      menuIcon: "span"
     },
     menuIcon: resolveShorthand(menuIcon, {
       defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","_a","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CACpC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,EACvCC,GAAqD,KAClC;;EACnB,MAAMC,WAAW,GAAGL,kBAAkB,CAACG,KAAK,EAAEC,GAAG,CAAC;EAClDC,WAAW,CAACC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAAC,EAAA,GAAAJ,KAAK,CAAC,eAAe,CAAC,cAAAI,EAAA,cAAAA,EAAA,GAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGF,WAAW;IAEd;IACAG,QAAQ,EAAEC,OAAO,CAAC,CAACN,KAAK,CAACO,QAAQ,CAAC;IAElC;IACAC,UAAU,EAAE;MACVL,IAAI,EAAE,QAAQ;MACdM,IAAI,EAAE,MAAM;MACZV,QAAQ,EAAE;KACX;IAEDA,QAAQ,EAAEH,gBAAgB,CAACG,QAAQ,EAAE;MACnCW,YAAY,EAAE;QACZH,QAAQ,eAAEb,KAAA,CAAAiB,aAAA,CAAChB,kBAAkB;OAC9B;MACDiB,QAAQ,EAAE;KACX;GACF;AACH,CAAC"}
+{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CACpC;EAAEC,QAAA;EAAU,GAAGC;AAAA,CAAwB,EACvCC,GAAA,KACoB;EACpB,MAAMC,WAAA,GAAcL,kBAAA,CAAmBG,KAAA,EAAOC,GAAA;EAC9CC,WAAA,CAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,IAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGE,WAAW;IAEd;IACAE,QAAA,EAAUC,OAAA,CAAQ,CAACL,KAAA,CAAMM,QAAQ;IAEjC;IACAC,UAAA,EAAY;MACVJ,IAAA,EAAM;MACNK,IAAA,EAAM;MACNT,QAAA,EAAU;IACZ;IAEAA,QAAA,EAAUH,gBAAA,CAAiBG,QAAA,EAAU;MACnCU,YAAA,EAAc;QACZH,QAAA,eAAUZ,KAAA,CAAAgB,aAAA,CAACf,kBAAA;MACb;MACAgB,QAAA,EAAU;IACZ;EACF;AACF"}

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -1,11 +1,11 @@
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { tokens } from '@fluentui/react-theme';
-import { mergeClasses, __styles, shorthands } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import { mergeClasses, __styles, shorthands } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles";
 export const menuButtonClassNames = {
-  root: 'fui-MenuButton',
-  icon: 'fui-MenuButton__icon',
-  menuIcon: 'fui-MenuButton__menuIcon'
+  root: "fui-MenuButton",
+  icon: "fui-MenuButton__icon",
+  menuIcon: "fui-MenuButton__menuIcon"
 };
 const useRootExpandedStyles = /*#__PURE__*/__styles({
   base: {
@@ -94,16 +94,16 @@ export const useMenuButtonStyles_unstable = state => {
   const rootExpandedStyles = useRootExpandedStyles();
   const iconExpandedStyles = useIconExpandedStyles();
   const menuIconStyles = useMenuIconStyles();
-  state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root["aria-expanded"] && rootExpandedStyles.base, state.root["aria-expanded"] && rootExpandedStyles[state.appearance], state.root.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance], state.icon.className);
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root["aria-expanded"] && iconExpandedStyles[state.appearance], state.icon.className);
   }
   if (state.menuIcon) {
     state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
   }
   useButtonStyles_unstable({
     ...state,
-    iconPosition: 'before'
+    iconPosition: "before"
   });
   return state;
 };