botframework-webchat-fluent-theme 4.17.0-main.20240423.ec25060 → 4.17.0-main.20240501.533c151

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.0-main.20240423.ec25060",
+  "version": "4.17.0-main.20240501.533c151",
   "description": "Fluent theme for Bot Framework Web Chat",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/botframework-webchat-fluent-theme.js",
+  "types": "./dist/botframework-webchat-fluent-theme.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/index.mjs",
-        "types": "./dist/index.d.mts"
+        "types": "./dist/botframework-webchat-fluent-theme.d.mts",
+        "default": "./dist/botframework-webchat-fluent-theme.mjs"
       },
       "required": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/botframework-webchat-fluent-theme.d.ts",
+        "default": "./dist/botframework-webchat-fluent-theme.js"
       }
     }
   },
@@ -54,19 +54,24 @@
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
     "start": "npm run build -- --watch"
   },
-  "pinDependencies": {},
+  "pinDependencies": {
+    "@types/react": [
+      "16",
+      "react@16.8.6 is our baseline"
+    ]
+  },
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.5",
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.10.3",
-    "@types/react": "^18.2.74",
+    "@types/react": "^16.14.60",
     "tsup": "^8.0.2",
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.17.0-main.20240423.ec25060",
-    "botframework-webchat-component": "4.17.0-main.20240423.ec25060",
-    "botframework-webchat-core": "4.17.0-main.20240423.ec25060",
+    "botframework-webchat-api": "4.17.0-main.20240501.533c151",
+    "botframework-webchat-component": "4.17.0-main.20240501.533c151",
+    "botframework-webchat-core": "4.17.0-main.20240501.533c151",
     "classnames": "^2.5.1",
     "inject-meta-tag": "^0.0.1",
     "math-random": "^2.0.1",

package/src/components/Theme.module.css

@@ -62,4 +62,19 @@
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
   --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
+  
+  --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
+
+  --webchat-durationUltraFast: var(--durationUltraFast, 0);
+  --webchat-durationNormal: var(--durationNormal, 200ms);
+
+  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
+  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
+}
+
+@media (prefers-reduced-motion) {
+  :global(.webchat-fluent).theme {
+    --webchat-durationUltraFast: 0.01ms;
+    --webchat-durationNormal: 0.01ms;
+  }
 }

package/src/components/sendbox/index.module.css

@@ -5,11 +5,12 @@
   text-rendering: optimizeLegibility;
 
   --webchat-sendbox-attachment-area-active: ;
