botframework-webchat-fluent-theme 4.17.0-main.20240425.edca85d → 4.17.0-main.20240501.533c151

package/dist/index.mjs

@@ -1,1115 +0,0 @@
-// src/index.ts
-import { injectMetaTag } from "inject-meta-tag";
-
-// src/private/FluentThemeProvider.tsx
-import { Components as Components2 } from "botframework-webchat-component";
-import React22, { memo as memo16 } from "react";
-
-// src/components/telephoneKeypad/Provider.tsx
-import React, { memo, useMemo, useState } from "react";
-
-// src/components/telephoneKeypad/private/Context.ts
-import { createContext } from "react";
-var Context = createContext(
-  new Proxy({}, {
-    get() {
-      throw new Error("botframework-webchat: This hook can only used under its corresponding <Provider>.");
-    }
-  })
-);
-Context.displayName = "TelephoneKeypad.Context";
-var Context_default = Context;
-
-// src/components/telephoneKeypad/Provider.tsx
-var Provider = memo(({ children }) => {
-  const [shown, setShown] = useState(false);
-  const context = useMemo(
-    () => Object.freeze({
-      setShown,
-      shown
-    }),
-    [setShown, shown]
-  );
-  return /* @__PURE__ */ React.createElement(Context_default.Provider, { value: context }, children);
-});
-var Provider_default = Provider;
-
-// src/components/telephoneKeypad/Surrogate.tsx
-import React5, { memo as memo5 } from "react";
-
-// src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-import React4, { memo as memo4, useCallback as useCallback2, useEffect, useRef } from "react";
-import cx from "classnames";
-import { useRefFrom as useRefFrom2 } from "use-ref-from";
-import { Components } from "botframework-webchat-component";
-
-// src/components/telephoneKeypad/private/Button.tsx
-import React2, { forwardRef, memo as memo2, useCallback } from "react";
-import { useRefFrom } from "use-ref-from";
-
-// 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  --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);\n  --webchat-durationUltraFast: var(--durationUltraFast, 0);\n  --webchat-durationNormal: var(--durationNormal, 200ms);\n  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));\n  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));\n}\n@media (prefers-reduced-motion) {\n  .webchat-fluent.Theme_theme {\n    --webchat-durationUltraFast: 0.01ms;\n    --webchat-durationNormal: 0.01ms;\n  }\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  --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);\n}\n.webchat-fluent .sendbox_sendbox__sendbox {\n  background-color: var(--webchat-colorNeutralBackground1);\n  border-radius: var(--webchat-sendbox-border-radius);\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}\n.webchat-fluent .sendbox_sendbox__sendbox::after {\n  border-bottom-left-radius: var(--webchat-sendbox-border-radius);\n  border-bottom-right-radius: var(--webchat-sendbox-border-radius);\n  border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);\n  bottom: -1px;\n  clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);\n  content: \"\";\n  height: var(--webchat-sendbox-border-radius);\n  left: -1px;\n  position: absolute;\n  right: -1px;\n  transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);\n}\n.webchat-fluent .sendbox_sendbox__sendbox:focus-within::after {\n  clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);\n  transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);\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);
-  }
-}
-
-// src/styles/useStyles.ts
-import { useMemo as useMemo2 } from "react";
-function useStyles(styles) {
-  return useMemo2(
-    () => Object.freeze(
-      Object.fromEntries(
-        Object.entries(styles).map(([baseClassName, resultClassName]) => [
-          baseClassName,
-          `${baseClassName} ${resultClassName}`
-        ])
-      )
-    ),
-    [styles]
-  );
-}
-var useStyles_default = useStyles;
-
-// src/components/telephoneKeypad/private/Button.tsx
-var Button = memo2(
-  // As we are all TypeScript, internal components do not need propTypes.
-  // eslint-disable-next-line react/prop-types
-  forwardRef(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
-    const classNames = useStyles_default(Button_default);
-    const onClickRef = useRefFrom(onClick);
-    const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
-    return /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        className: classNames["telephone-keypad__button"],
-        "data-testid": dataTestId,
-        onClick: handleClick,
-        ref,
-        type: "button"
-      },
-      /* @__PURE__ */ React2.createElement("span", { className: classNames["telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
-      !!ruby && /* @__PURE__ */ React2.createElement("ruby", { className: classNames["telephone-keypad__button__ruby"] }, ruby)
-    );
-  })
-);
-Button.displayName = "TelephoneKeypad.Button";
-var Button_default2 = 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
-import { useContext, useMemo as useMemo3 } from "react";
-function useShown() {
-  const { setShown, shown } = useContext(Context_default);
-  return useMemo3(() => Object.freeze([shown, setShown]), [shown, setShown]);
-}
-
-// src/components/telephoneKeypad/private/TelephoneKeypad.module.css
-var TelephoneKeypad_default = {
-  "telephone-keypad": "TelephoneKeypad_telephone-keypad",
-  "telephone-keypad__box": "TelephoneKeypad_telephone-keypad__box",
-  "telephone-keypad__info-message": "TelephoneKeypad_telephone-keypad__info-message",
-  "telephone-keypad__info-message-link": "TelephoneKeypad_telephone-keypad__info-message-link"
-};
-
-// src/icons/InfoSmallIcon.tsx
-import React3, { memo as memo3 } from "react";
-var InfoSmallIcon_default = memo3((props) => /* @__PURE__ */ React3.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__ */ React3.createElement(
-    "path",
-    {
-      d: "M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z",
-      fill: "currentColor"
-    }
-  )
-));
-
-// src/components/telephoneKeypad/private/TelephoneKeypad.tsx
-var { LocalizedString } = Components;
-var Orientation = memo4(
-  ({ children, isHorizontal }) => {
-    const classNames = useStyles_default(TelephoneKeypad_default);
-    return isHorizontal ? (
-      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
-      false
-    ) : /* @__PURE__ */ React4.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
-  }
-);
-Orientation.displayName = "TelephoneKeypad:Orientation";
-var TelephoneKeypad = memo4(({ autoFocus, className, onButtonClick, isHorizontal }) => {
-  const autoFocusRef = useRefFrom2(autoFocus);
-  const classNames = useStyles_default(TelephoneKeypad_default);
-  const firstButtonRef = useRef(null);
-  const onButtonClickRef = useRefFrom2(onButtonClick);
-  const [, setShown] = useShown();
-  const handleButton1Click = useCallback2(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
-  const handleButton2Click = useCallback2(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
-  const handleButton3Click = useCallback2(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
-  const handleButton4Click = useCallback2(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
-  const handleButton5Click = useCallback2(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
-  const handleButton6Click = useCallback2(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
-  const handleButton7Click = useCallback2(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
-  const handleButton8Click = useCallback2(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
-  const handleButton9Click = useCallback2(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
-  const handleButton0Click = useCallback2(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
-  const handleButtonStarClick = useCallback2(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
-  const handleButtonPoundClick = useCallback2(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
-  const handleKeyDown = useCallback2(
-    (event) => {
-      if (event.key === "Escape") {
-        setShown(false);
-      }
-    },
-    [setShown]
-  );
-  useEffect(() => {
-    autoFocusRef.current && firstButtonRef.current?.focus();
-  }, [autoFocusRef, firstButtonRef]);
-  return /* @__PURE__ */ React4.createElement("div", { className: cx(classNames["telephone-keypad"], className), onKeyDown: handleKeyDown }, /* @__PURE__ */ React4.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "1",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton1,
-      onClick: handleButton1Click,
-      ref: firstButtonRef
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "2",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton2,
-      onClick: handleButton2Click,
-      ruby: "ABC"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "3",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton3,
-      onClick: handleButton3Click,
-      ruby: "DEF"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "4",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton4,
-      onClick: handleButton4Click,
-      ruby: "GHI"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "5",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton5,
-      onClick: handleButton5Click,
-      ruby: "JKL"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "6",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton6,
-      onClick: handleButton6Click,
-      ruby: "MNO"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "7",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton7,
-      onClick: handleButton7Click,
-      ruby: "PQRS"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "8",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton8,
-      onClick: handleButton8Click,
-      ruby: "TUV"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "9",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButton9,
-      onClick: handleButton9Click,
-      ruby: "WXYZ"
-    }
-  ), /* @__PURE__ */ React4.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ React4.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ React4.createElement(
-    Button_default2,
-    {
-      button: "pound",
-      "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
-      onClick: handleButtonPoundClick
-    }
-  )), /* @__PURE__ */ React4.createElement("div", { className: classNames["telephone-keypad__info-message"] }, /* @__PURE__ */ React4.createElement(InfoSmallIcon_default, null), /* @__PURE__ */ React4.createElement(
-    LocalizedString,
-    {
-      linkClassName: classNames["telephone-keypad__info-message-link"],
-      stringIds: "TELEPHONE_KEYPAD_INPUT_MESSAGE"
-    }
-  )));
-});
-TelephoneKeypad.displayName = "TelephoneKeypad";
-var TelephoneKeypad_default2 = TelephoneKeypad;
-
-// src/components/telephoneKeypad/Surrogate.tsx
-var TelephoneKeypadSurrogate = memo5((props) => useShown()[0] ? /* @__PURE__ */ React5.createElement(TelephoneKeypad_default2, { ...props }) : false);
-TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
-var Surrogate_default = TelephoneKeypadSurrogate;
-
-// src/components/Theme.tsx
-import React6 from "react";
-import cx2 from "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_default(Theme_default);
-  return /* @__PURE__ */ React6.createElement("div", { className: cx2(rootClassName, classNames["theme"]) }, props.children);
-}
-
-// src/components/sendbox/index.tsx
-import { hooks as hooks8 } from "botframework-webchat-component";
-import cx9 from "classnames";
-import React21, { memo as memo15, useCallback as useCallback8, useRef as useRef6, useState as useState3 } from "react";
-import { useRefFrom as useRefFrom6 } from "use-ref-from";
-
-// src/icons/SendIcon.tsx
-import React7 from "react";
-function SendIcon(props) {
-  return /* @__PURE__ */ React7.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: props.className,
-      height: "1em",
-      viewBox: "0 0 20 20",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React7.createElement(
-      "path",
-      {
-        d: "M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z",
-        fill: "currentColor"
-      }
-    )
-  );
-}
-
-// src/components/dropZone/index.tsx
-import { hooks } from "botframework-webchat-component";
-import cx3 from "classnames";
-import React9, { memo as memo6, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import { useRefFrom as useRefFrom3 } from "use-ref-from";
-
-// src/icons/AddDocumentIcon.tsx
-import React8 from "react";
-function AddDocumentIcon(props) {
-  return /* @__PURE__ */ React8.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: props.className,
-      height: "1em",
-      viewBox: "0 0 20 20",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React8.createElement(
-      "path",
-      {
-        d: "M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z",
-        fill: "currentColor"
-      }
-    )
-  );
-}
-
-// src/components/dropZone/index.module.css
-var dropZone_default = {
-  "sendbox__attachment-drop-zone": "dropZone_sendbox__attachment-drop-zone",
-  "sendbox__attachment-drop-zone--droppable": "dropZone_sendbox__attachment-drop-zone--droppable",
-  "sendbox__attachment-drop-zone-icon": "dropZone_sendbox__attachment-drop-zone-icon"
-};
-
-// src/components/dropZone/index.tsx
-var { useLocalizer } = hooks;
-var handleDragOver = (event) => {
-  event.preventDefault();
-};
-var isFilesTransferEvent = (event) => !!event.dataTransfer?.types?.some((type) => type.toLowerCase() === "files");
-function isDescendantOf(target, ancestor) {
-  let current = target.parentNode;
-  while (current) {
-    if (current === ancestor) {
-      return true;
-    }
-    current = current.parentNode;
-  }
-  return false;
-}
-var DropZone = (props) => {
-  const [dropZoneState, setDropZoneState] = useState2(false);
-  const classNames = useStyles_default(dropZone_default);
-  const dropZoneRef = useRef2(null);
-  const localize = useLocalizer();
-  const onFilesAddedRef = useRefFrom3(props.onFilesAdded);
-  useEffect2(() => {
-    let entranceCounter = 0;
-    const handleDragEnter = (event) => {
-      entranceCounter++;
-      if (isFilesTransferEvent(event)) {
-        setDropZoneState(
-          dropZoneRef.current && (event.target === dropZoneRef.current || event.target instanceof HTMLElement && isDescendantOf(event.target, dropZoneRef.current)) ? "droppable" : "visible"
-        );
-      }
-    };
-    const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
-    document.addEventListener("dragenter", handleDragEnter, false);
-    document.addEventListener("dragleave", handleDragLeave, false);
-    return () => {
-      document.removeEventListener("dragenter", handleDragEnter);
-      document.removeEventListener("dragleave", handleDragLeave);
-    };
-  }, [setDropZoneState]);
-  const handleDrop = useCallback3(
-    (event) => {
-      event.preventDefault();
-      setDropZoneState(false);
-      if (!isFilesTransferEvent(event.nativeEvent)) {
-        return;
-      }
-      onFilesAddedRef.current([...event.dataTransfer.files]);
-    },
-    [onFilesAddedRef, setDropZoneState]
-  );
-  return dropZoneState ? /* @__PURE__ */ React9.createElement(
-    "div",
-    {
-      className: cx3(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__ */ React9.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
-    localize("TEXT_INPUT_DROP_ZONE")
-  ) : null;
-};
-DropZone.displayName = "DropZone";
-var dropZone_default2 = memo6(DropZone);
-
-// src/components/DropZone.tsx
-var DropZone_default = dropZone_default2;
-
-// src/components/suggestedActions/index.tsx
-import { hooks as hooks3 } from "botframework-webchat-component";
-import cx5 from "classnames";
-import React12, { memo as memo9 } from "react";
-
-// src/components/suggestedActions/SuggestedAction.tsx
-import { hooks as hooks2 } from "botframework-webchat-component";
-import cx4 from "classnames";
-import React11, { memo as memo8, useCallback as useCallback4, useRef as useRef4 } from "react";
-
-// src/components/suggestedActions/SuggestedAction.module.css
-var SuggestedAction_default = {
-  "suggested-action": "SuggestedAction_suggested-action",
-  "suggested-action__image": "SuggestedAction_suggested-action__image"
-};
-
-// src/components/suggestedActions/AccessibleButton.tsx
-import React10, { forwardRef as forwardRef2, memo as memo7, useRef as useRef3 } from "react";
-var preventDefaultHandler = (event) => event.preventDefault();
-var AccessibleButton = forwardRef2(
-  ({ "aria-hidden": ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
-    const targetRef = useRef3(null);
-    const ref = forwardedRef || targetRef;
-    return /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        "aria-disabled": disabled ? "true" : "false",
-        "aria-hidden": ariaHidden,
-        onClick: disabled ? preventDefaultHandler : onClick,
-        ref,
-        tabIndex,
-        ...disabled && {
-          "aria-disabled": "true",
-          tabIndex: -1
-        },
-        ...props,
-        type: "button"
-      },
-      children
-    );
-  }
-);
-var AccessibleButton_default = memo7(AccessibleButton);
-
-// src/components/suggestedActions/SuggestedAction.tsx
-var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks2;
-function SuggestedAction({
-  buttonText,
-  className,
-  displayText,
-  image,
-  imageAlt,
-  text,
-  type,
-  value
-}) {
-  const [_, setSuggestedActions] = useSuggestedActions();
-  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
-  const [disabled] = useDisabled();
-  const focus = useFocus();
-  const focusRef = useRef4(null);
-  const performCardAction = usePerformCardAction();
-  const classNames = useStyles_default(SuggestedAction_default);
-  const scrollToEnd = useScrollToEnd();
-  const handleClick = useCallback4(
-    ({ target }) => {
-      (async function() {
-        await focus("sendBoxWithoutKeyboard");
-        performCardAction({ displayText, text, type, value }, { target });
-        type === "openUrl" && setSuggestedActions([]);
-        scrollToEnd();
-      })();
-    },
-    [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
-  );
-  return /* @__PURE__ */ React11.createElement(
-    AccessibleButton_default,
-    {
-      className: cx4(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
-      disabled,
-      onClick: handleClick,
-      ref: focusRef,
-      type: "button"
-    },
-    image && /* @__PURE__ */ React11.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
-    /* @__PURE__ */ React11.createElement("span", null, buttonText)
-  );
-}
-var SuggestedAction_default2 = memo8(SuggestedAction);
-
-// src/components/suggestedActions/private/computeSuggestedActionText.ts
-function computeSuggestedActionText(cardAction) {
-  const { title } = cardAction;
-  const { type, value } = cardAction;
-  if (type === "messageBack") {
-    return title || cardAction.displayText;
-  } else if (title) {
-    return title;
-  } else if (typeof value === "string") {
-    return value;
-  }
-  return JSON.stringify(value);
-}
-
-// src/components/suggestedActions/index.module.css
-var suggestedActions_default = {
-  "suggested-actions": "suggestedActions_suggested-actions",
-  "suggested-actions--flow": "suggestedActions_suggested-actions--flow",
-  "suggested-actions--stacked": "suggestedActions_suggested-actions--stacked"
-};
-
-// src/components/suggestedActions/index.tsx
-var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = hooks3;
-function SuggestedActionStackedOrFlowContainer(props) {
-  const [{ suggestedActionLayout }] = useStyleOptions();
-  const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
-  const classNames = useStyles_default(suggestedActions_default);
-  return /* @__PURE__ */ React12.createElement(
-    "div",
-    {
-      "aria-label": props["aria-label"],
-      "aria-live": "polite",
-      "aria-orientation": "vertical",
-      className: cx5(
-        classNames["suggested-actions"],
-        suggestedActionsStyleSet + "",
-        {
-          [classNames["suggested-actions--flow"]]: suggestedActionLayout === "flow",
-          [classNames["suggested-actions--stacked"]]: suggestedActionLayout !== "flow"
-        },
-        props.className
-      ),
-      role: "toolbar"
-    },
-    !!props.children && !!React12.Children.count(props.children) && props.children
-  );
-}
-function SuggestedActions() {
-  const classNames = useStyles_default(suggestedActions_default);
-  const localize = useLocalizer2();
-  const [suggestedActions] = useSuggestedActions2();
-  const children = suggestedActions.map((cardAction, index) => {
-    const { displayText, image, imageAltText, text, type, value } = cardAction;
-    if (!suggestedActions?.length) {
-      return null;
-    }
-    return /* @__PURE__ */ React12.createElement(
-      SuggestedAction_default2,
-      {
-        buttonText: computeSuggestedActionText(cardAction),
-        displayText,
-        image,
-        imageAlt: image && (imageAltText || text),
-        itemIndex: index,
-        key: index,
-        text,
-        type,
-        value
-      }
-    );
-  });
-  return /* @__PURE__ */ React12.createElement(
-    SuggestedActionStackedOrFlowContainer,
-    {
-      "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
-      className: classNames["suggested-actions"]
-    },
-    children
-  );
-}
-var suggestedActions_default2 = memo9(SuggestedActions);
-
-// src/components/SuggestedActions.tsx
-var SuggestedActions_default = suggestedActions_default2;
-
-// src/components/sendbox/AddAttachmentButton.tsx
-import { hooks as hooks4 } from "botframework-webchat-component";
-import React15, { useCallback as useCallback5, useRef as useRef5, memo as memo11 } from "react";
-import { useRefFrom as useRefFrom4 } from "use-ref-from";
-
-// src/icons/AttachmentIcon.tsx
-import React13 from "react";
-function AttachmentIcon(props) {
-  return /* @__PURE__ */ React13.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: props.className,
-      height: "1em",
-      viewBox: "0 0 20 20",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React13.createElement(
-      "path",
-      {
-        d: "m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z",
-        fill: "currentColor"
-      }
-    )
-  );
-}
-
-// src/components/sendbox/Toolbar.tsx
-import cx6 from "classnames";
-import React14, { memo as memo10 } from "react";
-
-// src/components/sendbox/Toolbar.module.css
-var Toolbar_default = {
-  sendbox__toolbar: "Toolbar_sendbox__toolbar",
-  "sendbox__toolbar-button": "Toolbar_sendbox__toolbar-button",
-  "sendbox__toolbar-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 = memo10(
-  (props) => {
-    const classNames = useStyles_default(Toolbar_default);
-    return /* @__PURE__ */ React14.createElement(
-      "button",
-      {
-        "aria-label": props["aria-label"],
-        className: cx6(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",
-        ...props.disabled && {
-          "aria-disabled": "true",
-          tabIndex: -1
-        }
-      },
-      props.children
-    );
-  }
-);
-ToolbarButton.displayName = "ToolbarButton";
-var Toolbar = memo10((props) => {
-  const classNames = useStyles_default(Toolbar_default);
-  return /* @__PURE__ */ React14.createElement("div", { className: cx6(classNames["sendbox__toolbar"], props.className) }, props.children);
-});
-Toolbar.displayName = "Toolbar";
-var ToolbarSeparator = memo10(
-  (props) => {
-    const classNames = useStyles_default(Toolbar_default);
-    return /* @__PURE__ */ React14.createElement(
-      "div",
-      {
-        "aria-orientation": "vertical",
-        className: cx6(classNames["sendbox__toolbar-separator"], props.className),
-        role: "separator"
-      }
-    );
-  }
-);
-ToolbarSeparator.displayName = "ToolbarSeparator";
-
-// src/components/sendbox/AddAttachmentButton.module.css
-var AddAttachmentButton_default = {
-  "sendbox__add-attachment": "AddAttachmentButton_sendbox__add-attachment",
-  "sendbox__add-attachment-input": "AddAttachmentButton_sendbox__add-attachment-input"
-};
-
-// src/components/sendbox/AddAttachmentButton.tsx
-var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = hooks4;
-function AddAttachmentButton(props) {
-  const inputRef = useRef5(null);
-  const classNames = useStyles_default(AddAttachmentButton_default);
-  const localize = useLocalizer3();
-  const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
-  const onFilesAddedRef = useRefFrom4(props.onFilesAdded);
-  const handleClick = useCallback5(() => inputRef.current?.click(), [inputRef]);
-  const handleFileChange = useCallback5(
-    ({ target: { files } }) => {
-      if (files) {
-        onFilesAddedRef.current?.([...files]);
-        if (inputRef.current) {
-          inputRef.current.value = "";
-        }
-      }
-    },
-    [inputRef, onFilesAddedRef]
-  );
-  return /* @__PURE__ */ React15.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ React15.createElement(
-    "input",
-    {
-      accept: uploadAccept,
-      "aria-disabled": props.disabled,
-      "aria-hidden": "true",
-      className: classNames["sendbox__add-attachment-input"],
-      multiple: uploadMultiple,
-      onInput: props.disabled ? void 0 : handleFileChange,
-      readOnly: props.disabled,
-      ref: inputRef,
-      role: "button",
-      tabIndex: -1,
-      type: "file"
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    ToolbarButton,
-    {
-      "aria-label": localize("TEXT_INPUT_UPLOAD_BUTTON_ALT"),
-      "data-testid": testIds_default.sendBoxUploadButton,
-      onClick: handleClick
-    },
-    /* @__PURE__ */ React15.createElement(AttachmentIcon, null)
-  ));
-}
-var AddAttachmentButton_default2 = memo11(AddAttachmentButton);
-
-// src/components/sendbox/Attachments.tsx
-import { hooks as hooks5 } from "botframework-webchat-component";
-import React16, { memo as memo12 } from "react";
-import cx7 from "classnames";
-
-// src/components/sendbox/Attachments.module.css
-var Attachments_default = {
-  sendbox__attachment: "Attachments_sendbox__attachment"
-};
-
-// src/components/sendbox/Attachments.tsx
-var { useLocalizer: useLocalizer4 } = hooks5;
-var attachmentsPluralStringIds = {
-  one: "TEXT_INPUT_ATTACHMENTS_ONE",
-  two: "TEXT_INPUT_ATTACHMENTS_TWO",
-  few: "TEXT_INPUT_ATTACHMENTS_FEW",
-  many: "TEXT_INPUT_ATTACHMENTS_MANY",
-  other: "TEXT_INPUT_ATTACHMENTS_OTHER"
-};
-function Attachments({
-  attachments,
-  className
-}) {
-  const classNames = useStyles_default(Attachments_default);
-  const localizeWithPlural = useLocalizer4({ plural: true });
-  return attachments.length ? /* @__PURE__ */ React16.createElement("div", { className: cx7(classNames["sendbox__attachment"], className) }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
-}
-var Attachments_default2 = memo12(Attachments);
-
-// src/components/sendbox/ErrorMessage.tsx
-import React17, { memo as memo13 } from "react";
-
-// 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_default(ErrorMessage_default);
-  return (
-    // eslint-disable-next-line react/forbid-dom-props
-    /* @__PURE__ */ React17.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
-  );
-}
-var ErrorMessage_default2 = memo13(ErrorMessage);
-
-// src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-import React19, { memo as memo14, useCallback as useCallback6 } from "react";
-import { hooks as hooks6 } from "botframework-webchat-component";
-
-// src/icons/TelephoneKeypad.tsx
-import React18 from "react";
-function TelephoneKeypadIcon(props) {
-  return /* @__PURE__ */ React18.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: props.className,
-      height: "1em",
-      viewBox: "0 0 20 20",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React18.createElement(
-      "path",
-      {
-        d: "M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z",
-        fill: "currentColor"
-      }
-    )
-  );
-}
-
-// src/components/sendbox/TelephoneKeypadToolbarButton.tsx
-var { useLocalizer: useLocalizer5 } = hooks6;
-var TelephoneKeypadToolbarButton = memo14(() => {
-  const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
-  const localize = useLocalizer5();
-  const handleClick = useCallback6(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
-  return /* @__PURE__ */ React19.createElement(
-    ToolbarButton,
-    {
-      "aria-label": localize("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),
-      "data-testid": testIds_default.sendBoxTelephoneKeypadToolbarButton,
-      onClick: handleClick,
-      selected: telephoneKeypadShown
-    },
-    /* @__PURE__ */ React19.createElement(TelephoneKeypadIcon, null)
-  );
-});
-TelephoneKeypadToolbarButton.displayName = "SendBox.TelephoneKeypadToolbarButton";
-var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
-
-// src/components/sendbox/TextArea.tsx
-import cx8 from "classnames";
-import React20, { forwardRef as forwardRef3, useCallback as useCallback7 } from "react";
-
-// src/components/sendbox/TextArea.module.css
-var TextArea_default = {
-  "sendbox__text-area": "TextArea_sendbox__text-area",
-  "sendbox__text-area--hidden": "TextArea_sendbox__text-area--hidden",
-  "sendbox__text-area-shared": "TextArea_sendbox__text-area-shared",
-  "sendbox__text-area-doppelganger": "TextArea_sendbox__text-area-doppelganger",
-  "sendbox__text-area-input": "TextArea_sendbox__text-area-input",
-  "sendbox__text-area-input--scroll": "TextArea_sendbox__text-area-input--scroll"
-};
-
-// src/components/sendbox/TextArea.tsx
-var TextArea = forwardRef3((props, ref) => {
-  const classNames = useStyles_default(TextArea_default);
-  const handleKeyDown = useCallback7((event) => {
-    if (!event.shiftKey && event.key === "Enter") {
-      event.preventDefault();
-      if ("form" in event.target && event.target.form instanceof HTMLFormElement) {
-        event.target?.form?.requestSubmit();
-      }
-    }
-  }, []);
-  return /* @__PURE__ */ React20.createElement(
-    "div",
-    {
-      className: cx8(
-        classNames["sendbox__text-area"],
-        {
-          [classNames["sendbox__text-area--hidden"]]: props.hidden
-        },
-        props.className
-      ),
-      role: props.hidden ? "hidden" : void 0
-    },
-    /* @__PURE__ */ React20.createElement(
-      "div",
-      {
-        className: cx8(
-          classNames["sendbox__text-area-doppelganger"],
-          classNames["sendbox__text-area-shared"],
-          classNames["sendbox__text-area-input--scroll"]
-        )
-      },
-      props.value || props.placeholder,
-      " "
-    ),
-    /* @__PURE__ */ React20.createElement(
-      "textarea",
-      {
-        "aria-label": props["aria-label"],
-        className: cx8(
-          classNames["sendbox__text-area-input"],
-          classNames["sendbox__text-area-shared"],
-          classNames["sendbox__text-area-input--scroll"]
-        ),
-        "data-testid": props["data-testid"],
-        onInput: props.onInput,
-        onKeyDown: handleKeyDown,
-        placeholder: props.placeholder,
-        ref,
-        rows: props.startRows ?? 1,
-        tabIndex: props.hidden ? -1 : void 0,
-        value: props.value
-      }
-    )
-  );
-});
-TextArea.displayName = "TextArea";
-var TextArea_default2 = TextArea;
-
-// src/components/sendbox/private/useSubmitError.ts
-import { hooks as hooks7 } from "botframework-webchat-component";
-import { useMemo as useMemo4 } from "react";
-import { useRefFrom as useRefFrom5 } from "use-ref-from";
-var { useConnectivityStatus, useLocalizer: useLocalizer6 } = hooks7;
-var useSubmitError = ({
-  attachments,
-  message
-}) => {
-  const [connectivityStatus] = useConnectivityStatus();
-  const localize = useLocalizer6();
-  const submitErrorRef = useRefFrom5(
-    connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
-  );
-  const errorMessageStringMap = useMemo4(
-    () => Object.freeze(
-      (/* @__PURE__ */ new Map()).set("empty", localize("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline", localize("CONNECTIVITY_STATUS_ALT_FATAL"))
-    ),
-    [localize]
-  );
-  return useMemo4(
-    () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
-    [errorMessageStringMap, submitErrorRef]
-  );
-};
-var useSubmitError_default = useSubmitError;
-
-// src/components/sendbox/private/useUniqueId.ts
-import { useMemo as useMemo5 } from "react";
-function useUniqueId(prefix) {
-  const id = useMemo5(() => Math.random().toString(36).substr(2, 5), []);
-  prefix = prefix ? `${prefix}--` : "";
-  return `${prefix}${id}`;
-}
-
-// src/components/sendbox/index.module.css
-var sendbox_default = {
-  sendbox: "sendbox_sendbox",
-  sendbox__sendbox: "sendbox_sendbox__sendbox",
-  "sendbox__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 } = hooks8;
-function SendBox(props) {
-  const inputRef = useRef6(null);
-  const [message, setMessage] = useState3("");
-  const [attachments, setAttachments] = useSendBoxAttachments();
-  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
-  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
-  const classNames = useStyles_default(sendbox_default);
-  const localize = useLocalizer7();
-  const sendMessage = useSendMessage();
-  const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId("sendbox__error-message-id");
-  const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
-  const [telephoneKeypadShown] = useShown();
-  const attachmentsRef = useRefFrom6(attachments);
-  const messageRef = useRefFrom6(message);
-  const handleSendBoxClick = useCallback8(
-    (event) => {
-      if ("tabIndex" in event.target && typeof event.target.tabIndex === "number" && event.target.tabIndex >= 0) {
-        return;
-      }
-      inputRef.current?.focus();
-    },
-    [inputRef]
-  );
-  const handleMessageChange = useCallback8(
-    (event) => setMessage(event.currentTarget.value),
-    [setMessage]
-  );
-  const handleAddFiles = useCallback8(
-    async (inputFiles) => {
-      const newAttachments = Object.freeze(
-        await Promise.all(
-          inputFiles.map(
-            (file) => makeThumbnail(file).then(
-              (thumbnailURL) => Object.freeze({
-                blob: file,
-                ...thumbnailURL && { thumbnailURL }
-              })
-            )
-          )
-        )
-      );
-      setAttachments(newAttachments);
-    },
-    [makeThumbnail, setAttachments]
-  );
-  const handleFormSubmit = useCallback8(
-    (event) => {
-      event.preventDefault();
-      if (errorRef.current !== "empty" && !isMessageLengthExceeded) {
-        sendMessage(messageRef.current, void 0, { attachments: attachmentsRef.current });
-        setMessage("");
-        setAttachments([]);
-      }
-      inputRef.current?.focus();
-    },
-    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
-  );
-  const handleTelephoneKeypadButtonClick = useCallback8(
-    // TODO: We need more official way of sending DTMF.
-    (dtmf) => sendMessage(`/DTMF ${dtmf}`),
-    [sendMessage]
-  );
-  const aria = {
-    "aria-invalid": "false",
-    ...errorMessage && {
-      "aria-invalid": "true",
-      "aria-errormessage": errorMessageId
-    }
-  };
-  return /* @__PURE__ */ React21.createElement("form", { ...aria, className: cx9(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ React21.createElement(SuggestedActions_default, null), /* @__PURE__ */ React21.createElement("div", { className: cx9(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ React21.createElement(
-    TextArea_default2,
-    {
-      "aria-label": isMessageLengthExceeded ? localize("TEXT_INPUT_LENGTH_EXCEEDED_ALT") : localize("TEXT_INPUT_ALT"),
-      className: cx9(classNames["sendbox__sendbox-text"], classNames["sendbox__text-area--in-grid"]),
-      "data-testid": testIds_default.sendBoxTextBox,
-      hidden: telephoneKeypadShown,
-      onInput: handleMessageChange,
-      placeholder: props.placeholder ?? localize("TEXT_INPUT_PLACEHOLDER"),
-      ref: inputRef,
-      value: message
-    }
-  ), /* @__PURE__ */ React21.createElement(
-    Surrogate_default,
-    {
-      autoFocus: true,
-      className: classNames["sendbox__telephone-keypad--in-grid"],
-      isHorizontal: false,
-      onButtonClick: handleTelephoneKeypadButtonClick
-    }
-  ), /* @__PURE__ */ React21.createElement(Attachments_default2, { attachments, className: classNames["sendbox__attachment--in-grid"] }), /* @__PURE__ */ React21.createElement("div", { className: cx9(classNames["sendbox__sendbox-controls"], classNames["sendbox__sendbox-controls--in-grid"]) }, !telephoneKeypadShown && maxMessageLength && /* @__PURE__ */ React21.createElement(
-    "div",
-    {
-      className: cx9(classNames["sendbox__text-counter"], {
-        [classNames["sendbox__text-counter--error"]]: isMessageLengthExceeded
-      })
-    },
-    `${message.length}/${maxMessageLength}`
-  ), /* @__PURE__ */ React21.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ React21.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ React21.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React21.createElement(ToolbarSeparator, null), /* @__PURE__ */ React21.createElement(
-    ToolbarButton,
-    {
-      "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
-      "data-testid": testIds_default.sendBoxSendButton,
-      disabled: isMessageLengthExceeded || telephoneKeypadShown,
-      type: "submit"
-    },
-    /* @__PURE__ */ React21.createElement(SendIcon, null)
-  ))), /* @__PURE__ */ React21.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React21.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
-}
-var sendbox_default2 = memo15(SendBox);
-
-// src/components/SendBox.tsx
-var SendBox_default = sendbox_default2;
-
-// src/private/FluentThemeProvider.tsx
-var { ThemeProvider } = Components2;
-var sendBoxMiddleware = [() => () => () => SendBox_default];
-var FluentThemeProvider = ({ children }) => /* @__PURE__ */ React22.createElement(WebchatTheme, null, /* @__PURE__ */ React22.createElement(Provider_default, null, /* @__PURE__ */ React22.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
-var FluentThemeProvider_default = memo16(FluentThemeProvider);
-
-// src/index.ts
-injectMetaTag("botframework-webchat-fluent-theme:version", "4.17.0-main.20240425.edca85d");
-injectStyles();
-export {
-  FluentThemeProvider_default as FluentThemeProvider,
-  testIds_default as testIds
-};
-//# sourceMappingURL=index.mjs.map