@fluentui-copilot/react-send-button 0.1.3 → 0.1.4

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 (11) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/lib/components/SendButton/useSendButtonStyles.styles.js +43 -11
  4. package/lib/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
  5. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +40 -13
  6. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -1
  7. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js +85 -9
  8. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
  9. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +39 -12
  10. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -1
  11. package/package.json +3 -3
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui-copilot/react-send-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Jul 2025 17:47:34 GMT",
5
+ "date": "Wed, 27 Aug 2025 23:19:12 GMT",
6
+ "tag": "@fluentui-copilot/react-send-button_v0.1.4",
7
+ "version": "0.1.4",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "jiangemma@microsoft.com",
12
+ "package": "@fluentui-copilot/react-send-button",
13
+ "commit": "c199731a876599c38b001c9b9f18845d52885220",
14
+ "comment": "feat: Add WHCM styles"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 17 Jul 2025 17:49:25 GMT",
6
21
  "tag": "@fluentui-copilot/react-send-button_v0.1.3",
7
22
  "version": "0.1.3",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui-copilot/react-send-button
2
2
 
3
- This log was last generated on Thu, 17 Jul 2025 17:47:34 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 27 Aug 2025 23:19:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.1.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.4)
8
+
9
+ Wed, 27 Aug 2025 23:19:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.3..@fluentui-copilot/react-send-button_v0.1.4)
11
+
12
+ ### Patches
13
+
14
+ - feat: Add WHCM styles ([PR #3310](https://github.com/microsoft/fluentai/pull/3310) by jiangemma@microsoft.com)
15
+
7
16
  ## [0.1.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.3)
8
17
 
9
- Thu, 17 Jul 2025 17:47:34 GMT
18
+ Thu, 17 Jul 2025 17:49:25 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.2..@fluentui-copilot/react-send-button_v0.1.3)
11
20
 
12
21
  ### Patches
package/lib/components/SendButton/useSendButtonStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __styles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
1
+ import { __styles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
3
  export const sendButtonClassNames = {
4
4
  root: 'fai-SendButton',
@@ -71,7 +71,8 @@ const useNextStyles = __styles({
71
71
  Bq1tomu: "fwzfryc",
72
72
  qhf8xq: "f1tmlkn4",
73
73
  Bj3rh1h: "f19g0ac",
74
- sj55zd: "f1phragk"
74
+ sj55zd: "f1phragk",
75
+ B7iucu3: "fqc85l4"
75
76
  },
76
77
  dictationActive: {
77
78
  sj55zd: "fkfq4zb"
@@ -116,7 +117,10 @@ const useNextStyles = __styles({
116
117
  p: -1
117
118
  }], ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
118
119
  p: -1
119
- }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"]
120
+ }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"],
121
+ m: [["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
122
+ m: "(forced-colors: active)"
123
+ }]]
120
124
  });
