@fluentui-copilot/react-send-button 0.1.2 → 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.
- package/CHANGELOG.json +31 -1
- package/CHANGELOG.md +20 -2
- package/lib/SendButton.js +0 -1
- package/lib/components/SendButton/SendButton.js +4 -5
- package/lib/components/SendButton/SendButton.types.js +1 -2
- package/lib/components/SendButton/buttonMotion.js +199 -138
- package/lib/components/SendButton/index.js +0 -1
- package/lib/components/SendButton/renderSendButton.js +38 -30
- package/lib/components/SendButton/useSendButton.js +95 -97
- package/lib/components/SendButton/useSendButtonStyles.styles.js +43 -11
- package/lib/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +220 -0
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
- package/lib/index.js +0 -1
- package/lib-commonjs/SendButton.js +0 -1
- package/lib-commonjs/components/SendButton/SendButton.js +1 -1
- package/lib-commonjs/components/SendButton/SendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/SendButton.types.js +0 -1
- package/lib-commonjs/components/SendButton/buttonMotion.js +1 -1
- package/lib-commonjs/components/SendButton/buttonMotion.js.map +1 -1
- package/lib-commonjs/components/SendButton/index.js +0 -1
- package/lib-commonjs/components/SendButton/renderSendButton.js +1 -1
- package/lib-commonjs/components/SendButton/renderSendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButton.js +1 -1
- package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js +85 -9
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +236 -0
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/index.js +0 -1
- package/package.json +4 -4
|
@@ -0,0 +1 @@
|
|
|
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/index.js
CHANGED
|
@@ -18,4 +18,4 @@ const SendButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
18
18
|
(0, _useSendButtonStylesstyles.useSendButtonStyles_unstable)(state);
|
|
19
19
|
return (0, _renderSendButton.renderSendButton_unstable)(state);
|
|
20
20
|
});
|
|
21
|
-
SendButton.displayName = 'SendButton';
|
|
21
|
+
SendButton.displayName = 'SendButton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n const state = useSendButton_unstable(props, ref);\n\n useSendButtonStyles_unstable(state);\n return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,
|
|
1
|
+
{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n const state = useSendButton_unstable(props, ref);\n\n useSendButtonStyles_unstable(state);\n return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","ref","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}
|
|
@@ -230,4 +230,4 @@ const circleMotion = ()=>{
|
|
|
230
230
|
};
|
|
231
231
|
const SendButtonMotion = (0, _reactcomponents.createPresenceComponent)(sendMotion);
|
|
232
232
|
const StopButtonMotion = (0, _reactcomponents.createPresenceComponent)(stopMotion);
|
|
233
|
-
const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion);
|
|
233
|
+
const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ transform: `scale(0)` }],\n duration: 0,\n },\n {\n keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationSlow * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 1 }],\n duration: 0,\n delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n },\n {\n keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationSlower * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n duration: 0,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: motionTokens.durationFast * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","
|
|
1
|
+
{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ transform: `scale(0)` }],\n duration: 0,\n },\n {\n keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationSlow * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 1 }],\n duration: 0,\n delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n },\n {\n keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationSlower * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n duration: 0,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: motionTokens.durationFast * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","SendButtonMotion","StopButtonMotion","scaleSend","startScaleStop","scaleStop","startScaleCircle","scaleCircle","motionSpeedMultiplier","sendMotion","enterKeyframes","keyframes","transform","duration","motionTokens","durationNormal","easing","curveDecelerateMax","delay","durationSlow","curveDecelerateMid","exitKeyframes","durationFast","enter","exit","stopMotion","opacity","durationSlower","durationUltraFast","durationFaster","curveDecelerateMin","circleMotion","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -29,4 +29,3 @@ const _SendButton = require("./SendButton");
|
|
|
29
29
|
const _renderSendButton = require("./renderSendButton");
|
|
30
30
|
const _useSendButton = require("./useSendButton");
|
|
31
31
|
const _useSendButtonStylesstyles = require("./useSendButtonStyles.styles");
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SendButtonState, SendButtonSlots } from './SendButton.types';\n\n/**\n * Render the final JSX of SendButton\n */\nexport const renderSendButton_unstable = (state: SendButtonState) => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n {state.stopIcon && (\n <>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n </>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n\nfunction renderSendButtonNext(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n {state.stopIcon && (\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n"],"names":["state","designVersion","renderSendButtonNext","renderSendButtonCurrent","assertSlots","
|
|
1
|
+
{"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SendButtonState, SendButtonSlots } from './SendButton.types';\n\n/**\n * Render the final JSX of SendButton\n */\nexport const renderSendButton_unstable = (state: SendButtonState) => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n {state.stopIcon && (\n <>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n </>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n\nfunction renderSendButtonNext(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n {state.stopIcon && (\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n"],"names":["renderSendButton_unstable","state","designVersion","renderSendButtonNext","renderSendButtonCurrent","assertSlots","_jsxs","root","stopIcon","_Fragment","_jsx","stopBackgroundMotion","stopBackground","stopButtonMotion","sendButtonMotion","sendIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxC,IAAIA,MAAMC,aAAa,KAAK,QAAQ;QAClC,OAAOC,qBAAqBF;IAC9B;IAEA,OAAOG,wBAAwBH;AACjC;AAEA,SAASG,wBAAwBH,KAAsB;IACrDI,IAAAA,4BAAAA,EAA6BJ;IAE7B,OAAA,WAAA,GACEK,IAAAA,gBAAA,EAACL,MAAMM,IAAI,EAAA;;YACRN,MAAMO,QAAQ,IAAA,WAAA,GACbF,IAAAA,gBAAA,EAAAG,oBAAA,EAAA;;kCACEC,IAAAA,eAAA,EAACT,MAAMU,oBAAoB,EAAA;kCACzB,WAAA,GAAAD,IAAAA,eAAA,EAACT,MAAMW,cAAc,EAAA,CAAA;;kCAEvBF,IAAAA,eAAA,EAACT,MAAMY,gBAAgB,EAAA;kCACrB,WAAA,GAAAH,IAAAA,eAAA,EAACT,MAAMO,QAAQ,EAAA,CAAA;;;;0BAIrBE,IAAAA,eAAA,EAACT,MAAMa,gBAAgB,EAAA;0BACrB,WAAA,GAAAJ,IAAAA,eAAA,EAACT,MAAMc,QAAQ,EAAA,CAAA;;;;AAIvB;AAEA,SAASZ,qBAAqBF,KAAsB;IAClDI,IAAAA,4BAAAA,EAA6BJ;IAE7B,OAAA,WAAA,GACEK,IAAAA,gBAAA,EAACL,MAAMM,IAAI,EAAA;;0BACTG,IAAAA,eAAA,EAACT,MAAMU,oBAAoB,EAAA;0BACzB,WAAA,GAAAD,IAAAA,eAAA,EAACT,MAAMW,cAAc,EAAA,CAAA;;YAEtBX,MAAMO,QAAQ,IAAA,WAAA,GACbE,IAAAA,eAAA,EAACT,MAAMY,gBAAgB,EAAA;0BACrB,WAAA,GAAAH,IAAAA,eAAA,EAACT,MAAMO,QAAQ,EAAA,CAAA;;0BAGnBE,IAAAA,eAAA,EAACT,MAAMa,gBAAgB,EAAA;0BACrB,WAAA,GAAAJ,IAAAA,eAAA,EAACT,MAAMc,QAAQ,EAAA,CAAA;;;;AAIvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","props","ref","React","useState","
|
|
1
|
+
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","props","ref","isSendMotionRunning","setIsSendMotionRunning","React","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","useDesignVersion","mode","useCopilotMode","visible","setVisible","mountRef","useCallback","elem","finalRef","useMergedRefs","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","createElement","ArrowRight24Filled","ArrowRight20Filled","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","SendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","optional","Stop20Filled","Stop16Filled","renderByDefault","presenceMotionSlot","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -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: "
|
|
229
|
+
irswps: "f88035w",
|
|
221
230
|
qhf8xq: "f10pi13n",
|
|
222
231
|
Bfpq7zp: 0,
|
|
223
232
|
g9k6zt: 0,
|
|
224
233
|
Bn4voq9: 0,
|
|
225
|
-
giviqs: "
|
|
226
|
-
j6ew2k: "
|
|
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
|
-
|
|
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
|
-
".
|
|
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
|
-
".
|
|
301
|
+
".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}",
|
|
276
302
|
{
|
|
277
303
|
p: -1
|
|
278
304
|
}
|
|
279
305
|
],
|
|
280
|
-
".
|
|
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
|
-
".
|
|
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);}",
|
|
@@ -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"}
|