@fluentui/react-button 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240822-0407.1

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 (22) hide show
  1. package/CHANGELOG.md +33 -13
  2. package/lib/components/Button/useButtonStyles.styles.js +79 -79
  3. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  4. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +40 -40
  5. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  6. package/lib/components/MenuButton/useMenuButtonStyles.styles.js +19 -19
  7. package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  8. package/lib/components/SplitButton/useSplitButtonStyles.styles.js +14 -14
  9. package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  10. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +45 -45
  11. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  12. package/lib-commonjs/components/Button/useButtonStyles.styles.js +120 -130
  13. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  14. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +55 -64
  15. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  16. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +30 -34
  17. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  18. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +42 -48
  19. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  20. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +74 -80
  21. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  22. package/package.json +10 -10
@@ -49,13 +49,13 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
49
49
  "f1efpmoh",
50
50
  "f130t4y6"
51
51
  ],
52
- sj55zd: "fayvfdb"
52
+ sj55zd: "f14nttnl"
53
53
  },
54
54
  primary: {
55
- De3pzq: "fdxujar"
55
+ De3pzq: "f8w4g0q"
56
56
  },
57
57
  secondary: {
58
- De3pzq: "f1nuz927",
58
+ De3pzq: "f1nfm20t",
59
59
  g2u3we: "f1ly1fcm",
60
60
  h3c5rm: [
61
61
  "fi8bssc",
@@ -66,15 +66,15 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
66
66
  "fj6btzu",
67
67
  "fi8bssc"
68
68
  ],
69
- sj55zd: "f17l1jdj"
69
+ sj55zd: "f14nttnl"
70
70
  },
71
71
  subtle: {
72
- De3pzq: "fz894wi",
73
- sj55zd: "f1jcitqj"
72
+ De3pzq: "fq5gl1p",
73
+ sj55zd: "f1eryozh"
74
74
  },
75
75
  transparent: {
76
- De3pzq: "f97oqex",
77
- sj55zd: "f4qlxbq"
76
+ De3pzq: "f1q9pm1r",
77
+ sj55zd: "f1qj7y59"
78
78
  }
79
79
  }, {
80
80
  d: [
@@ -88,39 +88,36 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
88
88
  ".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
89
89
  ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
90
90
  ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
91
- ".fayvfdb{color:var(--ctrl-token-MenuButton-61, var(--semantic-token-MenuButton-62, var(--colorNeutralForeground1Selected)));}",
92
- ".fdxujar{background-color:var(--ctrl-token-MenuButton-63, var(--semantic-token-MenuButton-64, var(--colorBrandBackgroundSelected)));}",
93
- ".f1nuz927{background-color:var(--ctrl-token-MenuButton-65, var(--semantic-token-MenuButton-66, var(--colorNeutralBackground1Selected)));}",
94
- ".f17l1jdj{color:var(--ctrl-token-MenuButton-67, var(--semantic-token-MenuButton-68, var(--colorNeutralForeground1Selected)));}",
95
- ".fz894wi{background-color:var(--ctrl-token-MenuButton-69, var(--semantic-token-MenuButton-70, var(--colorSubtleBackgroundSelected)));}",
96
- ".f1jcitqj{color:var(--ctrl-token-MenuButton-71, var(--semantic-token-MenuButton-72, var(--colorNeutralForeground2Selected)));}",
97
- ".f97oqex{background-color:var(--ctrl-token-MenuButton-73, var(--semantic-token-MenuButton-74, var(--colorTransparentBackgroundSelected)));}",
98
- ".f4qlxbq{color:var(--ctrl-token-MenuButton-75, var(--semantic-token-MenuButton-76, var(--colorNeutralForeground2BrandSelected)));}"
91
+ ".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
92
+ ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}",
93
+ ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
94
+ ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
95
+ ".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
96
+ ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
97
+ ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
99
98
  ]
100
99
  });
101
100
  const useIconExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
102
101
  outline: {
103
- sj55zd: "f17qtati"
102
+ sj55zd: "f14nttnl"
104
103
  },
105
104
  primary: {},
106
105
  secondary: {
107
- sj55zd: "f15anx2e"
106
+ sj55zd: "f14nttnl"
108
107
  },
109
108
  subtle: {
110
- sj55zd: "fqg5xc"
109
+ sj55zd: "f1qj7y59"
111
110
  },
112
111
  transparent: {
113
- sj55zd: "f15zfei2"
112
+ sj55zd: "f1qj7y59"
114
113
  },
