@fluentui/react-button 9.9.0 → 9.9.2

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 26 Mar 2026 08:10:38 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.9.2)
+
+Tue, 26 May 2026 09:34:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.9.1..@fluentui/react-button_v9.9.2)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.9.1)
+
+Thu, 23 Apr 2026 14:21:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.9.0..@fluentui/react-button_v9.9.1)
+
+### Patches
+
+- fix: update types for render function ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.9.0)
 
-Thu, 26 Mar 2026 08:10:38 GMT 
+Thu, 26 Mar 2026 08:12:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.8.2..@fluentui/react-button_v9.9.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { DistributiveOmit } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -150,7 +150,7 @@ export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<But
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
  */
-declare const renderButton_unstable: (state: ButtonState) => JSXElement;
+declare const renderButton_unstable: (state: ButtonBaseState) => JSXElement;
 export { renderButton_unstable }
 export { renderButton_unstable as renderToggleButton_unstable }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}
+{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonBaseState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonBaseState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

package/lib/components/Button/useButton.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useButtonContext } from '../../contexts/ButtonContext';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { slot } from '@fluentui/react-utilities';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,IAAI,QAAQ,4BAA4B;AAGjD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGP;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,yBAAyB,CACpCR,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,KAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAQ,cAAdd,6BAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAiB,cAAvBf,sCAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,0BAAAA,oCAAAA,cAAeO,QAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,KAAKuB,MAAM,CAA2BxB,mBAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,QAAQ,+BAA+B;AAEhE,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,IAAI,QAAQ,4BAA4B;AAGjD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGP;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,yBAAyB,CACpCR,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,KAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAQ,cAAdd,6BAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAiB,cAAvBf,sCAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,0BAAAA,oCAAAA,cAAeO,QAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,KAAKuB,MAAM,CAA2BxB,mBAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}

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

@@ -537,6 +537,7 @@ export const useButtonStyles_unstable = state => {
     shape,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
   // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
@@ -547,6 +548,7 @@ export const useButtonStyles_unstable = state => {
   // User provided class name
   state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","r","s","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","Bpjbzib","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","secondary","subtle","Bk3fhr4","Bmfj8id","Bbdnnc7","Bqou3pl","Bsnehw8","wsxvnf","Buhizc3","Bqabnb4","transparent","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","square","small","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","p","h","m","useRootDisabledStyles","base","Bceei9c","Bfinmwp","eoavqd","Bses4qk","highContrast","Grqk0h","h3ptyc","Buw724y","Buk7464","Hwei09","useRootFocusStyles","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","he4mth","Byr4aka","lks7q5","Bnan3qt","k1dn9","Bqsb82s","jg1oma","t","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"sources":["useButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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';\nexport const buttonClassNames = {\n    root: 'fui-Button',\n    icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n */ const boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    margin: 0,\n    overflow: 'hidden',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    fontFamily: tokens.fontFamilyBase,\n    outlineStyle: 'none',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        borderColor: tokens.colorNeutralStroke1Hover,\n        color: tokens.colorNeutralForeground1Hover,\n        cursor: 'pointer'\n    },\n    ':hover:active,:active:focus-visible': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        borderColor: tokens.colorNeutralStroke1Pressed,\n        color: tokens.colorNeutralForeground1Pressed,\n        outlineStyle: 'none'\n    },\n    padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n    minWidth: '96px',\n    borderRadius: tokens.borderRadiusMedium,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n    // Transition styles\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':focus': {\n            borderColor: 'ButtonText'\n        },\n        ':hover': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        }\n    },\n    // Focus styles\n    ...createCustomFocusIndicatorStyle({\n        borderColor: tokens.colorStrokeFocus2,\n        borderRadius: tokens.borderRadiusMedium,\n        borderWidth: '1px',\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n        boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n      inset\n    `,\n        zIndex: 1\n    }),\n    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n    '@supports (-moz-appearance:button)': {\n        ...createCustomFocusIndicatorStyle({\n            boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n      inset\n    `\n        })\n    }\n});\nconst useIconBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('HighlightText'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                color: 'Highlight',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: tokens.colorTransparentBackground,\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: tokens.colorTransparentBackground,\n                color: 'Highlight'\n            }\n        }\n    },\n    // Shape variations\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    },\n    rounded: {\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    // Size variations\n    small: {\n        minWidth: '64px',\n        padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n        borderRadius: tokens.borderRadiusMedium,\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    },\n    large: {\n        minWidth: '96px',\n        padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n        borderRadius: tokens.borderRadiusMedium,\n        fontSize: tokens.fontSizeBase400,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase400\n    },\n    largeWithIcon: {\n        paddingBottom: buttonSpacingLargeWithIcon,\n        paddingTop: buttonSpacingLargeWithIcon\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        [`& .${buttonClassNames.icon}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\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            [`& .${buttonClassNames.icon}`]: {\n                color: 'GrayText'\n            },\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            },\n            ':hover': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground\n        }\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useRootFocusStyles = makeStyles({\n    // Shape variations\n    circular: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusCircular\n    }),\n    rounded: {\n    },\n    square: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusNone\n    }),\n    // Primary styles\n    primary: {\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorStrokeFocus2),\n            boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n            ':hover': {\n                boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n                ...shorthands.borderColor(tokens.colorStrokeFocus2)\n            }\n        }),\n        // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n        '@supports (-moz-appearance:button)': {\n            ...createCustomFocusIndicatorStyle({\n                boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n                ':hover': {\n                    boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`\n                }\n            })\n        }\n    },\n    // Size variations\n    small: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusSmall\n    }),\n    medium: {\n    },\n    large: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusLarge\n    })\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: buttonSpacingSmallWithIcon,\n        minWidth: '24px',\n        maxWidth: '24px'\n    },\n    medium: {\n        padding: buttonSpacingMedium,\n        minWidth: '32px',\n        maxWidth: '32px'\n    },\n    large: {\n        padding: buttonSpacingLargeWithIcon,\n        minWidth: '40px',\n        maxWidth: '40px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Size variations\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px',\n        [iconSpacingVar]: tokens.spacingHorizontalXS\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px',\n        [iconSpacingVar]: tokens.spacingHorizontalSNudge\n    },\n    // Icon position variations\n    before: {\n        marginRight: `var(${iconSpacingVar})`\n    },\n    after: {\n        marginLeft: `var(${iconSpacingVar})`\n    }\n});\nexport const useButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const iconBaseClassName = useIconBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootFocusStyles = useRootFocusStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","r","s","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","Bpjbzib","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","secondary","subtle","Bk3fhr4","Bmfj8id","Bbdnnc7","Bqou3pl","Bsnehw8","wsxvnf","Buhizc3","Bqabnb4","transparent","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","square","small","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","p","h","m","useRootDisabledStyles","base","Bceei9c","Bfinmwp","eoavqd","Bses4qk","highContrast","Grqk0h","h3ptyc","Buw724y","Buk7464","Hwei09","useRootFocusStyles","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","he4mth","Byr4aka","lks7q5","Bnan3qt","k1dn9","Bqsb82s","jg1oma","t","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"sources":["useButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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';\nexport const buttonClassNames = {\n    root: 'fui-Button',\n    icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n */ const boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    margin: 0,\n    overflow: 'hidden',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    fontFamily: tokens.fontFamilyBase,\n    outlineStyle: 'none',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        borderColor: tokens.colorNeutralStroke1Hover,\n        color: tokens.colorNeutralForeground1Hover,\n        cursor: 'pointer'\n    },\n    ':hover:active,:active:focus-visible': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        borderColor: tokens.colorNeutralStroke1Pressed,\n        color: tokens.colorNeutralForeground1Pressed,\n        outlineStyle: 'none'\n    },\n    padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n    minWidth: '96px',\n    borderRadius: tokens.borderRadiusMedium,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n    // Transition styles\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':focus': {\n            borderColor: 'ButtonText'\n        },\n        ':hover': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        }\n    },\n    // Focus styles\n    ...createCustomFocusIndicatorStyle({\n        borderColor: tokens.colorStrokeFocus2,\n        borderRadius: tokens.borderRadiusMedium,\n        borderWidth: '1px',\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n        boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n      inset\n    `,\n        zIndex: 1\n    }),\n    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n    '@supports (-moz-appearance:button)': {\n        ...createCustomFocusIndicatorStyle({\n            boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n      inset\n    `\n        })\n    }\n});\nconst useIconBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('HighlightText'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                color: 'Highlight',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: tokens.colorTransparentBackground,\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: tokens.colorTransparentBackground,\n                color: 'Highlight'\n            }\n        }\n    },\n    // Shape variations\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    },\n    rounded: {\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    // Size variations\n    small: {\n        minWidth: '64px',\n        padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n        borderRadius: tokens.borderRadiusMedium,\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    },\n    large: {\n        minWidth: '96px',\n        padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n        borderRadius: tokens.borderRadiusMedium,\n        fontSize: tokens.fontSizeBase400,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase400\n    },\n    largeWithIcon: {\n        paddingBottom: buttonSpacingLargeWithIcon,\n        paddingTop: buttonSpacingLargeWithIcon\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        [`& .${buttonClassNames.icon}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\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            [`& .${buttonClassNames.icon}`]: {\n                color: 'GrayText'\n            },\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            },\n            ':hover': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground\n        }\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useRootFocusStyles = makeStyles({\n    // Shape variations\n    circular: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusCircular\n    }),\n    rounded: {\n    },\n    square: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusNone\n    }),\n    // Primary styles\n    primary: {\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorStrokeFocus2),\n            boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n            ':hover': {\n                boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n                ...shorthands.borderColor(tokens.colorStrokeFocus2)\n            }\n        }),\n        // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n        '@supports (-moz-appearance:button)': {\n            ...createCustomFocusIndicatorStyle({\n                boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n                ':hover': {\n                    boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`\n                }\n            })\n        }\n    },\n    // Size variations\n    small: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusSmall\n    }),\n    medium: {\n    },\n    large: createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusLarge\n    })\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: buttonSpacingSmallWithIcon,\n        minWidth: '24px',\n        maxWidth: '24px'\n    },\n    medium: {\n        padding: buttonSpacingMedium,\n        minWidth: '32px',\n        maxWidth: '32px'\n    },\n    large: {\n        padding: buttonSpacingLargeWithIcon,\n        minWidth: '40px',\n        maxWidth: '40px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Size variations\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px',\n        [iconSpacingVar]: tokens.spacingHorizontalXS\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px',\n        [iconSpacingVar]: tokens.spacingHorizontalSNudge\n    },\n    // Icon position variations\n    before: {\n        marginRight: `var(${iconSpacingVar})`\n    },\n    after: {\n        marginLeft: `var(${iconSpacingVar})`\n    }\n});\nexport const useButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const iconBaseClassName = useIconBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootFocusStyles = useRootFocusStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -477,12 +477,14 @@ export const useButtonStyles_unstable = (state)=>{
     const rootIconOnlyStyles = useRootIconOnlyStyles();
     const iconStyles = useIconStyles();
     const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles
     (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
     appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
     iconOnly && rootIconOnlyStyles[size], // User provided class name
     state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
     }
     return state;

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

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

package/lib/components/CompoundButton/useCompoundButton.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 import { useButton_unstable } from '../Button/index';
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const { contentContainer, secondaryContent, ...buttonProps } = props;\n\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(buttonProps, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","props","ref","state","contentContainer","secondaryContent","buttonProps","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;QAoByBC,aAA4CA;IAlBrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAE/D,MAAME,QAA6B;QACjC,eAAe;QACf,GAAGJ,mBAAmBO,aAAaJ,IAAI;QAEvC,mBAAmB;QACnBK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBN,KAAKY,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBP,KAAKc,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DR,MAAMU,QAAQ,GAAGC,QAAQX,EAAAA,cAAAA,MAAMM,IAAI,cAAVN,kCAAAA,YAAYY,QAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,GAACZ,0BAAAA,MAAME,gBAAgB,cAAtBF,8CAAAA,wBAAwBY,QAAQ;IAErG,OAAOZ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const { contentContainer, secondaryContent, ...buttonProps } = props;\n\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(buttonProps, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["slot","useButton_unstable","useCompoundButton_unstable","props","ref","state","contentContainer","secondaryContent","buttonProps","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;AAGA,SAASA,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;QAoByBC,aAA4CA;IAlBrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAE/D,MAAME,QAA6B;QACjC,eAAe;QACf,GAAGJ,mBAAmBO,aAAaJ,IAAI;QAEvC,mBAAmB;QACnBK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBN,KAAKY,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBP,KAAKc,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DR,MAAMU,QAAQ,GAAGC,QAAQX,EAAAA,cAAAA,MAAMM,IAAI,cAAVN,kCAAAA,YAAYY,QAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,GAACZ,0BAAAA,MAAME,gBAAgB,cAAtBF,8CAAAA,wBAAwBY,QAAQ;IAErG,OAAOZ;AACT,EAAE"}

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

@@ -198,6 +198,7 @@ export const useCompoundButtonStyles_unstable = state => {
     iconPosition,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(compoundButtonClassNames.root,
   // Root styles
   rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size],
@@ -207,11 +208,14 @@ export const useCompoundButtonStyles_unstable = state => {
   iconOnly && rootIconOnlyStyles[size],
   // User provided class name
   state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
   }
   useButtonStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\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            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: tokens.spacingHorizontalXS,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: tokens.spacingHorizontalSNudge,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: tokens.spacingHorizontalS,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\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            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: tokens.spacingHorizontalXS,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: tokens.spacingHorizontalSNudge,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: tokens.spacingHorizontalS,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,kCAAkC;AAC3E,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,IAAI,EAAE,0BAA0B;EAChCC,gBAAgB,EAAE,sCAAsC;EACxDC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,aAAa,gBAAGP,QAAA;EAAAQ,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAP,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAM,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAU,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,QAAA;IAAAtB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAqB,oBAAA;IAAAf,MAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAmB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;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;AAAA,CAsJrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGtC,QAAA;EAAAsB,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,OAAA;IAAAC,OAAA;EAAA;EAAAV,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,OAAA;IAAAC,OAAA;EAAA;EAAAT,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAN,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiB7B,CAAC;AACF,MAAMM,aAAa,gBAAGzC,QAAA;EAAAQ,IAAA;IAAAoB,OAAA;IAAAnB,OAAA;IAAAiC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAcrB,CAAC;AACF,MAAMa,yBAAyB,gBAAG/C,QAAA;EAAAQ,IAAA;IAAAwC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAhB,CAAA;AAAA,CAOjC,CAAC;AACF,MAAMiB,yBAAyB,gBAAGnD,QAAA;EAAAQ,IAAA;IAAAqB,OAAA;IAAAuB,OAAA;EAAA;EAAA9B,KAAA;IAAAM,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;EAAA;EAAAG,KAAA;IAAAH,OAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CAgBjC,CAAC;AACF,OAAO,MAAMmB,gCAAgC,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,UAAU,GAAGhD,aAAa,CAAC,CAAC;EAClC,MAAMiD,kBAAkB,GAAGlB,qBAAqB,CAAC,CAAC;EAClD,MAAMmB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,sBAAsB,GAAGX,yBAAyB,CAAC,CAAC;EAC1D,MAAMY,sBAAsB,GAAGR,yBAAyB,CAAC,CAAC;EAC1D,MAAM;IAAES,UAAU;IAAE5B,QAAQ;IAAE6B,iBAAiB;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAK,CAAC,GAAGV,KAAK;EACvF;EACAA,KAAK,CAACnD,IAAI,CAAC8D,SAAS,GAAGlE,YAAY,CAACG,wBAAwB,CAACC,IAAI;EAAE;EACnEoD,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAAC1C,YAAY,EAAE+C,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAAEL,UAAU,CAACS,IAAI,CAAC;EAAE;EAClG,CAAChC,QAAQ,IAAI6B,iBAAiB,KAAKN,UAAU,CAACvB,QAAQ,EAAE,CAACA,QAAQ,IAAI6B,iBAAiB,KAAKN,UAAU,CAACtB,oBAAoB;EAAE;EAC5H6B,QAAQ,IAAIN,kBAAkB,CAACQ,IAAI,CAAC;EAAE;EACtCV,KAAK,CAACnD,IAAI,CAAC8D,SAAS,CAAC;EACrB;EACAX,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,GAAGlE,YAAY,CAACG,wBAAwB,CAACG,gBAAgB,EAAEqD,sBAAsB,CAAClD,IAAI,EAAE8C,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,CAAC;EACzJ,IAAIX,KAAK,CAAClD,IAAI,EAAE;IACZ;IACAkD,KAAK,CAAClD,IAAI,CAAC6D,SAAS,GAAGlE,YAAY,CAACG,wBAAwB,CAACE,IAAI,EAAEqD,UAAU,CAACjD,IAAI,EAAE8C,KAAK,CAACnD,IAAI,CAAC+D,QAAQ,KAAKC,SAAS,IAAIb,KAAK,CAACnD,IAAI,CAAC+D,QAAQ,KAAK,IAAI,IAAIT,UAAU,CAACM,YAAY,CAAC,EAAET,KAAK,CAAClD,IAAI,CAAC6D,SAAS,CAAC;EAC5M;EACA,IAAIX,KAAK,CAAChD,gBAAgB,EAAE;IACxB;IACAgD,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,GAAGlE,YAAY,CAACG,wBAAwB,CAACI,gBAAgB,EAAEqD,sBAAsB,CAACnD,IAAI,EAAEmD,sBAAsB,CAACK,IAAI,CAAC,EAAEV,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,CAAC;EAC3L;EACAhE,wBAAwB,CAACqD,KAAK,CAAC;EAC/B,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js

@@ -225,16 +225,20 @@ export const useCompoundButtonStyles_unstable = (state)=>{
     const contentContainerStyles = useContentContainerStyles();
     const secondaryContentStyles = useSecondaryContentStyles();
     const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles
     rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
     (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
     iconOnly && rootIconOnlyStyles[size], // User provided class name
     state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
     }
     useButtonStyles_unstable(state);