npm - @fluentui-copilot/react-send-button - Versions diffs - 0.1.5 → 0.1.6 - Mend

@fluentui-copilot/react-send-button 0.1.5 → 0.1.6

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 (18) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,46 @@
   "name": "@fluentui-copilot/react-send-button",
   "entries": [
     {
-      "date": "Mon, 29 Sep 2025 20:25:10 GMT",
+      "date": "Tue, 14 Oct 2025 00:02:50 GMT",
+      "tag": "@fluentui-copilot/react-send-button_v0.1.6",
+      "version": "0.1.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-send-button",
+            "commit": "74cfcbd7c8afdc8fe3f4b512a9a421613fa32841",
+            "comment": "chore: update react peer deps to support React 19."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-send-button",
+            "commit": "9a3bf49a3c6302529b2c9b6bc3fc63f549aaf88f",
+            "comment": "chore: enforce explicit return types."
+          },
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-send-button",
+            "commit": "30470d7b9d74d3a119d73c53550c29ee9d327b54",
+            "comment": "feat: Make SendButton smaller in canvas mode."
+          },
+          {
+            "author": "hochelmartin@gmail.com",
+            "package": "@fluentui-copilot/react-send-button",
+            "commit": "da79330fcf3989311e4838ea7cfc6d4b8318102a",
+            "comment": "fix: properly specify package dependencies to dedupe in valid semver ranges"
+          },
+          {
+            "author": "twatanabe@microsoft.com",
+            "package": "@fluentui-copilot/react-send-button",
+            "commit": "068a3c71be5da80beeab05640fe768ef631b0c00",
+            "comment": "chore: bump @fluentui/react-components peer dep minbar to ^9.70.0."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 29 Sep 2025 20:26:51 GMT",
       "tag": "@fluentui-copilot/react-send-button_v0.1.5",
       "version": "0.1.5",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,25 @@
 # Change Log - @fluentui-copilot/react-send-button
-This log was last generated on Mon, 29 Sep 2025 20:25:10 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Oct 2025 00:02:50 GMT and should not be manually modified.
 <!-- Start content -->
+## [0.1.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.6)
+Tue, 14 Oct 2025 00:02:50 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.5..@fluentui-copilot/react-send-button_v0.1.6)
+### Patches
+- chore: update react peer deps to support React 19. ([PR #3361](https://github.com/microsoft/fluentai/pull/3361) by tristan.watanabe@gmail.com)
+- chore: enforce explicit return types. ([PR #3360](https://github.com/microsoft/fluentai/pull/3360) by tristan.watanabe@gmail.com)
+- feat: Make SendButton smaller in canvas mode. ([PR #3380](https://github.com/microsoft/fluentai/pull/3380) by owcampbe@microsoft.com)
+- fix: properly specify package dependencies to dedupe in valid semver ranges ([PR #3371](https://github.com/microsoft/fluentai/pull/3371) by hochelmartin@gmail.com)
+- chore: bump @fluentui/react-components peer dep minbar to ^9.70.0. ([PR #3344](https://github.com/microsoft/fluentai/pull/3344) by twatanabe@microsoft.com)
 ## [0.1.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.5)
-Mon, 29 Sep 2025 20:25:10 GMT
+Mon, 29 Sep 2025 20:26:51 GMT
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.4..@fluentui-copilot/react-send-button_v0.1.5)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-/// <reference types="react" />
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ButtonProps } from '@fluentui/react-components';
 import type { ButtonState } from '@fluentui/react-components';
@@ -8,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-components';
 import type { CopilotMode } from '@fluentui-copilot/react-provider';
 import type { DesignVersion } from '@fluentui-copilot/react-provider';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
@@ -16,7 +15,7 @@ import type { SlotClassNames } from '@fluentui/react-components';
 /**
  * Render the final JSX of SendButton
  */
-export declare const renderSendButton_unstable: (state: SendButtonState) => JSX.Element;
+export declare const renderSendButton_unstable: (state: SendButtonState) => JSXElement;
 export declare const SendButton: ForwardRefComponent<SendButtonProps>;

package/lib/components/SendButton/renderSendButton.js.map CHANGED Viewed

	@@ -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":["assertSlots","renderSendButton_unstable","state","designVersion","renderSendButtonNext","renderSendButtonCurrent","root","stopIcon","stopBackgroundMotion","stopBackground","stopButtonMotion","sendButtonMotion","sendIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;~~AAGzD~~;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,IAAIA,MAAMC,aAAa,KAAK,QAAQ;QAClC,OAAOC,qBAAqBF;IAC9B;IAEA,OAAOG,wBAAwBH;AACjC,EAAE;AAEF,SAASG,wBAAwBH,KAAsB;IACrDF,YAA6BE;IAE7B,qBACE,MAACA,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBACb;;kCACE,KAACL,MAAMM,oBAAoB;kCACzB,cAAA,KAACN,MAAMO,cAAc;;kCAEvB,KAACP,MAAMQ,gBAAgB;kCACrB,cAAA,KAACR,MAAMK,QAAQ;;;;0BAIrB,KAACL,MAAMS,gBAAgB;0BACrB,cAAA,KAACT,MAAMU,QAAQ;;;;AAIvB;AAEA,SAASR,qBAAqBF,KAAsB;IAClDF,YAA6BE;IAE7B,qBACE,MAACA,MAAMI,IAAI;;0BACT,KAACJ,MAAMM,oBAAoB;0BACzB,cAAA,KAACN,MAAMO,cAAc;;YAEtBP,MAAMK,QAAQ,kBACb,KAACL,MAAMQ,gBAAgB;0BACrB,cAAA,KAACR,MAAMK,QAAQ;;0BAGnB,KAACL,MAAMS,gBAAgB;0BACrB,cAAA,KAACT,MAAMU,QAAQ;;;;AAIvB"}
1	+ {"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } 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): JSXElement => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState): JSXElement {\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): JSXElement {\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":["assertSlots","renderSendButton_unstable","state","designVersion","renderSendButtonNext","renderSendButtonCurrent","root","stopIcon","stopBackgroundMotion","stopBackground","stopButtonMotion","sendButtonMotion","sendIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,IAAIA,MAAMC,aAAa,KAAK,QAAQ;QAClC,OAAOC,qBAAqBF;IAC9B;IAEA,OAAOG,wBAAwBH;AACjC,EAAE;AAEF,SAASG,wBAAwBH,KAAsB;IACrDF,YAA6BE;IAE7B,qBACE,MAACA,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBACb;;kCACE,KAACL,MAAMM,oBAAoB;kCACzB,cAAA,KAACN,MAAMO,cAAc;;kCAEvB,KAACP,MAAMQ,gBAAgB;kCACrB,cAAA,KAACR,MAAMK,QAAQ;;;;0BAIrB,KAACL,MAAMS,gBAAgB;0BACrB,cAAA,KAACT,MAAMU,QAAQ;;;;AAIvB;AAEA,SAASR,qBAAqBF,KAAsB;IAClDF,YAA6BE;IAE7B,qBACE,MAACA,MAAMI,IAAI;;0BACT,KAACJ,MAAMM,oBAAoB;0BACzB,cAAA,KAACN,MAAMO,cAAc;;YAEtBP,MAAMK,QAAQ,kBACb,KAACL,MAAMQ,gBAAgB;0BACrB,cAAA,KAACR,MAAMK,QAAQ;;0BAGnB,KAACL,MAAMS,gBAAgB;0BACrB,cAAA,KAACT,MAAMU,QAAQ;;;;AAIvB"}

package/lib/components/SendButton/useSendButton.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';
 import { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';
-import { bundleIcon, SendFilled, SendRegular, Stop16Filled, ArrowRight24Filled, Stop20Filled, ArrowRight16Filled } from '@fluentui/react-icons';
+import { bundleIcon, SendFilled, SendRegular, Stop16Filled, ArrowRight20Filled, Stop20Filled, ArrowRight16Filled } from '@fluentui/react-icons';
 import { presenceMotionSlot } from '@fluentui/react-motion';
 import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
 const SendIcon = bundleIcon(SendFilled, SendRegular);
@@ -37,7 +37,7 @@ const SendIcon = bundleIcon(SendFilled, SendRegular);
     }, finalRef);
     const icon = (()=>{
         if (designVersion === 'next') {
-            return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight16Filled, null);
+            return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight20Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight16Filled, null);
         } else {
             if (props.isSendIconFilled || isButtonMotionRunning) {
                 return /*#__PURE__*/ React.createElement(SendFilled, null);

package/lib/components/SendButton/useSendButton.js.map CHANGED Viewed

	@@ -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 ArrowRight16Filled,\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~~ /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\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":["React","slot","useButton_unstable","useMergedRefs","CircleButtonMotion","SendButtonMotion","StopButtonMotion","bundleIcon","SendFilled","SendRegular","Stop16Filled","~~ArrowRight24Filled~~","Stop20Filled","ArrowRight16Filled","presenceMotionSlot","useCopilotMode","useDesignVersion","SendIcon","useSendButton_unstable","props","ref","isSendMotionRunning","setIsSendMotionRunning","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","always","elementType","defaultProps","children","optional","renderByDefault","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 ArrowRight20Filled,\n Stop20Filled,\n ArrowRight16Filled,\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' ? <ArrowRight20Filled /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\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":["React","slot","useButton_unstable","useMergedRefs","CircleButtonMotion","SendButtonMotion","StopButtonMotion","bundleIcon","SendFilled","SendRegular","Stop16Filled","ArrowRight20Filled","Stop20Filled","ArrowRight16Filled","presenceMotionSlot","useCopilotMode","useDesignVersion","SendIcon","useSendButton_unstable","props","ref","isSendMotionRunning","setIsSendMotionRunning","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","always","elementType","defaultProps","children","optional","renderByDefault","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/SendButton/useSendButtonStyles.styles.js CHANGED Viewed

@@ -169,8 +169,8 @@ const useRootNextStyles = __styles({
     B0a1hpu: "f12mm4ns"
   },
   canvas: {
-    Bf4jedk: "f12clzc2",
-    Bqenvij: "fbhnoac"
+    Bf4jedk: "fwbmr0d",
+    Bqenvij: "f1d2rq10"
   },
   sidecar: {
     Bf4jedk: "f107v6xj",
@@ -206,7 +206,7 @@ const useRootNextStyles = __styles({
     p: -2
   }], ".f10pi13n{position:relative;}", [".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}", {
     p: -1
-  }], ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".f107v6xj{min-width:28px;}", ".fxldao9{height:28px;}"],
+  }], ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".f107v6xj{min-width:28px;}", ".fxldao9{height:28px;}"],
   m: [["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {

package/lib/components/SendButton/useSendButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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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"}
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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '32px',\n height: '32px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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 Viewed

@@ -114,8 +114,8 @@ const useRootNextStyles = makeStyles({
         }
     },
     canvas: {
-        minWidth: '40px',
-        height: '40px'
+        minWidth: '32px',
+        height: '32px'
     },
     sidecar: {
         minWidth: '28px',

package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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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"}
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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '32px',\n height: '32px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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/renderSendButton.js.map CHANGED Viewed

	@@ -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":["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	+ {"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } 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): JSXElement => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState): JSXElement {\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): JSXElement {\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":";;;;+BAUaA;;;eAAAA;;;4BATb;iCAE4B;AAOrB,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"}

package/lib-commonjs/components/SendButton/useSendButton.js CHANGED Viewed

@@ -40,7 +40,7 @@ const useSendButton_unstable = (props, ref)=>{
     }, finalRef);
     const icon = (()=>{
         if (designVersion === 'next') {
-            return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight24Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight16Filled, null);
+            return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight20Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight16Filled, null);
         } else {
             if (props.isSendIconFilled || isButtonMotionRunning) {
                 return /*#__PURE__*/ _react.createElement(_reacticons.SendFilled, null);

package/lib-commonjs/components/SendButton/useSendButton.js.map CHANGED Viewed

	@@ -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 ArrowRight16Filled,\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~~ /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\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~~","ArrowRight16Filled","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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"}
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 ArrowRight20Filled,\n Stop20Filled,\n ArrowRight16Filled,\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' ? <ArrowRight20Filled /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\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","ArrowRight20Filled","ArrowRight16Filled","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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"}

package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js CHANGED Viewed

@@ -252,8 +252,8 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
         B0a1hpu: "f12mm4ns"
     },
     canvas: {
-        Bf4jedk: "f12clzc2",
-        Bqenvij: "fbhnoac"
+        Bf4jedk: "fwbmr0d",
+        Bqenvij: "f1d2rq10"
     },
     sidecar: {
         Bf4jedk: "f107v6xj",
@@ -310,8 +310,8 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
             }
         ],
         ".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;}",
         ".f107v6xj{min-width:28px;}",
         ".fxldao9{height:28px;}"
     ],

package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","dictationActive","Bw0ie65","sendIconFilled","Ijaq50","stopIconFilled","Bj3rh1h","backgroundColor","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Br312pm","nk6f5a","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;KAAuB;;sBAEbvB,IAAAA,yBAAA,EAAA;oBACV;QAEAwB,QAAAA;iBACEX;QACFY,SAAA;QAEAC,SAAAA;gBACEb;QACFc,QAAA;QAEAC,SAAAA;gBACEf;QACFgB,SAAA;QAEAjC,QAAAA;iBACEyB;;2BAEO;gBACPL;iBACAc;;qBAGFC;gBACED;;oBAGFE;gBACEF;;oBAEQ;gBACRjB;;oBAEFoB;iBACEH;QACFI,SAAA;QACFC,QAAA;QAEAR,QAAMS;QACJ3C,SAAM;iBACJQ;gBACAoC;iBACAC;iBACAC;iBACAC;iBACAnC;gBACAC;gBACAmC;;2BAEGC;gBACDC;;mCAEA;gBAEF;;cAEE;;;4BAGF;QACFC,QAAA;;;;;QAIU;QAAA;YAAA;YAAA;gBACVC,GAAA,CAAA;;SAEAC;QAAAA;QAAS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACP3C;;;;QACQ;QAAA;YAAA;YAAA;gBACV0C,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;;SAQF;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"}
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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '32px',\n height: '32px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","dictationActive","Bw0ie65","sendIconFilled","Ijaq50","stopIconFilled","Bj3rh1h","backgroundColor","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Br312pm","nk6f5a","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;KAAuB;;sBAEbvB,IAAAA,yBAAA,EAAA;oBACV;QAEAwB,QAAAA;iBACEX;QACFY,SAAA;QAEAC,SAAAA;gBACEb;QACFc,QAAA;QAEAC,SAAAA;gBACEf;QACFgB,SAAA;QAEAjC,QAAAA;iBACEyB;;2BAEO;gBACPL;iBACAc;;qBAGFC;gBACED;;oBAGFE;gBACEF;;oBAEQ;gBACRjB;;oBAEFoB;iBACEH;QACFI,SAAA;QACFC,QAAA;QAEAR,QAAMS;QACJ3C,SAAM;iBACJQ;gBACAoC;iBACAC;iBACAC;iBACAC;iBACAnC;gBACAC;gBACAmC;;2BAEGC;gBACDC;;mCAEA;gBAEF;;cAEE;;;4BAGF;QACFC,QAAA;;;;;QAIU;QAAA;YAAA;YAAA;gBACVC,GAAA,CAAA;;SAEAC;QAAAA;QAAS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACP3C;;;;QACQ;QAAA;YAAA;YAAA;gBACV0C,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;;SAQF;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 Viewed

@@ -132,8 +132,8 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
         }
     },
     canvas: {
-        minWidth: '40px',
-        height: '40px'
+        minWidth: '32px',
+        height: '32px'
     },
     sidecar: {
         minWidth: '28px',

package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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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"}
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 baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: '32px',\n height: '32px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","baseIconButtonSidecar","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":";;;;;;;;;;;IAYaA,oBAAAA;eAAAA;;IAiOAC,4BAAAA;eAAAA;;;iCAvON;wBACgB;AAKhB,MAAMD,uBAAwD;IACnEE,MAAM;IACNC,UAAU;IACVC,UAAU;IACVC,gBAAgB;IAChBC,kBAAkB;IAClBC,kBAAkB;IAClBC,sBAAsB;AACxB;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BR,MAAM;QACJS,SAAS;QACTC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,YAAY;QACZC,SAAS;IACX;IAEAC,gBAAgB;QACdC,UAAU;QACVH,YAAY;QACZJ,SAAS;QACTQ,gBAAgB;QAChBC,UAAUC,cAAAA,CAAOC,eAAe;QAChCR,QAAQ;QACRF,OAAO;IACT;IAEAW,UAAU;QACRC,OAAOH,cAAAA,CAAOI,8BAA8B;IAC9C;IAEAC,YAAY;QACVF,OAAOH,cAAAA,CAAOM,4BAA4B;QAC1C,UAAU;YACRH,OAAOH,cAAAA,CAAOO,iCAAiC;QACjD;IACF;IAEAvB,gBAAgB;QACda,UAAU;QACVN,OAAO;QACPE,QAAQ;QACRe,cAAcR,cAAAA,CAAOS,oBAAoB;QACzC,iFAAiF,GACjFC,iBAAiBV,cAAAA,CAAOW,qBAAqB;IAC/C;AACF;AAEA,MAAMC,gBAAgBvB,IAAAA,2BAAAA,EAAW;IAC/BO,gBAAgB;QACdN,SAAS;QACTQ,gBAAgB;QAChBe,UAAU;QACVhB,UAAU;QACViB,QAAQ;QACRX,OAAOH,cAAAA,CAAOe,6BAA6B;QAE3C,kCAAkC;YAChCZ,OAAO;QACT;IACF;IAEAa,uBAAuB;QACrBzB,OAAO;QACPE,QAAQ;IACV;IAEAwB,iBAAiB;QACfd,OAAOH,cAAAA,CAAOkB,uBAAuB;IACvC;IAEAC,gBAAgB;QACdhB,OAAOH,cAAAA,CAAOe,6BAA6B;IAC7C;IAEAK,gBAAgB;QACdjB,OAAOH,cAAAA,CAAOqB,qBAAqB;IACrC;IAEArC,gBAAgB;QACd6B,UAAU;QACVpB,QAAQ;QACRF,OAAO;QACPiB,cAAcR,cAAAA,CAAOS,oBAAoB;QACzCC,iBAAiBV,cAAAA,CAAOsB,oBAAoB;IAC9C;IAEAC,uBAAuB;QACrBb,iBAAiBV,cAAAA,CAAOW,qBAAqB;IAC/C;IAEAa,+BAA+B;QAC7Bd,iBAAiBV,cAAAA,CAAOyB,0BAA0B;IACpD;IACAvB,UAAU;QACRC,OAAOH,cAAAA,CAAOI,8BAA8B;IAC9C;IACAsB,wBAAwB;QACtBhB,iBAAiBV,cAAAA,CAAO2B,8BAA8B;IACxD;AACF;AAEA,MAAMC,oBAAoBvC,IAAAA,2BAAAA,EAAW;IACnCR,MAAM;QACJS,SAAS;QACTuC,mBAAmB,CAAC,QAAQ,CAAC;QAC7BC,kBAAkB;QAClBC,qBAAqB;QACrBC,cAAc;QACdtC,YAAY;QACZC,SAASK,cAAAA,CAAOiC,mBAAmB;QACnCC,QAAQ,CAAC,EAAElC,cAAAA,CAAOmC,eAAe,CAAC,OAAO,EAAEnC,cAAAA,CAAOoC,sBAAsB,CAAC,CAAC;QAC1EvC,UAAU;QACV,GAAGwC,IAAAA,gDAAAA,EAAgC;YACjCC,SAAS,CAAC,EAAEtC,cAAAA,CAAOmC,eAAe,CAAC,OAAO,EAAEnC,cAAAA,CAAOoC,sBAAsB,CAAC,MAAM,CAAC;YACjFG,WAAW,CAAC,MAAM,EAAEvC,cAAAA,CAAOmC,eAAe,CAAC,CAAC,EAAEnC,cAAAA,CAAOwC,iBAAiB,CAAC,CAAC;QAC1E,EAAE;QAEF,kCAAkC;YAChC,GAAGC,2BAAAA,CAAWC,WAAW,CAAC,YAAY;YACtC,CAAC,CAAC,GAAG,EAAE/D,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiB;YACnB;QACF;IACF;IAEAiC,QAAQ;QACNnD,UAAU;QACVC,QAAQ;IACV;IAEAmD,SAAS;QACPpD,UAAU;QACVC,QAAQ;IACV;IAEAoD,YAAY;QACV,UAAU;YACR,CAAC,CAAC,GAAG,EAAElE,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAO8C,yBAAyB;gBAEjD,kCAAkC;oBAChCpC,iBAAiB;gBACnB;YACF;YAEA,CAAC,CAAC,GAAG,EAAE/B,qBAAqBG,QAAQ,CAAC,KAAK,EAAEH,qBAAqBI,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC5EoB,OAAOH,cAAAA,CAAOe,6BAA6B;gBAE3C,kCAAkC;oBAChCZ,OAAO;gBACT;YACF;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAExB,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAO+C,2BAA2B;YACrD;QACF;IACF;IACAC,2BAA2B;QACzB,UAAU;YACR,CAAC,CAAC,GAAG,EAAErE,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAOiD,0BAA0B;gBAElD,kCAAkC;oBAChCvC,iBAAiB;gBACnB;YACF;YAEA,CAAC,CAAC,GAAG,EAAE/B,qBAAqBG,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCqB,OAAOH,cAAAA,CAAOkD,4BAA4B;gBAE1C,kCAAkC;oBAChC/C,OAAO;gBACT;YACF;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAExB,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAOmD,4BAA4B;YACtD;YACA,CAAC,CAAC,GAAG,EAAExE,qBAAqBG,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCqB,OAAOH,cAAAA,CAAOoD,8BAA8B;YAC9C;QACF;IACF;IAEAC,SAAS;QACP,UAAU;YACR,CAAC,CAAC,GAAG,EAAE1E,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAOsD,0BAA0B;gBAElD,kCAAkC;oBAChC5C,iBAAiB;gBACnB;YACF;YACA,CAAC,CAAC,GAAG,EAAE/B,qBAAqBI,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCoB,OAAOH,cAAAA,CAAOuD,0BAA0B;gBAExC,kCAAkC;oBAChCpD,OAAO;gBACT;YACF;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAExB,qBAAqBK,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7C0B,iBAAiBV,cAAAA,CAAOwD,4BAA4B;YACtD;YACA,CAAC,CAAC,GAAG,EAAE7E,qBAAqBI,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCoB,OAAOH,cAAAA,CAAOyD,4BAA4B;YAC5C;QACF;IACF;AACF;AAKO,MAAM7E,+BAA+B,CAAC8E;IAC3C;IACA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAEC,SAAS,EAAE3D,QAAQ,EAAE4D,aAAa,EAAEC,IAAI,EAAE,GAAGL;IAE1F,MAAMM,SAAS5E;IACf,MAAM6E,aAAarD;IACnB,MAAMsD,iBAAiBtC;IAEvB,MAAMuC,sBAAsBL,kBAAkB,SAASG,WAAW9C,cAAc,GAAG6C,OAAO3D,UAAU;IACpG,MAAM+D,sBAAsBN,kBAAkB,SAASG,WAAW7C,cAAc,GAAG4C,OAAO3D,UAAU;IAEpGqD,MAAM7E,IAAI,CAACwF,SAAS,GAAGC,IAAAA,6BAAAA,EACrB3F,qBAAqBE,IAAI,EACzBiF,kBAAkB,SAASI,eAAerF,IAAI,GAAGmF,OAAOnF,IAAI,EAC5D+E,oBAAoBO,qBACpB,AAACT,CAAAA,MAAMa,qBAAqB,IAAIV,SAAAA,KAAcM,qBAC9CL,kBAAkB,UAAUI,cAAc,CAACH,KAAK,EAChDD,kBAAkB,UAAUI,eAAerF,IAAI,EAC/C,CAACqB,YACC4D,kBAAkB,UAClB,CAACD,aACAF,CAAAA,oBAAoBO,eAAelB,yBAAyB,GAAGkB,eAAerB,UAAU,AAAVA,GACjF,CAAC3C,YAAY4D,kBAAkB,UAAUD,aAAaK,eAAeb,OAAO,EAC5EnD,YAAY8D,OAAO9D,QAAQ,EAC3BwD,MAAM7E,IAAI,CAACwF,SAAS;IAGtB,IAAIX,MAAM5E,QAAQ,EAAE;QAClB4E,MAAM5E,QAAQ,CAACuF,SAAS,GAAGC,IAAAA,6BAAAA,EACzB3F,qBAAqBG,QAAQ,EAC7BgF,kBAAkB,SAASG,WAAWrE,cAAc,GAAGoE,OAAOpE,cAAc,EAC5EkE,kBAAkB,UAAUC,SAAS,aAAaE,WAAWjD,qBAAqB,EAClF,CAACd,YAAY4D,kBAAkB,UAAU,CAACD,aAAaF,qBAAqBM,WAAWhD,eAAe,EACtGf,YAAY4D,kBAAkB,UAAUG,WAAW/D,QAAQ,EAC3DwD,MAAM5E,QAAQ,CAACuF,SAAS;IAE5B;IAEA,IAAIX,MAAM3E,QAAQ,EAAE;QAClB2E,MAAM3E,QAAQ,CAACsF,SAAS,GAAGC,IAAAA,6BAAAA,EACzB3F,qBAAqBI,QAAQ,EAC7B+E,kBAAkB,SAASG,WAAWrE,cAAc,GAAGoE,OAAOpE,cAAc,EAC5EwE,qBACAV,MAAM3E,QAAQ,CAACsF,SAAS;IAE5B;IAEA,IAAIX,MAAM1E,cAAc,EAAE;QACxB0E,MAAM1E,cAAc,CAACqF,SAAS,GAAGC,IAAAA,6BAAAA,EAC/B3F,qBAAqBK,cAAc,EACnC8E,kBAAkB,SAASG,WAAWjF,cAAc,GAAGgF,OAAOhF,cAAc,EAC5E8E,kBAAkB,UAAUD,aAAaI,WAAW1C,qBAAqB,EACzEuC,kBAAkB,UAAU,CAACD,aAAaF,qBAAqBM,WAAWzC,6BAA6B,EACvGsC,kBAAkB,UAAU5D,YAAY+D,WAAWvC,sBAAsB,EACzEgC,MAAM1E,cAAc,CAACqF,SAAS;IAElC;IAEA,8BAA8B;IAC9BG,IAAAA,yCAAAA,EAAyB;QAAE,GAAGd,KAAK;QAAEe,YAAY;YAAE,GAAGf,MAAMe,UAAU;YAAEC,MAAM;QAAO;QAAGC,UAAU;IAAM;IAExG,OAAOjB;AACT"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-send-button",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,21 +12,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.12.5",
-    "@fluentui-copilot/react-utilities": "^0.0.10",
-    "@fluentui-copilot/tokens": "^0.3.14",
+    "@fluentui-copilot/react-provider": "^0.12.6",
+    "@fluentui-copilot/react-utilities": "~0.0.11",
+    "@fluentui-copilot/tokens": "^0.3.15",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.66.0 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "@fluentui/react-icons": ">=2.0.303 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.1.1 <10.0.0",
-    "@fluentui/react-motion": ">=9.8.1 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.24.0 <10.0.0",
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.8 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@fluentui/react-jsx-runtime": ">=9.2.0 <10.0.0",
+    "@fluentui/react-motion": ">=9.10.4 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.25.1 <10.0.0",
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.8 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [