@azure/communication-react 1.14.1-alpha-202403261958 → 1.14.1-alpha-202403270012

package/dist/dist-cjs/communication-react/{index-Ba2HAv_Y.js → index-BEomNZbT.js}

@@ -14,12 +14,12 @@ var textareaCaretTs = require('textarea-caret-ts');
 var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
+var react$1 = require('@griffel/react');
 var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
 var roosterjsEditorCore = require('roosterjs-editor-core');
 var roosterjsReact = require('roosterjs-react');
 var reactChat = require('@fluentui-contrib/react-chat');
 var uuid = require('uuid');
-var react$1 = require('@griffel/react');
 var parse = require('html-react-parser');
 var Linkify = require('react-linkify');
 var DOMPurify = require('dompurify');
@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.1-alpha-202403261958';
+var telemetryVersion = '1.14.1-alpha-202403270012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6354,8 +6354,9 @@ const sendButtonStyle = react.mergeStyles({
  */
 const sendIconStyle = (props) => {
     const { theme, hasText, disabled = false, 
-    /* @conditional-compile-remove(file-sharing) */ hasFile, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
-    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */ !hasFile;
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
+    const hasNoContent = !hasText &&
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasFile;
     return react.mergeStyles(editorTextBoxButtonStyle, {
         color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary
     }, customSendIconStyle);
@@ -6699,9 +6700,9 @@ const DEFAULT_COMPONENT_ICONS = {
     LowerHandContextualMenuItem: React.createElement(reactIcons.HandRightOff20Regular, null),
     /* @conditional-compile-remove(reaction) */
     ReactionButtonIcon: React.createElement(reactIcons.Emoji20Regular, null),
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     CancelFileUpload: React.createElement(reactIcons.Dismiss16Regular, null),
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     DownloadFile: React.createElement(reactIcons.ArrowDownload16Regular, null),
     /* @conditional-compile-remove(data-loss-prevention) */
     DataLossPreventionProhibited: React.createElement(DataLossPreventionProhibited16Regular, null),
@@ -8749,26 +8750,83 @@ const SendBoxErrors = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * Conditionally modify locale strings passed to the attachment card
  * @returns file upload card strings
  */
 const useLocaleAttachmentCardStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return useLocale$1().strings.sendBox;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const useAttachmentCardStyles = reactComponents.makeStyles({
+    root: {
+        width: '12rem',
+        minWidth: '75%'
+    }
+});
+/**
+ * @private
+ */
+const fileNameContainerClassName = react.mergeStyles({
+    marginTop: _pxToRem(5),
+    width: '5.75rem',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    span: {
+        whiteSpace: 'nowrap'
+    }
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
  * @internal
- * A component for displaying a attachment card with attachment icon and progress bar.
+ * A component for displaying an attachment card with attachment icon and progress bar.
+ *
+ * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).
  */
 const _AttachmentCard = (props) => {
     var _a, _b, _c, _d;
-    const { attachmentName, attachmentExtension, progress, actionIcon } = props;
-    const theme = react.useTheme();
+    const { attachmentName, attachmentExtension, progress, actionIcon, actionHandler } = props;
+    const attachmentCardStyles = useAttachmentCardStyles();
+    // default/placeholder before actual code implemented
+    const menuActions = React.useMemo(() => {
+        return [
+            {
+                name: actionIcon && (actionIcon === null || actionIcon === void 0 ? void 0 : actionIcon.props.ariaLabel),
+                icon: actionIcon !== null && actionIcon !== void 0 ? actionIcon : React.createElement(React.Fragment, null),
+                onClick: (attachment) => {
+                    if (attachment) {
+                        actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler();
+                    }
+                }
+            }
+        ];
+    }, [actionIcon, actionHandler]);
+    // placeholder before refactoring the props
+    const attachment = React.useMemo(() => {
+        return {
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            id: 'attachmentId',
+            extension: attachmentExtension,
+            name: attachmentName,
+            url: 'https://localhost' // placeholder not used
+        };
+    }, [attachmentExtension, attachmentName]);
+    // placeholder before refactoring the props
+    const onDownloadErrorMessage = React.useCallback((errorMessage) => {
+        console.log(errorMessage);
+    }, []);
+    const isUploadComplete = React.useMemo(() => {
+        return progress !== undefined && progress > 0 && progress < 1;
+    }, [progress]);
     const [announcerString, setAnnouncerString] = React.useState(undefined);
     const localeStrings = useLocaleAttachmentCardStringsTrampoline();
     const uploadStartedString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.uploading) !== null && _b !== void 0 ? _b : localeStrings.uploading;
@@ -8785,61 +8843,42 @@ const _AttachmentCard = (props) => {
             setAnnouncerString(undefined);
         }
     }, [progress, showProgressIndicator, attachmentName, uploadStartedString, uploadCompletedString]);
-    const progressBarThicknessPx = 4;
-    const containerClassName = react.mergeStyles({
-        width: '12rem',
-        background: theme.palette.neutralLighter,
-        borderRadius: theme.effects.roundedCorner4,
-        border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,
-        cursor: 'pointer'
-    });
-    const attachmentInfoWrapperClassName = react.mergeStyles({
-        padding: _pxToRem(12),
-        // To make space for the progress indicator.
-        paddingBottom: showProgressIndicator ? _pxToRem(12 - progressBarThicknessPx * 2) : _pxToRem(12)
-    });
-    const attachmentNameContainerClassName = react.mergeStyles({
-        paddingLeft: _pxToRem(4),
-        minWidth: '75%',
-        maxWidth: '75%'
-    });
-    const attachmentNameTextClassName = react.mergeStyles({
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        lineHeight: 'normal',
-        whiteSpace: 'nowrap',
-        paddingRight: _pxToRem(4)
-    });
-    const actionIconClassName = react.mergeStyles({
-        cursor: 'pointer'
-    });
-    const progressIndicatorStyles = {
-        itemProgress: {
-            padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding
-            // To make the progress indicator border curve along the bottom of attachment card.
-            borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`
-        },
-        progressBar: {
-            height: _pxToRem(progressBarThicknessPx)
-        }
-    };
     return (React.createElement("div", { "data-is-focusable": true },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(react.Stack, { className: containerClassName, onClick: () => {
-                var _a;
-                (_a = props.actionHandler) === null || _a === void 0 ? void 0 : _a.call(props);
-            } },
-            React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: attachmentInfoWrapperClassName },
-                React.createElement(react.Stack, null,
-                    React.createElement(react.Icon, { "data-ui-id": 'filetype-icon', iconName: reactFileTypeIcons.getFileTypeIconProps({
-                            extension: attachmentExtension,
-                            size: 24,
-                            imageFileType: 'svg'
-                        }).iconName })),
-                React.createElement(react.Stack, { className: attachmentNameContainerClassName },
-                    React.createElement(react.Text, { className: attachmentNameTextClassName }, attachmentName)),
-                React.createElement(react.Stack, { verticalAlign: "center", className: actionIconClassName }, actionIcon && actionIcon)),
-            showProgressIndicator && React.createElement(react.ProgressIndicator, { percentComplete: progress, styles: progressIndicatorStyles }))));
+        React.createElement(reactComponents.Card, { className: attachmentCardStyles.root, size: "small", role: "listitem" },
+            React.createElement(reactComponents.CardHeader, { image: React.createElement(react.Icon, { "data-ui-id": 'filetype-icon', iconName: reactFileTypeIcons.getFileTypeIconProps({
+                        extension: attachmentExtension,
+                        size: 24,
+                        imageFileType: 'svg'
+                    }).iconName }), header: React.createElement("div", { className: fileNameContainerClassName },
+                    React.createElement(reactComponents.Text, { title: attachmentName }, attachmentName)), action: getMenuItems(menuActions, attachment, onDownloadErrorMessage) })),
+        isUploadComplete ? (React.createElement(reactComponents.CardFooter, null,
+            React.createElement(reactComponents.ProgressBar, { thickness: "medium", value: progress, shape: "rounded" }))) : (React.createElement(React.Fragment, null, " "))));
+};
+const getMenuItems = (menuActions, attachment, handleOnClickError) => {
+    if (menuActions.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return menuActions.length === 1 ? (React.createElement(reactComponents.ToolbarButton, { "aria-label": menuActions[0].name, icon: menuActions[0].icon, onClick: () => {
+            try {
+                menuActions[0].onClick(attachment);
+            }
+            catch (e) {
+                handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
+            }
+        } })) : (React.createElement(reactComponents.Toolbar, null,
+        React.createElement(reactComponents.Menu, null,
+            React.createElement(reactComponents.MenuTrigger, null,
+                React.createElement(reactComponents.ToolbarButton, { "aria-label": "More", icon: React.createElement(reactIcons.MoreHorizontal24Filled, null) })),
+            React.createElement(reactComponents.MenuPopover, null,
+                React.createElement(reactComponents.MenuList, null, menuActions.map((menuItem, index) => (React.createElement(reactComponents.MenuItem, { key: index, icon: menuItem.icon, onClick: () => {
+                        try {
+                            menuItem.onClick(attachment);
+                        }
+                        catch (e) {
+                            handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
+                        }
+                    } }, menuItem.name))))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8876,42 +8915,19 @@ const _AttachmentCardGroup = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/**
- * @private
- */
-const iconButtonClassName = react.mergeStyles({
-    color: 'unset',
-    width: '1rem',
-    height: '1rem',
-    background: 'transparent',
-    ':hover': {
-        color: 'unset',
-        background: 'transparent'
-    }
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const actionIconStyle$1 = { height: '1rem' };
+const actionIconStyle = { height: '1rem' };
 /**
  * @internal
  */
 const _AttachmentUploadCards = (props) => {
-    var _a;
     const attachments = props.activeFileUploads;
-    const localeStrings = useLocaleAttachmentCardStringsTrampoline();
-    const removeAttachmentButtonString = React.useMemo(() => () => {
-        var _a, _b;
-        return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment;
-    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment, localeStrings.removeAttachment]);
     if (!attachments || attachments.length === 0) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(_AttachmentCardGroup, null, attachments &&
         attachments
             .filter((attachment) => !attachment.error)
-            .map((attachment) => (React.createElement(_AttachmentCard, { attachmentName: attachment.filename, progress: attachment.progress, key: attachment.id, attachmentExtension: extension(attachment.filename), actionIcon: React.createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: removeAttachmentButtonString() },
-                React.createElement(react.Icon, { iconName: "CancelFileUpload", style: actionIconStyle$1 })), actionHandler: () => {
+            .map((attachment) => (React.createElement(_AttachmentCard, { attachmentName: attachment.filename, progress: attachment.progress, key: attachment.id, attachmentExtension: extension(attachment.filename), actionIcon: React.createElement(react.Icon, { iconName: "CancelFileUpload", className: react.mergeStyles(actionIconStyle) }), actionHandler: () => {
                 props.onCancelFileUpload && props.onCancelFileUpload(attachment.id);
             }, strings: props.strings })))));
 };
@@ -8923,7 +8939,7 @@ const _AttachmentUploadCards = (props) => {
  */
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const EMPTY_MESSAGE_REGEX = /^\s*$/;
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -8933,7 +8949,7 @@ const hasIncompleteFileUploads = (activeFileUploads) => {
             .filter((attachmentUpload) => !attachmentUpload.error)
             .every((attachmentUpload) => attachmentUpload.uploadComplete));
 };
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -8958,6 +8974,363 @@ const sanitizeText = (message) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// These color records are required for createV9Theme
+// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
+/**
+ * @private
+ */
+const grey = {
+    '0': '#000000',
+    '2': '#050505',
+    '4': '#0a0a0a',
+    '6': '#0f0f0f',
+    '8': '#141414',
+    '10': '#1a1a1a',
+    '12': '#1f1f1f',
+    '14': '#242424',
+    '16': '#292929',
+    '18': '#2e2e2e',
+    '20': '#333333',
+    '22': '#383838',
+    '24': '#3d3d3d',
+    '26': '#424242',
+    '28': '#474747',
+    '30': '#4d4d4d',
+    '32': '#525252',
+    '34': '#575757',
+    '36': '#5c5c5c',
+    '38': '#616161',
+    '40': '#666666',
+    '42': '#6b6b6b',
+    '44': '#707070',
+    '46': '#757575',
+    '48': '#7a7a7a',
+    '50': '#808080',
+    '52': '#858585',
+    '54': '#8a8a8a',
+    '56': '#8f8f8f',
+    '58': '#949494',
+    '60': '#999999',
+    '62': '#9e9e9e',
+    '64': '#a3a3a3',
+    '66': '#a8a8a8',
+    '68': '#adadad',
+    '70': '#b3b3b3',
+    '72': '#b8b8b8',
+    '74': '#bdbdbd',
+    '76': '#c2c2c2',
+    '78': '#c7c7c7',
+    '80': '#cccccc',
+    '82': '#d1d1d1',
+    '84': '#d6d6d6',
+    '86': '#dbdbdb',
+    '88': '#e0e0e0',
+    '90': '#e6e6e6',
+    '92': '#ebebeb',
+    '94': '#f0f0f0',
+    '96': '#f5f5f5',
+    '98': '#fafafa',
+    '100': '#ffffff'
+};
+/**
+ * @private
+ */
+const whiteAlpha = {
+    '5': 'rgba(255, 255, 255, 0.05)',
+    '10': 'rgba(255, 255, 255, 0.1)',
+    '20': 'rgba(255, 255, 255, 0.2)',
+    '30': 'rgba(255, 255, 255, 0.3)',
+    '40': 'rgba(255, 255, 255, 0.4)',
+    '50': 'rgba(255, 255, 255, 0.5)',
+    '60': 'rgba(255, 255, 255, 0.6)',
+    '70': 'rgba(255, 255, 255, 0.7)',
+    '80': 'rgba(255, 255, 255, 0.8)',
+    '90': 'rgba(255, 255, 255, 0.9)'
+};
+/**
+ * @private
+ */
+const blackAlpha = {
+    '5': 'rgba(0, 0, 0, 0.05)',
+    '10': 'rgba(0, 0, 0, 0.1)',
+    '20': 'rgba(0, 0, 0, 0.2)',
+    '30': 'rgba(0, 0, 0, 0.3)',
+    '40': 'rgba(0, 0, 0, 0.4)',
+    '50': 'rgba(0, 0, 0, 0.5)',
+    '60': 'rgba(0, 0, 0, 0.6)',
+    '70': 'rgba(0, 0, 0, 0.7)',
+    '80': 'rgba(0, 0, 0, 0.8)',
+    '90': 'rgba(0, 0, 0, 0.9)'
+};
+/**
+ * @private
+ */
+const grey10Alpha = {
+    '5': 'rgba(26, 26, 26, 0.05)',
+    '10': 'rgba(26, 26, 26, 0.1)',
+    '20': 'rgba(26, 26, 26, 0.2)',
+    '30': 'rgba(26, 26, 26, 0.3)',
+    '40': 'rgba(26, 26, 26, 0.4)',
+    '50': 'rgba(26, 26, 26, 0.5)',
+    '60': 'rgba(26, 26, 26, 0.6)',
+    '70': 'rgba(26, 26, 26, 0.7)',
+    '80': 'rgba(26, 26, 26, 0.8)',
+    '90': 'rgba(26, 26, 26, 0.9)'
+};
+/**
+ * @private
+ */
+const grey12Alpha = {
+    '5': 'rgba(31, 31, 31, 0.05)',
+    '10': 'rgba(31, 31, 31, 0.1)',
+    '20': 'rgba(31, 31, 31, 0.2)',
+    '30': 'rgba(31, 31, 31, 0.3)',
+    '40': 'rgba(31, 31, 31, 0.4)',
+    '50': 'rgba(31, 31, 31, 0.5)',
+    '60': 'rgba(31, 31, 31, 0.6)',
+    '70': 'rgba(31, 31, 31, 0.7)',
+    '80': 'rgba(31, 31, 31, 0.8)',
+    '90': 'rgba(31, 31, 31, 0.9)'
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// These mappings are required for createV9Theme
+// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
+/**
+ * Creates v9 color tokens from a v8 palette.
+ */
+const mapAliasColors = (palette, inverted) => {
+    return {
+        colorNeutralForeground1: palette.neutralPrimary,
+        colorNeutralForeground1Hover: palette.neutralPrimary,
+        colorNeutralForeground1Pressed: palette.neutralPrimary,
+        colorNeutralForeground1Selected: palette.neutralPrimary,
+        colorNeutralForeground2: palette.neutralSecondary,
+        colorNeutralForeground2Hover: palette.neutralPrimary,
+        colorNeutralForeground2Pressed: palette.neutralPrimary,
+        colorNeutralForeground2Selected: palette.neutralPrimary,
+        colorNeutralForeground2BrandHover: palette.themePrimary,
+        colorNeutralForeground2BrandPressed: palette.themeDarkAlt,
+        colorNeutralForeground2BrandSelected: palette.themePrimary,
+        colorNeutralForeground3: palette.neutralTertiary,
+        colorNeutralForeground3Hover: palette.neutralSecondary,
+        colorNeutralForeground3Pressed: palette.neutralSecondary,
+        colorNeutralForeground3Selected: palette.neutralSecondary,
+        colorNeutralForeground3BrandHover: palette.themePrimary,
+        colorNeutralForeground3BrandPressed: palette.themeDarkAlt,
+        colorNeutralForeground3BrandSelected: palette.themePrimary,
+        colorNeutralForeground4: palette.neutralQuaternary,
+        colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,
+        colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
+        colorBrandForegroundLink: palette.themeDarkAlt,
+        colorBrandForegroundLinkHover: palette.themeDark,
+        colorBrandForegroundLinkPressed: palette.themeDarker,
+        colorBrandForegroundLinkSelected: palette.themeDarkAlt,
+        colorNeutralForeground2Link: palette.neutralSecondary,
+        colorNeutralForeground2LinkHover: palette.neutralPrimary,
+        colorNeutralForeground2LinkPressed: palette.neutralPrimary,
+        colorNeutralForeground2LinkSelected: palette.neutralPrimary,
+        colorCompoundBrandForeground1: palette.themePrimary,
+        colorCompoundBrandForeground1Hover: palette.themeDarkAlt,
+        colorCompoundBrandForeground1Pressed: palette.themeDark,
+        colorBrandForeground1: palette.themePrimary,
+        colorBrandForeground2: palette.themeDarkAlt,
+        colorBrandForeground2Hover: palette.themeDarkAlt,
+        colorBrandForeground2Pressed: palette.themeDarkAlt,
+        colorNeutralForeground1Static: palette.neutralPrimary,
+        colorNeutralForegroundInverted: palette.white,
+        colorNeutralForegroundInvertedHover: palette.white,
+        colorNeutralForegroundInvertedPressed: palette.white,
+        colorNeutralForegroundInvertedSelected: palette.white,
+        colorNeutralForegroundOnBrand: palette.white,
+        colorNeutralForegroundStaticInverted: palette.white,
+        colorNeutralForegroundInvertedLink: palette.white,
+        colorNeutralForegroundInvertedLinkHover: palette.white,
+        colorNeutralForegroundInvertedLinkPressed: palette.white,
+        colorNeutralForegroundInvertedLinkSelected: palette.white,
+        colorNeutralForegroundInverted2: palette.white,
+        colorBrandForegroundInverted: palette.themeSecondary,
+        colorBrandForegroundInvertedHover: palette.themeTertiary,
+        colorBrandForegroundInvertedPressed: palette.themeSecondary,
+        colorBrandForegroundOnLight: palette.themePrimary,
+        colorBrandForegroundOnLightHover: palette.themeDarkAlt,
+        colorBrandForegroundOnLightPressed: palette.themeDark,
+        colorBrandForegroundOnLightSelected: palette.themeDark,
+        colorNeutralBackground1: palette.white,
+        colorNeutralBackground1Hover: palette.neutralLighter,
+        colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,
+        colorNeutralBackground1Selected: palette.neutralLight,
+        colorNeutralBackground2: palette.neutralLighterAlt,
+        colorNeutralBackground2Hover: palette.neutralLighter,
+        colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,
+        colorNeutralBackground2Selected: palette.neutralLight,
+        colorNeutralBackground3: palette.neutralLighter,
+        colorNeutralBackground3Hover: palette.neutralLight,
+        colorNeutralBackground3Pressed: palette.neutralQuaternary,
+        colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,
+        colorNeutralBackground4: palette.neutralLighter,
+        colorNeutralBackground4Hover: palette.neutralLighterAlt,
+        colorNeutralBackground4Pressed: palette.neutralLighter,
+        colorNeutralBackground4Selected: palette.white,
+        colorNeutralBackground5: palette.neutralLight,
+        colorNeutralBackground5Hover: palette.neutralLighter,
+        colorNeutralBackground5Pressed: palette.neutralLighter,
+        colorNeutralBackground5Selected: palette.neutralLighterAlt,
+        colorNeutralBackground6: palette.neutralLight,
+        colorNeutralBackgroundStatic: grey[20],
+        colorNeutralBackgroundInverted: palette.neutralSecondary,
+        colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50],
+        colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80],
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: palette.neutralLighter,
+        colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,
+        colorSubtleBackgroundSelected: palette.neutralLight,
+        colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
+        colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
+        colorSubtleBackgroundLightAlphaSelected: 'transparent',
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: blackAlpha[10],
+        colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+        colorSubtleBackgroundInvertedSelected: blackAlpha[20],
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: 'transparent',
+        colorTransparentBackgroundPressed: 'transparent',
+        colorTransparentBackgroundSelected: 'transparent',
+        colorNeutralBackgroundDisabled: palette.neutralLighter,
+        colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
+        colorNeutralStencil1: palette.neutralLight,
+        colorNeutralStencil2: palette.neutralLighterAlt,
+        colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10],
+        colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5],
+        colorBackgroundOverlay: blackAlpha[40],
+        colorScrollbarOverlay: blackAlpha[50],
+        colorBrandBackground: palette.themePrimary,
+        colorBrandBackgroundHover: palette.themeDarkAlt,
+        colorBrandBackgroundPressed: palette.themeDarker,
+        colorBrandBackgroundSelected: palette.themeDark,
+        colorCompoundBrandBackground: palette.themePrimary,
+        colorCompoundBrandBackgroundHover: palette.themeDarkAlt,
+        colorCompoundBrandBackgroundPressed: palette.themeDark,
+        colorBrandBackgroundStatic: palette.themePrimary,
+        colorBrandBackground2: palette.themeLighterAlt,
+        colorBrandBackground2Hover: palette.themeLighterAlt,
+        colorBrandBackground2Pressed: palette.themeLighterAlt,
+        colorBrandBackground3Static: palette.themeDark,
+        colorBrandBackground4Static: palette.themeDarker,
+        colorBrandBackgroundInverted: palette.white,
+        colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
+        colorBrandBackgroundInvertedPressed: palette.themeLight,
+        colorBrandBackgroundInvertedSelected: palette.themeLighter,
+        colorNeutralCardBackground: inverted ? grey[20] : grey[98],
+        colorNeutralCardBackgroundHover: inverted ? grey[24] : palette.white,
+        colorNeutralCardBackgroundPressed: inverted ? grey[18] : grey[96],
+        colorNeutralCardBackgroundSelected: inverted ? grey[22] : grey[92],
+        colorNeutralCardBackgroundDisabled: inverted ? grey[8] : grey[94],
+        colorNeutralStrokeAccessible: palette.neutralSecondary,
+        colorNeutralStrokeAccessibleHover: palette.neutralSecondary,
+        colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,
+        colorNeutralStrokeAccessibleSelected: palette.themePrimary,
+        colorNeutralStroke1: palette.neutralQuaternary,
+        colorNeutralStroke1Hover: palette.neutralTertiaryAlt,
+        colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,
+        colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
+        colorNeutralStroke2: palette.neutralQuaternaryAlt,
+        colorNeutralStroke3: palette.neutralLighter,
+        colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
+        colorNeutralStrokeOnBrand: palette.white,
+        colorNeutralStrokeOnBrand2: palette.white,
+        colorNeutralStrokeOnBrand2Hover: palette.white,
+        colorNeutralStrokeOnBrand2Pressed: palette.white,
+        colorNeutralStrokeOnBrand2Selected: palette.white,
+        colorBrandStroke1: palette.themePrimary,
+        colorBrandStroke2: palette.themeLight,
+        colorBrandStroke2Hover: palette.themeLight,
+        colorBrandStroke2Pressed: palette.themeLight,
+        colorBrandStroke2Contrast: palette.themeLight,
+        colorCompoundBrandStroke: palette.themePrimary,
+        colorCompoundBrandStrokeHover: palette.themeDarkAlt,
+        colorCompoundBrandStrokePressed: palette.themeDark,
+        colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,
+        colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
+        colorTransparentStroke: 'transparent',
+        colorTransparentStrokeInteractive: 'transparent',
+        colorTransparentStrokeDisabled: 'transparent',
+        colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5],
+        colorNeutralStrokeAlpha2: whiteAlpha[20],
+        colorStrokeFocus1: palette.white,
+        colorStrokeFocus2: palette.black,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    };
+};
+/**
+ * Creates v9 shadow tokens from v8 effects.
+ */
+const mapShadowTokens = (effects) => {
+    return {
+        shadow4: effects.elevation4,
+        shadow8: effects.elevation8,
+        shadow16: effects.elevation16,
+        shadow64: effects.elevation64
+    };
+};
+/**
+ * Creates v9 border radius tokens from v8 effects
+ */
+const mapBorderRadiusTokens = (effects) => {
+    return {
+        borderRadiusSmall: effects.roundedCorner2,
+        borderRadiusMedium: effects.roundedCorner4,
+        borderRadiusLarge: effects.roundedCorner6
+    };
+};
+/**
+ * Creates a v9 theme from a v8 theme and base v9 theme.
+ * FluentUI webLightTheme is used in case if no baseThemeV9 is provided.
+ *
+ * @private
+ */
+const createV9Theme = (themeV8, baseThemeV9) => {
+    const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, colorNeutralBackground1Selected: themeV8.palette.neutralQuaternaryAlt, 
+        // Fix for an issue with black borders for iOS that are added with 'after' selector
+        colorStrokeFocus2: 'transparent' });
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const useFluentV9Wrapper = reactComponents.makeStyles({
+    body: Object.assign(Object.assign(Object.assign(Object.assign({ height: '100%' }, reactComponents.shorthands.margin(0)), reactComponents.shorthands.overflow('hidden')), reactComponents.shorthands.padding(0)), { width: '100%' })
+});
+/**
+ * @private
+ */
+const FluentV9ThemeProvider = (props) => {
+    const { v8Theme, children } = props;
+    const v9Theme = createV9Theme(v8Theme);
+    const dir = v8Theme.rtl ? 'rtl' : 'ltr';
+    return (
+    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
+    React.createElement(react$1.TextDirectionProvider, { dir: dir },
+        React.createElement(FluentProviderWithStylesOverrides, { theme: v9Theme, dir: dir }, children)));
+};
+const FluentProviderWithStylesOverrides = (props) => {
+    const classes = useFluentV9Wrapper();
+    return React.createElement(reactComponents.FluentProvider, Object.assign({}, props, { className: classes.body, applyStylesToPortals: false }));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -8972,7 +9345,7 @@ const SendBox$1 = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
     /* @conditional-compile-remove(mention) */
     mentionLookupOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     activeFileUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
@@ -8981,7 +9354,7 @@ const SendBox$1 = (props) => {
     const [textValue, setTextValue] = React.useState('');
     const [textValueOverflow, setTextValueOverflow] = React.useState(false);
     const sendTextFieldRef = React.useRef(null);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = React.useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -8990,9 +9363,9 @@ const SendBox$1 = (props) => {
             return;
         }
         // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteFileUploads(activeFileUploads)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -9001,7 +9374,7 @@ const SendBox$1 = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(activeFileUploads)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
         }
@@ -9021,25 +9394,25 @@ const SendBox$1 = (props) => {
     const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
         theme,
         hasText: !!textValue,
-        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile: hasCompletedFileUploads(activeFileUploads),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [
         theme,
         textValue,
-        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,
         errorMessage,
         styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     ]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no files in sendBox
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     React.useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setAttachmentUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
@@ -9047,22 +9420,30 @@ const SendBox$1 = (props) => {
             attachmentUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
     }, [activeFileUploads, attachmentUploadsPendingError]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileUploads = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             return null;
         }
         return props.onRenderFileUploads ? (props.onRenderFileUploads()) : (React.createElement(react.Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, strings: {
-                    removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
-                    uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
-                    uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
-                } })));
-    }, [activeFileUploads, props, localeStrings]);
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, strings: {
+                        removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
+                        uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
+                        uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
+                    } }))));
+    }, [
+        activeFileUploads,
+        props,
+        theme,
+        localeStrings.removeAttachment,
+        localeStrings.uploading,
+        localeStrings.uploadCompleted
+    ]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) }, /* @conditional-compile-remove(file-sharing) */
-        React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        ) },
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(react.Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -9084,7 +9465,7 @@ const SendBox$1 = (props) => {
                         }
                         e.stopPropagation();
                     }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             onRenderFileUploads())));
 };
 
@@ -9662,9 +10043,9 @@ const richTextBorderBoxStyle = (props) => {
  */
 const RichTextInputBoxComponent = (props) => {
     const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileUploads, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     hasFiles, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = React.useState(false);
@@ -9703,11 +10084,11 @@ const RichTextInputBoxComponent = (props) => {
     const useHorizontalLayout = React.useMemo(() => {
         return (!isHorizontalLayoutDisabled &&
             !showRichTextEditorFormatting &&
-            /* @conditional-compile-remove(file-sharing) */ !hasFiles);
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasFiles);
     }, [
         isHorizontalLayoutDisabled,
         showRichTextEditorFormatting,
-        /* @conditional-compile-remove(file-sharing) */ hasFiles
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFiles
     ]);
     return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
@@ -9716,8 +10097,9 @@ const RichTextInputBoxComponent = (props) => {
         React.createElement(react.Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
             React.createElement(react.Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(react.Stack.Item, { className: inputBoxRichTextStackItemStyle },
-                    React.createElement(RichTextEditor, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })), /* @conditional-compile-remove(file-sharing) */
-                onRenderFileUploads && onRenderFileUploads()),
+                    React.createElement(RichTextEditor, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })),
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileUploads &&
+                    onRenderFileUploads()),
             actionButtons)));
 };
 
@@ -9728,9 +10110,9 @@ const RichTextInputBoxComponent = (props) => {
  */
 const RichTextSendBoxErrors = (props) => {
     const { 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     attachmentUploadError, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
     const [sendBoxError, setSendBoxError] = React.useState(undefined);
     React.useEffect(() => {
@@ -9755,11 +10137,11 @@ const RichTextSendBoxErrors = (props) => {
             if (prev) {
                 errors.push(prev);
             }
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadsPendingError) {
                 errors.push(attachmentUploadsPendingError);
             }
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadError) {
                 errors.push(attachmentUploadError);
             }
@@ -9771,8 +10153,8 @@ const RichTextSendBoxErrors = (props) => {
             return sortedErrors[0];
         });
     }, [
-        /* @conditional-compile-remove(file-sharing) */ attachmentUploadError,
-        /* @conditional-compile-remove(file-sharing) */ attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
     ]);
     const onDismiss = React.useCallback(() => {
         if (systemMessage && !isMessageEmpty$1(systemMessage)) {
@@ -9796,9 +10178,9 @@ const isMessageEmpty$1 = (message) => {
  */
 const RichTextSendBox = (props) => {
     const { disabled = false, systemMessage, onSendMessage, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     activeFileUploads, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onCancelFileUpload } = props;
     const theme = useTheme();
     const locale = useLocale$1();
@@ -9811,7 +10193,7 @@ const RichTextSendBox = (props) => {
     }, [localeStrings, props.strings]);
     const [contentValue, setContentValue] = React.useState('');
     const [contentValueOverflow, setContentValueOverflow] = React.useState(false);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setFileUploadsPendingError] = React.useState(undefined);
     const editorComponentRef = React.useRef(null);
     const contentTooLongMessage = React.useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
@@ -9828,9 +10210,9 @@ const RichTextSendBox = (props) => {
             return;
         }
         // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         setFileUploadsPendingError(undefined);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteFileUploads(activeFileUploads)) {
             setFileUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -9839,7 +10221,7 @@ const RichTextSendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(activeFileUploads)) {
             onSendMessage(message);
             setContentValue('');
             (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
@@ -9850,29 +10232,29 @@ const RichTextSendBox = (props) => {
         contentValueOverflow,
         disabled,
         onSendMessage,
-        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
-        /* @conditional-compile-remove(file-sharing) */ strings.attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
     ]);
     const hasErrorMessage = React.useMemo(() => {
         var _a;
         return (!!systemMessage ||
             !!contentTooLongMessage ||
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             !!attachmentUploadsPendingError ||
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             !!((_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
     }, [
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         activeFileUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
     const onRenderSendIcon = React.useCallback((isHover) => (React.createElement(react.Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
             theme,
             hasText: !!contentValue,
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             hasFile: false,
             hasErrorMessage: hasErrorMessage,
             defaultTextColor: theme.palette.neutralSecondary,
@@ -9881,22 +10263,22 @@ const RichTextSendBox = (props) => {
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             attachmentUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error,
             systemMessage: systemMessage,
             textTooLongMessage: contentTooLongMessage
         };
     }, [
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         activeFileUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileUploads = React.useCallback(() => {
         return (React.createElement(react.Stack, { className: attachmentUploadCardsStyles },
             React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: onCancelFileUpload, strings: {
@@ -9911,16 +10293,16 @@ const RichTextSendBox = (props) => {
                 e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
             }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }));
     }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const hasFileUploads = React.useMemo(() => {
         return hasCompletedFileUploads(activeFileUploads) || hasIncompleteFileUploads(activeFileUploads);
     }, [activeFileUploads]);
     return (React.createElement(react.Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             onRenderFileUploads: onRenderFileUploads, 
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             hasFiles: hasFileUploads })));
 };
 
@@ -10410,23 +10792,24 @@ const onRenderSubmitIcon = (className) => {
     return React.createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
 };
 function isMessageEmpty(messageText, 
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 attachmentMetadata) {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return messageText.trim().length === 0 && (attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.length) === 0;
 }
 /**
  * @private
  */
 function getMessageState(messageText, 
-/* @conditional-compile-remove(file-sharing) */ attachmentMetadata) {
-    return isMessageEmpty(messageText, /* @conditional-compile-remove(file-sharing) */ attachmentMetadata)
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata) {
+    return isMessageEmpty(messageText, 
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata)
         ? 'too short'
         : isMessageTooLong(messageText.length)
             ? 'too long'
             : 'OK';
 }
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  * @TODO: Remove when file-sharing feature becomes stable.
@@ -10677,363 +11060,6 @@ var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
         .map(([id, readReceipt]) => ({ id, displayName: readReceipt.displayName })));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-// These color records are required for createV9Theme
-// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
-/**
- * @private
- */
-const grey = {
-    '0': '#000000',
-    '2': '#050505',
-    '4': '#0a0a0a',
-    '6': '#0f0f0f',
-    '8': '#141414',
-    '10': '#1a1a1a',
-    '12': '#1f1f1f',
-    '14': '#242424',
-    '16': '#292929',
-    '18': '#2e2e2e',
-    '20': '#333333',
-    '22': '#383838',
-    '24': '#3d3d3d',
-    '26': '#424242',
-    '28': '#474747',
-    '30': '#4d4d4d',
-    '32': '#525252',
-    '34': '#575757',
-    '36': '#5c5c5c',
-    '38': '#616161',
-    '40': '#666666',
-    '42': '#6b6b6b',
-    '44': '#707070',
-    '46': '#757575',
-    '48': '#7a7a7a',
-    '50': '#808080',
-    '52': '#858585',
-    '54': '#8a8a8a',
-    '56': '#8f8f8f',
-    '58': '#949494',
-    '60': '#999999',
-    '62': '#9e9e9e',
-    '64': '#a3a3a3',
-    '66': '#a8a8a8',
-    '68': '#adadad',
-    '70': '#b3b3b3',
-    '72': '#b8b8b8',
-    '74': '#bdbdbd',
-    '76': '#c2c2c2',
-    '78': '#c7c7c7',
-    '80': '#cccccc',
-    '82': '#d1d1d1',
-    '84': '#d6d6d6',
-    '86': '#dbdbdb',
-    '88': '#e0e0e0',
-    '90': '#e6e6e6',
-    '92': '#ebebeb',
-    '94': '#f0f0f0',
-    '96': '#f5f5f5',
-    '98': '#fafafa',
-    '100': '#ffffff'
-};
-/**
- * @private
- */
-const whiteAlpha = {
-    '5': 'rgba(255, 255, 255, 0.05)',
-    '10': 'rgba(255, 255, 255, 0.1)',
-    '20': 'rgba(255, 255, 255, 0.2)',
-    '30': 'rgba(255, 255, 255, 0.3)',
-    '40': 'rgba(255, 255, 255, 0.4)',
-    '50': 'rgba(255, 255, 255, 0.5)',
-    '60': 'rgba(255, 255, 255, 0.6)',
-    '70': 'rgba(255, 255, 255, 0.7)',
-    '80': 'rgba(255, 255, 255, 0.8)',
-    '90': 'rgba(255, 255, 255, 0.9)'
-};
-/**
- * @private
- */
-const blackAlpha = {
-    '5': 'rgba(0, 0, 0, 0.05)',
-    '10': 'rgba(0, 0, 0, 0.1)',
-    '20': 'rgba(0, 0, 0, 0.2)',
-    '30': 'rgba(0, 0, 0, 0.3)',
-    '40': 'rgba(0, 0, 0, 0.4)',
-    '50': 'rgba(0, 0, 0, 0.5)',
-    '60': 'rgba(0, 0, 0, 0.6)',
-    '70': 'rgba(0, 0, 0, 0.7)',
-    '80': 'rgba(0, 0, 0, 0.8)',
-    '90': 'rgba(0, 0, 0, 0.9)'
-};
-/**
- * @private
- */
-const grey10Alpha = {
-    '5': 'rgba(26, 26, 26, 0.05)',
-    '10': 'rgba(26, 26, 26, 0.1)',
-    '20': 'rgba(26, 26, 26, 0.2)',
-    '30': 'rgba(26, 26, 26, 0.3)',
-    '40': 'rgba(26, 26, 26, 0.4)',
-    '50': 'rgba(26, 26, 26, 0.5)',
-    '60': 'rgba(26, 26, 26, 0.6)',
-    '70': 'rgba(26, 26, 26, 0.7)',
-    '80': 'rgba(26, 26, 26, 0.8)',
-    '90': 'rgba(26, 26, 26, 0.9)'
-};
-/**
- * @private
- */
-const grey12Alpha = {
-    '5': 'rgba(31, 31, 31, 0.05)',
-    '10': 'rgba(31, 31, 31, 0.1)',
-    '20': 'rgba(31, 31, 31, 0.2)',
-    '30': 'rgba(31, 31, 31, 0.3)',
-    '40': 'rgba(31, 31, 31, 0.4)',
-    '50': 'rgba(31, 31, 31, 0.5)',
-    '60': 'rgba(31, 31, 31, 0.6)',
-    '70': 'rgba(31, 31, 31, 0.7)',
-    '80': 'rgba(31, 31, 31, 0.8)',
-    '90': 'rgba(31, 31, 31, 0.9)'
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-// These mappings are required for createV9Theme
-// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
-/**
- * Creates v9 color tokens from a v8 palette.
- */
-const mapAliasColors = (palette, inverted) => {
-    return {
-        colorNeutralForeground1: palette.neutralPrimary,
-        colorNeutralForeground1Hover: palette.neutralPrimary,
-        colorNeutralForeground1Pressed: palette.neutralPrimary,
-        colorNeutralForeground1Selected: palette.neutralPrimary,
-        colorNeutralForeground2: palette.neutralSecondary,
-        colorNeutralForeground2Hover: palette.neutralPrimary,
-        colorNeutralForeground2Pressed: palette.neutralPrimary,
-        colorNeutralForeground2Selected: palette.neutralPrimary,
-        colorNeutralForeground2BrandHover: palette.themePrimary,
-        colorNeutralForeground2BrandPressed: palette.themeDarkAlt,
-        colorNeutralForeground2BrandSelected: palette.themePrimary,
-        colorNeutralForeground3: palette.neutralTertiary,
-        colorNeutralForeground3Hover: palette.neutralSecondary,
-        colorNeutralForeground3Pressed: palette.neutralSecondary,
-        colorNeutralForeground3Selected: palette.neutralSecondary,
-        colorNeutralForeground3BrandHover: palette.themePrimary,
-        colorNeutralForeground3BrandPressed: palette.themeDarkAlt,
-        colorNeutralForeground3BrandSelected: palette.themePrimary,
-        colorNeutralForeground4: palette.neutralQuaternary,
-        colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,
-        colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
-        colorBrandForegroundLink: palette.themeDarkAlt,
-        colorBrandForegroundLinkHover: palette.themeDark,
-        colorBrandForegroundLinkPressed: palette.themeDarker,
-        colorBrandForegroundLinkSelected: palette.themeDarkAlt,
-        colorNeutralForeground2Link: palette.neutralSecondary,
-        colorNeutralForeground2LinkHover: palette.neutralPrimary,
-        colorNeutralForeground2LinkPressed: palette.neutralPrimary,
-        colorNeutralForeground2LinkSelected: palette.neutralPrimary,
-        colorCompoundBrandForeground1: palette.themePrimary,
-        colorCompoundBrandForeground1Hover: palette.themeDarkAlt,
-        colorCompoundBrandForeground1Pressed: palette.themeDark,
-        colorBrandForeground1: palette.themePrimary,
-        colorBrandForeground2: palette.themeDarkAlt,
-        colorBrandForeground2Hover: palette.themeDarkAlt,
-        colorBrandForeground2Pressed: palette.themeDarkAlt,
-        colorNeutralForeground1Static: palette.neutralPrimary,
-        colorNeutralForegroundInverted: palette.white,
-        colorNeutralForegroundInvertedHover: palette.white,
-        colorNeutralForegroundInvertedPressed: palette.white,
-        colorNeutralForegroundInvertedSelected: palette.white,
-        colorNeutralForegroundOnBrand: palette.white,
-        colorNeutralForegroundStaticInverted: palette.white,
-        colorNeutralForegroundInvertedLink: palette.white,
-        colorNeutralForegroundInvertedLinkHover: palette.white,
-        colorNeutralForegroundInvertedLinkPressed: palette.white,
-        colorNeutralForegroundInvertedLinkSelected: palette.white,
-        colorNeutralForegroundInverted2: palette.white,
-        colorBrandForegroundInverted: palette.themeSecondary,
-        colorBrandForegroundInvertedHover: palette.themeTertiary,
-        colorBrandForegroundInvertedPressed: palette.themeSecondary,
-        colorBrandForegroundOnLight: palette.themePrimary,
-        colorBrandForegroundOnLightHover: palette.themeDarkAlt,
-        colorBrandForegroundOnLightPressed: palette.themeDark,
-        colorBrandForegroundOnLightSelected: palette.themeDark,
-        colorNeutralBackground1: palette.white,
-        colorNeutralBackground1Hover: palette.neutralLighter,
-        colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,
-        colorNeutralBackground1Selected: palette.neutralLight,
-        colorNeutralBackground2: palette.neutralLighterAlt,
-        colorNeutralBackground2Hover: palette.neutralLighter,
-        colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,
-        colorNeutralBackground2Selected: palette.neutralLight,
-        colorNeutralBackground3: palette.neutralLighter,
-        colorNeutralBackground3Hover: palette.neutralLight,
-        colorNeutralBackground3Pressed: palette.neutralQuaternary,
-        colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,
-        colorNeutralBackground4: palette.neutralLighter,
-        colorNeutralBackground4Hover: palette.neutralLighterAlt,
-        colorNeutralBackground4Pressed: palette.neutralLighter,
-        colorNeutralBackground4Selected: palette.white,
-        colorNeutralBackground5: palette.neutralLight,
-        colorNeutralBackground5Hover: palette.neutralLighter,
-        colorNeutralBackground5Pressed: palette.neutralLighter,
-        colorNeutralBackground5Selected: palette.neutralLighterAlt,
-        colorNeutralBackground6: palette.neutralLight,
-        colorNeutralBackgroundStatic: grey[20],
-        colorNeutralBackgroundInverted: palette.neutralSecondary,
-        colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50],
-        colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80],
-        colorSubtleBackground: 'transparent',
-        colorSubtleBackgroundHover: palette.neutralLighter,
-        colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,
-        colorSubtleBackgroundSelected: palette.neutralLight,
-        colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
-        colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
-        colorSubtleBackgroundLightAlphaSelected: 'transparent',
-        colorSubtleBackgroundInverted: 'transparent',
-        colorSubtleBackgroundInvertedHover: blackAlpha[10],
-        colorSubtleBackgroundInvertedPressed: blackAlpha[30],
-        colorSubtleBackgroundInvertedSelected: blackAlpha[20],
-        colorTransparentBackground: 'transparent',
-        colorTransparentBackgroundHover: 'transparent',
-        colorTransparentBackgroundPressed: 'transparent',
-        colorTransparentBackgroundSelected: 'transparent',
-        colorNeutralBackgroundDisabled: palette.neutralLighter,
-        colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
-        colorNeutralStencil1: palette.neutralLight,
-        colorNeutralStencil2: palette.neutralLighterAlt,
-        colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10],
-        colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5],
-        colorBackgroundOverlay: blackAlpha[40],
-        colorScrollbarOverlay: blackAlpha[50],
-        colorBrandBackground: palette.themePrimary,
-        colorBrandBackgroundHover: palette.themeDarkAlt,
-        colorBrandBackgroundPressed: palette.themeDarker,
-        colorBrandBackgroundSelected: palette.themeDark,
-        colorCompoundBrandBackground: palette.themePrimary,
-        colorCompoundBrandBackgroundHover: palette.themeDarkAlt,
-        colorCompoundBrandBackgroundPressed: palette.themeDark,
-        colorBrandBackgroundStatic: palette.themePrimary,
-        colorBrandBackground2: palette.themeLighterAlt,
-        colorBrandBackground2Hover: palette.themeLighterAlt,
-        colorBrandBackground2Pressed: palette.themeLighterAlt,
-        colorBrandBackground3Static: palette.themeDark,
-        colorBrandBackground4Static: palette.themeDarker,
-        colorBrandBackgroundInverted: palette.white,
-        colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
-        colorBrandBackgroundInvertedPressed: palette.themeLight,
-        colorBrandBackgroundInvertedSelected: palette.themeLighter,
-        colorNeutralCardBackground: inverted ? grey[20] : grey[98],
-        colorNeutralCardBackgroundHover: inverted ? grey[24] : palette.white,
-        colorNeutralCardBackgroundPressed: inverted ? grey[18] : grey[96],
-        colorNeutralCardBackgroundSelected: inverted ? grey[22] : grey[92],
-        colorNeutralCardBackgroundDisabled: inverted ? grey[8] : grey[94],
-        colorNeutralStrokeAccessible: palette.neutralSecondary,
-        colorNeutralStrokeAccessibleHover: palette.neutralSecondary,
-        colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,
-        colorNeutralStrokeAccessibleSelected: palette.themePrimary,
-        colorNeutralStroke1: palette.neutralQuaternary,
-        colorNeutralStroke1Hover: palette.neutralTertiaryAlt,
-        colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,
-        colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
-        colorNeutralStroke2: palette.neutralQuaternaryAlt,
-        colorNeutralStroke3: palette.neutralLighter,
-        colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
-        colorNeutralStrokeOnBrand: palette.white,
-        colorNeutralStrokeOnBrand2: palette.white,
-        colorNeutralStrokeOnBrand2Hover: palette.white,
-        colorNeutralStrokeOnBrand2Pressed: palette.white,
-        colorNeutralStrokeOnBrand2Selected: palette.white,
-        colorBrandStroke1: palette.themePrimary,
-        colorBrandStroke2: palette.themeLight,
-        colorBrandStroke2Hover: palette.themeLight,
-        colorBrandStroke2Pressed: palette.themeLight,
-        colorBrandStroke2Contrast: palette.themeLight,
-        colorCompoundBrandStroke: palette.themePrimary,
-        colorCompoundBrandStrokeHover: palette.themeDarkAlt,
-        colorCompoundBrandStrokePressed: palette.themeDark,
-        colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,
-        colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
-        colorTransparentStroke: 'transparent',
-        colorTransparentStrokeInteractive: 'transparent',
-        colorTransparentStrokeDisabled: 'transparent',
-        colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5],
-        colorNeutralStrokeAlpha2: whiteAlpha[20],
-        colorStrokeFocus1: palette.white,
-        colorStrokeFocus2: palette.black,
-        colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
-        colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
-        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
-        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
-        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
-        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
-        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
-    };
-};
-/**
- * Creates v9 shadow tokens from v8 effects.
- */
-const mapShadowTokens = (effects) => {
-    return {
-        shadow4: effects.elevation4,
-        shadow8: effects.elevation8,
-        shadow16: effects.elevation16,
-        shadow64: effects.elevation64
-    };
-};
-/**
- * Creates v9 border radius tokens from v8 effects
- */
-const mapBorderRadiusTokens = (effects) => {
-    return {
-        borderRadiusSmall: effects.roundedCorner2,
-        borderRadiusMedium: effects.roundedCorner4,
-        borderRadiusLarge: effects.roundedCorner6
-    };
-};
-/**
- * Creates a v9 theme from a v8 theme and base v9 theme.
- * FluentUI webLightTheme is used in case if no baseThemeV9 is provided.
- *
- * @private
- */
-const createV9Theme = (themeV8, baseThemeV9) => {
-    const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, colorNeutralBackground1Selected: themeV8.palette.neutralQuaternaryAlt, 
-        // Fix for an issue with black borders for iOS that are added with 'after' selector
-        colorStrokeFocus2: 'transparent' });
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const useFluentV9Wrapper = reactComponents.makeStyles({
-    body: Object.assign(Object.assign(Object.assign(Object.assign({ height: '100%' }, reactComponents.shorthands.margin(0)), reactComponents.shorthands.overflow('hidden')), reactComponents.shorthands.padding(0)), { width: '100%' })
-});
-/**
- * @private
- */
-const FluentV9ThemeProvider = (props) => {
-    const { v8Theme, children } = props;
-    const v9Theme = createV9Theme(v8Theme);
-    const dir = v8Theme.rtl ? 'rtl' : 'ltr';
-    return (
-    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
-    React.createElement(react$1.TextDirectionProvider, { dir: dir },
-        React.createElement(FluentProviderWithStylesOverrides, { theme: v9Theme, dir: dir }, children)));
-};
-const FluentProviderWithStylesOverrides = (props) => {
-    const classes = useFluentV9Wrapper();
-    return React.createElement(reactComponents.FluentProvider, Object.assign({}, props, { className: classes.body }));
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/MessageBlock.js
@@ -11218,12 +11244,12 @@ const ChatMessageComponentAsEditBox = (props) => {
     /* @conditional-compile-remove(mention) */
     const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = React.useState(message.content || '');
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const [attachmentMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React.useRef(null);
     const theme = useTheme();
     const messageState = getMessageState(textValue, 
-    /* @conditional-compile-remove(file-sharing) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
     const submitEnabled = messageState === 'OK';
     const editContainerStyles = useChatMessageEditContainerStyles();
     const chatMyMessageStyles = useChatMyMessageStyles();
@@ -11250,7 +11276,7 @@ const ChatMessageComponentAsEditBox = (props) => {
     const editBoxStyles = React.useMemo(() => {
         return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileUploads = React.useCallback(() => {
         return (!!attachmentMetadata &&
             attachmentMetadata.length > 0 && (React.createElement("div", { style: { margin: '0.25rem' } },
@@ -11271,7 +11297,7 @@ const ChatMessageComponentAsEditBox = (props) => {
                 }, onEnterKeyDown: () => {
                     submitEnabled &&
                         onSubmit(textValue, message.metadata, 
-                        /* @conditional-compile-remove(file-sharing) */ {
+                        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {
                             attachmentMetadata
                         });
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
@@ -11288,12 +11314,12 @@ const ChatMessageComponentAsEditBox = (props) => {
                     React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
                             submitEnabled &&
                                 onSubmit(textValue, message.metadata, 
-                                /* @conditional-compile-remove(file-sharing) */ {
+                                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {
                                     attachmentMetadata
                                 });
                             e.stopPropagation();
-                        }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(file-sharing) */
-            onRenderFileUploads()));
+                        }, id: 'submitIconWrapper' }))),
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileUploads()));
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: {
@@ -11649,7 +11675,6 @@ var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments,
 const attachmentDownloadCardsStyle = {
     marginTop: '0.25rem'
 };
-const actionIconStyle = { height: '1rem' };
 /**
  * @internal
  */
@@ -11664,13 +11689,13 @@ const _AttachmentDownloadCards = (props) => {
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadAttachment, localeStrings.downloadAttachment]);
     const isShowDownloadIcon = React.useCallback((attachment) => {
         var _a;
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
     }, []);
     const attachmentCardGroupDescription = React.useMemo(() => () => {
         var _a, _b, _c;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.attachmentCardGroupMessage;
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return _formatString(fileGroupLocaleString, {
             attachmentCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _c !== void 0 ? _c : 0}`
         });
@@ -11702,18 +11727,17 @@ const _AttachmentDownloadCards = (props) => {
     return (React.createElement("div", { style: attachmentDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
         React.createElement(_AttachmentCardGroup, { ariaLabel: attachmentCardGroupDescription() }, fileMetadata &&
             fileMetadata.map((attachment) => (React.createElement(react.TooltipHost, { content: downloadAttachmentButtonString(), key: attachment.name },
-                React.createElement(_AttachmentCard, { attachmentName: attachment.name, key: attachment.name, attachmentExtension: attachment.extension, actionIcon: showSpinner ? (React.createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : isShowDownloadIcon(attachment) ? (React.createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadAttachmentButtonString() },
-                        React.createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, attachment) })))))));
+                React.createElement(_AttachmentCard, { attachmentName: attachment.name, key: attachment.name, attachmentExtension: attachment.extension, actionIcon: showSpinner ? (React.createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : isShowDownloadIcon(attachment) ? (React.createElement(DownloadIconTrampoline, null)) : (React.createElement(reactIcons.Open20Regular, null)), actionHandler: () => fileDownloadHandler(userId, attachment) })))))));
 };
 /**
  * @private
  */
 const DownloadIconTrampoline = () => {
-    // @conditional-compile-remove(file-sharing)
-    return React.createElement(react.Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
+    // @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
+    return React.createElement(reactIcons.ArrowDownload20Regular, { "data-ui-id": 'file-download-card-download-icon' });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return useLocale$1().strings.messageThread;
 };
 
@@ -11810,11 +11834,11 @@ const getFluentUIAttachedValue = (messageAttachedStatus) => {
  *  Get the message bubble content for the message.
  */
 function getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 onRenderFileDownloads, 
 /* @conditional-compile-remove(mention) */
 mentionDisplayOptions, 
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 fileDownloadHandler) {
     /* @conditional-compile-remove(data-loss-prevention) */
     if (message.messageType === 'blocked') {
@@ -11825,25 +11849,25 @@ fileDownloadHandler) {
         React.createElement(ChatMessageContent, { message: message, strings: strings, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: mentionDisplayOptions, inlineImageOptions: inlineImageOptions }),
-        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileDownloads
             ? onRenderFileDownloads(userId, message)
             : defaultOnRenderFileDownloads(userId, message, strings, 
-            /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler)));
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ fileDownloadHandler)));
 }
 /**
  * Default component for rendering file downloads.
  */
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 const defaultOnRenderFileDownloads = (userId, message, strings, 
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 fileDownloadHandler) => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return (React.createElement(_AttachmentDownloadCards, { userId: userId, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileMetadata: message.files || [], 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         downloadHandler: fileDownloadHandler, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         strings: {
             downloadAttachment: strings.downloadAttachment,
             attachmentCardGroupMessage: strings.attachmentCardGroupMessage
@@ -11887,9 +11911,9 @@ const MessageBubble$1 = (props) => {
     const theme = useTheme();
     const locale = useLocale$1();
     const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     fileDownloadHandler, inlineImageOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileDownloads, 
     /* @conditional-compile-remove(mention) */
     mentionDisplayOptions, onDisplayDateTimeString } = props;
@@ -11945,18 +11969,18 @@ const MessageBubble$1 = (props) => {
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = React.useCallback(() => {
         return getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         onRenderFileDownloads, 
         /* @conditional-compile-remove(mention) */
         mentionDisplayOptions, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileDownloadHandler);
     }, [
-        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ fileDownloadHandler,
         inlineImageOptions,
         /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
         message,
-        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileDownloads,
         strings,
         userId
     ]);
@@ -12095,30 +12119,32 @@ const FluentChatMyMessageComponent = (props) => {
     onDisplayDateTimeString, inlineImageOptions, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     fileDownloadHandler, userId, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileDownloads, defaultStatusRenderer, statusToRender } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     const onRenderFileDownloadsMemo = React.useMemo(() => {
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return onRenderFileDownloads;
-    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    }, [
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileDownloads
+    ]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 onRenderFileDownloads: onRenderFileDownloadsMemo, 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, 
                 /* @conditional-compile-remove(date-time-customization) */
                 onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions, 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 fileDownloadHandler: fileDownloadHandler })));
         }
         return React.createElement(React.Fragment, null);
@@ -12135,7 +12161,7 @@ const FluentChatMyMessageComponent = (props) => {
         inlineImageOptions,
         /* @conditional-compile-remove(mention) */
         mentionOptions,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileDownloadHandler,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         new Date().toDateString()
@@ -12201,9 +12227,9 @@ const MessageBubble = (props) => {
     const theme = useTheme();
     const locale = useLocale$1();
     const { userId, message, showDate, messageContainerStyle, strings, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     fileDownloadHandler, inlineImageOptions, shouldOverlapAvatarAndMessage, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileDownloads, 
     /* @conditional-compile-remove(mention) */
     mentionDisplayOptions, onDisplayDateTimeString } = props;
@@ -12221,18 +12247,18 @@ const MessageBubble = (props) => {
     }, [strings.editedTag, theme, message]);
     const getContent = React.useCallback(() => {
         return getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         onRenderFileDownloads, 
         /* @conditional-compile-remove(mention) */
         mentionDisplayOptions, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileDownloadHandler);
     }, [
-        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ fileDownloadHandler,
         inlineImageOptions,
         /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
         message,
-        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileDownloads,
         strings,
         userId
     ]);
@@ -12282,30 +12308,32 @@ const FluentChatMessageComponent = (props) => {
     const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString, inlineImageOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     fileDownloadHandler, userId, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileDownloads, 
     /* @conditional-compile-remove(mention) */
     mentionOptions } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     const onRenderFileDownloadsMemo = React.useMemo(() => {
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return onRenderFileDownloads;
-    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    }, [
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileDownloads
+    ]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 onRenderFileDownloads: onRenderFileDownloadsMemo, 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, 
                 /* @conditional-compile-remove(date-time-customization) */
                 onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 fileDownloadHandler: fileDownloadHandler, 
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions })));
@@ -12318,7 +12346,7 @@ const FluentChatMessageComponent = (props) => {
         /* @conditional-compile-remove(date-time-customization) */
         onDisplayDateTimeString,
         inlineImageOptions,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileDownloadHandler,
         /* @conditional-compile-remove(mention) */
         mentionOptions,
@@ -12592,7 +12620,7 @@ const MessageThreadWrapper = (props) => {
     onDisplayDateTimeString, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, inlineImageOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderFileDownloads } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
@@ -12927,13 +12955,13 @@ const MessageThreadWrapper = (props) => {
                     // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
                     className: reactComponents.mergeClasses(classes.root, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay.map((message) => {
                     return (React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, 
-                        /* @conditional-compile-remove(file-sharing) */
+                        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                         fileDownloadHandler: props.fileDownloadHandler, inlineImageOptions: inlineImageOptions, 
                         /* @conditional-compile-remove(date-time-customization) */
                         onDisplayDateTimeString: onDisplayDateTimeString, 
                         /* @conditional-compile-remove(mention) */
                         mentionOptions: mentionOptions, 
-                        /* @conditional-compile-remove(file-sharing) */
+                        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                         onRenderFileDownloads: onRenderFileDownloads })));
                 }))))));
 };
@@ -22786,7 +22814,7 @@ const memoizedAllConvertChatMessage = memoizeFnAll((_key, chatMessage, userId, i
         return convertToUiSystemMessage(chatMessage);
     }
 });
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 const extractAttachedFilesMetadata = (metadata) => {
     const fileMetadata = metadata.fileSharingMetadata;
     if (!fileMetadata) {
@@ -22800,7 +22828,7 @@ const extractAttachedFilesMetadata = (metadata) => {
         return [];
     }
 };
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 const extractTeamsAttachmentsMetadata = (attachments) => {
     const files = [];
     attachments.forEach((attachment) => {
@@ -22837,7 +22865,7 @@ const convertToUiBlockedMessage = (message, userId, isSeen, isLargeGroup) => {
         link: DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL
     };
 };
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 const extractAttachmentUrl = (attachment) => {
     return attachment.previewUrl ? attachment.previewUrl : attachment.url || '';
 };
@@ -22910,7 +22938,7 @@ const extractAttachmentContentTypeFromName = (name) => {
     const contentType = name.substring(indexOfLastDot + 1);
     return contentType;
 };
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 const extractAttachmentsMetadata = (message) => {
     var _a, _b;
     let files = [];
@@ -22925,7 +22953,7 @@ const extractAttachmentsMetadata = (message) => {
 };
 const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
     const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const { files } = extractAttachmentsMetadata(message);
     return {
         messageType: 'chat',
@@ -22941,7 +22969,7 @@ const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
         deletedOn: message.deletedOn,
         mine: messageSenderId === userId,
         metadata: message.metadata,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         files
     };
 };
@@ -24683,7 +24711,7 @@ const COMPOSITE_ONLY_ICONS = {
     NoticePageRoomNotValid: React.createElement(reactIcons.Info20Filled, null),
     NoticePageCallRejected: React.createElement(reactIcons.Info20Filled, null),
     NoticePageCallTimeout: React.createElement(reactIcons.Info20Filled, null),
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     SendBoxAttachFile: React.createElement(reactIcons.Attach20Regular, null),
     /* @conditional-compile-remove(PSTN-calls) */
     PeoplePaneAddPerson: React.createElement(reactIcons.PersonAdd20Regular, null),
@@ -24818,7 +24846,7 @@ const FileUploadButton = (props) => {
             } })));
 };
 const SendBoxAttachFileIconTrampoline = () => {
-    // @conditional-compile-remove(file-sharing)
+    // @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
     return React.createElement(ChatCompositeIcon, { iconName: "SendBoxAttachFile" });
 };
 /**
@@ -24831,19 +24859,19 @@ const FileUploadButtonWrapper = (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 props) => {
     return (React.createElement(React.Fragment, null, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     React.createElement(FileUploadButton, Object.assign({}, props))));
 };
 const uploadFileButtonStringTrampoline = () => {
-    //@conditional-compile-remove(file-sharing)
+    //@conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
     //eslint-disable-next-line react-hooks/rules-of-hooks
     return useLocale().strings.chat.uploadFile;
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(file-sharing) */
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @internal
  */