121
125
  const useRootNextStyles = __styles({
122
126
  root: {
@@ -147,13 +151,18 @@ const useRootNextStyles = __styles({
147
151
  g2u3we: 0,
148
152
  icvyot: 0,
149
153
  B4j52fo: 0,
150
- irswps: "f3bhgqh",
154
+ irswps: "f88035w",
151
155
  qhf8xq: "f10pi13n",
152
156
  Bfpq7zp: 0,
153
157
  g9k6zt: 0,
154
158
  Bn4voq9: 0,
155
- giviqs: "f1pz6nmm",
156
- j6ew2k: "f43rluz"
159
+ giviqs: "f1m9av4t",
160
+ j6ew2k: "f1nlh5rk",
161
+ Bcq6wej: "fjq791v",
162
+ Jcjdmf: ["fkq2p2y", "f1sehlss"],
163
+ sc4o1m: "f11odvng",
164
+ Bosien3: ["f1sehlss", "fkq2p2y"],
165
+ B0a1hpu: "f12mm4ns"
157
166
  },
158
167
  canvas: {
159
168
  Bf4jedk: "f12clzc2",
@@ -165,30 +174,53 @@ const useRootNextStyles = __styles({
165
174
  },
166
175
  notSending: {
167
176
  Bmdhgnd: "fiaw31n",
168
- yc1b9o: "f7x9b1s",
177
+ Buhwtog: "fmv7hed",
178
+ Bsyoesm: "f10g5jnj",
179
+ B5xjowy: "f1hzts53",
169
180
  f30giq: "f3l45fr"
170
181
  },
171
182
  notSendingDictationActive: {
172
183
  Bmdhgnd: "fkhxdak",
184
+ Buhwtog: "fmv7hed",
173
185
  jhc297: "f1dxmfzy",
186
+ B885nwu: "f175mo2",
174
187
  f30giq: "f1zsivl",
175
188
  Ba808g4: "f50srwi"
176
189
  },
177
190
  sending: {
178
191
  Bmdhgnd: "f1hzdlu9",
192
+ Buhwtog: "fmv7hed",
179
193
  uj1ttc: "fe9pnmy",
194
+ E4wjbi: "f18cpvo8",
180
195
  f30giq: "f876z59",
181
196
  Bssu2nw: "fqsoy9w"
182
197
  }
183
198
  }, {
184
199
  d: [".f13qh94s{display:grid;}", ".f9o42qa{grid-template-areas:\"button\";}", ".f1u7ey36{grid-template-rows:1fr;}", ".f1c2z91y{grid-template-columns:1fr;}", ".f1oiokrs{justify-items:center;}", ".f122n59{align-items:center;}", [".fv5o1b5{padding:var(--spacingVerticalNone);}", {
185
200
  p: -1
186
- }], [".f3bhgqh{border:none;}", {
201
+ }], [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
187
202
  p: -2
188
- }], ".f10pi13n{position:relative;}", [".f1pz6nmm[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}", {
203
+ }], ".f10pi13n{position:relative;}", [".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}", {
189
204
  p: -1
190
- }], ".f43rluz[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}"],
191
- h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
205
+ }], ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}"],
206
+ m: [["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
207
+ m: "(forced-colors: active)"
208
+ }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {
209
+ m: "(forced-colors: active)"
210
+ }], ["@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}", {
211
+ m: "(forced-colors: active)"
212
+ }], ["@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}", {
213
+ m: "(forced-colors: active)"
214
+ }], ["@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}", {
215
+ m: "(forced-colors: active)"
216
+ }], ["@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
217
+ m: "(forced-colors: active)"
218
+ }], ["@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}", {
219
+ m: "(forced-colors: active)"
220
+ }], ["@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
221
+ m: "(forced-colors: active)"
222
+ }]],
223
+ h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
192
224
  a: [".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}", ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}", ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}", ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}", ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"]
193
225
  });
