botframework-webchat-fluent-theme 4.17.0-main.20240416.4ff01ae → 4.17.0-main.20240419.2240f2a

package/dist/botframework-webchat-fluent-theme.development.js

@@ -43,6 +43,66 @@
     }
   });
 
+  // node_modules/classnames/index.js
+  var require_classnames = __commonJS({
+    "node_modules/classnames/index.js"(exports, module) {
+      (function() {
+        "use strict";
+        var hasOwn = {}.hasOwnProperty;
+        function classNames() {
+          var classes = "";
+          for (var i = 0; i < arguments.length; i++) {
+            var arg = arguments[i];
+            if (arg) {
+              classes = appendClass(classes, parseValue(arg));
+            }
+          }
+          return classes;
+        }
+        function parseValue(arg) {
+          if (typeof arg === "string" || typeof arg === "number") {
+            return arg;
+          }
+          if (typeof arg !== "object") {
+            return "";
+          }
+          if (Array.isArray(arg)) {
+            return classNames.apply(null, arg);
+          }
+          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+            return arg.toString();
+          }
+          var classes = "";
+          for (var key in arg) {
+            if (hasOwn.call(arg, key) && arg[key]) {
+              classes = appendClass(classes, key);
+            }
+          }
+          return classes;
+        }
+        function appendClass(value, newClass) {
+          if (!newClass) {
+            return value;
+          }
+          if (value) {
+            return value + " " + newClass;
+          }
+          return value + newClass;
+        }
+        if (typeof module !== "undefined" && module.exports) {
+          classNames.default = classNames;
+          module.exports = classNames;
+        } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+          define("classnames", [], function() {
+            return classNames;
+          });
+        } else {
+          window.classNames = classNames;
+        }
+      })();
+    }
+  });
+
   // node_modules/core-js-pure/internals/global.js
   var require_global = __commonJS({
     "node_modules/core-js-pure/internals/global.js"(exports, module) {
@@ -1206,66 +1266,6 @@
     }
   });
 
-  // node_modules/classnames/index.js
-  var require_classnames = __commonJS({
-    "node_modules/classnames/index.js"(exports, module) {
-      (function() {
-        "use strict";
-        var hasOwn = {}.hasOwnProperty;
-        function classNames() {
-          var classes = "";
-          for (var i = 0; i < arguments.length; i++) {
-            var arg = arguments[i];
-            if (arg) {
-              classes = appendClass(classes, parseValue(arg));
-            }
-          }
-          return classes;
-        }
-        function parseValue(arg) {
-          if (typeof arg === "string" || typeof arg === "number") {
-            return arg;
-          }
-          if (typeof arg !== "object") {
-            return "";
-          }
-          if (Array.isArray(arg)) {
-            return classNames.apply(null, arg);
-          }
-          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-            return arg.toString();
-          }
-          var classes = "";
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes = appendClass(classes, key);
-            }
-          }
-          return classes;
-        }
-        function appendClass(value, newClass) {
-          if (!newClass) {
-            return value;
-          }
-          if (value) {
-            return value + " " + newClass;
-          }
-          return value + newClass;
-        }
-        if (typeof module !== "undefined" && module.exports) {
-          classNames.default = classNames;
-          module.exports = classNames;
-        } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
-          define("classnames", [], function() {
-            return classNames;
-          });
-        } else {
-          window.classNames = classNames;
-        }
-      })();
-    }
-  });
-
   // node_modules/inject-meta-tag/lib/esmodules/injectMetaTag.js
   function injectMeta(name, content) {
     try {
@@ -1282,8 +1282,8 @@
   }
 
   // src/private/FluentThemeProvider.tsx
-  var import_botframework_webchat_component9 = __toESM(require_botframework_webchat_component());
-  var import_react27 = __toESM(require_react());
+  var import_botframework_webchat_component10 = __toESM(require_botframework_webchat_component());
+  var import_react28 = __toESM(require_react());
 
   // src/components/telephoneKeypad/Provider.tsx
   var import_react2 = __toESM(require_react());
@@ -1315,10 +1315,11 @@
   var Provider_default = Provider;
 
   // src/components/telephoneKeypad/Surrogate.tsx
-  var import_react8 = __toESM(require_react());
+  var import_react9 = __toESM(require_react());
 
   // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-  var import_react7 = __toESM(require_react());
+  var import_react8 = __toESM(require_react());
+  var import_classnames = __toESM(require_classnames());
 
   // node_modules/use-ref-from/lib/esmodules/useRefFrom.js
   var import_create = __toESM(require_create3());
@@ -1338,6 +1339,9 @@
     return readOnlyRef;
   }
 
+  // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+  var import_botframework_webchat_component = __toESM(require_botframework_webchat_component());
+
   // src/components/telephoneKeypad/private/Button.tsx
   var import_react5 = __toESM(require_react());
 
@@ -1350,7 +1354,7 @@
   };
 
   // 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";
