softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
1 lines • 74.3 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/components/Chat/SelectedMessage.tsx","../../../src/assets/icons.tsx","../../../src/constants/Colors.ts","../../../src/utils/index.ts","../../../src/contexts/ChatProvider.tsx","../../../src/contexts/ModalProvider.tsx","../../../src/theme/colors.ts","../../../src/theme/index.ts","../../../src/contexts/MessageStateContext.tsx","../../../src/constants/defaultUser.ts"],"sourcesContent":["import React from 'react';\r\nimport {\r\n TouchableOpacity,\r\n StyleSheet,\r\n View,\r\n Text,\r\n FlatList,\r\n} from \"react-native\";\r\nimport { AttachmentTypes, Message } from \"softchatjs-core\";\r\nimport { CloseIcon } from \"../../assets/icons\";\r\nimport { Colors } from \"../../constants/Colors\";\r\nimport { truncate } from \"../../utils\";\r\nimport { useConfig } from \"../../contexts/ChatProvider\";\r\nimport { FlashList } from \"@shopify/flash-list\";\r\n\r\ntype SelectedMessageProps = {\r\n message: Message | null;\r\n messageRef: React.MutableRefObject<View | undefined> | null;\r\n scrollRef: React.MutableRefObject<FlashList<string | Message> | null>;\r\n onClear: () => void;\r\n itemIndex: number;\r\n};\r\n\r\nexport default function SelectedMessage(props: SelectedMessageProps) {\r\n const { message, onClear, messageRef, scrollRef, itemIndex } = props;\r\n const { theme, fontFamily } = useConfig();\r\n \r\n const highLightChat = () => {\r\n try {\r\n if (messageRef?.current) {\r\n messageRef.current.setNativeProps({\r\n style: { backgroundColor: theme?.background.secondary },\r\n });\r\n setTimeout(() => {\r\n if (messageRef.current) {\r\n messageRef.current.setNativeProps({\r\n style: { backgroundColor: \"transparent\" },\r\n });\r\n }\r\n }, 1000);\r\n if (scrollRef?.current) {\r\n scrollRef.current.scrollToIndex({ animated: true, index: itemIndex });\r\n }\r\n }\r\n } catch (error) {\r\n if (error instanceof Error) {\r\n console.warn(error?.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n <View style={{ \r\n ...styles.main,\r\n borderTopColor: theme?.divider,\r\n }}>\r\n {message && (\r\n <TouchableOpacity style={{ flex: 1 }} onPress={() => highLightChat()}>\r\n <Text style={{\r\n ...styles.message,\r\n color: theme?.text.secondary,\r\n fontFamily\r\n }}>{message.attachmentType === AttachmentTypes.NONE? truncate(message.message, 55) : message.attachedMedia?.[0]?.type || '...'}</Text>\r\n </TouchableOpacity>\r\n )}\r\n <TouchableOpacity activeOpacity={0.7} onPress={onClear}>\r\n <CloseIcon bgColor={Colors.greyLighter} size={20} />\r\n </TouchableOpacity>\r\n </View>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n main: {\r\n height: 40,\r\n width: \"100%\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n paddingHorizontal: 10,\r\n borderTopWidth: 0.5,\r\n },\r\n message: {\r\n marginStart: 8,\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { View } from \"react-native\";\r\nimport { Svg, Path, G, Defs, ClipPath, Rect } from \"react-native-svg\";\r\n\r\ntype Icon = {\r\n size?: number;\r\n color?: string;\r\n};\r\n\r\nexport function XIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M6 18L17.94 6M18 18L6.06 6\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function TimesIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return <XIcon size={size} color={color} />;\r\n}\r\n\r\nexport function CloseIcon(props: Icon & { bgColor: string }) {\r\n const { size = 25, color = \"black\", bgColor } = props;\r\n return (\r\n <View\r\n style={{ padding: 3, borderRadius: size * 2, backgroundColor: bgColor }}\r\n >\r\n <TimesIcon size={size} color={color} />\r\n </View>\r\n );\r\n}\r\n\r\nexport function EmojiIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M12 17.5C14.33 17.5 16.3 16.04 17.11 14H6.89C7.69 16.04 9.67 17.5 12 17.5ZM8.5 11C8.89782 11 9.27936 10.842 9.56066 10.5607C9.84196 10.2794 10 9.89782 10 9.5C10 9.10218 9.84196 8.72064 9.56066 8.43934C9.27936 8.15804 8.89782 8 8.5 8C8.10218 8 7.72064 8.15804 7.43934 8.43934C7.15804 8.72064 7 9.10218 7 9.5C7 9.89782 7.15804 10.2794 7.43934 10.5607C7.72064 10.842 8.10218 11 8.5 11ZM15.5 11C15.8978 11 16.2794 10.842 16.5607 10.5607C16.842 10.2794 17 9.89782 17 9.5C17 9.10218 16.842 8.72064 16.5607 8.43934C16.2794 8.15804 15.8978 8 15.5 8C15.1022 8 14.7206 8.15804 14.4393 8.43934C14.158 8.72064 14 9.10218 14 9.5C14 9.89782 14.158 10.2794 14.4393 10.5607C14.7206 10.842 15.1022 11 15.5 11ZM12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 2C6.47 2 2 6.5 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function SendIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M9.94011 12.646L7.69211 11.897C5.33911 11.113 4.16211 10.721 4.16211 9.99998C4.16211 9.27998 5.33911 8.88698 7.69211 8.10298L16.2051 5.26498C17.8611 4.71298 18.6891 4.43698 19.1261 4.87398C19.5631 5.31098 19.2871 6.13898 18.7361 7.79398L15.8971 16.308C15.1131 18.661 14.7211 19.838 14.0001 19.838C13.2801 19.838 12.8871 18.661 12.1031 16.308L11.3531 14.061L15.7071 9.70698C15.8893 9.51838 15.9901 9.26578 15.9878 9.00358C15.9855 8.74138 15.8803 8.49057 15.6949 8.30516C15.5095 8.11976 15.2587 8.01459 14.9965 8.01231C14.7343 8.01003 14.4817 8.11082 14.2931 8.29298L9.94011 12.646Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function AttachmentIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M21.4381 11.662L12.2481 20.852C11.1222 21.9778 9.59528 22.6103 8.00309 22.6103C6.41091 22.6103 4.88394 21.9778 3.75809 20.852C2.63225 19.7261 1.99976 18.1992 1.99976 16.607C1.99976 15.0148 2.63225 13.4878 3.75809 12.362L12.9481 3.17198C13.6987 2.42142 14.7166 1.99976 15.7781 1.99976C16.8395 1.99976 17.8575 2.42142 18.6081 3.17198C19.3587 3.92254 19.7803 4.94052 19.7803 6.00198C19.7803 7.06344 19.3587 8.08142 18.6081 8.83198L9.40809 18.022C9.22227 18.2078 9.00167 18.3552 8.75889 18.4558C8.5161 18.5563 8.25588 18.6081 7.99309 18.6081C7.7303 18.6081 7.47009 18.5563 7.2273 18.4558C6.98451 18.3552 6.76391 18.2078 6.57809 18.022C6.39227 17.8362 6.24487 17.6156 6.14431 17.3728C6.04374 17.13 5.99198 16.8698 5.99198 16.607C5.99198 16.3442 6.04374 16.084 6.14431 15.8412C6.24487 15.5984 6.39227 15.3778 6.57809 15.192L15.0681 6.71198\"\r\n stroke={color}\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function MicIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 256 256\" fill=\"none\">\r\n <Path\r\n d=\"M128 176C140.726 175.987 152.928 170.925 161.927 161.927C170.925 152.928 175.987 140.726 176 128V64C176 51.2696 170.943 39.0606 161.941 30.0589C152.939 21.0571 140.73 16 128 16C115.27 16 103.061 21.0571 94.0589 30.0589C85.0571 39.0606 80 51.2696 80 64V128C80.0132 140.726 85.0746 152.928 94.0735 161.927C103.072 170.925 115.274 175.987 128 176ZM96 64C96 55.5131 99.3714 47.3737 105.373 41.3726C111.374 35.3714 119.513 32 128 32C136.487 32 144.626 35.3714 150.627 41.3726C156.629 47.3737 160 55.5131 160 64V128C160 136.487 156.629 144.626 150.627 150.627C144.626 156.629 136.487 160 128 160C119.513 160 111.374 156.629 105.373 150.627C99.3714 144.626 96 136.487 96 128V64ZM136 207.6V232C136 234.122 135.157 236.157 133.657 237.657C132.157 239.157 130.122 240 128 240C125.878 240 123.843 239.157 122.343 237.657C120.843 236.157 120 234.122 120 232V207.6C100.276 205.593 81.9976 196.344 68.6984 181.641C55.3992 166.938 48.0244 147.825 48 128C48 125.878 48.8429 123.843 50.3431 122.343C51.8434 120.843 53.8783 120 56 120C58.1217 120 60.1566 120.843 61.6569 122.343C63.1571 123.843 64 125.878 64 128C64 144.974 70.7428 161.253 82.7452 173.255C94.7475 185.257 111.026 192 128 192C144.974 192 161.253 185.257 173.255 173.255C185.257 161.253 192 144.974 192 128C192 125.878 192.843 123.843 194.343 122.343C195.843 120.843 197.878 120 200 120C202.122 120 204.157 120.843 205.657 122.343C207.157 123.843 208 125.878 208 128C207.976 147.825 200.601 166.938 187.302 181.641C174.002 196.344 155.724 205.593 136 207.6Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function ReplyIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M8 9.8V10.7L9.7 11C12.3 11.4 14.2 12.4 15.6 13.7C13.9 13.2 12.1 12.9 10 12.9H8V14.2L5.8 12L8 9.8ZM10 5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function SearchIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 18 18\" fill=\"none\">\r\n <Path\r\n d=\"M7.76999 15.3C6.2807 15.3 4.82485 14.8584 3.58655 14.031C2.34825 13.2036 1.38311 12.0275 0.813181 10.6516C0.243253 9.27567 0.0941338 7.76164 0.38468 6.30096C0.675227 4.84029 1.39239 3.49857 2.44548 2.44548C3.49857 1.39239 4.84029 0.675227 6.30096 0.38468C7.76164 0.0941338 9.27567 0.243253 10.6516 0.813181C12.0275 1.38311 13.2036 2.34825 14.031 3.58655C14.8584 4.82485 15.3 6.2807 15.3 7.76999C15.3 8.75885 15.1052 9.73802 14.7268 10.6516C14.3484 11.5652 13.7937 12.3953 13.0945 13.0945C12.3953 13.7937 11.5652 14.3484 10.6516 14.7268C9.73802 15.1052 8.75885 15.3 7.76999 15.3ZM7.76999 1.74999C6.58331 1.74999 5.42327 2.10189 4.43657 2.76118C3.44988 3.42046 2.68084 4.35754 2.22672 5.45389C1.77259 6.55025 1.65377 7.75665 1.88528 8.92054C2.11679 10.0844 2.68824 11.1535 3.52735 11.9926C4.36647 12.8317 5.43556 13.4032 6.59945 13.6347C7.76334 13.8662 8.96974 13.7474 10.0661 13.2933C11.1625 12.8391 12.0995 12.0701 12.7588 11.0834C13.4181 10.0967 13.77 8.93668 13.77 7.74999C13.77 6.15869 13.1379 4.63257 12.0126 3.50735C10.8874 2.38213 9.36129 1.74999 7.76999 1.74999Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M17 17.75C16.9014 17.7504 16.8038 17.7312 16.7128 17.6934C16.6218 17.6557 16.5392 17.6001 16.47 17.53L12.34 13.4C12.2075 13.2578 12.1354 13.0697 12.1388 12.8754C12.1422 12.6811 12.2209 12.4958 12.3583 12.3583C12.4958 12.2209 12.6811 12.1422 12.8754 12.1388C13.0697 12.1354 13.2578 12.2075 13.4 12.34L17.53 16.47C17.6704 16.6106 17.7493 16.8012 17.7493 17C17.7493 17.1987 17.6704 17.3893 17.53 17.53C17.4607 17.6001 17.3782 17.6557 17.2872 17.6934C17.1961 17.7312 17.0985 17.7504 17 17.75Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function KeyboardIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M7 9C7 9.26522 6.89464 9.51957 6.70711 9.70711C6.51957 9.89464 6.26522 10 6 10C5.73478 10 5.48043 9.89464 5.29289 9.70711C5.10536 9.51957 5 9.26522 5 9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8C6.26522 8 6.51957 8.10536 6.70711 8.29289C6.89464 8.48043 7 8.73478 7 9ZM7 12C7 12.2652 6.89464 12.5196 6.70711 12.7071C6.51957 12.8946 6.26522 13 6 13C5.73478 13 5.48043 12.8946 5.29289 12.7071C5.10536 12.5196 5 12.2652 5 12C5 11.7348 5.10536 11.4804 5.29289 11.2929C5.48043 11.1054 5.73478 11 6 11C6.26522 11 6.51957 11.1054 6.70711 11.2929C6.89464 11.4804 7 11.7348 7 12ZM10 12C10 12.2652 9.89464 12.5196 9.70711 12.7071C9.51957 12.8946 9.26522 13 9 13C8.73478 13 8.48043 12.8946 8.29289 12.7071C8.10536 12.5196 8 12.2652 8 12C8 11.7348 8.10536 11.4804 8.29289 11.2929C8.48043 11.1054 8.73478 11 9 11C9.26522 11 9.51957 11.1054 9.70711 11.2929C9.89464 11.4804 10 11.7348 10 12ZM10 9C10 9.26522 9.89464 9.51957 9.70711 9.70711C9.51957 9.89464 9.26522 10 9 10C8.73478 10 8.48043 9.89464 8.29289 9.70711C8.10536 9.51957 8 9.26522 8 9C8 8.73478 8.10536 8.48043 8.29289 8.29289C8.48043 8.10536 8.73478 8 9 8C9.26522 8 9.51957 8.10536 9.70711 8.29289C9.89464 8.48043 10 8.73478 10 9ZM13 9C13 9.26522 12.8946 9.51957 12.7071 9.70711C12.5196 9.89464 12.2652 10 12 10C11.7348 10 11.4804 9.89464 11.2929 9.70711C11.1054 9.51957 11 9.26522 11 9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8C12.2652 8 12.5196 8.10536 12.7071 8.29289C12.8946 8.48043 13 8.73478 13 9ZM13 12C13 12.2652 12.8946 12.5196 12.7071 12.7071C12.5196 12.8946 12.2652 13 12 13C11.7348 13 11.4804 12.8946 11.2929 12.7071C11.1054 12.5196 11 12.2652 11 12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12ZM16 9C16 9.26522 15.8946 9.51957 15.7071 9.70711C15.5196 9.89464 15.2652 10 15 10C14.7348 10 14.4804 9.89464 14.2929 9.70711C14.1054 9.51957 14 9.26522 14 9C14 8.73478 14.1054 8.48043 14.2929 8.29289C14.4804 8.10536 14.7348 8 15 8C15.2652 8 15.5196 8.10536 15.7071 8.29289C15.8946 8.48043 16 8.73478 16 9ZM16 12C16 12.2652 15.8946 12.5196 15.7071 12.7071C15.5196 12.8946 15.2652 13 15 13C14.7348 13 14.4804 12.8946 14.2929 12.7071C14.1054 12.5196 14 12.2652 14 12C14 11.7348 14.1054 11.4804 14.2929 11.2929C14.4804 11.1054 14.7348 11 15 11C15.2652 11 15.5196 11.1054 15.7071 11.2929C15.8946 11.4804 16 11.7348 16 12ZM19 9C19 9.26522 18.8946 9.51957 18.7071 9.70711C18.5196 9.89464 18.2652 10 18 10C17.7348 10 17.4804 9.89464 17.2929 9.70711C17.1054 9.51957 17 9.26522 17 9C17 8.73478 17.1054 8.48043 17.2929 8.29289C17.4804 8.10536 17.7348 8 18 8C18.2652 8 18.5196 8.10536 18.7071 8.29289C18.8946 8.48043 19 8.73478 19 9ZM19 12C19 12.2652 18.8946 12.5196 18.7071 12.7071C18.5196 12.8946 18.2652 13 18 13C17.7348 13 17.4804 12.8946 17.2929 12.7071C17.1054 12.5196 17 12.2652 17 12C17 11.7348 17.1054 11.4804 17.2929 11.2929C17.4804 11.1054 17.7348 11 18 11C18.2652 11 18.5196 11.1054 18.7071 11.2929C18.8946 11.4804 19 11.7348 19 12Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M2 11C2 8.172 2 6.757 2.879 5.879C3.757 5 5.172 5 8 5H16C18.828 5 20.243 5 21.121 5.879C22 6.757 22 8.172 22 11V13C22 15.828 22 17.243 21.121 18.121C20.243 19 18.828 19 16 19H8C5.172 19 3.757 19 2.879 18.121C2 17.243 2 15.828 2 13V11Z\"\r\n stroke={color}\r\n strokeWidth=\"1.5\"\r\n />\r\n <Path\r\n d=\"M7 16H17\"\r\n stroke={color}\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function ImageIcon(props: Icon) {\r\n const { color = \"#85B6FF\", size = 25 } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 2 2\" fill=\"none\">\r\n <Path\r\n d=\"M1.75895 0.4375H0.554688C0.421875 0.4375 0.3125 0.544961 0.3125 0.67707V1.63543C0.3125 1.76754 0.421875 1.875 0.554688 1.875H1.75781C1.89062 1.875 2 1.77273 2 1.64062V0.67707C2 0.544961 1.89188 0.4375 1.75895 0.4375ZM1.45758 0.677109C1.49307 0.677325 1.5277 0.688047 1.55711 0.707922C1.58651 0.727798 1.60937 0.755936 1.62281 0.788788C1.63624 0.82164 1.63964 0.857734 1.63258 0.892518C1.62553 0.927301 1.60833 0.959216 1.58316 0.984237C1.55798 1.00926 1.52597 1.02626 1.49114 1.03311C1.45631 1.03995 1.42024 1.03633 1.38747 1.0227C1.3547 1.00907 1.3267 0.986037 1.30701 0.956511C1.28731 0.926986 1.2768 0.892289 1.2768 0.856797C1.27698 0.809005 1.29612 0.763239 1.33002 0.729544C1.36391 0.695849 1.40979 0.676977 1.45758 0.67707V0.677109ZM0.553086 1.75523C0.48668 1.75523 0.436445 1.70152 0.436445 1.63547V1.38223L0.789805 1.06664C0.824349 1.03625 0.86913 1.02009 0.915118 1.02142C0.961107 1.02275 1.00488 1.04146 1.03762 1.07379L1.2823 1.31641L0.840898 1.7552L0.553086 1.75523ZM1.875 1.63543C1.87499 1.65117 1.87189 1.66676 1.86585 1.6813C1.85982 1.69584 1.85098 1.70905 1.83984 1.72017C1.8287 1.7313 1.81548 1.74012 1.80093 1.74612C1.78637 1.75213 1.77078 1.75522 1.75504 1.7552H1.01172L1.46906 1.30078C1.50152 1.2734 1.54258 1.25833 1.58504 1.25822C1.6275 1.2581 1.66865 1.27295 1.70125 1.30016L1.875 1.44762V1.63543Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M1.5 0.125H0.25C0.183696 0.125 0.120107 0.151339 0.0732233 0.198223C0.0263392 0.245107 0 0.308696 0 0.375L0 1.375C4.57233e-05 1.43043 0.0184781 1.48427 0.0524089 1.5281C0.0863397 1.57193 0.133852 1.60326 0.1875 1.61719V0.59375C0.1875 0.519158 0.217132 0.447621 0.269876 0.394876C0.322621 0.342132 0.394158 0.3125 0.46875 0.3125H1.74219C1.72826 0.258852 1.69693 0.21134 1.6531 0.177409C1.60927 0.143478 1.55543 0.125046 1.5 0.125Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function CameraIcon(props: Icon) {\r\n const { size = 25, color = \"white\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 448 352\" fill=\"none\">\r\n <Path\r\n d=\"M400 64H341C338 64 334.28 62.06 331.38 59L305.44 18.06C305.03 17.4103 304.572 16.7919 304.07 16.21C295.11 5.76 283 0 270 0H178C165 0 152.89 5.76 143.93 16.21C143.428 16.7919 142.97 17.4103 142.56 18.06L116.62 59.06C114.4 61.48 111.28 64.06 108 64.06V56.06C108 51.8165 106.314 47.7469 103.314 44.7463C100.313 41.7457 96.2435 40.06 92 40.06H68C63.7565 40.06 59.6869 41.7457 56.6863 44.7463C53.6857 47.7469 52 51.8165 52 56.06V64.06H48C35.2737 64.0732 23.0724 69.1346 14.0735 78.1335C5.07462 87.1324 0.0132359 99.3337 0 112.06V304C0.0132359 316.726 5.07462 328.928 14.0735 337.927C23.0724 346.925 35.2737 351.987 48 352H400C412.726 351.987 424.928 346.925 433.927 337.927C442.925 328.928 447.987 316.726 448 304V112C447.987 99.2737 442.925 87.0724 433.927 78.0735C424.928 69.0746 412.726 64.0132 400 64ZM224 288C205.013 288 186.452 282.37 170.665 271.821C154.878 261.272 142.574 246.279 135.308 228.738C128.042 211.196 126.14 191.894 129.845 173.271C133.549 154.649 142.692 137.544 156.118 124.118C169.544 110.692 186.649 101.549 205.271 97.8446C223.894 94.1404 243.196 96.0416 260.738 103.308C278.279 110.574 293.272 122.878 303.821 138.665C314.37 154.452 320 173.013 320 192C319.971 217.452 309.847 241.853 291.85 259.85C273.853 277.847 249.452 287.971 224 288Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function LocationIcon(props: Icon) {\r\n const { size = 25, color = \"#4ECB71\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 2 2\" fill=\"none\">\r\n <G clip-path=\"url(#clip0_653_253)\">\r\n <Path\r\n d=\"M1 0.125C0.654961 0.125 0.375 0.376992 0.375 0.6875C0.375 1.1875 1 1.875 1 1.875C1 1.875 1.625 1.1875 1.625 0.6875C1.625 0.376992 1.34504 0.125 1 0.125ZM1 1C0.950555 1 0.90222 0.985338 0.861107 0.957867C0.819995 0.930397 0.787952 0.891352 0.76903 0.845671C0.750108 0.799989 0.745157 0.749723 0.754804 0.701227C0.76445 0.652732 0.78826 0.608186 0.823223 0.573223C0.858186 0.53826 0.902732 0.51445 0.951227 0.504804C0.999723 0.495157 1.04999 0.500108 1.09567 0.51903C1.14135 0.537952 1.1804 0.569995 1.20787 0.611107C1.23534 0.65222 1.25 0.700555 1.25 0.75C1.24993 0.816282 1.22357 0.879828 1.1767 0.926697C1.12983 0.973565 1.06628 0.999928 1 1Z\"\r\n fill={color}\r\n />\r\n </G>\r\n <Defs>\r\n <ClipPath id=\"clip0_653_253\">\r\n <Rect width=\"2\" height=\"2\" fill=\"white\" />\r\n </ClipPath>\r\n </Defs>\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function DocumentIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 1024 1024\" fill=\"none\">\r\n <Path\r\n d=\"M832 384H576V128H192V896H832V384ZM805.504 320L640 154.496V320H805.504ZM160 64H640L896 320V928C896 936.487 892.629 944.626 886.627 950.627C880.626 956.629 872.487 960 864 960H160C151.513 960 143.374 956.629 137.373 950.627C131.371 944.626 128 936.487 128 928V96C128 87.5131 131.371 79.3737 137.373 73.3726C143.374 67.3714 151.513 64 160 64ZM320 512H704V576H320V512ZM320 320H480V384H320V320ZM320 704H704V768H320V704Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function DoubleCheck(props: Omit<Icon, \"size\">) {\r\n const { color = \"black\" } = props;\r\n return (\r\n <Svg width=\"17\" height=\"8\" viewBox=\"0 0 20 11\" fill=\"none\">\r\n <Path\r\n d=\"M6 5.48498L10.243 9.72798L18.727 1.24298M1 5.48498L5.243 9.72798M13.728 1.24298L10.5 4.49998\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function SingleCheck(props: Omit<Icon, \"size\">) {\r\n const { color = \"black\" } = props;\r\n return (\r\n <Svg width=\"12\" height=\"7\" viewBox=\"0 0 18 13\" fill=\"none\">\r\n <Path\r\n d=\"M1 7.00002L5.95 11.95L16.557 1.34302\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function ClockIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n />\r\n <Path\r\n d=\"M16.5 12H12.25C12.1837 12 12.1201 11.9737 12.0732 11.9268C12.0263 11.8799 12 11.8163 12 11.75V8.5\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function ErrorIcon(props: Icon) {\r\n const { size = 25, color = \"#F24E1E\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 2 2\" fill=\"none\">\r\n <Path\r\n d=\"M1.00004 0.333496C0.868187 0.333496 0.739294 0.372595 0.629661 0.44585C0.520028 0.519104 0.43458 0.623223 0.384121 0.745041C0.333663 0.866858 0.320461 1.0009 0.346184 1.13022C0.371908 1.25954 0.435401 1.37833 0.528636 1.47157C0.621871 1.5648 0.74066 1.6283 0.869981 1.65402C0.999301 1.67974 1.13335 1.66654 1.25516 1.61608C1.37698 1.56562 1.4811 1.48018 1.55435 1.37054C1.62761 1.26091 1.66671 1.13202 1.66671 1.00016C1.66671 0.823352 1.59647 0.653783 1.47145 0.528758C1.34642 0.403734 1.17685 0.333496 1.00004 0.333496ZM0.917263 0.666829C0.917263 0.644728 0.926043 0.623532 0.941671 0.607904C0.957299 0.592276 0.978495 0.583496 1.0006 0.583496C1.0227 0.583496 1.04389 0.592276 1.05952 0.607904C1.07515 0.623532 1.08393 0.644728 1.08393 0.666829V1.04961C1.08393 1.06055 1.08177 1.07139 1.07759 1.0815C1.0734 1.09161 1.06726 1.10079 1.05952 1.10853C1.05178 1.11627 1.0426 1.12241 1.03249 1.1266C1.02238 1.13079 1.01154 1.13294 1.0006 1.13294C0.989653 1.13294 0.978817 1.13079 0.968706 1.1266C0.958596 1.12241 0.949409 1.11627 0.941671 1.10853C0.933933 1.10079 0.927794 1.09161 0.923607 1.0815C0.919419 1.07139 0.917263 1.06055 0.917263 1.04961V0.666829ZM1.00004 1.41683C0.981142 1.41683 0.962667 1.41123 0.946953 1.40073C0.931239 1.39023 0.918992 1.3753 0.911759 1.35784C0.904527 1.34038 0.902634 1.32117 0.906321 1.30263C0.910009 1.2841 0.919109 1.26707 0.932473 1.25371C0.945837 1.24034 0.962863 1.23124 0.981399 1.22755C0.999935 1.22387 1.01915 1.22576 1.03661 1.23299C1.05407 1.24022 1.06899 1.25247 1.07949 1.26819C1.08999 1.2839 1.0956 1.30237 1.0956 1.32127C1.0956 1.34662 1.08553 1.37092 1.06761 1.38884C1.04969 1.40676 1.02538 1.41683 1.00004 1.41683Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function LockClosed(props: Icon) {\r\n const { size = 25, color = \"#F24E1E\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 18 20\" fill=\"none\">\r\n <Path\r\n d=\"M3 8V6C3 4.4087 3.63214 2.88258 4.75736 1.75736C5.88258 0.632141 7.4087 0 9 0C10.5913 0 12.1174 0.632141 13.2426 1.75736C14.3679 2.88258 15 4.4087 15 6V8H16C16.5304 8 17.0391 8.21071 17.4142 8.58579C17.7893 8.96086 18 9.46957 18 10V18C18 18.5304 17.7893 19.0391 17.4142 19.4142C17.0391 19.7893 16.5304 20 16 20H2C1.46957 20 0.960859 19.7893 0.585786 19.4142C0.210714 19.0391 0 18.5304 0 18V10C0 8.9 0.9 8 2 8H3ZM8 14.73V17H10V14.73C10.3813 14.5099 10.6793 14.1701 10.8478 13.7633C11.0162 13.3566 11.0458 12.9056 10.9319 12.4803C10.8179 12.055 10.5668 11.6793 10.2175 11.4112C9.86823 11.1432 9.44027 10.9979 9 10.9979C8.55973 10.9979 8.13177 11.1432 7.78248 11.4112C7.43319 11.6793 7.1821 12.055 7.06815 12.4803C6.9542 12.9056 6.98376 13.3566 7.15224 13.7633C7.32072 14.1701 7.61872 14.5099 8 14.73ZM6 6V8H12V6C12 5.20435 11.6839 4.44129 11.1213 3.87868C10.5587 3.31607 9.79565 3 9 3C8.20435 3 7.44129 3.31607 6.87868 3.87868C6.31607 4.44129 6 5.20435 6 6Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function LockOpen(props: Icon) {\r\n const { size = 25, color = \"#F24E1E\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 18 20\" fill=\"none\">\r\n <Path\r\n d=\"M3 8V6C3 4.4087 3.63214 2.88258 4.75736 1.75736C5.88258 0.632141 7.4087 0 9 0C10.5913 0 12.1174 0.632141 13.2426 1.75736C14.3679 2.88258 15 4.4087 15 6H12V8H16C16.5304 8 17.0391 8.21071 17.4142 8.58579C17.7893 8.96086 18 9.46957 18 10V18C18 18.5304 17.7893 19.0391 17.4142 19.4142C17.0391 19.7893 16.5304 20 16 20H2C1.46957 20 0.960859 19.7893 0.585786 19.4142C0.210714 19.0391 0 18.5304 0 18V10C0 8.9 0.9 8 2 8H3ZM8 14.73V17H10V14.73C10.3813 14.5099 10.6793 14.1701 10.8478 13.7633C11.0162 13.3566 11.0458 12.9056 10.9319 12.4803C10.8179 12.055 10.5668 11.6793 10.2175 11.4112C9.86823 11.1432 9.44027 10.9979 9 10.9979C8.55973 10.9979 8.13177 11.1432 7.78248 11.4112C7.43319 11.6793 7.1821 12.055 7.06815 12.4803C6.9542 12.9056 6.98376 13.3566 7.15224 13.7633C7.32072 14.1701 7.61872 14.5099 8 14.73ZM6 6V8H12V6C12 5.20435 11.6839 4.44129 11.1213 3.87868C10.5587 3.31607 9.79565 3 9 3C8.20435 3 7.44129 3.31607 6.87868 3.87868C6.31607 4.44129 6 5.20435 6 6Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport default function TrashIcon(props: Icon) {\r\n const { size = 25, color = \"red\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\">\r\n <Path\r\n fillRule=\"evenodd\"\r\n clipRule=\"evenodd\"\r\n d=\"M8.75009 1C8.02075 1 7.32127 1.28973 6.80555 1.80546C6.28982 2.32118 6.00009 3.02065 6.00009 3.75V4.193C5.20476 4.26967 4.41643 4.369 3.63509 4.491C3.53634 4.50445 3.44126 4.53745 3.35541 4.58807C3.26956 4.63869 3.19465 4.70591 3.13508 4.78581C3.0755 4.86571 3.03245 4.95667 3.00843 5.0534C2.98441 5.15013 2.97992 5.25067 2.9952 5.34916C3.01048 5.44764 3.04524 5.54209 3.09745 5.62699C3.14965 5.71189 3.21825 5.78553 3.29924 5.84361C3.38023 5.90169 3.47199 5.94305 3.56914 5.96526C3.6663 5.98748 3.76691 5.99011 3.86509 5.973L4.01409 5.951L4.85509 16.469C4.91015 17.1582 5.22279 17.8014 5.73075 18.2704C6.23871 18.7394 6.9047 18.9999 7.59609 19H12.4031C13.0945 19.0002 13.7606 18.74 14.2687 18.2711C14.7769 17.8022 15.0898 17.1592 15.1451 16.47L15.9861 5.95L16.1351 5.973C16.3298 5.99952 16.5271 5.94858 16.6847 5.83111C16.8422 5.71365 16.9473 5.53906 16.9775 5.34488C17.0076 5.15071 16.9603 4.95246 16.8458 4.79278C16.7313 4.6331 16.5587 4.52474 16.3651 4.491C15.5798 4.36877 14.7911 4.26939 14.0001 4.193V3.75C14.0001 3.02065 13.7104 2.32118 13.1946 1.80546C12.6789 1.28973 11.9794 1 11.2501 1H8.75009ZM10.0001 4C10.8401 4 11.6734 4.025 12.5001 4.075V3.75C12.5001 3.06 11.9401 2.5 11.2501 2.5H8.75009C8.06009 2.5 7.50009 3.06 7.50009 3.75V4.075C8.32676 4.025 9.16009 4 10.0001 4ZM8.58009 7.72C8.57213 7.52109 8.48549 7.33348 8.33921 7.19846C8.19293 7.06343 7.999 6.99204 7.80009 7C7.60118 7.00796 7.41357 7.0946 7.27855 7.24088C7.14352 7.38716 7.07213 7.58109 7.08009 7.78L7.38009 15.28C7.38403 15.3785 7.40733 15.4752 7.44866 15.5647C7.48999 15.6542 7.54854 15.7347 7.62097 15.8015C7.6934 15.8684 7.77829 15.9203 7.8708 15.9544C7.9633 15.9884 8.0616 16.0039 8.16009 16C8.25858 15.9961 8.35533 15.9728 8.44482 15.9314C8.53431 15.8901 8.61478 15.8315 8.68163 15.7591C8.74849 15.6867 8.80043 15.6018 8.83448 15.5093C8.86853 15.4168 8.88403 15.3185 8.88009 15.22L8.58009 7.72ZM12.9201 7.78C12.924 7.68151 12.9085 7.58321 12.8745 7.4907C12.8404 7.3982 12.7885 7.31331 12.7216 7.24088C12.6548 7.16845 12.5743 7.1099 12.4848 7.06857C12.3953 7.02724 12.2986 7.00394 12.2001 7C12.0012 6.99204 11.8073 7.06343 11.661 7.19846C11.5147 7.33348 11.428 7.52109 11.4201 7.72L11.1201 15.22C11.1162 15.3185 11.1317 15.4168 11.1657 15.5093C11.1998 15.6018 11.2517 15.6867 11.3185 15.7591C11.3854 15.8315 11.4659 15.8901 11.5554 15.9314C11.6448 15.9728 11.7416 15.9961 11.8401 16C11.9386 16.0039 12.0369 15.9884 12.1294 15.9544C12.2219 15.9203 12.3068 15.8684 12.3792 15.8015C12.4516 15.7347 12.5102 15.6542 12.5515 15.5647C12.5929 15.4752 12.6162 15.3785 12.6201 15.28L12.9201 7.78Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function StickerIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 192 192\" fill=\"none\">\r\n <Path\r\n opacity=\"0.2\"\r\n d=\"M184 104C176 128 128 176 104 184V152C104 139.27 109.057 127.061 118.059 118.059C127.061 109.057 139.27 104 152 104H184Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M136 0H56C41.1528 0.0158823 26.9182 5.92097 16.4196 16.4196C5.92097 26.9182 0.0158823 41.1528 0 56V136C0.0158823 150.847 5.92097 165.082 16.4196 175.58C26.9182 186.079 41.1528 191.984 56 192H104C104.86 191.999 105.714 191.861 106.53 191.59C132.76 182.84 182.84 132.76 191.59 106.53C191.861 105.714 191.999 104.86 192 104V56C191.984 41.1528 186.079 26.9182 175.58 16.4196C165.082 5.92097 150.847 0.0158823 136 0ZM16 136V56C16 45.3913 20.2143 35.2172 27.7157 27.7157C35.2172 20.2143 45.3913 16 56 16H136C146.609 16 156.783 20.2143 164.284 27.7157C171.786 35.2172 176 45.3913 176 56V96H152C137.153 96.0159 122.918 101.921 112.42 112.42C101.921 122.918 96.0159 137.153 96 152V176H56C45.3913 176 35.2172 171.786 27.7157 164.284C20.2143 156.783 16 146.609 16 136ZM112 171.14V152C112 141.391 116.214 131.217 123.716 123.716C131.217 116.214 141.391 112 152 112H171.14C159 131.5 131.5 159 112 171.14Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function EditIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M7 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V17\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n <Path\r\n d=\"M16 5.00011L19 8.00011M20.385 6.58511C20.7788 6.19126 21.0001 5.65709 21.0001 5.10011C21.0001 4.54312 20.7788 4.00895 20.385 3.61511C19.9912 3.22126 19.457 3 18.9 3C18.343 3 17.8088 3.22126 17.415 3.61511L9 12.0001V15.0001H12L20.385 6.58511Z\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport function CopyIcon(props: Icon) {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 16 18\" fill=\"none\">\r\n <Path\r\n fillRule=\"evenodd\"\r\n clipRule=\"evenodd\"\r\n d=\"M14 0C14.5304 0 15.0391 0.210714 15.4142 0.585786C15.7893 0.960859 16 1.46957 16 2V12C16 12.5304 15.7893 13.0391 15.4142 13.4142C15.0391 13.7893 14.5304 14 14 14H13V6C13 4.93913 12.5786 3.92172 11.8284 3.17157C11.0783 2.42143 10.0609 2 9 2H6C5.64895 1.99924 5.30395 2.09135 5 2.267V2C5 1.46957 5.21071 0.960859 5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H14Z\"\r\n fill={color}\r\n />\r\n <Path\r\n fillRule=\"evenodd\"\r\n clipRule=\"evenodd\"\r\n d=\"M4 4.054V8H0.2C0.274644 7.84448 0.369095 7.69928 0.481 7.568L2.941 4.698C3.2169 4.37661 3.58771 4.15111 4 4.054ZM6 4V8C6 8.53043 5.78929 9.03914 5.41421 9.41421C5.03914 9.78929 4.53043 10 4 10H0V16C0 16.5304 0.210714 17.0391 0.585786 17.4142C0.960859 17.7893 1.46957 18 2 18H9C9.53043 18 10.0391 17.7893 10.4142 17.4142C10.7893 17.0391 11 16.5304 11 16V6C11 5.46957 10.7893 4.96086 10.4142 4.58579C10.0391 4.21071 9.53043 4 9 4H6Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n}\r\n\r\nexport const CameraFlipIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M20 5H16.83L15 3H9L7.17 5H4C2.9 5 2 5.9 2 7V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H20C21.11 21 22 20.11 22 19V7C22 6.46957 21.7893 5.96086 21.4142 5.58579C21.0391 5.21071 20.5304 5 20 5ZM20 19H4V7H8.05L9.88 5H14.12L16 7H20V19ZM5 12H7.1C7.23084 11.3563 7.48731 10.7447 7.85475 10.2001C8.22219 9.65564 8.69338 9.18892 9.24137 8.82669C9.78936 8.46446 10.4034 8.21382 11.0483 8.08913C11.6933 7.96444 12.3565 7.96813 13 8.1C13.76 8.25 14.43 8.59 15 9L13.56 10.45C13.11 10.17 12.58 10 12 10C10.74 10 9.6 10.8 9.18 12H11L8 15L5 12ZM16.91 14C16.36 16.71 13.72 18.45 11 17.9C10.2788 17.74 9.59809 17.4336 9 17L10.44 15.55C10.9 15.83 11.43 16 12 16C13.27 16 14.41 15.2 14.83 14H13L16 11L19 14H16.91Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const ChatIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V12C2 6.477 6.477 2 12 2ZM12 14H9C8.73478 14 8.48043 14.1054 8.29289 14.2929C8.10536 14.4804 8 14.7348 8 15C8 15.2652 8.10536 15.5196 8.29289 15.7071C8.48043 15.8946 8.73478 16 9 16H12C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14ZM15 10H9C8.74512 10.0003 8.49997 10.0979 8.31463 10.2728C8.1293 10.4478 8.01776 10.687 8.00283 10.9414C7.98789 11.1958 8.07067 11.4464 8.23426 11.6418C8.39785 11.8373 8.6299 11.9629 8.883 11.993L9 12H15C15.2549 11.9997 15.5 11.9021 15.6854 11.7272C15.8707 11.5522 15.9822 11.313 15.9972 11.0586C16.0121 10.8042 15.9293 10.5536 15.7657 10.3582C15.6021 10.1627 15.3701 10.0371 15.117 10.007L15 10Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const ChatIconPlus = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M19 8V2\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n <Path\r\n fillRule=\"evenodd\"\r\n clipRule=\"evenodd\"\r\n d=\"M20.7299 9.80407C21.064 11.1317 21.0907 12.5181 20.8082 13.8576C20.5256 15.1972 19.9412 16.4546 19.0994 17.5342C18.2575 18.6138 17.1805 19.4872 15.9503 20.0878C14.72 20.6884 13.369 21.0004 11.9999 21.0001H7.49993C6.10193 21.0001 5.40293 21.0001 4.85193 20.7721C4.48784 20.6213 4.15702 20.4003 3.87837 20.1216C3.59972 19.843 3.3787 19.5122 3.22793 19.1481C2.99993 18.5971 2.99993 17.8981 2.99993 16.5001V12.0001C2.99962 10.631 3.31164 9.27999 3.91223 8.04974C4.51282 6.81949 5.38616 5.74246 6.46578 4.90064C7.54539 4.05882 8.80283 3.47439 10.1424 3.19183C11.4819 2.90927 12.8683 2.93603 14.1959 3.27007C13.8569 3.62372 13.6293 4.06918 13.5413 4.5511C13.4533 5.03303 13.5089 5.53018 13.7011 5.9808C13.8933 6.43142 14.2136 6.81565 14.6223 7.08575C15.031 7.35585 15.51 7.49992 15.9999 7.50007H16.4999V8.00007C16.5001 8.48996 16.6441 8.96901 16.9143 9.37771C17.1844 9.78641 17.5686 10.1067 18.0192 10.2989C18.4698 10.4911 18.967 10.5467 19.4489 10.4587C19.9308 10.3707 20.3763 10.1431 20.7299 9.80407ZM14.9999 10.0001C15.2651 10.0001 15.5195 10.1054 15.707 10.293C15.8946 10.4805 15.9999 10.7349 15.9999 11.0001C15.9999 11.2653 15.8946 11.5196 15.707 11.7072C15.5195 11.8947 15.2651 12.0001 14.9999 12.0001H8.99993C8.73471 12.0001 8.48036 11.8947 8.29282 11.7072C8.10529 11.5196 7.99993 11.2653 7.99993 11.0001C7.99993 10.7349 8.10529 10.4805 8.29282 10.293C8.48036 10.1054 8.73471 10.0001 8.99993 10.0001H14.9999ZM11.9999 14.0001C12.2651 14.0001 12.5195 14.1054 12.707 14.293C12.8946 14.4805 12.9999 14.7349 12.9999 15.0001C12.9999 15.2653 12.8946 15.5196 12.707 15.7072C12.5195 15.8947 12.2651 16.0001 11.9999 16.0001H8.99993C8.73471 16.0001 8.48036 15.8947 8.29282 15.7072C8.10529 15.5196 7.99993 15.2653 7.99993 15.0001C7.99993 14.7349 8.10529 14.4805 8.29282 14.293C8.48036 14.1054 8.73471 14.0001 8.99993 14.0001H11.9999Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M22 5H16\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const PauseIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M8 5C7.46957 5 6.96086 5.21071 6.58579 5.58579C6.21071 5.96086 6 6.46957 6 7V17C6 17.5304 6.21071 18.0391 6.58579 18.4142C6.96086 18.7893 7.46957 19 8 19H9C9.53043 19 10.0391 18.7893 10.4142 18.4142C10.7893 18.0391 11 17.5304 11 17V7C11 6.46957 10.7893 5.96086 10.4142 5.58579C10.0391 5.21071 9.53043 5 9 5H8ZM15 5C14.4696 5 13.9609 5.21071 13.5858 5.58579C13.2107 5.96086 13 6.46957 13 7V17C13 17.5304 13.2107 18.0391 13.5858 18.4142C13.9609 18.7893 14.4696 19 15 19H16C16.5304 19 17.0391 18.7893 17.4142 18.4142C17.7893 18.0391 18 17.5304 18 17V7C18 6.46957 17.7893 5.96086 17.4142 5.58579C17.0391 5.21071 16.5304 5 16 5H15Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const PlayIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 256 256\" fill=\"none\">\r\n <Path\r\n d=\"M240 128C240.007 130.716 239.31 133.388 237.978 135.756C236.647 138.123 234.725 140.105 232.4 141.51L88.32 229.65C85.8909 231.138 83.1087 231.95 80.2608 232.002C77.4129 232.055 74.6025 231.347 72.12 229.95C69.6611 228.575 67.6128 226.57 66.1856 224.141C64.7585 221.712 64.0041 218.947 64 216.13V39.8701C64.0041 37.053 64.7585 34.2877 66.1856 31.8588C67.6128 29.4299 69.6611 27.4249 72.12 26.0501C74.6025 24.6536 77.4129 23.9451 80.2608 23.9979C83.1087 24.0506 85.8909 24.8626 88.32 26.3501L232.4 114.49C234.725 115.895 236.647 117.877 237.978 120.245C239.31 122.612 240.007 125.284 240 128Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const LinkIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M11 17H7C5.61667 17 4.43767 16.5123 3.463 15.537C2.48833 14.5617 2.00067 13.3827 2 12C1.99933 10.6173 2.487 9.43833 3.463 8.463C4.439 7.48767 5.618 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5627 7.48767 20.538 8.463C21.5133 9.43833 22.0007 10.6173 22 12C21.9993 13.3827 21.5117 14.562 20.537 15.538C19.5623 16.514 18.3833 17.0013 17 17H13Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const MessagePlus = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M8 9H16M8 13H14M12.5 20.5L12 21L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V12.5M16 19H22M19 16V22\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const StopIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\">\r\n <Path\r\n d=\"M8 2C9.18669 2 10.3467 2.35189 11.3334 3.01118C12.3201 3.67047 13.0892 4.60754 13.5433 5.7039C13.9974 6.80026 14.1162 8.00666 13.8847 9.17054C13.6532 10.3344 13.0818 11.4035 12.2426 12.2426C11.4035 13.0818 10.3344 13.6532 9.17054 13.8847C8.00666 14.1162 6.80026 13.9974 5.7039 13.5433C4.60755 13.0892 3.67047 12.3201 3.01119 11.3334C2.3519 10.3467 2 9.18669 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2ZM8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00777 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1Z\"\r\n fill={color}\r\n />\r\n <Path\r\n d=\"M10 6V10H6V6H10ZM10 5H6C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V10C5 10.2652 5.10536 10.5196 5.29289 10.7071C5.48043 10.8946 5.73478 11 6 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const LockIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\r\n <Path\r\n d=\"M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM18 20H6V10H18V20ZM12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const ArrowRight = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size * 2} viewBox=\"0 0 12 24\" fill=\"none\">\r\n <Path\r\n fillRule=\"evenodd\"\r\n clipRule=\"evenodd\"\r\n d=\"M10.1569 12.7111L4.49994 18.3681L3.08594 16.9541L8.03594 12.0041L3.08594 7.05414L4.49994 5.64014L10.1569 11.2971C10.3444 11.4847 10.4497 11.739 10.4497 12.0041C10.4497 12.2693 10.3444 12.5236 10.1569 12.7111Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const BroadcastIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\">\r\n <Path\r\n d=\"M14.158 1.02584C14.2838 1.06763 14.3879 1.15768 14.4474 1.2762C14.5068 1.39472 14.5167 1.532 14.475 1.65784L13.975 3.15784C13.9331 3.28382 13.8428 3.38799 13.7241 3.44744C13.6054 3.50689 13.468 3.51675 13.342 3.47484C13.216 3.43294 13.1118 3.34271 13.0524 3.224C12.9929 3.10529 12.9831 2.96782 13.025 2.84184L13.525 1.34184C13.5458 1.27951 13.5786 1.22189 13.6217 1.17226C13.6648 1.12264 13.7172 1.08199 13.776 1.05265C13.8348 1.0233 13.8988 1.00582 13.9643 1.00123C14.0299 0.996627 14.0957 1.00499 14.158 1.02584ZM17.855 2.85384C17.9014 2.80736 17.9382 2.75218 17.9633 2.69147C17.9884 2.63075 18.0013 2.56569 18.0013 2.49999C18.0012 2.43429 17.9882 2.36925 17.963 2.30857C17.9379 2.24789 17.901 2.19277 17.8545 2.14634C17.808 2.09992 17.7528 2.06311 17.6921 2.03801C17.6314 2.01291 17.5663 2.00002 17.5006 2.00007C17.4349 2.00011 17.3699 2.0131 17.3092 2.03828C17.2485 2.06347 17.1934 2.10036 17.147 2.14684L15.147 4.14684C15.0559 4.24115 15.0055 4.36745 15.0066 4.49855C15.0078 4.62964 15.0604 4.75505 15.1531 4.84775C15.2458 4.94046 15.3712 4.99304 15.5023 4.99418C15.6334 4.99532 15.7597 4.94492 15.854 4.85384L17.855 2.85384ZM7.60698 3.14584C7.74648 2.85208 7.95551 2.59676 8.21596 2.40201C8.47641 2.20726 8.78042 2.07897 9.10164 2.02824C9.42287 1.97751 9.75162 2.00587 10.0594 2.11088C10.3672 2.21589 10.6447 2.39436 10.868 2.63084L17.455 9.61084C17.6748 9.84373 17.8355 10.126 17.9235 10.4339C18.0115 10.7418 18.0243 11.0663 17.9608 11.3802C17.8973 11.6941 17.7594 11.9882 17.5586 12.2376C17.3578 12.4871 17.1 12.6847 16.807 12.8138L12.87 14.5498C13.0159 15.0703 13.0395 15.6175 12.9387 16.1486C12.838 16.6797 12.6158 17.1803 12.2895 17.6113C11.9631 18.0422 11.5415 18.3918 11.0576 18.6327C10.5736 18.8736 10.0405 18.9992 9.49998 18.9998C8.90423 19 8.31831 18.848 7.7977 18.5584C7.27709 18.2688 6.83902 17.8511 6.52498 17.3448L5.32498 17.8738C5.04921 17.9953 4.74326 18.0308 4.447 17.9759C4.15073 17.921 3.87787 17.7781 3.66398 17.5658L2.44198 16.3558C2.22101 16.137 2.07355 15.8549 2.01998 15.5485C1.96641 15.2421 2.00939 14.9267 2.14298 14.6458L7.60698 3.14584ZM7.45298 16.9348C7.78487 17.4086 8.27081 17.7527 8.82797 17.9083C9.38512 18.064 9.97901 18.0216 10.5084 17.7884C11.0378 17.5552 11.4699 17.1456 11.7312 16.6294C11.9924 16.1133 12.0665 15.5225 11.941 14.9578L7.45298 16.9348ZM10.141 3.31784C10.0294 3.19969 9.89068 3.11052 9.73687 3.05805C9.58305 3.00557 9.41877 2.99137 9.25823 3.01669C9.0977 3.042 8.94575 3.10605 8.81555 3.20331C8.68534 3.30057 8.5808 3.42809 8.51098 3.57484L3.04598 15.0748C3.00172 15.1684 2.98757 15.2733 3.00548 15.3752C3.02339 15.4772 3.07248 15.571 3.14598 15.6438L4.36798 16.8548C4.4393 16.9253 4.53016 16.9728 4.62878 16.991C4.7274 17.0091 4.8292 16.9973 4.92098 16.9568L16.403 11.8998C16.5495 11.8354 16.6784 11.7366 16.7788 11.612C16.8793 11.4873 16.9483 11.3404 16.9801 11.1835C17.012 11.0266 17.0057 10.8644 16.9618 10.7105C16.9179 10.5565 16.8377 10.4154 16.728 10.2988L10.141 3.31784ZM17 5.99985C16.8674 5.99985 16.7402 6.05252 16.6464 6.14629C16.5527 6.24006 16.5 6.36724 16.5 6.49985C16.5 6.63245 16.5527 6.75963 16.6464 6.8534C16.7402 6.94717 16.8674 6.99985 17 6.99985H18.5C18.6326 6.99985 18.7598 6.94717 18.8535 6.8534C18.9473 6.75963 19 6.63245 19 6.49985C19 6.36724 18.9473 6.24006 18.8535 6.14629C18.7598 6.05252 18.6326 5.99985 18.5 5.99985H17Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n\r\nexport const NoImageIcon = (props: Icon) => {\r\n const { size = 25, color = \"black\" } = props;\r\n return (\r\n <Svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\">\r\n <Path\r\n d=\"M15 1.707L14.293 1L1 14.293L1.707 15L2.707 14H13C13.2651 13.9996 13.5192 13.8941 13.7067 13.7067C13.8941 13.5192 13.9996 13.2651 14 13V2.707L15 1.707ZM13 13H3.707L7.6035 9.1035L8.793 10.293C8.98053 10.4805 9.23484 10.5858 9.5 10.5858C9.76516 10.5858 10.0195 10.4805 10.207 10.293L11 9.5L13 11.4985V13ZM13 10.084L11.707 8.791C11.5195 8.60353 11.2652 8.49821 11 8.49821C10.7348 8.49821 10.4805 8.60353 10.293 8.791L9.5 9.584L8.3115 8.3955L13 3.707V10.084ZM3 11V9.5L5.5 7.0015L6.1865 7.6885L6.8945 6.9805L6.207 6.293C6.01947 6.10553 5.76516 6.00021 5.5 6.00021C5.23484 6.00021 4.98053 6.10553 4.793 6.293L3 8.086V3H11V2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V11H3Z\"\r\n fill={color}\r\n />\r\n </Svg>\r\n );\r\n};\r\n","export const Colors = {\r\n greyLighter: '#F0F0F0'\r\n}","import moment from 'moment';\r\n\r\nimport { StringOrNumber, Participant } from \"../types\";\r\nimport { Conversation, Message, MessageStates, UserMeta, Part