@fluentui-copilot/react-send-button 0.0.0-nightly-20250703-0404-3a2097a9.1 → 0.0.0-nightly-20250708-1433-52f2b6b1.1

package/lib/components/SendButton/useSendButton.js

@@ -13,101 +13,99 @@ const SendIcon = bundleIcon(SendFilled, SendRegular);
  *
  * @param props - props from this instance of SendButton
  * @param ref - reference to root HTMLElement of SendButton
- */
-export const useSendButton_unstable = (props, ref) => {
-  /** Used to apply/remove styles when button is animating */const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);
-  const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);
-  const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;
-  const designVersion = useDesignVersion(props.designVersion);
-  const mode = useCopilotMode(props.mode);
-  const [visible, setVisible] = React.useState(false);
-  const mountRef = React.useCallback(elem => {
-    if (elem) {
-      setVisible(true);
-    } else {
-      setVisible(false);
-    }
-  }, []);
-  const finalRef = useMergedRefs(ref, mountRef);
-  const buttonState = useButton_unstable({
-    shape: designVersion === 'next' ? 'circular' : undefined,
-    ...props,
-    appearance: 'transparent',
-    'aria-disabled': props.disabled ? true : undefined,
-    type: 'submit'
-  }, finalRef);
-  const icon = (() => {
-    if (designVersion === 'next') {
-      return mode === 'canvas' ? /*#__PURE__*/React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/React.createElement(ArrowRight20Filled, null);
-    } else {
-      if (props.isSendIconFilled || isButtonMotionRunning) {
-        return /*#__PURE__*/React.createElement(SendFilled, null);
-      } else {
-        return /*#__PURE__*/React.createElement(SendIcon, null);
-      }
-    }
-  })();
-  var _props_isDictationActive;
-  const state = {
-    ...buttonState,
-    components: {
-      root: 'button',
-      sendIcon: 'span',
-      stopIcon: 'span',
-      stopBackground: 'div',
-      sendButtonMotion: SendButtonMotion,
-      stopButtonMotion: StopButtonMotion,
-      stopBackgroundMotion: CircleButtonMotion
-    },
-    root: buttonState.root,
-    sendIcon: slot.always(props.sendIcon, {
-      elementType: 'span',
-      defaultProps: {
-        children: icon
-      }
-    }),
-    stopIcon: slot.optional(props.stopIcon, {
-      elementType: 'span',
-      defaultProps: {
-        children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/React.createElement(Stop20Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null)
-      },
-      renderByDefault: true
-    }),
-    stopBackground: slot.always(props.stopBackground, {
-      elementType: 'div'
-    }),
-    sendButtonMotion: presenceMotionSlot(props.sendButtonMotion, {
-      elementType: SendButtonMotion,
-      defaultProps: {
-        visible: !props.isSending,
-        unmountOnExit: true,
-        onMotionFinish: () => setIsSendMotionRunning(false),
-        onMotionStart: () => setIsSendMotionRunning(true)
-      }
-    }),
-    stopButtonMotion: presenceMotionSlot(props.stopButtonMotion, {
-      elementType: StopButtonMotion,
-      defaultProps: {
-        visible: props.isSending,
-        unmountOnExit: true,
-        onMotionFinish: () => setIsStopMotionRunning(false),
-        onMotionStart: () => setIsStopMotionRunning(true)
-      }
-    }),
-    stopBackgroundMotion: presenceMotionSlot(props.stopBackgroundMotion, {
-      elementType: CircleButtonMotion,
-      defaultProps: {
-        visible: designVersion === 'next' ? visible : props.isSending,
-        unmountOnExit: true
-      }
-    }),
-    isButtonMotionRunning,
-    isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
-    isSendIconFilled: props.isSendIconFilled,
-    isSending: props.isSending,
-    designVersion,
-    mode
-  };
-  return state;
+ */ export const useSendButton_unstable = (props, ref)=>{
+    /** Used to apply/remove styles when button is animating */ const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);
+    const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);
+    const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;
+    const designVersion = useDesignVersion(props.designVersion);
+    const mode = useCopilotMode(props.mode);
+    const [visible, setVisible] = React.useState(false);
+    const mountRef = React.useCallback((elem)=>{
+        if (elem) {
+            setVisible(true);
+        } else {
+            setVisible(false);
+        }
+    }, []);
+    const finalRef = useMergedRefs(ref, mountRef);
+    const buttonState = useButton_unstable({
+        shape: designVersion === 'next' ? 'circular' : undefined,
+        ...props,
+        appearance: 'transparent',
+        'aria-disabled': props.disabled ? true : undefined,
+        type: 'submit'
+    }, finalRef);
+    const icon = (()=>{
+        if (designVersion === 'next') {
+            return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight20Filled, null);
+        } else {
+            if (props.isSendIconFilled || isButtonMotionRunning) {
+                return /*#__PURE__*/ React.createElement(SendFilled, null);
+            } else {
+                return /*#__PURE__*/ React.createElement(SendIcon, null);
+            }
+        }
+    })();
+    var _props_isDictationActive;
+    const state = {
+        ...buttonState,
+        components: {
+            root: 'button',
+            sendIcon: 'span',
+            stopIcon: 'span',
+            stopBackground: 'div',
+            sendButtonMotion: SendButtonMotion,
+            stopButtonMotion: StopButtonMotion,
+            stopBackgroundMotion: CircleButtonMotion
+        },
+        root: buttonState.root,
+        sendIcon: slot.always(props.sendIcon, {
+            elementType: 'span',
+            defaultProps: {
+                children: icon
+            }
+        }),
+        stopIcon: slot.optional(props.stopIcon, {
+            elementType: 'span',
+            defaultProps: {
+                children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/ React.createElement(Stop20Filled, null) : /*#__PURE__*/ React.createElement(Stop16Filled, null) : /*#__PURE__*/ React.createElement(Stop16Filled, null)
+            },
+            renderByDefault: true
+        }),
+        stopBackground: slot.always(props.stopBackground, {
+            elementType: 'div'
+        }),
+        sendButtonMotion: presenceMotionSlot(props.sendButtonMotion, {
+            elementType: SendButtonMotion,
+            defaultProps: {
+                visible: !props.isSending,
+                unmountOnExit: true,
+                onMotionFinish: ()=>setIsSendMotionRunning(false),
+                onMotionStart: ()=>setIsSendMotionRunning(true)
+            }
+        }),
+        stopButtonMotion: presenceMotionSlot(props.stopButtonMotion, {
+            elementType: StopButtonMotion,
+            defaultProps: {
+                visible: props.isSending,
+                unmountOnExit: true,
+                onMotionFinish: ()=>setIsStopMotionRunning(false),
+                onMotionStart: ()=>setIsStopMotionRunning(true)
+            }
+        }),
+        stopBackgroundMotion: presenceMotionSlot(props.stopBackgroundMotion, {
+            elementType: CircleButtonMotion,
+            defaultProps: {
+                visible: designVersion === 'next' ? visible : props.isSending,
+                unmountOnExit: true
+            }
+        }),
+        isButtonMotionRunning,
+        isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
+        isSendIconFilled: props.isSendIconFilled,
+        isSending: props.isSending,
+        designVersion,
+        mode
+    };
+    return state;
 };
