@fluentui/react-button 9.2.0 → 9.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. package/CHANGELOG.json +55 -1
  2. package/CHANGELOG.md +24 -2
  3. package/lib/components/Button/useButtonStyles.js +103 -24
  4. package/lib/components/Button/useButtonStyles.js.map +1 -1
  5. package/lib/components/CompoundButton/useCompoundButtonStyles.js +4 -1
  6. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  7. package/lib/components/SplitButton/useSplitButtonStyles.js +11 -2
  8. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  9. package/lib/components/ToggleButton/useToggleButtonStyles.js +59 -0
  10. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  11. package/lib-amd/components/Button/useButtonStyles.js +20 -9
  12. package/lib-amd/components/Button/useButtonStyles.js.map +1 -1
  13. package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js +42 -37
  14. package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  15. package/lib-amd/components/SplitButton/useSplitButtonStyles.js +50 -35
  16. package/lib-amd/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  17. package/lib-amd/components/ToggleButton/useToggleButtonStyles.js +13 -0
  18. package/lib-amd/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  19. package/lib-commonjs/components/Button/useButtonStyles.js +103 -24
  20. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  21. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +4 -1
  22. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  23. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +11 -2
  24. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  25. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +59 -0
  26. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  27. package/package.json +4 -4
package/lib-amd/components/SplitButton/useSplitButtonStyles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  define(["require", "exports", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme"], function (require, exports, react_1, react_tabster_1, react_theme_1) {
2
2
  "use strict";
3
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
3
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
5
  exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = void 0;
6
6
  exports.splitButtonClassNames = {
@@ -56,26 +56,26 @@ define(["require", "exports", "@griffel/react", "@fluentui/react-tabster", "@flu
56
56
  borderRightColor: react_theme_1.tokens.colorNeutralForegroundOnBrand,
57
57
  },
58
58
  _d),
59
+ _b['@media (forced-colors: active)'] = (_e = {},
60
+ _e["& ." + exports.splitButtonClassNames.primaryActionButton] = {
61
+ borderRightColor: 'HighlightText',
62
+ },
63
+ _e[':hover'] = (_f = {},
64
+ _f["& ." + exports.splitButtonClassNames.primaryActionButton] = {
65
+ borderRightColor: 'Highlight',
66
+ },
67
+ _f),
68
+ _e[':hover:active'] = (_g = {},
69
+ _g["& ." + exports.splitButtonClassNames.primaryActionButton] = {
70
+ borderRightColor: 'Highlight',
71
+ },
72
+ _g),
73
+ _e),
59
74
  _b),
60
75
  secondary: {
61
76
  /* The secondary styles are exactly the same as the base styles. */
62
77
  },
63
- subtle: (_e = {},
64
- _e["& ." + exports.splitButtonClassNames.primaryActionButton] = {
65
- borderRightColor: react_theme_1.tokens.colorNeutralStroke1,
66
- },
67
- _e[':hover'] = (_f = {},
68
- _f["& ." + exports.splitButtonClassNames.primaryActionButton] = {
69
- borderRightColor: react_theme_1.tokens.colorNeutralStroke1Hover,
70
- },
71
- _f),
72
- _e[':hover:active'] = (_g = {},
73
- _g["& ." + exports.splitButtonClassNames.primaryActionButton] = {
74
- borderRightColor: react_theme_1.tokens.colorNeutralStroke1Pressed,
75
- },
76
- _g),
77
- _e),
78
- transparent: (_h = {},
78
+ subtle: (_h = {},
79
79
  _h["& ." + exports.splitButtonClassNames.primaryActionButton] = {
80
80
  borderRightColor: react_theme_1.tokens.colorNeutralStroke1,
81
81
  },
@@ -90,43 +90,58 @@ define(["require", "exports", "@griffel/react", "@fluentui/react-tabster", "@flu
90
90
  },
91
91
  _k),
92
92
  _h),
93
- // Shape variations
94
- circular: {},
95
- rounded: {},
96
- square: {},
97
- // Disabled styles
98
- disabled: (_l = {},
93
+ transparent: (_l = {},
99
94
  _l["& ." + exports.splitButtonClassNames.primaryActionButton] = {
100
- borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
95
+ borderRightColor: react_theme_1.tokens.colorNeutralStroke1,
101
96
  },
102
97
  _l[':hover'] = (_m = {},
103
98
  _m["& ." + exports.splitButtonClassNames.primaryActionButton] = {
104
- borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
99
+ borderRightColor: react_theme_1.tokens.colorNeutralStroke1Hover,
105
100
  },
106
101
  _m),
107
102
  _l[':hover:active'] = (_o = {},
108
103
  _o["& ." + exports.splitButtonClassNames.primaryActionButton] = {
109
- borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
104
+ borderRightColor: react_theme_1.tokens.colorNeutralStroke1Pressed,
110
105
  },
111
106
  _o),
112
107
  _l),
108
+ // Shape variations
109
+ circular: {},
110
+ rounded: {},
111
+ square: {},
112
+ // Disabled styles
113
+ disabled: (_p = {},
114
+ _p["& ." + exports.splitButtonClassNames.primaryActionButton] = {
115
+ borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
116
+ },
117
+ _p[':hover'] = (_q = {},
118
+ _q["& ." + exports.splitButtonClassNames.primaryActionButton] = {
119
+ borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
120
+ },
121
+ _q),
122
+ _p[':hover:active'] = (_r = {},
123
+ _r["& ." + exports.splitButtonClassNames.primaryActionButton] = {
124
+ borderRightColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
125
+ },
126
+ _r),
127
+ _p),
113
128
  // Disabled high contrast styles
114
129
  disabledHighContrast: {
115
- '@media (forced-colors: active)': (_p = {},
116
- _p["& ." + exports.splitButtonClassNames.primaryActionButton] = {
130
+ '@media (forced-colors: active)': (_s = {},
131
+ _s["& ." + exports.splitButtonClassNames.primaryActionButton] = {
117
132
  borderRightColor: 'GrayText',
118
133
  },
119
- _p[':hover'] = (_q = {},
120
- _q["& ." + exports.splitButtonClassNames.primaryActionButton] = {
134
+ _s[':hover'] = (_t = {},
135
+ _t["& ." + exports.splitButtonClassNames.primaryActionButton] = {
121
136
  borderRightColor: 'GrayText',
122
137
  },
123
- _q),
124
- _p[':hover:active'] = (_r = {},
125
- _r["& ." + exports.splitButtonClassNames.primaryActionButton] = {
138
+ _t),
139
+ _s[':hover:active'] = (_u = {},
140
+ _u["& ." + exports.splitButtonClassNames.primaryActionButton] = {
126
141
  borderRightColor: 'GrayText',
127
142
  },
128
- _r),
129
- _p),
143
+ _u),
144
+ _s),
130
145
  },
131
146
  });
132
147
  var useSplitButtonStyles_unstable = function (state) {
package/lib-amd/components/SplitButton/useSplitButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSplitButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"file":"useSplitButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"]}
package/lib-amd/components/ToggleButton/useToggleButtonStyles.js CHANGED
@@ -51,12 +51,25 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
51
51
  color: react_theme_1.tokens.colorNeutralForeground2BrandSelected,
52
52
  },
53
53
  });
54
+ var usePrimaryHighContrastStyles = react_1.makeStyles({
55
+ // Do not use primary variant high contrast styles for toggle buttons
56
+ // otherwise there isn't enough difference between on/off states
57
+ base: {
58
+ '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('ButtonBorder')), { color: 'ButtonText', forcedColorAdjust: 'auto' }),
59
+ },
60
+ disabled: {
61
+ '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
62
+ },
63
+ });
54
64
  var useToggleButtonStyles_unstable = function (state) {
55
65
  var rootCheckedStyles = useRootCheckedStyles();
56
66
  var rootDisabledStyles = useRootDisabledStyles();
57
67
  var iconCheckedStyles = useIconCheckedStyles();
68
+ var primaryHighContrastStyles = usePrimaryHighContrastStyles();
58
69
  var appearance = state.appearance, checked = state.checked, disabled = state.disabled, disabledFocusable = state.disabledFocusable;
59
70
  state.root.className = react_1.mergeClasses(exports.toggleButtonClassNames.root,
71
+ // Primary high contrast styles
72
+ appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
60
73
  // Checked styles
61
74
  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
62
75
  // Disabled styles
package/lib-amd/components/ToggleButton/useToggleButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"]}
1
+ {"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"]}
package/lib-commonjs/components/Button/useButtonStyles.js CHANGED
@@ -14,7 +14,10 @@ exports.buttonClassNames = {
14
14
  };
15
15
  const iconSpacingVar = '--fui-Button__icon--spacing';
16
16
  const buttonSpacingSmall = '3px';
17
+ const buttonSpacingSmallWithIcon = '1px';
17
18
  const buttonSpacingMedium = '5px';
19
+ const buttonSpacingLarge = '8px';
20
+ const buttonSpacingLargeWithIcon = '7px';
18
21
  const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("rsawnvh", "r1eny37h", [".rsawnvh{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".rsawnvh:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".rsawnvh:hover .fui-Icon-filled{display:inline;}", ".rsawnvh:hover .fui-Icon-regular{display:none;}", ".rsawnvh:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".rsawnvh:hover:active .fui-Icon-filled{display:inline;}", ".rsawnvh:hover:active .fui-Icon-regular{display:none;}", "@media screen and (prefers-reduced-motion: reduce){.rsawnvh{transition-duration:0.01ms;}}", "@media (forced-colors: active){.rsawnvh:focus{border-color:ButtonText;}.rsawnvh:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.rsawnvh:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", ".rsawnvh:focus{outline-style:none;}", ".rsawnvh:focus-visible{outline-style:none;}", ".rsawnvh[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}", ".r1eny37h{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".r1eny37h:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".r1eny37h:hover .fui-Icon-filled{display:inline;}", ".r1eny37h:hover .fui-Icon-regular{display:none;}", ".r1eny37h:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".r1eny37h:hover:active .fui-Icon-filled{display:inline;}", ".r1eny37h:hover:active .fui-Icon-regular{display:none;}", "@media screen and (prefers-reduced-motion: reduce){.r1eny37h{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1eny37h:focus{border-color:ButtonText;}.r1eny37h:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.r1eny37h:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", ".r1eny37h:focus{outline-style:none;}", ".r1eny37h:focus-visible{outline-style:none;}", ".r1eny37h[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}"]);
19
22
  const useIconBaseClassName = /*#__PURE__*/react_1.__resetStyles("rywnvv2", null, [".rywnvv2{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"]);
20
23
  const useRootStyles = /*#__PURE__*/react_1.__styles({
@@ -41,7 +44,26 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
41
44
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
42
45
  B9zn80p: "f16h9ulv",
43
46
  Bpld233: ["fx2bmrt", "fs4ktlq"],
44
- B2d53fq: "f1d6v5y2"
47
+ B2d53fq: "f1d6v5y2",
48
+ Bsw6fvg: "f1rirnrt",
49
+ Bjwas2f: "f1uu00uk",
50
+ Bn1d65q: ["fkvaka8", "f9a0qzu"],
51
+ Bxeuatn: "f1ux7til",
52
+ n51gp8: ["f9a0qzu", "fkvaka8"],
53
+ Bbusuzp: "f1lkg8j3",
54
+ ycbfsm: "fkc42ay",
55
+ Bqrx1nm: "fq7113v",
56
+ pgvf35: "ff1wgvm",
57
+ Bh7lczh: ["fiob0tu", "f1x4h75k"],
58
+ dpv3f4: "f1j6scgf",
59
+ Bpnjhaq: ["f1x4h75k", "fiob0tu"],
60
+ ze5xyy: "f4xjyn1",
61
+ g2kj27: "fbgcvur",
62
+ Bf756sw: "f1ks1yx8",
63
+ Bow2dr7: ["f1o6qegi", "fmxjhhp"],
64
+ Bvhedfk: "fcnxywj",
65
+ Gye4lf: ["fmxjhhp", "f1o6qegi"],
66
+ pc6evw: "f9ddjv3"
45
67
  },
46
68
  secondary: {},
47
69
  subtle: {
@@ -100,11 +122,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
100
122
  Btl43ni: ["f13av6d4", "f3fg2lr"]
101
123
  },
102
124
  small: {
125
+ Bf4jedk: "fh7ncta",
103
126
  z8tnut: "f1khb0e9",
104
127
  z189sj: ["f1vdfbxk", "f1f5gg8d"],
105
128
  Byoj8tv: "f1jnq6q7",
106
129
  uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
107
- Bf4jedk: "fh7ncta",
108
130
  Bbmb7ep: ["fclariu", "fyjfh2l"],
109
131
  Beyfa6y: ["fyjfh2l", "fclariu"],
110
132
  B7oj6ja: ["f11xeu6h", "f1knf8zw"],
@@ -113,13 +135,17 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
113
135
  Bhrd7zp: "figsok6",
114
136
  Bg96gwp: "fwrc4pm"
115
137
  },
138
+ smallWithIcon: {
139
+ Byoj8tv: "f1brlhvm",
140
+ z8tnut: "f1sl3k7w"
141
+ },
116
142
  medium: {},
117
143
  large: {
118
- z8tnut: "f1kwiid1",
144
+ Bf4jedk: "f14es27b",
145
+ z8tnut: "fp9bwmr",
119
146
  z189sj: ["fjodcmx", "fhx4nu"],
120
- Byoj8tv: "f5b47ha",
147
+ Byoj8tv: "f150uoa4",
121
148
  uwmqm3: ["fhx4nu", "fjodcmx"],
122
- Bf4jedk: "f14es27b",
123
149
  Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
124
150
  Beyfa6y: ["f16jpd5f", "f1aa9q02"],
125
151
  B7oj6ja: ["f1jar5jt", "fyu767a"],
@@ -127,10 +153,53 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
127
153
  Be2twd7: "fod5ikn",
128
154
  Bhrd7zp: "fl43uef",
129
155
  Bg96gwp: "faaz57k"
156
+ },
157
+ largeWithIcon: {
158
+ Byoj8tv: "fy7v416",
159
+ z8tnut: "f1a1bwwz"
130
160
  }
131
161
  }, {
132
- d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fh7ncta{min-width:64px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f14es27b{min-width:96px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
133
- h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"]
162
+ d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fh7ncta{min-width:64px;}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", ".fp9bwmr{padding-top:8px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f150uoa4{padding-bottom:8px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
163
+ h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
164
+ m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
165
+ m: "(forced-colors: active)"
166
+ }], ["@media (forced-colors: active){.f1uu00uk{border-top-color:HighlightText;}}", {
167
+ m: "(forced-colors: active)"
168
+ }], ["@media (forced-colors: active){.fkvaka8{border-right-color:HighlightText;}.f9a0qzu{border-left-color:HighlightText;}}", {
169
+ m: "(forced-colors: active)"
170
+ }], ["@media (forced-colors: active){.f1ux7til{border-bottom-color:HighlightText;}}", {
171
+ m: "(forced-colors: active)"
172
+ }], ["@media (forced-colors: active){.f9a0qzu{border-left-color:HighlightText;}.fkvaka8{border-right-color:HighlightText;}}", {
173
+ m: "(forced-colors: active)"
174
+ }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
175
+ m: "(forced-colors: active)"
176
+ }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
177
+ m: "(forced-colors: active)"
178
+ }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
179
+ m: "(forced-colors: active)"
180
+ }], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
181
+ m: "(forced-colors: active)"
182
+ }], ["@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", {
183
+ m: "(forced-colors: active)"
184
+ }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
185
+ m: "(forced-colors: active)"
186
+ }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
187
+ m: "(forced-colors: active)"
188
+ }], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
189
+ m: "(forced-colors: active)"
190
+ }], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
191
+ m: "(forced-colors: active)"
192
+ }], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
193
+ m: "(forced-colors: active)"
194
+ }], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
195
+ m: "(forced-colors: active)"
196
+ }], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
197
+ m: "(forced-colors: active)"
198
+ }], ["@media (forced-colors: active){.fmxjhhp:hover:active{border-left-color:Highlight;}.f1o6qegi:hover:active{border-right-color:Highlight;}}", {
199
+ m: "(forced-colors: active)"
200
+ }], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
201
+ m: "(forced-colors: active)"
202
+ }]]
134
203
  });