115
114
  highContrast: {
116
115
  ze5xyy: "fqyhrn0"
117
116
  }
118
117
  }, {
119
118
  d: [
120
- ".f17qtati{color:var(--ctrl-token-MenuButton-77, var(--semantic-token-MenuButton-78, var(--colorNeutralForeground1Selected)));}",
121
- ".f15anx2e{color:var(--ctrl-token-MenuButton-79, var(--semantic-token-MenuButton-80, var(--colorNeutralForeground1Selected)));}",
122
- ".fqg5xc{color:var(--ctrl-token-MenuButton-81, var(--semantic-token-MenuButton-82, var(--colorNeutralForeground2BrandSelected)));}",
123
- ".f15zfei2{color:var(--ctrl-token-MenuButton-83, var(--semantic-token-MenuButton-84, var(--colorNeutralForeground2BrandSelected)));}"
119
+ ".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
120
+ ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
124
121
  ],
125
122
  m: [
126
123
  [
@@ -138,25 +135,25 @@ const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
138
135
  small: {
139
136
  Be2twd7: "f1ugzwwg",
140
137
  Bqenvij: "fvblgha",
141
- Bg96gwp: "f1qvz09l",
138
+ Bg96gwp: "fwrc4pm",
142
139
  a9b677: "frx94fk"
143
140
  },
144
141
  medium: {
145
142
  Be2twd7: "f1ugzwwg",
146
143
  Bqenvij: "fvblgha",
147
- Bg96gwp: "fbr3bm5",
144
+ Bg96gwp: "fwrc4pm",
148
145
  a9b677: "frx94fk"
149
146
  },
150
147
  large: {
151
148
  Be2twd7: "f4ybsrx",
152
149
  Bqenvij: "fd461yt",
153
- Bg96gwp: "ft0ajt3",
150
+ Bg96gwp: "faaz57k",
154
151
  a9b677: "fjw5fx7"
155
152
  },
156
153
  notIconOnly: {
157
154
  Frg6f3: [
158
- "f11x6m6q",
159
- "fr8gt1"
155
+ "fbyavb5",
156
+ "fm0x6gh"
160
157
  ]
161
158
  }
162
159
  }, {
@@ -164,15 +161,14 @@ const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
164
161
  ".fez10in{line-height:0;}",
165
162
  ".f1ugzwwg{font-size:12px;}",
166
163
  ".fvblgha{height:12px;}",
167
- ".f1qvz09l{line-height:var(--ctrl-token-MenuButton-85, var(--semantic-token-MenuButton-86, var(--lineHeightBase200)));}",
164
+ ".fwrc4pm{line-height:var(--lineHeightBase200);}",
168
165
  ".frx94fk{width:12px;}",
169
- ".fbr3bm5{line-height:var(--ctrl-token-MenuButton-87, var(--semantic-token-MenuButton-88, var(--lineHeightBase200)));}",
170
166
  ".f4ybsrx{font-size:16px;}",
171
167
  ".fd461yt{height:16px;}",
172
- ".ft0ajt3{line-height:var(--ctrl-token-MenuButton-89, var(--semantic-token-MenuButton-90, var(--lineHeightBase400)));}",
168
+ ".faaz57k{line-height:var(--lineHeightBase400);}",
173
169
  ".fjw5fx7{width:16px;}",
174
- ".f11x6m6q{margin-left:var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-92, var(--spacingHorizontalXS)));}",
175
- ".fr8gt1{margin-right:var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-92, var(--spacingHorizontalXS)));}"
170
+ ".fbyavb5{margin-left:var(--spacingHorizontalXS);}",
171
+ ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"
176
172
  ]
177
173
  });
