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

package/dist/index.js

@@ -37,8 +37,8 @@ module.exports = __toCommonJS(src_exports);
 var import_inject_meta_tag = require("inject-meta-tag");
 
 // src/private/FluentThemeProvider.tsx
-var import_botframework_webchat_component9 = require("botframework-webchat-component");
-var import_react26 = __toESM(require("react"));
+var import_botframework_webchat_component10 = require("botframework-webchat-component");
+var import_react27 = __toESM(require("react"));
 
 // src/components/telephoneKeypad/Provider.tsx
 var import_react2 = __toESM(require("react"));
@@ -70,11 +70,13 @@ var Provider = (0, import_react2.memo)(({ children }) => {
 var Provider_default = Provider;
 
 // src/components/telephoneKeypad/Surrogate.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_use_ref_from2 = require("use-ref-from");
+var import_botframework_webchat_component = require("botframework-webchat-component");
 
 // src/components/telephoneKeypad/private/Button.tsx
 var import_react4 = __toESM(require("react"));
@@ -89,7 +91,7 @@ var Button_default = {
 };
 
 // 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");
@@ -172,39 +174,63 @@ function useShown() {
 // 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_react6 = __toESM(require("react"));
+var InfoSmallIcon_default = (0, import_react6.memo)((props) => /* @__PURE__ */ import_react6.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_react6.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_react6.memo)(
+var { LocalizedString } = import_botframework_webchat_component.Components;
+var Orientation = (0, import_react7.memo)(
   ({ children, isHorizontal }) => {
     const classNames = useStyles_default(TelephoneKeypad_default);
     return isHorizontal ? (
       // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       false
-    ) : /* @__PURE__ */ import_react6.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
+    ) : /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
   }
 );
 Orientation.displayName = "TelephoneKeypad:Orientation";
-var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHorizontal }) => {
+var TelephoneKeypad = (0, import_react7.memo)(({ autoFocus, className, onButtonClick, isHorizontal }) => {
   const autoFocusRef = (0, import_use_ref_from2.useRefFrom)(autoFocus);
   const classNames = useStyles_default(TelephoneKeypad_default);
-  const firstButtonRef = (0, import_react6.useRef)(null);
+  const firstButtonRef = (0, import_react7.useRef)(null);
   const onButtonClickRef = (0, import_use_ref_from2.useRefFrom)(onButtonClick);
   const [, setShown] = useShown();
-  const handleButton1Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
-  const handleButton2Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
-  const handleButton3Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
-  const handleButton4Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
-  const handleButton5Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
-  const handleButton6Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
-  const handleButton7Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
-  const handleButton8Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
-  const handleButton9Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
-  const handleButton0Click = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
-  const handleButtonStarClick = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
-  const handleButtonPoundClick = (0, import_react6.useCallback)(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
-  const handleKeyDown = (0, import_react6.useCallback)(
+  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)(
     (event) => {
       if (event.key === "Escape") {
         setShown(false);
@@ -212,10 +238,10 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
     },
     [setShown]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     autoFocusRef.current && firstButtonRef.current?.focus();
   }, [autoFocusRef, firstButtonRef]);
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: classNames["telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react6.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: (0, import_classnames.default)(classNames["telephone-keypad"], className), onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react7.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "1",
@@ -223,7 +249,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton1Click,
       ref: firstButtonRef
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "2",
@@ -231,7 +257,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton2Click,
       ruby: "ABC"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "3",
@@ -239,7 +265,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton3Click,
       ruby: "DEF"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "4",
@@ -247,7 +273,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton4Click,
       ruby: "GHI"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "5",
@@ -255,7 +281,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton5Click,
       ruby: "JKL"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "6",
@@ -263,7 +289,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton6Click,
       ruby: "MNO"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "7",
@@ -271,7 +297,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton7Click,
       ruby: "PQRS"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "8",
@@ -279,7 +305,7 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton8Click,
       ruby: "TUV"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     Button_default2,
     {
       button: "9",
@@ -287,26 +313,32 @@ var TelephoneKeypad = (0, import_react6.memo)(({ autoFocus, onButtonClick, isHor
       onClick: handleButton9Click,
       ruby: "WXYZ"
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ import_react6.default.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__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(
     Button_default2,
     {
       button: "pound",
       "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
       onClick: handleButtonPoundClick
     }
+  )), /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad__info-message"] }, /* @__PURE__ */ import_react7.default.createElement(InfoSmallIcon_default, null), /* @__PURE__ */ import_react7.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_react7.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react7.default.createElement(TelephoneKeypad_default2, { ...props }) : false);
+var TelephoneKeypadSurrogate = (0, import_react8.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react8.default.createElement(TelephoneKeypad_default2, { ...props }) : false);
 TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
 var Surrogate_default = TelephoneKeypadSurrogate;
 
 // src/components/Theme.tsx
-var import_react8 = __toESM(require("react"));
-var import_classnames = __toESM(require("classnames"));
+var import_react9 = __toESM(require("react"));
+var import_classnames2 = __toESM(require("classnames"));
 
 // src/components/Theme.module.css
 var Theme_default = {
@@ -317,30 +349,29 @@ var Theme_default = {
 var rootClassName = "webchat-fluent";
 function WebchatTheme(props) {
   const classNames = useStyles_default(Theme_default);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: (0, import_classnames.default)(rootClassName, classNames["theme"]) }, props.children);
+  return /* @__PURE__ */ import_react9.default.createElement("div", { className: (0, import_classnames2.default)(rootClassName, classNames["theme"]) }, props.children);
 }
 
 // src/components/sendbox/index.tsx
-var import_botframework_webchat_component8 = require("botframework-webchat-component");
-var import_classnames7 = __toESM(require("classnames"));
-var import_react25 = __toESM(require("react"));
+var import_botframework_webchat_component9 = require("botframework-webchat-component");
+var import_classnames9 = __toESM(require("classnames"));
+var import_react26 = __toESM(require("react"));
 var import_use_ref_from6 = require("use-ref-from");
 
 // src/icons/SendIcon.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 function SendIcon(props) {
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.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_react9.default.createElement(
+    /* @__PURE__ */ import_react10.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",
@@ -351,26 +382,25 @@ function SendIcon(props) {
 }
 
 // src/components/dropZone/index.tsx
-var import_botframework_webchat_component = require("botframework-webchat-component");
-var import_classnames2 = __toESM(require("classnames"));
-var import_react11 = __toESM(require("react"));
+var import_botframework_webchat_component2 = require("botframework-webchat-component");
+var import_classnames3 = __toESM(require("classnames"));
+var import_react12 = __toESM(require("react"));
 var import_use_ref_from3 = require("use-ref-from");
 
 // src/icons/AddDocumentIcon.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 function AddDocumentIcon(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: "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",
@@ -388,7 +418,7 @@ var dropZone_default = {
 };
 
 // src/components/dropZone/index.tsx
-var { useLocalizer } = import_botframework_webchat_component.hooks;
+var { useLocalizer } = import_botframework_webchat_component2.hooks;
 var handleDragOver = (event) => {
   event.preventDefault();
 };
@@ -404,12 +434,12 @@ function isDescendantOf(target, ancestor) {
   return false;
 }
 var DropZone = (props) => {
-  const [dropZoneState, setDropZoneState] = (0, import_react11.useState)(false);
+  const [dropZoneState, setDropZoneState] = (0, import_react12.useState)(false);
   const classNames = useStyles_default(dropZone_default);
-  const dropZoneRef = (0, import_react11.useRef)(null);
+  const dropZoneRef = (0, import_react12.useRef)(null);
   const localize = useLocalizer();
   const onFilesAddedRef = (0, import_use_ref_from3.useRefFrom)(props.onFilesAdded);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let entranceCounter = 0;
     const handleDragEnter = (event) => {
       entranceCounter++;
@@ -427,7 +457,7 @@ var DropZone = (props) => {
       document.removeEventListener("dragleave", handleDragLeave);
     };
   }, [setDropZoneState]);
-  const handleDrop = (0, import_react11.useCallback)(
+  const handleDrop = (0, import_react12.useCallback)(
     (event) => {
       event.preventDefault();
       setDropZoneState(false);
@@ -438,10 +468,10 @@ var DropZone = (props) => {
     },
     [onFilesAddedRef, setDropZoneState]
   );
-  return dropZoneState ? /* @__PURE__ */ import_react11.default.createElement(
+  return dropZoneState ? /* @__PURE__ */ import_react12.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,
@@ -449,26 +479,26 @@ var DropZone = (props) => {
       onDrop: handleDrop,
       ref: dropZoneRef
     },
-    /* @__PURE__ */ import_react11.default.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
+    /* @__PURE__ */ import_react12.default.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
     localize("TEXT_INPUT_DROP_ZONE")
   ) : null;
 };
 DropZone.displayName = "DropZone";
-var dropZone_default2 = (0, import_react11.memo)(DropZone);
+var dropZone_default2 = (0, import_react12.memo)(DropZone);
 
 // src/components/DropZone.tsx
 var DropZone_default = dropZone_default2;
 
 // src/components/suggestedActions/index.tsx
+var import_botframework_webchat_component4 = require("botframework-webchat-component");
+var import_classnames5 = __toESM(require("classnames"));
+var import_react15 = __toESM(require("react"));
+
+// src/components/suggestedActions/SuggestedAction.tsx
 var import_botframework_webchat_component3 = require("botframework-webchat-component");
 var import_classnames4 = __toESM(require("classnames"));
 var import_react14 = __toESM(require("react"));
 
-// src/components/suggestedActions/SuggestedAction.tsx
-var import_botframework_webchat_component2 = require("botframework-webchat-component");
-var import_classnames3 = __toESM(require("classnames"));
-var import_react13 = __toESM(require("react"));
-
 // src/components/suggestedActions/SuggestedAction.module.css
 var SuggestedAction_default = {
   "suggested-action": "SuggestedAction_suggested-action",
@@ -476,13 +506,13 @@ var SuggestedAction_default = {
 };
 
 // src/components/suggestedActions/AccessibleButton.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var preventDefaultHandler = (event) => event.preventDefault();
-var AccessibleButton = (0, import_react12.forwardRef)(
+var AccessibleButton = (0, import_react13.forwardRef)(
   ({ "aria-hidden": ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
-    const targetRef = (0, import_react12.useRef)(null);
+    const targetRef = (0, import_react13.useRef)(null);
     const ref = forwardedRef || targetRef;
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement(
       "button",
       {
         "aria-disabled": disabled ? "true" : "false",
@@ -501,10 +531,10 @@ var AccessibleButton = (0, import_react12.forwardRef)(
     );
   }
 );
-var AccessibleButton_default = (0, import_react12.memo)(AccessibleButton);
+var AccessibleButton_default = (0, import_react13.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,
@@ -519,11 +549,11 @@ function SuggestedAction({
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [disabled] = useDisabled();
   const focus = useFocus();
-  const focusRef = (0, import_react13.useRef)(null);
+  const focusRef = (0, import_react14.useRef)(null);
   const performCardAction = usePerformCardAction();
   const classNames = useStyles_default(SuggestedAction_default);
   const scrollToEnd = useScrollToEnd();
-  const handleClick = (0, import_react13.useCallback)(
+  const handleClick = (0, import_react14.useCallback)(
     ({ target }) => {
       (async function() {
         await focus("sendBoxWithoutKeyboard");
@@ -534,20 +564,20 @@ function SuggestedAction({
     },
     [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
   );
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react14.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_react13.default.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
-    /* @__PURE__ */ import_react13.default.createElement("span", null, buttonText)
+    image && /* @__PURE__ */ import_react14.default.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
+    /* @__PURE__ */ import_react14.default.createElement("span", null, buttonText)
   );
 }
-var SuggestedAction_default2 = (0, import_react13.memo)(SuggestedAction);
+var SuggestedAction_default2 = (0, import_react14.memo)(SuggestedAction);
 
 // src/components/suggestedActions/private/computeSuggestedActionText.ts
 function computeSuggestedActionText(cardAction) {
@@ -571,18 +601,18 @@ var suggestedActions_default = {
 };
 
 // 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_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.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 + "",
         {
@@ -593,7 +623,7 @@ function SuggestedActionStackedOrFlowContainer(props) {
       ),
       role: "toolbar"
     },
-    !!props.children && !!import_react14.default.Children.count(props.children) && props.children
+    !!props.children && !!import_react15.default.Children.count(props.children) && props.children
   );
 }
 function SuggestedActions() {
@@ -605,7 +635,7 @@ function SuggestedActions() {
     if (!suggestedActions?.length) {
       return null;
     }
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       SuggestedAction_default2,
       {
         buttonText: computeSuggestedActionText(cardAction),
@@ -620,7 +650,7 @@ function SuggestedActions() {
       }
     );
   });
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     SuggestedActionStackedOrFlowContainer,
     {
       "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
@@ -629,31 +659,30 @@ function SuggestedActions() {
     children
   );
 }
-var suggestedActions_default2 = (0, import_react14.memo)(SuggestedActions);
+var suggestedActions_default2 = (0, import_react15.memo)(SuggestedActions);
 
 // src/components/SuggestedActions.tsx
 var SuggestedActions_default = suggestedActions_default2;
 
 // src/components/sendbox/AddAttachmentButton.tsx
-var import_botframework_webchat_component4 = require("botframework-webchat-component");
-var import_react17 = __toESM(require("react"));
+var import_botframework_webchat_component5 = require("botframework-webchat-component");
+var import_react18 = __toESM(require("react"));
 var import_use_ref_from4 = require("use-ref-from");
 
 // src/icons/AttachmentIcon.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 function AttachmentIcon(props) {
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.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_react15.default.createElement(
+    /* @__PURE__ */ import_react16.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",
@@ -664,26 +693,29 @@ function AttachmentIcon(props) {
 }
 
 // src/components/sendbox/Toolbar.tsx
-var import_classnames5 = __toESM(require("classnames"));
-var import_react16 = __toESM(require("react"));
+var import_classnames6 = __toESM(require("classnames"));
+var import_react17 = __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_react16.memo)(
+var ToolbarButton = (0, import_react17.memo)(
   (props) => {
     const classNames = useStyles_default(Toolbar_default);
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react17.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",
@@ -697,19 +729,19 @@ var ToolbarButton = (0, import_react16.memo)(
   }
 );
 ToolbarButton.displayName = "ToolbarButton";
-var Toolbar = (0, import_react16.memo)((props) => {
+var Toolbar = (0, import_react17.memo)((props) => {
   const classNames = useStyles_default(Toolbar_default);
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: (0, import_classnames5.default)(classNames["sendbox__toolbar"], props.className) }, props.children);
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: (0, import_classnames6.default)(classNames["sendbox__toolbar"], props.className) }, props.children);
 });
 Toolbar.displayName = "Toolbar";
-var ToolbarSeparator = (0, import_react16.memo)(
+var ToolbarSeparator = (0, import_react17.memo)(
   (props) => {
     const classNames = useStyles_default(Toolbar_default);
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react17.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"
       }
     );
@@ -724,15 +756,15 @@ var AddAttachmentButton_default = {
 };
 
 // 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_react17.useRef)(null);
+  const inputRef = (0, import_react18.useRef)(null);
   const classNames = useStyles_default(AddAttachmentButton_default);
   const localize = useLocalizer3();
   const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
   const onFilesAddedRef = (0, import_use_ref_from4.useRefFrom)(props.onFilesAdded);
-  const handleClick = (0, import_react17.useCallback)(() => inputRef.current?.click(), [inputRef]);
-  const handleFileChange = (0, import_react17.useCallback)(
+  const handleClick = (0, import_react18.useCallback)(() => inputRef.current?.click(), [inputRef]);
+  const handleFileChange = (0, import_react18.useCallback)(
     ({ target: { files } }) => {
       if (files) {
         onFilesAddedRef.current?.([...files]);
@@ -743,7 +775,7 @@ function AddAttachmentButton(props) {
     },
     [inputRef, onFilesAddedRef]
   );
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react18.default.createElement(
     "input",
     {
       accept: uploadAccept,
@@ -758,21 +790,22 @@ function AddAttachmentButton(props) {
       tabIndex: -1,
       type: "file"
     }
-  ), /* @__PURE__ */ import_react17.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(
     ToolbarButton,
     {
       "aria-label": localize("TEXT_INPUT_UPLOAD_BUTTON_ALT"),
       "data-testid": testIds_default.sendBoxUploadButton,
       onClick: handleClick
     },
-    /* @__PURE__ */ import_react17.default.createElement(AttachmentIcon, null)
+    /* @__PURE__ */ import_react18.default.createElement(AttachmentIcon, null)
   ));
 }
-var AddAttachmentButton_default2 = (0, import_react17.memo)(AddAttachmentButton);
+var AddAttachmentButton_default2 = (0, import_react18.memo)(AddAttachmentButton);
 
 // src/components/sendbox/Attachments.tsx
-var import_botframework_webchat_component5 = require("botframework-webchat-component");
-var import_react18 = __toESM(require("react"));
+var import_botframework_webchat_component6 = require("botframework-webchat-component");
+var import_react19 = __toESM(require("react"));
+var import_classnames7 = __toESM(require("classnames"));
 
 // src/components/sendbox/Attachments.module.css
 var Attachments_default = {
@@ -780,7 +813,7 @@ var Attachments_default = {
 };
 
 // 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",
@@ -789,16 +822,17 @@ var attachmentsPluralStringIds = {
   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_react18.default.createElement("div", { className: classNames["sendbox__attachment"] }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
+  return attachments.length ? /* @__PURE__ */ import_react19.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__attachment"], className) }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
 }
-var Attachments_default2 = (0, import_react18.memo)(Attachments);
+var Attachments_default2 = (0, import_react19.memo)(Attachments);
 
 // src/components/sendbox/ErrorMessage.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/components/sendbox/ErrorMessage.module.css
 var ErrorMessage_default = {
@@ -810,30 +844,29 @@ function ErrorMessage(props) {
   const classNames = useStyles_default(ErrorMessage_default);
   return (
     // eslint-disable-next-line react/forbid-dom-props
-    /* @__PURE__ */ import_react19.default.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
+    /* @__PURE__ */ import_react20.default.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
   );
 }
-var ErrorMessage_default2 = (0, import_react19.memo)(ErrorMessage);
+var ErrorMessage_default2 = (0, import_react20.memo)(ErrorMessage);
 
 // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-var import_react21 = __toESM(require("react"));
-var import_botframework_webchat_component6 = require("botframework-webchat-component");
+var import_react22 = __toESM(require("react"));
+var import_botframework_webchat_component7 = require("botframework-webchat-component");
 
 // src/icons/TelephoneKeypad.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 function TelephoneKeypadIcon(props) {
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.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_react20.default.createElement(
+    /* @__PURE__ */ import_react21.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",
@@ -844,27 +877,28 @@ function TelephoneKeypadIcon(props) {
 }
 
 // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component6.hooks;
-var TelephoneKeypadToolbarButton = (0, import_react21.memo)(() => {
-  const [, setTelephoneKeypadShown] = useShown();
+var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component7.hooks;
+var TelephoneKeypadToolbarButton = (0, import_react22.memo)(() => {
+  const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
   const localize = useLocalizer5();
-  const handleClick = (0, import_react21.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
-  return /* @__PURE__ */ import_react21.default.createElement(
+  const handleClick = (0, import_react22.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
+  return /* @__PURE__ */ import_react22.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_react21.default.createElement(TelephoneKeypadIcon, null)
+    /* @__PURE__ */ import_react22.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_react22 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
+var import_react23 = __toESM(require("react"));
 
 // src/components/sendbox/TextArea.module.css
 var TextArea_default = {
@@ -877,9 +911,9 @@ var TextArea_default = {
 };
 
 // src/components/sendbox/TextArea.tsx
-var TextArea = (0, import_react22.forwardRef)((props, ref) => {
+var TextArea = (0, import_react23.forwardRef)((props, ref) => {
   const classNames = useStyles_default(TextArea_default);
-  const handleKeyDown = (0, import_react22.useCallback)((event) => {
+  const handleKeyDown = (0, import_react23.useCallback)((event) => {
     if (!event.shiftKey && event.key === "Enter") {
       event.preventDefault();
       if ("form" in event.target && event.target.form instanceof HTMLFormElement) {
@@ -887,10 +921,10 @@ var TextArea = (0, import_react22.forwardRef)((props, ref) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     "div",
     {
-      className: (0, import_classnames6.default)(
+      className: (0, import_classnames8.default)(
         classNames["sendbox__text-area"],
         {
           [classNames["sendbox__text-area--hidden"]]: props.hidden
@@ -899,10 +933,10 @@ var TextArea = (0, import_react22.forwardRef)((props, ref) => {
       ),
       role: props.hidden ? "hidden" : void 0
     },
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react23.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"]
@@ -911,11 +945,11 @@ var TextArea = (0, import_react22.forwardRef)((props, ref) => {
       props.value || props.placeholder,
       " "
     ),
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react23.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"]
@@ -936,10 +970,10 @@ TextArea.displayName = "TextArea";
 var TextArea_default2 = TextArea;
 
 // src/components/sendbox/private/useSubmitError.ts
-var import_botframework_webchat_component7 = require("botframework-webchat-component");
-var import_react23 = require("react");
+var import_botframework_webchat_component8 = require("botframework-webchat-component");
+var import_react24 = require("react");
 var import_use_ref_from5 = require("use-ref-from");
-var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component7.hooks;
+var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component8.hooks;
 var useSubmitError = ({
   attachments,
   message
@@ -949,13 +983,13 @@ var useSubmitError = ({
   const submitErrorRef = (0, import_use_ref_from5.useRefFrom)(
     connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
   );
-  const errorMessageStringMap = (0, import_react23.useMemo)(
+  const errorMessageStringMap = (0, import_react24.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_react23.useMemo)(
+  return (0, import_react24.useMemo)(
     () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
     [errorMessageStringMap, submitErrorRef]
   );
@@ -963,9 +997,9 @@ var useSubmitError = ({
 var useSubmitError_default = useSubmitError;
 
 // src/components/sendbox/private/useUniqueId.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useUniqueId(prefix) {
-  const id = (0, import_react24.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
+  const id = (0, import_react25.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
   prefix = prefix ? `${prefix}--` : "";
   return `${prefix}${id}`;
 }
@@ -974,6 +1008,10 @@ function useUniqueId(prefix) {
 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",
@@ -981,10 +1019,10 @@ var sendbox_default = {
 };
 
 // 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_react25.useRef)(null);
-  const [message, setMessage] = (0, import_react25.useState)("");
+  const inputRef = (0, import_react26.useRef)(null);
+  const [message, setMessage] = (0, import_react26.useState)("");
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
@@ -997,7 +1035,7 @@ function SendBox(props) {
   const [telephoneKeypadShown] = useShown();
   const attachmentsRef = (0, import_use_ref_from6.useRefFrom)(attachments);
   const messageRef = (0, import_use_ref_from6.useRefFrom)(message);
-  const handleSendBoxClick = (0, import_react25.useCallback)(
+  const handleSendBoxClick = (0, import_react26.useCallback)(
     (event) => {
       if ("tabIndex" in event.target && typeof event.target.tabIndex === "number" && event.target.tabIndex >= 0) {
         return;
@@ -1006,11 +1044,11 @@ function SendBox(props) {
     },
     [inputRef]
   );
-  const handleMessageChange = (0, import_react25.useCallback)(
+  const handleMessageChange = (0, import_react26.useCallback)(
     (event) => setMessage(event.currentTarget.value),
     [setMessage]
   );
-  const handleAddFiles = (0, import_react25.useCallback)(
+  const handleAddFiles = (0, import_react26.useCallback)(
     async (inputFiles) => {
       const newAttachments = Object.freeze(
         await Promise.all(
@@ -1028,7 +1066,7 @@ function SendBox(props) {
     },
     [makeThumbnail, setAttachments]
   );
-  const handleFormSubmit = (0, import_react25.useCallback)(
+  const handleFormSubmit = (0, import_react26.useCallback)(
     (event) => {
       event.preventDefault();
       if (errorRef.current !== "empty" && !isMessageLengthExceeded) {
@@ -1040,7 +1078,7 @@ function SendBox(props) {
     },
     [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
   );
-  const handleTelephoneKeypadButtonClick = (0, import_react25.useCallback)(
+  const handleTelephoneKeypadButtonClick = (0, import_react26.useCallback)(
     // TODO: We need more official way of sending DTMF.
     (dtmf) => sendMessage(`/DTMF ${dtmf}`),
     [sendMessage]
@@ -1052,18 +1090,11 @@ function SendBox(props) {
       "aria-errormessage": errorMessageId
     }
   };
-  return /* @__PURE__ */ import_react25.default.createElement("form", { ...aria, className: (0, import_classnames7.default)(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react25.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react25.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react25.default.createElement(
-    Surrogate_default,
-    {
-      autoFocus: true,
-      isHorizontal: false,
-      onButtonClick: handleTelephoneKeypadButtonClick
-    }
-  ), /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement("form", { ...aria, className: (0, import_classnames9.default)(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react26.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react26.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,
@@ -1071,38 +1102,46 @@ function SendBox(props) {
       ref: inputRef,
       value: message
     }
-  ), /* @__PURE__ */ import_react25.default.createElement(Attachments_default2, { attachments }), /* @__PURE__ */ import_react25.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ import_react25.default.createElement(
+  ), /* @__PURE__ */ import_react26.default.createElement(
+    Surrogate_default,
+    {
+      autoFocus: true,
+      className: classNames["sendbox__telephone-keypad--in-grid"],
+      isHorizontal: false,
+      onButtonClick: handleTelephoneKeypadButtonClick
+    }
+  ), /* @__PURE__ */ import_react26.default.createElement(Attachments_default2, { attachments, className: classNames["sendbox__attachment--in-grid"] }), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox-controls"], classNames["sendbox__sendbox-controls--in-grid"]) }, !telephoneKeypadShown && maxMessageLength && /* @__PURE__ */ import_react26.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_react25.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react25.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react25.default.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react25.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react25.default.createElement(
+  ), /* @__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(
     ToolbarButton,
     {
       "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
       "data-testid": testIds_default.sendBoxSendButton,
-      disabled: isMessageLengthExceeded,
+      disabled: isMessageLengthExceeded || telephoneKeypadShown,
       type: "submit"
     },
-    /* @__PURE__ */ import_react25.default.createElement(SendIcon, null)
-  ))), /* @__PURE__ */ import_react25.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react25.default.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
+    /* @__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 })));
 }
-var sendbox_default2 = (0, import_react25.memo)(SendBox);
+var sendbox_default2 = (0, import_react26.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_react26.default.createElement(WebchatTheme, null, /* @__PURE__ */ import_react26.default.createElement(Provider_default, null, /* @__PURE__ */ import_react26.default.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
-var FluentThemeProvider_default = (0, import_react26.memo)(FluentThemeProvider);
+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);
 
 // src/index.ts
-(0, import_inject_meta_tag.injectMetaTag)("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.4ff01ae");
+(0, import_inject_meta_tag.injectMetaTag)("botframework-webchat-fluent-theme:version", "4.17.0-main.20240419.2240f2a");
 injectStyles();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {