botframework-webchat-fluent-theme 4.18.1-main.20250515.4c7400a → 4.18.1-main.20250701.b63791f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250515.4c7400a",
+  "version": "4.18.1-main.20250701.b63791f",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -68,15 +68,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250515.4c7400a",
-    "botframework-webchat-styles": "4.18.1-main.20250515.4c7400a",
+    "botframework-webchat-base": "4.18.1-main.20250701.b63791f",
+    "botframework-webchat-styles": "4.18.1-main.20250701.b63791f",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250515.4c7400a",
-    "botframework-webchat-component": "4.18.1-main.20250515.4c7400a",
-    "botframework-webchat-core": "4.18.1-main.20250515.4c7400a",
+    "botframework-webchat-api": "4.18.1-main.20250701.b63791f",
+    "botframework-webchat-component": "4.18.1-main.20250701.b63791f",
+    "botframework-webchat-core": "4.18.1-main.20250701.b63791f",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityDecorator.module.css

@@ -220,6 +220,12 @@
   }
 }
 
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) {
+  color: var(--webchat-colorBrandForegroundLink);
+}
+
 /* Markdown links and citation links */
 :global(.webchat-fluent)
   .activity-decorator
@@ -271,9 +277,9 @@
   display: inline-flex;
   font-size: var(--webchat-fontSizeBase100);
   font-weight: var(--webchat-fontWeightSemibold);
-  height: 14px;
+  min-height: 12.4px;
   justify-content: center;
-  line-height: var(--webchat-lineHeightBase100);
+  line-height: 12.4px;
   margin-left: var(--webchat-spacingHorizontalXXS);
   margin-right: var(--webchat-spacingHorizontalXXS);
   min-width: 14px;
@@ -319,6 +325,10 @@
     color: var(--webchat-colorNeutralForeground3);
   }
 
+  :global(.webchat__link-definitions__message-sensitivity-label-text) {
+    color: var(--webchat-colorNeutralForeground4);
+  }
+
   :global(.webchat__link-definitions__header-chevron) {
     fill: var(--webchat-colorNeutralForeground3);
     font-size: var(--webchat__font-size--small);

package/src/components/dropZone/DropZone.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { AddDocumentIcon } from '../../icons';
+import { FluentIcon } from '../icon';
 import testIds from '../../testIds';
 import styles from './DropZone.module.css';
 import { useStyles } from '../../styles';
@@ -131,7 +131,7 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
       onDrop={handleDrop}
       ref={dropZoneRef}
     >
-      <AddDocumentIcon className={classNames['sendbox__attachment-drop-zone-icon']} />
+      <FluentIcon appearance="text" className={classNames['sendbox__attachment-drop-zone-icon']} icon="add-document" />
       {localize('TEXT_INPUT_DROP_ZONE')}
     </div>
   ) : null;

package/src/components/icon/FluentIcon.module.css

@@ -0,0 +1,53 @@
+:global(.webchat-fluent) .fluent-icon {
+  min-width: var(--webchat__fluent-icon--size, 1em);
+  min-height: var(--webchat__fluent-icon--size, 1em);
+  place-self: center;
+
+  /* Use the image as texture. */
+  background-image: var(--webchat__fluent-icon--image, none);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: var(--webchat__fluent-icon--size, 1em);
+
+  /* If image is not set, fallback to solid color. */
+  background-color: var(--webchat__fluent-icon--color, transparent);
+
+  /* 3. Set the mask if any. */
+  -webkit-mask-image: var(--webchat__fluent-icon--mask);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--webchat__fluent-icon--size, 1em);
+  mask-image: var(--webchat__fluent-icon--mask);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: var(--webchat__fluent-icon--size, 1em);
+}
+
+/* #region: Appearance */
+:global(.webchat) .appearance--text {
+  --webchat__fluent-icon--color: currentColor;
+}
+/* #endregion */
+
+/* #region: Icons */
+:global(.webchat) .icon--add-document {
+  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"/></svg>');
+}
+
+:global(.webchat) .icon--attachment {
+  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"/></svg>');
+}
+
+:global(.webchat) .icon--info-16 {
+  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><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"/></svg>');
+}
+
+:global(.webchat) .icon--send {
+  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"/></svg>');
+}
+
+:global(.webchat) .icon--keypad {
+  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"/></svg>');
+}
+
+/* #endregion */

package/src/components/icon/FluentIcon.tsx

@@ -0,0 +1,51 @@
+import { createIconComponent } from 'botframework-webchat-component/internal';
+import { validateProps } from 'botframework-webchat-react-valibot';
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo, useMemo, type CSSProperties } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './FluentIcon.module.css';
+
+const baseFluentIconPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    mask: optional(string())
+  }),
+  readonly()
+);
+
+function BaseFluentIcon(props: InferInput<typeof baseFluentIconPropsSchema>) {
+  const { className } = validateProps(baseFluentIconPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  const maskStyle = useMemo(
+    () =>
+      props.mask ? ({ '--webchat__fluent-icon--mask': `url(${JSON.stringify(props.mask)})` } as CSSProperties) : {},
+    [props.mask]
+  );
+
+  return <div className={cx(classNames['fluent-icon'], className)} style={maskStyle} />;
+}
+
+const { component: FluentIcon, modifierPropsSchema } = createIconComponent(
+  styles,
+  ['appearance', 'icon'],
+  BaseFluentIcon
+);
+
+FluentIcon.displayName = 'FluentIcon';
+
+const fluentIconPropsSchema = pipe(
+  object({
+    ...baseFluentIconPropsSchema.entries,
+    ...modifierPropsSchema.entries
+  }),
+  readonly()
+);
+
+type FluentIconProps = InferInput<typeof fluentIconPropsSchema>;
+
+export default memo(FluentIcon);
+export { fluentIconPropsSchema, type FluentIconProps };

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default as FluentIcon } from './FluentIcon';

package/src/components/preChatActivity/PreChatMessageActivity.module.css

@@ -46,6 +46,7 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body-subtitle {
+  color: var(--webchat-colorNeutralForeground1);
   font-size: var(--webchat-fontSizeBase300);
   line-height: var(--webchat-lineHeightBase300);
   overflow-wrap: anywhere;

package/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -18,7 +18,7 @@
   user-select: none;
 
   &:has(.pre-chat-message-activity__card-action-image) {
-    grid-template-areas: 'image title' 'image subtitle';
+    grid-template-areas: 'image title' 'empty subtitle';
     grid-template-columns: 20px 1fr;
   }
 

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -1,14 +1,16 @@
-import { Components, hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
+
 import { useStyles } from '../../styles/index.js';
 import testIds from '../../testIds.js';
+import { FluentIcon } from '../icon';
+
 import styles from './StarterPromptsCardAction.module.css';
 
 const { useFocus, useRenderMarkdownAsHTML, useSendBoxValue, useUIState } = hooks;
-const { MonochromeImageMasker } = Components;
 
 type Props = Readonly<{
   className?: string | undefined;
@@ -56,9 +58,10 @@ const StarterPromptsCardAction = ({ className, messageBackAction }: Props) => {
     >
       <div className={classNames['pre-chat-message-activity__card-action-title']}>{title}</div>
       {'image' in messageBackAction && messageBackAction.image && (
-        <MonochromeImageMasker
+        <FluentIcon
+          appearance="text"
           className={classNames['pre-chat-message-activity__card-action-image']}
-          src={messageBackAction.image}
+          mask={messageBackAction.image}
         />
       )}
       <div

package/src/components/sendBox/AddAttachmentButton.tsx

@@ -1,7 +1,8 @@
 import { hooks } from 'botframework-webchat-component';
 import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { AttachmentIcon } from '../../icons';
+
+import { FluentIcon } from '../icon';
 import testIds from '../../testIds';
 import { ToolbarButton } from './Toolbar';
 import styles from './AddAttachmentButton.module.css';
@@ -56,7 +57,7 @@ function AddAttachmentButton(
         data-testid={testIds.sendBoxUploadButton}
         onClick={handleClick}
       >
-        <AttachmentIcon />
+        <FluentIcon appearance="text" icon="attachment" />
       </ToolbarButton>
     </div>
   );

package/src/components/sendBox/SendBox.module.css

@@ -33,8 +33,8 @@
   padding: 8px;
   position: relative;
 
-  &:has(.sendbox__attachment--in-grid) {
-    --webchat-sendbox-attachment-area-active: 'attachment';
+  &:has(.sendbox__attachment-bar--in-grid) {
+    --webchat-sendbox-attachment-area-active: 'attachment-bar';
   }
 
   &:focus-within {
@@ -64,8 +64,8 @@
     grid-area: text-area;
   }
 
-  > .sendbox__attachment--in-grid {
-    grid-area: attachment;
+  > .sendbox__attachment-bar--in-grid {
+    grid-area: attachment-bar;
   }
 
   > .sendbox__sendbox-controls--in-grid {
@@ -77,7 +77,69 @@
   }
 }
 
-:global(.webchat-fluent) .sendbox__sendbox-text {
+:global(.webchat-fluent) .sendbox__attachment-bar:global(.send-box-attachment-bar) {
+  :global(.send-box-attachment-bar__box) {
+    gap: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS);
+  }
+
+  &:global(.send-box-attachment-bar--as-list-item) {
+    margin-inline-end: calc(-1 * var(--webchat-spacingHorizontalS));
+  }
+
+  &:global(.send-box-attachment-bar--as-list-item .send-box-attachment-bar__box:not(:empty)) {
+    padding: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS);
+  }
+
+  :global(.send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item) {
+    box-shadow: var(--webchat-shadow2);
+    border-radius: var(--webchat-borderRadiusMedium);
+    padding: var(--webchat-spacingVerticalXXS) var(--webchat-spacingHorizontalXXS);
+  }
+
+  :global(.send-box-attachment-bar-item.send-box-attachment-bar-item--as-thumbnail) {
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Selected);
+    border-radius: var(--webchat-borderRadiusXLarge);
+  }
+
+  :global(.send-box-attachment-bar-item .send-box-attachment-bar-item__delete-button) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForeground1);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), color
+      var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), opacity var(--webchat-durationUltraFast)
+      var(--webchat-curveAccelerateMid);
+
+    &:hover {
+      background-color: var(--webchat-colorNeutralBackground1Hover);
+      color: var(--webchat-colorNeutralForeground1Hover);
+    }
+
+    &:active {
+      background-color: var(--webchat-colorNeutralBackground1Pressed);
+      color: var(--webchat-colorNeutralForeground1Pressed);
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      background-color: var(--webchat-colorNeutralBackgroundDisabled);
+      border-color: var(--webchat-colorNeutralStrokeDisabled);
+      color: var(--webchat-colorNeutralForegroundDisabled);
+    }
+  }
+
+  :global(
+      .send-box-attachment-bar-item.send-box-attachment-bar-item.send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item
+      .send-box-attachment-bar-item__preview
+    ) {
+    padding-inline: var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.send-box-attachment-bar-item-file-preview.send-box-attachment-bar-item-file-preview--as-list-item) {
+    gap: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalS);
+  }
+}
+
+:global(.webchat-fluent) .sendbox__sendbox-text-area {
   background-color: transparent;
   border: none;
   flex: auto;
@@ -88,6 +150,8 @@
   margin: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS) var(--webchat-spacingVerticalNone);
   resize: none;
 
+  --webchat__text-area--carret-color: var(--webchat-colorNeutralForeground1);
+
   /* Prevent zoom on focus on iOS */
   @media only screen and (hover: none) and (pointer: coarse) {
     &:focus-within {

package/src/components/sendBox/SendBox.tsx

@@ -1,4 +1,4 @@
-import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component';
+import { hooks, Components, type SendBoxFocusOptions } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, {
   memo,
@@ -10,21 +10,20 @@ import React, {
   type MouseEventHandler
 } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { SendIcon } from '../../icons';
+
+import { FluentIcon } from '../icon';
 import { useStyles, useVariantClassName } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
 import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../telephoneKeypad';
 import AddAttachmentButton from './AddAttachmentButton';
-import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
 import useSubmitError from './private/useSubmitError';
 import useTranscriptNavigation from './private/useTranscriptNavigation';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
 import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
-import TextArea from './TextArea';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 
 const {
@@ -39,6 +38,8 @@ const {
   useUIState
 } = hooks;
 
+const { AttachmentBar, TextArea } = Components;
+
 type Props = Readonly<{
   className?: string | undefined;
   completion?: ReactNode | undefined;
@@ -138,14 +139,9 @@ function SendBox(props: Props) {
         )
       );
 
-      setAttachments(newAttachments);
-
-      // TODO: Currently in the UX, we have no way to remove attachments.
-      //       Keep concatenating doesn't make sense in current UX.
-      //       When end-user can remove attachment, we should enable the code again.
-      // setAttachments(attachments => attachments.concat(newAttachments));
+      setAttachments(attachmentsRef.current.concat(newAttachments));
     },
-    [makeThumbnail, setAttachments]
+    [attachmentsRef, makeThumbnail, setAttachments]
   );
 
   const handleFormSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -206,7 +202,7 @@ function SendBox(props: Props) {
       >
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
-          className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}
+          className={cx(classNames['sendbox__sendbox-text-area'], classNames['sendbox__text-area--in-grid'])}
           completion={props.completion}
           data-testid={testIds.sendBoxTextBox}
           hidden={shouldShowTelephoneKeypad}
@@ -221,7 +217,15 @@ function SendBox(props: Props) {
           isHorizontal={false}
           onButtonClick={handleTelephoneKeypadButtonClick}
         />
-        <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />
+        {!isBlueprint && (
+          <AttachmentBar
+            className={cx(
+              'webchat__send-box__attachment-bar',
+              classNames['sendbox__attachment-bar'],
+              classNames['sendbox__attachment-bar--in-grid']
+            )}
+          />
+        )}
         <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>
           {shouldShowMessageLength && (
             <div
@@ -242,7 +246,7 @@ function SendBox(props: Props) {
               disabled={isMessageLengthExceeded || shouldShowTelephoneKeypad}
               type="submit"
             >
-              <SendIcon />
+              <FluentIcon appearance="text" icon="send" />
             </ToolbarButton>
           </Toolbar>
         </div>

package/src/components/sendBox/TelephoneKeypadToolbarButton.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
 import { hooks } from 'botframework-webchat-component';
-import { TelephoneKeypadIcon } from '../../icons';
+import { FluentIcon } from '../icon';
 import testIds from '../../testIds';
 import { useTelephoneKeypadShown } from '../telephoneKeypad';
 import { ToolbarButton } from './Toolbar';
@@ -21,7 +21,7 @@ const TelephoneKeypadToolbarButton = memo(() => {
       onClick={handleClick}
       selected={telephoneKeypadShown}
     >
-      <TelephoneKeypadIcon />
+      <FluentIcon appearance="text" icon="keypad" />
     </ToolbarButton>
   );
 });

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

@@ -21,6 +21,8 @@
   justify-content: center;
   padding: 3px;
 
+  --webchat__fluent-icon--size: 20px;
+
   > :global(.webchat__monochrome-image-masker) {
     font-size: 20px;
     pointer-events: none;

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -9,7 +9,7 @@ import AccessibleButton from './AccessibleButton';
 import { useRovingFocusItemRef } from './private/rovingFocus';
 import styles from './SuggestedAction.module.css';
 
-const { useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions, useUIState } = hooks;
+const { useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActionsHooks, useUIState } = hooks;
 
 type SuggestedActionProps = Readonly<{
   buttonText: string | undefined;
@@ -44,7 +44,7 @@ function SuggestedAction({
   type,
   value
 }: SuggestedActionProps) {
-  const [_, setSuggestedActions] = useSuggestedActions();
+  const [_, setSuggestedActions] = useSuggestedActionsHooks().useSuggestedActions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [uiState] = useUIState();
   const focus = useFocus();

package/src/components/suggestedActions/SuggestedActions.tsx

@@ -8,7 +8,7 @@ import RovingFocusProvider from './private/rovingFocus';
 import SuggestedAction from './SuggestedAction';
 import styles from './SuggestedActions.module.css';
 
-const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions, useUIState } = hooks;
+const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActionsHooks, useUIState } = hooks;
 
 function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
@@ -45,7 +45,7 @@ function SuggestedActionStackedOrFlowContainer(
 function SuggestedActions() {
   const classNames = useStyles(styles);
   const localize = useLocalizer();
-  const [suggestedActions, _, { activity }] = useSuggestedActions();
+  const [suggestedActions, _, { activity }] = useSuggestedActionsHooks().useSuggestedActions();
   const focus = useFocus();
 
   const handleEscapeKey = useCallback(() => {

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

@@ -3,14 +3,14 @@ import cx from 'classnames';
 import React, { memo, useCallback, useEffect, useRef, type KeyboardEventHandler, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
+import { useStyles } from '../../../styles';
 import testIds from '../../../testIds';
+import { FluentIcon } from '../../icon';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
+import Button from './Button';
 import styles from './TelephoneKeypad.module.css';
-import { useStyles } from '../../../styles';
-import { InfoSmallIcon } from '../../../icons';
 
 const { LocalizedString } = Components;
 
@@ -128,7 +128,7 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
         <Button button="#" data-testid={testIds.sendBoxTelephoneKeypadButtonPound} onClick={handleButtonPoundClick} />
       </Orientation>
       <div className={classNames['telephone-keypad__info-message']}>
-        <InfoSmallIcon />
+        <FluentIcon appearance="text" icon="info-16" />
         <LocalizedString
           linkClassName={classNames['telephone-keypad__info-message-link']}
           stringIds="TELEPHONE_KEYPAD_INPUT_MESSAGE"