@mindly/ui-components 5.98.18 → 5.98.19

package/dist/esm/lib/Chat/ChatMessage/ChatMessage.js

@@ -1,208 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { FileMessageWrapper, FileTimeWrapper, ImageMessageWrapper, ImageTimeWrapper, MessageBubble, MessageContainer, MessageText, MessageTimeWrapper, MessageWrapper, TextMessageWrapper, TimeStyled, VideoMessageWrapper, } from './ChatMessage.style';
-import { ReactComponent as BubbleIcon } from './bubble.svg';
-import { IonIcon, IonSpinner } from '@ionic/react';
-import { checkmarkDoneOutline, checkmarkOutline, document, playOutline, } from 'ionicons/icons';
-import { DateTime } from 'luxon';
-import parse from 'html-react-parser';
-import { PhotoProvider, PhotoView } from 'react-photo-view';
-import { Button_v2 as Button } from '../../../lib2';
-import { timeNormalize } from '../utils';
-function setHttp(link) {
-    //eslint-disable-next-line no-useless-escape
-    if (link.search(/^http[s]?\:\/\//) == -1) {
-        link = 'https://' + link;
-    }
-    return link;
-}
-const matchAndReplaceLinkToATag = (message, messageType) => {
-    const expression = 
-    // eslint-disable-next-line max-len
-    /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
-    const regex = RegExp(expression);
-    return message.split(regex).map((textPart, index) => regex.test(textPart) ? (_jsx("a", Object.assign({ className: "text-link", href: setHttp(textPart), target: "_blank", rel: "noreferrer" }, { children: textPart }), index)) : (_jsx(_Fragment, { children: messageType === 'system' || messageType === 'broadcast'
-            ? parse(textPart)
-            : textPart })));
-};
-const fileSizeNormalize = (bytes, si = false, dp = 1) => {
-    const thresh = si ? 1000 : 1024;
-    if (Math.abs(bytes) < thresh) {
-        return bytes + ' B';
-    }
-    const units = si
-        ? ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
-        : ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    let u = -1;
-    const r = Math.pow(10, dp);
-    do {
-        bytes /= thresh;
-        ++u;
-    } while (Math.round(Math.abs(bytes) * r) / r >= thresh &&
-        u < units.length - 1);
-    return bytes.toFixed(dp) + ' ' + units[u];
-};
-// eslint-disable-next-line react/display-name
-const MessageTime = React.memo(({ position, time, timeZone, status }) => {
-    const messageDate = DateTime.fromMillis(time)
-        .setLocale('uk')
-        .setZone(timeZone);
-    const isToday = messageDate.hasSame(DateTime.now().setZone(timeZone), 'day');
-    return (_jsxs(TimeStyled, Object.assign({ position: position }, { children: [_jsx("span", Object.assign({ className: "time" }, { children: messageDate.toLocaleString(isToday ? DateTime.TIME_SIMPLE : DateTime.DATETIME_SHORT) })), position === 'right' &&
-                (status === 'loading' ? (_jsx(IonSpinner, { name: "crescent" })) : (_jsx(IonIcon, { icon: status === 'viewed' ? checkmarkDoneOutline : checkmarkOutline })))] })));
-});
-const ChatMessage = ({ message, position = 'right', time, timeZone = 'Europe/Kiev', status, messageType = 'text', onFileClick, fileInfo, locale = 'uk', fileUrl, buttons, }) => {
-    var _a;
-    const [currentMessage, setCurrentMessage] = useState(typeof message === 'string' ? message : '');
-    const [isVideoPlaying, setVideoPlaying] = useState(false);
-    const [videoTime, setVideoTime] = useState(null);
-    const [maxWidth, setMaxWidth] = useState(0);
-    const [maxHeight] = useState(350);
-    const [mediaContainerSize, setMediaContainerSize] = useState({
-        width: '100%',
-        height: '350px',
-    });
-    const videoRef = useRef(null);
-    const messageRef = useRef(null);
-    useEffect(() => {
-        if (message instanceof File) {
-            const fr = new FileReader();
-            fr.onload = () => {
-                setCurrentMessage(fr.result);
-            };
-            fr.readAsDataURL(message);
-        }
-        else {
-            setCurrentMessage(message);
-        }
-    }, [message]);
-    useEffect(() => {
-        var _a;
-        if (!messageRef.current)
-            return;
-        setMaxWidth(((_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) ? messageRef.current.offsetWidth - 2 : 0);
-        window.addEventListener('resize', () => {
-            var _a;
-            return setMaxWidth(((_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) ? messageRef.current.offsetWidth - 2 : 0);
-        });
-        return () => {
-            window.removeEventListener('resize', () => setMaxWidth(0));
-        };
-    }, []);
-    useEffect(() => {
-        if (!(messageRef === null || messageRef === void 0 ? void 0 : messageRef.current))
-            return;
-        if (messageType === 'image' ||
-            messageType === 'video' ||
-            (messageType === 'broadcast' && fileUrl)) {
-            if ((fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.width) && (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.height)) {
-                let width = fileInfo.width;
-                let height = fileInfo.height;
-                let ratio = 0;
-                if (width > maxWidth) {
-                    ratio = maxWidth / width;
-                    height = height * ratio;
-                    width = width * ratio;
-                }
-                if (height > maxHeight) {
-                    ratio = maxHeight / height;
-                    width = width * ratio;
-                }
-                setMediaContainerSize({
-                    width: `${Math.round(width) + (messageType !== 'broadcast' ? 2 : 1)}px`,
-                    height: `${Math.round(height > 350 ? 350 : height) + 2}px`,
-                });
-            }
-        }
-    }, [
-        message,
-        maxWidth,
-        fileUrl,
-        messageType,
-        fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.width,
-        fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.height,
-        maxHeight,
-    ]);
-    useEffect(() => {
-        var _a, _b;
-        if (!videoRef.current)
-            return;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('play', handlePlayVideoState);
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePlayVideoState);
-        return () => {
-            var _a, _b;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('play', handlePlayVideoState);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('pause', handlePlayVideoState);
-        };
-    }, [videoRef]);
-    useEffect(() => {
-        if (!videoRef.current)
-            return;
-        let countInterval = 0;
-        const i = setInterval(function () {
-            var _a, _b;
-            countInterval++;
-            if (((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) && ((_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) > 0) {
-                const minutes = Math.floor(videoRef.current.duration / 60);
-                const seconds = Math.floor(videoRef.current.duration % 60);
-                setVideoTime(`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`);
-                clearInterval(i);
-            }
-            else if (countInterval >= 20) {
-                clearInterval(i);
-            }
-        }, 200);
-    }, [videoRef, message]);
-    const handlePlayVideoState = useCallback(() => {
-        var _a;
-        if (!videoRef.current)
-            return;
-        if ((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused) {
-            videoRef.current.removeAttribute('controls');
-            setVideoPlaying(false);
-        }
-        else {
-            videoRef.current.setAttribute('controls', '');
-            setVideoPlaying(true);
-        }
-    }, [videoRef]);
-    const handlePlayVideo = useCallback(() => {
-        if (!videoRef.current)
-            return;
-        const video = videoRef.current;
-        if ((video === null || video === void 0 ? void 0 : video.paused) || (video === null || video === void 0 ? void 0 : video.ended)) {
-            video.play();
-        }
-    }, [videoRef]);
-    let content;
-    switch (messageType) {
-        case 'text':
-            content = (_jsxs(_Fragment, { children: [_jsxs(TextMessageWrapper, { children: [_jsx(MessageText, { children: matchAndReplaceLinkToATag(currentMessage.trim()) }), _jsx(MessageTimeWrapper, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) })] }), _jsx(MessageBubble, Object.assign({ position: position }, { children: _jsx(BubbleIcon, {}) }))] }));
-            break;
-        case 'system':
-            content = (_jsxs(TextMessageWrapper, { children: [_jsx(MessageText, { children: matchAndReplaceLinkToATag(timeNormalize(currentMessage.trim(), timeZone, locale), 'system') }), _jsx(MessageTimeWrapper, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) })] }));
-            break;
-        case 'image':
-            content = (_jsx(PhotoProvider, { children: _jsx(PhotoView, Object.assign({ src: currentMessage }, { children: _jsxs(ImageMessageWrapper, Object.assign({ position: position, style: Object.assign({}, mediaContainerSize) }, { children: [_jsx("img", { src: currentMessage }), _jsx(ImageTimeWrapper, Object.assign({ position: position }, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) }))] })) })) }));
-            break;
-        case 'file':
-            content = (_jsxs(_Fragment, { children: [_jsxs(FileMessageWrapper, Object.assign({ position: position, onClick: () => status !== 'loading'
-                            ? onFileClick === null || onFileClick === void 0 ? void 0 : onFileClick('file', currentMessage)
-                            : null }, { children: [_jsx("div", Object.assign({ className: "file-icon-wrapper" }, { children: _jsx(IonIcon, { icon: document }) })), _jsxs("div", { children: [_jsx("div", Object.assign({ className: "file-name" }, { children: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.originalName })), _jsx("div", Object.assign({ className: "file-size" }, { children: fileSizeNormalize((_a = fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.size) !== null && _a !== void 0 ? _a : 0, false, 1) }))] }), _jsx(FileTimeWrapper, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) })] })), _jsx(MessageBubble, Object.assign({ position: position }, { children: _jsx(BubbleIcon, {}) }))] }));
-            break;
-        case 'video':
-            content = (_jsxs(VideoMessageWrapper, Object.assign({ position: position, style: Object.assign({}, mediaContainerSize) }, { children: [_jsx("video", { ref: videoRef, src: currentMessage, autoPlay: true, muted: true, playsInline: true }), !isVideoPlaying && (_jsx("button", Object.assign({ className: "play-button", onClick: handlePlayVideo }, { children: _jsx(IonIcon, { icon: playOutline }) }))), !isVideoPlaying && videoTime && (_jsx("div", Object.assign({ className: "video-time" }, { children: videoTime }))), _jsx("div", Object.assign({ className: "video-send-time" }, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) }))] })));
-            break;
-        case 'broadcast':
-            content = (_jsxs("div", Object.assign({ className: 'flex flex-col' }, { children: [fileUrl && (_jsx(PhotoProvider, { children: _jsx(PhotoView, Object.assign({ src: fileUrl }, { children: _jsx(ImageMessageWrapper, Object.assign({ position: position, messageType: messageType, style: Object.assign({}, mediaContainerSize) }, { children: _jsx("img", { src: fileUrl }) })) })) })), _jsxs(TextMessageWrapper, { children: [_jsx(MessageText, { children: matchAndReplaceLinkToATag(timeNormalize(currentMessage.trim(), timeZone, locale), 'broadcast') }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) && (_jsx("div", Object.assign({ className: 'flex flex-row gap-2 mt-3 mb-2' }, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (_jsx("div", Object.assign({ className: 'w-full' }, { children: _jsx(Button, Object.assign({ className: 'w-full', onClick: button.onClickHandler }, { children: button === null || button === void 0 ? void 0 : button.text })) }), `${button === null || button === void 0 ? void 0 : button.text}_${index}`))) }))), _jsx(MessageTimeWrapper, { children: _jsx(MessageTime, { time: time, status: status, timeZone: timeZone, position: position }) })] })] })));
-            break;
-    }
-    return (_jsx(MessageContainer, { children: _jsx(MessageWrapper, Object.assign({ ref: messageRef, position: position, messageType: messageType, style: messageType === 'video' || messageType === 'image'
-                ? Object.assign({}, mediaContainerSize) : messageType === 'broadcast' && fileUrl
-                ? {
-                    minHeight: mediaContainerSize === null || mediaContainerSize === void 0 ? void 0 : mediaContainerSize.height,
-                    width: mediaContainerSize.width,
-                }
-                : {} }, { children: content })) }));
-};
-export default React.memo(ChatMessage);