+  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.webchat-fluent .TelephoneKeypad_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.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link {\n  color: var(--webchat-colorBrandForegroundLink);\n  text-decoration-color: transparent;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:target {\n  color: var(--webchat-colorBrandForegroundLinkSelected);\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:hover {\n  color: var(--webchat-colorBrandForegroundLinkHover);\n  text-decoration: underline 1px currentColor;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:active {\n  color: var(--webchat-colorBrandForegroundLinkPressed);\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:focus-visible {\n  outline: none;\n  text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);\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-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);\n  --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);\n  --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);\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-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n  --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\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  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\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  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  .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  color: currentColor;\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.webchat-fluent .Toolbar_sendbox__toolbar-button.Toolbar_sendbox__toolbar-button--selected {\n  color: var(--webchat-colorNeutralForeground2BrandSelected);\n}\n@media (hover: hover) {\n  .webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):hover {\n    color: var(--webchat-colorNeutralForeground2BrandHover);\n  }\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):active {\n  color: var(--webchat-colorNeutralForeground2BrandPressed);\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  background-color: inherit;\n  color: currentColor;\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  --webchat-sendbox-attachment-area-active: ;\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  grid-template: [telephone-keypad-start] \"text-area\" [telephone-keypad-end] var(--webchat-sendbox-attachment-area-active) \"controls\" / [telephone-keypad] 1fr;\n  line-height: 20px;\n  padding: 8px;\n  position: relative;\n}\n.webchat-fluent .sendbox_sendbox__sendbox:has(.sendbox_sendbox__attachment--in-grid) {\n  --webchat-sendbox-attachment-area-active: \"attachment\" ;\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 > .sendbox_sendbox__text-area--in-grid {\n  grid-area: text-area;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__attachment--in-grid {\n  grid-area: attachment;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__sendbox-controls--in-grid {\n  grid-area: controls;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__telephone-keypad--in-grid {\n  grid-area: telephone-keypad;\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  margin-inline-end: 4px;\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");
@@ -1433,39 +1437,63 @@
   // src/components/telephoneKeypad/private/TelephoneKeypad.module.css
   var TelephoneKeypad_default = {
     "telephone-keypad": "TelephoneKeypad_telephone-keypad",
-    "telephone-keypad__box": "TelephoneKeypad_telephone-keypad__box"
+    "telephone-keypad__box": "TelephoneKeypad_telephone-keypad__box",
+    "telephone-keypad__info-message": "TelephoneKeypad_telephone-keypad__info-message",
+    "telephone-keypad__info-message-link": "TelephoneKeypad_telephone-keypad__info-message-link"
   };
 
+  // src/icons/InfoSmallIcon.tsx
+  var import_react7 = __toESM(require_react());
+  var InfoSmallIcon_default = (0, import_react7.memo)((props) => /* @__PURE__ */ import_react7.default.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: props.className,
+      height: "1em",
+      viewBox: "0 0 16 16",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      "path",
+      {
+        d: "M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z",
+        fill: "currentColor"
+      }
+    )
+  ));
+
   // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-  var Orientation = (0, import_react7.memo)(
+  var { LocalizedString } = import_botframework_webchat_component.Components;
+  var Orientation = (0, import_react8.memo)(
     ({ children, isHorizontal }) => {
       const classNames = useStyles_default(TelephoneKeypad_default);
       return isHorizontal ? (
         // <HorizontalDialPadController>{children}</HorizontalDialPadController>
         false
-      ) : /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
+      ) : /* @__PURE__ */ import_react8.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
     }
   );
   Orientation.displayName = "TelephoneKeypad:Orientation";
