@zohoim/chat-components 1.0.11-beta.1 → 1.1.0-beta.1

package/README.md

@@ -10,6 +10,14 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.1.0
+
+- **Editor** new component added
+- **ReplyEditor** new component added
+- **ReplyComposer** new component added
+- **EmojiPopup** new component added
+- **AttachmentPreview** new component added
+
 # 1.0.11
 
 - changes for retaining hover actions

package/assets/Appearance/dark/mode/General_DarkMode.module.css

@@ -1,4 +1,8 @@
 [data-zohoim-mode='dark'] {
+	/* default colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* integration colors */
 	--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -14,6 +18,7 @@
 	--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
 	--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
+	--imlib_chat_components_twotone_icon_border: var(--dot_platinum);
 	
 	/* text / icon colors */
 	--imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
@@ -68,4 +73,21 @@
 	--imlib_chat_components_videoBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_articleBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* replyEditor */
+	--imlib_chat_components_reply_editor_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_bg: hsla(219, 21.74%, calc(18.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_placeholder_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* attachment Preview */
+	--imlib_chat_components_attachmentPreview_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_name_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_size_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_body_bg_color: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* emoji popup */
+	--imlib_chat_components_emojiPopup_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_border_color: hsla(220, 16.67%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emoji_popup_search_bg: hsla(212, 24.53%, calc(20.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(213, 25.88%, calc(33.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgb(95,100,120);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(189, 21.21%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(158, 26.83%, calc(24.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgb(95,100,120);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(19, 21.54%, calc(25.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgb(95,100,120);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(334, 20.00%, calc(24.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgb(95,100,120);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgb(95,100,120);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/General_LightMode.module.css

@@ -1,4 +1,8 @@
 [data-zohoim-mode='light'] {
+	/* default colors */
+	--imlib_chat_components_common_border: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_primary_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* integration colors */
 	--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -14,6 +18,7 @@
 	--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
 	--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
+	--imlib_chat_components_twotone_icon_border: var(--dot_black);
 	
 	/* text / icon colors */
 	--imlib_chat_components_actionIconWrapper_color: rgb(0,0,0);
@@ -68,4 +73,21 @@
 	--imlib_chat_components_videoBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_articleBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* replyEditor */
+	--imlib_chat_components_reply_editor_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_placeholder_color: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* attachment Preview */
+	--imlib_chat_components_attachmentPreview_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_name_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_size_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_body_bg_color: hsla(210, 11.11%, calc(96.47% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* emoji popup */
+	--imlib_chat_components_emojiPopup_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_border_color: hsla(231, 42.22%, calc(91.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_title_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emoji_popup_search_bg: hsla(0, 0.00%, calc(98.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(213, 65.52%, calc(82.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(200, 203, 220, 0.7);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/green/green_General_LightTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(135, 13.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(132, 42.86%, calc(82.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(197, 205, 199, 0.7);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(24, 27.78%, calc(92.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(28, 79.49%, calc(84.71% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(204, 201, 199, 0.7);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/red/red_General_LightTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 12.20%, calc(91.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(0, 70.21%, calc(90.78% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(204, 199, 201, 0.7);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(60, 21.74%, calc(90.98% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(46, 81.44%, calc(80.98% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(204, 203, 199, 0.7);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css

@@ -1,4 +1,8 @@
 [data-zohoim-mode='pureDark'] {
+	/* default colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* integration colors */
 	--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -14,6 +18,7 @@
 	--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
 	--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
+	--imlib_chat_components_twotone_icon_border: var(--dot_platinum);
 	
 	/* text / icon colors */
 	--imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
@@ -68,4 +73,21 @@
 	--imlib_chat_components_videoBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_articleBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* replyEditor */
+	--imlib_chat_components_reply_editor_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_reply_editor_placeholder_color: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* attachment Preview */
+	--imlib_chat_components_attachmentPreview_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_name_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_size_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentPreview_body_bg_color: hsla(0, 0.00%, calc(14.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* emoji popup */
+	--imlib_chat_components_emojiPopup_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_border_color: hsla(220, 16.67%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emojiPopup_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_emoji_popup_search_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(212, 38.89%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(133, 23.48%, calc(22.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(26, 40.00%, calc(21.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(2, 28.07%, calc(22.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css

@@ -11,6 +11,7 @@
 	--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* border colors */
+	--imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_actionIconWrapper_border_color: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -20,12 +21,16 @@
 	--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* icon colors */
+	--imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
+	
 	/* url / themes / primary colors */
 	--imlib_chat_components_locationBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_imPermaLink_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_see_more_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_textBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--imlib_chat_components_messageStatus_read_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_emoji_tab_line_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* failed colors */
 	--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/es/AttachmentHandler/AttachmentHandler.js

@@ -0,0 +1,84 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Component *** */
+
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentHandler from '@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentHandlerDefaultProps from "./props/defaultProps";
+import attachmentHandlerPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from "./css/AttachmentHandler.module.css";
+export default function AttachmentHandler(props) {
+  const {
+    customStyle,
+    iconName,
+    iconSize,
+    iconTitle,
+    renderCustomIcon,
+    getRef: propGetRef,
+    supportedFileTypes,
+    isMultiAttachment,
+    onAttach: propOnAttach,
+    customProps = dummyObject
+  } = props;
+  const {
+    inputProps = dummyObject
+  } = customProps;
+  const {
+    onAttach,
+    onAttachmentClick,
+    getRef
+  } = useAttachmentHandler({
+    onAttach: propOnAttach,
+    getRef: propGetRef
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
+    ref: getRef,
+    accept: supportedFileTypes,
+    hidden: true,
+    multiple: isMultiAttachment,
+    onChange: onAttach,
+    size: "1",
+    type: "file",
+    ...inputProps
+  }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
+  const customIcon = useMemo(() => {
+    /* Render Custom Icon */
+    const icon = renderHandler(renderCustomIcon)({
+      onClick: onAttachmentClick
+    });
+
+    if (icon) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, icon, inputEl);
+    }
+
+    return null;
+  }, [renderCustomIcon, onAttachmentClick, inputEl]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
+    className: newStyle.iconButton,
+    iconClass: newStyle.icon,
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onAttachmentClick,
+    title: iconTitle
+  }, inputEl));
+}
+AttachmentHandler.propTypes = attachmentHandlerPropTypes;
+AttachmentHandler.defaultProps = attachmentHandlerDefaultProps;
+AttachmentHandler.displayName = 'AttachmentHandler';