package/dist/esm/lib/Chat/ChatMessage/ChatMessage.style.js

@@ -1,278 +0,0 @@
-import styled from 'styled-components';
-export const MessageWrapper = styled.div `
-  background: ${({ position, messageType }) => messageType === 'system' || messageType === 'broadcast'
-    ? '#D6F2F9'
-    : position === 'right'
-        ? '#e1fec6'
-        : '#ffffff'};
-  border-radius: ${({ messageType, position }) => messageType === 'system' || messageType === 'broadcast'
-    ? '18px 18px 18px 8px'
-    : messageType === 'image' || messageType === 'video'
-        ? position === 'left'
-            ? '18px 18px 18px 8px'
-            : '18px 18px 8px 18px'
-        : '18px'};
-  max-width: 95%;
-  width: ${({ messageType }) => messageType === 'video' || messageType === 'image' ? '100%' : 'auto'};
-  min-height: 100%;
-  align-self: ${({ position }) => position === 'right' ? 'flex-end' : 'flex-start'};
-  display: flex;
-  position: relative;
-  overflow: ${({ messageType }) => messageType === 'image' || messageType === 'video' ? 'hidden' : 'initial'};
-`;
-export const TextMessageWrapper = styled.div `
-  padding: 9px 12px 3px 12px;
-  min-width: 100px;
-`;
-export const ImageMessageWrapper = styled.div `
-  border-image-width: 0;
-  line-height: 0;
-  font-size: 0;
-  padding: 1px;
-  cursor: pointer;
-
-  & img {
-    max-width: 100%;
-    height: auto;
-    max-height: 350px;
-    object-fit: cover;
-    border-radius: ${({ position, messageType }) => {
-    if (messageType === 'broadcast') {
-        return '18px 18px 0 0';
-    }
-    return position === 'left' ? '18px 18px 18px 8px' : '18px 18px 8px 18px';
-}};
-  }
-`;
-export const ImageTimeWrapper = styled.div `
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  z-index: 10;
-  background: rgba(29, 32, 31, 0.7);
-  border-radius: 100px;
-  height: 18px;
-  padding-right: 4px;
-  padding-left: 4px;
-
-  & .time {
-    color: #ffffff;
-  }
-
-  & ion-icon {
-    font-size: 18px;
-    color: #ffffff;
-  }
-
-  & ion-spinner {
-    --color: #ffffff !important;
-  }
-`;
-export const MessageBubble = styled.div `
-  position: absolute;
-  bottom: 0;
-  right: ${({ position }) => (position === 'right' ? '-9px' : 'initial')};
-  left: ${({ position }) => (position === 'left' ? '-9px' : 'initial')};
-  transform: ${({ position }) => position === 'left' ? 'rotateY(180deg)' : 'none'};
-  width: 24px;
-  height: 17px;
-  z-index: 0;
-  color: ${({ position }) => (position === 'right' ? '#e1fec6' : '#ffffff')};
-`;
-export const MessageText = styled.div `
-  position: relative;
-  z-index: 10;
-  text-align: justify;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  color: #000000;
-  padding-bottom: 5px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  width: 100%;
-
-  b {
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-    color: #1d201f;
-  }
-`;
-export const MessageTimeWrapper = styled.span `
-  direction: ltr;
-  display: flex;
-  justify-content: flex-end;
-  font-size: 18px;
-  height: 18px;
-  flex: 1;
-  line-height: 1;
-  pointer-events: none;
-  user-select: none;
-  vertical-align: middle;
-  visibility: hidden;
-  z-index: 1;
-  margin-left: 4px;
-  padding-right: 0;
-`;
-export const MessageContainer = styled.div `
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-export const TimeStyled = styled.div `
-  align-items: center;
-  bottom: 0;
-  display: flex;
-  height: 18px;
-  line-height: 1;
-  padding: inherit;
-  pointer-events: all;
-  right: 0;
-  visibility: visible;
-  white-space: nowrap;
-  color: ${({ position }) => (position === 'right' ? '#2da430' : '#8E8E93')};
-  column-gap: 4px;
-
-  & .time {
-    font-size: 10px;
-    line-height: 14px;
-  }
-
-  & ion-icon {
-    --ionicon-stroke-width: 32px;
-  }
-
-  & ion-spinner {
-    width: 18px;
-    height: 18px;
-    --color: #2da430;
-  }
-`;
-export const FileMessageWrapper = styled.div `
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  column-gap: 10px;
-  padding: 13px 20px 13px 10px;
-
-  & .file-icon-wrapper {
-    display: flex;
-    flex: 0 0 40px;
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    background: #177590;
-    border-radius: 50%;
-    color: #ffffff;
-    font-size: 18px;
-  }
-
-  & .file-name {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-    color: ${({ position }) => (position === 'right' ? '#3EAA3C' : '#177590')};
-    margin-bottom: 2px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-  }
-
-  & .file-size {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 14px;
-    color: ${({ position }) => (position === 'right' ? '#3EAA3C' : '#8e8e93')};
-    text-transform: capitalize;
-  }
-`;
-export const FileTimeWrapper = styled.div `
-  position: absolute;
-  bottom: 2px;
-  right: 6px;
-  z-index: 10;
-  height: 18px;
-  padding-right: 4px;
-  padding-left: 4px;
-`;
-export const VideoMessageWrapper = styled.div `
-  position: relative;
-  border-image-width: 0;
-  line-height: 0;
-  font-size: 0;
-  padding: 1px;
-
-  & video {
-    max-width: 100%;
-    height: auto;
-    max-height: 350px;
-    object-fit: cover;
-    border-radius: ${({ position }) => position === 'left' ? '18px 18px 18px 8px' : '18px 18px 8px 18px'};
-  }
-
-  & .play-button {
-    position: absolute;
-    padding: 0 0 0 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: rgba(29, 32, 31, 0.7);
-    color: #ffffff;
-    font-size: 22px;
-  }
-
-  & .video-time {
-    position: absolute;
-    top: 7px;
-    left: ${({ position }) => (position === 'right' ? '7px' : 'inherit')};
-    right: ${({ position }) => (position === 'left' ? '7px' : 'inherit')};
-    background: rgba(29, 32, 31, 0.7);
-    padding: 2px 6px;
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 14px;
-    color: #ffffff;
-    border-radius: 100px;
-  }
-
-  & .video-send-time {
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-    z-index: 10;
-    background: rgba(29, 32, 31, 0.7);
-    border-radius: 100px;
-    height: 18px;
-    padding-right: 4px;
-    padding-left: 4px;
-
-    & .time {
-      color: #ffffff;
-    }
-
-    & ion-icon {
-      font-size: 18px;
-      color: #ffffff;
-    }
-
-    & ion-spinner {
-      --color: #ffffff !important;
-    }
-  }
-`;

package/dist/esm/lib/Chat/ChatMessage/index.js

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

package/dist/esm/lib/Chat/ChatMessageSkeleton/ChatMessageSkeleton.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonMessageWrapper, SkeletonWrapper, } from './ChatMessageSkeleton.style';
-import { IonSkeletonText } from '@ionic/react';
-const MessageSkeleton = ({ isBigger, position }) => {
-    return (_jsx(SkeletonMessageWrapper, Object.assign({ position: position, isBigger: isBigger }, { children: _jsx(IonSkeletonText, { animated: true }) })));
-};
-const ChatMessageSkeleton = () => {
-    return (_jsxs(SkeletonWrapper, { children: [_jsx(MessageSkeleton, { position: "left", isBigger: true }), _jsx(MessageSkeleton, { position: "right", isBigger: true }), _jsx(MessageSkeleton, { position: "left", isBigger: true }), _jsx(MessageSkeleton, { position: "right", isBigger: true }), _jsx(MessageSkeleton, { position: "left", isBigger: true }), _jsx(MessageSkeleton, { position: "right", isBigger: true }), _jsx(MessageSkeleton, { position: "left", isBigger: true }), _jsx(MessageSkeleton, { position: "right", isBigger: true })] }));
-};
-export default ChatMessageSkeleton;

package/dist/esm/lib/Chat/ChatMessageSkeleton/ChatMessageSkeleton.style.js

@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-export const SkeletonWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  row-gap: 6px;
-
-  & > ion-skeleton-text {
-    background-image: linear-gradient(
-      to right,
-      rgba(238, 238, 238, 0.7) 8%,
-      rgba(238, 238, 238, 0.8) 18%,
-      rgba(238, 238, 238, 0.7) 33%
-    );
-    --background: #eeeeee;
-  }
-`;
-export const SkeletonMessageWrapper = styled.div `
-  position: relative;
-  width: 90%;
-  align-self: ${({ position }) => position === 'right' ? 'flex-end' : 'flex-start'};
-
-  & > ion-skeleton-text {
-    width: 100%;
-    height: ${({ isBigger }) => (isBigger ? '110px' : '48px')};
-    border-radius: 18px;
-    margin: 0;
-    background-image: linear-gradient(
-      to right,
-      rgba(238, 238, 238, 0.7) 8%,
-      rgba(238, 238, 238, 0.8) 18%,
-      rgba(238, 238, 238, 0.7) 33%
-    );
-    --background: #eeeeee;
-  }
-
-  & > svg {
-    position: absolute;
-    bottom: 0;
-    right: ${({ position }) => (position === 'right' ? '-9px' : 'initial')};
-    left: ${({ position }) => (position === 'left' ? '-9px' : 'initial')};
-    transform: ${({ position }) => position === 'left' ? 'rotateY(180deg)' : 'none'};
-    width: 24px;
-    height: 17px;
-    z-index: 0;
-    color: #eeeeee;
-  }
-`;