-  var TelephoneKeypad = (0, import_react7.memo)(({ autoFocus, onButtonClick, isHorizontal }) => {
+  var TelephoneKeypad = (0, import_react8.memo)(({ autoFocus, className, onButtonClick, isHorizontal }) => {
     const autoFocusRef = useRefFrom(autoFocus);
     const classNames = useStyles_default(TelephoneKeypad_default);
-    const firstButtonRef = (0, import_react7.useRef)(null);
+    const firstButtonRef = (0, import_react8.useRef)(null);
     const onButtonClickRef = useRefFrom(onButtonClick);
     const [, setShown] = useShown();
-    const handleButton1Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
-    const handleButton2Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
-    const handleButton3Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
-    const handleButton4Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
-    const handleButton5Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
-    const handleButton6Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
-    const handleButton7Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
-    const handleButton8Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
-    const handleButton9Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
-    const handleButton0Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
-    const handleButtonStarClick = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
-    const handleButtonPoundClick = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
-    const handleKeyDown = (0, import_react7.useCallback)(
+    const handleButton1Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
+    const handleButton2Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
+    const handleButton3Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
+    const handleButton4Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
+    const handleButton5Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
+    const handleButton6Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
+    const handleButton7Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
+    const handleButton8Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
+    const handleButton9Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
+    const handleButton0Click = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
+    const handleButtonStarClick = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
+    const handleButtonPoundClick = (0, import_react8.useCallback)(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
+    const handleKeyDown = (0, import_react8.useCallback)(
       (event) => {
         if (event.key === "Escape") {
           setShown(false);
@@ -1473,10 +1501,10 @@
       },
       [setShown]
     );
-    (0, import_react7.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       autoFocusRef.current && firstButtonRef.current?.focus();
     }, [autoFocusRef, firstButtonRef]);
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react7.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react7.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement("div", { className: (0, import_classnames.default)(classNames["telephone-keypad"], className), onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react8.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "1",
@@ -1484,7 +1512,7 @@
         onClick: handleButton1Click,
         ref: firstButtonRef
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "2",
@@ -1492,7 +1520,7 @@
         onClick: handleButton2Click,
         ruby: "ABC"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "3",
@@ -1500,7 +1528,7 @@
         onClick: handleButton3Click,
         ruby: "DEF"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "4",
@@ -1508,7 +1536,7 @@
         onClick: handleButton4Click,
         ruby: "GHI"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "5",
@@ -1516,7 +1544,7 @@
         onClick: handleButton5Click,
         ruby: "JKL"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "6",
@@ -1524,7 +1552,7 @@
         onClick: handleButton6Click,
         ruby: "MNO"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "7",
@@ -1532,7 +1560,7 @@
         onClick: handleButton7Click,
         ruby: "PQRS"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "8",
@@ -1540,7 +1568,7 @@
         onClick: handleButton8Click,
         ruby: "TUV"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "9",
@@ -1548,26 +1576,32 @@
         onClick: handleButton9Click,
         ruby: "WXYZ"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ import_react7.default.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ import_react8.default.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ import_react8.default.createElement(
       Button_default2,
       {
         button: "pound",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
         onClick: handleButtonPoundClick
       }
+    )), /* @__PURE__ */ import_react8.default.createElement("div", { className: classNames["telephone-keypad__info-message"] }, /* @__PURE__ */ import_react8.default.createElement(InfoSmallIcon_default, null), /* @__PURE__ */ import_react8.default.createElement(
+      LocalizedString,
+      {
+        linkClassName: classNames["telephone-keypad__info-message-link"],
+        stringIds: "TELEPHONE_KEYPAD_INPUT_MESSAGE"
+      }
     )));
   });
   TelephoneKeypad.displayName = "TelephoneKeypad";
   var TelephoneKeypad_default2 = TelephoneKeypad;
 
   // src/components/telephoneKeypad/Surrogate.tsx
-  var TelephoneKeypadSurrogate = (0, import_react8.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react8.default.createElement(TelephoneKeypad_default2, { ...props }) : false);
+  var TelephoneKeypadSurrogate = (0, import_react9.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react9.default.createElement(TelephoneKeypad_default2, { ...props }) : false);
   TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
   var Surrogate_default = TelephoneKeypadSurrogate;
 
   // src/components/Theme.tsx
-  var import_react9 = __toESM(require_react());
-  var import_classnames = __toESM(require_classnames());
+  var import_react10 = __toESM(require_react());
+  var import_classnames2 = __toESM(require_classnames());
 
   // src/components/Theme.module.css
   var Theme_default = {
@@ -1578,29 +1612,28 @@
   var rootClassName = "webchat-fluent";
   function WebchatTheme(props) {
     const classNames = useStyles_default(Theme_default);
-    return /* @__PURE__ */ import_react9.default.createElement("div", { className: (0, import_classnames.default)(rootClassName, classNames["theme"]) }, props.children);
+    return /* @__PURE__ */ import_react10.default.createElement("div", { className: (0, import_classnames2.default)(rootClassName, classNames["theme"]) }, props.children);
   }
 
   // src/components/sendbox/index.tsx
-  var import_botframework_webchat_component8 = __toESM(require_botframework_webchat_component());
-  var import_classnames7 = __toESM(require_classnames());
-  var import_react26 = __toESM(require_react());
+  var import_botframework_webchat_component9 = __toESM(require_botframework_webchat_component());
+  var import_classnames9 = __toESM(require_classnames());
+  var import_react27 = __toESM(require_react());
 
   // src/icons/SendIcon.tsx
-  var import_react10 = __toESM(require_react());
+  var import_react11 = __toESM(require_react());
   function SendIcon(props) {
-    return /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(
       "svg",
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react10.default.createElement(
+      /* @__PURE__ */ import_react11.default.createElement(
         "path",
         {
           d: "M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z",
@@ -1611,25 +1644,24 @@
   }
 
   // src/components/dropZone/index.tsx
-  var import_botframework_webchat_component = __toESM(require_botframework_webchat_component());
-  var import_classnames2 = __toESM(require_classnames());
-  var import_react12 = __toESM(require_react());
+  var import_botframework_webchat_component2 = __toESM(require_botframework_webchat_component());
+  var import_classnames3 = __toESM(require_classnames());
+  var import_react13 = __toESM(require_react());
 
   // src/icons/AddDocumentIcon.tsx
-  var import_react11 = __toESM(require_react());
+  var import_react12 = __toESM(require_react());
   function AddDocumentIcon(props) {
-    return /* @__PURE__ */ import_react11.default.createElement(
+    return /* @__PURE__ */ import_react12.default.createElement(
       "svg",
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(
         "path",
         {
           d: "M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z",
@@ -1647,7 +1679,7 @@
   };
 
   // src/components/dropZone/index.tsx
-  var { useLocalizer } = import_botframework_webchat_component.hooks;
+  var { useLocalizer } = import_botframework_webchat_component2.hooks;
   var handleDragOver = (event) => {
     event.preventDefault();
   };
@@ -1663,12 +1695,12 @@
     return false;
   }
   var DropZone = (props) => {
-    const [dropZoneState, setDropZoneState] = (0, import_react12.useState)(false);
+    const [dropZoneState, setDropZoneState] = (0, import_react13.useState)(false);
     const classNames = useStyles_default(dropZone_default);
-    const dropZoneRef = (0, import_react12.useRef)(null);
+    const dropZoneRef = (0, import_react13.useRef)(null);
     const localize = useLocalizer();
     const onFilesAddedRef = useRefFrom(props.onFilesAdded);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       let entranceCounter = 0;
       const handleDragEnter = (event) => {
         entranceCounter++;
@@ -1686,7 +1718,7 @@
         document.removeEventListener("dragleave", handleDragLeave);
       };
     }, [setDropZoneState]);
-    const handleDrop = (0, import_react12.useCallback)(
+    const handleDrop = (0, import_react13.useCallback)(
       (event) => {
         event.preventDefault();
         setDropZoneState(false);
@@ -1697,10 +1729,10 @@
       },
       [onFilesAddedRef, setDropZoneState]
     );
-    return dropZoneState ? /* @__PURE__ */ import_react12.default.createElement(
+    return dropZoneState ? /* @__PURE__ */ import_react13.default.createElement(
       "div",
       {
-        className: (0, import_classnames2.default)(classNames["sendbox__attachment-drop-zone"], {
+        className: (0, import_classnames3.default)(classNames["sendbox__attachment-drop-zone"], {
           [classNames["sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
         }),
         "data-testid": testIds_default.sendBoxDropZone,
@@ -1708,26 +1740,26 @@
         onDrop: handleDrop,
         ref: dropZoneRef
       },
-      /* @__PURE__ */ import_react12.default.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
+      /* @__PURE__ */ import_react13.default.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
       localize("TEXT_INPUT_DROP_ZONE")
     ) : null;
   };
   DropZone.displayName = "DropZone";
-  var dropZone_default2 = (0, import_react12.memo)(DropZone);
+  var dropZone_default2 = (0, import_react13.memo)(DropZone);
 
   // src/components/DropZone.tsx
   var DropZone_default = dropZone_default2;
 
   // src/components/suggestedActions/index.tsx
+  var import_botframework_webchat_component4 = __toESM(require_botframework_webchat_component());
+  var import_classnames5 = __toESM(require_classnames());
+  var import_react16 = __toESM(require_react());
+
+  // src/components/suggestedActions/SuggestedAction.tsx
   var import_botframework_webchat_component3 = __toESM(require_botframework_webchat_component());
   var import_classnames4 = __toESM(require_classnames());
   var import_react15 = __toESM(require_react());
 
-  // src/components/suggestedActions/SuggestedAction.tsx
-  var import_botframework_webchat_component2 = __toESM(require_botframework_webchat_component());
-  var import_classnames3 = __toESM(require_classnames());
-  var import_react14 = __toESM(require_react());
-
   // src/components/suggestedActions/SuggestedAction.module.css
   var SuggestedAction_default = {
     "suggested-action": "SuggestedAction_suggested-action",
@@ -1735,13 +1767,13 @@
   };
 
   // src/components/suggestedActions/AccessibleButton.tsx
-  var import_react13 = __toESM(require_react());
+  var import_react14 = __toESM(require_react());
   var preventDefaultHandler = (event) => event.preventDefault();
-  var AccessibleButton = (0, import_react13.forwardRef)(
+  var AccessibleButton = (0, import_react14.forwardRef)(
     ({ "aria-hidden": ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
-      const targetRef = (0, import_react13.useRef)(null);
+      const targetRef = (0, import_react14.useRef)(null);
       const ref = forwardedRef || targetRef;
-      return /* @__PURE__ */ import_react13.default.createElement(
+      return /* @__PURE__ */ import_react14.default.createElement(
         "button",
         {
           "aria-disabled": disabled ? "true" : "false",
@@ -1760,10 +1792,10 @@
       );
     }
   );
-  var AccessibleButton_default = (0, import_react13.memo)(AccessibleButton);
+  var AccessibleButton_default = (0, import_react14.memo)(AccessibleButton);
 
   // src/components/suggestedActions/SuggestedAction.tsx
-  var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component2.hooks;
+  var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component3.hooks;
   function SuggestedAction({
     buttonText,
     className,
@@ -1778,11 +1810,11 @@
     const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
     const [disabled] = useDisabled();
     const focus = useFocus();
-    const focusRef = (0, import_react14.useRef)(null);
+    const focusRef = (0, import_react15.useRef)(null);
     const performCardAction = usePerformCardAction();
     const classNames = useStyles_default(SuggestedAction_default);
     const scrollToEnd = useScrollToEnd();
-    const handleClick = (0, import_react14.useCallback)(
+    const handleClick = (0, import_react15.useCallback)(
       ({ target }) => {
         (async function() {
           await focus("sendBoxWithoutKeyboard");
@@ -1793,20 +1825,20 @@
       },
       [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
     );
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       AccessibleButton_default,
       {
-        className: (0, import_classnames3.default)(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
+        className: (0, import_classnames4.default)(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
         disabled,
         onClick: handleClick,
         ref: focusRef,
         type: "button"
       },
-      image && /* @__PURE__ */ import_react14.default.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
-      /* @__PURE__ */ import_react14.default.createElement("span", null, buttonText)
+      image && /* @__PURE__ */ import_react15.default.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
+      /* @__PURE__ */ import_react15.default.createElement("span", null, buttonText)
     );
   }
-  var SuggestedAction_default2 = (0, import_react14.memo)(SuggestedAction);
+  var SuggestedAction_default2 = (0, import_react15.memo)(SuggestedAction);
 
   // src/components/suggestedActions/private/computeSuggestedActionText.ts
   function computeSuggestedActionText(cardAction) {
@@ -1830,18 +1862,18 @@
   };
 
   // src/components/suggestedActions/index.tsx
-  var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component3.hooks;
+  var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component4.hooks;
   function SuggestedActionStackedOrFlowContainer(props) {
     const [{ suggestedActionLayout }] = useStyleOptions();
     const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
     const classNames = useStyles_default(suggestedActions_default);
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(
       "div",
       {
         "aria-label": props["aria-label"],
         "aria-live": "polite",
         "aria-orientation": "vertical",
-        className: (0, import_classnames4.default)(
+        className: (0, import_classnames5.default)(
           classNames["suggested-actions"],
           suggestedActionsStyleSet + "",
           {
@@ -1852,7 +1884,7 @@
         ),
         role: "toolbar"
       },
-      !!props.children && !!import_react15.default.Children.count(props.children) && props.children
+      !!props.children && !!import_react16.default.Children.count(props.children) && props.children
     );
   }
   function SuggestedActions() {
@@ -1864,7 +1896,7 @@
       if (!suggestedActions?.length) {
         return null;
       }
-      return /* @__PURE__ */ import_react15.default.createElement(
+      return /* @__PURE__ */ import_react16.default.createElement(
         SuggestedAction_default2,
         {
           buttonText: computeSuggestedActionText(cardAction),
@@ -1879,7 +1911,7 @@
         }
       );
     });
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(
       SuggestedActionStackedOrFlowContainer,
       {
         "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
@@ -1888,30 +1920,29 @@
       children
     );
   }
-  var suggestedActions_default2 = (0, import_react15.memo)(SuggestedActions);
+  var suggestedActions_default2 = (0, import_react16.memo)(SuggestedActions);
 
   // src/components/SuggestedActions.tsx
   var SuggestedActions_default = suggestedActions_default2;
 
   // src/components/sendbox/AddAttachmentButton.tsx
-  var import_botframework_webchat_component4 = __toESM(require_botframework_webchat_component());
-  var import_react18 = __toESM(require_react());
+  var import_botframework_webchat_component5 = __toESM(require_botframework_webchat_component());
+  var import_react19 = __toESM(require_react());
 
   // src/icons/AttachmentIcon.tsx
-  var import_react16 = __toESM(require_react());
+  var import_react17 = __toESM(require_react());
   function AttachmentIcon(props) {
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react17.default.createElement(
       "svg",
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react17.default.createElement(
         "path",
         {
           d: "m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z",
@@ -1922,26 +1953,29 @@
   }
 
   // src/components/sendbox/Toolbar.tsx
-  var import_classnames5 = __toESM(require_classnames());
-  var import_react17 = __toESM(require_react());
+  var import_classnames6 = __toESM(require_classnames());
+  var import_react18 = __toESM(require_react());
 
   // src/components/sendbox/Toolbar.module.css
   var Toolbar_default = {
     sendbox__toolbar: "Toolbar_sendbox__toolbar",
     "sendbox__toolbar-button": "Toolbar_sendbox__toolbar-button",
+    "sendbox__toolbar-button--selected": "Toolbar_sendbox__toolbar-button--selected",
     "sendbox__toolbar-separator": "Toolbar_sendbox__toolbar-separator"
   };
 
   // src/components/sendbox/Toolbar.tsx
   var preventDefaultHandler2 = (event) => event.preventDefault();
-  var ToolbarButton = (0, import_react17.memo)(
+  var ToolbarButton = (0, import_react18.memo)(
     (props) => {
       const classNames = useStyles_default(Toolbar_default);
-      return /* @__PURE__ */ import_react17.default.createElement(
+      return /* @__PURE__ */ import_react18.default.createElement(
         "button",
         {
           "aria-label": props["aria-label"],
-          className: (0, import_classnames5.default)(classNames["sendbox__toolbar-button"], props.className),
+          className: (0, import_classnames6.default)(classNames["sendbox__toolbar-button"], props.className, {
+            [classNames["sendbox__toolbar-button--selected"]]: props.selected
+          }),
           "data-testid": props["data-testid"],
           onClick: props.disabled ? preventDefaultHandler2 : props.onClick,
           type: props.type === "submit" ? "submit" : "button",
@@ -1955,19 +1989,19 @@
     }
   );
   ToolbarButton.displayName = "ToolbarButton";
-  var Toolbar = (0, import_react17.memo)((props) => {
+  var Toolbar = (0, import_react18.memo)((props) => {
     const classNames = useStyles_default(Toolbar_default);
-    return /* @__PURE__ */ import_react17.default.createElement("div", { className: (0, import_classnames5.default)(classNames["sendbox__toolbar"], props.className) }, props.children);
+    return /* @__PURE__ */ import_react18.default.createElement("div", { className: (0, import_classnames6.default)(classNames["sendbox__toolbar"], props.className) }, props.children);
   });
   Toolbar.displayName = "Toolbar";
-  var ToolbarSeparator = (0, import_react17.memo)(
+  var ToolbarSeparator = (0, import_react18.memo)(
     (props) => {
       const classNames = useStyles_default(Toolbar_default);
-      return /* @__PURE__ */ import_react17.default.createElement(
+      return /* @__PURE__ */ import_react18.default.createElement(
         "div",
         {
           "aria-orientation": "vertical",
-          className: (0, import_classnames5.default)(classNames["sendbox__toolbar-separator"], props.className),
+          className: (0, import_classnames6.default)(classNames["sendbox__toolbar-separator"], props.className),
           role: "separator"
         }
       );
@@ -1982,15 +2016,15 @@
   };
 
   // src/components/sendbox/AddAttachmentButton.tsx
-  var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_component4.hooks;
+  var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_component5.hooks;
   function AddAttachmentButton(props) {
-    const inputRef = (0, import_react18.useRef)(null);
+    const inputRef = (0, import_react19.useRef)(null);
     const classNames = useStyles_default(AddAttachmentButton_default);
     const localize = useLocalizer3();
     const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
     const onFilesAddedRef = useRefFrom(props.onFilesAdded);
-    const handleClick = (0, import_react18.useCallback)(() => inputRef.current?.click(), [inputRef]);
-    const handleFileChange = (0, import_react18.useCallback)(
+    const handleClick = (0, import_react19.useCallback)(() => inputRef.current?.click(), [inputRef]);
+    const handleFileChange = (0, import_react19.useCallback)(
       ({ target: { files } }) => {
         if (files) {
           onFilesAddedRef.current?.([...files]);
@@ -2001,7 +2035,7 @@
       },
       [inputRef, onFilesAddedRef]
     );
-    return /* @__PURE__ */ import_react18.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react19.default.createElement(
       "input",
       {
         accept: uploadAccept,
@@ -2016,21 +2050,22 @@
         tabIndex: -1,
         type: "file"
       }
-    ), /* @__PURE__ */ import_react18.default.createElement(
+    ), /* @__PURE__ */ import_react19.default.createElement(
       ToolbarButton,
       {
         "aria-label": localize("TEXT_INPUT_UPLOAD_BUTTON_ALT"),
         "data-testid": testIds_default.sendBoxUploadButton,
         onClick: handleClick
       },
-      /* @__PURE__ */ import_react18.default.createElement(AttachmentIcon, null)
+      /* @__PURE__ */ import_react19.default.createElement(AttachmentIcon, null)
     ));
   }
-  var AddAttachmentButton_default2 = (0, import_react18.memo)(AddAttachmentButton);
+  var AddAttachmentButton_default2 = (0, import_react19.memo)(AddAttachmentButton);
 
   // src/components/sendbox/Attachments.tsx
-  var import_botframework_webchat_component5 = __toESM(require_botframework_webchat_component());
-  var import_react19 = __toESM(require_react());
+  var import_botframework_webchat_component6 = __toESM(require_botframework_webchat_component());
+  var import_react20 = __toESM(require_react());
+  var import_classnames7 = __toESM(require_classnames());
 
   // src/components/sendbox/Attachments.module.css
   var Attachments_default = {
@@ -2038,7 +2073,7 @@
   };
 
   // src/components/sendbox/Attachments.tsx
-  var { useLocalizer: useLocalizer4 } = import_botframework_webchat_component5.hooks;
+  var { useLocalizer: useLocalizer4 } = import_botframework_webchat_component6.hooks;
   var attachmentsPluralStringIds = {
     one: "TEXT_INPUT_ATTACHMENTS_ONE",
     two: "TEXT_INPUT_ATTACHMENTS_TWO",
@@ -2047,16 +2082,17 @@
     other: "TEXT_INPUT_ATTACHMENTS_OTHER"
   };
   function Attachments({
-    attachments
+    attachments,
+    className
   }) {
     const classNames = useStyles_default(Attachments_default);
     const localizeWithPlural = useLocalizer4({ plural: true });
-    return attachments.length ? /* @__PURE__ */ import_react19.default.createElement("div", { className: classNames["sendbox__attachment"] }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
+    return attachments.length ? /* @__PURE__ */ import_react20.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__attachment"], className) }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
   }
-  var Attachments_default2 = (0, import_react19.memo)(Attachments);
+  var Attachments_default2 = (0, import_react20.memo)(Attachments);
 
   // src/components/sendbox/ErrorMessage.tsx
-  var import_react20 = __toESM(require_react());
+  var import_react21 = __toESM(require_react());
 
   // src/components/sendbox/ErrorMessage.module.css
   var ErrorMessage_default = {
@@ -2068,30 +2104,29 @@
     const classNames = useStyles_default(ErrorMessage_default);
     return (
       // eslint-disable-next-line react/forbid-dom-props
-      /* @__PURE__ */ import_react20.default.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
+      /* @__PURE__ */ import_react21.default.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
     );
   }
-  var ErrorMessage_default2 = (0, import_react20.memo)(ErrorMessage);
+  var ErrorMessage_default2 = (0, import_react21.memo)(ErrorMessage);
 
   // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-  var import_react22 = __toESM(require_react());
-  var import_botframework_webchat_component6 = __toESM(require_botframework_webchat_component());
+  var import_react23 = __toESM(require_react());
+  var import_botframework_webchat_component7 = __toESM(require_botframework_webchat_component());
 
   // src/icons/TelephoneKeypad.tsx
-  var import_react21 = __toESM(require_react());
+  var import_react22 = __toESM(require_react());
   function TelephoneKeypadIcon(props) {
-    return /* @__PURE__ */ import_react21.default.createElement(
+    return /* @__PURE__ */ import_react22.default.createElement(
       "svg",
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react21.default.createElement(
+      /* @__PURE__ */ import_react22.default.createElement(
         "path",
         {
           d: "M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z",
@@ -2102,27 +2137,28 @@
   }
 
   // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-  var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component6.hooks;
-  var TelephoneKeypadToolbarButton = (0, import_react22.memo)(() => {
-    const [, setTelephoneKeypadShown] = useShown();
+  var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component7.hooks;
+  var TelephoneKeypadToolbarButton = (0, import_react23.memo)(() => {
+    const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
     const localize = useLocalizer5();
-    const handleClick = (0, import_react22.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
-    return /* @__PURE__ */ import_react22.default.createElement(
+    const handleClick = (0, import_react23.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
+    return /* @__PURE__ */ import_react23.default.createElement(
       ToolbarButton,
       {
         "aria-label": localize("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),
         "data-testid": testIds_default.sendBoxTelephoneKeypadToolbarButton,
-        onClick: handleClick
+        onClick: handleClick,
+        selected: telephoneKeypadShown
       },
-      /* @__PURE__ */ import_react22.default.createElement(TelephoneKeypadIcon, null)
+      /* @__PURE__ */ import_react23.default.createElement(TelephoneKeypadIcon, null)
     );
   });
   TelephoneKeypadToolbarButton.displayName = "SendBox.TelephoneKeypadToolbarButton";
   var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
 
   // src/components/sendbox/TextArea.tsx
-  var import_classnames6 = __toESM(require_classnames());
-  var import_react23 = __toESM(require_react());
+  var import_classnames8 = __toESM(require_classnames());
+  var import_react24 = __toESM(require_react());
 
   // src/components/sendbox/TextArea.module.css
   var TextArea_default = {
@@ -2135,9 +2171,9 @@
   };
 
   // src/components/sendbox/TextArea.tsx
-  var TextArea = (0, import_react23.forwardRef)((props, ref) => {
+  var TextArea = (0, import_react24.forwardRef)((props, ref) => {
     const classNames = useStyles_default(TextArea_default);
-    const handleKeyDown = (0, import_react23.useCallback)((event) => {
+    const handleKeyDown = (0, import_react24.useCallback)((event) => {
       if (!event.shiftKey && event.key === "Enter") {
         event.preventDefault();
         if ("form" in event.target && event.target.form instanceof HTMLFormElement) {
@@ -2145,10 +2181,10 @@
         }
       }
     }, []);
-    return /* @__PURE__ */ import_react23.default.createElement(
+    return /* @__PURE__ */ import_react24.default.createElement(
       "div",
       {
-        className: (0, import_classnames6.default)(
+        className: (0, import_classnames8.default)(
           classNames["sendbox__text-area"],
           {
             [classNames["sendbox__text-area--hidden"]]: props.hidden
@@ -2157,10 +2193,10 @@
         ),
         role: props.hidden ? "hidden" : void 0
       },
-      /* @__PURE__ */ import_react23.default.createElement(
+      /* @__PURE__ */ import_react24.default.createElement(
         "div",
         {
-          className: (0, import_classnames6.default)(
+          className: (0, import_classnames8.default)(
             classNames["sendbox__text-area-doppelganger"],
             classNames["sendbox__text-area-shared"],
             classNames["sendbox__text-area-input--scroll"]
@@ -2169,11 +2205,11 @@
         props.value || props.placeholder,
         " "
       ),
-      /* @__PURE__ */ import_react23.default.createElement(
+      /* @__PURE__ */ import_react24.default.createElement(
         "textarea",
         {
           "aria-label": props["aria-label"],
-          className: (0, import_classnames6.default)(
+          className: (0, import_classnames8.default)(
             classNames["sendbox__text-area-input"],
             classNames["sendbox__text-area-shared"],
             classNames["sendbox__text-area-input--scroll"]
@@ -2194,9 +2230,9 @@
   var TextArea_default2 = TextArea;
 
   // src/components/sendbox/private/useSubmitError.ts
-  var import_botframework_webchat_component7 = __toESM(require_botframework_webchat_component());
-  var import_react24 = __toESM(require_react());
-  var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component7.hooks;
+  var import_botframework_webchat_component8 = __toESM(require_botframework_webchat_component());
+  var import_react25 = __toESM(require_react());
+  var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component8.hooks;
   var useSubmitError = ({
     attachments,
     message
@@ -2206,13 +2242,13 @@
     const submitErrorRef = useRefFrom(
       connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
     );
-    const errorMessageStringMap = (0, import_react24.useMemo)(
+    const errorMessageStringMap = (0, import_react25.useMemo)(
       () => Object.freeze(
         (/* @__PURE__ */ new Map()).set("empty", localize("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline", localize("CONNECTIVITY_STATUS_ALT_FATAL"))
       ),
       [localize]
     );
-    return (0, import_react24.useMemo)(
+    return (0, import_react25.useMemo)(
       () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
       [errorMessageStringMap, submitErrorRef]
     );
@@ -2220,9 +2256,9 @@
   var useSubmitError_default = useSubmitError;
 
   // src/components/sendbox/private/useUniqueId.ts
-  var import_react25 = __toESM(require_react());
+  var import_react26 = __toESM(require_react());
   function useUniqueId(prefix) {
-    const id = (0, import_react25.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
+    const id = (0, import_react26.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
     prefix = prefix ? `${prefix}--` : "";
     return `${prefix}${id}`;
   }
@@ -2231,6 +2267,10 @@
   var sendbox_default = {
     sendbox: "sendbox_sendbox",
     sendbox__sendbox: "sendbox_sendbox__sendbox",
+    "sendbox__attachment--in-grid": "sendbox_sendbox__attachment--in-grid",
+    "sendbox__text-area--in-grid": "sendbox_sendbox__text-area--in-grid",
+    "sendbox__sendbox-controls--in-grid": "sendbox_sendbox__sendbox-controls--in-grid",
+    "sendbox__telephone-keypad--in-grid": "sendbox_sendbox__telephone-keypad--in-grid",
     "sendbox__sendbox-text": "sendbox_sendbox__sendbox-text",
     "sendbox__sendbox-controls": "sendbox_sendbox__sendbox-controls",
     "sendbox__text-counter": "sendbox_sendbox__text-counter",
@@ -2238,10 +2278,10 @@
   };
 
   // src/components/sendbox/index.tsx
-  var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component8.hooks;
+  var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component9.hooks;
   function SendBox(props) {
-    const inputRef = (0, import_react26.useRef)(null);
-    const [message, setMessage] = (0, import_react26.useState)("");
+    const inputRef = (0, import_react27.useRef)(null);
+    const [message, setMessage] = (0, import_react27.useState)("");
     const [attachments, setAttachments] = useSendBoxAttachments();
     const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
     const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
@@ -2254,7 +2294,7 @@
     const [telephoneKeypadShown] = useShown();
     const attachmentsRef = useRefFrom(attachments);
     const messageRef = useRefFrom(message);
-    const handleSendBoxClick = (0, import_react26.useCallback)(
+    const handleSendBoxClick = (0, import_react27.useCallback)(
       (event) => {
         if ("tabIndex" in event.target && typeof event.target.tabIndex === "number" && event.target.tabIndex >= 0) {
           return;
@@ -2263,11 +2303,11 @@
       },
       [inputRef]
     );
-    const handleMessageChange = (0, import_react26.useCallback)(
+    const handleMessageChange = (0, import_react27.useCallback)(
       (event) => setMessage(event.currentTarget.value),
       [setMessage]
     );
-    const handleAddFiles = (0, import_react26.useCallback)(
+    const handleAddFiles = (0, import_react27.useCallback)(
       async (inputFiles) => {
         const newAttachments = Object.freeze(
           await Promise.all(
@@ -2285,7 +2325,7 @@
       },
       [makeThumbnail, setAttachments]
     );
-    const handleFormSubmit = (0, import_react26.useCallback)(
+    const handleFormSubmit = (0, import_react27.useCallback)(
       (event) => {
         event.preventDefault();
         if (errorRef.current !== "empty" && !isMessageLengthExceeded) {
@@ -2297,7 +2337,7 @@
       },
       [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
     );
-    const handleTelephoneKeypadButtonClick = (0, import_react26.useCallback)(
+    const handleTelephoneKeypadButtonClick = (0, import_react27.useCallback)(
       // TODO: We need more official way of sending DTMF.
       (dtmf) => sendMessage(`/DTMF ${dtmf}`),
       [sendMessage]
@@ -2309,18 +2349,11 @@
         "aria-errormessage": errorMessageId
       }
     };
-    return /* @__PURE__ */ import_react26.default.createElement("form", { ...aria, className: (0, import_classnames7.default)(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react26.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react26.default.createElement(
-      Surrogate_default,
-      {
-        autoFocus: true,
-        isHorizontal: false,
-        onButtonClick: handleTelephoneKeypadButtonClick
-      }
-    ), /* @__PURE__ */ import_react26.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement("form", { ...aria, className: (0, import_classnames9.default)(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react27.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react27.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react27.default.createElement(
       TextArea_default2,
       {
         "aria-label": isMessageLengthExceeded ? localize("TEXT_INPUT_LENGTH_EXCEEDED_ALT") : localize("TEXT_INPUT_ALT"),
-        className: classNames["sendbox__sendbox-text"],
+        className: (0, import_classnames9.default)(classNames["sendbox__sendbox-text"], classNames["sendbox__text-area--in-grid"]),
         "data-testid": testIds_default.sendBoxTextBox,
         hidden: telephoneKeypadShown,
         onInput: handleMessageChange,
@@ -2328,38 +2361,46 @@
         ref: inputRef,
         value: message
       }
-    ), /* @__PURE__ */ import_react26.default.createElement(Attachments_default2, { attachments }), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ import_react26.default.createElement(
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      Surrogate_default,
+      {
+        autoFocus: true,
+        className: classNames["sendbox__telephone-keypad--in-grid"],
+        isHorizontal: false,
+        onButtonClick: handleTelephoneKeypadButtonClick
+      }
+    ), /* @__PURE__ */ import_react27.default.createElement(Attachments_default2, { attachments, className: classNames["sendbox__attachment--in-grid"] }), /* @__PURE__ */ import_react27.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox-controls"], classNames["sendbox__sendbox-controls--in-grid"]) }, !telephoneKeypadShown && maxMessageLength && /* @__PURE__ */ import_react27.default.createElement(
       "div",
       {
-        className: (0, import_classnames7.default)(classNames["sendbox__text-counter"], {
+        className: (0, import_classnames9.default)(classNames["sendbox__text-counter"], {
           [classNames["sendbox__text-counter--error"]]: isMessageLengthExceeded
         })
       },
       `${message.length}/${maxMessageLength}`
-    ), /* @__PURE__ */ import_react26.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react26.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react26.default.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react26.default.createElement(
+    ), /* @__PURE__ */ import_react27.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react27.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react27.default.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react27.default.createElement(
       ToolbarButton,
       {
         "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
         "data-testid": testIds_default.sendBoxSendButton,
-        disabled: isMessageLengthExceeded,
+        disabled: isMessageLengthExceeded || telephoneKeypadShown,
         type: "submit"
       },
-      /* @__PURE__ */ import_react26.default.createElement(SendIcon, null)
-    ))), /* @__PURE__ */ import_react26.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
+      /* @__PURE__ */ import_react27.default.createElement(SendIcon, null)
+    ))), /* @__PURE__ */ import_react27.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
   }
-  var sendbox_default2 = (0, import_react26.memo)(SendBox);
+  var sendbox_default2 = (0, import_react27.memo)(SendBox);
 
   // src/components/SendBox.tsx
   var SendBox_default = sendbox_default2;
 
   // src/private/FluentThemeProvider.tsx
-  var { ThemeProvider } = import_botframework_webchat_component9.Components;
+  var { ThemeProvider } = import_botframework_webchat_component10.Components;
   var sendBoxMiddleware = [() => () => () => SendBox_default];
-  var FluentThemeProvider = ({ children }) => /* @__PURE__ */ import_react27.default.createElement(WebchatTheme, null, /* @__PURE__ */ import_react27.default.createElement(Provider_default, null, /* @__PURE__ */ import_react27.default.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
-  var FluentThemeProvider_default = (0, import_react27.memo)(FluentThemeProvider);
+  var FluentThemeProvider = ({ children }) => /* @__PURE__ */ import_react28.default.createElement(WebchatTheme, null, /* @__PURE__ */ import_react28.default.createElement(Provider_default, null, /* @__PURE__ */ import_react28.default.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
+  var FluentThemeProvider_default = (0, import_react28.memo)(FluentThemeProvider);
 
   // src/index.ts
-  injectMeta("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.4ff01ae");
+  injectMeta("botframework-webchat-fluent-theme:version", "4.17.0-main.20240419.2240f2a");
   injectStyles();
 
   // src/bundle.ts