@fluentui/react-button 9.2.5 → 9.3.0

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","react_1","useIconBaseClassName","useRootStyles","useRootDisabledStyles","useRootFocusStyles","useRootIconOnlyStyles","useIconStyles","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","smallWithIcon","largeWithIcon","base","highContrast","primary","children","undefined"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["react_icons_1","require","react_tabster_1","react_theme_1","react_1","exports","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","__resetStyles","useIconBaseClassName","useRootStyles","__styles","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","mergeClasses","children","undefined"],"sources":["../src/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":";;;;;;AAAA,MAAAA,aAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AACA,MAAAG,OAAA,gBAAAH,OAAA;AAIaI,OAAA,CAAAC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;CACP;AAED,MAAMC,cAAc,GAAG,6BAA6B;AAEpD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AACxC,MAAMC,mBAAmB,GAAG,KAAK;AACjC,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AAExC,MAAMC,oBAAoB,gBAAGX,OAAA,CAAAY,aAAe,m+IAoG1C;AAEF,MAAMC,oBAAoB,gBAAGb,OAAA,CAAAY,aAAe,waAU1C;AAEF,MAAME,aAAa,gBAAGd,OAAA,CAAAe,QAAU;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA2B,OAAA;IAAAtC,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAuB,MAAA;EAAA;EAAAC,WAAA;IAAA1C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAyB,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;EAAAC,MAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAL,OAAA;IAAAF,MAAA;EAAA;EAAAQ,MAAA;EAAAC,KAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,aAAA;IAAAR,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAW,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA0I9B;AAEF,MAAMC,qBAAqB,gBAAGnF,OAAA,CAAAe,QAAU;EAAAqE,IAAA;IAAAnE,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAA4D,OAAA;IAAAnE,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAwD,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAArE,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAsD,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAxD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAoD,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAArD,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAtC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAqB,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAyB,WAAA;IAAA1C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAA8C,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAuHtC;AAEF,MAAMe,kBAAkB,gBAAGjG,OAAA,CAAAe,QAAU;EAAA6C,QAAA;IAAAsC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAtC,OAAA;EAAAC,MAAA;IAAAgC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAnF,OAAA;IAAA8E,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzC,KAAA;IAAA+B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA1B,MAAA;EAAAC,KAAA;IAAAoB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAM,CAAA;EAAAC,CAAA;EAAA9B,CAAA;AAAA,EA4BnC;AAEF,MAAM+B,qBAAqB,gBAAG/G,OAAA,CAAAe,QAAU;EAAAoD,KAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;EAAAnC,MAAA;IAAAR,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;EAAAlC,KAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;AAAA;EAAAhC,CAAA;AAAA,EAoBtC;AAEF,MAAMiC,aAAa,gBAAGjH,OAAA,CAAAe,QAAU;EAAAoD,KAAA;IAAAM,OAAA;IAAAyC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAvC,MAAA;EAAAC,KAAA;IAAAL,OAAA;IAAAyC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAxC,CAAA;AAAA,EA2B9B;AAEK,MAAMyC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGhH,oBAAoB,EAAE;EAChD,MAAMiH,iBAAiB,GAAG/G,oBAAoB,EAAE;EAEhD,MAAMgH,UAAU,GAAG/G,aAAa,EAAE;EAClC,MAAMgH,kBAAkB,GAAG3C,qBAAqB,EAAE;EAClD,MAAM4C,eAAe,GAAG9B,kBAAkB,EAAE;EAC5C,MAAM+B,kBAAkB,GAAGjB,qBAAqB,EAAE;EAClD,MAAMkB,UAAU,GAAGhB,aAAa,EAAE;EAElC,MAAM;IAAEiB,UAAU;IAAEC,QAAQ;IAAEC,iBAAiB;IAAEhI,IAAI;IAAEiI,QAAQ;IAAEC,YAAY;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGd,KAAK;EAEpGA,KAAK,CAACvH,IAAI,CAACsI,SAAS,GAAGzI,OAAA,CAAA0I,YAAY,CACjCzI,OAAA,CAAAC,gBAAgB,CAACC,IAAI,EACrBwH,iBAAiB,EAEjBO,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAEpCL,UAAU,CAACW,IAAI,CAAC,EAChBpI,IAAI,IAAIoI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAACjD,aAAa,EACpDxE,IAAI,IAAIoI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAAC9C,aAAa,EACpD8C,UAAU,CAACU,KAAK,CAAC;EAEjB;EACA,CAACJ,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAAC1C,IAAI,EAC1D,CAAC+C,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAAClC,YAAY,EAClEsC,UAAU,KAAKC,QAAQ,IAAIC,iBAAiB,CAAC,IAAIN,kBAAkB,CAACI,UAAU,CAAC;EAE/E;EACAA,UAAU,KAAK,SAAS,IAAIH,eAAe,CAAC3G,OAAO,EACnD2G,eAAe,CAACS,IAAI,CAAC,EACrBT,eAAe,CAACQ,KAAK,CAAC;EAEtB;EACAF,QAAQ,IAAIL,kBAAkB,CAACQ,IAAI,CAAC;EAEpC;EACAd,KAAK,CAACvH,IAAI,CAACsI,SAAS,CACrB;EAED,IAAIf,KAAK,CAACtH,IAAI,EAAE;IACdsH,KAAK,CAACtH,IAAI,CAACqI,SAAS,GAAGzI,OAAA,CAAA0I,YAAY,CACjCzI,OAAA,CAAAC,gBAAgB,CAACE,IAAI,EACrBwH,iBAAiB,EACjBF,KAAK,CAACvH,IAAI,CAACwI,QAAQ,KAAKC,SAAS,IAAIlB,KAAK,CAACvH,IAAI,CAACwI,QAAQ,KAAK,IAAI,IAAIV,UAAU,CAACK,YAAY,CAAC,EAC7FL,UAAU,CAACO,IAAI,CAAC,EAChBd,KAAK,CAACtH,IAAI,CAACqI,SAAS,CACrB;;EAGH,OAAOf,KAAK;AACd,CAAC;AAnDYzH,OAAA,CAAAwH,wBAAwB,GAAAA,wBAAA"}

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

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
 const useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
 const useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
 exports.CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCompoundButton_1.useCompoundButton_unstable(props, ref);
   useCompoundButtonStyles_1.useCompoundButtonStyles_unstable(state);
+  const {
+    useCompoundButtonStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderCompoundButton_1.renderCompoundButton_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,sBAAc,gBAA6CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDG,0DAAgC,CAACF,KAAK,CAAC;EAEvC,OAAOG,oDAA6B,CAACH,KAAK,CAAC;EAC3C;AACF,CAAC,CAA6C;;AAE9CL,sBAAc,CAACS,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","useCompoundButton_1","useCompoundButtonStyles_1","renderCompoundButton_1","displayName"],"sourceRoot":"../src/","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';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"]}
+{"version":3,"names":["React","require","renderCompoundButton_1","useCompoundButton_1","useCompoundButtonStyles_1","react_shared_contexts_1","exports","CompoundButton","forwardRef","props","ref","state","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderCompoundButton_unstable","displayName"],"sources":["../src/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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,sBAAA,gBAAAD,OAAA;AACA,MAAAE,mBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,cAAc,gBAA6CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGR,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDN,yBAAA,CAAAS,gCAAgC,CAACF,KAAK,CAAC;EAEvC,MAAM;IAAEE,gCAAgC,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC5FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,sBAAA,CAAAc,6BAA6B,CAACL,KAAK,CAAC;EAC3C;AACF,CAAC,CAA6C;;AAE9CL,OAAA,CAAAC,cAAc,CAACU,WAAW,GAAG,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-button/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":""}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,yDAAwB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,iEAAgC;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/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"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports","useCompoundButtonStyles_1","Object","defineProperty","enumerable","get","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"sources":["../src/packages/react-components/react-button/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":";;;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACA,IAAAC,yBAAA,gBAAAF,OAAA;AAASG,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,yBAAA,CAAAK,wBAAwB;EAAA;AAAA;AAAEJ,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,yBAAA,CAAAM,gCAAgC;EAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBH,KAAK,CAAC;EACjE,MAAM;IAAEI,QAAQ;IAAEC;EAAY,CAAE,GAAGL,KAAK;EAExC,OACEM,oBAACL,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAC3BF,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACO,IAAI,IAAIF,oBAACL,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,EAC5E,CAACJ,QAAQ,IACRE,oBAACL,KAAK,CAACQ,gBAAgB;IAAA,GAAKP,SAAS,CAACO;EAAgB,GACnDP,SAAS,CAACK,IAAI,CAACG,QAAQ,EACvBT,KAAK,CAACU,gBAAgB,IAAIL,oBAACL,KAAK,CAACU,gBAAgB;IAAA,GAAKT,SAAS,CAACS;EAAgB,EAAI,CAExF,EACAN,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACO,IAAI,IAAIF,oBAACL,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CAClE;AAEjB,CAAC;AAhBYI,qCAA6B","names":["renderCompoundButton_unstable","state","slots","slotProps","react_utilities_1","iconOnly","iconPosition","React","root","icon","contentContainer","children","secondaryContent","exports"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["React","require","react_utilities_1","renderCompoundButton_unstable","state","slots","slotProps","getSlots","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent","exports"],"sources":["../src/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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAsBH,KAAK,CAAC;EACjE,MAAM;IAAEI,QAAQ;IAAEC;EAAY,CAAE,GAAGL,KAAK;EAExC,OACEJ,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAC3BF,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACO,IAAI,IAAIZ,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,EAC5E,CAACJ,QAAQ,IACRR,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACQ,gBAAgB;IAAA,GAAKP,SAAS,CAACO;EAAgB,GACnDP,SAAS,CAACK,IAAI,CAACG,QAAQ,EACvBT,KAAK,CAACU,gBAAgB,IAAIf,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACU,gBAAgB;IAAA,GAAKT,SAAS,CAACS;EAAgB,EAAI,CAExF,EACAN,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACO,IAAI,IAAIZ,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CAClE;AAEjB,CAAC;AAhBYI,OAAA,CAAAb,6BAA6B,GAAAA,6BAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AACA;AAGA;;;;;AAKO,MAAMA,0BAA0B,GAAG,CACxC;EAAEC,gBAAgB;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAuB,EACrEC,GAAqD,KAC9B;;EACvB,MAAMC,KAAK,GAAwB;IACjC;IACA,GAAGC,0BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;IAEjC;IACAG,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,MAAM;MACZR,gBAAgB,EAAE,MAAM;MACxBC,gBAAgB,EAAE;KACnB;IACDD,gBAAgB,EAAES,kCAAgB,CAACT,gBAAgB,EAAE;MAAEU,QAAQ,EAAE;IAAI,CAAE,CAAC;IACxET,gBAAgB,EAAEQ,kCAAgB,CAACR,gBAAgB;GACpD;EAED;EACAG,KAAK,CAACO,QAAQ,GAAGC,OAAO,CAAC,YAAK,CAACJ,IAAI,0CAAEK,QAAQ,KAAI,CAACX,KAAK,CAACW,QAAQ,IAAI,EAAC,WAAK,CAACZ,gBAAgB,0CAAEY,QAAQ,EAAC;EAEtG,OAAOT,KAAK;AACd,CAAC;AAvBYU,kCAA0B","names":["useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","index_1","components","root","icon","react_utilities_1","required","iconOnly","Boolean","children","exports"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["react_utilities_1","require","index_1","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","useButton_unstable","components","root","icon","resolveShorthand","required","iconOnly","Boolean","_a","children","_b","exports"],"sources":["../src/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,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AAGA;;;;;AAKO,MAAME,0BAA0B,GAAGA,CACxC;EAAEC,gBAAgB;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAuB,EACrEC,GAAqD,KAC9B;;EACvB,MAAMC,KAAK,GAAwB;IACjC;IACA,GAAGN,OAAA,CAAAO,kBAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;IAEjC;IACAG,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,MAAM;MACZR,gBAAgB,EAAE,MAAM;MACxBC,gBAAgB,EAAE;KACnB;IACDD,gBAAgB,EAAEJ,iBAAA,CAAAa,gBAAgB,CAACT,gBAAgB,EAAE;MAAEU,QAAQ,EAAE;IAAI,CAAE,CAAC;IACxET,gBAAgB,EAAEL,iBAAA,CAAAa,gBAAgB,CAACR,gBAAgB;GACpD;EAED;EACAG,KAAK,CAACO,QAAQ,GAAGC,OAAO,CAAC,EAAAC,EAAA,GAAAT,KAAK,CAACI,IAAI,cAAAK,EAAA,uBAAAA,EAAA,CAAEC,QAAQ,KAAI,CAACZ,KAAK,CAACY,QAAQ,IAAI,EAAC,CAAAC,EAAA,GAAAX,KAAK,CAACH,gBAAgB,cAAAc,EAAA,uBAAAA,EAAA,CAAED,QAAQ,EAAC;EAEtG,OAAOV,KAAK;AACd,CAAC;AAvBYY,OAAA,CAAAjB,0BAA0B,GAAAA,0BAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","icon","contentContainer","secondaryContent","useRootStyles","react_1","useRootIconOnlyStyles","useIconStyles","useContentContainerStyles","useSecondaryContentStyles","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","size","className","base","highContrast","disabledHighContrast","children","undefined","useButtonStyles_1"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["react_theme_1","require","react_1","useButtonStyles_1","exports","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","__styles","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","mergeClasses","children","undefined","useButtonStyles_unstable"],"sources":["../src/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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"}

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

@@ -8,6 +8,7 @@ const React = /*#__PURE__*/require("react");
 const renderMenuButton_1 = /*#__PURE__*/require("./renderMenuButton");
 const useMenuButton_1 = /*#__PURE__*/require("./useMenuButton");
 const useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
  * menus.
@@ -15,6 +16,10 @@ const useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
 exports.MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuButton_1.useMenuButton_unstable(props, ref);
   useMenuButtonStyles_1.useMenuButtonStyles_unstable(state);
+  const {
+    useMenuButtonStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuButton_1.renderMenuButton_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;AAIaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDG,kDAA4B,CAACF,KAAK,CAAC;EAEnC,OAAOG,4CAAyB,CAACH,KAAK,CAAC;EACvC;AACF,CAAC,CAAyC;;AAE1CL,kBAAU,CAACS,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useMenuButton_1","useMenuButtonStyles_1","renderMenuButton_1","displayName"],"sourceRoot":"../src/","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';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"]}
+{"version":3,"names":["React","require","renderMenuButton_1","useMenuButton_1","useMenuButtonStyles_1","react_shared_contexts_1","exports","MenuButton","forwardRef","props","ref","state","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuButton_unstable","displayName"],"sources":["../src/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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,kBAAA,gBAAAD,OAAA;AACA,MAAAE,eAAA,gBAAAF,OAAA;AACA,MAAAG,qBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;;AAIaK,OAAA,CAAAC,UAAU,gBAAyCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,eAAA,CAAAS,sBAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDN,qBAAA,CAAAS,4BAA4B,CAACF,KAAK,CAAC;EAEnC,MAAM;IAAEE,4BAA4B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACxFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,kBAAA,CAAAc,yBAAyB,CAACL,KAAK,CAAC;EACvC;AACF,CAAC,CAAyC;;AAE1CL,OAAA,CAAAC,UAAU,CAACU,WAAW,GAAG,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-button/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":""}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,iDAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,yDAA4B;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/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"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports","useMenuButtonStyles_1","Object","defineProperty","enumerable","get","menuButtonClassNames","useMenuButtonStyles_unstable"],"sources":["../src/packages/react-components/react-button/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":";;;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACA,IAAAC,qBAAA,gBAAAF,OAAA;AAASG,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,qBAAA,CAAAK,oBAAoB;EAAA;AAAA;AAAEJ,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,qBAAA,CAAAM,4BAA4B;EAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBH,KAAK,CAAC;EAC7D,MAAM;IAAEI,IAAI;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EAEhC,OACEM,oBAACL,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAC3BN,KAAK,CAACG,IAAI,IAAIE,oBAACL,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,EAChD,CAACC,QAAQ,IAAIH,SAAS,CAACK,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAQ,IAAI,EAACD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ,MAAKP,KAAK,CAACQ,QAAQ,IAAIH,oBAACL,KAAK,CAACQ,QAAQ;IAAA,GAAKP,SAAS,CAACO;EAAQ,EAAI,CACpF;AAEjB,CAAC;AAXYC,iCAAyB","names":["renderMenuButton_unstable","state","slots","slotProps","react_utilities_1","icon","iconOnly","React","root","children","menuIcon","exports"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["React","require","react_utilities_1","renderMenuButton_unstable","state","slots","slotProps","getSlots","icon","iconOnly","createElement","root","children","menuIcon","exports"],"sources":["../src/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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAkBH,KAAK,CAAC;EAC7D,MAAM;IAAEI,IAAI;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EAEhC,OACEJ,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAC3BN,KAAK,CAACG,IAAI,IAAIR,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,EAChD,CAACC,QAAQ,IAAIH,SAAS,CAACK,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAQ,IAAI,EAACD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ,MAAKP,KAAK,CAACQ,QAAQ,IAAIb,KAAA,CAAAU,aAAA,CAACL,KAAK,CAACQ,QAAQ;IAAA,GAAKP,SAAS,CAACO;EAAQ,EAAI,CACpF;AAEjB,CAAC;AAXYC,OAAA,CAAAX,yBAAyB,GAAAA,yBAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAG,CACpC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,EACvCC,GAAqD,KAClC;;EACnB,MAAMC,WAAW,GAAGC,0BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAClDC,WAAW,CAACE,IAAI,CAAC,eAAe,CAAC,GAAG,WAAK,CAAC,eAAe,CAAC,mCAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGF,WAAW;IAEd;IACAG,QAAQ,EAAEC,OAAO,CAAC,CAACN,KAAK,CAACO,QAAQ,CAAC;IAElC;IACAC,UAAU,EAAE;MACVJ,IAAI,EAAE,QAAQ;MACdK,IAAI,EAAE,MAAM;MACZV,QAAQ,EAAE;KACX;IAEDA,QAAQ,EAAEW,kCAAgB,CAACX,QAAQ,EAAE;MACnCY,YAAY,EAAE;QACZJ,QAAQ,EAAEK,oBAACC,gCAAkB;OAC9B;MACDC,QAAQ,EAAE;KACX;GACF;AACH,CAAC;AA5BYC,8BAAsB","names":["useMenuButton_unstable","menuIcon","props","ref","buttonState","index_1","root","iconOnly","Boolean","children","components","icon","react_utilities_1","defaultProps","React","react_icons_1","required","exports"],"sourceRoot":"../src/","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"]}
+{"version":3,"names":["React","require","react_icons_1","react_utilities_1","index_1","useMenuButton_unstable","menuIcon","props","ref","buttonState","useButton_unstable","root","_a","iconOnly","Boolean","children","components","icon","resolveShorthand","defaultProps","createElement","ChevronDownRegular","required","exports"],"sources":["../src/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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,OAAA,gBAAAH,OAAA;AAGA;;;AAGO,MAAMI,sBAAsB,GAAGA,CACpC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,EACvCC,GAAqD,KAClC;;EACnB,MAAMC,WAAW,GAAGL,OAAA,CAAAM,kBAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAClDC,WAAW,CAACE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAAC,EAAA,GAAAL,KAAK,CAAC,eAAe,CAAC,cAAAK,EAAA,cAAAA,EAAA,GAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGH,WAAW;IAEd;IACAI,QAAQ,EAAEC,OAAO,CAAC,CAACP,KAAK,CAACQ,QAAQ,CAAC;IAElC;IACAC,UAAU,EAAE;MACVL,IAAI,EAAE,QAAQ;MACdM,IAAI,EAAE,MAAM;MACZX,QAAQ,EAAE;KACX;IAEDA,QAAQ,EAAEH,iBAAA,CAAAe,gBAAgB,CAACZ,QAAQ,EAAE;MACnCa,YAAY,EAAE;QACZJ,QAAQ,EAAEf,KAAA,CAAAoB,aAAA,CAAClB,aAAA,CAAAmB,kBAAkB;OAC9B;MACDC,QAAQ,EAAE;KACX;GACF;AACH,CAAC;AA5BYC,OAAA,CAAAlB,sBAAsB,GAAAA,sBAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAGaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,QAAQ,EAAE;CACX;AAED,MAAMC,qBAAqB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgCtC;AAEF,MAAMC,qBAAqB,gBAAGD,gBAAU;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAiBtC;AAEF,MAAME,iBAAiB,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA6BlC;AAEK,MAAMG,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,kBAAkB,GAAGN,qBAAqB,EAAE;EAClD,MAAMO,kBAAkB,GAAGL,qBAAqB,EAAE;EAClD,MAAMM,cAAc,GAAGL,iBAAiB,EAAE;EAE1CE,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACC,IAAI,EACzBQ,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIS,kBAAkB,CAACI,IAAI,EACtDL,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIS,kBAAkB,CAACD,KAAK,CAACM,UAAU,CAAC,EACnEN,KAAK,CAACR,IAAI,CAACY,SAAS,CACrB;EAED,IAAIJ,KAAK,CAACP,IAAI,EAAE;IACdO,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACE,IAAI,EACzBO,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIU,kBAAkB,CAACF,KAAK,CAACM,UAAU,CAAC,EACnEN,KAAK,CAACP,IAAI,CAACW,SAAS,CACrB;;EAGH,IAAIJ,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACU,SAAS,GAAGR,oBAAY,CACrCL,4BAAoB,CAACG,QAAQ,EAC7BS,cAAc,CAACE,IAAI,EACnBF,cAAc,CAACH,KAAK,CAACO,IAAI,CAAC,EAC1B,CAACP,KAAK,CAACQ,QAAQ,IAAIL,cAAc,CAACM,WAAW,EAC7CT,KAAK,CAACN,QAAQ,CAACU,SAAS,CACzB;;EAGHM,0CAAwB,CAAC;IAAE,GAAGV,KAAK;IAAEW,YAAY,EAAE;EAAQ,CAAE,CAAC;EAE9D,OAAOX,KAAK;AACd,CAAC;AAjCYT,oCAA4B","names":["exports","root","icon","menuIcon","useRootExpandedStyles","react_1","useIconExpandedStyles","useMenuIconStyles","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","base","appearance","size","iconOnly","notIconOnly","useButtonStyles_1","iconPosition"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_icons_1","require","react_theme_1","react_1","useButtonStyles_1","exports","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","__styles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"sources":["../src/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ const React = /*#__PURE__*/require("react");
 const renderSplitButton_1 = /*#__PURE__*/require("./renderSplitButton");
 const useSplitButton_1 = /*#__PURE__*/require("./useSplitButton");
 const useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.
@@ -15,6 +16,10 @@ const useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
 exports.SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSplitButton_1.useSplitButton_unstable(props, ref);
   useSplitButtonStyles_1.useSplitButtonStyles_unstable(state);
+  const {
+    useSplitButtonStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderSplitButton_1.renderSplitButton_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;AAIaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EAEpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;EACxC;AACF,CAAC,CAA0C;;AAE3CL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useSplitButton_1","useSplitButtonStyles_1","renderSplitButton_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"]}
+{"version":3,"names":["React","require","renderSplitButton_1","useSplitButton_1","useSplitButtonStyles_1","react_shared_contexts_1","exports","SplitButton","forwardRef","props","ref","state","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSplitButton_unstable","displayName"],"sources":["../src/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  const { useSplitButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,mBAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,sBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;;AAIaK,OAAA,CAAAC,WAAW,gBAA0CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,gBAAA,CAAAS,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDN,sBAAA,CAAAS,6BAA6B,CAACF,KAAK,CAAC;EAEpC,MAAM;IAAEE,6BAA6B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACzFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,mBAAA,CAAAc,0BAA0B,CAACL,KAAK,CAAC;EACxC;AACF,CAAC,CAA0C;;AAE3CL,OAAA,CAAAC,WAAW,CAACU,WAAW,GAAG,aAAa"}

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

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

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,mDAAqB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,2DAA6B;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports","useSplitButtonStyles_1","Object","defineProperty","enumerable","get","splitButtonClassNames","useSplitButtonStyles_unstable"],"sources":["../src/packages/react-components/react-button/src/components/SplitButton/index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"],"mappings":";;;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACA,IAAAC,sBAAA,gBAAAF,OAAA;AAASG,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,sBAAA,CAAAK,qBAAqB;EAAA;AAAA;AAAEJ,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,sBAAA,CAAAM,6BAA6B;EAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,mBAAmB,IAAIF,oBAACH,KAAK,CAACK,mBAAmB;IAAA,GAAKJ,SAAS,CAACI;EAAmB,EAAI,EAC7FL,KAAK,CAACM,UAAU,IAAIH,oBAACH,KAAK,CAACM,UAAU;IAAA,GAAKL,SAAS,CAACK;EAAU,EAAI,CACxD;AAEjB,CAAC;AATYC,kCAA0B","names":["renderSplitButton_unstable","state","slots","slotProps","react_utilities_1","React","root","primaryActionButton","menuButton","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","require","react_utilities_1","renderSplitButton_unstable","state","slots","slotProps","getSlots","createElement","root","primaryActionButton","menuButton","exports"],"sources":["../src/packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,mBAAmB,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,mBAAmB;IAAA,GAAKJ,SAAS,CAACI;EAAmB,EAAI,EAC7FL,KAAK,CAACM,UAAU,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,UAAU;IAAA,GAAKL,SAAS,CAACK;EAAU,EAAI,CACxD;AAEjB,CAAC;AATYC,OAAA,CAAAT,0BAA0B,GAAAA,0BAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAGA;;;;;AAKO,MAAMA,uBAAuB,GAAG,CACrCC,KAAuB,EACvBC,GAAqD,KACjC;EACpB,MAAM;IACJC,UAAU,GAAG,WAAW;IACxBC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,iBAAiB,GAAG,KAAK;IACzBC,IAAI;IACJC,YAAY,GAAG,QAAQ;IACvBC,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,KAAK,GAAG,SAAS;IACjBC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,MAAM,GAAGC,uBAAK,CAAC,cAAc,CAAC;EAEpC,MAAMC,mBAAmB,GAAGD,kCAAgB,CAACN,UAAU,EAAE;IACvDQ,YAAY,EAAE;MACZd,UAAU;MACVE,QAAQ;MACRC,iBAAiB;MACjBI,QAAQ;MACRE,KAAK;MACLC;KACD;IACDK,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,4BAA4B,GAAGJ,kCAAgB,CAACJ,mBAAmB,EAAE;IACzEM,YAAY,EAAE;MACZd,UAAU;MACVC,QAAQ;MACRC,QAAQ;MACRC,iBAAiB;MACjBC,IAAI;MACJC,YAAY;MACZY,EAAE,EAAEN,MAAM,GAAG,uBAAuB;MACpCF,KAAK;MACLC;KACD;IACDK,QAAQ,EAAE;GACX,CAAC;EAEF;EACA;EACA,IACEF,mBAAmB,IACnBG,4BAA4B,IAC5B,CAACH,mBAAmB,CAAC,YAAY,CAAC,IAClC,CAACA,mBAAmB,CAAC,iBAAiB,CAAC,EACvC;IACAA,mBAAmB,CAAC,iBAAiB,CAAC,GAAGG,4BAA4B,CAACC,EAAE;;EAG1E,OAAO;IACL;IACAjB,UAAU;IACVE,QAAQ;IACRC,iBAAiB;IACjBE,YAAY;IACZI,KAAK;IACLC,IAAI;IAEJ;IACAQ,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXb,UAAU,EAAEc,uBAAU;MACtBZ,mBAAmB,EAAEa;KACtB;IAEDF,IAAI,EAAEP,uCAAqB,CAAC,KAAK,EAAE;MAAEb,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDQ,UAAU,EAAEO,mBAAmB;IAC/BL,mBAAmB,EAAEQ;GACtB;AACH,CAAC;AA9EYM,+BAAuB","names":["useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","react_utilities_1","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root","MenuButton_1","Button_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"]}
+{"version":3,"names":["react_utilities_1","require","Button_1","MenuButton_1","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","useId","menuButtonShorthand","resolveShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root","MenuButton","Button","getNativeElementProps","exports"],"sources":["../src/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,QAAA,gBAAAD,OAAA;AACA,MAAAE,YAAA,gBAAAF,OAAA;AAGA;;;;;AAKO,MAAMG,uBAAuB,GAAGA,CACrCC,KAAuB,EACvBC,GAAqD,KACjC;EACpB,MAAM;IACJC,UAAU,GAAG,WAAW;IACxBC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,iBAAiB,GAAG,KAAK;IACzBC,IAAI;IACJC,YAAY,GAAG,QAAQ;IACvBC,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,KAAK,GAAG,SAAS;IACjBC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,MAAM,GAAGlB,iBAAA,CAAAmB,KAAK,CAAC,cAAc,CAAC;EAEpC,MAAMC,mBAAmB,GAAGpB,iBAAA,CAAAqB,gBAAgB,CAACR,UAAU,EAAE;IACvDS,YAAY,EAAE;MACZf,UAAU;MACVE,QAAQ;MACRC,iBAAiB;MACjBI,QAAQ;MACRE,KAAK;MACLC;KACD;IACDM,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,4BAA4B,GAAGxB,iBAAA,CAAAqB,gBAAgB,CAACN,mBAAmB,EAAE;IACzEO,YAAY,EAAE;MACZf,UAAU;MACVC,QAAQ;MACRC,QAAQ;MACRC,iBAAiB;MACjBC,IAAI;MACJC,YAAY;MACZa,EAAE,EAAEP,MAAM,GAAG,uBAAuB;MACpCF,KAAK;MACLC;KACD;IACDM,QAAQ,EAAE;GACX,CAAC;EAEF;EACA;EACA,IACEH,mBAAmB,IACnBI,4BAA4B,IAC5B,CAACJ,mBAAmB,CAAC,YAAY,CAAC,IAClC,CAACA,mBAAmB,CAAC,iBAAiB,CAAC,EACvC;IACAA,mBAAmB,CAAC,iBAAiB,CAAC,GAAGI,4BAA4B,CAACC,EAAE;;EAG1E,OAAO;IACL;IACAlB,UAAU;IACVE,QAAQ;IACRC,iBAAiB;IACjBE,YAAY;IACZI,KAAK;IACLC,IAAI;IAEJ;IACAS,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXd,UAAU,EAAEV,YAAA,CAAAyB,UAAU;MACtBb,mBAAmB,EAAEb,QAAA,CAAA2B;KACtB;IAEDF,IAAI,EAAE3B,iBAAA,CAAA8B,qBAAqB,CAAC,KAAK,EAAE;MAAExB,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDQ,UAAU,EAAEO,mBAAmB;IAC/BL,mBAAmB,EAAES;GACtB;AACH,CAAC;AA9EYO,OAAA,CAAA3B,uBAAuB,GAAAA,uBAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAW/B;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA8I9B;AAEK,MAAME,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGN,cAAc,EAAE;EAEpC,MAAM;IAAEO,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACP,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,6BAAqB,CAACC,IAAI,EAC1BQ,UAAU,CAACM,IAAI,EACfJ,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACC,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACG,QAAQ,EACtD,CAACA,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACO,oBAAoB,EAClER,KAAK,CAACP,IAAI,CAACa,SAAS,CACrB;EAED,IAAIN,KAAK,CAACN,UAAU,EAAE;IACpBM,KAAK,CAACN,UAAU,CAACY,SAAS,GAAGT,oBAAY,CACvCL,6BAAqB,CAACE,UAAU,EAChCQ,WAAW,CAACR,UAAU,EACtBM,KAAK,CAACN,UAAU,CAACY,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACL,mBAAmB,EAAE;IAC7BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,GAAGT,oBAAY,CAChDL,6BAAqB,CAACG,mBAAmB,EACzCO,WAAW,CAACP,mBAAmB,EAC/BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC;AAhCYR,qCAA6B","names":["exports","root","menuButton","primaryActionButton","useFocusStyles","react_1","useRootStyles","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabled","disabledFocusable","className","base","disabledHighContrast"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_1","require","react_tabster_1","react_theme_1","exports","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","__styles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"sources":["../src/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAGT,OAAA,CAAAU,QAAU;EAAAF,mBAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,UAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAW/B;AAEF,MAAMC,aAAa,gBAAGrB,OAAA,CAAAU,QAAU;EAAAY,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8I9B;AAEK,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGhC,aAAa,EAAE;EAClC,MAAMiC,WAAW,GAAG7C,cAAc,EAAE;EAEpC,MAAM;IAAE8C,UAAU;IAAER,QAAQ;IAAES;EAAiB,CAAE,GAAGJ,KAAK;EAEzDA,KAAK,CAAC9C,IAAI,CAACmD,SAAS,GAAGzD,OAAA,CAAA0D,YAAY,CACjCtD,OAAA,CAAAC,qBAAqB,CAACC,IAAI,EAC1B+C,UAAU,CAAC/B,IAAI,EACfiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EACtD,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAClEI,KAAK,CAAC9C,IAAI,CAACmD,SAAS,CACrB;EAED,IAAIL,KAAK,CAAC7C,UAAU,EAAE;IACpB6C,KAAK,CAAC7C,UAAU,CAACkD,SAAS,GAAGzD,OAAA,CAAA0D,YAAY,CACvCtD,OAAA,CAAAC,qBAAqB,CAACE,UAAU,EAChC+C,WAAW,CAAC/C,UAAU,EACtB6C,KAAK,CAAC7C,UAAU,CAACkD,SAAS,CAC3B;;EAGH,IAAIL,KAAK,CAAC5C,mBAAmB,EAAE;IAC7B4C,KAAK,CAAC5C,mBAAmB,CAACiD,SAAS,GAAGzD,OAAA,CAAA0D,YAAY,CAChDtD,OAAA,CAAAC,qBAAqB,CAACG,mBAAmB,EACzC8C,WAAW,CAAC9C,mBAAmB,EAC/B4C,KAAK,CAAC5C,mBAAmB,CAACiD,SAAS,CACpC;;EAGH,OAAOL,KAAK;AACd,CAAC;AAhCYhD,OAAA,CAAA+C,6BAA6B,GAAAA,6BAAA"}

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

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const renderToggleButton_1 = /*#__PURE__*/require("./renderToggleButton");
 const useToggleButton_1 = /*#__PURE__*/require("./useToggleButton");
 const useToggleButtonStyles_1 = /*#__PURE__*/require("./useToggleButtonStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
 exports.ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToggleButton_1.useToggleButton_unstable(props, ref);
   useToggleButtonStyles_1.useToggleButtonStyles_unstable(state);
+  const {
+    useToggleButtonStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToggleButton_1.renderToggleButton_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,oBAAY,gBAA2CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElDG,sDAA8B,CAACF,KAAK,CAAC;EAErC,OAAOG,gDAA2B,CAACH,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useToggleButton_1","useToggleButtonStyles_1","renderToggleButton_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"]}
+{"version":3,"names":["React","require","renderToggleButton_1","useToggleButton_1","useToggleButtonStyles_1","react_shared_contexts_1","exports","ToggleButton","forwardRef","props","ref","state","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToggleButton_unstable","displayName"],"sources":["../src/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,oBAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,YAAY,gBAA2CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,iBAAA,CAAAS,wBAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElDN,uBAAA,CAAAS,8BAA8B,CAACF,KAAK,CAAC;EAErC,MAAM;IAAEE,8BAA8B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC1FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,oBAAA,CAAAc,2BAA2B,CAACL,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CL,OAAA,CAAAC,YAAY,CAACU,WAAW,GAAG,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,qDAAsB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,6DAA8B;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports","useToggleButtonStyles_1","Object","defineProperty","enumerable","get","toggleButtonClassNames","useToggleButtonStyles_unstable"],"sources":["../src/packages/react-components/react-button/src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"],"mappings":";;;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,oBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,0BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,0BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,uBAAAC,OAAA;AACA,IAAAC,uBAAA,gBAAAF,OAAA;AAASG,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,uBAAA,CAAAK,sBAAsB;EAAA;AAAA;AAAEJ,MAAA,CAAAC,cAAA,CAAAH,OAAA;EAAAI,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAJ,uBAAA,CAAAM,8BAA8B;EAAA;AAAA"}

package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,2CAAqB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}
+{"version":3,"names":["renderButton_1","require","Object","defineProperty","exports","enumerable","get","renderButton_unstable"],"sources":["../src/packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"mappings":";;;;;;AAAA,IAAAA,cAAA,gBAAAC,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,cAAA,CAAAO,qBAAqB;EAAA;AAAA"}