stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/components/Attachment/Card.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React from 'react';
 import clsx from 'clsx';
 import ReactPlayer from 'react-player';
@@ -6,59 +5,28 @@ import { ImageComponent } from '../Gallery';
 import { SafeAnchor } from '../SafeAnchor';
 import { PlayButton, ProgressBar } from './components';
 import { useAudioController } from './hooks/useAudioController';
-import { useChatContext } from '../../context/ChatContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-var getHostFromURL = function (url) {
+const getHostFromURL = (url) => {
     if (url !== undefined && url !== null) {
-        var trimmedUrl = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/')[0];
+        const [trimmedUrl] = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/');
         return trimmedUrl;
     }
     return null;
 };
-var UnableToRenderCard = function (_a) {
-    var _b;
-    var type = _a.type;
-    var t = useTranslationContext('Card').t;
-    return (React.createElement("div", { className: clsx('str-chat__message-attachment-card', (_b = {},
-            _b["str-chat__message-attachment-card--".concat(type)] = type,
-            _b)) },
+const UnableToRenderCard = ({ type }) => {
+    const { t } = useTranslationContext('Card');
+    return (React.createElement("div", { className: clsx('str-chat__message-attachment-card', {
+            [`str-chat__message-attachment-card--${type}`]: type,
+        }) },
         React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
             React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
 };
-var CardV1 = function (props) {
-    var asset_url = props.asset_url, giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
-    var giphyVersionName = useChannelStateContext('Card').giphyVersion;
-    var image = thumb_url || image_url;
-    var dimensions = {};
-    if (type === 'giphy' && typeof giphy !== 'undefined') {
-        var giphyVersion = giphy[giphyVersionName];
-        image = giphyVersion.url;
-        dimensions.height = giphyVersion.height;
-        dimensions.width = giphyVersion.width;
-    }
-    if (!title && !title_link && !asset_url && !image) {
-        return React.createElement(UnableToRenderCard, { type: type });
-    }
-    if (!title_link && !og_scrape_url) {
-        return null;
-    }
-    return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
-        React.createElement(CardHeader, __assign({}, props, { dimensions: dimensions, image: image })),
-        type !== 'video' && (React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
-            React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
-                title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
-                text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text),
-                (title_link || og_scrape_url) && (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, getHostFromURL(title_link || og_scrape_url))))))));
-};
-var SourceLink = function (_a) {
-    var author_name = _a.author_name, url = _a.url;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
-        React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
-};
-var CardHeader = function (props) {
-    var asset_url = props.asset_url, dimensions = props.dimensions, image = props.image, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, type = props.type;
-    var visual = null;
+const SourceLink = ({ author_name, url }) => (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
+    React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
+const CardHeader = (props) => {
+    const { asset_url, dimensions, image, image_url, thumb_url, title, type } = props;
+    let visual = null;
     if (asset_url && type === 'video') {
         visual = (React.createElement(ReactPlayer, { className: 'react-player', controls: true, height: '100%', url: asset_url, width: '100%' }));
     }
@@ -67,40 +35,21 @@ var CardHeader = function (props) {
     }
     return visual ? (React.createElement("div", { className: 'str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header', "data-testid": 'card-header' }, visual)) : null;
 };
-var CardContent = function (props) {
-    var author_name = props.author_name, og_scrape_url = props.og_scrape_url, text = props.text, title = props.title, title_link = props.title_link, type = props.type;
-    var url = title_link || og_scrape_url;
+const CardContent = (props) => {
+    const { author_name, og_scrape_url, text, title, title_link, type } = props;
+    const url = title_link || og_scrape_url;
     return (React.createElement("div", { className: 'str-chat__message-attachment-card--content' }, type === 'audio' ? (React.createElement(CardAudio, { og: props })) : (React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
         url && React.createElement(SourceLink, { author_name: author_name, url: url }),
         title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
         text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
 };
-var CardV2 = function (props) {
-    var asset_url = props.asset_url, giphy = props.giphy, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
-    var giphyVersionName = useChannelStateContext('CardHeader').giphyVersion;
-    var image = thumb_url || image_url;
-    var dimensions = {};
-    if (type === 'giphy' && typeof giphy !== 'undefined') {
-        var giphyVersion = giphy[giphyVersionName];
-        image = giphyVersion.url;
-        dimensions.height = giphyVersion.height;
-        dimensions.width = giphyVersion.width;
-    }
-    if (!title && !title_link && !asset_url && !image) {
-        return React.createElement(UnableToRenderCard, null);
-    }
-    return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
-        React.createElement(CardHeader, __assign({}, props, { dimensions: dimensions, image: image })),
-        React.createElement(CardContent, __assign({}, props))));
-};
-export var CardAudio = function (_a) {
-    var _b = _a.og, asset_url = _b.asset_url, author_name = _b.author_name, mime_type = _b.mime_type, og_scrape_url = _b.og_scrape_url, text = _b.text, title = _b.title, title_link = _b.title_link;
-    var _c = useAudioController({
+export const CardAudio = ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }) => {
+    const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController({
         mimeType: mime_type,
-    }), audioRef = _c.audioRef, isPlaying = _c.isPlaying, progress = _c.progress, seek = _c.seek, togglePlay = _c.togglePlay;
-    var url = title_link || og_scrape_url;
-    var dataTestId = 'card-audio-widget';
-    var rootClassName = 'str-chat__message-attachment-card-audio-widget';
+    });
+    const url = title_link || og_scrape_url;
+    const dataTestId = 'card-audio-widget';
+    const rootClassName = 'str-chat__message-attachment-card-audio-widget';
     return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
         asset_url && (React.createElement(React.Fragment, null,
             React.createElement("audio", { ref: audioRef },
@@ -114,11 +63,25 @@ export var CardAudio = function (_a) {
             title && React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
             text && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--description' }, text)))));
 };
-var UnMemoizedCard = function (props) {
-    var themeVersion = useChatContext('Card').themeVersion;
-    return themeVersion === '2' ? React.createElement(CardV2, __assign({}, props)) : React.createElement(CardV1, __assign({}, props));
+const UnMemoizedCard = (props) => {
+    const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
+    const { giphyVersion: giphyVersionName } = useChannelStateContext('CardHeader');
+    let image = thumb_url || image_url;
+    const dimensions = {};
+    if (type === 'giphy' && typeof giphy !== 'undefined') {
+        const giphyVersion = giphy[giphyVersionName];
+        image = giphyVersion.url;
+        dimensions.height = giphyVersion.height;
+        dimensions.width = giphyVersion.width;
+    }
+    if (!title && !title_link && !asset_url && !image) {
+        return React.createElement(UnableToRenderCard, null);
+    }
+    return (React.createElement("div", { className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}` },
+        React.createElement(CardHeader, { ...props, dimensions: dimensions, image: image }),
+        React.createElement(CardContent, { ...props })));
 };
 /**
  * Simple Card Layout for displaying links
  */
-export var Card = React.memo(UnMemoizedCard);
+export const Card = React.memo(UnMemoizedCard);

package/dist/components/Attachment/FileAttachment.d.ts

@@ -5,4 +5,3 @@ export type FileAttachmentProps<StreamChatGenerics extends DefaultStreamChatGene
     attachment: Attachment<StreamChatGenerics>;
 };
 export declare const FileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, }: FileAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=FileAttachment.d.ts.map

package/dist/components/Attachment/FileAttachment.js

@@ -1,29 +1,11 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
 import { DownloadButton, FileSizeIndicator } from './components';
-import { SafeAnchor } from '../SafeAnchor/SafeAnchor';
-import { useChatContext } from '../../context/ChatContext';
-var UnMemoizedFileAttachmentV1 = function (_a) {
-    var attachment = _a.attachment;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
-        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 30 }),
-        React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
-            React.createElement(SafeAnchor, { download: true, href: attachment.asset_url, target: '_blank' }, attachment.title),
-            React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
-};
-var UnMemoizedFileAttachmentV2 = function (_a) {
-    var attachment = _a.attachment;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
-        React.createElement(FileIcon, { className: 'str-chat__file-icon', mimeType: attachment.mime_type, version: '2' }),
-        React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
-            React.createElement("div", { className: 'str-chat__message-attachment-file--item-first-row' },
-                React.createElement("div", { className: 'str-chat__message-attachment-file--item-name', "data-testid": 'file-title' }, attachment.title),
-                React.createElement(DownloadButton, { assetUrl: attachment.asset_url })),
-            React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
-};
-var UnMemoizedFileAttachment = function (_a) {
-    var attachment = _a.attachment;
-    var themeVersion = useChatContext('FileAttachment').themeVersion;
-    return themeVersion === '2' ? (React.createElement(UnMemoizedFileAttachmentV2, { attachment: attachment })) : (React.createElement(UnMemoizedFileAttachmentV1, { attachment: attachment }));
-};
-export var FileAttachment = React.memo(UnMemoizedFileAttachment);
+const UnMemoizedFileAttachment = ({ attachment, }) => (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
+    React.createElement(FileIcon, { className: 'str-chat__file-icon', mimeType: attachment.mime_type }),
+    React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
+        React.createElement("div", { className: 'str-chat__message-attachment-file--item-first-row' },
+            React.createElement("div", { className: 'str-chat__message-attachment-file--item-name', "data-testid": 'file-title' }, attachment.title),
+            React.createElement(DownloadButton, { assetUrl: attachment.asset_url })),
+        React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
+export const FileAttachment = React.memo(UnMemoizedFileAttachment);

package/dist/components/Attachment/UnsupportedAttachment.d.ts

@@ -5,5 +5,3 @@ export type UnsupportedAttachmentProps<StreamChatGenerics extends DefaultStreamC
     attachment: Attachment<StreamChatGenerics>;
 };
 export declare const UnsupportedAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, }: UnsupportedAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const NullComponent: () => null;
-//# sourceMappingURL=UnsupportedAttachment.d.ts.map

package/dist/components/Attachment/UnsupportedAttachment.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
 import { useTranslationContext } from '../../context';
-export var UnsupportedAttachment = function (_a) {
-    var attachment = _a.attachment;
-    var t = useTranslationContext('UnsupportedAttachment').t;
+export const UnsupportedAttachment = ({ attachment, }) => {
+    const { t } = useTranslationContext('UnsupportedAttachment');
     return (React.createElement("div", { className: 'str-chat__message-attachment-unsupported', "data-testid": 'attachment-unsupported' },
-        React.createElement(FileIcon, { className: 'str-chat__file-icon', version: '2' }),
+        React.createElement(FileIcon, { className: 'str-chat__file-icon' }),
         React.createElement("div", { className: 'str-chat__message-attachment-unsupported__metadata' },
             React.createElement("div", { className: 'str-chat__message-attachment-unsupported__title', "data-testid": 'unsupported-attachment-title' }, attachment.title || t('Unsupported attachment')))));
 };
-export var NullComponent = function () { return null; };

package/dist/components/Attachment/VoiceRecording.d.ts

@@ -15,4 +15,3 @@ export type VoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGene
     isQuoted?: boolean;
 };
 export declare const VoiceRecording: ({ attachment, isQuoted }: VoiceRecordingProps) => React.JSX.Element;
-//# sourceMappingURL=VoiceRecording.d.ts.map

package/dist/components/Attachment/VoiceRecording.js

@@ -4,19 +4,18 @@ import { useAudioController } from './hooks/useAudioController';
 import { displayDuration } from './utils';
 import { FileIcon } from '../ReactFileUtilities';
 import { useTranslationContext } from '../../context';
-var rootClassName = 'str-chat__message-attachment__voice-recording-widget';
-export var VoiceRecordingPlayer = function (_a) {
-    var attachment = _a.attachment, playbackRates = _a.playbackRates;
-    var t = useTranslationContext('VoiceRecordingPlayer').t;
-    var asset_url = attachment.asset_url, _b = attachment.duration, duration = _b === void 0 ? 0 : _b, mime_type = attachment.mime_type, _c = attachment.title, title = _c === void 0 ? t('Voice message') : _c, waveform_data = attachment.waveform_data;
-    var _d = useAudioController({
-        durationSeconds: duration !== null && duration !== void 0 ? duration : 0,
+const rootClassName = 'str-chat__message-attachment__voice-recording-widget';
+export const VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
+    const { t } = useTranslationContext('VoiceRecordingPlayer');
+    const { asset_url, duration = 0, mime_type, title = t('Voice message'), waveform_data, } = attachment;
+    const { audioRef, increasePlaybackRate, isPlaying, playbackRate, progress, secondsElapsed, seek, togglePlay, } = useAudioController({
+        durationSeconds: duration ?? 0,
         mimeType: mime_type,
-        playbackRates: playbackRates,
-    }), audioRef = _d.audioRef, increasePlaybackRate = _d.increasePlaybackRate, isPlaying = _d.isPlaying, playbackRate = _d.playbackRate, progress = _d.progress, secondsElapsed = _d.secondsElapsed, seek = _d.seek, togglePlay = _d.togglePlay;
+        playbackRates,
+    });
     if (!asset_url)
         return null;
-    var displayedDuration = secondsElapsed || duration;
+    const displayedDuration = secondsElapsed || duration;
     return (React.createElement("div", { className: rootClassName, "data-testid": 'voice-recording-widget' },
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: mime_type })),
@@ -28,20 +27,16 @@ export var VoiceRecordingPlayer = function (_a) {
                 React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveform_data || [] }))),
         React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__right-section' }, isPlaying ? (React.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate },
             playbackRate.toFixed(1),
-            "x")) : (React.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40, version: '2' })))));
+            "x")) : (React.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })))));
 };
-export var QuotedVoiceRecording = function (_a) {
-    var attachment = _a.attachment;
-    var t = useTranslationContext().t;
-    var title = attachment.title || t('Voice message');
+export const QuotedVoiceRecording = ({ attachment }) => {
+    const { t } = useTranslationContext();
+    const title = attachment.title || t('Voice message');
     return (React.createElement("div", { className: rootClassName, "data-testid": 'quoted-voice-recording-widget' },
         React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
             title && (React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: title }, title)),
             React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
                 React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(attachment.duration)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))))),
-        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34, version: '2' })));
-};
-export var VoiceRecording = function (_a) {
-    var attachment = _a.attachment, isQuoted = _a.isQuoted;
-    return isQuoted ? (React.createElement(QuotedVoiceRecording, { attachment: attachment })) : (React.createElement(VoiceRecordingPlayer, { attachment: attachment }));
+        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 })));
 };
+export const VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? (React.createElement(QuotedVoiceRecording, { attachment: attachment })) : (React.createElement(VoiceRecordingPlayer, { attachment: attachment }));

package/dist/components/Attachment/attachment-sizing.d.ts

@@ -6,4 +6,3 @@ export declare const getVideoAttachmentConfiguration: (attachment: Attachment, e
     thumbUrl: string | undefined;
     url: string;
 };
-//# sourceMappingURL=attachment-sizing.d.ts.map

package/dist/components/Attachment/attachment-sizing.js

@@ -1,10 +1,10 @@
 import * as linkify from 'linkifyjs';
-export var getImageAttachmentConfiguration = function (attachment, element) {
-    var newUrl = undefined;
-    var urlToTest = attachment.image_url || attachment.thumb_url || '';
+export const getImageAttachmentConfiguration = (attachment, element) => {
+    let newUrl = undefined;
+    const urlToTest = attachment.image_url || attachment.thumb_url || '';
     if (linkify.test(urlToTest, 'url')) {
-        var url = new URL(urlToTest);
-        var resizeDimensions = getSizingRestrictions(url, element);
+        const url = new URL(urlToTest);
+        const resizeDimensions = getSizingRestrictions(url, element);
         if (resizeDimensions) {
             // Apply 2x for retina displays
             resizeDimensions.height *= 2;
@@ -17,13 +17,13 @@ export var getImageAttachmentConfiguration = function (attachment, element) {
         url: newUrl || '',
     };
 };
-export var getVideoAttachmentConfiguration = function (attachment, element, shouldGenerateVideoThumbnail) {
-    var thumbUrl = undefined;
+export const getVideoAttachmentConfiguration = (attachment, element, shouldGenerateVideoThumbnail) => {
+    let thumbUrl = undefined;
     if (attachment.thumb_url &&
         shouldGenerateVideoThumbnail &&
         linkify.test(attachment.thumb_url, 'url')) {
-        var url = new URL(attachment.thumb_url);
-        var resizeDimensions = getSizingRestrictions(url, element);
+        const url = new URL(attachment.thumb_url);
+        const resizeDimensions = getSizingRestrictions(url, element);
         if (resizeDimensions) {
             // Apply 2x for retina displays
             resizeDimensions.height *= 2;
@@ -33,16 +33,16 @@ export var getVideoAttachmentConfiguration = function (attachment, element, shou
         thumbUrl = url.href;
     }
     return {
-        thumbUrl: thumbUrl,
+        thumbUrl,
         url: attachment.asset_url || '',
     };
 };
-var getSizingRestrictions = function (url, htmlElement) {
-    var urlParams = url.searchParams;
-    var originalHeight = Number(urlParams.get('oh')) || 1;
-    var originalWidth = Number(urlParams.get('ow')) || 1;
-    var cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
-    var resizeDimensions;
+const getSizingRestrictions = (url, htmlElement) => {
+    const urlParams = url.searchParams;
+    const originalHeight = Number(urlParams.get('oh')) || 1;
+    const originalWidth = Number(urlParams.get('ow')) || 1;
+    const cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
+    let resizeDimensions;
     if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) && cssSizeRestriction.maxWidth) {
         resizeDimensions = getResizeDimensions(originalHeight, originalWidth, 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
@@ -53,28 +53,28 @@ var getSizingRestrictions = function (url, htmlElement) {
     }
     return resizeDimensions;
 };
-var getResizeDimensions = function (originalHeight, originalWidth, maxHeight, maxWidth) { return ({
+const getResizeDimensions = (originalHeight, originalWidth, maxHeight, maxWidth) => ({
     height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),
     width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),
-}); };
-var getCSSSizeRestrictions = function (htmlElement) {
-    var computedStylesheet = getComputedStyle(htmlElement);
-    var height = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
-    var maxHeight = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-height'));
-    var maxWidth = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-width'));
+});
+const getCSSSizeRestrictions = (htmlElement) => {
+    const computedStylesheet = getComputedStyle(htmlElement);
+    const height = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
+    const maxHeight = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-height'));
+    const maxWidth = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-width'));
     if (!((height || maxHeight) && maxWidth)) {
-        console.warn("Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing");
+        console.warn(`Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing`);
     }
-    return { height: height, maxHeight: maxHeight, maxWidth: maxWidth };
+    return { height, maxHeight, maxWidth };
 };
-var getValueRepresentationOfCSSProperty = function (property) {
+const getValueRepresentationOfCSSProperty = (property) => {
     if (!property.endsWith('px')) {
         return undefined;
     }
-    var number = parseFloat(property);
+    const number = parseFloat(property);
     return isNaN(number) ? undefined : number;
 };
-var addResizingParamsToUrl = function (resizeDimensions, url) {
+const addResizingParamsToUrl = (resizeDimensions, url) => {
     url.searchParams.set('h', resizeDimensions.height.toString());
     url.searchParams.set('w', resizeDimensions.width.toString());
 };

package/dist/components/Attachment/audioSampling.d.ts

@@ -7,4 +7,3 @@ export declare const resampleWaveformData: (waveformData: number[], amplitudesCo
  */
 export declare function downSample(data: number[], targetOutputSize: number): number[];
 export declare const upSample: (values: number[], targetSize: number) => number[];
-//# sourceMappingURL=audioSampling.d.ts.map

package/dist/components/Attachment/audioSampling.js

@@ -1,11 +1,9 @@
 import { divMod } from './utils';
-export var resampleWaveformData = function (waveformData, amplitudesCount) {
-    return waveformData.length === amplitudesCount
-        ? waveformData
-        : waveformData.length > amplitudesCount
-            ? downSample(waveformData, amplitudesCount)
-            : upSample(waveformData, amplitudesCount);
-};
+export const resampleWaveformData = (waveformData, amplitudesCount) => waveformData.length === amplitudesCount
+    ? waveformData
+    : waveformData.length > amplitudesCount
+        ? downSample(waveformData, amplitudesCount)
+        : upSample(waveformData, amplitudesCount);
 /**
  * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
  * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
@@ -18,23 +16,23 @@ export function downSample(data, targetOutputSize) {
     }
     if (targetOutputSize === 1)
         return [mean(data)];
-    var result = [];
+    const result = [];
     // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
-    var bucketSize = (data.length - 2) / (targetOutputSize - 2);
-    var lastSelectedPointIndex = 0;
+    const bucketSize = (data.length - 2) / (targetOutputSize - 2);
+    let lastSelectedPointIndex = 0;
     result.push(data[lastSelectedPointIndex]); // Always add the first point
-    var maxAreaPoint, maxArea, triangleArea;
-    for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
-        var previousBucketRefPoint = data[lastSelectedPointIndex];
-        var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
-        var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
-        var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
-        var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+    let maxAreaPoint, maxArea, triangleArea;
+    for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+        const previousBucketRefPoint = data[lastSelectedPointIndex];
+        const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+        const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+        const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+        const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
         maxArea = triangleArea = -1;
-        for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
-            var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
-            var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
-            var currentPointValue = data[currentPointIndex];
+        for (let currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+            const countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+            const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+            const currentPointValue = data[currentPointIndex];
             triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
             if (triangleArea > maxArea) {
                 maxArea = triangleArea;
@@ -48,20 +46,20 @@ export function downSample(data, targetOutputSize) {
     result.push(data[data.length - 1]); // Always add the last point
     return result;
 }
-var triangleAreaHeron = function (a, b, c) {
-    var s = (a + b + c) / 2;
+const triangleAreaHeron = (a, b, c) => {
+    const s = (a + b + c) / 2;
     return Math.sqrt(s * (s - a) * (s - b) * (s - c));
 };
-var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
-var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
-var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
-    var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
-    var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+const triangleBase = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+const mean = (values) => values.reduce((acc, value) => acc + value, 0) / values.length;
+const getNextBucketMean = (data, currentBucketIndex, bucketSize) => {
+    const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+    let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
     nextNextBucketStartIndex =
         nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
     return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
 };
-export var upSample = function (values, targetSize) {
+export const upSample = (values, targetSize) => {
     if (!values.length) {
         console.warn('Cannot extend empty array of amplitudes.');
         return values;
@@ -73,11 +71,11 @@ export var upSample = function (values, targetSize) {
     if (targetSize === values.length)
         return values;
     // eslint-disable-next-line prefer-const
-    var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
-    var result = [];
-    for (var i = 0; i < values.length; i++) {
-        var extra = remainder && remainder-- ? 1 : 0;
-        result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
+    let [bucketSize, remainder] = divMod(targetSize, values.length);
+    const result = [];
+    for (let i = 0; i < values.length; i++) {
+        const extra = remainder && remainder-- ? 1 : 0;
+        result.push(...Array(bucketSize + extra).fill(values[i]));
     }
     return result;
 };

package/dist/components/Attachment/components/DownloadButton.d.ts

@@ -4,4 +4,3 @@ type DownloadButtonProps = {
 };
 export declare const DownloadButton: ({ assetUrl }: DownloadButtonProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=DownloadButton.d.ts.map

package/dist/components/Attachment/components/DownloadButton.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { DownloadIcon } from '../icons';
 import { SafeAnchor } from '../../SafeAnchor';
-export var DownloadButton = function (_a) {
-    var assetUrl = _a.assetUrl;
-    return (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-file--item-download', download: true, href: assetUrl, target: '_blank' },
-        React.createElement(DownloadIcon, { className: 'str-chat__message-attachment-download-icon' })));
-};
+export const DownloadButton = ({ assetUrl }) => (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-file--item-download', download: true, href: assetUrl, target: '_blank' },
+    React.createElement(DownloadIcon, { className: 'str-chat__message-attachment-download-icon' })));

package/dist/components/Attachment/components/FileSizeIndicator.d.ts

@@ -10,4 +10,3 @@ type FileSizeIndicatorProps = {
 };
 export declare const FileSizeIndicator: ({ fileSize, maximumFractionDigits }: FileSizeIndicatorProps) => React.JSX.Element | null;
 export {};
-//# sourceMappingURL=FileSizeIndicator.d.ts.map

package/dist/components/Attachment/components/FileSizeIndicator.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { prettifyFileSize } from '../../MessageInput/hooks/utils';
-export var FileSizeIndicator = function (_a) {
-    var fileSize = _a.fileSize, maximumFractionDigits = _a.maximumFractionDigits;
+export const FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
     if (!(fileSize && Number.isFinite(Number(fileSize))))
         return null;
     return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettifyFileSize(fileSize, maximumFractionDigits)));

package/dist/components/Attachment/components/PlayButton.d.ts

@@ -5,4 +5,3 @@ type PlayButtonProps = {
 };
 export declare const PlayButton: ({ isPlaying, onClick }: PlayButtonProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=PlayButton.d.ts.map

package/dist/components/Attachment/components/PlayButton.js

@@ -1,6 +1,3 @@
 import React from 'react';
 import { PauseIcon, PlayTriangleIcon } from '../icons';
-export var PlayButton = function (_a) {
-    var isPlaying = _a.isPlaying, onClick = _a.onClick;
-    return (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));
-};
+export const PlayButton = ({ isPlaying, onClick }) => (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));

package/dist/components/Attachment/components/PlaybackRateButton.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 export type PlaybackRateButtonProps = React.ComponentProps<'button'>;
 export declare const PlaybackRateButton: ({ children, onClick }: PlaybackRateButtonProps) => React.JSX.Element;
-//# sourceMappingURL=PlaybackRateButton.d.ts.map

package/dist/components/Attachment/components/PlaybackRateButton.js

@@ -1,5 +1,2 @@
 import React from 'react';
-export var PlaybackRateButton = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (React.createElement("button", { className: 'str-chat__message_attachment__playback-rate-button', "data-testid": 'playback-rate-button', onClick: onClick }, children));
-};
+export const PlaybackRateButton = ({ children, onClick }) => (React.createElement("button", { className: 'str-chat__message_attachment__playback-rate-button', "data-testid": 'playback-rate-button', onClick: onClick }, children));

package/dist/components/Attachment/components/ProgressBar.d.ts

@@ -4,4 +4,3 @@ export type ProgressBarProps = {
     progress: number;
 } & Pick<React.ComponentProps<'div'>, 'onClick'>;
 export declare const ProgressBar: ({ onClick, progress }: ProgressBarProps) => React.JSX.Element;
-//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/Attachment/components/ProgressBar.js

@@ -1,8 +1,5 @@
 import React from 'react';
-export var ProgressBar = function (_a) {
-    var onClick = _a.onClick, progress = _a.progress;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
-            '--str-chat__message-attachment-audio-widget-progress': progress + '%',
-        } },
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: "".concat(progress, "px") } })));
-};
+export const ProgressBar = ({ onClick, progress }) => (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
+        '--str-chat__message-attachment-audio-widget-progress': progress + '%',
+    } },
+    React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: `${progress}px` } })));

package/dist/components/Attachment/components/WaveProgressBar.d.ts

@@ -12,4 +12,3 @@ type WaveProgressBarProps = {
 };
 export declare const WaveProgressBar: ({ amplitudesCount, progress, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
 export {};
-//# sourceMappingURL=WaveProgressBar.d.ts.map