botframework-webchat-fluent-theme 4.17.0-main.20240416.4ff01ae → 4.17.0-main.20240416.e3f5401

package/dist/index.mjs

@@ -41,69 +41,119 @@ import React4, { memo as memo4 } from "react";
 import React3, { memo as memo3, useCallback as useCallback2, useEffect, useRef } from "react";
 import { useRefFrom as useRefFrom2 } from "use-ref-from";
 
-// src/components/telephoneKeypad/private/Button.tsx
-import React2, { forwardRef, memo as memo2, useCallback } from "react";
-import { useRefFrom } from "use-ref-from";
+// src/styles/index.ts
+import { useMemo as useMemo3 } from "react";
 
-// src/components/telephoneKeypad/private/Button.module.css
-var Button_default = {
-  "telephone-keypad__button": "Button_telephone-keypad__button",
-  "telephone-keypad__button__ruby": "Button_telephone-keypad__button__ruby",
-  "telephone-keypad__button__text": "Button_telephone-keypad__button__text",
-  "telephone-keypad--horizontal": "Button_telephone-keypad--horizontal"
-};
-
-// src/styles/injectStyle.ts
-var injectedStyles = "/* src/components/telephoneKeypad/private/Button.module.css */\n.webchat-fluent .Button_telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  background-color: White;\n  border-radius: 100%;\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\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.webchat-fluent .Button_telephone-keypad__button:hover {\n  background-color: var(--webchat-colorGray30);\n}\n.webchat-fluent .Button_telephone-keypad__button__ruby {\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n.webchat-fluent .Button_telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button {\n  height: 32px;\n  justify-content: center;\n  margin: 8px 4px;\n  width: 32px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__ruby {\n  display: none;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__text {\n  font-size: 20px;\n  margin-top: 0;\n}\n\n/* src/components/telephoneKeypad/private/TelephoneKeypad.module.css */\n.webchat-fluent .TelephoneKeypad_telephone-keypad {\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n}\n.webchat-fluent .TelephoneKeypad_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/* src/components/Theme.module.css */\n.webchat-fluent.Theme_theme {\n  display: contents;\n  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n  --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n  --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n  --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n  --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n  --webchat-colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover, #f5f5f5);\n  --webchat-colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed, #e0e0e0);\n  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n  --webchat-colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1, #077fab);\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n  --webchat-colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed, #01678c);\n  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\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  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\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  --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\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  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n}\n\n/* src/components/dropZone/index.module.css */\n.webchat-fluent .dropZone_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.webchat-fluent .dropZone_sendbox__attachment-drop-zone--droppable {\n  background-color: #e00;\n  color: White;\n}\n.webchat-fluent .dropZone_sendbox__attachment-drop-zone-icon {\n  height: 36px;\n  pointer-events: none;\n  width: 36px;\n}\n\n/* src/components/suggestedActions/SuggestedAction.module.css */\n.webchat-fluent .SuggestedAction_suggested-action {\n  align-items: center;\n  background: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--webchat-colorBrandStroke2);\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  .webchat-fluent .SuggestedAction_suggested-action:not([aria-disabled=true]):hover {\n    background-color: var(--webchat-colorBrandBackground2Hover);\n    color: var(--webchat-colorBrandForeground2Hover);\n  }\n}\n.webchat-fluent .SuggestedAction_suggested-action:not([aria-disabled=true]):active {\n  background-color: var(--webchat-colorBrandBackground2Pressed);\n  color: var(--webchat-colorBrandForeground2Pressed);\n}\n.webchat-fluent .SuggestedAction_suggested-action[aria-disabled=true] {\n  color: var(--webchat-colorNeutralForegroundDisabled);\n  cursor: not-allowed;\n}\n.webchat-fluent .SuggestedAction_suggested-action__image {\n  font-size: 12px;\n  height: 1em;\n  width: 1em;\n}\n\n/* src/components/suggestedActions/index.module.css */\n.webchat-fluent .suggestedActions_suggested-actions {\n  align-items: flex-end;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.webchat-fluent .suggestedActions_suggested-actions:not(:empty) {\n  padding-block-end: 8px;\n  padding-inline-start: 4px;\n}\n.webchat-fluent .suggestedActions_suggested-actions.suggestedActions_suggested-actions--flow {\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n.webchat-fluent .suggestedActions_suggested-actions.suggestedActions_suggested-actions--stacked {\n  flex-direction: column;\n}\n\n/* src/components/sendbox/Toolbar.module.css */\n.webchat-fluent .Toolbar_sendbox__toolbar {\n  display: flex;\n  gap: 4px;\n  margin-inline-start: auto;\n}\n.webchat-fluent .Toolbar_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  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n  width: 32px;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button > svg {\n  font-size: 20px;\n  pointer-events: none;\n}\n@media (hover: hover) {\n  .webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):hover {\n    background-color: var(--webchat-colorSubtleBackgroundHover);\n    color: var(--webchat-colorCompoundBrandForeground1Hover);\n  }\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):active {\n  background-color: var(--webchat-colorSubtleBackgroundPressed);\n  color: var(--webchat-colorCompoundBrandForeground1Pressed);\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button[aria-disabled=true] {\n  color: var(--webchat-colorNeutralForegroundDisabled);\n  cursor: not-allowed;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-separator {\n  align-self: center;\n  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n  height: 28px;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-separator:is(:first-child, :last-child, :only-child) {\n  display: none;\n}\n\n/* src/components/sendbox/AddAttachmentButton.module.css */\n.webchat-fluent .AddAttachmentButton_sendbox__add-attachment {\n  display: grid;\n}\n.webchat-fluent .AddAttachmentButton_sendbox__add-attachment-input {\n  font-size: 0;\n  height: 0;\n  opacity: 0;\n  width: 0;\n}\n\n/* src/components/sendbox/Attachments.module.css */\n.webchat-fluent .Attachments_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\n/* src/components/sendbox/ErrorMessage.module.css */\n.webchat-fluent .ErrorMessage_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\n/* src/components/sendbox/TextArea.module.css */\n.webchat-fluent .TextArea_sendbox__text-area {\n  display: grid;\n  grid-template-areas: \"main\";\n  max-height: 200px;\n  overflow: hidden;\n}\n.webchat-fluent .TextArea_sendbox__text-area--hidden {\n  height: 0;\n  visibility: collapse;\n}\n.webchat-fluent .TextArea_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.webchat-fluent .TextArea_sendbox__text-area-doppelganger {\n  overflow: hidden;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input {\n  height: 100%;\n  padding: 0;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll {\n  scrollbar-color: unset;\n  scrollbar-width: unset;\n  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n  -moz-scrollbar-width: thin;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar {\n  width: 8px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-track {\n  background-color: var(--webchat-colorNeutralBackground5);\n  border-radius: 16px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-thumb {\n  background-color: var(--webchat-colorNeutralForeground2);\n  border-radius: 16px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-corner {\n  background-color: var(--webchat-colorNeutralBackground5);\n}\n\n/* src/components/sendbox/index.module.css */\n.webchat-fluent .sendbox_sendbox {\n  color: var(--webchat-colorNeutralForeground1);\n  font-family: var(--webchat-fontFamilyBase);\n  padding: 0 10px 10px;\n  text-rendering: optimizeLegibility;\n}\n.webchat-fluent .sendbox_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  line-height: 20px;\n  padding: 8px;\n  position: relative;\n}\n.webchat-fluent .sendbox_sendbox__sendbox:focus-within {\n  border-color: var(--webchat-colorNeutralStroke1Selected);\n  box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);\n}\n.webchat-fluent .sendbox_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.webchat-fluent .sendbox_sendbox__sendbox-controls {\n  align-items: center;\n  display: flex;\n  padding-inline-start: 4px;\n}\n.webchat-fluent .sendbox_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}\n.webchat-fluent .sendbox_sendbox__text-counter--error {\n  color: var(--webchat-colorStatusDangerForeground1);\n}\n";
-function injectStyles() {
-  if (globalThis.document) {
-    const style = document.createElement("style");
-    style.append(document.createTextNode(injectedStyles));
-    document.head.appendChild(style);
-  }
+// src/private/useStyleToEmotionObject.ts
+import createEmotion from "@emotion/css/create-instance";
+import { useMemo as useMemo2 } from "react";
+var { random } = Math;
+var emotionPool = {};
+var nonce = "";
+function createCSSKey() {
+  return random().toString(26).substr(2, 5).replace(/\d/gu, (value) => String.fromCharCode(value.charCodeAt(0) + 65));
+}
+function useStyleToEmotionObject() {
+  return useMemo2(() => {
+    const emotion = (
+      // Prefix "id-" to prevent object injection attack.
+      emotionPool[`id-${nonce}`] || (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }))
+    );
+    return (style) => emotion.css(style);
+  }, []);
 }
 
