@amityco/react-native-social-uikit 4.0.0-03e2bf8.0

package/src/svg/svg-xml-list.ts

@@ -0,0 +1,431 @@
+export const likeXml: string = `<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5625 8.96875C14.8438 8.5 15 8 15 7.40625C15 6.03125 13.8125 4.75 12.3125 4.75H11.1562C11.3125 4.34375 11.4375 3.875 11.4375 3.28125C11.4375 1 10.25 0 8.46875 0C6.53125 0 6.65625 2.96875 6.21875 3.40625C5.5 4.125 4.65625 5.5 4.0625 6H1C0.4375 6 0 6.46875 0 7V14.5C0 15.0625 0.4375 15.5 1 15.5H3C3.4375 15.5 3.84375 15.1875 3.9375 14.7812C5.34375 14.8125 6.3125 16 9.5 16C9.75 16 10 16 10.2188 16C12.625 16 13.6875 14.7812 13.7188 13.0312C14.1562 12.4688 14.375 11.6875 14.2812 10.9375C14.5938 10.375 14.6875 9.6875 14.5625 8.96875ZM12.625 10.6562C13.0312 11.3125 12.6562 12.1875 12.1875 12.4688C12.4375 13.9688 11.625 14.5 10.5312 14.5H9.34375C7.125 14.5 5.65625 13.3438 4 13.3438V7.5H4.3125C5.21875 7.5 6.4375 5.3125 7.28125 4.46875C8.15625 3.59375 7.875 2.09375 8.46875 1.5C9.9375 1.5 9.9375 2.53125 9.9375 3.28125C9.9375 4.5 9.0625 5.0625 9.0625 6.25H12.3125C12.9688 6.25 13.4688 6.84375 13.5 7.4375C13.5 8 13.0938 8.59375 12.7812 8.59375C13.2188 9.0625 13.3125 10.0312 12.625 10.6562ZM2.75 13.5C2.75 13.9375 2.40625 14.25 2 14.25C1.5625 14.25 1.25 13.9375 1.25 13.5C1.25 13.0938 1.5625 12.75 2 12.75C2.40625 12.75 2.75 13.0938 2.75 13.5Z" fill="#898E9E"/>
+</svg>`;
+export const personXml: string = `<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1254 1.13117C9.38491 0.406896 8.38054 0 7.33327 0C6.28601 0 5.28164 0.406896 4.54111 1.13117C3.80058 1.85545 3.38455 2.83778 3.38455 3.86207C3.38455 4.88635 3.80058 5.86869 4.54111 6.59296C5.28164 7.31724 6.28601 7.72414 7.33327 7.72414C8.38054 7.72414 9.38491 7.31724 10.1254 6.59296C10.866 5.86869 11.282 4.88635 11.282 3.86207C11.282 2.83778 10.866 1.85545 10.1254 1.13117Z" fill="white"/>
+<path d="M7.33327 9.93104C3.28302 9.93104 -6.10352e-05 11.7848 -6.10352e-05 14.069V16H14.6666V14.069C14.6666 11.7848 11.3835 9.93104 7.33327 9.93104Z" fill="white"/>
+</svg>
+`;
+export const commentXml: string = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0938 0H2.09375C0.96875 0 0.09375 0.90625 0.09375 2V11C0.09375 12.125 0.96875 13 2.09375 13H5.09375V15.625C5.09375 15.875 5.25 16 5.46875 16C5.53125 16 5.59375 16 5.6875 15.9375L9.59375 13H14.0938C15.1875 13 16.0938 12.125 16.0938 11V2C16.0938 0.90625 15.1875 0 14.0938 0ZM14.5938 11C14.5938 11.2812 14.3438 11.5 14.0938 11.5H9.09375L8.6875 11.8125L6.59375 13.375V11.5H2.09375C1.8125 11.5 1.59375 11.2812 1.59375 11V2C1.59375 1.75 1.8125 1.5 2.09375 1.5H14.0938C14.3438 1.5 14.5938 1.75 14.5938 2V11Z" fill="#898E9E"/>
+</svg>
+`;
+export const likedXml = (
+  color: string = '#1054DE'
+): string => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25 7H0.75C0.3125 7 0 7.34375 0 7.75V15.25C0 15.6875 0.3125 16 0.75 16H3.25C3.65625 16 4 15.6875 4 15.25V7.75C4 7.34375 3.65625 7 3.25 7ZM2 14.75C1.5625 14.75 1.25 14.4375 1.25 14C1.25 13.5938 1.5625 13.25 2 13.25C2.40625 13.25 2.75 13.5938 2.75 14C2.75 14.4375 2.40625 14.75 2 14.75ZM12 2.5625C12 0.25 10.5 0 9.75 0C9.09375 0 8.8125 1.25 8.6875 1.8125C8.5 2.5 8.34375 3.1875 7.875 3.65625C6.875 4.6875 6.34375 5.96875 5.09375 7.1875C5.03125 7.28125 5 7.375 5 7.46875V14.1562C5 14.3438 5.15625 14.5 5.34375 14.5312C5.84375 14.5312 6.5 14.8125 7 15.0312C8 15.4688 9.21875 16 10.7188 16H10.8125C12.1562 16 13.75 16 14.375 15.0938C14.6562 14.7188 14.7188 14.25 14.5625 13.6875C15.0938 13.1562 15.3438 12.1562 15.0938 11.3438C15.625 10.625 15.6875 9.59375 15.375 8.875C15.75 8.5 16 7.90625 15.9688 7.34375C15.9688 6.375 15.1562 5.5 14.125 5.5H10.9375C11.1875 4.625 12 3.875 12 2.5625Z" fill="${color}"/>
+</svg>`;
+export const arrowXml: string = `<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z" fill="#636878"/>
+</svg>`;
+export const arrowOutlined = (
+  color: string = '#292B32'
+): string => `<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.34375 0.621094L0.640625 1.28906C0.5 1.46484 0.5 1.74609 0.640625 1.88672L7.00391 8.25L0.640625 14.6484C0.5 14.7891 0.5 15.0703 0.640625 15.2461L1.34375 15.9141C1.51953 16.0898 1.76562 16.0898 1.94141 15.9141L9.32422 8.56641C9.46484 8.39062 9.46484 8.14453 9.32422 7.96875L1.94141 0.621094C1.76562 0.445312 1.51953 0.445312 1.34375 0.621094Z" fill=${color}/>
+</svg>
+`;
+export const playBtn: string = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<circle cx="20" cy="20" r="20" fill="black"/>
+<circle cx="20" cy="20" r="20" stroke="white"/>
+</g>
+<g clip-path="url(#clip0_3065_18002)">
+<path d="M16 13V27L27 20L16 13Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3065_18002">
+<rect width="24" height="24" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+export const replyIcon: string = `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.625 6.96875L12.125 1.46875C11.1875 0.5 9.59375 1.1875 9.59375 2.53125V5.03125C5.28125 5.15625 0.09375 6 0.09375 11.3438C0.09375 13.625 1.28125 15.5312 3.125 16.75C4.28125 17.5312 5.8125 16.4375 5.375 15.0625C4.625 12.625 5 11.3438 9.59375 11.0625V13.5C9.59375 14.8438 11.1875 15.5312 12.125 14.5625L17.625 9.0625C18.2188 8.5 18.2188 7.53125 17.625 6.96875ZM11.0938 13.5V9.53125C5.9375 9.5625 2.40625 10.5625 3.96875 15.5C2.84375 14.75 1.59375 13.4375 1.59375 11.3438C1.59375 6.875 6.59375 6.53125 11.0938 6.53125V2.5L16.5938 8L11.0938 13.5Z" fill="#898E9E"/>
+</svg>
+`;
+export const postIcon = (
+  color: string = '#292B32'
+): string => `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.6484 4.12989L27.6592 3.07521C28.1426 2.57716 28.1572 1.85939 27.6738 1.37599L27.3369 1.03907C26.8975 0.599621 26.1797 0.658215 25.7109 1.12697L24.6709 2.13771L26.6484 4.12989ZM10.7695 18.4268L13.5088 17.2549L25.623 5.14064L23.6455 3.17775L11.5459 15.292L10.3008 17.9434C10.1836 18.207 10.4912 18.544 10.7695 18.4268ZM4.9541 28.7979H21.1846C23.7188 28.7979 25.2129 27.3184 25.2129 24.4326V9.09572L22.7959 11.5127V24.2715C22.7959 25.6777 22.0342 26.3955 21.0967 26.3955H5.04199C3.69434 26.3955 2.94727 25.6777 2.94727 24.2715V8.65626C2.94727 7.25001 3.69434 6.53224 5.04199 6.53224H16.7607L19.1777 4.12989H4.9541C2.02441 4.12989 0.530273 5.59474 0.530273 8.49513V24.4326C0.530273 27.333 2.02441 28.7979 4.9541 28.7979Z" fill="${color}"/>
+</svg>
+`;
+export const postIconOutlined = (
+  color: string = '#292B32'
+): string => `<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0078 12.3789C14.9375 12.4492 14.9375 12.5195 14.9375 12.5898V16.5625H2.5625V4.1875H11.0352C11.1055 4.1875 11.1758 4.1875 11.2461 4.11719L12.3711 2.99219C12.5469 2.81641 12.4062 2.5 12.1602 2.5H2.5625C1.61328 2.5 0.875 3.27344 0.875 4.1875V16.5625C0.875 17.5117 1.61328 18.25 2.5625 18.25H14.9375C15.8516 18.25 16.625 17.5117 16.625 16.5625V11.4648C16.625 11.2188 16.3086 11.0781 16.1328 11.2539L15.0078 12.3789ZM20.4922 5.3125C21.3008 4.50391 21.3008 3.20312 20.4922 2.39453L18.9805 0.882812C18.1719 0.0742188 16.8711 0.0742188 16.0625 0.882812L6.85156 10.0938L6.5 13.293C6.39453 14.207 7.16797 14.9805 8.08203 14.875L11.2812 14.5234L20.4922 5.3125ZM17.0469 6.36719L10.5078 12.9062L8.1875 13.1875L8.46875 10.8672L15.0078 4.32812L17.0469 6.36719ZM19.2969 3.58984C19.4727 3.73047 19.4727 3.94141 19.332 4.11719L18.2422 5.20703L16.2031 3.13281L17.2578 2.07812C17.3984 1.90234 17.6445 1.90234 17.7852 2.07812L19.2969 3.58984Z" fill="${color}"/>
+</svg>
+`;
+export const closeIcon = (
+  color: string = '#292B32'
+): string => `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.65234 6.25L11.4492 2.48828C11.6602 2.27734 11.6602 1.89062 11.4492 1.67969L10.5703 0.800781C10.3594 0.589844 9.97266 0.589844 9.76172 0.800781L6 4.59766L2.20312 0.800781C1.99219 0.589844 1.60547 0.589844 1.39453 0.800781L0.515625 1.67969C0.304688 1.89062 0.304688 2.27734 0.515625 2.48828L4.3125 6.25L0.515625 10.0469C0.304688 10.2578 0.304688 10.6445 0.515625 10.8555L1.39453 11.7344C1.60547 11.9453 1.99219 11.9453 2.20312 11.7344L6 7.9375L9.76172 11.7344C9.97266 11.9453 10.3594 11.9453 10.5703 11.7344L11.4492 10.8555C11.6602 10.6445 11.6602 10.2578 11.4492 10.0469L7.65234 6.25Z" fill="${color}"/>
+</svg>`;
+export const cameraIcon: string = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.49945L8.99945 3.75H14.9995L16.4995 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+export const galleryIcon: string = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 4.5H4.5C4.08579 4.5 3.75 4.83579 3.75 5.25V18.75C3.75 19.1642 4.08579 19.5 4.5 19.5H21C21.4142 19.5 21.75 19.1642 21.75 18.75V5.25C21.75 4.83579 21.4142 4.5 21 4.5Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 15.7499L8.46966 11.0302C8.5393 10.9606 8.62198 10.9053 8.71297 10.8676C8.80397 10.8299 8.9015 10.8105 8.99999 10.8105C9.09848 10.8105 9.19601 10.8299 9.287 10.8676C9.37799 10.9053 9.46067 10.9606 9.53032 11.0302L13.7197 15.2196C13.7893 15.2892 13.872 15.3444 13.963 15.3821C14.054 15.4198 14.1515 15.4392 14.25 15.4392C14.3485 15.4392 14.446 15.4198 14.537 15.3821C14.628 15.3444 14.7107 15.2892 14.7803 15.2196L16.7197 13.2802C16.7893 13.2106 16.872 13.1553 16.963 13.1176C17.054 13.0799 17.1515 13.0605 17.25 13.0605C17.3485 13.0605 17.446 13.0799 17.537 13.1176C17.628 13.1553 17.7107 13.2106 17.7803 13.2802L21.75 17.2499" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.375 10.5C15.9963 10.5 16.5 9.99632 16.5 9.375C16.5 8.75368 15.9963 8.25 15.375 8.25C14.7537 8.25 14.25 8.75368 14.25 9.375C14.25 9.99632 14.7537 10.5 15.375 10.5Z" fill="#292B32"/>
+</svg>
+`;
+export const playVideoIcon: string = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21Z" stroke="#292B32" stroke-width="1.3" stroke-miterlimit="10"/>
+<path d="M16.5 12L10.5 8V16L16.5 12Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+export const arrowDown = (color: string = '#292B32'): string => `
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6289 1.15625L14.9609 0.453125C14.7852 0.277344 14.5039 0.277344 14.3633 0.453125L8 6.81641L1.60156 0.453125C1.46094 0.277344 1.17969 0.277344 1.00391 0.453125L0.335938 1.15625C0.160156 1.29688 0.160156 1.57812 0.335938 1.75391L7.68359 9.10156C7.85938 9.27734 8.10547 9.27734 8.28125 9.10156L15.6289 1.75391C15.8047 1.57812 15.8047 1.29688 15.6289 1.15625Z" fill="${color}"/>
+</svg>
+`;
+export const arrowBack = (
+  color: string = '#292B32'
+): string => `<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon name" d="M8.62109 15.9141L9.32422 15.2461C9.46484 15.0703 9.46484 14.7891 9.32422 14.6484L2.96094 8.25L9.32422 1.88672C9.46484 1.74609 9.46484 1.46484 9.32422 1.28906L8.62109 0.621094C8.44531 0.445312 8.19922 0.445312 8.02344 0.621094L0.640625 7.96875C0.5 8.14453 0.5 8.39062 0.640625 8.56641L8.02344 15.9141C8.19922 16.0898 8.44531 16.0898 8.62109 15.9141Z" fill="${color}"/>
+</svg>
+`;
+export const searchIcon = (color: string = '#292B32'): string => `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20.8594 19.7383L16.6055 15.4844C16.5 15.4141 16.3945 15.3438 16.2891 15.3438H15.832C16.9219 14.0781 17.625 12.3906 17.625 10.5625C17.625 6.55469 14.3203 3.25 10.3125 3.25C6.26953 3.25 3 6.55469 3 10.5625C3 14.6055 6.26953 17.875 10.3125 17.875C12.1406 17.875 13.793 17.207 15.0938 16.1172V16.5742C15.0938 16.6797 15.1289 16.7852 15.1992 16.8906L19.4531 21.1445C19.6289 21.3203 19.9102 21.3203 20.0508 21.1445L20.8594 20.3359C21.0352 20.1953 21.0352 19.9141 20.8594 19.7383ZM10.3125 16.1875C7.18359 16.1875 4.6875 13.6914 4.6875 10.5625C4.6875 7.46875 7.18359 4.9375 10.3125 4.9375C13.4062 4.9375 15.9375 7.46875 15.9375 10.5625C15.9375 13.6914 13.4062 16.1875 10.3125 16.1875Z" fill="${color}"/>
+  </svg>
+`;
+export const circleCloseIcon: string = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99121 18.3906C14.5879 18.3906 18.376 14.5938 18.376 10.0059C18.376 5.40918 14.5791 1.6123 9.99121 1.6123C5.39453 1.6123 1.60645 5.40918 1.60645 10.0059C1.60645 14.5938 5.40332 18.3906 9.99121 18.3906ZM7.04688 13.5479C6.71289 13.5479 6.44922 13.2842 6.44922 12.9502C6.44922 12.792 6.51074 12.6514 6.63379 12.5283L9.14746 10.0146L6.63379 7.49219C6.51074 7.37793 6.44922 7.22852 6.44922 7.07031C6.44922 6.74512 6.71289 6.49023 7.04688 6.49023C7.21387 6.49023 7.35449 6.54297 7.45996 6.66602L9.99121 9.17969L12.5225 6.65723C12.6543 6.52539 12.7861 6.47266 12.9443 6.47266C13.2695 6.47266 13.5332 6.73633 13.5332 7.06152C13.5332 7.22852 13.4805 7.36035 13.3574 7.4834L10.835 10.0146L13.3486 12.5283C13.4717 12.6514 13.5332 12.7832 13.5332 12.9502C13.5332 13.2842 13.2695 13.5479 12.9268 13.5479C12.7598 13.5479 12.6191 13.4863 12.4961 13.3721L9.99121 10.8496L7.48633 13.3721C7.36328 13.4863 7.21387 13.5479 7.04688 13.5479Z" fill="#A5A9B5"/>
+</svg>
+`;
+export const communityIcon: string = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+<rect width="40" height="40" rx="20" fill="#D9E5FC"/>
+<path d="M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z" fill="white"/>
+</svg>`;
+export const threeDots = (
+  color: string = '#292B32'
+) => `<svg width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.6875 2.25C9.6875 1.33594 8.91406 0.5625 8 0.5625C7.05078 0.5625 6.3125 1.33594 6.3125 2.25C6.3125 3.19922 7.05078 3.9375 8 3.9375C8.91406 3.9375 9.6875 3.19922 9.6875 2.25ZM13.9062 0.5625C12.957 0.5625 12.2188 1.33594 12.2188 2.25C12.2188 3.19922 12.957 3.9375 13.9062 3.9375C14.8203 3.9375 15.5938 3.19922 15.5938 2.25C15.5938 1.33594 14.8203 0.5625 13.9062 0.5625ZM2.09375 0.5625C1.14453 0.5625 0.40625 1.33594 0.40625 2.25C0.40625 3.19922 1.14453 3.9375 2.09375 3.9375C3.00781 3.9375 3.78125 3.19922 3.78125 2.25C3.78125 1.33594 3.00781 0.5625 2.09375 0.5625Z" fill="${color}"/>
+</svg>
+`;
+export const privateIcon = (
+  color: string = '#292B32'
+) => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11.2266C8.32227 11.2266 8.60156 10.9688 8.60156 10.625V9.25C8.60156 8.92773 8.32227 8.64844 8 8.64844C7.65625 8.64844 7.39844 8.92773 7.39844 9.25V10.625C7.39844 10.9688 7.65625 11.2266 8 11.2266ZM12.8125 7.53125C12.8125 6.97266 12.3398 6.5 11.7812 6.5H11.0938V5.51172C11.0938 3.79297 9.71875 2.39648 8 2.375C6.28125 2.375 4.90625 3.77148 4.90625 5.46875V6.5H4.21875C3.63867 6.5 3.1875 6.97266 3.1875 7.53125V12.3438C3.1875 12.9238 3.63867 13.375 4.21875 13.375H11.7812C12.3398 13.375 12.8125 12.9238 12.8125 12.3438V7.53125ZM5.9375 6.5V5.46875C5.9375 4.35156 6.86133 3.40625 8 3.40625C9.11719 3.40625 10.0625 4.35156 10.0625 5.46875V6.5H5.9375ZM11.7812 7.53125V12.3438H4.21875V7.53125H11.7812Z" fill="${color}"/>
+</svg>
+`;
+export const officialIcon = (
+  color: string = '#1054DE'
+) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M20.4187 17.2431V15.484L21.6578 14.2367C21.6585 14.236 21.6591 14.2353 21.6598 14.2347C22.3179 13.5809 22.7516 12.8357 22.75 11.9944C22.7484 11.1539 22.3123 10.4096 21.6598 9.75703L20.4187 8.51599V6.75731C20.4187 5.82929 20.1982 4.99367 19.6024 4.39784C19.0065 3.802 18.1709 3.58149 17.2429 3.58149H15.4842L14.2432 2.34045L13.7265 2.85718L14.2432 2.34045C13.5864 1.6837 12.8389 1.24643 11.9953 1.24805C11.1522 1.24967 10.4079 1.68919 9.75583 2.35012L8.51619 3.58149H6.75709C5.8332 3.58149 4.99652 3.79565 4.39906 4.38988C3.80081 4.98488 3.58127 5.82267 3.58127 6.75731V8.51599L2.34222 9.75505C2.34186 9.75541 2.3415 9.75576 2.34114 9.75612C1.68254 10.4101 1.24839 11.1557 1.25 11.9973C1.25162 12.8375 1.68721 13.5814 2.33924 14.2337C2.33957 14.2341 2.3399 14.2344 2.34023 14.2347L3.58127 15.484V17.2431C3.58127 18.1712 3.80178 19.0068 4.39761 19.6026C4.99345 20.1984 5.82907 20.419 6.75709 20.419H8.51577L9.75483 21.658C9.75525 21.6584 9.75567 21.6588 9.75609 21.6593C10.4102 22.3179 11.1557 22.7518 11.9982 22.7502C12.8389 22.7486 13.5848 22.3135 14.2412 21.662L14.2432 21.66L15.4842 20.419H17.2429C18.1709 20.419 19.0065 20.1984 19.6024 19.6026C20.1982 19.0068 20.4187 18.1712 20.4187 17.2431ZM11.1362 14.6129L15.3255 8.63315C15.3257 8.63284 15.3259 8.63254 15.3261 8.63223C15.3555 8.5907 15.3769 8.56758 15.3897 8.55538C15.3961 8.5494 15.4003 8.54608 15.4025 8.54447L15.4048 8.5429L15.4054 8.54255L15.4054 8.54254L15.4062 8.54222C15.4072 8.54187 15.4101 8.54087 15.4157 8.53964C15.4272 8.53713 15.4517 8.53329 15.4953 8.53329C15.5882 8.53329 15.6273 8.56322 15.6388 8.5743C15.649 8.58401 15.6664 8.60526 15.6669 8.65924C15.6668 8.65923 15.6656 8.67493 15.6559 8.70327C15.6448 8.73575 15.6277 8.76991 15.6066 8.79938L15.6062 8.79996L10.738 15.6294C10.7079 15.6668 10.6872 15.6781 10.6764 15.6832C10.6626 15.6896 10.6288 15.7019 10.5567 15.7019C10.4668 15.7019 10.4177 15.6788 10.3664 15.6274L7.5945 12.5264L7.58765 12.5187L7.58058 12.5112C7.58023 12.5109 7.57454 12.5045 7.5688 12.4892C7.56299 12.4738 7.55926 12.4547 7.55926 12.435C7.55926 12.3586 7.58347 12.3322 7.59029 12.3255C7.59747 12.3184 7.63028 12.2894 7.72221 12.2894C7.78716 12.2894 7.81058 12.2994 7.8149 12.3013L7.81503 12.3014C7.81882 12.303 7.8367 12.3108 7.87134 12.3481L9.9633 14.6831L10.5939 15.3869L11.1362 14.6129Z" fill="${color}" stroke="white" stroke-width="1.5"/>
+</svg>`;
+export const plusIcon = (
+  color: string = '#292B32'
+) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.1875 11.125H13.125V6.0625C13.125 5.78125 12.8438 5.5 12.5625 5.5H11.4375C11.1211 5.5 10.875 5.78125 10.875 6.0625V11.125H5.8125C5.49609 11.125 5.25 11.4062 5.25 11.6875V12.8125C5.25 13.1289 5.49609 13.375 5.8125 13.375H10.875V18.4375C10.875 18.7539 11.1211 19 11.4375 19H12.5625C12.8438 19 13.125 18.7539 13.125 18.4375V13.375H18.1875C18.4688 13.375 18.75 13.1289 18.75 12.8125V11.6875C18.75 11.4062 18.4688 11.125 18.1875 11.125Z" fill="${color}"/>
+</svg>
+`;
+export const categoryIcon: string = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#D9E5FC"/>
+<path d="M28 21C28 20.4688 27.5312 20 27 20H22C21.4375 20 21 20.4688 21 21V26C21 26.5625 21.4375 27 22 27H27C27.5312 27 28 26.5625 28 26V21ZM14 19C11.7812 19 10 20.8125 10 23C10 25.2188 11.7812 27 14 27C16.1875 27 18 25.2188 18 23C18 20.8125 16.1875 19 14 19ZM26.9688 17C27.75 17 28.25 16.1875 27.8438 15.5L24.875 10.5C24.4688 9.84375 23.5 9.84375 23.0938 10.5L20.125 15.5C19.7188 16.1875 20.2188 17 21 17H26.9688Z" fill="white"/>
+</svg>
+`;
+export const publicIcon: string = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0.53125C4.18359 0.53125 0.28125 4.46875 0.28125 9.25C0.28125 14.0664 4.18359 17.9688 9 17.9688C13.7812 17.9688 17.7188 14.0664 17.7188 9.25C17.7188 4.46875 13.7812 0.53125 9 0.53125ZM9 16.2812C5.09766 16.2812 1.96875 13.1523 1.96875 9.25C1.96875 5.38281 5.09766 2.21875 9 2.21875C9.35156 2.21875 9.73828 2.28906 10.125 2.32422V3.09766C10.125 3.41406 9.87891 3.66016 9.5625 3.66016H8.71875C8.54297 3.66016 8.36719 3.73047 8.26172 3.87109L7.98047 4.32812C7.91016 4.43359 7.76953 4.50391 7.66406 4.53906L7.13672 4.67969C6.89062 4.71484 6.71484 4.92578 6.71484 5.20703V5.34766C6.71484 5.66406 6.96094 5.91016 7.27734 5.91016H10.4414C10.582 5.91016 10.7227 5.94531 10.8281 6.05078L11.0742 6.29688C11.1797 6.40234 11.3203 6.47266 11.4609 6.47266H11.8125C12.1289 6.47266 12.375 6.68359 12.375 7C12.375 7.24609 12.1992 7.45703 11.9883 7.52734L10.3359 8.05469C10.1953 8.125 10.0195 8.08984 9.91406 8.05469L9.38672 7.77344C9.14062 7.66797 8.82422 7.59766 8.54297 7.59766H8.50781C8.08594 7.59766 7.66406 7.70312 7.34766 7.94922L6.36328 8.6875C5.90625 9.03906 5.625 9.60156 5.625 10.2344V10.7266C5.625 11.2188 5.80078 11.7109 6.1875 12.0625C6.50391 12.4141 6.99609 12.625 7.52344 12.625H8.4375C8.75391 12.625 9 12.8711 9 13.1875V14.2422C9 14.6641 9.07031 15.0859 9.28125 15.4727C9.45703 15.8242 9.77344 16.0352 10.1602 16.0352C10.4766 16.0352 10.793 15.8594 10.9688 15.5781L11.4258 14.9102C11.6719 14.5234 11.9531 14.1719 12.3047 13.8555C12.375 13.7852 12.4453 13.6797 12.4805 13.5742L12.6211 12.7656C12.6211 12.6953 12.6562 12.625 12.7266 12.5547L13.3594 11.6758C13.4297 11.5703 13.5 11.4648 13.5 11.3242V10.9375C13.5 10.6211 13.2539 10.375 12.9375 10.375H12.6562C12.4805 10.375 12.3047 10.3047 12.1992 10.1641L11.7422 9.46094C11.5312 9.14453 11.6719 8.75781 12.0234 8.61719H12.0938C12.2695 8.54688 12.4453 8.58203 12.5859 8.65234L13.2188 9.10938C13.2891 9.14453 13.3945 9.17969 13.5352 9.17969C13.6055 9.17969 13.6758 9.17969 13.7812 9.10938L14.3086 8.86328C14.4844 8.75781 14.625 8.58203 14.625 8.37109V8.125C14.625 7.80859 14.8359 7.5625 15.1523 7.5625H15.7852C15.9258 8.125 16.0312 8.6875 16.0312 9.25C16.0312 13.1523 12.8672 16.2812 9 16.2812Z" fill="#292B32"/>
+</svg>
+`;
+export const editIcon = (
+  color: string = '#292B32'
+) => `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4434 4.54492L16.3301 3.43164C15.9785 3.08008 15.4805 2.875 15.0117 2.875C14.543 2.875 14.0449 3.08008 13.6934 3.43164L11.4961 5.62891L10.5 6.625L3.35156 13.7734L3 17.1133C2.94141 17.5234 3.26367 17.875 3.67383 17.875C3.70312 17.875 3.73242 17.875 3.76172 17.875L7.10156 17.5234L14.25 10.375L15.2461 9.37891L17.4434 7.18164C18.1758 6.44922 18.1758 5.27734 17.4434 4.54492ZM6.45703 16.1758L4.49414 16.3809L4.69922 14.418L11.4668 7.62109L12.375 6.71289L14.1621 8.5L13.2539 9.4082L6.45703 16.1758ZM16.4473 6.18555L15.1582 7.50391L13.3711 5.7168L14.6895 4.42773C14.8066 4.31055 14.9531 4.28125 15.0117 4.28125C15.0703 4.28125 15.2168 4.31055 15.334 4.42773L16.4473 5.54102C16.623 5.7168 16.623 6.00977 16.4473 6.18555Z" fill="${color}"/>
+</svg>
+`;
+
+export const userIcon = () => `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#D9E5FC"/>
+<path d="M23.1255 13.1312C22.385 12.4069 21.3806 12 20.3333 12C19.2861 12 18.2817 12.4069 17.5412 13.1312C16.8006 13.8555 16.3846 14.8378 16.3846 15.8621C16.3846 16.8864 16.8006 17.8687 17.5412 18.593C18.2817 19.3172 19.2861 19.7241 20.3333 19.7241C21.3806 19.7241 22.385 19.3172 23.1255 18.593C23.866 17.8687 24.2821 16.8864 24.2821 15.8621C24.2821 14.8378 23.866 13.8555 23.1255 13.1312Z" fill="white"/>
+<path d="M20.3333 21.931C16.2831 21.931 13 23.7848 13 26.069V28H27.6667V26.069C27.6667 23.7848 24.3836 21.931 20.3333 21.931Z" fill="white"/>
+</svg>`;
+
+export const primaryDot = (color: string = '#1054DE') => `
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
+<circle cx="3" cy="3" r="3" fill=${color}/>
+</svg>`;
+
+export const storyRing = (colorOne = '#339AF9', colorTwo = '#78FA58') => `
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+<circle cx="32" cy="32" r="31" stroke="url(#paint0_linear_2142_16601)" stroke-width="2"/>
+<defs>
+<linearGradient id="paint0_linear_2142_16601" x1="46.5" y1="2.5" x2="13.5" y2="61" gradientUnits="userSpaceOnUse">
+<stop stop-color="${colorOne}"/>
+<stop offset="1" stop-color="${colorTwo}"/>
+</linearGradient>
+</defs>
+</svg>`;
+export const expandIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M13.824 9.72708L10.6334 12.8479C10.3988 13.0544 10.0469 13.0544 9.83578 12.8249L9.31965 12.3201C9.08504 12.1136 9.08504 11.7464 9.31965 11.5399L10.7507 10.2549H2.56305C2.2346 10.2549 2 10.0024 2 9.70413V5.56C2 5.25072 2.25072 5 2.56 5L3.31683 5C3.62611 5.00001 3.87683 5.25073 3.87683 5.56V8.4191H10.7507L9.31965 7.11113C9.08504 6.9046 9.08504 6.53745 9.31965 6.33093L9.83578 5.8261C10.0469 5.59663 10.3988 5.59663 10.6334 5.80315L13.824 8.92393C14.0587 9.1534 14.0587 9.49761 13.824 9.72708Z" fill="#636878"/>
+</svg>
+`;
+export const pollIcon = (
+  color: string = '#292B32'
+): string => `<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1875 0.375H1.8125C0.863281 0.375 0.125 1.14844 0.125 2.0625V14.4375C0.125 15.3867 0.863281 16.125 1.8125 16.125H14.1875C15.1016 16.125 15.875 15.3867 15.875 14.4375V2.0625C15.875 1.14844 15.1016 0.375 14.1875 0.375ZM14.1875 14.4375H1.8125V2.0625H14.1875V14.4375ZM4.34375 12.75H4.90625C5.1875 12.75 5.46875 12.5039 5.46875 12.1875V7.6875C5.46875 7.40625 5.1875 7.125 4.90625 7.125H4.34375C4.02734 7.125 3.78125 7.40625 3.78125 7.6875V12.1875C3.78125 12.5039 4.02734 12.75 4.34375 12.75ZM7.71875 12.75H8.28125C8.5625 12.75 8.84375 12.5039 8.84375 12.1875V4.3125C8.84375 4.03125 8.5625 3.75 8.28125 3.75H7.71875C7.40234 3.75 7.15625 4.03125 7.15625 4.3125V12.1875C7.15625 12.5039 7.40234 12.75 7.71875 12.75ZM11.0938 12.75H11.6562C11.9375 12.75 12.2188 12.5039 12.2188 12.1875V9.9375C12.2188 9.65625 11.9375 9.375 11.6562 9.375H11.0938C10.7773 9.375 10.5312 9.65625 10.5312 9.9375V12.1875C10.5312 12.5039 10.7773 12.75 11.0938 12.75Z" fill="${color}"/>
+</svg>`;
+
+export const radioOn = (
+  color: string = '#1054DE'
+): string => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7188 9.25C17.7188 4.46875 13.7812 0.53125 9 0.53125C4.18359 0.53125 0.28125 4.46875 0.28125 9.25C0.28125 14.0664 4.18359 17.9688 9 17.9688C13.7812 17.9688 17.7188 14.0664 17.7188 9.25ZM7.98047 13.8906C7.76953 14.1016 7.38281 14.1016 7.17188 13.8906L3.51562 10.2344C3.30469 10.0234 3.30469 9.63672 3.51562 9.42578L4.32422 8.65234C4.53516 8.40625 4.88672 8.40625 5.09766 8.65234L7.59375 11.1133L12.8672 5.83984C13.0781 5.59375 13.4297 5.59375 13.6406 5.83984L14.4492 6.61328C14.6602 6.82422 14.6602 7.21094 14.4492 7.42188L7.98047 13.8906Z" fill="${color}" />
+</svg>`;
+
+export const radioOff = (
+  color: string = '#A5A9B5'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12Z" fill="${color}" />
+</svg>`;
+
+export const blockOrUnblock = (
+  color: string = '#292B32'
+): string => `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#EBECEF" />
+<path d="M23.7812 20.3438C24 20.5 24.0625 20.8125 23.875 21.0312L23.2812 21.8125C23.0938 22.0312 22.7812 22.0625 22.5625 21.9062L4.1875 7.6875C3.96875 7.53125 3.9375 7.21875 4.09375 7L4.71875 6.21875C4.875 6 5.1875 5.9375 5.40625 6.125L10.0312 9.6875C10.1875 7.625 11.875 6 14 6C16.1875 6 18 7.8125 18 10C18 11.75 16.875 13.2188 15.3125 13.7812L23.7812 20.3438ZM7 19.2188C7 17.125 8.5 15.4375 10.4688 15.0938L19.4375 22H8.5C7.65625 22 7 21.3438 7 20.5V19.2188Z" fill="${color}" />
+</svg>`;
+
+export const unfollow = (
+  color: string = '#292B32'
+): string => `<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4062 7.5L19.8438 6.09375C20.0312 5.90625 20.0312 5.5625 19.8438 5.375L19.125 4.65625C18.9375 4.46875 18.5938 4.46875 18.4062 4.65625L17 6.09375L15.5625 4.65625C15.375 4.46875 15.0312 4.46875 14.8438 4.65625L14.125 5.375C13.9375 5.5625 13.9375 5.90625 14.125 6.09375L15.5625 7.5L14.125 8.9375C13.9375 9.125 13.9375 9.46875 14.125 9.65625L14.8438 10.375C15.0312 10.5625 15.375 10.5625 15.5625 10.375L17 8.9375L18.4062 10.375C18.5938 10.5625 18.9375 10.5625 19.125 10.375L19.8438 9.65625C20.0312 9.46875 20.0312 9.125 19.8438 8.9375L18.4062 7.5ZM7 8C9.1875 8 11 6.21875 11 4C11 1.8125 9.1875 0 7 0C4.78125 0 3 1.8125 3 4C3 6.21875 4.78125 8 7 8ZM9.78125 9H9.25C8.5625 9.34375 7.8125 9.5 7 9.5C6.1875 9.5 5.40625 9.34375 4.71875 9H4.1875C1.875 9 0 10.9062 0 13.2188V14.5C0 15.3438 0.65625 16 1.5 16H12.5C13.3125 16 14 15.3438 14 14.5V13.2188C14 10.9062 12.0938 9 9.78125 9Z" fill="${color}" />
+</svg>`;
+
+export const report = (
+  color: string = '#292B32'
+): string => `<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9062 4.09375C9.21875 4.09375 7.84375 3 5.75 3C4.96875 3 4.28125 3.15625 3.625 3.40625C3.6875 3.1875 3.71875 3 3.71875 2.78125C3.71875 2.71875 3.71875 2.6875 3.71875 2.65625C3.6875 1.78125 2.9375 1.0625 2.0625 1.03125C1.0625 0.96875 0.25 1.78125 0.25 2.75C0.25 3.375 0.53125 3.875 1 4.1875V16.25C1 16.6875 1.3125 17 1.75 17H2.25C2.65625 17 3 16.6875 3 16.25V13.3125C3.875 12.9375 4.96875 12.625 6.5625 12.625C8.25 12.625 9.625 13.7188 11.7188 13.7188C13.2188 13.7188 14.4375 13.1875 15.5625 12.4375C15.8125 12.25 16 11.9375 16 11.625V4C16 3.28125 15.2188 2.8125 14.5625 3.09375C13.5 3.59375 12.1875 4.09375 10.9062 4.09375Z" fill="${color}" />
+</svg>`;
+
+export const reportOutLine = (
+  color: string
+) => `<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3125 3.0625C13.543 3.0625 14.8789 2.64062 16.1445 2.07812C17.2344 1.62109 18.5 2.42969 18.5 3.625V12.0625C18.5 12.6602 18.1836 13.1875 17.7266 13.5039C16.7773 14.1016 15.2656 14.875 13.1914 14.875C10.8008 14.875 9.21875 13.75 7.49609 13.75C5.52734 13.75 4.33203 14.1719 3.03125 14.7695V17.6875C3.03125 18.0039 2.75 18.25 2.46875 18.25H1.90625C1.58984 18.25 1.34375 18.0039 1.34375 17.6875V3.41406C0.816406 3.13281 0.5 2.57031 0.5 1.9375C0.5 0.988281 1.30859 0.214844 2.29297 0.285156C3.10156 0.320312 3.76953 0.953125 3.83984 1.76172C3.83984 1.79688 3.875 1.90234 3.875 1.9375C3.875 2.11328 3.80469 2.35938 3.76953 2.5C4.54297 2.18359 5.49219 1.9375 6.61719 1.9375C9.00781 1.9375 10.5898 3.0625 12.3125 3.0625ZM16.8125 12.0625V3.625C15.6875 4.15234 13.8242 4.75 12.3125 4.75C10.2031 4.75 8.72656 3.625 6.61719 3.625C5.14062 3.625 3.76953 4.22266 3.03125 4.75V12.9062C4.12109 12.4141 5.98438 12.0625 7.49609 12.0625C9.60547 12.0625 11.082 13.1875 13.1914 13.1875C14.668 13.1875 16.0391 12.625 16.8125 12.0625Z" fill="${color}" />
+</svg>`;
+
+export const photo = (
+  color: string = '#A5A9B5'
+): string => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1875 17.5C14.9297 17.5 17.25 15.2852 17.25 12.4375C17.25 9.69531 14.9297 7.375 12.1875 7.375C9.33984 7.375 7.125 9.69531 7.125 12.4375C7.125 15.2852 9.33984 17.5 12.1875 17.5ZM12.1875 10.75C13.0312 10.75 13.875 11.5938 13.875 12.4375C13.875 13.3867 13.0312 14.125 12.1875 14.125C11.2383 14.125 10.5 13.3867 10.5 12.4375C10.5 11.5938 11.2383 10.75 12.1875 10.75ZM44.25 0.625H3.75C1.85156 0.625 0.375 2.20703 0.375 4V44.5C0.375 46.3984 1.85156 47.875 3.75 47.875H44.25C46.043 47.875 47.625 46.3984 47.625 44.5V4C47.625 2.20703 46.043 0.625 44.25 0.625ZM44.25 44.5H3.75V36.0625H44.25V44.5ZM9.33984 32.6875L14.8242 25.4102L19.043 31L17.7773 32.6875H9.33984ZM21.9961 32.6875L30.0117 22.0352L38.0273 32.6875H21.9961ZM44.25 32.6875H42.2461L31.3828 18.2383C30.6445 17.3945 29.2734 17.3945 28.6406 18.2383L21.1523 28.2578L16.1953 21.6133C15.457 20.7695 14.0859 20.7695 13.4531 21.6133L5.12109 32.6875H3.75V4H44.25V32.6875Z" fill="${color}" />
+</svg>`;
+
+export const video = (
+  color: string = '#A5A9B5'
+): string => `<svg width="54" height="48" viewBox="0 0 54 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.5195 14.125L50.625 17.5L50.5195 44.5L40.5 37.5391V24.5664L50.5195 17.5V14.125C49.8867 14.2305 49.1484 14.4414 48.6211 14.7578L40.5 20.4531V19.1875C40.5 16.4453 38.1797 14.125 35.4375 14.125H10.125V9.0625C10.125 6.32031 12.3398 4 15.1875 4H32.9062C33.3281 4 33.75 3.68359 33.75 3.15625V1.46875C33.75 1.04688 33.3281 0.625 32.9062 0.625H15.1875C10.4414 0.625 6.75 4.42188 6.75 9.0625V14.125H5.0625C2.21484 14.125 0 16.4453 0 19.1875V42.8125C0 45.6602 2.21484 47.875 5.0625 47.875H35.4375C38.1797 47.875 40.5 45.6602 40.5 42.8125V41.6523L48.6211 47.3477C49.1484 47.6641 49.8867 47.875 50.5195 47.875C52.3125 47.875 54 46.5039 54 44.6055V17.5C54 15.4961 52.3125 14.125 50.5195 14.125ZM37.125 42.8125C37.125 43.7617 36.2812 44.5 35.4375 44.5H5.0625C4.11328 44.5 3.375 43.7617 3.375 42.8125V19.1875C3.375 18.3438 4.11328 17.5 5.0625 17.5H35.4375C36.2812 17.5 37.125 18.3438 37.125 19.1875V42.8125ZM33.0117 20.875H7.38281C6.96094 20.9805 6.75 21.1914 6.75 21.6133V23.6172C6.75 24.0391 6.96094 24.25 7.38281 24.25H33.0117C33.4336 24.25 33.6445 24.0391 33.75 23.6172V21.6133C33.6445 21.1914 33.4336 20.9805 33.0117 20.875Z" fill="${color}" />
+</svg>`;
+
+export const fileSearch = (
+  color: string = '#A5A9B5'
+): string => `<svg width="41" height="37" viewBox="0 0 41 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.3984 33.8281L34.6328 28.0625C35.5469 26.7969 36.1797 24.5469 36.1797 23C36.1797 18.0781 32.1719 14 27.1797 14C22.2578 14 18.1797 18.0781 18.1797 23C18.1797 27.9922 22.2578 32 27.1797 32C28.7266 32 30.9766 31.3672 32.2422 30.4531L38.0078 36.2188C38.1484 36.3594 38.5703 36.5703 38.7812 36.5703C39.0625 36.5703 39.4141 36.3594 39.625 36.2188L40.3984 35.375C40.5391 35.2344 40.6797 34.8828 40.6797 34.6016C40.6797 34.3906 40.5391 33.9688 40.3984 33.8281ZM27.25 28.625C24.0859 28.625 21.625 26.1641 21.625 23C21.625 19.9062 24.0859 17.375 27.25 17.375C30.3438 17.375 32.875 19.9062 32.875 23C32.8047 26.1641 30.3438 28.625 27.25 28.625ZM3.625 33.125V3.94531H14.875V11.2578C14.875 12.1719 15.5781 12.9453 16.4922 12.9453H16.5625H22.3984C23.875 12.2422 25.4922 11.8203 27.25 11.8203V9.78125C27.1797 9.07812 26.7578 7.95312 26.1953 7.39062L20.3594 1.55469C19.7969 0.992188 18.7422 0.570312 17.9688 0.5H3.625C1.72656 0.570312 0.25 2.04688 0.25 3.94531V33.125C0.25 35.0234 1.72656 36.5 3.625 36.5H23.875C25.1406 36.5 26.6172 35.5156 27.0391 34.25C25.7031 34.25 23.5938 33.7578 22.3984 33.125H3.625ZM18.25 4.15625L23.5938 9.57031H18.25V4.15625Z" fill="${color}" />
+</svg>`;
+
+export const likeCircle = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" fill="url(#paint0_linear_208_29953)" stroke="white" />
+<path d="M6.23838 8.8125H4.51655C4.21523 8.8125 4 9.04883 4 9.32812V14.4844C4 14.7852 4.21523 15 4.51655 15H6.23838C6.51818 15 6.75493 14.7852 6.75493 14.4844V9.32812C6.75493 9.04883 6.51818 8.8125 6.23838 8.8125ZM5.37746 14.1406C5.07614 14.1406 4.86091 13.9258 4.86091 13.625C4.86091 13.3457 5.07614 13.1094 5.37746 13.1094C5.65726 13.1094 5.89401 13.3457 5.89401 13.625C5.89401 13.9258 5.65726 14.1406 5.37746 14.1406ZM12.2648 5.76172C12.2648 4.17188 11.2317 4 10.7151 4C10.2632 4 10.0694 4.85938 9.98336 5.24609C9.85422 5.71875 9.74661 6.19141 9.42376 6.51367C8.73503 7.22266 8.36914 8.10352 7.50823 8.94141C7.46518 9.00586 7.44366 9.07031 7.44366 9.13477V13.7324C7.44366 13.8613 7.55127 13.9688 7.68041 13.9902C8.02478 13.9902 8.47676 14.1836 8.82112 14.334C9.50986 14.6348 10.3492 15 11.3823 15H11.4469C12.3724 15 13.4701 15 13.9005 14.377C14.0942 14.1191 14.1373 13.7969 14.0297 13.4102C14.3955 13.0449 14.5677 12.3574 14.3955 11.7988C14.7614 11.3047 14.8045 10.5957 14.5893 10.1016C14.8475 9.84375 15.0197 9.43555 14.9982 9.04883C14.9982 8.38281 14.4386 7.78125 13.7283 7.78125H11.533C11.7052 7.17969 12.2648 6.66406 12.2648 5.76172Z" fill="white" />
+<defs>
+  <linearGradient id="paint0_linear_208_29953" x1="7.5" y1="2" x2="16.5" y2="24.5" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#5B9DFF" />
+    <stop offset="1" stop-color="#0041BE" />
+  </linearGradient>
+</defs>
+</svg>`;
+
+export const seenIcon = (
+  color: string = '#A5A9B5'
+): string => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6.5C11.9375 6.5 13.5 8.09375 13.5 10C13.5 11.9375 11.9375 13.5 10 13.5C8.0625 13.5 6.5 11.9375 6.5 10C6.5 9.71875 6.5625 9.3125 6.65625 9.03125C6.84375 9.15625 7.25 9.25 7.5 9.25C8.4375 9.25 9.25 8.46875 9.25 7.5C9.21875 7.28125 9.125 6.875 9 6.65625C9.28125 6.59375 9.71875 6.53125 10 6.5ZM18.875 9.5625C18.9375 9.6875 18.9688 9.875 18.9688 10C18.9688 10.1562 18.9375 10.3438 18.875 10.4688C17.1875 13.7812 13.8125 16 10 16C6.15625 16 2.78125 13.7812 1.09375 10.4688C1.03125 10.3438 1 10.1562 1 10.0312C1 9.875 1.03125 9.6875 1.09375 9.5625C2.78125 6.25 6.15625 4 10 4C13.8125 4 17.1875 6.25 18.875 9.5625ZM10 14.5C13.0625 14.5 15.9062 12.7812 17.4062 10C15.9062 7.21875 13.0625 5.5 10 5.5C6.90625 5.5 4.0625 7.21875 2.5625 10C4.0625 12.7812 6.90625 14.5 10 14.5Z" fill="${color}" />
+</svg>`;
+
+export const storyCommentIcon = (
+  color: string = '#A5A9B5'
+): string => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.1875C14.6816 2.1875 18.5 5.30859 18.5 9.09375C18.5 12.9121 14.6816 16 10 16C8.70508 16 7.50977 15.7676 6.41406 15.3691C5.61719 16.0332 3.95703 17.0625 1.76562 17.0625C1.63281 17.0625 1.56641 17.0293 1.5 16.9297C1.4668 16.8301 1.5 16.6973 1.56641 16.6309C1.56641 16.5977 2.96094 15.1367 3.39258 13.4434C2.19727 12.248 1.5 10.7539 1.5 9.09375C1.5 5.30859 5.28516 2.1875 10 2.1875Z" fill="${color}" />
+</svg>`;
+
+export const storyLikedIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="url(#paint0_linear_5550_34780)" />
+<path d="M7.48586 10.5748H5.41966C5.05808 10.5748 4.7998 10.8584 4.7998 11.1936V17.3811C4.7998 17.742 5.05808 17.9998 5.41966 17.9998H7.48586C7.82162 17.9998 8.10572 17.742 8.10572 17.3811V11.1936C8.10572 10.8584 7.82162 10.5748 7.48586 10.5748ZM6.45276 16.9686C6.09118 16.9686 5.8329 16.7107 5.8329 16.3498C5.8329 16.0146 6.09118 15.7311 6.45276 15.7311C6.78852 15.7311 7.07262 16.0146 7.07262 16.3498C7.07262 16.7107 6.78852 16.9686 6.45276 16.9686ZM14.7175 6.91387C14.7175 5.00605 13.4778 4.7998 12.858 4.7998C12.3156 4.7998 12.0831 5.83105 11.9798 6.29512C11.8249 6.8623 11.6957 7.42949 11.3083 7.81621C10.4818 8.66699 10.0428 9.72402 9.00968 10.7295C8.95802 10.8068 8.9322 10.8842 8.9322 10.9615V16.4787C8.9322 16.6334 9.06133 16.7623 9.2163 16.7881C9.62954 16.7881 10.1719 17.0201 10.5852 17.2006C11.4116 17.5615 12.4189 17.9998 13.6586 17.9998H13.7361C14.8467 17.9998 16.1639 17.9998 16.6804 17.2521C16.9129 16.9428 16.9645 16.5561 16.8354 16.092C17.2745 15.6537 17.4811 14.8287 17.2745 14.1584C17.7135 13.5654 17.7652 12.7146 17.5069 12.1217C17.8168 11.8123 18.0235 11.3225 17.9976 10.8584C17.9976 10.0592 17.3261 9.33731 16.4738 9.33731H13.8394C14.046 8.61543 14.7175 7.99668 14.7175 6.91387Z" fill="white" />
+<defs>
+  <linearGradient id="paint0_linear_5550_34780" x1="9" y1="2.4" x2="19.8" y2="29.4" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#5B9DFF" />
+    <stop offset="1" stop-color="#0041BE" />
+  </linearGradient>
+</defs>
+</svg>`;
+
+export const storyLikeIcon = `<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.793 11.0254C17.9414 11.8789 17.8301 12.6953 17.459 13.3633C17.5703 14.2539 17.3105 15.1816 16.791 15.8496C16.7539 17.9277 15.4922 19.375 12.6348 19.375C12.375 19.375 12.0781 19.375 11.7812 19.375C7.99609 19.375 6.8457 17.9648 5.17578 17.9277C5.06445 18.4102 4.58203 18.7812 4.0625 18.7812H1.6875C1.01953 18.7812 0.5 18.2617 0.5 17.5938V8.6875C0.5 8.05664 1.01953 7.5 1.6875 7.5H5.32422C6.0293 6.90625 7.03125 5.27344 7.88477 4.41992C8.4043 3.90039 8.25586 0.375 10.5566 0.375C12.6719 0.375 14.082 1.5625 14.082 4.27148C14.082 4.97656 13.9336 5.5332 13.748 6.01562H15.1211C16.9023 6.01562 18.3125 7.53711 18.3125 9.16992C18.3125 9.875 18.127 10.4688 17.793 11.0254ZM15.4922 13.0293C16.3086 12.2871 16.1973 11.1367 15.6777 10.5801C16.0488 10.5801 16.5312 9.875 16.5312 9.20703C16.4941 8.50195 15.9004 7.79688 15.1211 7.79688H11.2617C11.2617 6.38672 12.3008 5.71875 12.3008 4.27148C12.3008 3.38086 12.3008 2.15625 10.5566 2.15625C9.85156 2.86133 10.1855 4.64258 9.14648 5.68164C8.14453 6.68359 6.69727 9.28125 5.62109 9.28125H5.25V16.2207C7.2168 16.2207 8.96094 17.5938 11.5957 17.5938H13.0059C14.3047 17.5938 15.2695 16.9629 14.9727 15.1816C15.5293 14.8477 15.9746 13.8086 15.4922 13.0293ZM3.76562 16.4062C3.76562 15.9238 3.35742 15.5156 2.875 15.5156C2.35547 15.5156 1.98438 15.9238 1.98438 16.4062C1.98438 16.9258 2.35547 17.2969 2.875 17.2969C3.35742 17.2969 3.76562 16.9258 3.76562 16.4062Z" fill="#A5A9B5" />
+</svg>`;
+
+export const storyHyperLinkIcon = (
+  color: string = '#ffffff'
+): string => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.0391 8.21094C13.832 10.0039 13.9375 12.8867 12.3555 14.7852C12.1445 15.0664 12.2852 14.9258 9.40234 17.8086C7.46875 19.7422 4.33984 19.7422 2.44141 17.8086C0.507812 15.9102 0.507812 12.7812 2.44141 10.8477C3.56641 9.72266 4.23438 9.05469 4.65625 8.63281C4.90234 8.38672 5.35938 8.5625 5.35938 8.91406C5.39453 9.30078 5.46484 9.89844 5.53516 10.25C5.57031 10.3906 5.53516 10.5312 5.42969 10.6367L3.8125 12.2539C2.65234 13.4141 2.65234 15.2773 3.8125 16.4375C4.97266 17.5977 6.83594 17.5977 7.99609 16.4375L10.6328 13.8008C11.793 12.6406 11.793 10.7773 10.6328 9.61719C10.457 9.40625 10.0703 9.16016 9.82422 9.05469C9.68359 8.94922 9.57812 8.77344 9.61328 8.59766C9.64844 8.21094 9.82422 7.82422 10.1406 7.54297L10.2812 7.40234C10.4219 7.26172 10.5977 7.22656 10.7734 7.29688C11.2305 7.54297 11.6523 7.82422 12.0391 8.21094ZM17.5234 2.72656C19.457 4.625 19.457 7.75391 17.5234 9.6875C16.3984 10.8125 15.7305 11.4805 15.3086 11.9023C15.0625 12.1484 14.6055 11.9727 14.6055 11.6211C14.5703 11.2344 14.5 10.6367 14.4297 10.2852C14.3945 10.1445 14.4297 10.0039 14.5352 9.89844L16.1523 8.28125C17.3125 7.12109 17.3125 5.25781 16.1523 4.09766C14.9922 2.9375 13.1289 2.9375 11.9688 4.09766L9.33203 6.73438C8.17188 7.89453 8.17188 9.75781 9.33203 10.918C9.50781 11.1289 9.89453 11.375 10.1406 11.4805C10.2812 11.5859 10.3867 11.7617 10.3516 11.9375C10.3164 12.3242 10.1406 12.7109 9.82422 12.9922L9.68359 13.1328C9.54297 13.2734 9.36719 13.3086 9.19141 13.2383C8.73438 12.9922 8.3125 12.7109 7.92578 12.3242C6.13281 10.5312 6.02734 7.64844 7.60938 5.75C7.82031 5.46875 7.67969 5.60938 10.5625 2.72656C12.4961 0.792969 15.625 0.792969 17.5234 2.72656Z" fill="${color}" />
+</svg>`;
+
+export const storyCircleCreatePlusIcon = (
+  color: string = '#ffffff'
+): string => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.25" fill="#1054DE" stroke="${color}" stroke-width="1.5" />
+<path d="M11.4375 7.625C11.5938 7.625 11.75 7.78125 11.75 7.9375V8.5625C11.75 8.73828 11.5938 8.875 11.4375 8.875H8.625V11.6875C8.625 11.8633 8.46875 12 8.3125 12H7.6875C7.51172 12 7.375 11.8633 7.375 11.6875V8.875H4.5625C4.38672 8.875 4.25 8.73828 4.25 8.5625V7.9375C4.25 7.78125 4.38672 7.625 4.5625 7.625H7.375V4.8125C7.375 4.65625 7.51172 4.5 7.6875 4.5H8.3125C8.46875 4.5 8.625 4.65625 8.625 4.8125V7.625H11.4375Z" fill="${color}" />
+</svg>`;
+
+export const leftLongArrow = (
+  color: string = '#ffffff'
+): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="black" fill-opacity="0.5" />
+<path d="M16.1758 23.9141C16.0352 24.0898 15.7539 24.0898 15.5781 23.9141L8.23047 16.5664C8.05469 16.3906 8.05469 16.1445 8.23047 15.9688L15.5781 8.62109C15.7539 8.44531 16.0352 8.44531 16.1758 8.62109L16.8789 9.28906C17.0547 9.46484 17.0547 9.74609 16.8789 9.88672L11.4297 15.3359H23.4531C23.6641 15.3359 23.875 15.5469 23.875 15.7578V16.7422C23.875 16.9883 23.6641 17.1641 23.4531 17.1641H11.4297L16.8789 22.6484C17.0547 22.7891 17.0547 23.0703 16.8789 23.2461L16.1758 23.9141Z" fill="${color}" />
+</svg>`;
+
+export const rightLongArrow = (
+  color: string = '#292B32'
+): string => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.8125 3.21875C9.9375 3.0625 10.1875 3.0625 10.3438 3.21875L16.875 9.75C17.0312 9.90625 17.0312 10.125 16.875 10.2812L10.3438 16.8125C10.1875 16.9688 9.9375 16.9688 9.8125 16.8125L9.1875 16.2188C9.03125 16.0625 9.03125 15.8125 9.1875 15.6875L14.0312 10.8125H3.375C3.15625 10.8125 3 10.6562 3 10.4375V9.5625C3 9.375 3.15625 9.1875 3.375 9.1875H14.0312L9.1875 4.34375C9.03125 4.21875 9.03125 3.96875 9.1875 3.8125L9.8125 3.21875Z" fill="${color}" />
+</svg>`;
+
+export const flashOn = (
+  color: string = '#ffffff'
+): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="black" fill-opacity="0.5" />
+<path d="M17.6875 15.125H21.625C22.082 15.125 22.5039 15.4414 22.6445 15.8633C22.8203 16.3203 22.7148 16.8125 22.3633 17.1289L13.3633 25.0039C12.9414 25.3203 12.3789 25.3555 11.957 25.0391C11.5352 24.7578 11.3594 24.1953 11.5703 23.7031L14.2773 17.375H10.3398C9.88281 17.375 9.46094 17.0938 9.32031 16.6719C9.14453 16.2148 9.25 15.7227 9.60156 15.4062L18.6016 7.53125C19.0234 7.21484 19.5859 7.17969 20.0078 7.49609C20.4297 7.77734 20.6055 8.33984 20.3945 8.83203L17.6875 15.125Z" fill="${color}" />
+</svg>`;
+
+export const flashOff = (
+  color: string = '#ffffff'
+): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="black" fill-opacity="0.5" />
+<path d="M6.08594 7.46094L12.7656 12.6641L18.6016 7.53125C19.0234 7.21484 19.5859 7.17969 20.0078 7.49609C20.4297 7.77734 20.6055 8.33984 20.3945 8.83203L17.6875 15.125H21.625C22.082 15.125 22.5039 15.4414 22.6797 15.8633C22.8203 16.3203 22.7148 16.8125 22.3633 17.0938L20.5 18.7461L26.8984 23.7734C27.2852 24.0547 27.3555 24.582 27.0391 24.9336C26.7578 25.3203 26.2305 25.3906 25.8789 25.0742L5.06641 8.76172C4.67969 8.48047 4.60938 7.95312 4.92578 7.60156C5.20703 7.21484 5.73438 7.14453 6.08594 7.46094ZM9.60156 15.4062L10.1641 14.9141L13.293 17.375H10.375C9.88281 17.375 9.46094 17.0938 9.32031 16.6719C9.14453 16.2148 9.25 15.7227 9.60156 15.4062ZM11.5703 23.7031L14.0312 17.9727L17.8984 20.9961L13.3633 25.0039C12.9414 25.3203 12.3789 25.3555 11.957 25.0391C11.5352 24.7578 11.3594 24.1953 11.5703 23.7031Z" fill="${color}" />
+</svg>`;
+
+export const switchCamera = (
+  color: string = '#ffffff'
+): string => `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="black" fill-opacity="0.5" />
+<path d="M29.9756 10.0869C30.3271 9.73535 30.8984 9.99902 30.8984 10.4385V16.7227C30.8984 17.0303 30.6348 17.25 30.3711 17.25H24.043C23.6035 17.25 23.3398 16.7227 23.6914 16.3711L26.0645 13.998C24.5264 12.416 22.373 11.4492 20 11.4492C15.3857 11.4492 11.6504 15.0527 11.3867 19.5791C11.3428 19.8867 11.123 20.0625 10.8594 20.0625H9.62891C9.32129 20.0625 9.05762 19.8428 9.10156 19.5352C9.36523 13.7783 14.1553 9.16406 20 9.16406C22.9883 9.16406 25.7129 10.3945 27.6904 12.3721L29.9756 10.0869ZM30.3271 20.0625C30.6348 20.0625 30.8984 20.3262 30.8545 20.6338C30.5908 26.3906 25.8008 30.9609 20 30.9609C16.9678 30.9609 14.2432 29.7744 12.2656 27.7969L9.98047 30.082C9.62891 30.4336 9.10156 30.1699 9.10156 29.7305V23.4023C9.10156 23.1387 9.32129 22.875 9.62891 22.875H15.9131C16.3525 22.875 16.6162 23.4463 16.2646 23.7979L13.8916 26.1709C15.4297 27.7529 17.583 28.6758 20 28.6758C24.5703 28.6758 28.3057 25.1162 28.5693 20.5898C28.6133 20.2822 28.833 20.0625 29.0967 20.0625H30.3271Z" fill="${color}" />
+</svg>`;
+
+export const storyGallery = (
+  color: string = '#ffffff'
+): string => `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="black" fill-opacity="0.5" />
+<path d="M29.1406 11.625C30.2832 11.625 31.25 12.5918 31.25 13.7344V26.3906C31.25 27.5771 30.2832 28.5 29.1406 28.5H10.8594C9.67285 28.5 8.75 27.5771 8.75 26.3906V13.7344C8.75 12.5918 9.67285 11.625 10.8594 11.625H29.1406ZM28.877 26.3906C29.0088 26.3906 29.1406 26.3027 29.1406 26.127V13.998C29.1406 13.8662 29.0088 13.7344 28.877 13.7344H11.123C10.9473 13.7344 10.8594 13.8662 10.8594 13.998V26.127C10.8594 26.3027 10.9473 26.3906 11.123 26.3906H28.877ZM14.375 15.4922C15.3418 15.4922 16.1328 16.2832 16.1328 17.25C16.1328 18.2607 15.3418 19.0078 14.375 19.0078C13.3643 19.0078 12.6172 18.2607 12.6172 17.25C12.6172 16.2832 13.3643 15.4922 14.375 15.4922ZM12.9688 24.2812V22.1719L14.6826 20.458C14.9023 20.2383 15.21 20.2383 15.4297 20.458L17.1875 22.1719L22.417 16.9424C22.6367 16.7227 22.9443 16.7227 23.1641 16.9424L27.0312 20.7656V24.2812H12.9688Z" fill="${color}" />
+</svg>`;
+
+export const storyThreedotsMenu = (
+  color: string = '#ffffff'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6875 12.25C13.6875 13.1992 12.9141 13.9375 12 13.9375C11.0508 13.9375 10.3125 13.1992 10.3125 12.25C10.3125 11.3359 11.0508 10.5625 12 10.5625C12.9141 10.5625 13.6875 11.3359 13.6875 12.25ZM17.9062 10.5625C18.8203 10.5625 19.5938 11.3359 19.5938 12.25C19.5938 13.1992 18.8203 13.9375 17.9062 13.9375C16.957 13.9375 16.2188 13.1992 16.2188 12.25C16.2188 11.3359 16.957 10.5625 17.9062 10.5625ZM6.09375 10.5625C7.00781 10.5625 7.78125 11.3359 7.78125 12.25C7.78125 13.1992 7.00781 13.9375 6.09375 13.9375C5.14453 13.9375 4.40625 13.1992 4.40625 12.25C4.40625 11.3359 5.14453 10.5625 6.09375 10.5625Z" fill="${color}" />
+</svg>`;
+
+export const storyDraftDeletHyperLink = (
+  color: string = '#FA4D30'
+): string => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 4.5C16.75 4.5 17 4.75 17 5V5.5C17 5.78125 16.75 6 16.5 6H16L15.3125 16.5938C15.2812 17.375 14.5938 18 13.8125 18H6.15625C5.375 18 4.6875 17.375 4.65625 16.5938L4 6H3.5C3.21875 6 3 5.78125 3 5.5V5C3 4.75 3.21875 4.5 3.5 4.5H6.0625L7.125 2.75C7.375 2.34375 7.9375 2 8.40625 2H11.5625C12.0312 2 12.5938 2.34375 12.8438 2.75L13.9062 4.5H16.5ZM8.40625 3.5L7.8125 4.5H12.1562L11.5625 3.5H8.40625ZM13.8125 16.5L14.4688 6H5.5L6.15625 16.5H13.8125Z" fill="${color}" />
+</svg>`;
+
+export const toastIcon = (
+  color: string = '#ffffff'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill="${color}" />
+</svg>`;
+
+export const arrowForward = (
+  color: string = '#636878'
+) => `<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.42188 4.21094L1 7.67969C0.882812 7.79688 0.695312 7.79688 0.601562 7.67969L0.132812 7.21094C0.015625 7.09375 0.015625 6.92969 0.132812 6.8125L2.89844 4L0.132812 1.21094C0.015625 1.09375 0.015625 0.90625 0.132812 0.8125L0.601562 0.34375C0.695312 0.226562 0.882812 0.226562 1 0.34375L4.42188 3.8125C4.53906 3.92969 4.53906 4.09375 4.42188 4.21094Z" fill="${color}" />
+</svg>`;
+
+export const likeReaction = (
+  circleColor: string = '#fff'
+) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" fill="url(#paint0_linear_2232_6459)" stroke="${circleColor}" />
+<path d="M6.23838 8.8125H4.51655C4.21523 8.8125 4 9.04883 4 9.32812V14.4844C4 14.7852 4.21523 15 4.51655 15H6.23838C6.51818 15 6.75493 14.7852 6.75493 14.4844V9.32812C6.75493 9.04883 6.51818 8.8125 6.23838 8.8125ZM5.37746 14.1406C5.07614 14.1406 4.86091 13.9258 4.86091 13.625C4.86091 13.3457 5.07614 13.1094 5.37746 13.1094C5.65726 13.1094 5.89401 13.3457 5.89401 13.625C5.89401 13.9258 5.65726 14.1406 5.37746 14.1406ZM12.2648 5.76172C12.2648 4.17188 11.2317 4 10.7151 4C10.2632 4 10.0694 4.85938 9.98336 5.24609C9.85422 5.71875 9.74661 6.19141 9.42376 6.51367C8.73503 7.22266 8.36914 8.10352 7.50823 8.94141C7.46518 9.00586 7.44366 9.07031 7.44366 9.13477V13.7324C7.44366 13.8613 7.55127 13.9688 7.68041 13.9902C8.02478 13.9902 8.47676 14.1836 8.82112 14.334C9.50986 14.6348 10.3492 15 11.3823 15H11.4469C12.3724 15 13.4701 15 13.9005 14.377C14.0942 14.1191 14.1373 13.7969 14.0297 13.4102C14.3955 13.0449 14.5677 12.3574 14.3955 11.7988C14.7614 11.3047 14.8045 10.5957 14.5893 10.1016C14.8475 9.84375 15.0197 9.43555 14.9982 9.04883C14.9982 8.38281 14.4386 7.78125 13.7283 7.78125H11.533C11.7052 7.17969 12.2648 6.66406 12.2648 5.76172Z" fill="white" />
+<defs>
+  <linearGradient id="paint0_linear_2232_6459" x1="7.5" y1="2" x2="16.5" y2="24.5" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#5B9DFF" />
+    <stop offset="1" stop-color="#0041BE" />
+  </linearGradient>
+</defs>`;
+export const loveReaction = (
+  circleColor: string = '#fff'
+) => `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.8184" cy="10" r="10" fill="url(#paint0_linear_3447_19625)" />
+<path d="M14.8475 6.61469C13.7744 5.67128 12.1939 5.85193 11.1988 6.89571L10.8281 7.29716L10.4379 6.89571C9.46231 5.85193 7.86236 5.67128 6.78922 6.61469C5.55999 7.69861 5.50146 9.62557 6.5941 10.7898L10.3793 14.8043C10.6135 15.0652 11.0232 15.0652 11.2574 14.8043L15.0426 10.7898C16.1353 9.62557 16.0767 7.69861 14.8475 6.61469Z" fill="${circleColor}" />
+<defs>
+  <linearGradient id="paint0_linear_3447_19625" x1="5.31836" y1="4.5" x2="18.3184" y2="24.5" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#F76E9F" />
+    <stop offset="0.833333" stop-color="#E82020" />
+  </linearGradient>
+</defs>
+</svg>`;
+
+export const cancelFollowRequest = (
+  color: string = '#292B32'
+): string => `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.6875 11.3125C10.002 11.3125 11.9062 9.4375 11.9062 7.09375C11.9062 4.7793 10.002 2.875 7.6875 2.875C5.34375 2.875 3.46875 4.7793 3.46875 7.09375C3.46875 9.4375 5.34375 11.3125 7.6875 11.3125ZM7.6875 4.28125C9.21094 4.28125 10.5 5.57031 10.5 7.09375C10.5 8.64648 9.21094 9.90625 7.6875 9.90625C6.13477 9.90625 4.875 8.64648 4.875 7.09375C4.875 5.57031 6.13477 4.28125 7.6875 4.28125ZM2.53125 16.4688V15.7363C2.53125 14.3301 3.64453 13.1875 5.05078 13.1875C5.49023 13.1875 6.16406 13.6562 7.6875 13.6562C8.94727 13.6562 9.73828 13.3047 10.0312 13.2461C10.0898 12.748 10.1777 12.25 10.3535 11.8105C9.41602 11.7812 9.09375 12.25 7.6875 12.25C6.28125 12.25 5.90039 11.7812 5.05078 11.7812C2.88281 11.7812 1.125 13.5684 1.125 15.7363V16.4688C1.125 17.2598 1.74023 17.875 2.53125 17.875H11.9355C11.4668 17.4941 11.0859 17.0254 10.7637 16.4688H2.53125ZM15.6562 9.4375C13.3125 9.4375 11.4375 11.3418 11.4375 13.6562C11.4375 16 13.3125 17.875 15.6562 17.875C17.9707 17.875 19.875 16 19.875 13.6562C19.875 11.3418 17.9707 9.4375 15.6562 9.4375ZM17.5312 13.8613C17.5312 14.0078 17.3848 14.125 17.2383 14.125H15.4512C15.3047 14.125 15.1875 14.0078 15.1875 13.8613V11.6055C15.1875 11.459 15.3047 11.3125 15.4512 11.3125H15.832C15.9785 11.3125 16.125 11.459 16.125 11.6055V13.1875H17.2383C17.3848 13.1875 17.5312 13.334 17.5312 13.4805V13.8613Z" fill="${color}" />
+</svg>`;
+
+export const privateUserProfile = (
+  color: string = '#A5A9B5'
+): string => `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 32.1875C21.1719 32.1875 22.1875 31.25 22.1875 30V25C22.1875 23.8281 21.1719 22.8125 20 22.8125C18.75 22.8125 17.8125 23.8281 17.8125 25V30C17.8125 31.25 18.75 32.1875 20 32.1875ZM37.5 18.75C37.5 16.7188 35.7812 15 33.75 15H31.25V11.4062C31.25 5.15625 26.25 0.078125 20 0C13.75 0 8.75 5.07812 8.75 11.25V15H6.25C4.14062 15 2.5 16.7188 2.5 18.75V36.25C2.5 38.3594 4.14062 40 6.25 40H33.75C35.7812 40 37.5 38.3594 37.5 36.25V18.75ZM12.5 15V11.25C12.5 7.1875 15.8594 3.75 20 3.75C24.0625 3.75 27.5 7.1875 27.5 11.25V15H12.5ZM33.75 18.75V36.25H6.25V18.75H33.75Z" fill="${color}" />
+</svg>`;
+
+export const syncIcon = (
+  color: string = '#ffffff'
+) => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5781 0.53125H16.5938C16.3477 0.53125 16.1719 0.742188 16.1719 0.988281L16.2422 4.43359C14.6953 2.11328 12.0234 0.53125 9 0.53125C4.71094 0.53125 1.16016 3.58984 0.421875 7.63281C0.351562 7.91406 0.5625 8.125 0.84375 8.125H1.82812C2.03906 8.125 2.21484 8.01953 2.25 7.80859C2.91797 4.71484 5.66016 2.35938 9 2.35938C11.7773 2.35938 14.168 4.04688 15.2578 6.4375L10.8281 6.33203C10.582 6.33203 10.4062 6.50781 10.4062 6.75391V7.70312C10.4062 7.94922 10.582 8.125 10.8281 8.125H17.5781C17.7891 8.125 18 7.94922 18 7.70312V0.953125C18 0.742188 17.7891 0.53125 17.5781 0.53125ZM17.1211 10.375H16.1367C15.9258 10.375 15.75 10.5156 15.7148 10.7266C15.0469 13.8203 12.3047 16.1406 9 16.1406C6.1875 16.1406 3.79688 14.4883 2.70703 12.0977L7.13672 12.2031C7.38281 12.2031 7.59375 12.0273 7.59375 11.7812V10.7969C7.59375 10.5859 7.38281 10.375 7.17188 10.375H0.421875C0.175781 10.375 0 10.5859 0 10.7969V17.5469C0 17.793 0.175781 17.9688 0.421875 17.9688H1.37109C1.61719 17.9688 1.79297 17.793 1.79297 17.5469L1.72266 14.1016C3.26953 16.4219 5.94141 17.9688 9 17.9688C13.2539 17.9688 16.8047 14.9453 17.543 10.9023C17.6133 10.6211 17.4023 10.375 17.1211 10.375Z" fill=${color}/>
+</svg>
+`;
+
+export const editThumbnailIcon = (
+  color: string = '#ffffff'
+) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4727 5.95752L18.293 3.77783C17.9766 3.42627 17.5547 3.25049 17.0977 3.25049C16.6758 3.25049 16.2539 3.42627 15.9023 3.77783L3.49219 16.188C2.82422 16.856 2.82422 17.9106 3.49219 18.5786L5.67188 20.7583C5.98828 21.1099 6.41016 21.2505 6.86719 21.2505C7.28906 21.2505 7.71094 21.1099 8.0625 20.7583L20.4727 8.34814C21.1406 7.68018 21.1406 6.62549 20.4727 5.95752ZM6.86719 19.563L4.6875 17.3833L12.5273 9.5083L14.7422 11.7231L6.86719 19.563ZM15.9375 10.5278L13.7227 8.31299L17.0977 4.93799L19.3125 7.15283L15.9375 10.5278ZM18.1875 13.3755L17.2383 15.2739L15.375 16.188L17.2383 17.1372L18.1875 19.0005L19.1016 17.1372L21 16.188L19.1016 15.2739L18.1875 13.3755ZM10.875 6.62549L11.4375 5.50049L12.5625 4.93799L11.4375 4.37549L10.875 3.25049L10.3125 4.37549L9.1875 4.93799L10.3125 5.50049L10.875 6.62549ZM5.8125 8.87549L6.72656 7.01221L8.625 6.06299L6.72656 5.14893L5.8125 3.25049L4.86328 5.14893L3 6.06299L4.86328 7.01221L5.8125 8.87549Z" fill=${color}/>
+</svg>
+`;
+
+export const livestreamIcon = (
+  color: string = '#292B32'
+) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.41406 8.80469L8.02734 8.41797C7.92188 8.3125 7.78125 8.24219 7.64062 8.24219C7.46484 8.24219 7.28906 8.3125 7.18359 8.45312C6.30469 9.47266 5.8125 10.8086 5.8125 12.25C5.8125 13.7266 6.30469 15.0625 7.18359 16.082C7.28906 16.2227 7.46484 16.293 7.64062 16.293C7.78125 16.293 7.92188 16.2227 8.02734 16.1172L8.41406 15.7305C8.51953 15.625 8.58984 15.5195 8.58984 15.3438C8.58984 15.2383 8.55469 15.0977 8.48438 15.0273C7.85156 14.2539 7.5 13.3047 7.5 12.2852C7.5 11.2305 7.85156 10.2812 8.48438 9.50781C8.55469 9.4375 8.58984 9.29688 8.58984 9.19141C8.58984 9.01562 8.51953 8.91016 8.41406 8.80469ZM5.63672 6.0625L5.25 5.67578C5.14453 5.57031 5.00391 5.53516 4.82812 5.53516C4.65234 5.53516 4.51172 5.60547 4.40625 5.71094C2.75391 7.50391 1.875 9.82422 1.875 12.25C1.875 14.7109 2.75391 16.9961 4.40625 18.8242C4.51172 18.9297 4.65234 19.0352 4.82812 19.0352C5.00391 19.0352 5.14453 18.9648 5.25 18.8594L5.63672 18.4727C5.84766 18.2617 5.84766 17.9453 5.63672 17.6992C4.33594 16.2578 3.5625 14.3594 3.5625 12.2852C3.5625 10.1758 4.33594 8.27734 5.63672 6.83594C5.84766 6.58984 5.84766 6.27344 5.63672 6.0625ZM19.5586 5.71094C19.4531 5.60547 19.3125 5.5 19.1367 5.5C18.9609 5.5 18.8203 5.57031 18.75 5.67578L18.3281 6.0625C18.1172 6.27344 18.1172 6.58984 18.3281 6.83594C19.6289 8.27734 20.4023 10.1758 20.4023 12.25C20.4023 14.3594 19.6289 16.2578 18.3281 17.6992C18.1172 17.9453 18.1172 18.2617 18.3281 18.4727L18.75 18.8594C18.8203 18.9648 18.9609 19 19.1367 19C19.3125 19 19.4531 18.9297 19.5586 18.8242C21.2109 16.9961 22.125 14.7109 22.125 12.25C22.125 9.82422 21.2109 7.50391 19.5586 5.71094ZM12 10.2812C10.9102 10.2812 10.0312 11.1953 10.0312 12.25C10.0312 13.3398 10.9102 14.2188 12 14.2188C13.0547 14.2188 13.9688 13.3398 13.9688 12.25C13.9688 11.1953 13.0547 10.2812 12 10.2812ZM15.9375 8.41797L15.5508 8.80469C15.4453 8.91016 15.375 9.01562 15.375 9.19141C15.375 9.29688 15.4102 9.4375 15.4805 9.50781C16.1133 10.2812 16.4648 11.2305 16.4648 12.25C16.4648 13.3047 16.1133 14.2539 15.4805 15.0273C15.4102 15.0977 15.375 15.2383 15.375 15.3438C15.375 15.5195 15.4453 15.625 15.5508 15.7305L15.9375 16.1172C16.043 16.2227 16.1836 16.293 16.3242 16.293C16.5 16.293 16.6758 16.2227 16.7812 16.082C17.6602 15.0625 18.1523 13.7266 18.1523 12.2852C18.1523 10.8086 17.6602 9.47266 16.7812 8.45312C16.6758 8.3125 16.5 8.24219 16.3242 8.24219C16.1836 8.24219 16.043 8.3125 15.9375 8.41797Z" fill=${color}/>
+</svg>
+`;
+
+export const exclamationIcon = (
+  color: string = '#292B32'
+): string => `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+<path d="M23.6875 14.5C23.6875 9.1875 19.3125 4.8125 14 4.8125C8.64844 4.8125 4.3125 9.1875 4.3125 14.5C4.3125 19.8516 8.64844 24.1875 14 24.1875C19.3125 24.1875 23.6875 19.8516 23.6875 14.5ZM14 16.4531C14.9766 16.4531 15.7969 17.2734 15.7969 18.25C15.7969 19.2656 14.9766 20.0469 14 20.0469C12.9844 20.0469 12.2031 19.2656 12.2031 18.25C12.2031 17.2734 12.9844 16.4531 14 16.4531ZM12.2812 10.0078C12.2422 9.73438 12.4766 9.5 12.75 9.5H15.2109C15.4844 9.5 15.7188 9.73438 15.6797 10.0078L15.4062 15.3203C15.3672 15.5938 15.1719 15.75 14.9375 15.75H13.0234C12.7891 15.75 12.5938 15.5938 12.5547 15.3203L12.2812 10.0078Z" fill="${color}"/>
+</svg>`;
+
+export const playIcon = (color: string = '#FFFFFF') =>
+  `<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"><path d="M927.870095 571.688039 167.320423 1014.160886C121.562471 1041.981153 61.44 1007.279555 61.44 954.218179L61.44 68.595037C63.693916 16.802233 124.631347-17.041827 171.276012 8.961322L928.382003 451.43039C974.037627 479.202079 974.037627 543.611136 927.870095 571.688039Z" fill=${color}/></svg>`;
+
+export const stopIcon = (color: string = '#FFFFFF') =>
+  `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" width="100" height="100" rx="15" fill="${color}"/>
+</svg>`;
+export const toastSuccess = (
+  color: string = '#fff'
+) => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0.53125C13.7812 0.53125 17.7188 4.46875 17.7188 9.25C17.7188 14.0664 13.7812 17.9688 9 17.9688C4.18359 17.9688 0.28125 14.0664 0.28125 9.25C0.28125 4.46875 4.18359 0.53125 9 0.53125ZM9 2.21875C5.09766 2.21875 1.96875 5.38281 1.96875 9.25C1.96875 13.1523 5.09766 16.2812 9 16.2812C12.8672 16.2812 16.0312 13.1523 16.0312 9.25C16.0312 5.38281 12.8672 2.21875 9 2.21875ZM13.9219 6.82422C14.0625 6.96484 14.0625 7.24609 13.9219 7.42188L7.83984 13.4336C7.66406 13.6094 7.41797 13.6094 7.24219 13.4336L4.04297 10.1992C3.90234 10.0586 3.90234 9.77734 4.04297 9.60156L4.85156 8.82812C5.02734 8.65234 5.27344 8.65234 5.44922 8.82812L7.55859 10.9375L12.5156 6.01562C12.6914 5.83984 12.9727 5.83984 13.1133 6.01562L13.9219 6.82422Z" fill="${color}" />
+</svg>`;
+export const star = (
+  color: string = '#fff'
+) => `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.54688 1.78125C5.73438 1.40625 6.26562 1.42188 6.4375 1.78125L7.46875 3.85938L9.75 4.1875C10.1562 4.25 10.3125 4.75 10.0156 5.04688L8.375 6.65625L8.76562 8.92188C8.82812 9.32812 8.39062 9.64062 8.03125 9.45312L6 8.375L3.95312 9.45312C3.59375 9.64062 3.15625 9.32812 3.21875 8.92188L3.60938 6.65625L1.96875 5.04688C1.67188 4.75 1.82812 4.25 2.23438 4.1875L4.53125 3.85938L5.54688 1.78125Z" fill="${color}"/>
+</svg>
+`;
+export const infoIcon = (
+  color: string = '#898E9E'
+): string => `<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2.25006C4.25 2.25006 1.25 5.28131 1.25 9.00006C1.25 12.7501 4.25 15.7501 8 15.7501C11.7188 15.7501 14.75 12.7501 14.75 9.00006C14.75 5.28131 11.6875 2.25006 8 2.25006ZM8 1.25006C12.25 1.25006 15.75 4.75006 15.75 9.00006C15.75 13.2813 12.25 16.7501 8 16.7501C3.71875 16.7501 0.25 13.2813 0.25 9.00006C0.25 4.75006 3.71875 1.25006 8 1.25006ZM6.875 12.0001H7.25V8.25006H6.875C6.65625 8.25006 6.5 8.09381 6.5 7.87506V7.62506C6.5 7.43756 6.65625 7.25006 6.875 7.25006H8.375C8.5625 7.25006 8.75 7.43756 8.75 7.62506V12.0001H9.125C9.3125 12.0001 9.5 12.1876 9.5 12.3751V12.6251C9.5 12.8438 9.3125 13.0001 9.125 13.0001H6.875C6.65625 13.0001 6.5 12.8438 6.5 12.6251V12.3751C6.5 12.1876 6.65625 12.0001 6.875 12.0001ZM8 4.50006C8.53125 4.50006 9 4.96881 9 5.50006C9 6.06256 8.53125 6.50006 8 6.50006C7.4375 6.50006 7 6.06256 7 5.50006C7 4.96881 7.4375 4.50006 8 4.50006Z" fill="${color}"/>
+</svg>`;

package/src/types/auth.interface.ts

@@ -0,0 +1,12 @@
+export type AuthContextInterface = {
+  error: string;
+  isConnecting: boolean;
+  logout: () => void;
+  client?: Amity.Client;
+  login: () => void;
+  isConnected: boolean;
+  sessionState: string;
+  apiRegion: string;
+  authToken?: string;
+  fcmToken?: string;
+};

package/src/types/config.interface.ts

@@ -0,0 +1,5 @@
+export interface IUIKitConfig {
+  globalTheme: Record<string, any>;
+  excludes: string[];
+  getConfig: (id: string) => any;
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './auth.interface';
+export * from './config.interface';
+export * from './mentionPosition.interface';
+export * from './user.interface';

package/src/types/mentionPosition.interface.ts

@@ -0,0 +1,7 @@
+export interface IMentionPosition {
+  index: number;
+  type: string;
+  userId: string;
+  length: number;
+  displayName?: string;
+}

package/src/types/user.interface.ts

@@ -0,0 +1,14 @@
+export type User = {
+  userId: string;
+  avatar: string;
+  displayName: string;
+};
+export type UserGroup = {
+  title: string;
+  data: Amity.User[];
+};
+export interface UserInterface {
+  userId: string;
+  displayName: string;
+  avatarFileId: string;
+}

package/src/util/apiUtil.ts

@@ -0,0 +1,3 @@
+export const getAvatarURL = (apiRegion: string, fileId: string) => {
+  return `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=medium`;
+};

package/src/util/colorUtil.ts

@@ -0,0 +1,26 @@
+import { lighten } from 'polished';
+import { MyMD3Theme } from '../providers/amity-ui-kit-provider';
+
+const hexColorRegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+export const validateConfigColor = (color: string): string => {
+  if (!color || !hexColorRegExp.test(color)) return '#00000000';
+  return color;
+};
+
+export const hexToRgba = (hex: string, alpha: number): string => {
+  const hexColor = hex.replace('#', '');
+  const r = parseInt(hexColor.substring(0, 2), 16);
+  const g = parseInt(hexColor.substring(2, 4), 16);
+  const b = parseInt(hexColor.substring(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export const getSkeletonBackgrounColor = (themeColor: MyMD3Theme) => {
+  const backgroundColor = lighten(0.2, themeColor.colors.baseShade3);
+  const foregroundColor = themeColor.colors.baseShade4;
+  return {
+    backgroundColor,
+    foregroundColor,
+  };
+};