@fluentui-copilot/react-send-button 0.0.0-nightly-20251002-0405-17b34fb7.1 → 0.0.0-nightly-20251010-0406-7df7c6d1.1

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

@@ -1,412 +0,0 @@
-"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: "f12clzc2",
-        Bqenvij: "fbhnoac"
-    },
-    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);}",
-        ".f12clzc2{min-width:40px;}",
-        ".fbhnoac{height:40px;}",
-        ".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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,240 +0,0 @@
-"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: '40px',
-        height: '40px'
-    },
-    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;
-};