botframework-webchat-fluent-theme 4.17.0-main.20240416.e3f5401 → 4.17.0-main.20240419.2240f2a

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

@@ -9,11 +9,11 @@
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
-  var __copyProps = (to, from2, except, desc) => {
-    if (from2 && typeof from2 === "object" || typeof from2 === "function") {
-      for (let key of __getOwnPropNames(from2))
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
         if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc(from2, key)) || desc.enumerable });
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to;
   };
@@ -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) {
@@ -320,22 +380,22 @@
       "use strict";
       var global2 = require_global();
       var userAgent = require_engine_user_agent();
-      var process2 = global2.process;
+      var process = global2.process;
       var Deno = global2.Deno;
-      var versions = process2 && process2.versions || Deno && Deno.version;
+      var versions = process && process.versions || Deno && Deno.version;
       var v8 = versions && versions.v8;
-      var match2;
+      var match;
       var version;
       if (v8) {
-        match2 = v8.split(".");
-        version = match2[0] > 0 && match2[0] < 4 ? 1 : +(match2[0] + match2[1]);
+        match = v8.split(".");
+        version = match[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1]);
       }
       if (!version && userAgent) {
-        match2 = userAgent.match(/Edge\/(\d+)/);
-        if (!match2 || match2[1] >= 74) {
-          match2 = userAgent.match(/Chrome\/(\d+)/);
-          if (match2)
-            version = +match2[1];
+        match = userAgent.match(/Edge\/(\d+)/);
+        if (!match || match[1] >= 74) {
+          match = userAgent.match(/Chrome\/(\d+)/);
+          if (match)
+            version = +match[1];
         }
       }
       module.exports = version;
@@ -917,9 +977,9 @@
       var toIntegerOrInfinity = require_to_integer_or_infinity();
       var max = Math.max;
       var min = Math.min;
-      module.exports = function(index, length2) {
+      module.exports = function(index, length) {
         var integer = toIntegerOrInfinity(index);
-        return integer < 0 ? max(integer + length2, 0) : min(integer, length2);
+        return integer < 0 ? max(integer + length, 0) : min(integer, length);
       };
     }
   });
@@ -958,19 +1018,19 @@
       var createMethod = function(IS_INCLUDES) {
         return function($this, el, fromIndex) {
           var O = toIndexedObject($this);
-          var length2 = lengthOfArrayLike(O);
-          if (length2 === 0)
+          var length = lengthOfArrayLike(O);
+          if (length === 0)
             return !IS_INCLUDES && -1;
-          var index = toAbsoluteIndex(fromIndex, length2);
+          var index = toAbsoluteIndex(fromIndex, length);
           var value;
           if (IS_INCLUDES && el !== el)
-            while (length2 > index) {
+            while (length > index) {
               value = O[index++];
               if (value !== value)
                 return true;
             }
           else
-            for (; length2 > index; index++) {
+            for (; length > index; index++) {
               if ((IS_INCLUDES || index in O) && O[index] === el)
                 return IS_INCLUDES || index || 0;
             }
@@ -1064,10 +1124,10 @@
         anObject(O);
         var props = toIndexedObject(Properties);
         var keys = objectKeys(Properties);
-        var length2 = keys.length;
+        var length = keys.length;
         var index = 0;
         var key;
-        while (length2 > index)
+        while (length > index)
           definePropertyModule.f(O, key = keys[index++], props[key]);
         return O;
       };
@@ -1144,9 +1204,9 @@
         } catch (error) {
         }
         NullProtoObject = typeof document != "undefined" ? document.domain && activeXDocument ? NullProtoObjectViaActiveX(activeXDocument) : NullProtoObjectViaIFrame() : NullProtoObjectViaActiveX(activeXDocument);
-        var length2 = enumBugKeys.length;
-        while (length2--)
-          delete NullProtoObject[PROTOTYPE][enumBugKeys[length2]];
+        var length = enumBugKeys.length;
+        while (length--)
+          delete NullProtoObject[PROTOTYPE][enumBugKeys[length]];
         return NullProtoObject();
       };
       hiddenKeys[IE_PROTO] = true;
@@ -1206,75 +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;
-        }
-      })();
-    }
-  });
-
-  // src/external.umd/botframework-webchat-api.ts
-  var require_botframework_webchat_api = __commonJS({
-    "src/external.umd/botframework-webchat-api.ts"(exports, module) {
-      module.exports = {
-        hooks: globalThis.WebChat.hooks
-      };
-    }
-  });
-
   // node_modules/inject-meta-tag/lib/esmodules/injectMetaTag.js
   function injectMeta(name, content) {
     try {
@@ -1291,7 +1282,7 @@
   }
 
   // src/private/FluentThemeProvider.tsx
-  var import_botframework_webchat_component5 = __toESM(require_botframework_webchat_component());
+  var import_botframework_webchat_component10 = __toESM(require_botframework_webchat_component());
   var import_react28 = __toESM(require_react());
 
   // src/components/telephoneKeypad/Provider.tsx
@@ -1328,6 +1319,7 @@
 
   // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
   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());
@@ -1347,1591 +1339,145 @@
     return readOnlyRef;
   }
 
-  // src/styles/index.ts
+  // 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());
 
-  // node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
-  function sheetForTag(tag) {
-    if (tag.sheet) {
-      return tag.sheet;
-    }
-    for (var i = 0; i < document.styleSheets.length; i++) {
-      if (document.styleSheets[i].ownerNode === tag) {
-        return document.styleSheets[i];
-      }
+  // src/components/telephoneKeypad/private/Button.module.css
+  var Button_default = {
+    "telephone-keypad__button": "Button_telephone-keypad__button",
+    "telephone-keypad__button__ruby": "Button_telephone-keypad__button__ruby",
+    "telephone-keypad__button__text": "Button_telephone-keypad__button__text",
+    "telephone-keypad--horizontal": "Button_telephone-keypad--horizontal"
+  };
+
+  // src/styles/injectStyle.ts
+  var injectedStyles = "/* src/components/telephoneKeypad/private/Button.module.css */\n.webchat-fluent .Button_telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  background-color: White;\n  border-radius: 100%;\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  height: 60px;\n  opacity: 0.7;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  user-select: none;\n  width: 60px;\n}\n.webchat-fluent .Button_telephone-keypad__button:hover {\n  background-color: var(--webchat-colorGray30);\n}\n.webchat-fluent .Button_telephone-keypad__button__ruby {\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n.webchat-fluent .Button_telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button {\n  height: 32px;\n  justify-content: center;\n  margin: 8px 4px;\n  width: 32px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__ruby {\n  display: none;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__text {\n  font-size: 20px;\n  margin-top: 0;\n}\n\n/* src/components/telephoneKeypad/private/TelephoneKeypad.module.css */\n.webchat-fluent .TelephoneKeypad_telephone-keypad {\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__box {\n  box-sizing: border-box;\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n  justify-items: center;\n  padding: 16px;\n  width: 100%;\n}\n.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");
+      style.append(document.createTextNode(injectedStyles));
+      document.head.appendChild(style);
     }
   }
-  function createStyleElement(options) {
-    var tag = document.createElement("style");
-    tag.setAttribute("data-emotion", options.key);
-    if (options.nonce !== void 0) {
-      tag.setAttribute("nonce", options.nonce);
-    }
-    tag.appendChild(document.createTextNode(""));
-    tag.setAttribute("data-s", "");
-    return tag;
-  }
-  var StyleSheet = /* @__PURE__ */ function() {
-    function StyleSheet2(options) {
-      var _this = this;
-      this._insertTag = function(tag) {
-        var before;
-        if (_this.tags.length === 0) {
-          if (_this.insertionPoint) {
-            before = _this.insertionPoint.nextSibling;
-          } else if (_this.prepend) {
-            before = _this.container.firstChild;
-          } else {
-            before = _this.before;
-          }
-        } else {
-          before = _this.tags[_this.tags.length - 1].nextSibling;
-        }
-        _this.container.insertBefore(tag, before);
-        _this.tags.push(tag);
-      };
-      this.isSpeedy = options.speedy === void 0 ? false : options.speedy;
-      this.tags = [];
-      this.ctr = 0;
-      this.nonce = options.nonce;
-      this.key = options.key;
-      this.container = options.container;
-      this.prepend = options.prepend;
-      this.insertionPoint = options.insertionPoint;
-      this.before = null;
-    }
-    var _proto = StyleSheet2.prototype;
-    _proto.hydrate = function hydrate(nodes) {
-      nodes.forEach(this._insertTag);
-    };
-    _proto.insert = function insert(rule) {
-      if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
-        this._insertTag(createStyleElement(this));
-      }
-      var tag = this.tags[this.tags.length - 1];
-      if (true) {
-        var isImportRule3 = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
-        if (isImportRule3 && this._alreadyInsertedOrderInsensitiveRule) {
-          console.error("You're attempting to insert the following rule:\n" + rule + "\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.");
-        }
-        this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule3;
-      }
-      if (this.isSpeedy) {
-        var sheet = sheetForTag(tag);
-        try {
-          sheet.insertRule(rule, sheet.cssRules.length);
-        } catch (e) {
-          if (!/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {
-            console.error('There was a problem inserting the following rule: "' + rule + '"', e);
-          }
-        }
-      } else {
-        tag.appendChild(document.createTextNode(rule));
-      }
-      this.ctr++;
-    };
-    _proto.flush = function flush() {
-      this.tags.forEach(function(tag) {
-        return tag.parentNode && tag.parentNode.removeChild(tag);
-      });
-      this.tags = [];
-      this.ctr = 0;
-      if (true) {
-        this._alreadyInsertedOrderInsensitiveRule = false;
-      }
-    };
-    return StyleSheet2;
-  }();
-
-  // node_modules/stylis/src/Enum.js
-  var MS = "-ms-";
-  var MOZ = "-moz-";
-  var WEBKIT = "-webkit-";
-  var COMMENT = "comm";
-  var RULESET = "rule";
-  var DECLARATION = "decl";
-  var IMPORT = "@import";
-  var KEYFRAMES = "@keyframes";
-  var LAYER = "@layer";
-
-  // node_modules/stylis/src/Utility.js
-  var abs = Math.abs;
-  var from = String.fromCharCode;
-  var assign = Object.assign;
-  function hash(value, length2) {
-    return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
-  }
-  function trim(value) {
-    return value.trim();
-  }
-  function match(value, pattern) {
-    return (value = pattern.exec(value)) ? value[0] : value;
-  }
-  function replace(value, pattern, replacement) {
-    return value.replace(pattern, replacement);
-  }
-  function indexof(value, search) {
-    return value.indexOf(search);
-  }
-  function charat(value, index) {
-    return value.charCodeAt(index) | 0;
-  }
-  function substr(value, begin, end) {
-    return value.slice(begin, end);
-  }
-  function strlen(value) {
-    return value.length;
-  }
-  function sizeof(value) {
-    return value.length;
-  }
-  function append(value, array) {
-    return array.push(value), value;
-  }
-  function combine(array, callback) {
-    return array.map(callback).join("");
-  }
 