+  --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);
 }
 
 :global(.webchat-fluent) .sendbox__sendbox {
   background-color: var(--webchat-colorNeutralBackground1);
-  border-radius: var(--webchat-borderRadiusLarge);
+  border-radius: var(--webchat-sendbox-border-radius);
   border: 1px solid var(--webchat-colorNeutralStroke1);
   display: grid;
   font-family: var(--webchat-fontFamilyBase);
@@ -30,11 +31,25 @@
 
   &:focus-within {
     border-color: var(--webchat-colorNeutralStroke1Selected);
-    /* TODO clarify with design the color:
-      - Teams is using colorCompoundBrandForeground1
-      - Fluent is using colorCompoundBrandStroke
-      - we are using colorCompoundBrandForeground1Hover */
-    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);
+  }
+
+  &::after {
+    border-bottom-left-radius: var(--webchat-sendbox-border-radius);
+    border-bottom-right-radius: var(--webchat-sendbox-border-radius);
+    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
+    bottom: -1px;
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+    content: "";
+    height: var(--webchat-sendbox-border-radius);
+    left: -1px;
+    position: absolute;
+    right: -1px;
+    transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);
+  }
+
+  &:focus-within::after {
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   }
 
   > .sendbox__text-area--in-grid {

package/src/components/sendbox/index.tsx

@@ -1,4 +1,4 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
@@ -18,7 +18,15 @@ import useUniqueId from './private/useUniqueId';
 import styles from './index.module.css';
 import { useStyles } from '../../styles';
 
-const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
+const {
+  useFocus,
+  useLocalizer,
+  useMakeThumbnail,
+  useRegisterFocusSendBox,
+  useSendBoxAttachments,
+  useSendMessage,
+  useStyleOptions
+} = hooks;
 
 function SendBox(
   props: Readonly<{
@@ -38,6 +46,39 @@ function SendBox(
   const errorMessageId = useUniqueId('sendbox__error-message-id');
   const [errorRef, errorMessage] = useSubmitError({ message, attachments });
   const [telephoneKeypadShown] = useTelephoneKeypadShown();
+  const setFocus = useFocus();
+
+  useRegisterFocusSendBox(
+    useCallback(
+      ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
+        if (!inputRef.current) {
+          return;
+        }
+        if (noKeyboard) {
+          waitUntil(
+            (async () => {
+              const previousReadOnly = inputRef.current?.getAttribute('readonly');
+              inputRef.current?.setAttribute('readonly', 'true');
+              // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.
+              //       If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.
+              //       Or the second `focusCallback` should not set `readonly` to `true`.
+              // eslint-disable-next-line no-restricted-globals
+              await new Promise(resolve => setTimeout(resolve, 0));
+              inputRef.current?.focus();
+              if (typeof previousReadOnly !== 'string') {
+                inputRef.current?.removeAttribute('readonly');
+              } else {
+                inputRef.current?.setAttribute('readonly', previousReadOnly);
+              }
+            })()
+          );
+        } else {
+          inputRef.current?.focus();
+        }
+      },
+      [inputRef]
+    )
+  );
 
   const attachmentsRef = useRefFrom(attachments);
   const messageRef = useRefFrom(message);
@@ -48,10 +89,9 @@ function SendBox(
         return;
       }
 
-      // TODO: Should call `useFocus('sendBox')`.
-      inputRef.current?.focus();
+      setFocus('sendBox');
     },
-    [inputRef]
+    [setFocus]
   );
 
   const handleMessageChange: React.FormEventHandler<HTMLTextAreaElement> = useCallback(
@@ -95,10 +135,9 @@ function SendBox(
         setAttachments([]);
       }
 
-      // TODO: Should call `useFocus('sendBox')`.
-      inputRef.current?.focus();
+      setFocus('sendBox');
     },
-    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
+    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, setFocus]
   );
 
   const handleTelephoneKeypadButtonClick = useCallback(

package/src/components/telephoneKeypad/Surrogate.tsx

@@ -6,7 +6,7 @@ import useShown from './useShown';
 
 type Props = PropsOf<typeof TelephoneKeypad>;
 
-const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : false));
+const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : null));
 
 TelephoneKeypadSurrogate.displayName = 'TelephoneKeypad.Surrogate';
 

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -1,16 +1,16 @@
-import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { Components } from 'botframework-webchat-component';
 import cx from 'classnames';
+import React, { memo, useCallback, useEffect, useRef, type KeyboardEventHandler, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { Components } from 'botframework-webchat-component';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
+import InfoSmallIcon from '../../../icons/InfoSmallIcon';
+import { useStyles } from '../../../styles';
 import testIds from '../../../testIds';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
 import styles from './TelephoneKeypad.module.css';
-import { useStyles } from '../../../styles';
-import InfoSmallIcon from '../../../icons/InfoSmallIcon';
 
 const { LocalizedString } = Components;
 
@@ -25,10 +25,7 @@ const Orientation = memo(
   ({ children, isHorizontal }: Readonly<{ children?: ReactNode | undefined; isHorizontal: boolean }>) => {
     const classNames = useStyles(styles);
 
-    return isHorizontal ? (
-      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
-      false
-    ) : (
+    return isHorizontal ? null : ( // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       <div className={classNames['telephone-keypad__box']}>{children}</div>
     );
   }

package/src/index.ts

@@ -1,13 +1,20 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
-import testIds from './testIds';
 import { injectStyle } from './styles';
+import testIds from './testIds';
+
+const buildTool = process.env['build_tool'];
+const moduleFormat = process.env['module_format'];
+const version = process.env['npm_package_version'];
 
-declare const NPM_PACKAGE_VERSION: string;
+const buildInfo = { buildTool, moduleFormat, version };
 
-injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
+injectMetaTag(
+  'botframework-webchat:fluent-theme',
+  `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
+);
 
 injectStyle();
 
-export { FluentThemeProvider, testIds };
+export { FluentThemeProvider, buildInfo, testIds };

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/telephoneKeypad/private/Button.module.css","../src/components/telephoneKeypad/private/TelephoneKeypad.module.css","../src/components/Theme.module.css","../src/components/dropZone/index.module.css","../src/components/suggestedActions/SuggestedAction.module.css","../src/components/suggestedActions/index.module.css","../src/components/sendbox/Toolbar.module.css","../src/components/sendbox/AddAttachmentButton.module.css","../src/components/sendbox/Attachments.module.css","../src/components/sendbox/ErrorMessage.module.css","../src/components/sendbox/TextArea.module.css","../src/components/sendbox/index.module.css"],"sourcesContent":["\n:global(.webchat-fluent) .telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */\n  background-color: White;\n  border-radius: 100%;\n\n  /* Whitelabel styles */\n  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */\n  /* color: inherit; */\n\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\n\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  height: 60px;\n  opacity: 0.7;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  user-select: none;\n  width: 60px;\n\n  &:hover {\n    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */\n    background-color: var(--webchat-colorGray30)\n  }\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__ruby {\n  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n\n:global(.webchat-fluent) .telephone-keypad--horizontal {\n  & .telephone-keypad__button {\n    height: 32px;\n    justify-content: center;\n    margin: 8px 4px;\n    width: 32px;\n  };\n\n  .telephone-keypad__button__ruby {\n    display: none;\n  }\n\n  & .telephone-keypad__button__text {\n    font-size: 20px;\n    margin-top: 0;\n  }\n}\n","\n:global(.webchat-fluent) .telephone-keypad {\n  /* Commented out whitelabel styles for now. */\n  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */\n  /* borderRadius: '8px 8px 0px 0px; */\n  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */\n\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  /* boxShadow: var(--shadow16); */\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n  /* margin: var(--spacingHorizontalMNudge)' */\n}\n\n:global(.webchat-fluent) .telephone-keypad__box {\n  box-sizing: border-box;\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n  justify-items: center;\n  padding: 16px;\n  width: 100%;\n}\n\n:global(.webchat-fluent) .telephone-keypad__info-message {\n  align-items: center;\n  color: var(--webchat-colorNeutralForeground4);\n  display: flex;\n  font-size: 12px;\n  gap: 6px;\n  margin-block-end: 6px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__info-message-link {\n  color: var(--webchat-colorBrandForegroundLink);\n  text-decoration-color: transparent;\n\n  &:target {\n    color: var(--webchat-colorBrandForegroundLinkSelected);\n  }\n  &:hover {\n    color: var(--webchat-colorBrandForegroundLinkHover);\n    text-decoration: underline 1px currentColor;\n  }\n  &:active {\n    color: var(--webchat-colorBrandForegroundLinkPressed);\n  }\n  &:focus-visible {\n    outline: none;\n    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);\n  }\n}\n","\n:global(.webchat-fluent).theme {\n  display: contents;\n\n  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n  --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n\n  --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);\n  --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);\n  --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);\n\n  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n\n  --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n  --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n  --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n\n  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n  \n  --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);\n\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n\n  --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);\n  --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);\n  --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);\n  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);  \n\n  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n\n  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */\n  --webchat-colorGray30: var(--colorGray30, #edebe9);\n  --webchat-colorGray160: var(--colorGray160, #323130);\n  --webchat-colorGray190: var(--colorGray190, #201f1e);\n  --webchat-colorGray200: var(--colorGray200, #1b1a19);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */\n  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */\n  --webchat-shadow16: var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108));\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */\n  --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n  --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);\n  --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n}",":global(.webchat-fluent) .sendbox__attachment-drop-zone {\n  background-color: var(--webchat-colorNeutralBackground4);\n  border-radius: inherit;\n  cursor: copy;\n  display: grid;\n  gap: 8px;\n  inset: 0;\n  place-content: center;\n  place-items: center;\n  position: absolute;\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {\n  background-color: #e00;\n  color: White\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {\n  height: 36px;\n  /* Set \"pointer-events: none\" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the \"--droppable\" modifier.*/\n  pointer-events: none;\n  width: 36px\n}\n",":global(.webchat-fluent) .suggested-action {\n  align-items: center;\n  background: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--webchat-colorBrandStroke2);\n  color: currentColor;\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  gap: 4px;\n  padding: 4px 8px 4px;\n  text-align: start;\n  transition: all .15s ease-out;\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorBrandBackground2Hover);\n      color: var(--webchat-colorBrandForeground2Hover)\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorBrandBackground2Pressed);\n    color: var(--webchat-colorBrandForeground2Pressed)\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed\n  }\n}\n\n:global(.webchat-fluent) .suggested-action__image {\n  font-size: 12px;\n  height: 1em;\n  width: 1em;\n}\n","\n:global(.webchat-fluent) .suggested-actions {\n  align-items: flex-end;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:empty) {\n    padding-block-end: 8px;\n    padding-inline-start: 4px\n  }\n\n  &.suggested-actions--flow {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  &.suggested-actions--stacked {\n    flex-direction: column\n  }\n}\n",":global(.webchat-fluent) .sendbox__toolbar {\n  display: flex;\n  gap: 4px;\n  margin-inline-start: auto;\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1;\n  background: transparent;\n  border-radius: var(--webchat-borderRadiusSmall);\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n  width: 32px;\n\n  > svg {\n    font-size: 20px;\n    pointer-events: none;\n  }\n\n  &.sendbox__toolbar-button--selected {\n    color: var(--webchat-colorNeutralForeground2BrandSelected);\n  }\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      color: var(--webchat-colorNeutralForeground2BrandHover);\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    color: var(--webchat-colorNeutralForeground2BrandPressed);\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed;\n  }\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-separator {\n  align-self: center;\n  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n  height: 28px;\n\n  &:first-child, &:last-child, &:only-child {\n    display: none\n  }\n}\n",":global(.webchat-fluent) .sendbox__add-attachment {\n  display: grid\n}\n\n:global(.webchat-fluent) .sendbox__add-attachment-input {\n  font-size: 0;\n  height: 0;\n  opacity: 0;\n  width: 0;\n}\n",":global(.webchat-fluent) .sendbox__attachment {\n  border-radius: var(--webchat-borderRadiusLarge);\n  border: 1px solid var(--webchat-colorNeutralStroke1);\n  cursor: default;\n  padding: 6px 8px;\n  width: fit-content\n}\n",":global(.webchat-fluent) .sendbox__error-message {\n  color: transparent;\n  font-size: 0;\n  height: 0;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\n",":global(.webchat-fluent) .sendbox__text-area {\n  display: grid;\n  grid-template-areas: 'main';\n  max-height: 200px;\n  overflow: hidden;\n}\n\n:global(.webchat-fluent) .sendbox__text-area--hidden {\n  /* TODO: Not perfect way of hiding the text box. */\n  height: 0;\n  visibility: collapse;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-shared {\n  border: none;\n  font: inherit;\n  grid-area: main;\n  outline: inherit;\n  overflow-wrap: anywhere;\n  resize: inherit;\n  scrollbar-gutter: stable;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-doppelganger {\n  overflow: hidden;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input {\n  background-color: inherit;\n  color: currentColor;\n  height: 100%;\n  padding: 0;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input--scroll {\n  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */\n  scrollbar-color: unset;\n  scrollbar-width: unset;\n  /* Firefox */\n  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n  -moz-scrollbar-width: thin;\n\n  /* Chrome, Edge, and Safari */\n  &::-webkit-scrollbar {\n    width: 8px\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: var(--webchat-colorNeutralBackground5);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--webchat-colorNeutralForeground2);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-corner {\n    background-color: var(--webchat-colorNeutralBackground5);\n  }\n}\n",":global(.webchat-fluent) .sendbox {\n  color: var(--webchat-colorNeutralForeground1);\n  font-family: var(--webchat-fontFamilyBase);\n  padding: 0 10px 10px;\n  text-rendering: optimizeLegibility;\n\n  --webchat-sendbox-attachment-area-active: ;\n}\n\n:global(.webchat-fluent) .sendbox__sendbox {\n  background-color: var(--webchat-colorNeutralBackground1);\n  border-radius: var(--webchat-borderRadiusLarge);\n  border: 1px solid var(--webchat-colorNeutralStroke1);\n  display: grid;\n  font-family: var(--webchat-fontFamilyBase);\n  font-size: 14px;\n  gap: 6px;\n  grid-template:\n    [telephone-keypad-start] 'text-area' [telephone-keypad-end]\n    var(--webchat-sendbox-attachment-area-active)\n    'controls' / [telephone-keypad] 1fr\n  ;\n  line-height: 20px;\n  padding: 8px;\n  position: relative;\n\n  &:has(.sendbox__attachment--in-grid) {\n    --webchat-sendbox-attachment-area-active: 'attachment'\n  }\n\n  &:focus-within {\n    border-color: var(--webchat-colorNeutralStroke1Selected);\n    /* TODO clarify with design the color:\n      - Teams is using colorCompoundBrandForeground1\n      - Fluent is using colorCompoundBrandStroke\n      - we are using colorCompoundBrandForeground1Hover */\n    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);\n  }\n\n  > .sendbox__text-area--in-grid {\n    grid-area: text-area;\n  }\n\n  > .sendbox__attachment--in-grid {\n    grid-area: attachment;\n  }\n\n  > .sendbox__sendbox-controls--in-grid {\n    grid-area: controls;\n  }\n\n  > .sendbox__telephone-keypad--in-grid {\n    grid-area: telephone-keypad;\n  }\n}\n\n:global(.webchat-fluent) .sendbox__sendbox-text {\n  background-color: transparent;\n  border: none;\n  flex: auto;\n  font-family: var(--webchat-fontFamilyBase);\n  font-size: 14px;\n  line-height: 20px;\n  outline: none;\n  padding: 4px 4px 0;\n  resize: none;\n}\n\n:global(.webchat-fluent) .sendbox__sendbox-controls {\n  align-items: center;\n  display: flex;\n  padding-inline-start: 4px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter {\n  color: var(--webchat-colorNeutralForeground4);\n  cursor: default;\n  font-family: var(--webchat-fontFamilyNumeric);\n  font-size: 10px;\n  line-height: 14px;\n  margin-inline-end: 4px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter--error {\n  color: var(--webchat-colorStatusDangerForeground1);\n}\n"],"mappings":"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","names":["telephone-keypad__button","telephone-keypad__button__ruby","telephone-keypad__button__text","telephone-keypad--horizontal","telephone-keypad","telephone-keypad__box","telephone-keypad__info-message","telephone-keypad__info-message-link","theme","sendbox__attachment-drop-zone","sendbox__attachment-drop-zone--droppable","sendbox__attachment-drop-zone-icon","suggested-action","suggested-action__image","suggested-actions","suggested-actions--flow","suggested-actions--stacked","sendbox__toolbar","sendbox__toolbar-button","sendbox__toolbar-button--selected","sendbox__toolbar-separator","sendbox__add-attachment","sendbox__add-attachment-input","sendbox__attachment","sendbox__error-message","sendbox__text-area","sendbox__text-area--hidden","sendbox__text-area-shared","sendbox__text-area-doppelganger","sendbox__text-area-input","sendbox__text-area-input--scroll","sendbox","sendbox__sendbox","sendbox__attachment--in-grid","sendbox__text-area--in-grid","sendbox__sendbox-controls--in-grid","sendbox__telephone-keypad--in-grid","sendbox__sendbox-text","sendbox__sendbox-controls","sendbox__text-counter","sendbox__text-counter--error"]}