135
204
  const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
136
205
  base: {
@@ -161,6 +230,7 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
161
230
  vm6p8p: "f1q1lw4e"
162
231
  },
163
232
  highContrast: {
233
+ Bsw6fvg: "f4lkoma",
164
234
  Bjwas2f: "fg455y9",
165
235
  Bn1d65q: ["f1rvyvqg", "f14g86mu"],
166
236
  Bxeuatn: "f1cwzwz",
@@ -170,11 +240,13 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
170
240
  gdbnj: ["f1lr3nhc", "f1mbxvi6"],
171
241
  mxns5l: "fn5gmvv",
172
242
  o3nasb: ["f1mbxvi6", "f1lr3nhc"],
243
+ Bqrx1nm: "f1vmkb5g",
173
244
  pgvf35: "f53ppgq",
174
245
  Bh7lczh: ["f1663y11", "f80fkiy"],
175
246
  dpv3f4: "f18v5270",
176
247
  Bpnjhaq: ["f80fkiy", "f1663y11"],
177
248
  ze5xyy: "f1kc2mi9",
249
+ g2kj27: "f1y0svfh",
178
250
  Bf756sw: "fihuait",
179
251
  Bow2dr7: ["fnxhupq", "fyd6l6x"],
180
252
  Bvhedfk: "fx507ft",
@@ -238,7 +310,9 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
238
310
  }, {
239
311
  d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
240
312
  h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}"],