@@ -24883,7 +24911,7 @@ class FileUploadContext {
         }));
     }
 }
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @internal
  */
@@ -24961,7 +24989,7 @@ class AzureCommunicationFileUploadAdapter {
         fileUpload === null || fileUpload === void 0 ? void 0 : fileUpload.off('uploadFail', this.updateFileUploadErrorMessage.bind(this));
     }
 }
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @param fileUploadUiState {@link FileUploadsUiState}
  * @private
@@ -24981,7 +25009,7 @@ const convertFileUploadsUiStateToMessageMetadata = (fileUploads) => {
     }
     return undefined;
 };
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -25061,7 +25089,7 @@ class ChatContext {
             thread,
             latestErrors: clientState.latestErrors
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         updatedState = Object.assign(Object.assign({}, updatedState), { fileUploads: this.state.fileUploads });
         this.setState(updatedState);
     }
@@ -25076,7 +25104,7 @@ class AzureCommunicationChatAdapter {
         this.chatClient = chatClient;
         this.chatThreadClient = chatThreadClient;
         this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
         const onStateChange = (clientState) => {
             // unsubscribe when the instance gets disposed
@@ -25106,19 +25134,19 @@ class AzureCommunicationChatAdapter {
         this.loadPreviousChatMessages = this.loadPreviousChatMessages.bind(this);
         this.on = this.on.bind(this);
         this.off = this.off.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerActiveFileUploads = this.registerActiveFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerCompletedFileUploads = this.registerCompletedFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.clearFileUploads = this.clearFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.cancelFileUpload = this.cancelFileUpload.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadProgress = this.updateFileUploadProgress.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadErrorMessage = this.updateFileUploadErrorMessage.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -25168,9 +25196,9 @@ class AzureCommunicationChatAdapter {
     sendMessage(content_1) {
         return __awaiter$n(this, arguments, void 0, function* (content, options = {}) {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 /**
                  * All the current uploads need to be clear from the state before a message has been sent.
                  * This ensures the following behavior:
@@ -25221,9 +25249,9 @@ class AzureCommunicationChatAdapter {
     updateMessage(messageId, content, metadata, options) {
         return __awaiter$n(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 const updatedOptions = { attachmentMetadata: options === null || options === void 0 ? void 0 : options.attachmentMetadata, metadata: metadata };
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 return yield this.handlers.onUpdateMessage(messageId, content, updatedOptions);
             }));
         });
@@ -25235,31 +25263,31 @@ class AzureCommunicationChatAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     registerActiveFileUploads(files) {
         return this.fileUploadAdapter.registerActiveFileUploads(files);
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     registerCompletedFileUploads(metadata) {
         return this.fileUploadAdapter.registerCompletedFileUploads(metadata);
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     clearFileUploads() {
         this.fileUploadAdapter.clearFileUploads();
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     cancelFileUpload(id) {
         this.fileUploadAdapter.cancelFileUpload(id);
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     updateFileUploadProgress(id, progress) {
         this.fileUploadAdapter.updateFileUploadProgress(id, progress);
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     updateFileUploadErrorMessage(id, errorMessage) {
         this.fileUploadAdapter.updateFileUploadErrorMessage(id, errorMessage);
     }
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     updateFileUploadMetadata(id, metadata) {
         this.fileUploadAdapter.updateFileUploadMetadata(id, metadata);
     }
@@ -25922,13 +25950,13 @@ const createCompositeHandlers$1 = memoizeOne((adapter) => ({
     onRemoveParticipant: adapter.removeParticipant,
     updateThreadTopicName: adapter.setTopic,
     onUpdateMessage: (messageId, content, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     options) => {
         const metadata = options === null || options === void 0 ? void 0 : options.metadata;
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         const updatedOptions = (options === null || options === void 0 ? void 0 : options.attachmentMetadata) ? Object.assign({}, options.attachmentMetadata) : {};
         return adapter.updateMessage(messageId, content, metadata, 
-        /* @conditional-compile-remove(file-sharing) */ updatedOptions);
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ updatedOptions);
     },
     onDeleteMessage: adapter.deleteMessage
 }));
@@ -26198,7 +26226,7 @@ const FileDownloadErrorBar = (props) => {
  * @private
  */
 const getFileUploads = (state) => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return state === null || state === void 0 ? void 0 : state.fileUploads;
 };
 
@@ -26225,30 +26253,30 @@ const useSelector$2 = (selector, selectorProps) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BRqOsupu.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Yty3fOoA.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
 const SendBox = (props) => {
     const { options, styles, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     adapter } = props;
     const sendBoxProps = usePropsFor$2(SendBox$1);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const activeFileUploads = useSelector$2(fileUploadsSelector).files;
     const sendBoxStyles = React.useMemo(() => {
         return Object.assign({}, styles);
     }, [styles]);
     const simpleSendBox = React.useMemo(() => (React.createElement(SendBox$1, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         activeFileUploads: activeFileUploads, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         onCancelFileUpload: adapter.cancelFileUpload }))), [
         sendBoxProps,
         options,
         sendBoxStyles,
-        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
-        /* @conditional-compile-remove(file-sharing) */ adapter
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ adapter
     ]);
     // /* @conditional-compile-remove(rich-text-editor) */
     if ((options === null || options === void 0 ? void 0 : options.richTextEditor) === true) {
@@ -26275,7 +26303,7 @@ var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments,
 const ChatScreen = (props) => {
     const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
     const defaultNumberOfChatMessagesToReload = 5;
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
     const [overlayImageItem, setOverlayImageItem] = React.useState();
     const [isImageOverlayOpen, setIsImageOverlayOpen] = React.useState(false);
@@ -26338,12 +26366,12 @@ const ChatScreen = (props) => {
         if (!files) {
             return;
         }
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
     }, [adapter, fileSharing, userId]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileDownloads = React.useCallback((userId, message) => (React.createElement(_AttachmentDownloadCards, { userId: userId, fileMetadata: message.files || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
@@ -26445,12 +26473,12 @@ const ChatScreen = (props) => {
         React.createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
             React.createElement(react.Stack, { className: chatWrapper, grow: true },
                 (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 React.createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
                         setDownloadErrorMessage('');
                     }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
                 React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
-                    /* @conditional-compile-remove(file-sharing) */
+                    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                     onRenderFileDownloads: onRenderFileDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React.createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React.createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
@@ -26459,7 +26487,7 @@ const ChatScreen = (props) => {
                             React.createElement(AttachFileButton, null))),
                         React.createElement(react.Stack, { grow: true },
                             React.createElement(SendBox, { options: options, styles: styles === null || styles === void 0 ? void 0 : styles.sendBox, 
-                                /* @conditional-compile-remove(file-sharing) */
+                                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                                 adapter: adapter })),
                         formFactor !== 'mobile' && React.createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
@@ -26486,17 +26514,17 @@ const ChatScreen = (props) => {
  */
 const ChatComposite = (props) => {
     const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const formFactor = props['formFactor'] || 'desktop';
     return (React.createElement("div", { className: chatScreenContainerStyle },
         React.createElement(BaseProvider, Object.assign({}, props),
             React.createElement(ChatAdapterProvider, { adapter: adapter },
                 React.createElement(ChatScreen
-                /* @conditional-compile-remove(file-sharing) */
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                 , { 
-                    /* @conditional-compile-remove(file-sharing) */
+                    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                     formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems, 
-                    /* @conditional-compile-remove(file-sharing) */
+                    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
                     fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing })))));
 };
 
@@ -36718,31 +36746,31 @@ class CallWithChatBackedChatAdapter {
         this.setTopic = (topicName) => __awaiter$3(this, void 0, void 0, function* () {
             throw new Error(`Chat Topics are not supported in CallWithChatComposite.`);
         });
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerActiveFileUploads = (files) => {
             return this.callWithChatAdapter.registerActiveFileUploads(files);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerCompletedFileUploads = (metadata) => {
             return this.callWithChatAdapter.registerCompletedFileUploads(metadata);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.clearFileUploads = () => {
             this.callWithChatAdapter.clearFileUploads();
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.cancelFileUpload = (id) => {
             this.callWithChatAdapter.cancelFileUpload(id);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadProgress = (id, progress) => {
             this.callWithChatAdapter.updateFileUploadProgress(id, progress);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadErrorMessage = (id, errorMessage) => {
             this.callWithChatAdapter.updateFileUploadErrorMessage(id, errorMessage);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadMetadata = (id, metadata) => {
             this.callWithChatAdapter.updateFileUploadMetadata(id, metadata);
         };
@@ -36766,7 +36794,7 @@ function chatAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         displayName: callWithChatAdapterState.displayName || '',
         thread: callWithChatAdapterState.chat,
         latestErrors: callWithChatAdapterState.latestChatErrors,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileUploads: callWithChatAdapterState.fileUploads
     };
 }
@@ -37079,11 +37107,11 @@ const CallWithChatScreen = (props) => {
             topic: false,
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             participantPane: false,
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             fileSharing: props.fileSharing
         }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), [
         chatAdapter,
-        /* @conditional-compile-remove(file-sharing) */ props.fileSharing,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ props.fileSharing,
         props.onFetchAvatarPersonaData,
         theme
     ]);
@@ -37133,7 +37161,7 @@ const CallWithChatComposite = (props) => {
         React.createElement(CallWithChatScreen, Object.assign({}, props, { 
             /* @conditional-compile-remove(call-readiness) */
             deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, 
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, 
             /* @conditional-compile-remove(custom-branding) */
             logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, 
@@ -37186,7 +37214,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
         isTeamsCall: callAdapterState.isTeamsCall,
         latestCallErrors: callAdapterState.latestErrors,
         latestChatErrors: chatAdapterState.latestErrors,
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileUploads: chatAdapterState.fileUploads,
         /* @conditional-compile-remove(PSTN-calls) */
         alternateCallerId: callAdapterState.alternateCallerId,
@@ -37207,7 +37235,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
  */
 function mergeChatAdapterStateIntoCallWithChatAdapterState(existingCallWithChatAdapterState, chatAdapterState) {
     return Object.assign(Object.assign({}, existingCallWithChatAdapterState), { chat: chatAdapterState.thread, latestChatErrors: chatAdapterState.latestErrors, 
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         fileUploads: chatAdapterState.fileUploads });
 }
 /**
@@ -37288,31 +37316,31 @@ class CallWithChatContext {
  */
 class AzureCommunicationCallWithChatAdapter {
     constructor(callAdapter, chatAdapter) {
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerActiveFileUploads = (files) => {
             return this.chatAdapter.registerActiveFileUploads(files);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerCompletedFileUploads = (metadata) => {
             return this.chatAdapter.registerCompletedFileUploads(metadata);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.clearFileUploads = () => {
             this.chatAdapter.clearFileUploads();
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.cancelFileUpload = (id) => {
             this.chatAdapter.cancelFileUpload(id);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadProgress = (id, progress) => {
             this.chatAdapter.updateFileUploadProgress(id, progress);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadErrorMessage = (id, errorMessage) => {
             this.chatAdapter.updateFileUploadErrorMessage(id, errorMessage);
         };
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadMetadata = (id, metadata) => {
             this.chatAdapter.updateFileUploadMetadata(id, metadata);
         };
@@ -37369,19 +37397,19 @@ class AzureCommunicationCallWithChatAdapter {
         this.deleteMessage.bind(this);
         this.on.bind(this);
         this.off.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerActiveFileUploads = this.registerActiveFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.registerCompletedFileUploads = this.registerCompletedFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.clearFileUploads = this.clearFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.cancelFileUpload = this.cancelFileUpload.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadProgress = this.updateFileUploadProgress.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadErrorMessage = this.updateFileUploadErrorMessage.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -37624,7 +37652,7 @@ class AzureCommunicationCallWithChatAdapter {
     updateMessage(messageId, content, metadata, options) {
         return __awaiter$2(this, void 0, void 0, function* () {
             return yield this.chatAdapter.updateMessage(messageId, content, metadata, 
-            /* @conditional-compile-remove(file-sharing) */ options);
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ options);
         });
     }
     /** Delete an existing message. */
@@ -38611,4 +38639,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-Ba2HAv_Y.js.map
+//# sourceMappingURL=index-BEomNZbT.js.map