-//# sourceMappingURL=useSendButton.js.map

package/lib/components/SendButton/useSendButtonStyles.styles.raw.js

@@ -0,0 +1,193 @@
+import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const sendButtonClassNames = {
+    root: 'fai-SendButton',
+    sendIcon: 'fai-SendButton__sendIcon',
+    stopIcon: 'fai-SendButton__stopIcon',
+    stopBackground: 'fai-SendButton__stopBackground',
+    sendButtonMotion: 'fai-SendButton__sendButtonMotion',
+    stopButtonMotion: 'fai-SendButton__stopButtonMotion',
+    stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        width: '32px',
+        minWidth: '32px',
+        height: '32px',
+        alignItems: 'center',
+        padding: '0'
+    },
+    baseIconButton: {
+        position: 'absolute',
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        fontSize: tokens.fontSizeBase500,
+        height: '20px',
+        width: '20px'
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    iconFilled: {
+        color: tokens.colorCompoundBrandBackground,
+        ':hover': {
+            color: tokens.colorCompoundBrandBackgroundHover
+        }
+    },
+    stopBackground: {
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        borderRadius: tokens.borderRadiusCircular,
+        /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: tokens.colorBrandBackground2
+    }
+});
+const useNextStyles = makeStyles({
+    baseIconButton: {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        gridArea: 'button',
+        position: 'initial',
+        zIndex: 1,
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    dictationActive: {
+        color: tokens.colorNeutralForeground2
+    },
+    sendIconFilled: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    stopIconFilled: {
+        color: tokens.colorBrandForeground2
+    },
+    stopBackground: {
+        gridArea: 'button',
+        height: '100%',
+        width: '100%',
+        borderRadius: tokens.borderRadiusCircular,
+        backgroundColor: tokens.colorBrandBackground
+    },
+    stopBackgroundSending: {
+        backgroundColor: tokens.colorBrandBackground2
+    },
+    stopBackgroundDictationActive: {
+        backgroundColor: tokens.colorTransparentBackground
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    stopBackgroundDisabled: {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled
+    }
+});
+const useRootNextStyles = makeStyles({
+    root: {
+        display: 'grid',
+        gridTemplateAreas: `"button"`,
+        gridTemplateRows: '1fr',
+        gridTemplateColumns: '1fr',
+        justifyItems: 'center',
+        alignItems: 'center',
+        padding: tokens.spacingVerticalNone,
+        border: 'none',
+        position: 'relative',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
+            boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
+        })
+    },
+    canvas: {
+        minWidth: '40px',
+        height: '40px'
+    },
+    sidecar: {
+        minWidth: '32px',
+        height: '32px'
+    },
+    notSending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackgroundHover
+            },
+            [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackgroundPressed
+            }
+        }
+    },
+    notSendingDictationActive: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorSubtleBackgroundHover
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorSubtleBackgroundPressed
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    sending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackground2Hover
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorBrandForeground2Hover
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackground2Pressed
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorBrandForeground2Pressed
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the SendButton slots based on the state
+ */ export const useSendButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const rootNextStyles = useRootNextStyles();
+    const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
+    const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
+    state.root.className = mergeClasses(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
+    if (state.sendIcon) {
+        state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
+    }
+    if (state.stopIcon) {
+        state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
+    }
+    if (state.stopBackground) {
+        state.stopBackground.className = mergeClasses(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
+    }
+    // Add style hooks from button
+    useButtonStyles_unstable({
+        ...state,
+        components: {
+            ...state.components,
+            icon: 'span'
+        },
+        iconOnly: false
+    });
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  mergeClasses,\n  useButtonStyles_unstable,\n  createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n  root: 'fai-SendButton',\n  sendIcon: 'fai-SendButton__sendIcon',\n  stopIcon: 'fai-SendButton__stopIcon',\n  stopBackground: 'fai-SendButton__stopBackground',\n  sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n  stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    width: '32px',\n    minWidth: '32px',\n    height: '32px',\n    alignItems: 'center',\n    padding: '0',\n  },\n\n  baseIconButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: tokens.fontSizeBase500, // 20px\n    height: '20px',\n    width: '20px',\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n\n  iconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      color: tokens.colorCompoundBrandBackgroundHover,\n    },\n  },\n\n  stopBackground: {\n    position: 'absolute',\n    width: 'inherit',\n    height: 'inherit',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  baseIconButton: {\n    display: 'inline-flex',\n    justifyContent: 'center',\n    gridArea: 'button',\n    position: 'initial',\n    zIndex: 1,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  dictationActive: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  sendIconFilled: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  stopIconFilled: {\n    color: tokens.colorBrandForeground2,\n  },\n\n  stopBackground: {\n    gridArea: 'button',\n    height: '100%',\n    width: '100%',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorBrandBackground,\n  },\n\n  stopBackgroundSending: {\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n\n  stopBackgroundDictationActive: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  stopBackgroundDisabled: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateAreas: `\"button\"`,\n    gridTemplateRows: '1fr',\n    gridTemplateColumns: '1fr',\n    justifyItems: 'center',\n    alignItems: 'center',\n    padding: tokens.spacingVerticalNone,\n    border: 'none',\n    position: 'relative',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n    }),\n  },\n\n  canvas: {\n    minWidth: '40px',\n    height: '40px',\n  },\n\n  sidecar: {\n    minWidth: '32px',\n    height: '32px',\n  },\n\n  notSending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundPressed,\n      },\n    },\n  },\n  notSendingDictationActive: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  sending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Pressed,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n  'use no memo';\n  const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const rootNextStyles = useRootNextStyles();\n\n  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n  state.root.className = mergeClasses(\n    sendButtonClassNames.root,\n    designVersion === 'next' ? rootNextStyles.root : styles.root,\n    isSendIconFilled && sendIconFilledStyle,\n    (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n    designVersion === 'next' && rootNextStyles[mode],\n    designVersion === 'next' && rootNextStyles.root,\n    !disabled &&\n      designVersion === 'next' &&\n      !isSending &&\n      (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n    !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.sendIcon) {\n    state.sendIcon.className = mergeClasses(\n      sendButtonClassNames.sendIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n      disabled && designVersion === 'next' && nextStyles.disabled,\n      state.sendIcon.className,\n    );\n  }\n\n  if (state.stopIcon) {\n    state.stopIcon.className = mergeClasses(\n      sendButtonClassNames.stopIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      stopIconFilledStyle,\n      state.stopIcon.className,\n    );\n  }\n\n  if (state.stopBackground) {\n    state.stopBackground.className = mergeClasses(\n      sendButtonClassNames.stopBackground,\n      designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n      designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n      designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n      designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n      state.stopBackground.className,\n    );\n  }\n\n  // Add style hooks from button\n  useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/index.js

@@ -1,2 +1 @@
 export { SendButton, renderSendButton_unstable, sendButtonClassNames, useSendButtonStyles_unstable, useSendButton_unstable } from './SendButton';
-//# sourceMappingURL=index.js.map

package/lib-commonjs/SendButton.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _SendButton = require("./components/SendButton");
- //# sourceMappingURL=SendButton.js.map

package/lib-commonjs/components/SendButton/SendButton.js

@@ -18,4 +18,4 @@ const SendButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useSendButtonStylesstyles.useSendButtonStyles_unstable)(state);
     return (0, _renderSendButton.renderSendButton_unstable)(state);
 });
