npm - @fluentui/react-button - Versions diffs - 9.9.0 → 9.9.2 - Mend

@fluentui/react-button 9.9.0 → 9.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,wBAAwB;;;IAuNxBmD,gCAAgC;;;;uBAzNJ,gBAAgB;uCAChB,kCAAkC;AACpE,iCAAiC;IACpClD,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE,0BAA0B;IAChCC,gBAAgB,EAAE,sCAAsC;IACxDC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAM,MAAA,EAAA;IAAA;IAAAC,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAV,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAM,WAAA,EAAA;QAAAX,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAU,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,QAAA,EAAA;QAAAtB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAqB,oBAAA,EAAA;QAAAf,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAmB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAsJrB,CAAC;AACF,MAAMC,qBAAqB,GAAA,WAAA,OAAGtC,eAAA,EAAA;IAAAsB,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAV,MAAA,EAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAT,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAN,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAiB7B,CAAC;AACF,MAAMM,aAAa,GAAA,WAAA,OAAGzC,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAoB,OAAA,EAAA;QAAAnB,OAAA,EAAA;QAAAiC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AACF,MAAMa,yBAAyB,GAAA,WAAA,OAAG/C,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAwC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAhB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjC,CAAC;AACF,MAAMiB,yBAAyB,GAAA,WAAA,GAAGnD,mBAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAuB,OAAA,EAAA;IAAA;IAAA9B,KAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjC,CAAC;AACK,0CAA0CoB,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,UAAU,GAAGhD,aAAa,CAAC,CAAC;IAClC,MAAMiD,kBAAkB,GAAGlB,qBAAqB,CAAC,CAAC;IAClD,MAAMmB,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,sBAAsB,GAAGX,yBAAyB,CAAC,CAAC;IAC1D,MAAMY,sBAAsB,GAAGR,yBAAyB,CAAC,CAAC;IAC1D,MAAM,EAAES,UAAU,EAAE5B,QAAQ,EAAE6B,iBAAiB,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAAA,EAAM,GAAGV,KAAK;IACvFA,KAAK,CAACnD,IAAI,CAAC8D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAE,cAAA;IACnEoD,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAAC1C,YAAY,EAAE+C,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAAEL,UAAU,CAACS,IAAI,CAAC,EAAE,AAClG,kBADkG;KACjGhC,QAAQ,IAAI6B,iBAAAA,CAAiB,IAAKN,UAAU,CAACvB,QAAQ,EAAE,CAACA,QAAQ,IAAI6B,iBAAAA,CAAiB,IAAKN,UAAU,CAACtB,oBAAoB,EAAE,mBAAA;IAC5H6B,QAAQ,IAAIN,kBAAkB,CAACQ,IAAI,CAAC,EAAE,2BAAA;IACtCV,KAAK,CAACnD,IAAI,CAAC8D,SAAS,CAAC;IACrBX,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACG,gBAAgB,EAAEqD,sBAAsB,CAAClD,IAAI,EAAE8C,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,CAAC;IACzJ,IAAIX,KAAK,CAAClD,IAAI,EAAE;QACZkD,KAAK,CAAClD,IAAI,CAAC6D,SAAS,OAAGlE,mBAAY,EAACG,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;IAC5M;IACA,IAAIX,KAAK,CAAChD,gBAAgB,EAAE;QACxBgD,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACI,gBAAgB,EAAEqD,sBAAsB,CAACnD,IAAI,EAAEmD,sBAAsB,CAACK,IAAI,CAAC,EAAEV,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,CAAC;IAC3L;QACAhE,+CAAwB,EAACqD,KAAK,CAAC;IAC/B,OAAOA,KAAK;AAChB,CAAC"}
1	+ {"version":3,"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"],"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"],"mappings":"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"}

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js CHANGED Viewed

@@ -241,12 +241,16 @@ 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 = (0, _react.mergeClasses)(compoundButtonClassNames.root, rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, iconOnly && rootIconOnlyStyles[size], state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.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 = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
     }
     (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map CHANGED Viewed

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

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js CHANGED Viewed

@@ -177,11 +177,14 @@ const useMenuButtonStyles_unstable = (state)=>{
     const rootExpandedStyles = useRootExpandedStyles();
     const iconExpandedStyles = useIconExpandedStyles();
     const menuIconStyles = useMenuIconStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
     }
     if (state.menuIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
     }
     (0, _useButtonStylesstyles.useButtonStyles_unstable)({

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected\n },\n primary: {\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n }\n }\n }\n});\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0\n },\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px'\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px'\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px'\n },\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS\n }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n }\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n }\n useButtonStyles_unstable({\n ...state,\n iconPosition: 'before'\n });\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCO,oBAAoB;;;~~IA0FpBsC~~,~~4BAA4B;;;;uBA5FY,~~gBAAgB;uCAC5B,kCAAkC;AACpE,6BAA6B;IAChCrC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,qBAAqB,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAD,MAAA,EAAA;QAAAV,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAK,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAF,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAK,WAAA,EAAA;QAAAH,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA+B7B,CAAC;AACF,MAAMC,qBAAqB,GAAA,WAAA,OAAG3B,eAAA,EAAA;IAAAW,OAAA,EAAA;QAAAS,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA,CAAA;IAAAE,SAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,WAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAQ,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;KAAA;IAAAI,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAwB7B,CAAC;AACF,MAAMC,iBAAiB,GAAA,WAAA,OAAG/B,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAwB,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,MAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,MAAA,EAAA;IAAA;IAAAG,WAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAd,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2BzB,CAAC;AACK,sCAAsCgB,KAAK,IAAG;IACjD,aAAa;IACb,MAAMC,kBAAkB,GAAGpC,qBAAqB,CAAC,CAAC;IAClD,MAAMqC,kBAAkB,GAAGjB,qBAAqB,CAAC,CAAC;IAClD,MAAMkB,cAAc,GAAGd,iBAAiB,CAAC,CAAC;~~IAC1CW~~,KAAK,CAACtC,IAAI,CAAC0C,SAAS,OAAG/C,mBAAY,EAACI,oBAAoB,CAACC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIuC,kBAAkB,CAACnC,IAAI,EAAEkC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIuC,kBAAkB,CAACD,KAAK,CAACK,UAAU,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC0C,SAAS,CAAC;IACjN,IAAIJ,KAAK,CAACrC,IAAI,EAAE;~~QACZqC~~,KAAK,CAACrC,IAAI,CAACyC,SAAS,OAAG/C,mBAAY,EAACI,oBAAoB,CAACE,IAAI,EAAEqC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIwC,kBAAkB,CAACF,KAAK,CAACK,UAAU,CAAC,IAAIH,kBAAkB,CAAChB,YAAY,EAAEc,KAAK,CAACrC,IAAI,CAACyC,SAAS,CAAC;IAChM;IACA,IAAIJ,KAAK,CAACpC,QAAQ,EAAE;~~QAChBoC~~,KAAK,CAACpC,QAAQ,CAACwC,SAAS,OAAG/C,mBAAY,EAACI,oBAAoB,CAACG,QAAQ,EAAEuC,cAAc,CAACrC,IAAI,EAAEqC,cAAc,CAACH,KAAK,CAACM,IAAI,CAAC,EAAE,CAACN,KAAK,CAACO,QAAQ,IAAIJ,cAAc,CAACN,WAAW,EAAEG,KAAK,CAACpC,QAAQ,CAACwC,SAAS,CAAC;IACpM;QACA5C,+CAAwB,EAAC;QACrB,GAAGwC,KAAK;QACRQ,YAAY,EAAE;IAClB,CAAC,CAAC;IACF,OAAOR,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected\n },\n primary: {\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n }\n }\n }\n});\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0\n },\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px'\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px'\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px'\n },\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS\n }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n }\n if (state.menuIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n }\n useButtonStyles_unstable({\n ...state,\n iconPosition: 'before'\n });\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js CHANGED Viewed