241
- m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
313
+ m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
314
+ m: "(forced-colors: active)"
315
+ }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
242
316
  m: "(forced-colors: active)"
243
317
  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
244
318
  m: "(forced-colors: active)"
@@ -256,6 +330,8 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
256
330
  m: "(forced-colors: active)"
257
331
  }], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
258
332
  m: "(forced-colors: active)"
333
+ }], ["@media (forced-colors: active){.f1vmkb5g:hover{background-color:ButtonFace;}}", {
334
+ m: "(forced-colors: active)"
259
335
  }], ["@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", {
260
336
  m: "(forced-colors: active)"
261
337
  }], ["@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", {
@@ -266,6 +342,8 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
266
342
  m: "(forced-colors: active)"
267
343
  }], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
268
344
  m: "(forced-colors: active)"
345
+ }], ["@media (forced-colors: active){.f1y0svfh:hover:active{background-color:ButtonFace;}}", {
346
+ m: "(forced-colors: active)"
269
347
  }], ["@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", {
270
348
  m: "(forced-colors: active)"
271
349
  }], ["@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", {
@@ -329,31 +407,31 @@ const useRootFocusStyles = /*#__PURE__*/react_1.__styles({
329
407
  });
330
408
  const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
331
409
  small: {
332
- z8tnut: "f1x4af0m",
333
- z189sj: ["f7x41pl", "fruq291"],
334
- Byoj8tv: "fd55psn",
335
- uwmqm3: ["fruq291", "f7x41pl"],
336
- Bf4jedk: "f107v6xj",
337
- B2u0y6b: "f17iyk3w"
410
+ z8tnut: "f1sl3k7w",
411
+ z189sj: ["f136y8j8", "f10xn8zz"],
412
+ Byoj8tv: "f1brlhvm",
413
+ uwmqm3: ["f10xn8zz", "f136y8j8"],
414
+ Bf4jedk: "f17fgpbq",
415
+ B2u0y6b: "f1jt17bm"
338
416
  },
339
417
  medium: {
340
- z8tnut: "f1x4af0m",
341
- z189sj: ["f7x41pl", "fruq291"],
342
- Byoj8tv: "fd55psn",
343
- uwmqm3: ["fruq291", "f7x41pl"],
418
+ z8tnut: "f1sbtcvk",
419
+ z189sj: ["fwiuce9", "f15vdbe4"],
420
+ Byoj8tv: "fdghr9",
421
+ uwmqm3: ["f15vdbe4", "fwiuce9"],
344
422
  Bf4jedk: "fwbmr0d",
345
423
  B2u0y6b: "f44c6la"
346
424
  },
347
425
  large: {
348
- z8tnut: "f16k8034",
349
- z189sj: ["fdw0yi8", "fk8j09s"],
350
- Byoj8tv: "f1angvds",
351
- uwmqm3: ["fk8j09s", "fdw0yi8"],
426
+ z8tnut: "f1a1bwwz",
427
+ z189sj: ["f18k1jr3", "f1rtp3s9"],
428
+ Byoj8tv: "fy7v416",
429
+ uwmqm3: ["f1rtp3s9", "f18k1jr3"],
352
430
  Bf4jedk: "f12clzc2",
353
431
  B2u0y6b: "fjy1crr"
354
432
  }
355
433
  }, {
356
- d: [".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f16k8034{padding-top:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
434
+ d: [".f1sl3k7w{padding-top:1px;}", ".f136y8j8{padding-right:1px;}", ".f10xn8zz{padding-left:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f17fgpbq{min-width:24px;}", ".f1jt17bm{max-width:24px;}", ".f1sbtcvk{padding-top:5px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".fdghr9{padding-bottom:5px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1a1bwwz{padding-top:7px;}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fy7v416{padding-bottom:7px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
357
435
  });
358
436
  const useIconStyles = /*#__PURE__*/react_1.__styles({
359
437
  small: {
@@ -390,12 +468,13 @@ const useButtonStyles_unstable = state => {
390
468
  appearance,
391
469
  disabled,
392
470
  disabledFocusable,
471
+ icon,
393
472
  iconOnly,
394
473
  iconPosition,
395
474
  shape,
396
475
  size
397
476
  } = state;
398
- state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape],
477
+ state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
399
478
  // Disabled styles
400
479
  (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
401
480
  // Focus styles