package/dist/esm/lib/Chat/ChatMessageSkeleton/index.js

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

package/dist/esm/lib/Chat/EmptyChatList/EmptyChatList.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { EmptyMessage, EmptyWrapper, Title } from './EmptyChatList.style';
-import { IonIcon } from '@ionic/react';
-import { chatbubblesOutline } from 'ionicons/icons';
-import CustomButton from '../../CustomButton';
-const EmptyChatList = ({ title = 'У вас поки немає повідомлень', text, withButton = false, buttonTitle = '', onClick, }) => {
-    return (_jsxs(EmptyWrapper, { children: [_jsx(IonIcon, { icon: chatbubblesOutline, className: 'empty-icon' }), _jsx(Title, { children: title }), text && _jsx(EmptyMessage, { children: text }), withButton && (_jsx(CustomButton, Object.assign({ onClick: onClick, buttonType: "primary" }, { children: buttonTitle })))] }));
-};
-export default React.memo(EmptyChatList);

package/dist/esm/lib/Chat/EmptyChatList/EmptyChatList.style.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-export const EmptyWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 25px;
-
-  .empty-icon {
-    font-size: 60px;
-    color: #177590;
-  }
-`;
-export const Title = styled.h3 `
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
-  color: #1d201f;
-`;
-export const EmptyMessage = styled.div `
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 24px;
-  color: #1d201f;
-  margin-top: -15px;
-`;

package/dist/esm/lib/Chat/EmptyChatList/index.js

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

package/dist/esm/lib/Chat/EmptyChatMessages/EmptyChatMessages.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as Chat } from './chat.svg';
-import { EmptyMessage, EmptyTitle, EmptyWrapper, } from './EmptyChatMessages.style';
-const EmptyChatMessages = ({ title = 'Почніть розмову', text, }) => {
-    return (_jsxs(EmptyWrapper, { children: [_jsx(Chat, {}), _jsx(EmptyTitle, { children: title }), _jsx(EmptyMessage, { children: text })] }));
-};
-export default EmptyChatMessages;

package/dist/esm/lib/Chat/EmptyChatMessages/EmptyChatMessages.style.js

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-export const EmptyWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 288px;
-  width: 100%;
-  background: rgba(29, 32, 31, 0.2);
-  mix-blend-mode: normal;
-  backdrop-filter: blur(12.5px);
-  border-radius: 10px;
-  padding: 24px 16px;
-`;
-export const EmptyTitle = styled.h3 `
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 24px;
-  text-align: center;
-  color: #ffffff;
-  margin-top: 18px;
-  margin-bottom: 8px;
-`;
-export const EmptyMessage = styled.div `
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-  color: #ffffff;
-`;