-  // node_modules/stylis/src/Tokenizer.js
-  var line = 1;
-  var column = 1;
-  var length = 0;
-  var position = 0;
-  var character = 0;
-  var characters = "";
-  function node(value, root, parent, type, props, children, length2) {
-    return { value, root, parent, type, props, children, line, column, length: length2, return: "" };
-  }
-  function copy(root, props) {
-    return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
-  }
-  function char() {
-    return character;
-  }
-  function prev() {
-    character = position > 0 ? charat(characters, --position) : 0;
-    if (column--, character === 10)
-      column = 1, line--;
-    return character;
-  }
-  function next() {
-    character = position < length ? charat(characters, position++) : 0;
-    if (column++, character === 10)
-      column = 1, line++;
-    return character;
-  }
-  function peek() {
-    return charat(characters, position);
-  }
-  function caret() {
-    return position;
-  }
-  function slice(begin, end) {
-    return substr(characters, begin, end);
-  }
-  function token(type) {
-    switch (type) {
-      case 0:
-      case 9:
-      case 10:
-      case 13:
-      case 32:
-        return 5;
-      case 33:
-      case 43:
-      case 44:
-      case 47:
-      case 62:
-      case 64:
-      case 126:
-      case 59:
-      case 123:
-      case 125:
-        return 4;
-      case 58:
-        return 3;
-      case 34:
-      case 39:
-      case 40:
-      case 91:
-        return 2;
-      case 41:
-      case 93:
-        return 1;
-    }
-    return 0;
-  }
-  function alloc(value) {
-    return line = column = 1, length = strlen(characters = value), position = 0, [];
-  }
-  function dealloc(value) {
-    return characters = "", value;
-  }
-  function delimit(type) {
-    return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
-  }
-  function whitespace(type) {
-    while (character = peek())
-      if (character < 33)
-        next();
-      else
-        break;
-    return token(type) > 2 || token(character) > 3 ? "" : " ";
-  }
-  function escaping(index, count) {
-    while (--count && next())
-      if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
-        break;
-    return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
-  }
-  function delimiter(type) {
-    while (next())
-      switch (character) {
-        case type:
-          return position;
-        case 34:
-        case 39:
-          if (type !== 34 && type !== 39)
-            delimiter(character);
-          break;
-        case 40:
-          if (type === 41)
-            delimiter(type);
-          break;
-        case 92:
-          next();
-          break;
-      }
-    return position;
-  }
-  function commenter(type, index) {
-    while (next())
-      if (type + character === 47 + 10)
-        break;
-      else if (type + character === 42 + 42 && peek() === 47)
-        break;
-    return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
-  }
-  function identifier(index) {
-    while (!token(peek()))
-      next();
-    return slice(index, position);
+  // src/styles/useStyles.ts
+  var import_react4 = __toESM(require_react());
+  function useStyles(styles) {
+    return (0, import_react4.useMemo)(
+      () => Object.freeze(
+        Object.fromEntries(
+          Object.entries(styles).map(([baseClassName, resultClassName]) => [
+            baseClassName,
+            `${baseClassName} ${resultClassName}`
+          ])
+        )
+      ),
+      [styles]
+    );
   }
+  var useStyles_default = useStyles;
 
-  // node_modules/stylis/src/Parser.js
-  function compile(value) {
-    return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
-  }
-  function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
-    var index = 0;
-    var offset = 0;
-    var length2 = pseudo;
-    var atrule = 0;
-    var property = 0;
-    var previous = 0;
-    var variable = 1;
-    var scanning = 1;
-    var ampersand = 1;
-    var character2 = 0;
-    var type = "";
-    var props = rules;
-    var children = rulesets;
-    var reference = rule;
-    var characters2 = type;
-    while (scanning)
-      switch (previous = character2, character2 = next()) {
-        case 40:
-          if (previous != 108 && charat(characters2, length2 - 1) == 58) {
-            if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f") != -1)
-              ampersand = -1;
-            break;
-          }
-        case 34:
-        case 39:
-        case 91:
-          characters2 += delimit(character2);
-          break;
-        case 9:
-        case 10:
-        case 13:
-        case 32:
-          characters2 += whitespace(previous);
-          break;
-        case 92:
-          characters2 += escaping(caret() - 1, 7);
-          continue;
-        case 47:
-          switch (peek()) {
-            case 42:
-            case 47:
-              append(comment(commenter(next(), caret()), root, parent), declarations);
-              break;
-            default:
-              characters2 += "/";
-          }
-          break;
-        case 123 * variable:
-          points[index++] = strlen(characters2) * ampersand;
-        case 125 * variable:
-        case 59:
-        case 0:
-          switch (character2) {
-            case 0:
-            case 125:
-              scanning = 0;
-            case 59 + offset:
-              if (ampersand == -1)
-                characters2 = replace(characters2, /\f/g, "");
-              if (property > 0 && strlen(characters2) - length2)
-                append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2), declarations);
-              break;
-            case 59:
-              characters2 += ";";
-            default:
-              append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2), rulesets);
-              if (character2 === 123)
-                if (offset === 0)
-                  parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
-                else
-                  switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
-                    case 100:
-                    case 108:
-                    case 109:
-                    case 115:
-                      parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
-                      break;
-                    default:
-                      parse(characters2, reference, reference, reference, [""], children, 0, points, children);
-                  }
-          }
-          index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
-          break;
-        case 58:
-          length2 = 1 + strlen(characters2), property = previous;
-        default:
-          if (variable < 1) {
-            if (character2 == 123)
-              --variable;
-            else if (character2 == 125 && variable++ == 0 && prev() == 125)
-              continue;
-          }
-          switch (characters2 += from(character2), character2 * variable) {
-            case 38:
-              ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
-              break;
-            case 44:
-              points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
-              break;
-            case 64:
-              if (peek() === 45)
-                characters2 += delimit(next());
-              atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
-              break;
-            case 45:
-              if (previous === 45 && strlen(characters2) == 2)
-                variable = 0;
-          }
-      }
-    return rulesets;
-  }
-  function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2) {
-    var post = offset - 1;
-    var rule = offset === 0 ? rules : [""];
-    var size = sizeof(rule);
-    for (var i = 0, j = 0, k = 0; i < index; ++i)
-      for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
-        if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
-          props[k++] = z;
-    return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2);
-  }
-  function comment(value, root, parent) {
-    return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
-  }
-  function declaration(value, root, parent, length2) {
-    return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2);
-  }
+  // src/components/telephoneKeypad/private/Button.tsx
+  var Button = (0, import_react5.memo)(
+    // As we are all TypeScript, internal components do not need propTypes.
+    // eslint-disable-next-line react/prop-types
+    (0, import_react5.forwardRef)(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
+      const classNames = useStyles_default(Button_default);
+      const onClickRef = useRefFrom(onClick);
+      const handleClick = (0, import_react5.useCallback)(() => onClickRef.current?.(), [onClickRef]);
+      return /* @__PURE__ */ import_react5.default.createElement(
+        "button",
+        {
+          className: classNames["telephone-keypad__button"],
+          "data-testid": dataTestId,
+          onClick: handleClick,
+          ref,
+          type: "button"
+        },
+        /* @__PURE__ */ import_react5.default.createElement("span", { className: classNames["telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
+        !!ruby && /* @__PURE__ */ import_react5.default.createElement("ruby", { className: classNames["telephone-keypad__button__ruby"] }, ruby)
+      );
+    })
+  );
+  Button.displayName = "TelephoneKeypad.Button";
+  var Button_default2 = Button;
 
-  // node_modules/stylis/src/Serializer.js
-  function serialize(children, callback) {
-    var output = "";
-    var length2 = sizeof(children);
-    for (var i = 0; i < length2; i++)
-      output += callback(children[i], i, children, callback) || "";
-    return output;
-  }
-  function stringify(element, index, children, callback) {
-    switch (element.type) {
-      case LAYER:
-        if (element.children.length)
-          break;
-      case IMPORT:
-      case DECLARATION:
-        return element.return = element.return || element.value;
-      case COMMENT:
-        return "";
-      case KEYFRAMES:
-        return element.return = element.value + "{" + serialize(element.children, callback) + "}";
-      case RULESET:
-        element.value = element.props.join(",");
-    }
-    return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
-  }
+  // src/testIds.ts
+  var testIds = {
+    sendBoxDropZone: "send box drop zone",
+    sendBoxSendButton: "send box send button",
+    sendBoxTextBox: "send box text area",
+    sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
+    sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,
+    sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,
+    sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,
+    sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,
+    sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,
+    sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,
+    sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,
+    sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,
+    sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,
+    sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,
+    sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,
+    sendBoxTelephoneKeypadToolbarButton: "send box telephone keypad toolbar button",
+    sendBoxUploadButton: "send box upload button"
+  };
+  var testIds_default = testIds;
 
-  // node_modules/stylis/src/Middleware.js
-  function middleware(collection) {
-    var length2 = sizeof(collection);
-    return function(element, index, children, callback) {
-      var output = "";
-      for (var i = 0; i < length2; i++)
-        output += collection[i](element, index, children, callback) || "";
-      return output;
-    };
+  // src/components/telephoneKeypad/useShown.ts
+  var import_react6 = __toESM(require_react());
+  function useShown() {
+    const { setShown, shown } = (0, import_react6.useContext)(Context_default);
+    return (0, import_react6.useMemo)(() => Object.freeze([shown, setShown]), [shown, setShown]);
   }
 
-  // node_modules/@emotion/weak-memoize/dist/emotion-weak-memoize.esm.js
-  var weakMemoize = function weakMemoize2(func) {
-    var cache = /* @__PURE__ */ new WeakMap();
-    return function(arg) {
-      if (cache.has(arg)) {
-        return cache.get(arg);
-      }
-      var ret = func(arg);
-      cache.set(arg, ret);
-      return ret;
-    };
+  // src/components/telephoneKeypad/private/TelephoneKeypad.module.css
+  var TelephoneKeypad_default = {
+    "telephone-keypad": "TelephoneKeypad_telephone-keypad",
+    "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"
   };
 
-  // node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-  function memoize(fn) {
-    var cache = /* @__PURE__ */ Object.create(null);
-    return function(arg) {
-      if (cache[arg] === void 0)
-        cache[arg] = fn(arg);
-      return cache[arg];
-    };
-  }
-
-  // node_modules/@emotion/cache/dist/emotion-cache.esm.js
-  var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
-    var previous = 0;
-    var character2 = 0;
-    while (true) {
-      previous = character2;
-      character2 = peek();
-      if (previous === 38 && character2 === 12) {
-        points[index] = 1;
-      }
-      if (token(character2)) {
-        break;
+  // 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"
       }
-      next();
-    }
-    return slice(begin, position);
-  };
-  var toRules = function toRules2(parsed, points) {
-    var index = -1;
-    var character2 = 44;
-    do {
-      switch (token(character2)) {
-        case 0:
-          if (character2 === 38 && peek() === 12) {
-            points[index] = 1;
-          }
-          parsed[index] += identifierWithPointTracking(position - 1, points, index);
-          break;
-        case 2:
-          parsed[index] += delimit(character2);
-          break;
-        case 4:
-          if (character2 === 44) {
-            parsed[++index] = peek() === 58 ? "&\f" : "";
-            points[index] = parsed[index].length;
-            break;
-          }
-        default:
-          parsed[index] += from(character2);
-      }
-    } while (character2 = next());
-    return parsed;
-  };
-  var getRules = function getRules2(value, points) {
-    return dealloc(toRules(alloc(value), points));
-  };
-  var fixedElements = /* @__PURE__ */ new WeakMap();
-  var compat = function compat2(element) {
-    if (element.type !== "rule" || !element.parent || // positive .length indicates that this rule contains pseudo
-    // negative .length indicates that this rule has been already prefixed
-    element.length < 1) {
-      return;
-    }
-    var value = element.value, parent = element.parent;
-    var isImplicitRule = element.column === parent.column && element.line === parent.line;
-    while (parent.type !== "rule") {
-      parent = parent.parent;
-      if (!parent)
-        return;
-    }
-    if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) {
-      return;
-    }
-    if (isImplicitRule) {
-      return;
-    }
-    fixedElements.set(element, true);
-    var points = [];
-    var rules = getRules(value, points);
-    var parentRules = parent.props;
-    for (var i = 0, k = 0; i < rules.length; i++) {
-      for (var j = 0; j < parentRules.length; j++, k++) {
-        element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
-      }
-    }
-  };
-  var removeLabel = function removeLabel2(element) {
-    if (element.type === "decl") {
-      var value = element.value;
-      if (
-        // charcode for l
-        value.charCodeAt(0) === 108 && // charcode for b
-        value.charCodeAt(2) === 98
-      ) {
-        element["return"] = "";
-        element.value = "";
-      }
-    }
-  };
-  var ignoreFlag = "emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason";
-  var isIgnoringComment = function isIgnoringComment2(element) {
-    return element.type === "comm" && element.children.indexOf(ignoreFlag) > -1;
-  };
-  var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm2(cache) {
-    return function(element, index, children) {
-      if (element.type !== "rule" || cache.compat)
-        return;
-      var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
-      if (unsafePseudoClasses) {
-        var isNested = !!element.parent;
-        var commentContainer = isNested ? element.parent.children : (
-          // global rule at the root level
-          children
-        );
-        for (var i = commentContainer.length - 1; i >= 0; i--) {
-          var node2 = commentContainer[i];
-          if (node2.line < element.line) {
-            break;
-          }
-          if (node2.column < element.column) {
-            if (isIgnoringComment(node2)) {
-              return;
-            }
-            break;
-          }
-        }
-        unsafePseudoClasses.forEach(function(unsafePseudoClass) {
-          console.error('The pseudo class "' + unsafePseudoClass + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + unsafePseudoClass.split("-child")[0] + '-of-type".');
-        });
-      }
-    };
-  };
-  var isImportRule = function isImportRule2(element) {
-    return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
-  };
-  var isPrependedWithRegularRules = function isPrependedWithRegularRules2(index, children) {
-    for (var i = index - 1; i >= 0; i--) {
-      if (!isImportRule(children[i])) {
-        return true;
-      }
-    }
-    return false;
-  };
-  var nullifyElement = function nullifyElement2(element) {
-    element.type = "";
-    element.value = "";
-    element["return"] = "";
-    element.children = "";
-    element.props = "";
-  };
-  var incorrectImportAlarm = function incorrectImportAlarm2(element, index, children) {
-    if (!isImportRule(element)) {
-      return;
-    }
-    if (element.parent) {
-      console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
-      nullifyElement(element);
-    } else if (isPrependedWithRegularRules(index, children)) {
-      console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
-      nullifyElement(element);
-    }
-  };
-  function prefix(value, length2) {
-    switch (hash(value, length2)) {
-      case 5103:
-        return WEBKIT + "print-" + value + value;
-      case 5737:
-      case 4201:
-      case 3177:
-      case 3433:
-      case 1641:
-      case 4457:
-      case 2921:
-      case 5572:
-      case 6356:
-      case 5844:
-      case 3191:
-      case 6645:
-      case 3005:
-      case 6391:
-      case 5879:
-      case 5623:
-      case 6135:
-      case 4599:
-      case 4855:
-      case 4215:
-      case 6389:
-      case 5109:
-      case 5365:
-      case 5621:
-      case 3829:
-        return WEBKIT + value + value;
-      case 5349:
-      case 4246:
-      case 4810:
-      case 6968:
-      case 2756:
-        return WEBKIT + value + MOZ + value + MS + value + value;
-      case 6828:
-      case 4268:
-        return WEBKIT + value + MS + value + value;
-      case 6165:
-        return WEBKIT + value + MS + "flex-" + value + value;
-      case 5187:
-        return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
-      case 5443:
-        return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
-      case 4675:
-        return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
-      case 5548:
-        return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
-      case 5292:
-        return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
-      case 6060:
-        return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
-      case 4554:
-        return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
-      case 6187:
-        return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
-      case 5495:
-      case 3959:
-        return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
-      case 4968:
-        return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
-      case 4095:
-      case 3583:
-      case 4068:
-      case 2532:
-        return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
-      case 8116:
-      case 7059:
-      case 5753:
-      case 5535:
-      case 5445:
-      case 5701:
-      case 4933:
-      case 4677:
-      case 5533:
-      case 5789:
-      case 5021:
-      case 4765:
-        if (strlen(value) - 1 - length2 > 6)
-          switch (charat(value, length2 + 1)) {
-            case 109:
-              if (charat(value, length2 + 4) !== 45)
-                break;
-            case 102:
-              return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
-            case 115:
-              return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length2) + value : value;
-          }
-        break;
-      case 4949:
-        if (charat(value, length2 + 1) !== 115)
-          break;
-      case 6444:
-        switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
-          case 107:
-            return replace(value, ":", ":" + WEBKIT) + value;
-          case 101:
-            return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
-        }
-        break;
-      case 5936:
-        switch (charat(value, length2 + 11)) {
-          case 114:
-            return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
-          case 108:
-            return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
-          case 45:
-            return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
-        }
-        return WEBKIT + value + MS + value + value;
-    }
-    return value;
-  }
-  var prefixer = function prefixer2(element, index, children, callback) {
-    if (element.length > -1) {
-      if (!element["return"])
-        switch (element.type) {
-          case DECLARATION:
-            element["return"] = prefix(element.value, element.length);
-            break;
-          case KEYFRAMES:
-            return serialize([copy(element, {
-              value: replace(element.value, "@", "@" + WEBKIT)
-            })], callback);
-          case RULESET:
-            if (element.length)
-              return combine(element.props, function(value) {
-                switch (match(value, /(::plac\w+|:read-\w+)/)) {
-                  case ":read-only":
-                  case ":read-write":
-                    return serialize([copy(element, {
-                      props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")]
-                    })], callback);
-                  case "::placeholder":
-                    return serialize([copy(element, {
-                      props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")]
-                    }), copy(element, {
-                      props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")]
-                    }), copy(element, {
-                      props: [replace(value, /:(plac\w+)/, MS + "input-$1")]
-                    })], callback);
-                }
-                return "";
-              });
-        }
-    }
-  };
-  var isBrowser = typeof document !== "undefined";
-  var getServerStylisCache = isBrowser ? void 0 : weakMemoize(function() {
-    return memoize(function() {
-      var cache = {};
-      return function(name) {
-        return cache[name];
-      };
-    });
-  });
-  var defaultStylisPlugins = [prefixer];
-  var createCache = function createCache2(options) {
-    var key = options.key;
-    if (!key) {
-      throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\nIf multiple caches share the same key they might \"fight\" for each other's style elements.");
-    }
-    if (isBrowser && key === "css") {
-      var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
-      Array.prototype.forEach.call(ssrStyles, function(node2) {
-        var dataEmotionAttribute = node2.getAttribute("data-emotion");
-        if (dataEmotionAttribute.indexOf(" ") === -1) {
-          return;
-        }
-        document.head.appendChild(node2);
-        node2.setAttribute("data-s", "");
-      });
-    }
-    var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
-    if (true) {
-      if (/[^a-z-]/.test(key)) {
-        throw new Error('Emotion key must only contain lower case alphabetical characters and - but "' + key + '" was passed');
-      }
-    }
-    var inserted = {};
-    var container;
-    var nodesToHydrate = [];
-    if (isBrowser) {
-      container = options.container || document.head;
-      Array.prototype.forEach.call(
-        // this means we will ignore elements which don't have a space in them which
-        // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
-        document.querySelectorAll('style[data-emotion^="' + key + ' "]'),
-        function(node2) {
-          var attrib = node2.getAttribute("data-emotion").split(" ");
-          for (var i = 1; i < attrib.length; i++) {
-            inserted[attrib[i]] = true;
-          }
-          nodesToHydrate.push(node2);
-        }
-      );
-    }
-    var _insert;
-    var omnipresentPlugins = [compat, removeLabel];
-    if (true) {
-      omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-        get compat() {
-          return cache.compat;
-        }
-      }), incorrectImportAlarm);
-    }
-    if (isBrowser) {
-      var currentSheet;
-      var finalizingPlugins = [stringify, true ? function(element) {
-        if (!element.root) {
-          if (element["return"]) {
-            currentSheet.insert(element["return"]);
-          } else if (element.value && element.type !== COMMENT) {
-            currentSheet.insert(element.value + "{}");
-          }
-        }
-      } : rulesheet(function(rule) {
-        currentSheet.insert(rule);
-      })];
-      var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
-      var stylis = function stylis2(styles13) {
-        return serialize(compile(styles13), serializer);
-      };
-      _insert = function insert(selector, serialized, sheet, shouldCache) {
-        currentSheet = sheet;
-        if (serialized.map !== void 0) {
-          currentSheet = {
-            insert: function insert2(rule) {
-              sheet.insert(rule + serialized.map);
-            }
-          };
-        }
-        stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-        if (shouldCache) {
-          cache.inserted[serialized.name] = true;
-        }
-      };
-    } else {
-      var _finalizingPlugins = [stringify];
-      var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
-      var _stylis = function _stylis2(styles13) {
-        return serialize(compile(styles13), _serializer);
-      };
-      var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
-      var getRules3 = function getRules4(selector, serialized) {
-        var name = serialized.name;
-        if (serverStylisCache[name] === void 0) {
-          serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-        }
-        return serverStylisCache[name];
-      };
-      _insert = function _insert2(selector, serialized, sheet, shouldCache) {
-        var name = serialized.name;
-        var rules = getRules3(selector, serialized);
-        if (cache.compat === void 0) {
-          if (shouldCache) {
-            cache.inserted[name] = true;
-          }
-          if (serialized.map !== void 0) {
-            return rules + serialized.map;
-          }
-          return rules;
-        } else {
-          if (shouldCache) {
-            cache.inserted[name] = rules;
-          } else {
-            return rules;
-          }
-        }
-      };
-    }
-    var cache = {
-      key,
-      sheet: new StyleSheet({
-        key,
-        container,
-        nonce: options.nonce,
-        speedy: options.speedy,
-        prepend: options.prepend,
-        insertionPoint: options.insertionPoint
-      }),
-      nonce: options.nonce,
-      inserted,
-      registered: {},
-      insert: _insert
-    };
-    cache.sheet.hydrate(nodesToHydrate);
-    return cache;
-  };
-
-  // node_modules/@emotion/hash/dist/emotion-hash.esm.js
-  function murmur2(str) {
-    var h = 0;
-    var k, i = 0, len = str.length;
-    for (; len >= 4; ++i, len -= 4) {
-      k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
-      k = /* Math.imul(k, m): */
-      (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-      k ^= /* k >>> r: */
-      k >>> 24;
-      h = /* Math.imul(k, m): */
-      (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
-      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-    }
-    switch (len) {
-      case 3:
-        h ^= (str.charCodeAt(i + 2) & 255) << 16;
-      case 2:
-        h ^= (str.charCodeAt(i + 1) & 255) << 8;
-      case 1:
-        h ^= str.charCodeAt(i) & 255;
-        h = /* Math.imul(h, m): */
-        (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-    }
-    h ^= h >>> 13;
-    h = /* Math.imul(h, m): */
-    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-    return ((h ^ h >>> 15) >>> 0).toString(36);
-  }
-
-  // node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
-  var unitlessKeys = {
-    animationIterationCount: 1,
-    aspectRatio: 1,
-    borderImageOutset: 1,
-    borderImageSlice: 1,
-    borderImageWidth: 1,
-    boxFlex: 1,
-    boxFlexGroup: 1,
-    boxOrdinalGroup: 1,
-    columnCount: 1,
-    columns: 1,
-    flex: 1,
-    flexGrow: 1,
-    flexPositive: 1,
-    flexShrink: 1,
-    flexNegative: 1,
-    flexOrder: 1,
-    gridRow: 1,
-    gridRowEnd: 1,
-    gridRowSpan: 1,
-    gridRowStart: 1,
-    gridColumn: 1,
-    gridColumnEnd: 1,
-    gridColumnSpan: 1,
-    gridColumnStart: 1,
-    msGridRow: 1,
-    msGridRowSpan: 1,
-    msGridColumn: 1,
-    msGridColumnSpan: 1,
-    fontWeight: 1,
-    lineHeight: 1,
-    opacity: 1,
-    order: 1,
-    orphans: 1,
-    tabSize: 1,
-    widows: 1,
-    zIndex: 1,
-    zoom: 1,
-    WebkitLineClamp: 1,
-    // SVG-related properties
-    fillOpacity: 1,
-    floodOpacity: 1,
-    stopOpacity: 1,
-    strokeDasharray: 1,
-    strokeDashoffset: 1,
-    strokeMiterlimit: 1,
-    strokeOpacity: 1,
-    strokeWidth: 1
-  };
-
-  // node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
-  var ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
-Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
-You can read more about this here:
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
-  var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-  var hyphenateRegex = /[A-Z]|^ms/g;
-  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-  var isCustomProperty = function isCustomProperty2(property) {
-    return property.charCodeAt(1) === 45;
-  };
-  var isProcessableValue = function isProcessableValue2(value) {
-    return value != null && typeof value !== "boolean";
-  };
-  var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
-    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-  });
-  var processStyleValue = function processStyleValue2(key, value) {
-    switch (key) {
-      case "animation":
-      case "animationName": {
-        if (typeof value === "string") {
-          return value.replace(animationRegex, function(match2, p1, p2) {
-            cursor = {
-              name: p1,
-              styles: p2,
-              next: cursor
-            };
-            return p1;
-          });
-        }
-      }
-    }
-    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
-      return value + "px";
-    }
-    return value;
-  };
-  if (true) {
-    contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-    contentValues = ["normal", "none", "initial", "inherit", "unset"];
-    oldProcessStyleValue = processStyleValue;
-    msPattern = /^-ms-/;
-    hyphenPattern = /-(.)/g;
-    hyphenatedCache = {};
-    processStyleValue = function processStyleValue3(key, value) {
-      if (key === "content") {
-        if (typeof value !== "string" || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-          throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-        }
-      }
-      var processed = oldProcessStyleValue(key, value);
-      if (processed !== "" && !isCustomProperty(key) && key.indexOf("-") !== -1 && hyphenatedCache[key] === void 0) {
-        hyphenatedCache[key] = true;
-        console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, "ms-").replace(hyphenPattern, function(str, _char) {
-          return _char.toUpperCase();
-        }) + "?");
-      }
-      return processed;
-    };
-  }
-  var contentValuePattern;
-  var contentValues;
-  var oldProcessStyleValue;
-  var msPattern;
-  var hyphenPattern;
-  var hyphenatedCache;
-  var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
-  function handleInterpolation(mergedProps, registered, interpolation) {
-    if (interpolation == null) {
-      return "";
-    }
-    if (interpolation.__emotion_styles !== void 0) {
-      if (interpolation.toString() === "NO_COMPONENT_SELECTOR") {
-        throw new Error(noComponentSelectorMessage);
-      }
-      return interpolation;
-    }
-    switch (typeof interpolation) {
-      case "boolean": {
-        return "";
-      }
-      case "object": {
-        if (interpolation.anim === 1) {
-          cursor = {
-            name: interpolation.name,
-            styles: interpolation.styles,
-            next: cursor
-          };
-          return interpolation.name;
-        }
-        if (interpolation.styles !== void 0) {
-          var next2 = interpolation.next;
-          if (next2 !== void 0) {
-            while (next2 !== void 0) {
-              cursor = {
-                name: next2.name,
-                styles: next2.styles,
-                next: cursor
-              };
-              next2 = next2.next;
-            }
-          }
-          var styles13 = interpolation.styles + ";";
-          if (interpolation.map !== void 0) {
-            styles13 += interpolation.map;
-          }
-          return styles13;
-        }
-        return createStringFromObject(mergedProps, registered, interpolation);
-      }
-      case "function": {
-        if (mergedProps !== void 0) {
-          var previousCursor = cursor;
-          var result = interpolation(mergedProps);
-          cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result);
-        } else if (true) {
-          console.error("Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`");
-        }
-        break;
-      }
-      case "string":
-        if (true) {
-          var matched = [];
-          var replaced = interpolation.replace(animationRegex, function(match2, p1, p2) {
-            var fakeVarName = "animation" + matched.length;
-            matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, "") + "`");
-            return "${" + fakeVarName + "}";
-          });
-          if (matched.length) {
-            console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join("\n") + "\n\nYou should wrap it with `css` like this:\n\n" + ("css`" + replaced + "`"));
-          }
-        }
-        break;
-    }
-    if (registered == null) {
-      return interpolation;
-    }
-    var cached = registered[interpolation];
-    return cached !== void 0 ? cached : interpolation;
-  }
-  function createStringFromObject(mergedProps, registered, obj) {
-    var string = "";
-    if (Array.isArray(obj)) {
-      for (var i = 0; i < obj.length; i++) {
-        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-      }
-    } else {
-      for (var _key in obj) {
-        var value = obj[_key];
-        if (typeof value !== "object") {
-          if (registered != null && registered[value] !== void 0) {
-            string += _key + "{" + registered[value] + "}";
-          } else if (isProcessableValue(value)) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-          }
-        } else {
-          if (_key === "NO_COMPONENT_SELECTOR" && true) {
-            throw new Error(noComponentSelectorMessage);
-          }
-          if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
-            for (var _i = 0; _i < value.length; _i++) {
-              if (isProcessableValue(value[_i])) {
-                string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
-              }
-            }
-          } else {
-            var interpolated = handleInterpolation(mergedProps, registered, value);
-            switch (_key) {
-              case "animation":
-              case "animationName": {
-                string += processStyleName(_key) + ":" + interpolated + ";";
-                break;
-              }
-              default: {
-                if (_key === "undefined") {
-                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
-                }
-                string += _key + "{" + interpolated + "}";
-              }
-            }
-          }
-        }
-      }
-    }
-    return string;
-  }
-  var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-  var sourceMapPattern;
-  if (true) {
-    sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-  }
-  var cursor;
-  var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
-    if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
-      return args[0];
-    }
-    var stringMode = true;
-    var styles13 = "";
-    cursor = void 0;
-    var strings = args[0];
-    if (strings == null || strings.raw === void 0) {
-      stringMode = false;
-      styles13 += handleInterpolation(mergedProps, registered, strings);
-    } else {
-      if (strings[0] === void 0) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-      }
-      styles13 += strings[0];
-    }
-    for (var i = 1; i < args.length; i++) {
-      styles13 += handleInterpolation(mergedProps, registered, args[i]);
-      if (stringMode) {
-        if (strings[i] === void 0) {
-          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-        }
-        styles13 += strings[i];
-      }
-    }
-    var sourceMap;
-    if (true) {
-      styles13 = styles13.replace(sourceMapPattern, function(match3) {
-        sourceMap = match3;
-        return "";
-      });
-    }
-    labelPattern.lastIndex = 0;
-    var identifierName = "";
-    var match2;
-    while ((match2 = labelPattern.exec(styles13)) !== null) {
-      identifierName += "-" + // $FlowFixMe we know it's not null
-      match2[1];
-    }
-    var name = murmur2(styles13) + identifierName;
-    if (true) {
-      return {
-        name,
-        styles: styles13,
-        map: sourceMap,
-        next: cursor,
-        toString: function toString() {
-          return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-        }
-      };
-    }
-    return {
-      name,
-      styles: styles13,
-      next: cursor
-    };
-  };
-
-  // node_modules/@emotion/utils/dist/emotion-utils.esm.js
-  var isBrowser2 = typeof document !== "undefined";
-  function getRegisteredStyles(registered, registeredStyles, classNames) {
-    var rawClassName = "";
-    classNames.split(" ").forEach(function(className) {
-      if (registered[className] !== void 0) {
-        registeredStyles.push(registered[className] + ";");
-      } else {
-        rawClassName += className + " ";
-      }
-    });
-    return rawClassName;
-  }
-  var registerStyles = function registerStyles2(cache, serialized, isStringTag) {
-    var className = cache.key + "-" + serialized.name;
-    if (
-      // we only need to add the styles to the registered cache if the
-      // class name could be used further down
-      // the tree but if it's a string tag, we know it won't
-      // so we don't have to add it to registered cache.
-      // this improves memory usage since we can avoid storing the whole style string
-      (isStringTag === false || // we need to always store it if we're in compat mode and
-      // in node since emotion-server relies on whether a style is in
-      // the registered cache to know whether a style is global or not
-      // also, note that this check will be dead code eliminated in the browser
-      isBrowser2 === false && cache.compat !== void 0) && cache.registered[className] === void 0
-    ) {
-      cache.registered[className] = serialized.styles;
-    }
-  };
-  var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
-    registerStyles(cache, serialized, isStringTag);
-    var className = cache.key + "-" + serialized.name;
-    if (cache.inserted[serialized.name] === void 0) {
-      var stylesForSSR = "";
-      var current = serialized;
-      do {
-        var maybeStyles = cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
-        if (!isBrowser2 && maybeStyles !== void 0) {
-          stylesForSSR += maybeStyles;
-        }
-        current = current.next;
-      } while (current !== void 0);
-      if (!isBrowser2 && stylesForSSR.length !== 0) {
-        return stylesForSSR;
-      }
-    }
-  };
-
-  // node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-  function insertWithoutScoping(cache, serialized) {
-    if (cache.inserted[serialized.name] === void 0) {
-      return cache.insert("", serialized, cache.sheet, true);
-    }
-  }
-  function merge(registered, css, className) {
-    var registeredStyles = [];
-    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-    if (registeredStyles.length < 2) {
-      return className;
-    }
-    return rawClassName + css(registeredStyles);
-  }
-  var createEmotion = function createEmotion2(options) {
-    var cache = createCache(options);
-    cache.sheet.speedy = function(value) {
-      if (this.ctr !== 0) {
-        throw new Error("speedy must be changed before any rules are inserted");
-      }
-      this.isSpeedy = value;
-    };
-    cache.compat = true;
-    var css = function css2() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var serialized = serializeStyles(args, cache.registered, void 0);
-      insertStyles(cache, serialized, false);
-      return cache.key + "-" + serialized.name;
-    };
-    var keyframes = function keyframes2() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      var serialized = serializeStyles(args, cache.registered);
-      var animation = "animation-" + serialized.name;
-      insertWithoutScoping(cache, {
-        name: serialized.name,
-        styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-      });
-      return animation;
-    };
-    var injectGlobal = function injectGlobal2() {
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      var serialized = serializeStyles(args, cache.registered);
-      insertWithoutScoping(cache, serialized);
-    };
-    var cx7 = function cx8() {
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
-      }
-      return merge(cache.registered, css, classnames(args));
-    };
-    return {
-      css,
-      cx: cx7,
-      injectGlobal,
-      keyframes,
-      hydrate: function hydrate(ids) {
-        ids.forEach(function(key) {
-          cache.inserted[key] = true;
-        });
-      },
-      flush: function flush() {
-        cache.registered = {};
-        cache.inserted = {};
-        cache.sheet.flush();
-      },
-      // $FlowFixMe
-      sheet: cache.sheet,
-      cache,
-      getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
-      merge: merge.bind(null, cache.registered, css)
-    };
-  };
-  var classnames = function classnames2(args) {
-    var cls = "";
-    for (var i = 0; i < args.length; i++) {
-      var arg = args[i];
-      if (arg == null)
-        continue;
-      var toAdd = void 0;
-      switch (typeof arg) {
-        case "boolean":
-          break;
-        case "object": {
-          if (Array.isArray(arg)) {
-            toAdd = classnames2(arg);
-          } else {
-            toAdd = "";
-            for (var k in arg) {
-              if (arg[k] && k) {
-                toAdd && (toAdd += " ");
-                toAdd += k;
-              }
-            }
-          }
-          break;
-        }
-        default: {
-          toAdd = arg;
-        }
-      }
-      if (toAdd) {
-        cls && (cls += " ");
-        cls += toAdd;
-      }
-    }
-    return cls;
-  };
-
-  // src/private/useStyleToEmotionObject.ts
-  var import_react4 = __toESM(require_react());
-  var { random } = Math;
-  var emotionPool = {};
-  var nonce = "";
-  function createCSSKey() {
-    return random().toString(26).substr(2, 5).replace(/\d/gu, (value) => String.fromCharCode(value.charCodeAt(0) + 65));
-  }
-  function useStyleToEmotionObject() {
-    return (0, import_react4.useMemo)(() => {
-      const emotion = (
-        // Prefix "id-" to prevent object injection attack.
-        emotionPool[`id-${nonce}`] || (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }))
-      );
-      return (style) => emotion.css(style);
-    }, []);
-  }
-
-  // src/styles/index.ts
-  function useStyles(styles13) {
-    const getClassName = useStyleToEmotionObject();
-    return (0, import_react5.useMemo)(
-      () => Object.freeze(
-        Object.fromEntries(Object.entries(styles13).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
-      ),
-      [styles13, getClassName]
-    );
-  }
-
-  // src/components/telephoneKeypad/private/Button.tsx
-  var import_react6 = __toESM(require_react());
-  var styles = {
-    "webchat__telephone-keypad__button": {
-      "-webkit-user-select": "none",
-      alignItems: "center",
-      appearance: "none",
-      // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
-      backgroundColor: "White",
-      borderRadius: "100%",
-      // Whitelabel styles
-      // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
-      // color: 'inherit',
-      border: "solid 1px var(--webchat-colorNeutralStroke1)",
-      color: "var(--webchat-colorGray200)",
-      fontWeight: "var(--webchat-fontWeightSemibold)",
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "column",
-      height: 60,
-      opacity: 0.7,
-      padding: 0,
-      position: "relative",
-      touchAction: "none",
-      userSelect: "none",
-      width: 60,
-      "&:hover": {
-        // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
-        backgroundColor: "var(--webchat-colorGray30)"
-      }
-    },
-    "webchat__telephone-keypad__button__ruby": {
-      // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-      color: "var(--webchat-colorGray190)",
-      fontSize: 10
-    },
-    "webchat__telephone-keypad__button__text": {
-      fontSize: 24,
-      marginTop: 8
-    },
-    "webchat__telephone-keypad--horizontal": {
-      "& .webchat__telephone-keypad__button": {
-        height: 32,
-        width: 32,
-        margin: "8px 4px",
-        justifyContent: "center"
-      },
-      "webchat__telephone-keypad__button__ruby": {
-        display: "none"
-      },
-      "& .webchat__telephone-keypad__button__text": {
-        fontSize: 20,
-        marginTop: 0
-      }
-    }
-  };
-  var Button = (0, import_react6.memo)(
-    // As we are all TypeScript, internal components do not need propTypes.
-    // eslint-disable-next-line react/prop-types
-    (0, import_react6.forwardRef)(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
-      const classNames = useStyles(styles);
-      const onClickRef = useRefFrom(onClick);
-      const handleClick = (0, import_react6.useCallback)(() => onClickRef.current?.(), [onClickRef]);
-      return /* @__PURE__ */ import_react6.default.createElement(
-        "button",
-        {
-          className: classNames["webchat__telephone-keypad__button"],
-          "data-testid": dataTestId,
-          onClick: handleClick,
-          ref,
-          type: "button"
-        },
-        /* @__PURE__ */ import_react6.default.createElement("span", { className: classNames["webchat__telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
-        !!ruby && /* @__PURE__ */ import_react6.default.createElement("ruby", { className: classNames["webchat__telephone-keypad__button__ruby"] }, ruby)
-      );
-    })
-  );
-  Button.displayName = "TelephoneKeypad.Button";
-  var Button_default = Button;
-
-  // src/testIds.ts
-  var testIds = {
-    sendBoxDropZone: "send box drop zone",
-    sendBoxSendButton: "send box send button",
-    sendBoxTextBox: "send box text area",
-    sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
-    sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,
-    sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,
-    sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,
-    sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,
-    sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,
-    sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,
-    sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,
-    sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,
-    sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,
-    sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,
-    sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,
-    sendBoxTelephoneKeypadToolbarButton: "send box telephone keypad toolbar button",
-    sendBoxUploadButton: "send box upload button"
-  };
-  var testIds_default = testIds;
-
-  // src/components/telephoneKeypad/useShown.ts
-  var import_react7 = __toESM(require_react());
-  function useShown() {
-    const { setShown, shown } = (0, import_react7.useContext)(Context_default);
-    return (0, import_react7.useMemo)(() => Object.freeze([shown, setShown]), [shown, setShown]);
-  }
-
-  // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-  var styles2 = {
-    "webchat__telephone-keypad": {
-      /* Commented out whitelabel styles for now. */
-      // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
-      // borderRadius: '8px 8px 0px 0px',
-      // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
-      alignItems: "center",
-      background: "var(--webchat-colorNeutralBackground1)",
-      // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
-      border: "none",
-      borderRadius: "var(--webchat-borderRadiusXLarge)",
-      // boxShadow: 'var(--shadow16)',
-      display: "flex",
-      flexDirection: "column",
-      fontFamily: "var(--webchat-fontFamilyBase)",
-      justifyContent: "center"
-      // margin: 'var(--spacingHorizontalMNudge)'
-    },
-    "webchat__telephone-keypad__box": {
-      boxSizing: "border-box",
-      display: "grid",
-      gap: "16px",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      gridTemplateRows: "repeat(4, 1fr)",
-      justifyItems: "center",
-      padding: "16px",
-      width: "100%"
-    }
-  };
-  var Orientation = (0, import_react8.memo)(
-    ({ children, isHorizontal }) => {
-      const classNames = useStyles(styles2);
-      return isHorizontal ? (
-        // <HorizontalDialPadController>{children}</HorizontalDialPadController>
-        false
-      ) : /* @__PURE__ */ import_react8.default.createElement("div", { className: classNames["webchat__telephone-keypad__box"] }, children);
+    )
+  ));
+
+  // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+  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_react8.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
     }
   );
   Orientation.displayName = "TelephoneKeypad:Orientation";