-SendButton.displayName = 'SendButton'; //# sourceMappingURL=SendButton.js.map
+SendButton.displayName = 'SendButton';

package/lib-commonjs/components/SendButton/SendButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSendButton_unstable(props, ref);\n\n  useSendButtonStyles_unstable(state);\n  return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAAA,OAAmDC,UAAMC,CAAU,CAACC,OAACA;UAChFC,QAAMA,IAAAA,qCAAQC,EAAAA,OAAuBF;+DAErCG,EAAAA;WACAC,IAAAA,2CAAOA,EAAAA;AACT;AAEAP,WAAWQ,WAAW,GAAG"}
+{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSendButton_unstable(props, ref);\n\n  useSendButtonStyles_unstable(state);\n  return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","ref","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}

package/lib-commonjs/components/SendButton/SendButton.types.js

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=SendButton.types.js.map

package/lib-commonjs/components/SendButton/buttonMotion.js

@@ -230,4 +230,4 @@ const circleMotion = ()=>{
 };
 const SendButtonMotion = (0, _reactcomponents.createPresenceComponent)(sendMotion);
 const StopButtonMotion = (0, _reactcomponents.createPresenceComponent)(stopMotion);
-const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion); //# sourceMappingURL=buttonMotion.js.map
+const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion);