package/dist/esm/lib/Chat/EmptyChatMessages/index.js

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

package/dist/esm/lib/Chat/LouseConnect/LouseConnect.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonWrapper, LouseConnectWrapper, WarningMessage, } from './LouseConnect.style';
-import { IonIcon } from '@ionic/react';
-import { alertCircleOutline } from 'ionicons/icons';
-import { Button } from '../../../deprecated/button/Button';
-const LouseConnect = ({ onClick }) => {
-    return (_jsxs(LouseConnectWrapper, { children: [_jsxs(WarningMessage, { children: [_jsx(IonIcon, { icon: alertCircleOutline }), _jsxs("div", { children: ["\u0417'\u0454\u0434\u043D\u0430\u043D\u043D\u044F", _jsx("br", {}), " \u043F\u0435\u0440\u0435\u0440\u0432\u0430\u043D\u043E"] })] }), _jsx(ButtonWrapper, { children: _jsx(Button, Object.assign({ buttonType: "secondaryWithStroke", isDisabled: false, onClick: onClick }, { children: "\u0412\u0456\u0434\u043D\u043E\u0432\u0438\u0442\u0438" })) })] }));
-};
-export default LouseConnect;

package/dist/esm/lib/Chat/LouseConnect/LouseConnect.style.js

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-export const LouseConnectWrapper = styled.div `
-  background: #ffffff;
-  border: 1px solid #c13e18;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  width: 100%;
-  padding: 16px 16px 16px 19px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const WarningMessage = styled.div `
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 16px;
-  color: #c13e18;
-  flex: 0 0 50%;
-
-  & div {
-    margin-left: 13px;
-  }
-
-  & ion-icon {
-    font-size: 18px;
-  }
-`;
-export const ButtonWrapper = styled.div `
-  max-width: 122px;
-  width: 100%;
-`;