178
174
  const useMenuButtonStyles_unstable = (state)=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { 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: `var(--ctrl-token-MenuButton-61, var(--semantic-token-MenuButton-62, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n backgroundColor: `var(--ctrl-token-MenuButton-63, var(--semantic-token-MenuButton-64, ${tokens.colorBrandBackgroundSelected}))`\n },\n secondary: {\n backgroundColor: `var(--ctrl-token-MenuButton-65, var(--semantic-token-MenuButton-66, ${tokens.colorNeutralBackground1Selected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: `var(--ctrl-token-MenuButton-67, var(--semantic-token-MenuButton-68, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n backgroundColor: `var(--ctrl-token-MenuButton-69, var(--semantic-token-MenuButton-70, ${tokens.colorSubtleBackgroundSelected}))`,\n color: `var(--ctrl-token-MenuButton-71, var(--semantic-token-MenuButton-72, ${tokens.colorNeutralForeground2Selected}))`\n },\n transparent: {\n backgroundColor: `var(--ctrl-token-MenuButton-73, var(--semantic-token-MenuButton-74, ${tokens.colorTransparentBackgroundSelected}))`,\n color: `var(--ctrl-token-MenuButton-75, var(--semantic-token-MenuButton-76, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n});\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: `var(--ctrl-token-MenuButton-77, var(--semantic-token-MenuButton-78, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n },\n secondary: {\n color: `var(--ctrl-token-MenuButton-79, var(--semantic-token-MenuButton-80, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n color: `var(--ctrl-token-MenuButton-81, var(--semantic-token-MenuButton-82, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n transparent: {\n color: `var(--ctrl-token-MenuButton-83, var(--semantic-token-MenuButton-84, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Canvas'\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: `var(--ctrl-token-MenuButton-85, var(--semantic-token-MenuButton-86, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: `var(--ctrl-token-MenuButton-87, var(--semantic-token-MenuButton-88, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: `var(--ctrl-token-MenuButton-89, var(--semantic-token-MenuButton-90, ${tokens.lineHeightBase400}))`,\n width: '16px'\n },\n // Not-icon only\n notIconOnly: {\n marginLeft: `var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-92, ${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":["menuButtonClassNames","useMenuButtonStyles_unstable","root","icon","menuIcon","useRootExpandedStyles","__styles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { 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: 'Canvas'\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":["menuButtonClassNames","useMenuButtonStyles_unstable","root","icon","menuIcon","useRootExpandedStyles","__styles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -88,16 +88,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
88
88
  outline: {},
89
89
  primary: {
90
90
  B1l9wao: [
91
- "f8iww82",
92
- "fp1eu0m"
91
+ "f4rm5b0",
92
+ "f1tuwo13"
93
93
  ],
94
94
  lcnrd8: [
95
- "fuizv1t",
96
- "f19kwtzy"
95
+ "fdwdeeo",
96
+ "f1ezdslh"
97
97
  ],
98
98
  Brbpp8k: [
99
- "f12aeckf",
100
- "f1pqs2oh"
99
+ "fckzjn8",
100
+ "f8ohr2i"
101
101
  ],
102
102
  Bcsxniv: [
103
103
  "ff0tx2l",
@@ -115,30 +115,30 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
115
115
  secondary: {},
116
116
  subtle: {
117
117
  B1l9wao: [
118
- "f90ssbj",
119
- "f171kakz"
118
+ "fbw67pg",
119
+ "fcas6k2"
120
120
  ],
121
121
  lcnrd8: [
122
- "f1qfbe7",
123
- "f1w6ad1x"
122
+ "fn44ryq",
123
+ "fwhhltr"
124
124
  ],
125
125
  Brbpp8k: [
126
- "f1ut8iav",
127
- "f1l02e3d"
126
+ "f1xppm0p",
127
+ "fkfp127"
128
128
  ]
129
129
  },
130
130
  transparent: {
131
131
  B1l9wao: [
132
- "f1fctejb",
133
- "fetekt1"
132
+ "fbw67pg",
133
+ "fcas6k2"
134
134
  ],
135
135
  lcnrd8: [
136
- "f189lcxo",
137
- "fjbrolj"
136
+ "fn44ryq",
137
+ "fwhhltr"
138
138
  ],
139
139
  Brbpp8k: [
140
- "f1aediod",
141
- "f10cqcnz"
140
+ "f1xppm0p",
141
+ "fkfp127"
142
142
  ]
143
143
  },
144
144
  circular: {},
@@ -146,16 +146,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
146
146
  square: {},
147
147
  disabled: {
148
148
  B1l9wao: [
149
- "fegwyvo",
150
- "fmvcv9w"
149
+ "f10xrnr8",
150
+ "f15nylwb"
151
151
  ],
152
152
  lcnrd8: [
153
- "f1ohjkvm",
154
- "f13os6i2"
153
+ "f11fwhjz",
154
+ "f18vtcsx"
155
155
  ],
156
156
  Brbpp8k: [
157
- "fli1pn0",
158
- "fsdmtgg"
157
+ "f31btwb",
158
+ "fzgm9gq"
159
159
  ]
160
160
  },
161
161
  disabledHighContrast: {
@@ -189,32 +189,26 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
189
189
  ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}",
190
190
  ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}",
191
191
  ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}",
192
- ".f8iww82 .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}",
193
- ".fp1eu0m .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}",
194
- ".f90ssbj .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}",
195
- ".f171kakz .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}",
196
- ".f1fctejb .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}",
197
- ".fetekt1 .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}",
198
- ".fegwyvo .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}",
199
- ".fmvcv9w .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}"
192
+ ".f4rm5b0 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
193
+ ".f1tuwo13 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
194
+ ".fbw67pg .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1);}",
195
+ ".fcas6k2 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1);}",
196
+ ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
197
+ ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
200
198
  ],
201
199
  h: [
202
- ".fuizv1t:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}",
203
- ".f19kwtzy:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}",
204
- ".f12aeckf:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}",
205
- ".f1pqs2oh:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}",
206
- ".f1qfbe7:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}",
207
- ".f1w6ad1x:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}",
208
- ".f1ut8iav:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}",
209
- ".f1l02e3d:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}",
210
- ".f189lcxo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}",
211
- ".fjbrolj:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}",
212
- ".f1aediod:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}",
213
- ".f10cqcnz:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}",
214
- ".f1ohjkvm:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}",
215
- ".f13os6i2:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}",
216
- ".fli1pn0:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, var(--colorNeutralStrokeDisabled)));}",
217
- ".fsdmtgg:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, var(--colorNeutralStrokeDisabled)));}"
200
+ ".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
201
+ ".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
202
+ ".fckzjn8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
203
+ ".f8ohr2i:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
204
+ ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}",
205
+ ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}",
206
+ ".f1xppm0p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Pressed);}",
207
+ ".fkfp127:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Pressed);}",
208
+ ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
209
+ ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}",
210
+ ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
211
+ ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
218
212
  ],
219
213
  m: [
220
214
  [
@@ -1 +1 @@
1
- {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { 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};\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: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, ${tokens.colorNeutralStrokeOnBrand}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, ${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': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, ${tokens.colorNeutralStrokeDisabled}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, ${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': {\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":["splitButtonClassNames","useSplitButtonStyles_unstable","root","menuButton","primaryActionButton","useFocusStyles","__styles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IA0IAC,6BAA6B;eAA7BA;;;uBA7I4B;AAGlC,MAAMD,wBAAwB;IACjCE,MAAM;IACNC,YAAY;IACZC,qBAAqB;AACzB;AACA,MAAMC,iBAAc,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,qBAAA;QAAAG,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAL,YAAA;QAAAM,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAWvB,MAAMC,gBAAa,WAAA,GAAGP,IAAAA,eAAA,EAAA;IAAAQ,MAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA,CAAA;IAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA,CAAA;IAAAC,QAAA;QAAAP,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,aAAA;QAAAR,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,UAAA,CAAA;IAAAC,SAAA,CAAA;IAAAC,QAAA,CAAA;IAAAC,UAAA;QAAAZ,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAW,sBAAA;QAAAV,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAApB,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAA6B,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AA0Hf,MAAMzC,gCAAiC0C,CAAAA;IAC1C;IACA,MAAMC,aAAa/B;IACnB,MAAMgC,cAAcxC;IACpB,MAAM,EAAEyC,UAAU,EAAEP,QAAQ,EAAEQ,iBAAAA,EAAmB,GAAGJ;IACpDA,MAAMzC,IAAI,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,sBAAsBE,IAAI,EAAE0C,WAAW9B,IAAI,EAAEgC,cAAcF,UAAU,CAACE,WAAW,EAAE,AAACP,CAAAA,YAAYQ,iBAAAA,KAAsBH,WAAWL,QAAQ,EAAE,AAACA,CAAAA,YAAYQ,iBAAAA,KAAsBH,WAAWJ,oBAAoB,EAAEG,MAAMzC,IAAI,CAAC8C,SAAS;IACvQ,IAAIL,MAAMxC,UAAU,EAAE;QAClBwC,MAAMxC,UAAU,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,sBAAsBG,UAAU,EAAE0C,YAAY1C,UAAU,EAAEwC,MAAMxC,UAAU,CAAC6C,SAAS;IAClI;IACA,IAAIL,MAAMvC,mBAAmB,EAAE;QAC3BuC,MAAMvC,mBAAmB,CAAC4C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,sBAAsBI,mBAAmB,EAAEyC,YAAYzC,mBAAmB,EAAEuC,MAAMvC,mBAAmB,CAAC4C,SAAS;IACtK;IACA,OAAOL;AACX"}
1
+ {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { 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};\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: 0\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': {\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': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\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 ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed\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': {\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': {\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":["splitButtonClassNames","useSplitButtonStyles_unstable","root","menuButton","primaryActionButton","useFocusStyles","__styles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}