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

package/src/components/telephoneKeypad/private/Button.tsx

@@ -2,10 +2,72 @@ import React, { forwardRef, memo, useCallback, type Ref } from 'react';
 
 import { useRefFrom } from 'use-ref-from';
 
+import { useStyles } from '../../../styles';
 import { type DTMF } from '../types';
 
-import styles from './Button.module.css';
-import { useStyles } from '../../../styles';
+const 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
+    }
+  }
+};
 
 type Props = Readonly<{
   button: DTMF;
@@ -25,16 +87,16 @@ const Button = memo(
 
     return (
       <button
-        className={classNames['telephone-keypad__button']}
+        className={classNames['webchat__telephone-keypad__button']}
         data-testid={dataTestId}
         onClick={handleClick}
         ref={ref}
         type="button"
       >
-        <span className={classNames['telephone-keypad__button__text']}>
+        <span className={classNames['webchat__telephone-keypad__button__text']}>
           {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
         </span>
-        {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
+        {!!ruby && <ruby className={classNames['webchat__telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );
   })

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -1,13 +1,44 @@
 import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
+import { useStyles } from '../../../styles';
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
 import testIds from '../../../testIds';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
-import styles from './TelephoneKeypad.module.css';
-import { useStyles } from '../../../styles';
+
+const styles = {
+  '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%'
+  }
+};
 
 type Props = Readonly<{
   autoFocus?: boolean | undefined;
@@ -23,7 +54,7 @@ const Orientation = memo(
       // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       false
     ) : (
-      <div className={classNames['telephone-keypad__box']}>{children}</div>
+      <div className={classNames['webchat__telephone-keypad__box']}>{children}</div>
     );
   }
 );
@@ -64,7 +95,7 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
   }, [autoFocusRef, firstButtonRef]);
 
   return (
-    <div className={classNames['telephone-keypad']} onKeyDown={handleKeyDown}>
+    <div className={classNames['webchat__telephone-keypad']} onKeyDown={handleKeyDown}>
       <Orientation isHorizontal={isHorizontal}>
         <Button
           button="1"

package/src/index.ts

@@ -2,12 +2,9 @@ import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
 import testIds from './testIds';
-import { injectStyle } from './styles';
 
 declare const NPM_PACKAGE_VERSION: string;
 
 injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
 
-injectStyle();
-
 export { FluentThemeProvider, testIds };

package/src/private/useStyleToEmotionObject.ts

@@ -0,0 +1,32 @@
+import createEmotion, { type Emotion } from '@emotion/css/create-instance';
+// TODO: [P0] Use `math-random`. Today, it requires "crypto" today, maybe missing "conditions" or what.
+// import random from 'math-random';
+import { useMemo } from 'react';
+
+const { random } = Math;
+
+const emotionPool: Record<string, Emotion> = {};
+const nonce = '';
+
+/* eslint no-magic-numbers: ["error", { "ignore": [0, 2, 5, 26, 65] }] */
+
+function createCSSKey() {
+  return random()
+    .toString(26)
+    .substr(2, 5)
+    .replace(/\d/gu, (value: string) => String.fromCharCode(value.charCodeAt(0) + 65));
+}
+
+export default function useStyleToEmotionObject() {
+  return useMemo(() => {
+    // Emotion doesn't hash with nonce. We need to provide the pooling mechanism.
+    // 1. If 2 instances use different nonce, they should result in different hash;
+    // 2. If 2 instances are being mounted, pooling will make sure we render only 1 set of <style> tags, instead of 2.
+    const emotion =
+      // Prefix "id-" to prevent object injection attack.
+      emotionPool[`id-${nonce}`] ||
+      (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
+
+    return (style: TemplateStringsArray) => emotion.css(style);
+  }, []);
+}

package/src/styles/index.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+
+import useStyleToEmotionObject from '../private/useStyleToEmotionObject';
+
+export function useStyles<T extends Record<`webchat-fluent__${string}`, any>>(styles: T): Record<keyof T, string> {
+  const getClassName = useStyleToEmotionObject();
+  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
+  return useMemo(
+    () =>
+      Object.freeze(
+        Object.fromEntries(Object.entries(styles).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
+      ),
+    [styles, getClassName]
+  );
+}

package/src/tsconfig.json

@@ -5,8 +5,7 @@
     "jsx": "react",
     "moduleResolution": "Bundler",
     "skipLibCheck": true,
-    "target": "ESNext",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "target": "ESNext"
   },
   "extends": "@tsconfig/strictest/tsconfig.json"
 }

package/dist/botframework-webchat-fluent-theme.development.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/telephoneKeypad/private/Button.module.css","../src/components/telephoneKeypad/private/TelephoneKeypad.module.css","../src/components/Theme.module.css","../src/components/dropZone/index.module.css","../src/components/suggestedActions/SuggestedAction.module.css","../src/components/suggestedActions/index.module.css","../src/components/sendbox/Toolbar.module.css","../src/components/sendbox/AddAttachmentButton.module.css","../src/components/sendbox/Attachments.module.css","../src/components/sendbox/ErrorMessage.module.css","../src/components/sendbox/TextArea.module.css","../src/components/sendbox/index.module.css"],"sourcesContent":["\n:global(.webchat-fluent) .telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */\n  background-color: White;\n  border-radius: 100%;\n\n  /* Whitelabel styles */\n  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */\n  /* color: inherit; */\n\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\n\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  &:hover {\n    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */\n    background-color: var(--webchat-colorGray30)\n  }\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__ruby {\n  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n\n:global(.webchat-fluent) .telephone-keypad--horizontal {\n  & .telephone-keypad__button {\n    height: 32px;\n    justify-content: center;\n    margin: 8px 4px;\n    width: 32px;\n  };\n\n  .telephone-keypad__button__ruby {\n    display: none;\n  }\n\n  & .telephone-keypad__button__text {\n    font-size: 20px;\n    margin-top: 0;\n  }\n}\n","\n:global(.webchat-fluent) .telephone-keypad {\n  /* Commented out whitelabel styles for now. */\n  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */\n  /* borderRadius: '8px 8px 0px 0px; */\n  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */\n\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  /* boxShadow: var(--shadow16); */\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n  /* margin: var(--spacingHorizontalMNudge)' */\n}\n\n:global(.webchat-fluent) .telephone-keypad__box {\n  box-sizing: border-box;\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n  justify-items: center;\n  padding: 16px;\n  width: 100%;\n}\n","\n:global(.webchat-fluent).theme {\n  display: contents;\n\n  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n  --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n\n  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n\n  --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n  --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n  --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n\n  --webchat-colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover, #f5f5f5);\n  --webchat-colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed, #e0e0e0);\n\n  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n\n  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n\n  --webchat-colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1, #077fab);\n\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n  --webchat-colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed, #01678c);\n\n  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */\n  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */\n  --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n}",":global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {\n  background-color: #e00;\n  color: White\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {\n  height: 36px;\n  /* Set \"pointer-events: none\" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the \"--droppable\" modifier.*/\n  pointer-events: none;\n  width: 36px\n}\n",":global(.webchat-fluent) .suggested-action {\n  align-items: center;\n  background: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--webchat-colorBrandStroke2);\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  gap: 4px;\n  padding: 4px 8px 4px;\n  text-align: start;\n  transition: all .15s ease-out;\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorBrandBackground2Hover);\n      color: var(--webchat-colorBrandForeground2Hover)\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorBrandBackground2Pressed);\n    color: var(--webchat-colorBrandForeground2Pressed)\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed\n  }\n}\n\n:global(.webchat-fluent) .suggested-action__image {\n  font-size: 12px;\n  height: 1em;\n  width: 1em;\n}\n","\n:global(.webchat-fluent) .suggested-actions {\n  align-items: flex-end;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:empty) {\n    padding-block-end: 8px;\n    padding-inline-start: 4px\n  }\n\n  &.suggested-actions--flow {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  &.suggested-actions--stacked {\n    flex-direction: column\n  }\n}\n",":global(.webchat-fluent) .sendbox__toolbar {\n  display: flex;\n  gap: 4px;\n  margin-inline-start: auto;\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1;\n  background: transparent;\n  border-radius: var(--webchat-borderRadiusSmall);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n  width: 32px;\n\n  > svg {\n    font-size: 20px;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorSubtleBackgroundHover);\n      color: var(--webchat-colorCompoundBrandForeground1Hover);\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorSubtleBackgroundPressed);\n    color: var(--webchat-colorCompoundBrandForeground1Pressed);\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed;\n  }\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-separator {\n  align-self: center;\n  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n  height: 28px;\n\n  &:first-child, &:last-child, &:only-child {\n    display: none\n  }\n}\n",":global(.webchat-fluent) .sendbox__add-attachment {\n  display: grid\n}\n\n:global(.webchat-fluent) .sendbox__add-attachment-input {\n  font-size: 0;\n  height: 0;\n  opacity: 0;\n  width: 0;\n}\n",":global(.webchat-fluent) .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",":global(.webchat-fluent) .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",":global(.webchat-fluent) .sendbox__text-area {\n  display: grid;\n  grid-template-areas: 'main';\n  max-height: 200px;\n  overflow: hidden;\n}\n\n:global(.webchat-fluent) .sendbox__text-area--hidden {\n  /* TODO: Not perfect way of hiding the text box. */\n  height: 0;\n  visibility: collapse;\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__text-area-doppelganger {\n  overflow: hidden;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input {\n  height: 100%;\n  padding: 0\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input--scroll {\n  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */\n  scrollbar-color: unset;\n  scrollbar-width: unset;\n  /* Firefox */\n  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n  -moz-scrollbar-width: thin;\n\n  /* Chrome, Edge, and Safari */\n  &::-webkit-scrollbar {\n    width: 8px\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: var(--webchat-colorNeutralBackground5);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--webchat-colorNeutralForeground2);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-corner {\n    background-color: var(--webchat-colorNeutralBackground5);\n  }\n}\n",":global(.webchat-fluent) .sendbox {\n  color: var(--webchat-colorNeutralForeground1);\n  font-family: var(--webchat-fontFamilyBase);\n  padding: 0 10px 10px;\n  text-rendering: optimizeLegibility;\n}\n\n:global(.webchat-fluent) .sendbox__sendbox {\n  background-color: var(--webchat-colorNeutralBackground1);\n  border-radius: var(--webchat-borderRadiusLarge);\n  border: 1px solid var(--webchat-colorNeutralStroke1);\n  display: grid;\n  font-family: var(--webchat-fontFamilyBase);\n  font-size: 14px;\n  gap: 6px;\n  line-height: 20px;\n  padding: 8px;\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--webchat-colorNeutralStroke1Selected);\n    /* TODO clarify with design the color:\n      - Teams is using colorCompoundBrandForeground1\n      - Fluent is using colorCompoundBrandStroke\n      - we are using colorCompoundBrandForeground1Hover */\n    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);\n  }\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__sendbox-controls {\n  align-items: center;\n  display: flex;\n  padding-inline-start: 4px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter {\n  color: var(--webchat-colorNeutralForeground4);\n  cursor: default;\n  font-family: var(--webchat-fontFamilyNumeric);\n  font-size: 10px;\n  line-height: 14px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter--error {\n  color: var(--webchat-colorStatusDangerForeground1);\n}\n"],"mappings":"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","names":["telephone-keypad__button","telephone-keypad__button__ruby","telephone-keypad__button__text","telephone-keypad--horizontal","telephone-keypad","telephone-keypad__box","theme","sendbox__attachment-drop-zone","sendbox__attachment-drop-zone--droppable","sendbox__attachment-drop-zone-icon","suggested-action","suggested-action__image","suggested-actions","suggested-actions--flow","suggested-actions--stacked","sendbox__toolbar","sendbox__toolbar-button","sendbox__toolbar-separator","sendbox__add-attachment","sendbox__add-attachment-input","sendbox__attachment","sendbox__error-message","sendbox__text-area","sendbox__text-area--hidden","sendbox__text-area-shared","sendbox__text-area-doppelganger","sendbox__text-area-input","sendbox__text-area-input--scroll","sendbox","sendbox__sendbox","sendbox__sendbox-text","sendbox__sendbox-controls","sendbox__text-counter","sendbox__text-counter--error"]}

package/dist/botframework-webchat-fluent-theme.production.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/telephoneKeypad/private/Button.module.css","../src/components/telephoneKeypad/private/TelephoneKeypad.module.css","../src/components/Theme.module.css","../src/components/dropZone/index.module.css","../src/components/suggestedActions/SuggestedAction.module.css","../src/components/suggestedActions/index.module.css","../src/components/sendbox/Toolbar.module.css","../src/components/sendbox/AddAttachmentButton.module.css","../src/components/sendbox/Attachments.module.css","../src/components/sendbox/ErrorMessage.module.css","../src/components/sendbox/TextArea.module.css","../src/components/sendbox/index.module.css"],"sourcesContent":["\n:global(.webchat-fluent) .telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */\n  background-color: White;\n  border-radius: 100%;\n\n  /* Whitelabel styles */\n  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */\n  /* color: inherit; */\n\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\n\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  &:hover {\n    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */\n    background-color: var(--webchat-colorGray30)\n  }\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__ruby {\n  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n\n:global(.webchat-fluent) .telephone-keypad--horizontal {\n  & .telephone-keypad__button {\n    height: 32px;\n    justify-content: center;\n    margin: 8px 4px;\n    width: 32px;\n  };\n\n  .telephone-keypad__button__ruby {\n    display: none;\n  }\n\n  & .telephone-keypad__button__text {\n    font-size: 20px;\n    margin-top: 0;\n  }\n}\n","\n:global(.webchat-fluent) .telephone-keypad {\n  /* Commented out whitelabel styles for now. */\n  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */\n  /* borderRadius: '8px 8px 0px 0px; */\n  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */\n\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  /* boxShadow: var(--shadow16); */\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n  /* margin: var(--spacingHorizontalMNudge)' */\n}\n\n:global(.webchat-fluent) .telephone-keypad__box {\n  box-sizing: border-box;\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n  justify-items: center;\n  padding: 16px;\n  width: 100%;\n}\n","\n:global(.webchat-fluent).theme {\n  display: contents;\n\n  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n  --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n\n  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n\n  --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n  --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n  --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n\n  --webchat-colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover, #f5f5f5);\n  --webchat-colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed, #e0e0e0);\n\n  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n\n  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n\n  --webchat-colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1, #077fab);\n\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n  --webchat-colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed, #01678c);\n\n  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */\n  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */\n  --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n}",":global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {\n  background-color: #e00;\n  color: White\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {\n  height: 36px;\n  /* Set \"pointer-events: none\" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the \"--droppable\" modifier.*/\n  pointer-events: none;\n  width: 36px\n}\n",":global(.webchat-fluent) .suggested-action {\n  align-items: center;\n  background: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--webchat-colorBrandStroke2);\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  gap: 4px;\n  padding: 4px 8px 4px;\n  text-align: start;\n  transition: all .15s ease-out;\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorBrandBackground2Hover);\n      color: var(--webchat-colorBrandForeground2Hover)\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorBrandBackground2Pressed);\n    color: var(--webchat-colorBrandForeground2Pressed)\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed\n  }\n}\n\n:global(.webchat-fluent) .suggested-action__image {\n  font-size: 12px;\n  height: 1em;\n  width: 1em;\n}\n","\n:global(.webchat-fluent) .suggested-actions {\n  align-items: flex-end;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:empty) {\n    padding-block-end: 8px;\n    padding-inline-start: 4px\n  }\n\n  &.suggested-actions--flow {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  &.suggested-actions--stacked {\n    flex-direction: column\n  }\n}\n",":global(.webchat-fluent) .sendbox__toolbar {\n  display: flex;\n  gap: 4px;\n  margin-inline-start: auto;\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1;\n  background: transparent;\n  border-radius: var(--webchat-borderRadiusSmall);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n  width: 32px;\n\n  > svg {\n    font-size: 20px;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorSubtleBackgroundHover);\n      color: var(--webchat-colorCompoundBrandForeground1Hover);\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorSubtleBackgroundPressed);\n    color: var(--webchat-colorCompoundBrandForeground1Pressed);\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed;\n  }\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-separator {\n  align-self: center;\n  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n  height: 28px;\n\n  &:first-child, &:last-child, &:only-child {\n    display: none\n  }\n}\n",":global(.webchat-fluent) .sendbox__add-attachment {\n  display: grid\n}\n\n:global(.webchat-fluent) .sendbox__add-attachment-input {\n  font-size: 0;\n  height: 0;\n  opacity: 0;\n  width: 0;\n}\n",":global(.webchat-fluent) .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",":global(.webchat-fluent) .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",":global(.webchat-fluent) .sendbox__text-area {\n  display: grid;\n  grid-template-areas: 'main';\n  max-height: 200px;\n  overflow: hidden;\n}\n\n:global(.webchat-fluent) .sendbox__text-area--hidden {\n  /* TODO: Not perfect way of hiding the text box. */\n  height: 0;\n  visibility: collapse;\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__text-area-doppelganger {\n  overflow: hidden;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input {\n  height: 100%;\n  padding: 0\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input--scroll {\n  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */\n  scrollbar-color: unset;\n  scrollbar-width: unset;\n  /* Firefox */\n  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n  -moz-scrollbar-width: thin;\n\n  /* Chrome, Edge, and Safari */\n  &::-webkit-scrollbar {\n    width: 8px\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: var(--webchat-colorNeutralBackground5);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--webchat-colorNeutralForeground2);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-corner {\n    background-color: var(--webchat-colorNeutralBackground5);\n  }\n}\n",":global(.webchat-fluent) .sendbox {\n  color: var(--webchat-colorNeutralForeground1);\n  font-family: var(--webchat-fontFamilyBase);\n  padding: 0 10px 10px;\n  text-rendering: optimizeLegibility;\n}\n\n:global(.webchat-fluent) .sendbox__sendbox {\n  background-color: var(--webchat-colorNeutralBackground1);\n  border-radius: var(--webchat-borderRadiusLarge);\n  border: 1px solid var(--webchat-colorNeutralStroke1);\n  display: grid;\n  font-family: var(--webchat-fontFamilyBase);\n  font-size: 14px;\n  gap: 6px;\n  line-height: 20px;\n  padding: 8px;\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--webchat-colorNeutralStroke1Selected);\n    /* TODO clarify with design the color:\n      - Teams is using colorCompoundBrandForeground1\n      - Fluent is using colorCompoundBrandStroke\n      - we are using colorCompoundBrandForeground1Hover */\n    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);\n  }\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__sendbox-controls {\n  align-items: center;\n  display: flex;\n  padding-inline-start: 4px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter {\n  color: var(--webchat-colorNeutralForeground4);\n  cursor: default;\n  font-family: var(--webchat-fontFamilyNumeric);\n  font-size: 10px;\n  line-height: 14px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter--error {\n  color: var(--webchat-colorStatusDangerForeground1);\n}\n"],"mappings":"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","names":["telephone-keypad__button","telephone-keypad__button__ruby","telephone-keypad__button__text","telephone-keypad--horizontal","telephone-keypad","telephone-keypad__box","theme","sendbox__attachment-drop-zone","sendbox__attachment-drop-zone--droppable","sendbox__attachment-drop-zone-icon","suggested-action","suggested-action__image","suggested-actions","suggested-actions--flow","suggested-actions--stacked","sendbox__toolbar","sendbox__toolbar-button","sendbox__toolbar-separator","sendbox__add-attachment","sendbox__add-attachment-input","sendbox__attachment","sendbox__error-message","sendbox__text-area","sendbox__text-area--hidden","sendbox__text-area-shared","sendbox__text-area-doppelganger","sendbox__text-area-input","sendbox__text-area-input--scroll","sendbox","sendbox__sendbox","sendbox__sendbox-text","sendbox__sendbox-controls","sendbox__text-counter","sendbox__text-counter--error"]}

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/telephoneKeypad/private/Button.module.css","../src/components/telephoneKeypad/private/TelephoneKeypad.module.css","../src/components/Theme.module.css","../src/components/dropZone/index.module.css","../src/components/suggestedActions/SuggestedAction.module.css","../src/components/suggestedActions/index.module.css","../src/components/sendbox/Toolbar.module.css","../src/components/sendbox/AddAttachmentButton.module.css","../src/components/sendbox/Attachments.module.css","../src/components/sendbox/ErrorMessage.module.css","../src/components/sendbox/TextArea.module.css","../src/components/sendbox/index.module.css"],"sourcesContent":["\n:global(.webchat-fluent) .telephone-keypad__button {\n  -webkit-user-select: none;\n  align-items: center;\n  appearance: none;\n  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */\n  background-color: White;\n  border-radius: 100%;\n\n  /* Whitelabel styles */\n  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */\n  /* color: inherit; */\n\n  border: solid 1px var(--webchat-colorNeutralStroke1);\n  color: var(--webchat-colorGray200);\n  font-weight: var(--webchat-fontWeightSemibold);\n\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  &:hover {\n    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */\n    background-color: var(--webchat-colorGray30)\n  }\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__ruby {\n  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */\n  color: var(--webchat-colorGray190);\n  font-size: 10px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__text {\n  font-size: 24px;\n  margin-top: 8px;\n}\n\n:global(.webchat-fluent) .telephone-keypad--horizontal {\n  & .telephone-keypad__button {\n    height: 32px;\n    justify-content: center;\n    margin: 8px 4px;\n    width: 32px;\n  };\n\n  .telephone-keypad__button__ruby {\n    display: none;\n  }\n\n  & .telephone-keypad__button__text {\n    font-size: 20px;\n    margin-top: 0;\n  }\n}\n","\n:global(.webchat-fluent) .telephone-keypad {\n  /* Commented out whitelabel styles for now. */\n  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */\n  /* borderRadius: '8px 8px 0px 0px; */\n  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */\n\n  align-items: center;\n  background: var(--webchat-colorNeutralBackground1);\n  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */\n  border: none;\n  border-radius: var(--webchat-borderRadiusXLarge);\n  /* boxShadow: var(--shadow16); */\n  display: flex;\n  flex-direction: column;\n  font-family: var(--webchat-fontFamilyBase);\n  justify-content: center;\n  /* margin: var(--spacingHorizontalMNudge)' */\n}\n\n:global(.webchat-fluent) .telephone-keypad__box {\n  box-sizing: border-box;\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n  justify-items: center;\n  padding: 16px;\n  width: 100%;\n}\n","\n:global(.webchat-fluent).theme {\n  display: contents;\n\n  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n  --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n\n  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n\n  --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n  --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n  --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n\n  --webchat-colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover, #f5f5f5);\n  --webchat-colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed, #e0e0e0);\n\n  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n  --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n\n  --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n\n  --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n  --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n\n  --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n  --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n\n  --webchat-colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1, #077fab);\n\n  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n  --webchat-colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed, #01678c);\n\n  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */\n  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */\n  --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\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\n  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n}",":global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {\n  background-color: #e00;\n  color: White\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {\n  height: 36px;\n  /* Set \"pointer-events: none\" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the \"--droppable\" modifier.*/\n  pointer-events: none;\n  width: 36px\n}\n",":global(.webchat-fluent) .suggested-action {\n  align-items: center;\n  background: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--webchat-colorBrandStroke2);\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  gap: 4px;\n  padding: 4px 8px 4px;\n  text-align: start;\n  transition: all .15s ease-out;\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorBrandBackground2Hover);\n      color: var(--webchat-colorBrandForeground2Hover)\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorBrandBackground2Pressed);\n    color: var(--webchat-colorBrandForeground2Pressed)\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed\n  }\n}\n\n:global(.webchat-fluent) .suggested-action__image {\n  font-size: 12px;\n  height: 1em;\n  width: 1em;\n}\n","\n:global(.webchat-fluent) .suggested-actions {\n  align-items: flex-end;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:empty) {\n    padding-block-end: 8px;\n    padding-inline-start: 4px\n  }\n\n  &.suggested-actions--flow {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  &.suggested-actions--stacked {\n    flex-direction: column\n  }\n}\n",":global(.webchat-fluent) .sendbox__toolbar {\n  display: flex;\n  gap: 4px;\n  margin-inline-start: auto;\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1;\n  background: transparent;\n  border-radius: var(--webchat-borderRadiusSmall);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n  width: 32px;\n\n  > svg {\n    font-size: 20px;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    &:not([aria-disabled=\"true\"]):hover {\n      background-color: var(--webchat-colorSubtleBackgroundHover);\n      color: var(--webchat-colorCompoundBrandForeground1Hover);\n    }\n  }\n  &:not([aria-disabled=\"true\"]):active {\n    background-color: var(--webchat-colorSubtleBackgroundPressed);\n    color: var(--webchat-colorCompoundBrandForeground1Pressed);\n  }\n  &[aria-disabled=\"true\"] {\n    color: var(--webchat-colorNeutralForegroundDisabled);\n    cursor: not-allowed;\n  }\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-separator {\n  align-self: center;\n  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n  height: 28px;\n\n  &:first-child, &:last-child, &:only-child {\n    display: none\n  }\n}\n",":global(.webchat-fluent) .sendbox__add-attachment {\n  display: grid\n}\n\n:global(.webchat-fluent) .sendbox__add-attachment-input {\n  font-size: 0;\n  height: 0;\n  opacity: 0;\n  width: 0;\n}\n",":global(.webchat-fluent) .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",":global(.webchat-fluent) .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",":global(.webchat-fluent) .sendbox__text-area {\n  display: grid;\n  grid-template-areas: 'main';\n  max-height: 200px;\n  overflow: hidden;\n}\n\n:global(.webchat-fluent) .sendbox__text-area--hidden {\n  /* TODO: Not perfect way of hiding the text box. */\n  height: 0;\n  visibility: collapse;\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__text-area-doppelganger {\n  overflow: hidden;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input {\n  height: 100%;\n  padding: 0\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input--scroll {\n  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */\n  scrollbar-color: unset;\n  scrollbar-width: unset;\n  /* Firefox */\n  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n  -moz-scrollbar-width: thin;\n\n  /* Chrome, Edge, and Safari */\n  &::-webkit-scrollbar {\n    width: 8px\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: var(--webchat-colorNeutralBackground5);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--webchat-colorNeutralForeground2);\n    border-radius: 16px\n  }\n\n  &::-webkit-scrollbar-corner {\n    background-color: var(--webchat-colorNeutralBackground5);\n  }\n}\n",":global(.webchat-fluent) .sendbox {\n  color: var(--webchat-colorNeutralForeground1);\n  font-family: var(--webchat-fontFamilyBase);\n  padding: 0 10px 10px;\n  text-rendering: optimizeLegibility;\n}\n\n:global(.webchat-fluent) .sendbox__sendbox {\n  background-color: var(--webchat-colorNeutralBackground1);\n  border-radius: var(--webchat-borderRadiusLarge);\n  border: 1px solid var(--webchat-colorNeutralStroke1);\n  display: grid;\n  font-family: var(--webchat-fontFamilyBase);\n  font-size: 14px;\n  gap: 6px;\n  line-height: 20px;\n  padding: 8px;\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--webchat-colorNeutralStroke1Selected);\n    /* TODO clarify with design the color:\n      - Teams is using colorCompoundBrandForeground1\n      - Fluent is using colorCompoundBrandStroke\n      - we are using colorCompoundBrandForeground1Hover */\n    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);\n  }\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__sendbox-controls {\n  align-items: center;\n  display: flex;\n  padding-inline-start: 4px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter {\n  color: var(--webchat-colorNeutralForeground4);\n  cursor: default;\n  font-family: var(--webchat-fontFamilyNumeric);\n  font-size: 10px;\n  line-height: 14px;\n}\n\n:global(.webchat-fluent) .sendbox__text-counter--error {\n  color: var(--webchat-colorStatusDangerForeground1);\n}\n"],"mappings":"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","names":["telephone-keypad__button","telephone-keypad__button__ruby","telephone-keypad__button__text","telephone-keypad--horizontal","telephone-keypad","telephone-keypad__box","theme","sendbox__attachment-drop-zone","sendbox__attachment-drop-zone--droppable","sendbox__attachment-drop-zone-icon","suggested-action","suggested-action__image","suggested-actions","suggested-actions--flow","suggested-actions--stacked","sendbox__toolbar","sendbox__toolbar-button","sendbox__toolbar-separator","sendbox__add-attachment","sendbox__add-attachment-input","sendbox__attachment","sendbox__error-message","sendbox__text-area","sendbox__text-area--hidden","sendbox__text-area-shared","sendbox__text-area-doppelganger","sendbox__text-area-input","sendbox__text-area-input--scroll","sendbox","sendbox__sendbox","sendbox__sendbox-text","sendbox__sendbox-controls","sendbox__text-counter","sendbox__text-counter--error"]}

package/src/components/Theme.module.css

@@ -1,60 +0,0 @@
-
-:global(.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/tokens/src/global/colors.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);
-}

package/src/components/dropZone/index.module.css

@@ -1,23 +0,0 @@
-:global(.webchat-fluent) .sendbox__attachment-drop-zone {
-  background-color: var(--webchat-colorNeutralBackground4);
-  border-radius: inherit;
-  cursor: copy;
-  display: grid;
-  gap: 8px;
-  inset: 0;
-  place-content: center;
-  place-items: center;
-  position: absolute;
-}
-
-:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
-  background-color: #e00;
-  color: White
-}
-
-:global(.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.*/
-  pointer-events: none;
-  width: 36px
-}

package/src/components/sendbox/AddAttachmentButton.module.css

@@ -1,10 +0,0 @@
-:global(.webchat-fluent) .sendbox__add-attachment {
-  display: grid
-}
-
-:global(.webchat-fluent) .sendbox__add-attachment-input {
-  font-size: 0;
-  height: 0;
-  opacity: 0;
-  width: 0;
-}

package/src/components/sendbox/Attachments.module.css

@@ -1,7 +0,0 @@
-:global(.webchat-fluent) .sendbox__attachment {
-  border-radius: var(--webchat-borderRadiusLarge);
-  border: 1px solid var(--webchat-colorNeutralStroke1);
-  cursor: default;
-  padding: 6px 8px;
-  width: fit-content
-}

package/src/components/sendbox/ErrorMessage.module.css

@@ -1,9 +0,0 @@
-:global(.webchat-fluent) .sendbox__error-message {
-  color: transparent;
-  font-size: 0;
-  height: 0;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 0;
-}

package/src/components/sendbox/TextArea.module.css

@@ -1,61 +0,0 @@
-:global(.webchat-fluent) .sendbox__text-area {
-  display: grid;
-  grid-template-areas: 'main';
-  max-height: 200px;
-  overflow: hidden;
-}
-
-:global(.webchat-fluent) .sendbox__text-area--hidden {
-  /* TODO: Not perfect way of hiding the text box. */
-  height: 0;
-  visibility: collapse;
-}
-
-:global(.webchat-fluent) .sendbox__text-area-shared {
-  border: none;
-  font: inherit;
-  grid-area: main;
-  outline: inherit;
-  overflow-wrap: anywhere;
-  resize: inherit;
-  scrollbar-gutter: stable;
-}
-
-:global(.webchat-fluent) .sendbox__text-area-doppelganger {
-  overflow: hidden;
-  visibility: hidden;
-  white-space: pre-wrap;
-}
-
-:global(.webchat-fluent) .sendbox__text-area-input {
-  height: 100%;
-  padding: 0
-}
-
-:global(.webchat-fluent) .sendbox__text-area-input--scroll {
-  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
-  scrollbar-color: unset;
-  scrollbar-width: unset;
-  /* Firefox */
-  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);
-  -moz-scrollbar-width: thin;
-
-  /* Chrome, Edge, and Safari */
-  &::-webkit-scrollbar {
-    width: 8px
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: var(--webchat-colorNeutralBackground5);
-    border-radius: 16px
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--webchat-colorNeutralForeground2);
-    border-radius: 16px
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: var(--webchat-colorNeutralBackground5);
-  }
-}

package/src/components/sendbox/Toolbar.module.css

@@ -1,49 +0,0 @@
-:global(.webchat-fluent) .sendbox__toolbar {
-  display: flex;
-  gap: 4px;
-  margin-inline-start: auto;
-}
-
-:global(.webchat-fluent) .sendbox__toolbar-button {
-  align-items: center;
-  appearance: none;
-  aspect-ratio: 1;
-  background: transparent;
-  border-radius: var(--webchat-borderRadiusSmall);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  padding: 3px;
-  width: 32px;
-
-  > svg {
-    font-size: 20px;
-    pointer-events: none;
-  }
-
-  @media (hover: hover) {
-    &:not([aria-disabled="true"]):hover {
-      background-color: var(--webchat-colorSubtleBackgroundHover);
-      color: var(--webchat-colorCompoundBrandForeground1Hover);
-    }
-  }
-  &:not([aria-disabled="true"]):active {
-    background-color: var(--webchat-colorSubtleBackgroundPressed);
-    color: var(--webchat-colorCompoundBrandForeground1Pressed);
-  }
-  &[aria-disabled="true"] {
-    color: var(--webchat-colorNeutralForegroundDisabled);
-    cursor: not-allowed;
-  }
-}
-
-:global(.webchat-fluent) .sendbox__toolbar-separator {
-  align-self: center;
-  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
-  height: 28px;
-
-  &:first-child, &:last-child, &:only-child {
-    display: none
-  }
-}