-// src/styles/useStyles.ts
-import { useMemo as useMemo2 } from "react";
-function useStyles(styles) {
-  return useMemo2(
+// src/styles/index.ts
+function useStyles(styles13) {
+  const getClassName = useStyleToEmotionObject();
+  return useMemo3(
     () => Object.freeze(
-      Object.fromEntries(
-        Object.entries(styles).map(([baseClassName, resultClassName]) => [
-          baseClassName,
-          `${baseClassName} ${resultClassName}`
-        ])
-      )
+      Object.fromEntries(Object.entries(styles13).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
     ),
-    [styles]
+    [styles13, getClassName]
   );
 }
-var useStyles_default = useStyles;
 
 // src/components/telephoneKeypad/private/Button.tsx
+import React2, { forwardRef, memo as memo2, useCallback } from "react";
+import { useRefFrom } from "use-ref-from";
+var styles = {
+  "webchat__telephone-keypad__button": {
+    "-webkit-user-select": "none",
+    alignItems: "center",
+    appearance: "none",
+    // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
+    backgroundColor: "White",
+    borderRadius: "100%",
+    // Whitelabel styles
+    // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
+    // color: 'inherit',
+    border: "solid 1px var(--webchat-colorNeutralStroke1)",
+    color: "var(--webchat-colorGray200)",
+    fontWeight: "var(--webchat-fontWeightSemibold)",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: 60,
+    opacity: 0.7,
+    padding: 0,
+    position: "relative",
+    touchAction: "none",
+    userSelect: "none",
+    width: 60,
+    "&:hover": {
+      // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
+      backgroundColor: "var(--webchat-colorGray30)"
+    }
+  },
+  "webchat__telephone-keypad__button__ruby": {
+    // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
+    color: "var(--webchat-colorGray190)",
+    fontSize: 10
+  },
+  "webchat__telephone-keypad__button__text": {
+    fontSize: 24,
+    marginTop: 8
+  },
+  "webchat__telephone-keypad--horizontal": {
+    "& .webchat__telephone-keypad__button": {
+      height: 32,
+      width: 32,
+      margin: "8px 4px",
+      justifyContent: "center"
+    },
+    "webchat__telephone-keypad__button__ruby": {
+      display: "none"
+    },
+    "& .webchat__telephone-keypad__button__text": {
+      fontSize: 20,
+      marginTop: 0
+    }
+  }
+};
 var Button = memo2(
   // As we are all TypeScript, internal components do not need propTypes.
   // eslint-disable-next-line react/prop-types
   forwardRef(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
-    const classNames = useStyles_default(Button_default);
+    const classNames = useStyles(styles);
     const onClickRef = useRefFrom(onClick);
     const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
     return /* @__PURE__ */ React2.createElement(
       "button",
       {
-        className: classNames["telephone-keypad__button"],
+        className: classNames["webchat__telephone-keypad__button"],
         "data-testid": dataTestId,
         onClick: handleClick,
         ref,
         type: "button"
       },
-      /* @__PURE__ */ React2.createElement("span", { className: classNames["telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
-      !!ruby && /* @__PURE__ */ React2.createElement("ruby", { className: classNames["telephone-keypad__button__ruby"] }, ruby)
+      /* @__PURE__ */ React2.createElement("span", { className: classNames["webchat__telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
+      !!ruby && /* @__PURE__ */ React2.createElement("ruby", { className: classNames["webchat__telephone-keypad__button__ruby"] }, ruby)
     );
   })
 );
 Button.displayName = "TelephoneKeypad.Button";
-var Button_default2 = Button;
+var Button_default = Button;
 
 // src/testIds.ts
 var testIds = {
@@ -128,32 +178,55 @@ var testIds = {
 var testIds_default = testIds;
 
 // src/components/telephoneKeypad/useShown.ts
-import { useContext, useMemo as useMemo3 } from "react";
+import { useContext, useMemo as useMemo4 } from "react";
 function useShown() {
   const { setShown, shown } = useContext(Context_default);
-  return useMemo3(() => Object.freeze([shown, setShown]), [shown, setShown]);
+  return useMemo4(() => Object.freeze([shown, setShown]), [shown, setShown]);
 }
 
-// src/components/telephoneKeypad/private/TelephoneKeypad.module.css
-var TelephoneKeypad_default = {
-  "telephone-keypad": "TelephoneKeypad_telephone-keypad",
-  "telephone-keypad__box": "TelephoneKeypad_telephone-keypad__box"
-};
-
 // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+var styles2 = {
+  "webchat__telephone-keypad": {
+    /* Commented out whitelabel styles for now. */
+    // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
+    // borderRadius: '8px 8px 0px 0px',
+    // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
+    alignItems: "center",
+    background: "var(--webchat-colorNeutralBackground1)",
+    // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
+    border: "none",
+    borderRadius: "var(--webchat-borderRadiusXLarge)",
+    // boxShadow: 'var(--shadow16)',
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    justifyContent: "center"
+    // margin: 'var(--spacingHorizontalMNudge)'
+  },
+  "webchat__telephone-keypad__box": {
+    boxSizing: "border-box",
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "repeat(4, 1fr)",
+    justifyItems: "center",
+    padding: "16px",
+    width: "100%"
+  }
+};
 var Orientation = memo3(
   ({ children, isHorizontal }) => {
-    const classNames = useStyles_default(TelephoneKeypad_default);
+    const classNames = useStyles(styles2);
     return isHorizontal ? (
       // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       false
-    ) : /* @__PURE__ */ React3.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
+    ) : /* @__PURE__ */ React3.createElement("div", { className: classNames["webchat__telephone-keypad__box"] }, children);
   }
 );
 Orientation.displayName = "TelephoneKeypad:Orientation";
 var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
   const autoFocusRef = useRefFrom2(autoFocus);
-  const classNames = useStyles_default(TelephoneKeypad_default);
+  const classNames = useStyles(styles2);
   const firstButtonRef = useRef(null);
   const onButtonClickRef = useRefFrom2(onButtonClick);
   const [, setShown] = useShown();
@@ -180,8 +253,8 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
   useEffect(() => {
     autoFocusRef.current && firstButtonRef.current?.focus();
   }, [autoFocusRef, firstButtonRef]);
-  return /* @__PURE__ */ React3.createElement("div", { className: classNames["telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ React3.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ React3.createElement(
-    Button_default2,
+  return /* @__PURE__ */ React3.createElement("div", { className: classNames["webchat__telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ React3.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ React3.createElement(
+    Button_default,
     {
       button: "1",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton1,
@@ -189,7 +262,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ref: firstButtonRef
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "2",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton2,
@@ -197,7 +270,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "ABC"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "3",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton3,
@@ -205,7 +278,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "DEF"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "4",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton4,
@@ -213,7 +286,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "GHI"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "5",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton5,
@@ -221,7 +294,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "JKL"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "6",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton6,
@@ -229,7 +302,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "MNO"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "7",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton7,
@@ -237,7 +310,7 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "PQRS"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "8",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton8,
@@ -245,15 +318,15 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
       ruby: "TUV"
     }
   ), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+    Button_default,
     {
       button: "9",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButton9,
       onClick: handleButton9Click,
       ruby: "WXYZ"
     }
-  ), /* @__PURE__ */ React3.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ React3.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ React3.createElement(
-    Button_default2,
+  ), /* @__PURE__ */ React3.createElement(Button_default, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ React3.createElement(Button_default, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ React3.createElement(
+    Button_default,
     {
       button: "pound",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
@@ -262,32 +335,69 @@ var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
   )));
 });
 TelephoneKeypad.displayName = "TelephoneKeypad";
-var TelephoneKeypad_default2 = TelephoneKeypad;
+var TelephoneKeypad_default = TelephoneKeypad;
 
 // src/components/telephoneKeypad/Surrogate.tsx
-var TelephoneKeypadSurrogate = memo4((props) => useShown()[0] ? /* @__PURE__ */ React4.createElement(TelephoneKeypad_default2, { ...props }) : false);
+var TelephoneKeypadSurrogate = memo4((props) => useShown()[0] ? /* @__PURE__ */ React4.createElement(TelephoneKeypad_default, { ...props }) : false);
 TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
 var Surrogate_default = TelephoneKeypadSurrogate;
 
 // src/components/Theme.tsx
 import React5 from "react";
-import cx from "classnames";
-
-// src/components/Theme.module.css
-var Theme_default = {
-  theme: "Theme_theme"
+var styles3 = {
+  "webchat-fluent__theme": {
+    display: "contents",
+    "--webchat-colorNeutralForeground1": "var(--colorNeutralForeground1, #242424)",
+    "--webchat-colorNeutralForeground2": "var(--colorNeutralForeground2, #424242)",
+    "--webchat-colorNeutralForeground4": "var(--colorNeutralForeground4, #707070)",
+    "--webchat-colorNeutralForegroundDisabled": "var(--colorNeutralForegroundDisabled, #bdbdbd)",
+    "--webchat-colorNeutralBackground1": "var(--colorNeutralBackground1, #ffffff)",
+    "--webchat-colorNeutralBackground4": "var(--colorNeutralBackground4, #f0f0f0)",
+    "--webchat-colorNeutralBackground5": "var(--colorNeutralBackground5, #ebebeb)",
+    "--webchat-colorSubtleBackgroundHover": "var(--colorSubtleBackgroundHover, #f5f5f5)",
+    "--webchat-colorSubtleBackgroundPressed": "var(--colorSubtleBackgroundPressed, #e0e0e0)",
+    "--webchat-colorNeutralStroke1": "var(--colorNeutralStroke1, #d1d1d1)",
+    "--webchat-colorNeutralStroke2": "var(--colorNeutralStroke2, #e0e0e0)",
+    "--webchat-colorNeutralStroke1Selected": "var(--colorNeutralStroke1Selected, #bdbdbd)",
+    "--webchat-colorBrandStroke2": "var(--colorBrandStroke2, #9edcf7)",
+    "--webchat-colorBrandForeground2Hover": "var(--colorBrandForeground2Hover, #015a7a)",
+    "--webchat-colorBrandForeground2Pressed": "var(--colorBrandForeground2Pressed, #01384d)",
+    "--webchat-colorBrandBackground2Hover": "var(--colorBrandBackground2Hover, #bee7fa)",
+    "--webchat-colorBrandBackground2Pressed": "var(--colorBrandBackground2Pressed, #7fd2f5)",
+    "--webchat-colorCompoundBrandForeground1": "var(--colorCompoundBrandForeground1, #077fab)",
+    "--webchat-colorCompoundBrandForeground1Hover": "var(--colorCompoundBrandForeground1Hover, #02729c)",
+    "--webchat-colorCompoundBrandForeground1Pressed": "var(--colorCompoundBrandForeground1Pressed, #01678c)",
+    "--webchat-colorStatusDangerForeground1": "var(--colorStatusDangerForeground1, #b10e1c)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/theme/src/colors/FluentColors.ts
+    "--webchat-colorGray30": "var(--colorGray30, #edebe9)",
+    "--webchat-colorGray160": "var(--colorGray160, #323130)",
+    "--webchat-colorGray190": "var(--colorGray190, #201f1e)",
+    "--webchat-colorGray200": "var(--colorGray200, #1b1a19)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
+    "--webchat-borderRadiusSmall": "var(--borderRadiusSmall, 2px)",
+    "--webchat-borderRadiusLarge": "var(--borderRadiusLarge, 6px)",
+    "--webchat-borderRadiusXLarge": "var(--borderRadiusXLarge, 8px)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts
+    "--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))",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts
+    "--webchat-spacingHorizontalMNudge": "var(--spacingHorizontalMNudge, 10px)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    "--webchat-fontFamilyBase": `var(--fontFamilyBase, 'Segoe UI)', 'Segoe UI Web (West European))', -apple-system,
+      BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+    "--webchat-fontFamilyNumeric": `var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI)', 'Segoe UI Web (West European))',
+      -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    "--webchat-fontWeightSemibold": "var(--fontWeightSemibold, 600)"
+  }
 };
-
-// src/components/Theme.tsx
-var rootClassName = "webchat-fluent";
 function WebchatTheme(props) {
-  const classNames = useStyles_default(Theme_default);
-  return /* @__PURE__ */ React5.createElement("div", { className: cx(rootClassName, classNames["theme"]) }, props.children);
+  const classNames = useStyles(styles3);
+  return /* @__PURE__ */ React5.createElement("div", { className: classNames["webchat-fluent__theme"] }, props.children);
 }
 
 // src/components/sendbox/index.tsx
 import { hooks as hooks8 } from "botframework-webchat-component";
-import cx7 from "classnames";
+import cx6 from "classnames";
 import React20, { memo as memo14, useCallback as useCallback8, useRef as useRef6, useState as useState3 } from "react";
 import { useRefFrom as useRefFrom6 } from "use-ref-from";
 
@@ -316,8 +426,8 @@ function SendIcon(props) {
 }
 
 // src/components/dropZone/index.tsx
-import { hooks } from "botframework-webchat-component";
-import cx2 from "classnames";
+import { hooks } from "botframework-webchat-api";
+import cx from "classnames";
 import React8, { memo as memo5, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { useRefFrom as useRefFrom3 } from "use-ref-from";
 
@@ -345,15 +455,31 @@ function AddDocumentIcon(props) {
   );
 }
 
-// src/components/dropZone/index.module.css
-var dropZone_default = {
-  "sendbox__attachment-drop-zone": "dropZone_sendbox__attachment-drop-zone",
-  "sendbox__attachment-drop-zone--droppable": "dropZone_sendbox__attachment-drop-zone--droppable",
-  "sendbox__attachment-drop-zone-icon": "dropZone_sendbox__attachment-drop-zone-icon"
-};
-
 // src/components/dropZone/index.tsx
 var { useLocalizer } = hooks;
+var styles4 = {
+  "webchat-fluent__sendbox__attachment-drop-zone": {
+    backgroundColor: "var(--webchat-colorNeutralBackground4)",
+    borderRadius: "inherit",
+    cursor: "copy",
+    display: "grid",
+    gap: "8px",
+    inset: "0",
+    placeContent: "center",
+    placeItems: "center",
+    position: "absolute"
+  },
+  "webchat-fluent__sendbox__attachment-drop-zone--droppable": {
+    backgroundColor: "#e00",
+    color: "White"
+  },
+  "webchat-fluent__sendbox__attachment-drop-zone-icon": {
+    height: "36px",
+    // Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon, it would disable the "--droppable" modifier.
+    pointerEvents: "none",
+    width: "36px"
+  }
+};
 var handleDragOver = (event) => {
   event.preventDefault();
 };
@@ -370,7 +496,7 @@ function isDescendantOf(target, ancestor) {
 }
 var DropZone = (props) => {
   const [dropZoneState, setDropZoneState] = useState2(false);
-  const classNames = useStyles_default(dropZone_default);
+  const classNames = useStyles(styles4);
   const dropZoneRef = useRef2(null);
   const localize = useLocalizer();
   const onFilesAddedRef = useRefFrom3(props.onFilesAdded);
@@ -406,40 +532,34 @@ var DropZone = (props) => {
   return dropZoneState ? /* @__PURE__ */ React8.createElement(
     "div",
     {
-      className: cx2(classNames["sendbox__attachment-drop-zone"], {
-        [classNames["sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
+      className: cx(classNames["webchat-fluent__sendbox__attachment-drop-zone"], {
+        [classNames["webchat-fluent__sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
       }),
       "data-testid": testIds_default.sendBoxDropZone,
       onDragOver: handleDragOver,
       onDrop: handleDrop,
       ref: dropZoneRef
     },
-    /* @__PURE__ */ React8.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
+    /* @__PURE__ */ React8.createElement(AddDocumentIcon, { className: classNames["webchat-fluent__sendbox__attachment-drop-zone-icon"] }),
     localize("TEXT_INPUT_DROP_ZONE")
   ) : null;
 };
 DropZone.displayName = "DropZone";
-var dropZone_default2 = memo5(DropZone);
+var dropZone_default = memo5(DropZone);
 
 // src/components/DropZone.tsx
-var DropZone_default = dropZone_default2;
+var DropZone_default = dropZone_default;
 
 // src/components/suggestedActions/index.tsx
 import { hooks as hooks3 } from "botframework-webchat-component";
-import cx4 from "classnames";
+import cx3 from "classnames";
 import React11, { memo as memo8 } from "react";
 
 // src/components/suggestedActions/SuggestedAction.tsx
 import { hooks as hooks2 } from "botframework-webchat-component";
-import cx3 from "classnames";
+import cx2 from "classnames";
 import React10, { memo as memo7, useCallback as useCallback4, useRef as useRef4 } from "react";
 
-// src/components/suggestedActions/SuggestedAction.module.css
-var SuggestedAction_default = {
-  "suggested-action": "SuggestedAction_suggested-action",
-  "suggested-action__image": "SuggestedAction_suggested-action__image"
-};
-
 // src/components/suggestedActions/AccessibleButton.tsx
 import React9, { forwardRef as forwardRef2, memo as memo6, useRef as useRef3 } from "react";
 var preventDefaultHandler = (event) => event.preventDefault();
@@ -470,6 +590,38 @@ var AccessibleButton_default = memo6(AccessibleButton);
 
 // src/components/suggestedActions/SuggestedAction.tsx
 var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks2;
+var styles5 = {
+  "webchat-fluent__suggested-action": {
+    alignItems: "center",
+    background: "transparent",
+    border: "1px solid var(--webchat-colorBrandStroke2)",
+    borderRadius: "8px",
+    cursor: "pointer",
+    display: "flex",
+    fontSize: "12px",
+    gap: "4px",
+    padding: "4px 8px 4px",
+    textAlign: "start",
+    transition: "all .15s ease-out",
+    "@media (hover: hover)": {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: "var(--webchat-colorBrandBackground2Hover)",
+        color: "var(--webchat-colorBrandForeground2Hover)"
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: "var(--webchat-colorBrandBackground2Pressed)",
+      color: "var(--webchat-colorBrandForeground2Pressed)"
+    },
+    '&[aria-disabled="true"]': {
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
+      cursor: "not-allowed"
+    }
+  },
+  "webchat-fluent__suggested-action__image": {
+    height: "12px"
+  }
+};
 function SuggestedAction({
   buttonText,
   className,
@@ -486,7 +638,7 @@ function SuggestedAction({
   const focus = useFocus();
   const focusRef = useRef4(null);
   const performCardAction = usePerformCardAction();
-  const classNames = useStyles_default(SuggestedAction_default);
+  const classNames = useStyles(styles5);
   const scrollToEnd = useScrollToEnd();
   const handleClick = useCallback4(
     ({ target }) => {
@@ -502,17 +654,21 @@ function SuggestedAction({
   return /* @__PURE__ */ React10.createElement(
     AccessibleButton_default,
     {
-      className: cx3(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
+      className: cx2(
+        classNames["webchat-fluent__suggested-action"],
+        suggestedActionStyleSet + "",
+        (className || "") + ""
+      ),
       disabled,
       onClick: handleClick,
       ref: focusRef,
       type: "button"
     },
-    image && /* @__PURE__ */ React10.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
+    image && /* @__PURE__ */ React10.createElement("img", { alt: imageAlt, className: classNames["webchat-fluent__suggested-action__image"], src: image }),
     /* @__PURE__ */ React10.createElement("span", null, buttonText)
   );
 }
-var SuggestedAction_default2 = memo7(SuggestedAction);
+var SuggestedAction_default = memo7(SuggestedAction);
 
 // src/components/suggestedActions/private/computeSuggestedActionText.ts
 function computeSuggestedActionText(cardAction) {
@@ -528,31 +684,44 @@ function computeSuggestedActionText(cardAction) {
   return JSON.stringify(value);
 }
 
-// src/components/suggestedActions/index.module.css
-var suggestedActions_default = {
-  "suggested-actions": "suggestedActions_suggested-actions",
-  "suggested-actions--flow": "suggestedActions_suggested-actions--flow",
-  "suggested-actions--stacked": "suggestedActions_suggested-actions--stacked"
-};
-
 // src/components/suggestedActions/index.tsx
 var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = hooks3;
+var styles6 = {
+  "webchat-fluent__suggested-actions": {
+    alignItems: "flex-end",
+    alignSelf: "flex-end",
+    display: "flex",
+    gap: "8px",
+    "&:not(:empty)": {
+      paddingBlockEnd: "8px",
+      paddingInlineStart: "4px"
+    },
+    "&.webchat-fluent__suggested-actions--flow": {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-end"
+    },
+    "&.webchat-fluent__suggested-actions--stacked": {
+      flexDirection: "column"
+    }
+  }
+};
 function SuggestedActionStackedOrFlowContainer(props) {
   const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
-  const classNames = useStyles_default(suggestedActions_default);
+  const classNames = useStyles(styles6);
   return /* @__PURE__ */ React11.createElement(
     "div",
     {
       "aria-label": props["aria-label"],
       "aria-live": "polite",
       "aria-orientation": "vertical",
-      className: cx4(
-        classNames["suggested-actions"],
+      className: cx3(
+        classNames["webchat-fluent__suggested-actions"],
         suggestedActionsStyleSet + "",
         {
-          [classNames["suggested-actions--flow"]]: suggestedActionLayout === "flow",
-          [classNames["suggested-actions--stacked"]]: suggestedActionLayout !== "flow"
+          "webchat-fluent__suggested-actions--flow": suggestedActionLayout === "flow",
+          "webchat-fluent__suggested-actions--stacked": suggestedActionLayout !== "flow"
         },
         props.className
       ),
@@ -562,7 +731,7 @@ function SuggestedActionStackedOrFlowContainer(props) {
   );
 }
 function SuggestedActions() {
-  const classNames = useStyles_default(suggestedActions_default);
+  const classNames = useStyles(styles6);
   const localize = useLocalizer2();
   const [suggestedActions] = useSuggestedActions2();
   const children = suggestedActions.map((cardAction, index) => {
@@ -571,7 +740,7 @@ function SuggestedActions() {
       return null;
     }
     return /* @__PURE__ */ React11.createElement(
-      SuggestedAction_default2,
+      SuggestedAction_default,
       {
         buttonText: computeSuggestedActionText(cardAction),
         displayText,
@@ -589,18 +758,18 @@ function SuggestedActions() {
     SuggestedActionStackedOrFlowContainer,
     {
       "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
-      className: classNames["suggested-actions"]
+      className: classNames["webchat-fluent__suggested-actions"]
     },
     children
   );
 }
-var suggestedActions_default2 = memo8(SuggestedActions);
+var suggestedActions_default = memo8(SuggestedActions);
 
 // src/components/SuggestedActions.tsx
-var SuggestedActions_default = suggestedActions_default2;
+var SuggestedActions_default = suggestedActions_default;
 
 // src/components/sendbox/AddAttachmentButton.tsx
-import { hooks as hooks4 } from "botframework-webchat-component";
+import { hooks as hooks4 } from "botframework-webchat-api";
 import React14, { useCallback as useCallback5, useRef as useRef5, memo as memo10 } from "react";
 import { useRefFrom as useRefFrom4 } from "use-ref-from";
 
@@ -629,26 +798,63 @@ function AttachmentIcon(props) {
 }
 
 // src/components/sendbox/Toolbar.tsx
-import cx5 from "classnames";
+import cx4 from "classnames";
 import React13, { memo as memo9 } from "react";
-
-// src/components/sendbox/Toolbar.module.css
-var Toolbar_default = {
-  sendbox__toolbar: "Toolbar_sendbox__toolbar",
-  "sendbox__toolbar-button": "Toolbar_sendbox__toolbar-button",
-  "sendbox__toolbar-separator": "Toolbar_sendbox__toolbar-separator"
+var styles7 = {
+  "webchat-fluent__sendbox__toolbar": {
+    display: "flex",
+    gap: "4px",
+    marginInlineStart: "auto"
+  },
+  "webchat-fluent__sendbox__toolbar-button": {
+    alignItems: "center",
+    appearance: "none",
+    aspectRatio: "1",
+    background: "transparent",
+    border: "none",
+    borderRadius: "var(--webchat-borderRadiusSmall)",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    padding: "3px",
+    width: "32px",
+    "> svg": {
+      fontSize: "20px",
+      pointerEvents: "none"
+    },
+    "@media (hover: hover)": {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: "var(--webchat-colorSubtleBackgroundHover)",
+        color: "var(--webchat-colorCompoundBrandForeground1Hover)"
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: "var(--webchat-colorSubtleBackgroundPressed)",
+      color: "var(--webchat-colorCompoundBrandForeground1Pressed)"
+    },
+    '&[aria-disabled="true"]': {
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
+      cursor: "not-allowed"
+    }
+  },
+  "webchat-fluent__sendbox__toolbar-separator": {
+    alignSelf: "center",
+    borderInlineEnd: "1px solid var(--webchat-colorNeutralStroke2)",
+    height: "28px",
+    "&:first-child, &:last-child, &:only-child": {
+      display: "none"
+    }
+  }
 };
-
-// src/components/sendbox/Toolbar.tsx
 var preventDefaultHandler2 = (event) => event.preventDefault();
 var ToolbarButton = memo9(
   (props) => {
-    const classNames = useStyles_default(Toolbar_default);
+    const classNames = useStyles(styles7);
     return /* @__PURE__ */ React13.createElement(
       "button",
       {
         "aria-label": props["aria-label"],
-        className: cx5(classNames["sendbox__toolbar-button"], props.className),
+        className: cx4(classNames["webchat-fluent__sendbox__toolbar-button"], props.className),
         "data-testid": props["data-testid"],
         onClick: props.disabled ? preventDefaultHandler2 : props.onClick,
         type: props.type === "submit" ? "submit" : "button",
@@ -663,18 +869,18 @@ var ToolbarButton = memo9(
 );
 ToolbarButton.displayName = "ToolbarButton";
 var Toolbar = memo9((props) => {
-  const classNames = useStyles_default(Toolbar_default);
-  return /* @__PURE__ */ React13.createElement("div", { className: cx5(classNames["sendbox__toolbar"], props.className) }, props.children);
+  const classNames = useStyles(styles7);
+  return /* @__PURE__ */ React13.createElement("div", { className: cx4(classNames["webchat-fluent__sendbox__toolbar"], props.className) }, props.children);
 });
 Toolbar.displayName = "Toolbar";
 var ToolbarSeparator = memo9(
   (props) => {
-    const classNames = useStyles_default(Toolbar_default);
+    const classNames = useStyles(styles7);
     return /* @__PURE__ */ React13.createElement(
       "div",
       {
         "aria-orientation": "vertical",
-        className: cx5(classNames["sendbox__toolbar-separator"], props.className),
+        className: cx4(classNames["webchat-fluent__sendbox__toolbar-separator"], props.className),
         role: "separator"
       }
     );
@@ -682,17 +888,22 @@ var ToolbarSeparator = memo9(
 );
 ToolbarSeparator.displayName = "ToolbarSeparator";
 
-// src/components/sendbox/AddAttachmentButton.module.css
-var AddAttachmentButton_default = {
-  "sendbox__add-attachment": "AddAttachmentButton_sendbox__add-attachment",
-  "sendbox__add-attachment-input": "AddAttachmentButton_sendbox__add-attachment-input"
-};
-
 // src/components/sendbox/AddAttachmentButton.tsx
 var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = hooks4;
+var styles8 = {
+  "webchat-fluent__sendbox__add-attachment": {
+    display: "grid"
+  },
+  "webchat-fluent__sendbox__add-attachment-input": {
+    fontSize: 0,
+    height: 0,
+    opacity: 0,
+    width: 0
+  }
+};
 function AddAttachmentButton(props) {
   const inputRef = useRef5(null);
-  const classNames = useStyles_default(AddAttachmentButton_default);
+  const classNames = useStyles(styles8);
   const localize = useLocalizer3();
   const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
   const onFilesAddedRef = useRefFrom4(props.onFilesAdded);
@@ -708,13 +919,13 @@ function AddAttachmentButton(props) {
     },
     [inputRef, onFilesAddedRef]
   );
-  return /* @__PURE__ */ React14.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { className: classNames["webchat-fluent__sendbox__add-attachment"] }, /* @__PURE__ */ React14.createElement(
     "input",
     {
       accept: uploadAccept,
       "aria-disabled": props.disabled,
       "aria-hidden": "true",
-      className: classNames["sendbox__add-attachment-input"],
+      className: classNames["webchat-fluent__sendbox__add-attachment-input"],
       multiple: uploadMultiple,
       onInput: props.disabled ? void 0 : handleFileChange,
       readOnly: props.disabled,
@@ -733,19 +944,21 @@ function AddAttachmentButton(props) {
     /* @__PURE__ */ React14.createElement(AttachmentIcon, null)
   ));
 }
-var AddAttachmentButton_default2 = memo10(AddAttachmentButton);
+var AddAttachmentButton_default = memo10(AddAttachmentButton);
 
 // src/components/sendbox/Attachments.tsx
-import { hooks as hooks5 } from "botframework-webchat-component";
+import { hooks as hooks5 } from "botframework-webchat-api";
 import React15, { memo as memo11 } from "react";
-
-// src/components/sendbox/Attachments.module.css
-var Attachments_default = {
-  sendbox__attachment: "Attachments_sendbox__attachment"
-};
-
-// src/components/sendbox/Attachments.tsx
 var { useLocalizer: useLocalizer4 } = hooks5;
+var styles9 = {
+  "webchat-fluent__sendbox__attachment": {
+    border: "1px solid var(--webchat-colorNeutralStroke1)",
+    borderRadius: "var(--webchat-borderRadiusLarge)",
+    cursor: "default",
+    padding: "6px 8px",
+    width: "fit-content"
+  }
+};
 var attachmentsPluralStringIds = {
   one: "TEXT_INPUT_ATTACHMENTS_ONE",
   two: "TEXT_INPUT_ATTACHMENTS_TWO",
@@ -756,33 +969,37 @@ var attachmentsPluralStringIds = {
 function Attachments({
   attachments
 }) {
-  const classNames = useStyles_default(Attachments_default);
+  const classNames = useStyles(styles9);
   const localizeWithPlural = useLocalizer4({ plural: true });
-  return attachments.length ? /* @__PURE__ */ React15.createElement("div", { className: classNames["sendbox__attachment"] }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
+  return attachments.length ? /* @__PURE__ */ React15.createElement("div", { className: classNames["webchat-fluent__sendbox__attachment"] }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
 }
-var Attachments_default2 = memo11(Attachments);
+var Attachments_default = memo11(Attachments);
 
 // src/components/sendbox/ErrorMessage.tsx
 import React16, { memo as memo12 } from "react";
-
-// src/components/sendbox/ErrorMessage.module.css
-var ErrorMessage_default = {
-  "sendbox__error-message": "ErrorMessage_sendbox__error-message"
+var styles10 = {
+  "webchat-fluent___sendbox__error-message": {
+    fontSize: 0,
+    height: 0,
+    width: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    color: "transparent"
+  }
 };
-
-// src/components/sendbox/ErrorMessage.tsx
 function ErrorMessage(props) {
-  const classNames = useStyles_default(ErrorMessage_default);
+  const classNames = useStyles(styles10);
   return (
     // eslint-disable-next-line react/forbid-dom-props
-    /* @__PURE__ */ React16.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
+    /* @__PURE__ */ React16.createElement("span", { className: classNames["webchat-fluent___sendbox__error-message"], id: props.id, role: "alert" }, props.error)
   );
 }
-var ErrorMessage_default2 = memo12(ErrorMessage);
+var ErrorMessage_default = memo12(ErrorMessage);
 
 // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
 import React18, { memo as memo13, useCallback as useCallback6 } from "react";
-import { hooks as hooks6 } from "botframework-webchat-component";
+import { hooks as hooks6 } from "botframework-webchat-api";
 
 // src/icons/TelephoneKeypad.tsx
 import React17 from "react";
@@ -828,22 +1045,61 @@ TelephoneKeypadToolbarButton.displayName = "SendBox.TelephoneKeypadToolbarButton
 var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
 
 // src/components/sendbox/TextArea.tsx
-import cx6 from "classnames";
+import cx5 from "classnames";
 import React19, { forwardRef as forwardRef3, useCallback as useCallback7 } from "react";
-
-// src/components/sendbox/TextArea.module.css
-var TextArea_default = {
-  "sendbox__text-area": "TextArea_sendbox__text-area",
-  "sendbox__text-area--hidden": "TextArea_sendbox__text-area--hidden",
-  "sendbox__text-area-shared": "TextArea_sendbox__text-area-shared",
-  "sendbox__text-area-doppelganger": "TextArea_sendbox__text-area-doppelganger",
-  "sendbox__text-area-input": "TextArea_sendbox__text-area-input",
-  "sendbox__text-area-input--scroll": "TextArea_sendbox__text-area-input--scroll"
+var styles11 = {
+  "webchat-fluent__sendbox__text-area": {
+    display: "grid",
+    gridTemplateAreas: `'main'`,
+    maxHeight: "200px",
+    overflow: "hidden"
+  },
+  "webchat-fluent__sendbox__text-area--hidden": {
+    // TODO: Not perfect way of hiding the text box.
+    height: 0,
+    visibility: "collapse"
+  },
+  "webchat-fluent__sendbox__text-area-shared": {
+    border: "none",
+    font: "inherit",
+    gridArea: "main",
+    outline: "inherit",
+    overflowWrap: "anywhere",
+    resize: "inherit",
+    scrollbarGutter: "stable"
+  },
+  "webchat-fluent__sendbox__text-area-doppelganger": {
+    overflow: "hidden",
+    visibility: "hidden",
+    whiteSpace: "pre-wrap"
+  },
+  "webchat-fluent__sendbox__text-area-input": {
+    height: "100%",
+    padding: 0
+  },
+  "webchat-fluent__sendbox__text-area-input--scroll": {
+    /* Firefox */
+    MozScrollbarColor: "var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2)",
+    MozScrollbarWidth: "thin",
+    /* Chrome, Edge, and Safari */
+    "&::-webkit-scrollbar": {
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "var(--webchat-colorNeutralBackground5)",
+      borderRadius: "16px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "var(--webchat-colorNeutralForeground2)",
+      borderRadius: "16px"
+    },
+    "&::-webkit-scrollbar-corner": {
+      backgroundColor: "var(--webchat-colorNeutralBackground5)"
+    }
+  }
 };
-
-// src/components/sendbox/TextArea.tsx
 var TextArea = forwardRef3((props, ref) => {
-  const classNames = useStyles_default(TextArea_default);
+  const classNames = useStyles(styles11);
   const handleKeyDown = useCallback7((event) => {
     if (!event.shiftKey && event.key === "Enter") {
       event.preventDefault();
@@ -855,10 +1111,10 @@ var TextArea = forwardRef3((props, ref) => {
   return /* @__PURE__ */ React19.createElement(
     "div",
     {
-      className: cx6(
-        classNames["sendbox__text-area"],
+      className: cx5(
+        classNames["webchat-fluent__sendbox__text-area"],
         {
-          [classNames["sendbox__text-area--hidden"]]: props.hidden
+          [classNames["webchat-fluent__sendbox__text-area--hidden"]]: props.hidden
         },
         props.className
       ),
@@ -867,10 +1123,10 @@ var TextArea = forwardRef3((props, ref) => {
     /* @__PURE__ */ React19.createElement(
       "div",
       {
-        className: cx6(
-          classNames["sendbox__text-area-doppelganger"],
-          classNames["sendbox__text-area-shared"],
-          classNames["sendbox__text-area-input--scroll"]
+        className: cx5(
+          classNames["webchat-fluent__sendbox__text-area-doppelganger"],
+          classNames["webchat-fluent__sendbox__text-area-shared"],
+          classNames["webchat-fluent__sendbox__text-area-input--scroll"]
         )
       },
       props.value || props.placeholder,
@@ -880,10 +1136,10 @@ var TextArea = forwardRef3((props, ref) => {
       "textarea",
       {
         "aria-label": props["aria-label"],
-        className: cx6(
-          classNames["sendbox__text-area-input"],
-          classNames["sendbox__text-area-shared"],
-          classNames["sendbox__text-area-input--scroll"]
+        className: cx5(
+          classNames["webchat-fluent__sendbox__text-area-input"],
+          classNames["webchat-fluent__sendbox__text-area-shared"],
+          classNames["webchat-fluent__sendbox__text-area-input--scroll"]
         ),
         "data-testid": props["data-testid"],
         onInput: props.onInput,
@@ -898,11 +1154,11 @@ var TextArea = forwardRef3((props, ref) => {
   );
 });
 TextArea.displayName = "TextArea";
-var TextArea_default2 = TextArea;
+var TextArea_default = TextArea;
 
 // src/components/sendbox/private/useSubmitError.ts
 import { hooks as hooks7 } from "botframework-webchat-component";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { useRefFrom as useRefFrom5 } from "use-ref-from";
 var { useConnectivityStatus, useLocalizer: useLocalizer6 } = hooks7;
 var useSubmitError = ({
@@ -914,13 +1170,13 @@ var useSubmitError = ({
   const submitErrorRef = useRefFrom5(
     connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
   );
-  const errorMessageStringMap = useMemo4(
+  const errorMessageStringMap = useMemo5(
     () => Object.freeze(
       (/* @__PURE__ */ new Map()).set("empty", localize("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline", localize("CONNECTIVITY_STATUS_ALT_FATAL"))
     ),
     [localize]
   );
-  return useMemo4(
+  return useMemo5(
     () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
     [errorMessageStringMap, submitErrorRef]
   );
@@ -928,36 +1184,80 @@ var useSubmitError = ({
 var useSubmitError_default = useSubmitError;
 
 // src/components/sendbox/private/useUniqueId.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function useUniqueId(prefix) {
-  const id = useMemo5(() => Math.random().toString(36).substr(2, 5), []);
+  const id = useMemo6(() => Math.random().toString(36).substr(2, 5), []);
   prefix = prefix ? `${prefix}--` : "";
   return `${prefix}${id}`;
 }
 
-// src/components/sendbox/index.module.css
-var sendbox_default = {
-  sendbox: "sendbox_sendbox",
-  sendbox__sendbox: "sendbox_sendbox__sendbox",
-  "sendbox__sendbox-text": "sendbox_sendbox__sendbox-text",
-  "sendbox__sendbox-controls": "sendbox_sendbox__sendbox-controls",
-  "sendbox__text-counter": "sendbox_sendbox__text-counter",
-  "sendbox__text-counter--error": "sendbox_sendbox__text-counter--error"
-};
-
 // src/components/sendbox/index.tsx
 var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = hooks8;
+var styles12 = {
+  "webchat-fluent__sendbox": {
+    color: "var(--webchat-colorNeutralForeground1)",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    padding: "0 10px 10px",
+    textRendering: "optimizeLegibility"
+  },
+  "webchat-fluent__sendbox__sendbox": {
+    backgroundColor: "var(--webchat-colorNeutralBackground1)",
+    border: "1px solid var(--webchat-colorNeutralStroke1)",
+    borderRadius: "var(--webchat-borderRadiusLarge)",
+    display: "grid",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    fontSize: "14px",
+    gap: "6px",
+    lineHeight: "20px",
+    padding: "8px",
+    position: "relative",
+    "&:focus-within": {
+      borderColor: "var(--webchat-colorNeutralStroke1Selected)",
+      // TODO clarify with design the color:
+      // - Teams is using colorCompoundBrandForeground1
+      // - Fluent is using colorCompoundBrandStroke
+      // - we are using colorCompoundBrandForeground1Hover
+      boxShadow: "inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)"
+    }
+  },
+  "webchat-fluent__sendbox__sendbox-text": {
+    backgroundColor: "transparent",
+    border: "none",
+    flex: "auto",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    fontSize: "14px",
+    lineHeight: "20px",
+    outline: "none",
+    padding: "4px 4px 0",
+    resize: "none"
+  },
+  "webchat-fluent__sendbox__sendbox-controls": {
+    alignItems: "center",
+    display: "flex",
+    paddingInlineStart: "4px"
+  },
+  "webchat-fluent__sendbox__text-counter": {
+    color: "var(--webchat-colorNeutralForeground4)",
+    cursor: "default",
+    fontFamily: "var(--webchat-fontFamilyNumeric)",
+    fontSize: "10px",
+    lineHeight: "14px"
+  },
+  "webchat-fluent__sendbox__text-counter--error": {
+    color: "var(--webchat-colorStatusDangerForeground1)"
+  }
+};
 function SendBox(props) {
   const inputRef = useRef6(null);
   const [message, setMessage] = useState3("");
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
-  const classNames = useStyles_default(sendbox_default);
+  const classNames = useStyles(styles12);
   const localize = useLocalizer7();
   const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId("sendbox__error-message-id");
+  const errorMessageId = useUniqueId("webchat-fluent__sendbox__error-message-id");
   const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
   const [telephoneKeypadShown] = useShown();
   const attachmentsRef = useRefFrom6(attachments);
@@ -1017,7 +1317,7 @@ function SendBox(props) {
       "aria-errormessage": errorMessageId
     }
   };
-  return /* @__PURE__ */ React20.createElement("form", { ...aria, className: cx7(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ React20.createElement(SuggestedActions_default, null), /* @__PURE__ */ React20.createElement("div", { className: cx7(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React20.createElement("form", { ...aria, className: cx6(classNames["webchat-fluent__sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ React20.createElement(SuggestedActions_default, null), /* @__PURE__ */ React20.createElement("div", { className: cx6(classNames["webchat-fluent__sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ React20.createElement(
     Surrogate_default,
     {
       autoFocus: true,
@@ -1025,10 +1325,10 @@ function SendBox(props) {
       onButtonClick: handleTelephoneKeypadButtonClick
     }
   ), /* @__PURE__ */ React20.createElement(
-    TextArea_default2,
+    TextArea_default,
     {
       "aria-label": isMessageLengthExceeded ? localize("TEXT_INPUT_LENGTH_EXCEEDED_ALT") : localize("TEXT_INPUT_ALT"),
-      className: classNames["sendbox__sendbox-text"],
+      className: classNames["webchat-fluent__sendbox__sendbox-text"],
       "data-testid": testIds_default.sendBoxTextBox,
       hidden: telephoneKeypadShown,
       onInput: handleMessageChange,
@@ -1036,15 +1336,15 @@ function SendBox(props) {
       ref: inputRef,
       value: message
     }
-  ), /* @__PURE__ */ React20.createElement(Attachments_default2, { attachments }), /* @__PURE__ */ React20.createElement("div", { className: cx7(classNames["sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React20.createElement(Attachments_default, { attachments }), /* @__PURE__ */ React20.createElement("div", { className: cx6(classNames["webchat-fluent__sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ React20.createElement(
     "div",
     {
-      className: cx7(classNames["sendbox__text-counter"], {
-        [classNames["sendbox__text-counter--error"]]: isMessageLengthExceeded
+      className: cx6(classNames["webchat-fluent__sendbox__text-counter"], {
+        [classNames["webchat-fluent__sendbox__text-counter--error"]]: isMessageLengthExceeded
       })
     },
     `${message.length}/${maxMessageLength}`
-  ), /* @__PURE__ */ React20.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ React20.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ React20.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ToolbarSeparator, null), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React20.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ React20.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ React20.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ToolbarSeparator, null), /* @__PURE__ */ React20.createElement(
     ToolbarButton,
     {
       "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
@@ -1053,12 +1353,12 @@ function SendBox(props) {
       type: "submit"
     },
     /* @__PURE__ */ React20.createElement(SendIcon, null)
-  ))), /* @__PURE__ */ React20.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
+  ))), /* @__PURE__ */ React20.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ErrorMessage_default, { error: errorMessage, id: errorMessageId })));
 }
-var sendbox_default2 = memo14(SendBox);
+var sendbox_default = memo14(SendBox);
 
 // src/components/SendBox.tsx
-var SendBox_default = sendbox_default2;
+var SendBox_default = sendbox_default;
 
 // src/private/FluentThemeProvider.tsx
 var { ThemeProvider } = Components;
@@ -1067,8 +1367,7 @@ var FluentThemeProvider = ({ children }) => /* @__PURE__ */ React21.createElemen
 var FluentThemeProvider_default = memo15(FluentThemeProvider);
 
 // src/index.ts
-injectMetaTag("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.4ff01ae");
-injectStyles();
+injectMetaTag("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.e3f5401");
 export {
   FluentThemeProvider_default as FluentThemeProvider,
   testIds_default as testIds