194
226
  /**
package/lib/components/SendButton/useSendButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","shorthands","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","outline","boxShadow","colorStrokeFocus2","borderColor","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js CHANGED
@@ -1,4 +1,4 @@
1
- import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
1
+ import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
3
  export const sendButtonClassNames = {
4
4
  root: 'fai-SendButton',
@@ -53,7 +53,10 @@ const useNextStyles = makeStyles({
53
53
  gridArea: 'button',
54
54
  position: 'initial',
55
55
  zIndex: 1,
56
- color: tokens.colorNeutralForegroundOnBrand
56
+ color: tokens.colorNeutralForegroundOnBrand,
57
+ '@media (forced-colors: active)': {
58
+ color: 'HighlightText'
59
+ }
57
60
  },
58
61
  dictationActive: {
59
62
  color: tokens.colorNeutralForeground2
@@ -93,12 +96,18 @@ const useRootNextStyles = makeStyles({
93
96
  justifyItems: 'center',
94
97
  alignItems: 'center',
95
98
  padding: tokens.spacingVerticalNone,
96
- border: 'none',
99
+ border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
97
100
  position: 'relative',
98
101
  ...createCustomFocusIndicatorStyle({
99
- outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
100
- boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
101
- })
102
+ outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,
103
+ boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`
104
+ }),
105
+ '@media (forced-colors: active)': {
106
+ ...shorthands.borderColor('Highlight'),
107
+ [`& .${sendButtonClassNames.stopBackground}`]: {
108
+ backgroundColor: 'Highlight'
109
+ }
110
+ }
102
111
  },
103
112
  canvas: {
104
113
  minWidth: '40px',
@@ -111,10 +120,16 @@ const useRootNextStyles = makeStyles({
111
120
  notSending: {
112
121
  ':hover': {
113
122
  [`& .${sendButtonClassNames.stopBackground}`]: {
114
- backgroundColor: tokens.colorBrandBackgroundHover
123
+ backgroundColor: tokens.colorBrandBackgroundHover,
124
+ '@media (forced-colors: active)': {
125
+ backgroundColor: 'HighlightText'
126
+ }
115
127
  },
116
- [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
117
- color: tokens.colorNeutralForegroundOnBrand
128
+ [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
129
+ color: tokens.colorNeutralForegroundOnBrand,
130
+ '@media (forced-colors: active)': {
131
+ color: 'Highlight'
132
+ }
118
133
  }
119
134
  },
120
135
  ':active': {
@@ -126,10 +141,16 @@ const useRootNextStyles = makeStyles({
126
141
  notSendingDictationActive: {
127
142
  ':hover': {
128
143
  [`& .${sendButtonClassNames.stopBackground}`]: {
129
- backgroundColor: tokens.colorSubtleBackgroundHover
144
+ backgroundColor: tokens.colorSubtleBackgroundHover,
145
+ '@media (forced-colors: active)': {
146
+ backgroundColor: 'HighlightText'
147
+ }
130
148
  },
131
149
  [`& .${sendButtonClassNames.sendIcon}`]: {
132
- color: tokens.colorNeutralForeground2Hover
150
+ color: tokens.colorNeutralForeground2Hover,
151
+ '@media (forced-colors: active)': {
152
+ color: 'Highlight'
153
+ }
133
154
  }
134
155
  },
135
156
  ':active': {
@@ -144,10 +165,16 @@ const useRootNextStyles = makeStyles({
144
165
  sending: {
145
166
  ':hover': {
146
167
  [`& .${sendButtonClassNames.stopBackground}`]: {
147
- backgroundColor: tokens.colorBrandBackground2Hover
168
+ backgroundColor: tokens.colorBrandBackground2Hover,
169
+ '@media (forced-colors: active)': {
170
+ backgroundColor: 'HighlightText'
171
+ }
148
172
  },
149
173
  [`& .${sendButtonClassNames.stopIcon}`]: {
150
- color: tokens.colorBrandForeground2Hover
174
+ color: tokens.colorBrandForeground2Hover,
175
+ '@media (forced-colors: active)': {
176
+ color: 'Highlight'
177
+ }
151
178
  }
152
179
  },
153
180
  ':active': {
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","shorthands","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","outline","boxShadow","colorStrokeFocus2","borderColor","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js CHANGED
@@ -114,7 +114,8 @@ const useNextStyles = (0, _reactcomponents.__styles)({
114
114
  Bq1tomu: "fwzfryc",
115
115
  qhf8xq: "f1tmlkn4",
116
116
  Bj3rh1h: "f19g0ac",
117
- sj55zd: "f1phragk"
117
+ sj55zd: "f1phragk",
118
+ B7iucu3: "fqc85l4"
118
119
  },
119
120
  dictationActive: {
120
121
  sj55zd: "fkfq4zb"
@@ -186,6 +187,14 @@ const useNextStyles = (0, _reactcomponents.__styles)({
186
187
  ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
187
188
  ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
188
189
  ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"
190
+ ],
191
+ m: [
192
+ [
193
+ "@media (forced-colors: active){.fqc85l4{color:HighlightText;}}",
194
+ {
195
+ m: "(forced-colors: active)"
196
+ }
197
+ ]
189
198
  ]
190
199
  });
191
200
  const useRootNextStyles = (0, _reactcomponents.__styles)({
@@ -217,13 +226,24 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
217
226
  g2u3we: 0,
218
227
  icvyot: 0,
219
228
  B4j52fo: 0,
220
- irswps: "f3bhgqh",
229
+ irswps: "f88035w",
221
230
  qhf8xq: "f10pi13n",
222
231
  Bfpq7zp: 0,
223
232
  g9k6zt: 0,
224
233
  Bn4voq9: 0,
225
- giviqs: "f1pz6nmm",
226
- j6ew2k: "f43rluz"
234
+ giviqs: "f1m9av4t",
235
+ j6ew2k: "f1nlh5rk",
236
+ Bcq6wej: "fjq791v",
237
+ Jcjdmf: [
238
+ "fkq2p2y",
239
+ "f1sehlss"
240
+ ],
241
+ sc4o1m: "f11odvng",
242
+ Bosien3: [
243
+ "f1sehlss",
244
+ "fkq2p2y"
245
+ ],
246
+ B0a1hpu: "f12mm4ns"
227
247
  },
228
248
  canvas: {
229
249
  Bf4jedk: "f12clzc2",
@@ -235,18 +255,24 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
235
255
  },
236
256
  notSending: {
237
257
  Bmdhgnd: "fiaw31n",
238
- yc1b9o: "f7x9b1s",
258
+ Buhwtog: "fmv7hed",
259
+ Bsyoesm: "f10g5jnj",
260
+ B5xjowy: "f1hzts53",
239
261
  f30giq: "f3l45fr"
240
262
  },
241
263
  notSendingDictationActive: {
242
264
  Bmdhgnd: "fkhxdak",
265
+ Buhwtog: "fmv7hed",
243
266
  jhc297: "f1dxmfzy",
267
+ B885nwu: "f175mo2",
244
268
  f30giq: "f1zsivl",
245
269
  Ba808g4: "f50srwi"
246
270
  },
247
271
  sending: {
248
272
  Bmdhgnd: "f1hzdlu9",
273
+ Buhwtog: "fmv7hed",
249
274
  uj1ttc: "fe9pnmy",
275
+ E4wjbi: "f18cpvo8",
250
276
  f30giq: "f876z59",
251
277
  Bssu2nw: "fqsoy9w"
252
278
  }
@@ -265,27 +291,77 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
265
291
  }
266
292
  ],
267
293
  [
268
- ".f3bhgqh{border:none;}",
294
+ ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
269
295
  {
270
296
  p: -2
271
297
  }
272
298
  ],
273
299
  ".f10pi13n{position:relative;}",
274
300
  [
275
- ".f1pz6nmm[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}",
301
+ ".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}",
276
302
  {
277
303
  p: -1
278
304
  }
279
305
  ],
280
- ".f43rluz[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}",
306
+ ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}",
281
307
  ".f12clzc2{min-width:40px;}",
282
308
  ".fbhnoac{height:40px;}",
283
309
  ".fwbmr0d{min-width:32px;}",
284
310
  ".f1d2rq10{height:32px;}"
285
311
  ],
312
+ m: [
313
+ [
314
+ "@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}",
315
+ {
316
+ m: "(forced-colors: active)"
317
+ }
318
+ ],
319
+ [
320
+ "@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}",
321
+ {
322
+ m: "(forced-colors: active)"
323
+ }
324
+ ],
325
+ [
326
+ "@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}",
327
+ {
328
+ m: "(forced-colors: active)"
329
+ }
330
+ ],
331
+ [
332
+ "@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}",
333
+ {
334
+ m: "(forced-colors: active)"
335
+ }
336
+ ],
337
+ [
338
+ "@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}",
339
+ {
340
+ m: "(forced-colors: active)"
341
+ }
342
+ ],
343
+ [
344
+ "@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}",
345
+ {
346
+ m: "(forced-colors: active)"
347
+ }
348
+ ],
349
+ [
350
+ "@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}",
351
+ {
352
+ m: "(forced-colors: active)"
353
+ }
354
+ ],
355
+ [
356
+ "@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}",
357
+ {
358
+ m: "(forced-colors: active)"
359
+ }
360
+ ]
361
+ ],
286
362
  h: [
287
363
  ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}",
288
- ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
364
+ ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
289
365
  ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}",
290
366
  ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}",
291
367
  ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}",
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","colorNeutralForegroundOnBrand","p","dictationActive","sendIconFilled","stopIconFilled","Brf1p80","backgroundColor","Bj3rh1h","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Bw0ie65","Br312pm","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","border","createCustomFocusIndicatorStyle","sidecar","De3pzq","wkccdc","notSendingDictationActive","h3c5rm","sending","Bf4jedk","Bmdhgnd","isDictationActive","yc1b9o","styles","f30giq","nextStyles","sendIconFilledStyle","stopIconFilledStyle","state","uj1ttc","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,oBAAAA;eAAAA;;;;;;iCAPoB;AAO1B,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;;;QAGcC;QAA6B;QAAA;QAAA;QAAA;YAAA;YAAA;gBAC7CC,GAAA,CAAA;;SAEAC;QAAAA;QAAiB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACfX;;SACF;QAAA;KAAA;OAEAY;QAAAA;KAAgB;;MAEhBN,gBAAAnB,IAAAA,yBAAA,EAAA;oBAEA0B;gBACEb;QACFc,SAAA;QAEA/B,SAAAA;iBACEyB;gBACAjB;gBACAF;iBACAc;gBACAY;QACFC,SAAA;QAEAC,QAAAA;;qBAEA;QAEAC,QAAAA;;oBAEA;QACAnB,QAAAA;;oBAEA;QACAoB,QAAAA;;oBAEA;QACFC,SAAA;QAEAC,SAAMC;QACJ1C,QAAM;gBACJQ;iBACAmC;iBACAC;gBACAC;iBACAC;iBACAlC;iBACAC;iBACAkC;gBACA/B;gBACGgC;;2BAEW;gBACZ;;mCAGI;gBACNtC;;cAEF;QAEAuC,QAAAA;;4BAEU;QACVC,QAAA;;;;;QAIgC/C;QAAmB;YAAA;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;;;;QAGgB0B;QAAAA;YAA6B;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;KAAA;;0BAES9B,IAAAA,yBAAAA,EAAAA;;gBAEP;gBACF;QACFoD,QAAA;QACAC,SAAAA;iBACE;iBACG;;gBAED;gBAEA;;iBAEA;iBACF;iBACA;gBACE;;iBAEA;gBACA;;gBAEA;gBACF;QACFC,QAAA;QAEAC,QAAAA;iBACE;gBACE;;gBAEA;iBACC;;gBAED;iBACF;gBACA;iBACG;;gBAED;;;iBAGA;iBACF;;IAEJL,SAAA;QAEAM,SAAA;;IAEC;gBAEC;QACAC,SAAQC;QAERC,QAAMC;QACNC,QAAMC;;+BAGAC;QACNN,SAAMO;QAENC,QAAMhE;QAgBN4D,QAAII;iBACFA;;aASEA;iBACFA;QAMFC,QAAA;QAEAL,QAAII;iBACFA;;;OAWFE;QAAAA;QAAyB;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBAAE;;;;;YAAsB;;;;;QAA6B;YAAA;YAAA;oBAAO;;;;QAAa;QAAA;QAAA;QAAA;KAAA;OAAM;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;OAExG;QAAA;QAAOF;QAAAA;QAAAA;QAAAA;KAAAA;AACT"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","colorNeutralForegroundOnBrand","dictationActive","sendIconFilled","Brf1p80","stopIconFilled","nk6f5a","backgroundColor","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Br312pm","Ijaq50","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","border","createCustomFocusIndicatorStyle","outline","De3pzq","p","sidecar","notSending","oivjwe","notSendingDictationActive","Bosien3","sending","Ba808g4","Buhwtog","uj1ttc","E4wjbi","isDictationActive","f30giq","styles","Bssu2nw","nextStyles","designVersion","state","stopIconFilledStyle","className","m","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,oBAAAA;eAAAA;;;;;;iCAPD;AAOL,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;;;QAGcC;QAA6B;QAAA;QAAA;QAAA;YAAA;YAAA;oBAE3C;;;;QACS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACT;;SACF;QAAA;KAAA;OAEAC;QAAAA;KAAiB;;MAEjBJ,gBAAAnB,IAAAA,yBAAA,EAAA;oBAEAwB;gBACEX;QACFY,SAAA;QAEAC,SAAAA;iBACEb;QACFc,QAAA;QAEA/B,QAAAA;iBACEyB;gBACAjB;iBACAF;gBACAc;iBACAY;;qBAGFC;gBACED;;oBAGFE;gBACEF;;oBAEQ;gBACRf;;oBAEFkB;iBACEH;QACFI,SAAA;QACFL,QAAA;QAEAM,QAAMC;QACJzC,SAAM;iBACJQ;gBACAkC;iBACAC;iBACAC;iBACAC;iBACAjC;gBACAC;gBACAiC;;2BAEGC;gBACDC;;mCAEA;gBAEF;;cAEE;;;4BAGF;QACFC,QAAA;;;;;QAIU;QAAA;YAAA;YAAA;gBACVC,GAAA,CAAA;;SAEAC;QAAAA;QAAS;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACPzC;;;;QACQ;QAAA;YAAA;YAAA;gBACVwC,GAAA,CAAA;;SAEAE;QAAAA;QAAY;QAAA;QAAA;QAAA;KAAA;;;;YACA;;;;;;0BAKJjB,IAAAA,yBAAAA,EAAAA;;gBAEJ;gBAEA;;;;;iBAMA;gBACF;gBACA;gBACE;;iBAEA;iBACF;QACFkB,QAAA;QACAC,SAAAA;iBACE;gBACE;;;;;gBAMA;iBAEC;;;;;gBAMD;gBACF;iBACA;gBACE;;gBAEA;gBACA;;gBAEA;YAAA;YAAA;SAAA;gBACF;QACFC,SAAA;YAAA;YAAA;SAAA;QAEAC,SAAS;;;;;;;iBAQL;iBACC;;;;;iBAMD;iBACF;gBACA;;+BAEIrB;iBACF;iBACC;;iBAED;gBACF;QACFsB,SAAA;IACF;IAEAD,SAAA;;QAGAE,SAAO;QACLC,QAAA;QACAC,QAAQC;QAERC,QAAMC;QACNC,SAAMC;;;OAIN;QAAA;QAA4BC;QAAsCjC;QAAkC;QAAA;QAAA;QAAA;YAAA;YAAA;gBAEpGkC,GAAAA,CAAAA;;SAgBA;QAAA;YAAA;YAAoB;oBAClBA;;SAOF;QAAA;QAAA;YAAA;YAAA;gBAEAjB,GAAA,CAAIiB;;;;QAG2BF;QAA4BF;QACvDK;QACeC;KAAS;OAE5B;QAAA;YAAA;YAAA;gBAEAC,GAAA;;;;;YAG+BL;gBAM/BK,GAAA;;SAEA;QAAA;YAAA;YAA8B;gBAC9BC,GAAAA;;;;;YAAmC;;;;;;YAAmC;;;;;;YAAe;;;SAAmB;QAAA;YAAA;YAAA;gBAExGD,GAAA;YACA;SAAA;QAAA;YAAA;YAAA"}
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js CHANGED
@@ -71,7 +71,10 @@ const useNextStyles = (0, _reactcomponents.makeStyles)({
71
71
  gridArea: 'button',
72
72
  position: 'initial',
73
73
  zIndex: 1,
74
- color: _tokens.tokens.colorNeutralForegroundOnBrand
74
+ color: _tokens.tokens.colorNeutralForegroundOnBrand,
75
+ '@media (forced-colors: active)': {
76
+ color: 'HighlightText'
77
+ }
75
78
  },
76
79
  dictationActive: {
77
80
  color: _tokens.tokens.colorNeutralForeground2
@@ -111,12 +114,18 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
111
114
  justifyItems: 'center',
112
115
  alignItems: 'center',
113
116
  padding: _tokens.tokens.spacingVerticalNone,
114
- border: 'none',
117
+ border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`,
115
118
  position: 'relative',
116
119
  ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
117
- outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorTransparentStroke}`,
118
- boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThick} ${_tokens.tokens.colorStrokeFocus2}`
119
- })
120
+ outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke} inset`,
121
+ boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThin} ${_tokens.tokens.colorStrokeFocus2}`
122
+ }),
123
+ '@media (forced-colors: active)': {
124
+ ..._reactcomponents.shorthands.borderColor('Highlight'),
125
+ [`& .${sendButtonClassNames.stopBackground}`]: {
126
+ backgroundColor: 'Highlight'
127
+ }
128
+ }
120
129
  },
121
130
  canvas: {
122
131
  minWidth: '40px',
@@ -129,10 +138,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
129
138
  notSending: {
130
139
  ':hover': {
131
140
  [`& .${sendButtonClassNames.stopBackground}`]: {
132
- backgroundColor: _tokens.tokens.colorBrandBackgroundHover
141
+ backgroundColor: _tokens.tokens.colorBrandBackgroundHover,
142
+ '@media (forced-colors: active)': {
143
+ backgroundColor: 'HighlightText'
144
+ }
133
145
  },
134
- [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
135
- color: _tokens.tokens.colorNeutralForegroundOnBrand
146
+ [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
147
+ color: _tokens.tokens.colorNeutralForegroundOnBrand,
148
+ '@media (forced-colors: active)': {
149
+ color: 'Highlight'
150
+ }
136
151
  }
137
152
  },
138
153
  ':active': {
@@ -144,10 +159,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
144
159
  notSendingDictationActive: {
145
160
  ':hover': {
146
161
  [`& .${sendButtonClassNames.stopBackground}`]: {
147
- backgroundColor: _tokens.tokens.colorSubtleBackgroundHover
162
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
163
+ '@media (forced-colors: active)': {
164
+ backgroundColor: 'HighlightText'
165
+ }
148
166
  },
149
167
  [`& .${sendButtonClassNames.sendIcon}`]: {
150
- color: _tokens.tokens.colorNeutralForeground2Hover
168
+ color: _tokens.tokens.colorNeutralForeground2Hover,
169
+ '@media (forced-colors: active)': {
170
+ color: 'Highlight'
171
+ }
151
172
  }
152
173
  },
153
174
  ':active': {
@@ -162,10 +183,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
162
183
  sending: {
163
184
  ':hover': {
164
185
  [`& .${sendButtonClassNames.stopBackground}`]: {
165
- backgroundColor: _tokens.tokens.colorBrandBackground2Hover
186
+ backgroundColor: _tokens.tokens.colorBrandBackground2Hover,
187
+ '@media (forced-colors: active)': {
188
+ backgroundColor: 'HighlightText'
189
+ }
166
190
  },
167
191
  [`& .${sendButtonClassNames.stopIcon}`]: {
168
- color: _tokens.tokens.colorBrandForeground2Hover
192
+ color: _tokens.tokens.colorBrandForeground2Hover,
193
+ '@media (forced-colors: active)': {
194
+ color: 'Highlight'
195
+ }
169
196
  }
170
197
  },
171
198
  ':active': {
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["sendButtonClassNames","useSendButtonStyles_unstable","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","makeStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","tokens","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","mergeClasses","isButtonMotionRunning","useButtonStyles_unstable","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["sendButtonClassNames","useSendButtonStyles_unstable","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","makeStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","tokens","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","createCustomFocusIndicatorStyle","outline","boxShadow","colorStrokeFocus2","shorthands","borderColor","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","mergeClasses","isButtonMotionRunning","useButtonStyles_unstable","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-send-button",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,9 +12,9 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.12.3",
15
+ "@fluentui-copilot/react-provider": "^0.12.4",
16
16
  "@fluentui-copilot/react-utilities": "^0.0.10",
17
- "@fluentui-copilot/tokens": "^0.3.12",
17
+ "@fluentui-copilot/tokens": "^0.3.13",
18
18
  "@swc/helpers": "^0.5.1"
19
19
  },
20
20
  "peerDependencies": {