package/lib-commonjs/components/SendButton/buttonMotion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ transform: `scale(0)` }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n      duration: motionTokens.durationNormal * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationSlow * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n      duration: motionTokens.durationSlow * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n      delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ opacity: 0 }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ opacity: 1 }],\n      duration: 0,\n      delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n    },\n    {\n      keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n      duration: motionTokens.durationSlower * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n      duration: motionTokens.durationFaster,\n      easing: motionTokens.curveDecelerateMin,\n      delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ opacity: 0 }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ opacity: 0 }, { opacity: 1 }],\n      duration: 0,\n      delay: motionTokens.durationFaster * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n      duration: motionTokens.durationSlow * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationFaster * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n      duration: motionTokens.durationNormal * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMin,\n      delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n      duration: motionTokens.durationFaster * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMin,\n      delay: motionTokens.durationFast * motionSpeedMultiplier,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","duration","delay","motionTokens","scaleSend","startScaleStop","scaleStop","startScaleCircle","scaleCircle","motionSpeedMultiplier","sendMotion","enterKeyframes","keyframes","durationNormal","transform","durationSlow","curveDecelerateMid","durationFast","exitKeyframes","stopMotion","durationSlower","curveDecelerateMax","durationUltraFast","durationFaster","curveDecelerateMin","opacity","easing","enter","circleMotion","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ transform: `scale(0)` }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n      duration: motionTokens.durationNormal * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationSlow * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n      duration: motionTokens.durationSlow * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n      delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ opacity: 0 }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ opacity: 1 }],\n      duration: 0,\n      delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n    },\n    {\n      keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n      duration: motionTokens.durationSlower * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMid,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n      duration: motionTokens.durationFaster,\n      easing: motionTokens.curveDecelerateMin,\n      delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n  const enterKeyframes = [\n    {\n      keyframes: [{ opacity: 0 }],\n      duration: 0,\n    },\n    {\n      keyframes: [{ opacity: 0 }, { opacity: 1 }],\n      duration: 0,\n      delay: motionTokens.durationFaster * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n      duration: motionTokens.durationSlow * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n      delay: motionTokens.durationFaster * motionSpeedMultiplier,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n      duration: motionTokens.durationNormal * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMin,\n      delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n    },\n  ];\n\n  const exitKeyframes = [\n    {\n      keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n      duration: motionTokens.durationFast * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMax,\n    },\n    {\n      keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n      duration: motionTokens.durationFaster * motionSpeedMultiplier,\n      easing: motionTokens.curveDecelerateMin,\n      delay: motionTokens.durationFast * motionSpeedMultiplier,\n    },\n  ];\n\n  return {\n    enter: enterKeyframes,\n    exit: exitKeyframes,\n  };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","SendButtonMotion","StopButtonMotion","scaleSend","startScaleStop","scaleStop","startScaleCircle","scaleCircle","motionSpeedMultiplier","sendMotion","enterKeyframes","keyframes","transform","duration","motionTokens","durationNormal","easing","curveDecelerateMax","delay","durationSlow","curveDecelerateMid","exitKeyframes","durationFast","enter","exit","stopMotion","opacity","durationSlower","durationUltraFast","durationFaster","curveDecelerateMin","circleMotion","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/SendButton/index.js

@@ -29,4 +29,3 @@ const _SendButton = require("./SendButton");
 const _renderSendButton = require("./renderSendButton");
 const _useSendButton = require("./useSendButton");
 const _useSendButtonStylesstyles = require("./useSendButtonStyles.styles");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/SendButton/renderSendButton.js

@@ -51,4 +51,4 @@ function renderSendButtonNext(state) {
             })
         ]
     });