-  var TelephoneKeypad = (0, import_react8.memo)(({ autoFocus, onButtonClick, isHorizontal }) => {
+  var TelephoneKeypad = (0, import_react8.memo)(({ autoFocus, className, onButtonClick, isHorizontal }) => {
     const autoFocusRef = useRefFrom(autoFocus);
-    const classNames = useStyles(styles2);
+    const classNames = useStyles_default(TelephoneKeypad_default);
     const firstButtonRef = (0, import_react8.useRef)(null);
     const onButtonClickRef = useRefFrom(onButtonClick);
     const [, setShown] = useShown();
@@ -2958,8 +1504,8 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     (0, import_react8.useEffect)(() => {
       autoFocusRef.current && firstButtonRef.current?.focus();
     }, [autoFocusRef, firstButtonRef]);
-    return /* @__PURE__ */ import_react8.default.createElement("div", { className: classNames["webchat__telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react8.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+    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",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton1,
@@ -2967,7 +1513,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ref: firstButtonRef
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "2",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton2,
@@ -2975,7 +1521,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "ABC"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "3",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton3,
@@ -2983,7 +1529,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "DEF"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "4",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton4,
@@ -2991,7 +1537,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "GHI"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "5",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton5,
@@ -2999,7 +1545,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "JKL"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "6",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton6,
@@ -3007,7 +1553,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "MNO"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "7",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton7,
@@ -3015,7 +1561,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "PQRS"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "8",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton8,
@@ -3023,86 +1569,55 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ruby: "TUV"
       }
     ), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+      Button_default2,
       {
         button: "9",
         "data-testid": testIds_default.sendBoxTelephoneKeypadButton9,
         onClick: handleButton9Click,
         ruby: "WXYZ"
       }
-    ), /* @__PURE__ */ import_react8.default.createElement(Button_default, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ import_react8.default.createElement(Button_default, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ import_react8.default.createElement(
-      Button_default,
+    ), /* @__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_default = TelephoneKeypad;
+  var TelephoneKeypad_default2 = TelephoneKeypad;
 
   // src/components/telephoneKeypad/Surrogate.tsx
-  var TelephoneKeypadSurrogate = (0, import_react9.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react9.default.createElement(TelephoneKeypad_default, { ...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_react10 = __toESM(require_react());
-  var styles3 = {
-    "webchat-fluent__theme": {
-      display: "contents",
-      "--webchat-colorNeutralForeground1": "var(--colorNeutralForeground1, #242424)",
-      "--webchat-colorNeutralForeground2": "var(--colorNeutralForeground2, #424242)",
-      "--webchat-colorNeutralForeground4": "var(--colorNeutralForeground4, #707070)",
-      "--webchat-colorNeutralForegroundDisabled": "var(--colorNeutralForegroundDisabled, #bdbdbd)",
-      "--webchat-colorNeutralBackground1": "var(--colorNeutralBackground1, #ffffff)",
-      "--webchat-colorNeutralBackground4": "var(--colorNeutralBackground4, #f0f0f0)",
-      "--webchat-colorNeutralBackground5": "var(--colorNeutralBackground5, #ebebeb)",
-      "--webchat-colorSubtleBackgroundHover": "var(--colorSubtleBackgroundHover, #f5f5f5)",
-      "--webchat-colorSubtleBackgroundPressed": "var(--colorSubtleBackgroundPressed, #e0e0e0)",
-      "--webchat-colorNeutralStroke1": "var(--colorNeutralStroke1, #d1d1d1)",
-      "--webchat-colorNeutralStroke2": "var(--colorNeutralStroke2, #e0e0e0)",
-      "--webchat-colorNeutralStroke1Selected": "var(--colorNeutralStroke1Selected, #bdbdbd)",
-      "--webchat-colorBrandStroke2": "var(--colorBrandStroke2, #9edcf7)",
-      "--webchat-colorBrandForeground2Hover": "var(--colorBrandForeground2Hover, #015a7a)",
-      "--webchat-colorBrandForeground2Pressed": "var(--colorBrandForeground2Pressed, #01384d)",
-      "--webchat-colorBrandBackground2Hover": "var(--colorBrandBackground2Hover, #bee7fa)",
-      "--webchat-colorBrandBackground2Pressed": "var(--colorBrandBackground2Pressed, #7fd2f5)",
-      "--webchat-colorCompoundBrandForeground1": "var(--colorCompoundBrandForeground1, #077fab)",
-      "--webchat-colorCompoundBrandForeground1Hover": "var(--colorCompoundBrandForeground1Hover, #02729c)",
-      "--webchat-colorCompoundBrandForeground1Pressed": "var(--colorCompoundBrandForeground1Pressed, #01678c)",
-      "--webchat-colorStatusDangerForeground1": "var(--colorStatusDangerForeground1, #b10e1c)",
-      // https://github.com/microsoft/fluentui/blob/master/packages/theme/src/colors/FluentColors.ts
-      "--webchat-colorGray30": "var(--colorGray30, #edebe9)",
-      "--webchat-colorGray160": "var(--colorGray160, #323130)",
-      "--webchat-colorGray190": "var(--colorGray190, #201f1e)",
-      "--webchat-colorGray200": "var(--colorGray200, #1b1a19)",
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
-      "--webchat-borderRadiusSmall": "var(--borderRadiusSmall, 2px)",
-      "--webchat-borderRadiusLarge": "var(--borderRadiusLarge, 6px)",
-      "--webchat-borderRadiusXLarge": "var(--borderRadiusXLarge, 8px)",
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts
-      "--webchat-shadow16": "var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108))",
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts
-      "--webchat-spacingHorizontalMNudge": "var(--spacingHorizontalMNudge, 10px)",
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
-      "--webchat-fontFamilyBase": `var(--fontFamilyBase, 'Segoe UI)', 'Segoe UI Web (West European))', -apple-system,
-      BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
-      "--webchat-fontFamilyNumeric": `var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI)', 'Segoe UI Web (West European))',
-      -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
-      "--webchat-fontWeightSemibold": "var(--fontWeightSemibold, 600)"
-    }
+  var import_classnames2 = __toESM(require_classnames());
+
+  // src/components/Theme.module.css
+  var Theme_default = {
+    theme: "Theme_theme"
   };
+
+  // src/components/Theme.tsx
+  var rootClassName = "webchat-fluent";
   function WebchatTheme(props) {
-    const classNames = useStyles(styles3);
-    return /* @__PURE__ */ import_react10.default.createElement("div", { className: classNames["webchat-fluent__theme"] }, props.children);
+    const classNames = useStyles_default(Theme_default);
+    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_component4 = __toESM(require_botframework_webchat_component());
-  var import_classnames6 = __toESM(require_classnames());
+  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
@@ -3113,7 +1628,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
@@ -3130,8 +1644,8 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
 
   // src/components/dropZone/index.tsx
-  var import_botframework_webchat_api = __toESM(require_botframework_webchat_api());
-  var import_classnames = __toESM(require_classnames());
+  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
@@ -3142,7 +1656,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
@@ -3158,31 +1671,15 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     );
   }
 
-  // src/components/dropZone/index.tsx
-  var { useLocalizer } = import_botframework_webchat_api.hooks;
-  var styles4 = {
-    "webchat-fluent__sendbox__attachment-drop-zone": {
-      backgroundColor: "var(--webchat-colorNeutralBackground4)",
-      borderRadius: "inherit",
-      cursor: "copy",
-      display: "grid",
-      gap: "8px",
-      inset: "0",
-      placeContent: "center",
-      placeItems: "center",
-      position: "absolute"
-    },
-    "webchat-fluent__sendbox__attachment-drop-zone--droppable": {
-      backgroundColor: "#e00",
-      color: "White"
-    },
-    "webchat-fluent__sendbox__attachment-drop-zone-icon": {
-      height: "36px",
-      // Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon, it would disable the "--droppable" modifier.
-      pointerEvents: "none",
-      width: "36px"
-    }
+  // src/components/dropZone/index.module.css
+  var dropZone_default = {
+    "sendbox__attachment-drop-zone": "dropZone_sendbox__attachment-drop-zone",
+    "sendbox__attachment-drop-zone--droppable": "dropZone_sendbox__attachment-drop-zone--droppable",
+    "sendbox__attachment-drop-zone-icon": "dropZone_sendbox__attachment-drop-zone-icon"
   };
+
+  // src/components/dropZone/index.tsx
+  var { useLocalizer } = import_botframework_webchat_component2.hooks;
   var handleDragOver = (event) => {
     event.preventDefault();
   };
@@ -3199,7 +1696,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
   var DropZone = (props) => {
     const [dropZoneState, setDropZoneState] = (0, import_react13.useState)(false);
-    const classNames = useStyles(styles4);
+    const classNames = useStyles_default(dropZone_default);
     const dropZoneRef = (0, import_react13.useRef)(null);
     const localize = useLocalizer();
     const onFilesAddedRef = useRefFrom(props.onFilesAdded);
@@ -3235,34 +1732,40 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     return dropZoneState ? /* @__PURE__ */ import_react13.default.createElement(
       "div",
       {
-        className: (0, import_classnames.default)(classNames["webchat-fluent__sendbox__attachment-drop-zone"], {
-          [classNames["webchat-fluent__sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
+        className: (0, import_classnames3.default)(classNames["sendbox__attachment-drop-zone"], {
+          [classNames["sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
         }),
         "data-testid": testIds_default.sendBoxDropZone,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
         ref: dropZoneRef
       },
-      /* @__PURE__ */ import_react13.default.createElement(AddDocumentIcon, { className: classNames["webchat-fluent__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_default = (0, import_react13.memo)(DropZone);
+  var dropZone_default2 = (0, import_react13.memo)(DropZone);
 
   // src/components/DropZone.tsx
-  var DropZone_default = dropZone_default;
+  var DropZone_default = dropZone_default2;
 
   // src/components/suggestedActions/index.tsx
-  var import_botframework_webchat_component2 = __toESM(require_botframework_webchat_component());
-  var import_classnames3 = __toESM(require_classnames());
+  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_component = __toESM(require_botframework_webchat_component());
-  var import_classnames2 = __toESM(require_classnames());
+  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.module.css
+  var SuggestedAction_default = {
+    "suggested-action": "SuggestedAction_suggested-action",
+    "suggested-action__image": "SuggestedAction_suggested-action__image"
+  };
+
   // src/components/suggestedActions/AccessibleButton.tsx
   var import_react14 = __toESM(require_react());
   var preventDefaultHandler = (event) => event.preventDefault();
@@ -3292,39 +1795,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   var AccessibleButton_default = (0, import_react14.memo)(AccessibleButton);
 
   // src/components/suggestedActions/SuggestedAction.tsx
-  var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component.hooks;
-  var styles5 = {
-    "webchat-fluent__suggested-action": {
-      alignItems: "center",
-      background: "transparent",
-      border: "1px solid var(--webchat-colorBrandStroke2)",
-      borderRadius: "8px",
-      cursor: "pointer",
-      display: "flex",
-      fontSize: "12px",
-      gap: "4px",
-      padding: "4px 8px 4px",
-      textAlign: "start",
-      transition: "all .15s ease-out",
-      "@media (hover: hover)": {
-        '&:not([aria-disabled="true"]):hover': {
-          backgroundColor: "var(--webchat-colorBrandBackground2Hover)",
-          color: "var(--webchat-colorBrandForeground2Hover)"
-        }
-      },
-      '&:not([aria-disabled="true"]):active': {
-        backgroundColor: "var(--webchat-colorBrandBackground2Pressed)",
-        color: "var(--webchat-colorBrandForeground2Pressed)"
-      },
-      '&[aria-disabled="true"]': {
-        color: "var(--webchat-colorNeutralForegroundDisabled)",
-        cursor: "not-allowed"
-      }
-    },
-    "webchat-fluent__suggested-action__image": {
-      height: "12px"
-    }
-  };
+  var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component3.hooks;
   function SuggestedAction({
     buttonText,
     className,
@@ -3341,7 +1812,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     const focus = useFocus();
     const focusRef = (0, import_react15.useRef)(null);
     const performCardAction = usePerformCardAction();
-    const classNames = useStyles(styles5);
+    const classNames = useStyles_default(SuggestedAction_default);
     const scrollToEnd = useScrollToEnd();
     const handleClick = (0, import_react15.useCallback)(
       ({ target }) => {
@@ -3357,21 +1828,17 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     return /* @__PURE__ */ import_react15.default.createElement(
       AccessibleButton_default,
       {
-        className: (0, import_classnames2.default)(
-          classNames["webchat-fluent__suggested-action"],
-          suggestedActionStyleSet + "",
-          (className || "") + ""
-        ),
+        className: (0, import_classnames4.default)(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
         disabled,
         onClick: handleClick,
         ref: focusRef,
         type: "button"
       },
-      image && /* @__PURE__ */ import_react15.default.createElement("img", { alt: imageAlt, className: classNames["webchat-fluent__suggested-action__image"], src: image }),
+      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_default = (0, import_react15.memo)(SuggestedAction);
+  var SuggestedAction_default2 = (0, import_react15.memo)(SuggestedAction);
 
   // src/components/suggestedActions/private/computeSuggestedActionText.ts
   function computeSuggestedActionText(cardAction) {
@@ -3387,44 +1854,31 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     return JSON.stringify(value);
   }
 
-  // src/components/suggestedActions/index.tsx
-  var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component2.hooks;
-  var styles6 = {
-    "webchat-fluent__suggested-actions": {
-      alignItems: "flex-end",
-      alignSelf: "flex-end",
-      display: "flex",
-      gap: "8px",
-      "&:not(:empty)": {
-        paddingBlockEnd: "8px",
-        paddingInlineStart: "4px"
-      },
-      "&.webchat-fluent__suggested-actions--flow": {
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "flex-end"
-      },
-      "&.webchat-fluent__suggested-actions--stacked": {
-        flexDirection: "column"
-      }
-    }
+  // src/components/suggestedActions/index.module.css
+  var suggestedActions_default = {
+    "suggested-actions": "suggestedActions_suggested-actions",
+    "suggested-actions--flow": "suggestedActions_suggested-actions--flow",
+    "suggested-actions--stacked": "suggestedActions_suggested-actions--stacked"
   };
+
+  // src/components/suggestedActions/index.tsx
+  var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component4.hooks;
   function SuggestedActionStackedOrFlowContainer(props) {
     const [{ suggestedActionLayout }] = useStyleOptions();
     const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
-    const classNames = useStyles(styles6);
+    const classNames = useStyles_default(suggestedActions_default);
     return /* @__PURE__ */ import_react16.default.createElement(
       "div",
       {
         "aria-label": props["aria-label"],
         "aria-live": "polite",
         "aria-orientation": "vertical",
-        className: (0, import_classnames3.default)(
-          classNames["webchat-fluent__suggested-actions"],
+        className: (0, import_classnames5.default)(
+          classNames["suggested-actions"],
           suggestedActionsStyleSet + "",
           {
-            "webchat-fluent__suggested-actions--flow": suggestedActionLayout === "flow",
-            "webchat-fluent__suggested-actions--stacked": suggestedActionLayout !== "flow"
+            [classNames["suggested-actions--flow"]]: suggestedActionLayout === "flow",
+            [classNames["suggested-actions--stacked"]]: suggestedActionLayout !== "flow"
           },
           props.className
         ),
@@ -3434,7 +1888,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     );
   }
   function SuggestedActions() {
-    const classNames = useStyles(styles6);
+    const classNames = useStyles_default(suggestedActions_default);
     const localize = useLocalizer2();
     const [suggestedActions] = useSuggestedActions2();
     const children = suggestedActions.map((cardAction, index) => {
@@ -3443,7 +1897,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         return null;
       }
       return /* @__PURE__ */ import_react16.default.createElement(
-        SuggestedAction_default,
+        SuggestedAction_default2,
         {
           buttonText: computeSuggestedActionText(cardAction),
           displayText,
@@ -3461,18 +1915,18 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       SuggestedActionStackedOrFlowContainer,
       {
         "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
-        className: classNames["webchat-fluent__suggested-actions"]
+        className: classNames["suggested-actions"]
       },
       children
     );
   }
-  var suggestedActions_default = (0, import_react16.memo)(SuggestedActions);
+  var suggestedActions_default2 = (0, import_react16.memo)(SuggestedActions);
 
   // src/components/SuggestedActions.tsx
-  var SuggestedActions_default = suggestedActions_default;
+  var SuggestedActions_default = suggestedActions_default2;
 
   // src/components/sendbox/AddAttachmentButton.tsx
-  var import_botframework_webchat_api2 = __toESM(require_botframework_webchat_api());
+  var import_botframework_webchat_component5 = __toESM(require_botframework_webchat_component());
   var import_react19 = __toESM(require_react());
 
   // src/icons/AttachmentIcon.tsx
@@ -3483,7 +1937,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
@@ -3500,63 +1953,29 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
 
   // src/components/sendbox/Toolbar.tsx
-  var import_classnames4 = __toESM(require_classnames());
+  var import_classnames6 = __toESM(require_classnames());
   var import_react18 = __toESM(require_react());
-  var styles7 = {
-    "webchat-fluent__sendbox__toolbar": {
-      display: "flex",
-      gap: "4px",
-      marginInlineStart: "auto"
-    },
-    "webchat-fluent__sendbox__toolbar-button": {
-      alignItems: "center",
-      appearance: "none",
-      aspectRatio: "1",
-      background: "transparent",
-      border: "none",
-      borderRadius: "var(--webchat-borderRadiusSmall)",
-      cursor: "pointer",
-      display: "flex",
-      justifyContent: "center",
-      padding: "3px",
-      width: "32px",
-      "> svg": {
-        fontSize: "20px",
-        pointerEvents: "none"
-      },
-      "@media (hover: hover)": {
-        '&:not([aria-disabled="true"]):hover': {
-          backgroundColor: "var(--webchat-colorSubtleBackgroundHover)",
-          color: "var(--webchat-colorCompoundBrandForeground1Hover)"
-        }
-      },
-      '&:not([aria-disabled="true"]):active': {
-        backgroundColor: "var(--webchat-colorSubtleBackgroundPressed)",
-        color: "var(--webchat-colorCompoundBrandForeground1Pressed)"
-      },
-      '&[aria-disabled="true"]': {
-        color: "var(--webchat-colorNeutralForegroundDisabled)",
-        cursor: "not-allowed"
-      }
-    },
-    "webchat-fluent__sendbox__toolbar-separator": {
-      alignSelf: "center",
-      borderInlineEnd: "1px solid var(--webchat-colorNeutralStroke2)",
-      height: "28px",
-      "&:first-child, &:last-child, &:only-child": {
-        display: "none"
-      }
-    }
+
+  // src/components/sendbox/Toolbar.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_react18.memo)(
     (props) => {
-      const classNames = useStyles(styles7);
+      const classNames = useStyles_default(Toolbar_default);
       return /* @__PURE__ */ import_react18.default.createElement(
         "button",
         {
           "aria-label": props["aria-label"],
-          className: (0, import_classnames4.default)(classNames["webchat-fluent__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",
@@ -3571,18 +1990,18 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   );
   ToolbarButton.displayName = "ToolbarButton";
   var Toolbar = (0, import_react18.memo)((props) => {
-    const classNames = useStyles(styles7);
-    return /* @__PURE__ */ import_react18.default.createElement("div", { className: (0, import_classnames4.default)(classNames["webchat-fluent__sendbox__toolbar"], props.className) }, props.children);
+    const classNames = useStyles_default(Toolbar_default);
+    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_react18.memo)(
     (props) => {
-      const classNames = useStyles(styles7);
+      const classNames = useStyles_default(Toolbar_default);
       return /* @__PURE__ */ import_react18.default.createElement(
         "div",
         {
           "aria-orientation": "vertical",
-          className: (0, import_classnames4.default)(classNames["webchat-fluent__sendbox__toolbar-separator"], props.className),
+          className: (0, import_classnames6.default)(classNames["sendbox__toolbar-separator"], props.className),
           role: "separator"
         }
       );
@@ -3590,22 +2009,17 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   );
   ToolbarSeparator.displayName = "ToolbarSeparator";
 
-  // src/components/sendbox/AddAttachmentButton.tsx
-  var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_api2.hooks;
-  var styles8 = {
-    "webchat-fluent__sendbox__add-attachment": {
-      display: "grid"
-    },
-    "webchat-fluent__sendbox__add-attachment-input": {
-      fontSize: 0,
-      height: 0,
-      opacity: 0,
-      width: 0
-    }
+  // src/components/sendbox/AddAttachmentButton.module.css
+  var AddAttachmentButton_default = {
+    "sendbox__add-attachment": "AddAttachmentButton_sendbox__add-attachment",
+    "sendbox__add-attachment-input": "AddAttachmentButton_sendbox__add-attachment-input"
   };
+
+  // src/components/sendbox/AddAttachmentButton.tsx
+  var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_component5.hooks;
   function AddAttachmentButton(props) {
     const inputRef = (0, import_react19.useRef)(null);
-    const classNames = useStyles(styles8);
+    const classNames = useStyles_default(AddAttachmentButton_default);
     const localize = useLocalizer3();
     const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
     const onFilesAddedRef = useRefFrom(props.onFilesAdded);
@@ -3621,13 +2035,13 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       },
       [inputRef, onFilesAddedRef]
     );
-    return /* @__PURE__ */ import_react19.default.createElement("div", { className: classNames["webchat-fluent__sendbox__add-attachment"] }, /* @__PURE__ */ import_react19.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react19.default.createElement(
       "input",
       {
         accept: uploadAccept,
         "aria-disabled": props.disabled,
         "aria-hidden": "true",
-        className: classNames["webchat-fluent__sendbox__add-attachment-input"],
+        className: classNames["sendbox__add-attachment-input"],
         multiple: uploadMultiple,
         onInput: props.disabled ? void 0 : handleFileChange,
         readOnly: props.disabled,
@@ -3646,21 +2060,20 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       /* @__PURE__ */ import_react19.default.createElement(AttachmentIcon, null)
     ));
   }
-  var AddAttachmentButton_default = (0, import_react19.memo)(AddAttachmentButton);
+  var AddAttachmentButton_default2 = (0, import_react19.memo)(AddAttachmentButton);
 
   // src/components/sendbox/Attachments.tsx
-  var import_botframework_webchat_api3 = __toESM(require_botframework_webchat_api());
+  var import_botframework_webchat_component6 = __toESM(require_botframework_webchat_component());
   var import_react20 = __toESM(require_react());
-  var { useLocalizer: useLocalizer4 } = import_botframework_webchat_api3.hooks;
-  var styles9 = {
-    "webchat-fluent__sendbox__attachment": {
-      border: "1px solid var(--webchat-colorNeutralStroke1)",
-      borderRadius: "var(--webchat-borderRadiusLarge)",
-      cursor: "default",
-      padding: "6px 8px",
-      width: "fit-content"
-    }
+  var import_classnames7 = __toESM(require_classnames());
+
+  // src/components/sendbox/Attachments.module.css
+  var Attachments_default = {
+    sendbox__attachment: "Attachments_sendbox__attachment"
   };
+
+  // src/components/sendbox/Attachments.tsx
+  var { useLocalizer: useLocalizer4 } = import_botframework_webchat_component6.hooks;
   var attachmentsPluralStringIds = {
     one: "TEXT_INPUT_ATTACHMENTS_ONE",
     two: "TEXT_INPUT_ATTACHMENTS_TWO",
@@ -3669,39 +2082,36 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     other: "TEXT_INPUT_ATTACHMENTS_OTHER"
   };
   function Attachments({
-    attachments
+    attachments,
+    className
   }) {
-    const classNames = useStyles(styles9);
+    const classNames = useStyles_default(Attachments_default);
     const localizeWithPlural = useLocalizer4({ plural: true });
-    return attachments.length ? /* @__PURE__ */ import_react20.default.createElement("div", { className: classNames["webchat-fluent__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_default = (0, import_react20.memo)(Attachments);
+  var Attachments_default2 = (0, import_react20.memo)(Attachments);
 
   // src/components/sendbox/ErrorMessage.tsx
   var import_react21 = __toESM(require_react());
-  var styles10 = {
-    "webchat-fluent___sendbox__error-message": {
-      fontSize: 0,
-      height: 0,
-      width: 0,
-      position: "absolute",
-      top: 0,
-      left: 0,
-      color: "transparent"
-    }
+
+  // src/components/sendbox/ErrorMessage.module.css
+  var ErrorMessage_default = {
+    "sendbox__error-message": "ErrorMessage_sendbox__error-message"
   };
+
+  // src/components/sendbox/ErrorMessage.tsx
   function ErrorMessage(props) {
-    const classNames = useStyles(styles10);
+    const classNames = useStyles_default(ErrorMessage_default);
     return (
       // eslint-disable-next-line react/forbid-dom-props
-      /* @__PURE__ */ import_react21.default.createElement("span", { className: classNames["webchat-fluent___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_default = (0, import_react21.memo)(ErrorMessage);
+  var ErrorMessage_default2 = (0, import_react21.memo)(ErrorMessage);
 
   // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
   var import_react23 = __toESM(require_react());
-  var import_botframework_webchat_api4 = __toESM(require_botframework_webchat_api());
+  var import_botframework_webchat_component7 = __toESM(require_botframework_webchat_component());
 
   // src/icons/TelephoneKeypad.tsx
   var import_react22 = __toESM(require_react());
@@ -3711,7 +2121,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       {
         "aria-hidden": "true",
         className: props.className,
-        fill: "currentColor",
         height: "1em",
         viewBox: "0 0 20 20",
         width: "1em",
@@ -3728,9 +2137,9 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
 
   // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-  var { useLocalizer: useLocalizer5 } = import_botframework_webchat_api4.hooks;
+  var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component7.hooks;
   var TelephoneKeypadToolbarButton = (0, import_react23.memo)(() => {
-    const [, setTelephoneKeypadShown] = useShown();
+    const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
     const localize = useLocalizer5();
     const handleClick = (0, import_react23.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
     return /* @__PURE__ */ import_react23.default.createElement(
@@ -3738,7 +2147,8 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       {
         "aria-label": localize("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),
         "data-testid": testIds_default.sendBoxTelephoneKeypadToolbarButton,
-        onClick: handleClick
+        onClick: handleClick,
+        selected: telephoneKeypadShown
       },
       /* @__PURE__ */ import_react23.default.createElement(TelephoneKeypadIcon, null)
     );
@@ -3747,61 +2157,22 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
 
   // src/components/sendbox/TextArea.tsx
-  var import_classnames5 = __toESM(require_classnames());
+  var import_classnames8 = __toESM(require_classnames());
   var import_react24 = __toESM(require_react());
-  var styles11 = {
-    "webchat-fluent__sendbox__text-area": {
-      display: "grid",
-      gridTemplateAreas: `'main'`,
-      maxHeight: "200px",
-      overflow: "hidden"
-    },
-    "webchat-fluent__sendbox__text-area--hidden": {
-      // TODO: Not perfect way of hiding the text box.
-      height: 0,
-      visibility: "collapse"
-    },
-    "webchat-fluent__sendbox__text-area-shared": {
-      border: "none",
-      font: "inherit",
-      gridArea: "main",
-      outline: "inherit",
-      overflowWrap: "anywhere",
-      resize: "inherit",
-      scrollbarGutter: "stable"
-    },
-    "webchat-fluent__sendbox__text-area-doppelganger": {
-      overflow: "hidden",
-      visibility: "hidden",
-      whiteSpace: "pre-wrap"
-    },
-    "webchat-fluent__sendbox__text-area-input": {
-      height: "100%",
-      padding: 0
-    },
-    "webchat-fluent__sendbox__text-area-input--scroll": {
-      /* Firefox */
-      MozScrollbarColor: "var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2)",
-      MozScrollbarWidth: "thin",
-      /* Chrome, Edge, and Safari */
-      "&::-webkit-scrollbar": {
-        width: "8px"
-      },
-      "&::-webkit-scrollbar-track": {
-        backgroundColor: "var(--webchat-colorNeutralBackground5)",
-        borderRadius: "16px"
-      },
-      "&::-webkit-scrollbar-thumb": {
-        backgroundColor: "var(--webchat-colorNeutralForeground2)",
-        borderRadius: "16px"
-      },
-      "&::-webkit-scrollbar-corner": {
-        backgroundColor: "var(--webchat-colorNeutralBackground5)"
-      }
-    }
+
+  // src/components/sendbox/TextArea.module.css
+  var TextArea_default = {
+    "sendbox__text-area": "TextArea_sendbox__text-area",
+    "sendbox__text-area--hidden": "TextArea_sendbox__text-area--hidden",
+    "sendbox__text-area-shared": "TextArea_sendbox__text-area-shared",
+    "sendbox__text-area-doppelganger": "TextArea_sendbox__text-area-doppelganger",
+    "sendbox__text-area-input": "TextArea_sendbox__text-area-input",
+    "sendbox__text-area-input--scroll": "TextArea_sendbox__text-area-input--scroll"
   };
+
+  // src/components/sendbox/TextArea.tsx
   var TextArea = (0, import_react24.forwardRef)((props, ref) => {
-    const classNames = useStyles(styles11);
+    const classNames = useStyles_default(TextArea_default);
     const handleKeyDown = (0, import_react24.useCallback)((event) => {
       if (!event.shiftKey && event.key === "Enter") {
         event.preventDefault();
@@ -3813,10 +2184,10 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     return /* @__PURE__ */ import_react24.default.createElement(
       "div",
       {
-        className: (0, import_classnames5.default)(
-          classNames["webchat-fluent__sendbox__text-area"],
+        className: (0, import_classnames8.default)(
+          classNames["sendbox__text-area"],
           {
-            [classNames["webchat-fluent__sendbox__text-area--hidden"]]: props.hidden
+            [classNames["sendbox__text-area--hidden"]]: props.hidden
           },
           props.className
         ),
@@ -3825,10 +2196,10 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       /* @__PURE__ */ import_react24.default.createElement(
         "div",
         {
-          className: (0, import_classnames5.default)(
-            classNames["webchat-fluent__sendbox__text-area-doppelganger"],
-            classNames["webchat-fluent__sendbox__text-area-shared"],
-            classNames["webchat-fluent__sendbox__text-area-input--scroll"]
+          className: (0, import_classnames8.default)(
+            classNames["sendbox__text-area-doppelganger"],
+            classNames["sendbox__text-area-shared"],
+            classNames["sendbox__text-area-input--scroll"]
           )
         },
         props.value || props.placeholder,
@@ -3838,10 +2209,10 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         "textarea",
         {
           "aria-label": props["aria-label"],
-          className: (0, import_classnames5.default)(
-            classNames["webchat-fluent__sendbox__text-area-input"],
-            classNames["webchat-fluent__sendbox__text-area-shared"],
-            classNames["webchat-fluent__sendbox__text-area-input--scroll"]
+          className: (0, import_classnames8.default)(
+            classNames["sendbox__text-area-input"],
+            classNames["sendbox__text-area-shared"],
+            classNames["sendbox__text-area-input--scroll"]
           ),
           "data-testid": props["data-testid"],
           onInput: props.onInput,
@@ -3856,12 +2227,12 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     );
   });
   TextArea.displayName = "TextArea";
-  var TextArea_default = TextArea;
+  var TextArea_default2 = TextArea;
 
   // src/components/sendbox/private/useSubmitError.ts
-  var import_botframework_webchat_component3 = __toESM(require_botframework_webchat_component());
+  var import_botframework_webchat_component8 = __toESM(require_botframework_webchat_component());
   var import_react25 = __toESM(require_react());
-  var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component3.hooks;
+  var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component8.hooks;
   var useSubmitError = ({
     attachments,
     message
@@ -3886,79 +2257,39 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
 
   // src/components/sendbox/private/useUniqueId.ts
   var import_react26 = __toESM(require_react());
-  function useUniqueId(prefix2) {
+  function useUniqueId(prefix) {
     const id = (0, import_react26.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
-    prefix2 = prefix2 ? `${prefix2}--` : "";
-    return `${prefix2}${id}`;
-  }
+    prefix = prefix ? `${prefix}--` : "";
+    return `${prefix}${id}`;
+  }
+
+  // src/components/sendbox/index.module.css
+  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",
+    "sendbox__text-counter--error": "sendbox_sendbox__text-counter--error"
+  };
 
   // src/components/sendbox/index.tsx
-  var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component4.hooks;
-  var styles12 = {
-    "webchat-fluent__sendbox": {
-      color: "var(--webchat-colorNeutralForeground1)",
-      fontFamily: "var(--webchat-fontFamilyBase)",
-      padding: "0 10px 10px",
-      textRendering: "optimizeLegibility"
-    },
-    "webchat-fluent__sendbox__sendbox": {
-      backgroundColor: "var(--webchat-colorNeutralBackground1)",
-      border: "1px solid var(--webchat-colorNeutralStroke1)",
-      borderRadius: "var(--webchat-borderRadiusLarge)",
-      display: "grid",
-      fontFamily: "var(--webchat-fontFamilyBase)",
-      fontSize: "14px",
-      gap: "6px",
-      lineHeight: "20px",
-      padding: "8px",
-      position: "relative",
-      "&:focus-within": {
-        borderColor: "var(--webchat-colorNeutralStroke1Selected)",
-        // TODO clarify with design the color:
-        // - Teams is using colorCompoundBrandForeground1
-        // - Fluent is using colorCompoundBrandStroke
-        // - we are using colorCompoundBrandForeground1Hover
-        boxShadow: "inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)"
-      }
-    },
-    "webchat-fluent__sendbox__sendbox-text": {
-      backgroundColor: "transparent",
-      border: "none",
-      flex: "auto",
-      fontFamily: "var(--webchat-fontFamilyBase)",
-      fontSize: "14px",
-      lineHeight: "20px",
-      outline: "none",
-      padding: "4px 4px 0",
-      resize: "none"
-    },
-    "webchat-fluent__sendbox__sendbox-controls": {
-      alignItems: "center",
-      display: "flex",
-      paddingInlineStart: "4px"
-    },
-    "webchat-fluent__sendbox__text-counter": {
-      color: "var(--webchat-colorNeutralForeground4)",
-      cursor: "default",
-      fontFamily: "var(--webchat-fontFamilyNumeric)",
-      fontSize: "10px",
-      lineHeight: "14px"
-    },
-    "webchat-fluent__sendbox__text-counter--error": {
-      color: "var(--webchat-colorStatusDangerForeground1)"
-    }
-  };
+  var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component9.hooks;
   function SendBox(props) {
     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;
-    const classNames = useStyles(styles12);
+    const classNames = useStyles_default(sendbox_default);
     const localize = useLocalizer7();
     const sendMessage = useSendMessage();
     const makeThumbnail = useMakeThumbnail();
-    const errorMessageId = useUniqueId("webchat-fluent__sendbox__error-message-id");
+    const errorMessageId = useUniqueId("sendbox__error-message-id");
     const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
     const [telephoneKeypadShown] = useShown();
     const attachmentsRef = useRefFrom(attachments);
@@ -4018,18 +2349,11 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         "aria-errormessage": errorMessageId
       }
     };
-    return /* @__PURE__ */ import_react27.default.createElement("form", { ...aria, className: (0, import_classnames6.default)(classNames["webchat-fluent__sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react27.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react27.default.createElement("div", { className: (0, import_classnames6.default)(classNames["webchat-fluent__sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react27.default.createElement(
-      Surrogate_default,
-      {
-        autoFocus: true,
-        isHorizontal: false,
-        onButtonClick: handleTelephoneKeypadButtonClick
-      }
-    ), /* @__PURE__ */ import_react27.default.createElement(
-      TextArea_default,
+    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["webchat-fluent__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,
@@ -4037,38 +2361,47 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         ref: inputRef,
         value: message
       }
-    ), /* @__PURE__ */ import_react27.default.createElement(Attachments_default, { attachments }), /* @__PURE__ */ import_react27.default.createElement("div", { className: (0, import_classnames6.default)(classNames["webchat-fluent__sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ import_react27.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_classnames6.default)(classNames["webchat-fluent__sendbox__text-counter"], {
-          [classNames["webchat-fluent__sendbox__text-counter--error"]]: isMessageLengthExceeded
+        className: (0, import_classnames9.default)(classNames["sendbox__text-counter"], {
+          [classNames["sendbox__text-counter--error"]]: isMessageLengthExceeded
         })
       },
       `${message.length}/${maxMessageLength}`
-    ), /* @__PURE__ */ import_react27.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react27.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react27.default.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react27.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_react27.default.createElement(SendIcon, null)
-    ))), /* @__PURE__ */ import_react27.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ErrorMessage_default, { error: errorMessage, id: errorMessageId })));
+    ))), /* @__PURE__ */ import_react27.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
   }
-  var sendbox_default = (0, import_react27.memo)(SendBox);
+  var sendbox_default2 = (0, import_react27.memo)(SendBox);
 
   // src/components/SendBox.tsx
-  var SendBox_default = sendbox_default;
+  var SendBox_default = sendbox_default2;
 
   // src/private/FluentThemeProvider.tsx
-  var { ThemeProvider } = import_botframework_webchat_component5.Components;
+  var { ThemeProvider } = import_botframework_webchat_component10.Components;
   var sendBoxMiddleware = [() => () => () => SendBox_default];
   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.e3f5401");
+  injectMeta("botframework-webchat-fluent-theme:version", "4.17.0-main.20240419.2240f2a");
+  injectStyles();
 
   // src/bundle.ts
   globalThis.WebChat = {