@@ -115,11 +115,14 @@ const useMenuButtonStyles_unstable = (state)=>{
     const rootExpandedStyles = useRootExpandedStyles();
     const iconExpandedStyles = useIconExpandedStyles();
     const menuIconStyles = useMenuIconStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
     }
     if (state.menuIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
     }
     (0, _useButtonStylesstyles.useButtonStyles_unstable)({

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n /* The primary styles are exactly the same as the base styles. */\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n },\n },\n },\n});\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n 'use no memo';\n\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"AAAA;;;;;;;;;;;;IASaO,oBAAAA;;;gCAkGAwC;eAAAA;;;4BAzG6C,wBAAwB;4BAC3D,wBAAwB;uBAEM,iBAAiB;uCAC7B,mCAAmC;AAGrE,6BAA8D;IACnEvC,MAAM;IACNC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,4BAAwBP,iBAAAA,EAAW;IACvCQ,MAAM;QACJ,CAAC,CAAC,GAAG,EAAEZ,+BAAAA,EAAqB,CAAC,EAAE;YAC7Ba,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEZ,gCAAAA,EAAsB,CAAC,EAAE;YAC9BY,SAAS;QACX;IACF;IAEA,wBAAwB;IACxBC,SAAS;QACP,GAAGT,iBAAAA,CAAWU,WAAW,CAACb,kBAAAA,CAAOc,2BAA2B,CAAC;QAC7D,GAAGX,iBAAAA,CAAWY,WAAW,CAACf,kBAAAA,CAAOgB,kBAAkB,CAAC;QACpDC,OAAOjB,kBAAAA,CAAOkB,+BAA+B;IAC/C;IACAC,SAAS;QACPC,iBAAiBpB,kBAAAA,CAAOqB,4BAA4B;IACtD;IACAC,WAAW;QACTF,iBAAiBpB,kBAAAA,CAAOuB,+BAA+B;QACvD,GAAGpB,iBAAAA,CAAWU,WAAW,CAACb,kBAAAA,CAAOc,2BAA2B,CAAC;QAC7DG,OAAOjB,kBAAAA,CAAOkB,+BAA+B;IAC/C;IACAM,QAAQ;QACNJ,iBAAiBpB,kBAAAA,CAAOyB,6BAA6B;QACrDR,OAAOjB,kBAAAA,CAAO0B,+BAA+B;IAC/C;IACAC,aAAa;QACXP,iBAAiBpB,kBAAAA,CAAO4B,kCAAkC;QAC1DX,OAAOjB,kBAAAA,CAAO6B,oCAAoC;IACpD;AACF;AAEA,MAAMC,4BAAwB5B,iBAAAA,EAAW;IACvC,wBAAwB;IACxBU,SAAS;QACPK,OAAOjB,kBAAAA,CAAOkB,+BAA+B;IAC/C;IACAC,SAAS,CAET;IACAG,WAAW;QACTL,OAAOjB,kBAAAA,CAAOkB,+BAA+B;IAC/C;IACAM,QAAQ;QACNP,OAAOjB,kBAAAA,CAAO6B,oCAAoC;IACpD;IACAF,aAAa;QACXV,OAAOjB,kBAAAA,CAAO6B,oCAAoC;IACpD;IACAE,cAAc;QACZ,uBAAuB;QACvB,kCAAkC;YAChC,UAAU;gBACRd,OAAO;YACT;QACF;IACF;AACF;AAEA,MAAMe,oBAAoB9B,qBAAAA,EAAW;IACnCQ,MAAM;QACJuB,YAAY;IACd;IAEA,kBAAkB;IAClBC,OAAO;QACLC,UAAU;QACVC,QAAQ;QACRH,YAAYjC,kBAAAA,CAAOqC,iBAAiB;QACpCC,OAAO;IACT;IACAC,QAAQ;QACNJ,UAAU;QACVC,QAAQ;QACRH,YAAYjC,kBAAAA,CAAOqC,iBAAiB;QACpCC,OAAO;IACT;IACAE,OAAO;QACLL,UAAU;QACVC,QAAQ;QACRH,YAAYjC,kBAAAA,CAAOyC,iBAAiB;QACpCH,OAAO;IACT;IAEA,gBAAgB;IAChBI,aAAa;QACXC,YAAY3C,kBAAAA,CAAO4C,mBAAmB;IACxC;AACF;AAEO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,qBAAqBtC;IAC3B,MAAMuC,qBAAqBlB;IAC3B,MAAMmB,iBAAiBjB;~~IAEvBc~~,MAAMxC,IAAI,CAAC4C,SAAS,OAAGjD,mBAAAA,EACrBI,qBAAqBC,IAAI,EACzBwC,MAAMxC,IAAI,CAAC,gBAAgB,IAAIyC,mBAAmBrC,IAAI,EACtDoC,MAAMxC,IAAI,CAAC,gBAAgB,IAAIyC,kBAAkB,CAACD,MAAMK,UAAU,CAAC,EACnEL,MAAMxC,IAAI,CAAC4C,SAAS;IAGtB,IAAIJ,MAAMvC,IAAI,EAAE;~~QACduC~~,MAAMvC,IAAI,CAAC2C,SAAS,OAAGjD,mBAAAA,EACrBI,qBAAqBE,IAAI,EACzBuC,MAAMxC,IAAI,CAAC,gBAAgB,IAAI0C,kBAAkB,CAACF,MAAMK,UAAU,CAAC,IAAIH,mBAAmBjB,YAAY,EACtGe,MAAMvC,IAAI,CAAC2C,SAAS;IAExB;IAEA,IAAIJ,MAAMtC,QAAQ,EAAE;~~QAClBsC~~,MAAMtC,QAAQ,CAAC0C,SAAS,~~OAAGjD~~,~~mBAAAA~~,EACzBI,qBAAqBG,QAAQ,EAC7ByC,eAAevC,IAAI,EACnBuC,cAAc,CAACH,MAAMM,IAAI,CAAC,EAC1B,CAACN,MAAMO,QAAQ,IAAIJ,eAAeP,WAAW,EAC7CI,MAAMtC,QAAQ,CAAC0C,SAAS;IAE5B;QAEA9C,+CAAAA,EAAyB;QAAE,GAAG0C,KAAK;QAAEQ,cAAc;IAAS;IAE5D,OAAOR;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n /* The primary styles are exactly the same as the base styles. */\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n },\n },\n },\n});\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n 'use no memo';\n\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}

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

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

