@fluentui-copilot/react-send-button 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251013-0406-7c7739c8.1

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

@@ -0,0 +1,412 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sendButtonClassNames: function() {
+        return sendButtonClassNames;
+    },
+    useSendButtonStyles_unstable: function() {
+        return useSendButtonStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+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 = (0, _reactcomponents.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        a9b677: "f1szoe96",
+        Bf4jedk: "fwbmr0d",
+        Bqenvij: "f1d2rq10",
+        Bt984gj: "f122n59",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1mk8lai"
+    },
+    baseIconButton: {
+        qhf8xq: "f1euv43f",
+        Bt984gj: "f122n59",
+        mc9l5x: "ftuwxu6",
+        Brf1p80: "f4d9j23",
+        Be2twd7: "f1pp30po",
+        Bqenvij: "fjamq6b",
+        a9b677: "f64fuq3"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o"
+    },
+    iconFilled: {
+        sj55zd: "f1oyzx04",
+        Bi91k9c: "f1m1wcaq"
+    },
+    stopBackground: {
+        qhf8xq: "f1euv43f",
+        a9b677: "f2q8o33",
+        Bqenvij: "fwk23hs",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9",
+        De3pzq: "f16xkysk"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1szoe96{width:32px;}",
+        ".fwbmr0d{min-width:32px;}",
+        ".f1d2rq10{height:32px;}",
+        ".f122n59{align-items:center;}",
+        [
+            ".f1mk8lai{padding:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1euv43f{position:absolute;}",
+        ".ftuwxu6{display:inline-flex;}",
+        ".f4d9j23{justify-content:center;}",
+        ".f1pp30po{font-size:var(--fontSizeBase500);}",
+        ".fjamq6b{height:20px;}",
+        ".f64fuq3{width:20px;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1oyzx04{color:var(--colorCompoundBrandBackground);}",
+        ".f2q8o33{width:inherit;}",
+        ".fwk23hs{height:inherit;}",
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        ".f16xkysk{background-color:var(--colorBrandBackground2);}"
+    ],
+    h: [
+        ".f1m1wcaq:hover{color:var(--colorCompoundBrandBackgroundHover);}"
+    ]
+});
+const useNextStyles = (0, _reactcomponents.__styles)({
+    baseIconButton: {
+        mc9l5x: "ftuwxu6",
+        Brf1p80: "f4d9j23",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fwzfryc",
+        qhf8xq: "f1tmlkn4",
+        Bj3rh1h: "f19g0ac",
+        sj55zd: "f1phragk",
+        B7iucu3: "fqc85l4"
+    },
+    baseIconButtonSidecar: {
+        a9b677: "fjw5fx7",
+        Bqenvij: "fd461yt"
+    },
+    dictationActive: {
+        sj55zd: "fkfq4zb"
+    },
+    sendIconFilled: {
+        sj55zd: "f1phragk"
+    },
+    stopIconFilled: {
+        sj55zd: "faj9fo0"
+    },
+    stopBackground: {
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fwzfryc",
+        Bqenvij: "f1l02sjl",
+        a9b677: "fly5x3f",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9",
+        De3pzq: "ffp7eso"
+    },
+    stopBackgroundSending: {
+        De3pzq: "f16xkysk"
+    },
+    stopBackgroundDictationActive: {
+        De3pzq: "f1c21dwh"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o"
+    },
+    stopBackgroundDisabled: {
+        De3pzq: "f1bg9a2p"
+    }
+}, {
+    d: [
+        ".ftuwxu6{display:inline-flex;}",
+        ".f4d9j23{justify-content:center;}",
+        [
+            ".fwzfryc{grid-area:button;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1tmlkn4{position:initial;}",
+        ".f19g0ac{z-index:1;}",
+        ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
+        ".fjw5fx7{width:16px;}",
+        ".fd461yt{height:16px;}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".faj9fo0{color:var(--colorBrandForeground2);}",
+        [
+            ".fwzfryc{grid-area:button;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1l02sjl{height:100%;}",
+        ".fly5x3f{width:100%;}",
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        ".ffp7eso{background-color:var(--colorBrandBackground);}",
+        ".f16xkysk{background-color:var(--colorBrandBackground2);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fqc85l4{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useRootNextStyles = (0, _reactcomponents.__styles)({
+    root: {
+        mc9l5x: "f13qh94s",
+        zoa1oz: "f9o42qa",
+        wkccdc: "f1u7ey36",
+        Budl1dq: "f1c2z91y",
+        B7hvi0a: "f1oiokrs",
+        Bt984gj: "f122n59",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fv5o1b5",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f88035w",
+        qhf8xq: "f10pi13n",
+        Bfpq7zp: 0,
+        g9k6zt: 0,
+        Bn4voq9: 0,
+        giviqs: "f1m9av4t",
+        j6ew2k: "f1nlh5rk",
+        Bcq6wej: "fjq791v",
+        Jcjdmf: [
+            "fkq2p2y",
+            "f1sehlss"
+        ],
+        sc4o1m: "f11odvng",
+        Bosien3: [
+            "f1sehlss",
+            "fkq2p2y"
+        ],
+        B0a1hpu: "f12mm4ns"
+    },
+    canvas: {
+        Bf4jedk: "fwbmr0d",
+        Bqenvij: "f1d2rq10"
+    },
+    sidecar: {
+        Bf4jedk: "f107v6xj",
+        Bqenvij: "fxldao9"
+    },
+    notSending: {
+        Bmdhgnd: "fiaw31n",
+        Buhwtog: "fmv7hed",
+        Bsyoesm: "f10g5jnj",
+        B5xjowy: "f1hzts53",
+        f30giq: "f3l45fr"
+    },
+    notSendingDictationActive: {
+        Bmdhgnd: "fkhxdak",
+        Buhwtog: "fmv7hed",
+        jhc297: "f1dxmfzy",
+        B885nwu: "f175mo2",
+        f30giq: "f1zsivl",
+        Ba808g4: "f50srwi"
+    },
+    sending: {
+        Bmdhgnd: "f1hzdlu9",
+        Buhwtog: "fmv7hed",
+        uj1ttc: "fe9pnmy",
+        E4wjbi: "f18cpvo8",
+        f30giq: "f876z59",
+        Bssu2nw: "fqsoy9w"
+    }
+}, {
+    d: [
+        ".f13qh94s{display:grid;}",
+        ".f9o42qa{grid-template-areas:\"button\";}",
+        ".f1u7ey36{grid-template-rows:1fr;}",
+        ".f1c2z91y{grid-template-columns:1fr;}",
+        ".f1oiokrs{justify-items:center;}",
+        ".f122n59{align-items:center;}",
+        [
+            ".fv5o1b5{padding:var(--spacingVerticalNone);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                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);}",
+        ".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;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ],
+    h: [
+        ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}",
+        ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
+        ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}",
+        ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}",
+        ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}",
+        ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"
+    ],
+    a: [
+        ".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}",
+        ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}",
+        ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}",
+        ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}",
+        ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"
+    ]
+});
+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 = (0, _reactcomponents.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 = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
+    }
+    if (state.stopIcon) {
+        state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
+    }
+    if (state.stopBackground) {
+        state.stopBackground.className = (0, _reactcomponents.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
+    (0, _reactcomponents.useButtonStyles_unstable)({
+        ...state,
+        components: {
+            ...state.components,
+            icon: 'span'
+        },
+        iconOnly: false
+    });
+    return state;
+}; //# sourceMappingURL=useSendButtonStyles.styles.js.map

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

@@ -0,0 +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

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sendButtonClassNames: function() {
+        return sendButtonClassNames;
+    },
+    useSendButtonStyles_unstable: function() {
+        return useSendButtonStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+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 = (0, _reactcomponents.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.tokens.fontSizeBase500,
+        height: '20px',
+        width: '20px'
+    },
+    disabled: {
+        color: _tokens.tokens.colorNeutralForegroundDisabled
+    },
+    iconFilled: {
+        color: _tokens.tokens.colorCompoundBrandBackground,
+        ':hover': {
+            color: _tokens.tokens.colorCompoundBrandBackgroundHover
+        }
+    },
+    stopBackground: {
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        borderRadius: _tokens.tokens.borderRadiusCircular,
+        /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: _tokens.tokens.colorBrandBackground2
+    }
+});
+const useNextStyles = (0, _reactcomponents.makeStyles)({
+    baseIconButton: {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        gridArea: 'button',
+        position: 'initial',
+        zIndex: 1,
+        color: _tokens.tokens.colorNeutralForegroundOnBrand,
+        '@media (forced-colors: active)': {
+            color: 'HighlightText'
+        }
+    },
+    baseIconButtonSidecar: {
+        width: '16px',
+        height: '16px'
+    },
+    dictationActive: {
+        color: _tokens.tokens.colorNeutralForeground2
+    },
+    sendIconFilled: {
+        color: _tokens.tokens.colorNeutralForegroundOnBrand
+    },
+    stopIconFilled: {
+        color: _tokens.tokens.colorBrandForeground2
+    },
+    stopBackground: {
+        gridArea: 'button',
+        height: '100%',
+        width: '100%',
+        borderRadius: _tokens.tokens.borderRadiusCircular,
+        backgroundColor: _tokens.tokens.colorBrandBackground
+    },
+    stopBackgroundSending: {
+        backgroundColor: _tokens.tokens.colorBrandBackground2
+    },
+    stopBackgroundDictationActive: {
+        backgroundColor: _tokens.tokens.colorTransparentBackground
+    },
+    disabled: {
+        color: _tokens.tokens.colorNeutralForegroundDisabled
+    },
+    stopBackgroundDisabled: {
+        backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled
+    }
+});
+const useRootNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        display: 'grid',
+        gridTemplateAreas: `"button"`,
+        gridTemplateRows: '1fr',
+        gridTemplateColumns: '1fr',
+        justifyItems: 'center',
+        alignItems: 'center',
+        padding: _tokens.tokens.spacingVerticalNone,
+        border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`,
+        position: 'relative',
+        ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
+            outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke} inset`,
+            boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThin} ${_tokens.tokens.colorStrokeFocus2}`
+        }),
+        '@media (forced-colors: active)': {
+            ..._reactcomponents.shorthands.borderColor('Highlight'),
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: 'Highlight'
+            }
+        }
+    },
+    canvas: {
+        minWidth: '32px',
+        height: '32px'
+    },
+    sidecar: {
+        minWidth: '28px',
+        height: '28px'
+    },
+    notSending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorBrandBackgroundHover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
+                color: _tokens.tokens.colorNeutralForegroundOnBrand,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorBrandBackgroundPressed
+            }
+        }
+    },
+    notSendingDictationActive: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: _tokens.tokens.colorNeutralForeground2Hover,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: _tokens.tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    sending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorBrandBackground2Hover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: _tokens.tokens.colorBrandForeground2Hover,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: _tokens.tokens.colorBrandForeground2Pressed
+            }
+        }
+    }
+});
+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 = (0, _reactcomponents.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 = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
+    }
+    if (state.stopIcon) {
+        state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
+    }
+    if (state.stopBackground) {
+        state.stopBackground.className = (0, _reactcomponents.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
+    (0, _reactcomponents.useButtonStyles_unstable)({
+        ...state,
+        components: {
+            ...state.components,
+            icon: 'span'
+        },
+        iconOnly: false
+    });
+    return state;
+};