@mindly/ui-components 8.0.0-alpha.38 → 8.1.0

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.d.ts

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

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

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

package/dist/esm/lib/Chat/ChatMessageSkeleton/ChatMessageSkeleton.d.ts

@@ -1,2 +0,0 @@
-declare const ChatMessageSkeleton: () => import("react/jsx-runtime").JSX.Element;
-export default ChatMessageSkeleton;

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.d.ts

@@ -1,7 +0,0 @@
-export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-type SkeletonMessageWrapperProps = {
-    isBigger?: boolean;
-    position: 'left' | 'right';
-};
-export declare const SkeletonMessageWrapper: import("styled-components").StyledComponent<"div", any, SkeletonMessageWrapperProps, never>;
-export {};

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.d.ts

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

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

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

package/dist/esm/lib/Chat/EmptyChatList/EmptyChatList.d.ts

@@ -1,11 +0,0 @@
-import React, { FC } from 'react';
-type EmptyChatList = {
-    title?: string;
-    text?: string;
-    withButton?: boolean;
-    buttonTitle?: string;
-    onClick?: () => void;
-};
-declare const EmptyChatList: FC<EmptyChatList>;
-declare const _default: React.NamedExoticComponent<EmptyChatList>;
-export default _default;

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.d.ts

@@ -1,3 +0,0 @@
-export declare const EmptyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const EmptyMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

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.d.ts

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

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

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

package/dist/esm/lib/Chat/EmptyChatMessages/EmptyChatMessages.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-type EmptyChatMessagesProps = {
-    title?: string;
-    text: string;
-};
-declare const EmptyChatMessages: FC<EmptyChatMessagesProps>;
-export default EmptyChatMessages;

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.d.ts

@@ -1,3 +0,0 @@
-export declare const EmptyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const EmptyMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

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.d.ts

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

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

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

package/dist/esm/lib/Chat/LouseConnect/LouseConnect.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-type LouseConnectProps = {
-    onClick?: () => void;
-};
-declare const LouseConnect: FC<LouseConnectProps>;
-export default LouseConnect;

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.d.ts

@@ -1,3 +0,0 @@
-export declare const LouseConnectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WarningMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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%;
-`;

package/dist/esm/lib/Chat/LouseConnect/index.d.ts

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

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

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

package/dist/esm/lib/Chat/Textarea/Textarea.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { WithTranslation } from 'react-i18next';
-type FileInfoType = {
-    originalName: string;
-    size: number;
-    width?: number;
-    height?: number;
-};
-type TextareaProps = {
-    onSend: (value: string) => void;
-    defaultValue?: string;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    isOpen: boolean;
-    maxLength: number;
-    onError?: (message: string) => void;
-    onFileSelect?: (file: File | null, type: 'file' | 'image' | 'video', fileInfo: FileInfoType) => void;
-    t?: WithTranslation['t'];
-};
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLIonFooterElement>>>;
-export default _default;

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

@@ -1,103 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useRef, useState, } from 'react';
-import { IonIcon } from '@ionic/react';
-import { arrowUpOutline } from 'ionicons/icons';
-import { AttachButton, SendButton, StyledFooter, StyledToolbar, TextareaStyled, TextareaWrapper, } from './Textarea.style';
-import { ReactComponent as AttachIcon } from './shape.svg';
-import { loadImage, loadVideo } from './utils';
-const acceptedImageTypes = [
-    'image/gif',
-    'image/jpeg',
-    'image/jpg',
-    'image/png',
-];
-const acceptedVideoTypes = [
-    'video/mp4',
-    'video/ogg',
-    'video/webm',
-    'video/webm',
-    'video/mov',
-    'video/quicktime',
-];
-const Textarea = forwardRef(({ onSend, defaultValue = '', onFocus, onBlur, isOpen, maxLength, onError, onFileSelect, t, }, ref) => {
-    const [value, setValue] = useState(defaultValue);
-    const textareaRef = useRef(null);
-    const handleSend = (e) => {
-        e.preventDefault();
-        const sendMessage = value === null || value === void 0 ? void 0 : value.trim();
-        if (sendMessage.length > maxLength) {
-            onError === null || onError === void 0 ? void 0 : onError(sendMessage);
-            return;
-        }
-        sendMessage.length && onSend(sendMessage);
-        setValue('');
-        if (textareaRef.current) {
-            textareaRef.current.style.height = '33px';
-        }
-    };
-    const handleChange = useCallback((e) => {
-        var _a;
-        const val = e.target.value;
-        if (textareaRef.current) {
-            textareaRef.current.style.height =
-                ((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px';
-        }
-        setValue(val);
-    }, [textareaRef]);
-    const handleFileChange = (e) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]))
-            return;
-        const _URL = window.URL || window.webkitURL;
-        const file = (_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0];
-        const objUrl = _URL.createObjectURL(file);
-        if (acceptedImageTypes.includes(file.type)) {
-            try {
-                const img = yield loadImage(objUrl);
-                onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(file, 'image', {
-                    originalName: file.name,
-                    size: file.size,
-                    width: img.width,
-                    height: img.height,
-                });
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        else if (acceptedVideoTypes.includes(file.type)) {
-            try {
-                const video = yield loadVideo(objUrl);
-                onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(file, 'video', {
-                    originalName: file.name,
-                    size: file.size,
-                    width: video.videoWidth,
-                    height: video.videoHeight,
-                });
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        else {
-            onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(file, 'file', {
-                originalName: file.name,
-                size: file.size,
-            });
-        }
-    });
-    return (_jsx(StyledFooter, Object.assign({ ref: ref }, { children: _jsx(StyledToolbar, Object.assign({ isOpen: isOpen }, { children: _jsxs(TextareaWrapper, { children: [_jsxs(AttachButton, Object.assign({ onClick: (e) => {
-                            e.stopPropagation();
-                        } }, { children: [_jsx(AttachIcon, {}), _jsx("input", { type: "file", onChange: handleFileChange })] })), _jsx(TextareaStyled, { ref: textareaRef, onFocus: onFocus, onBlur: onBlur, onChange: handleChange, value: value, placeholder: t === null || t === void 0 ? void 0 : t('chat.new_message_hint') }), _jsx(SendButton, Object.assign({ onClick: handleSend, onTouchEnd: handleSend }, { children: _jsx(IonIcon, { icon: arrowUpOutline }) }))] }) })) })));
-});
-Textarea.displayName = 'Textarea';
-export default React.memo(Textarea);