-} //# sourceMappingURL=renderSendButton.js.map
+}

package/lib-commonjs/components/SendButton/renderSendButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SendButtonState, SendButtonSlots } from './SendButton.types';\n\n/**\n * Render the final JSX of SendButton\n */\nexport const renderSendButton_unstable = (state: SendButtonState) => {\n  if (state.designVersion === 'next') {\n    return renderSendButtonNext(state);\n  }\n\n  return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState) {\n  assertSlots<SendButtonSlots>(state);\n\n  return (\n    <state.root>\n      {state.stopIcon && (\n        <>\n          <state.stopBackgroundMotion>\n            <state.stopBackground />\n          </state.stopBackgroundMotion>\n          <state.stopButtonMotion>\n            <state.stopIcon />\n          </state.stopButtonMotion>\n        </>\n      )}\n      <state.sendButtonMotion>\n        <state.sendIcon />\n      </state.sendButtonMotion>\n    </state.root>\n  );\n}\n\nfunction renderSendButtonNext(state: SendButtonState) {\n  assertSlots<SendButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.stopBackgroundMotion>\n        <state.stopBackground />\n      </state.stopBackgroundMotion>\n      {state.stopIcon && (\n        <state.stopButtonMotion>\n          <state.stopIcon />\n        </state.stopButtonMotion>\n      )}\n      <state.sendButtonMotion>\n        <state.sendIcon />\n      </state.sendButtonMotion>\n    </state.root>\n  );\n}\n"],"names":["state","designVersion","renderSendButtonNext","renderSendButtonCurrent","assertSlots","stopIcon","_jsxs","_Fragment","stopBackgroundMotion","stopButtonMotion","children","_jsx","stopBackground"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUMA;;;eAAAA;;;4BATN;iCAE4B;AAO1B,MAAIA,4BAAgCA,CAAAA;cAClCC,aAAOC,KAAAA,QAAqBF;QAC9B,OAAAE,qBAAAF;;IAGA,OAAAG,wBAAAH;AAEF;SACEI,wBAA6BJ,KAAAA;oCAE7B,EAAAA;;kBAEKA;YAAAA,MAAMK,QAAQ,IAAA,WACb,GAAAC,IAAAA,gBAAA,EAAAC,oBAAA,EAAA;;;mEACE,EAAAP,MAACA,cAAMQ,EAAAA,CAAAA;;6DACLC,gBAAA,EAAA;;;;;qEAGA,EAAA;;;;;;8BAKJT,KAAA;;;;;gBAIRU,UAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAX,MAAAY,cAAA,EAAA,CAAA;YAEA;YAAAZ,MAASE,QAAAA,IAAAA,WAA2C,GAAAS,IAAAA,eAAA,EAAAX,MAAAS,gBAAA,EAAA;gBAClDL,UAA6BJ,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,QAAAA,EAAAA,CAAAA;YAE7B;YAAA,WAAA,GAAAW,IAAAA,eACE,EAAAX,MAACA,gBAAU,EAAA;;;;;8CAKP"}
+{"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"}

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

@@ -111,4 +111,4 @@ const useSendButton_unstable = (props, ref)=>{
         mode
     };
     return state;
-}; //# sourceMappingURL=useSendButton.js.map
+};