package/lib-commonjs/components/SplitButton/useSplitButton.js CHANGED Viewed

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useSplitButton_unstable", {
         return useSplitButton_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _Button = require("../Button/Button");
 const _MenuButton = require("../MenuButton/MenuButton");

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n ...rest\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["~~React","~~useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":";;;;+~~BAWaK;;;;;;;iEAXU~~,~~QAAQ;gCACH,~~4BAA4B;wBACjC,mBAAmB;4BACf,2BAA2B;AAQ/C,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,aAASnB,qBAAAA,EAAM;IAErB,MAAMoB,sBAAsBnB,oBAAAA,CAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB,sBAAAA;IACf;IACA,MAAMsB,+BAA+BxB,oBAAAA,CAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV,sBAAAA;YAAYY,qBAAqBb,cAAAA;QAAO;QAC/E0B,MAAM3B,oBAAAA,CAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n ...rest\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":";;;;+BAWaI;;;;;;gCAVe,4BAA4B;wBACjC,mBAAmB;4BACf,2BAA2B;AAQ/C,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,aAASnB,qBAAAA,EAAM;IAErB,MAAMoB,sBAAsBnB,oBAAAA,CAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB,sBAAAA;IACf;IACA,MAAMsB,+BAA+BxB,oBAAAA,CAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV,sBAAAA;YAAYY,qBAAqBb,cAAAA;QAAO;QAC/E0B,MAAM3B,oBAAAA,CAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js CHANGED Viewed

@@ -258,11 +258,14 @@ const useSplitButtonStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const focusStyles = useFocusStyles();
     const { appearance, disabled, disabledFocusable } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
     if (state.menuButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
     }
     if (state.primaryActionButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
     }
     return state;

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
1	+ {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js CHANGED Viewed

@@ -164,11 +164,14 @@ const useSplitButtonStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const focusStyles = useFocusStyles();
     const { appearance, disabled, disabledFocusable } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
     if (state.menuButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
     }
     if (state.primaryActionButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
     }
     return state;

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

package/lib-commonjs/components/ToggleButton/useToggleButton.js CHANGED Viewed

@@ -17,8 +17,6 @@ _export(exports, {
         return useToggleButton_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useToggleState = require("../../utils/useToggleState");
 const _useButton = require("../Button/useButton");
 const useToggleButton_unstable = (props, ref)=>{

package/lib-commonjs/components/ToggleButton/useToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n /\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToggleButtonState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButton_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n\n/\n Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n \n @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonProps,\n ref?: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["~~React","~~useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;;;;;;;;;;;;~~IA6BaY~~,4BAAAA;;;4BAhBAR~~;;;;;iEAXU~~,~~QAAQ;gCACA,~~6BAA6B;2BACD,sBAAsB;AAS1E,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcT,6BAAAA,EAAmBQ,aAAaJ;IAEpD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE;AAQK,qCAAqC,CAC1CN,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcR,iCAAAA,EAAuBO,aAAaJ;IAExD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n /\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToggleButtonState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButton_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n\n/\n Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n \n @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonProps,\n ref?: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;;;;;;;;;;;;IA6BaW,4BAAAA;;;4BAhBAR;;;;gCAVkB,6BAA6B;2BACD,sBAAsB;AAS1E,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcT,6BAAAA,EAAmBQ,aAAaJ;IAEpD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE;AAQK,qCAAqC,CAC1CN,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcR,iCAAAA,EAAuBO,aAAaJ;IAExD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE"}

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js CHANGED Viewed

@@ -902,6 +902,7 @@ const useToggleButtonStyles_unstable = (state)=>{
     const iconCheckedStyles = useIconCheckedStyles();
     const primaryHighContrastStyles = usePrimaryHighContrastStyles();
     const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, // Primary high contrast styles
     appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
     checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
@@ -909,6 +910,7 @@ const useToggleButtonStyles_unstable = (state)=>{
     (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
     state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
     }
     (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);