@zohoim/chat-components 1.1.1 → 1.1.2-beta.1

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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='light'][data-zohoim-theme='yellow'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,93 @@
+[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)));
+	--imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
+	--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
+	--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* two tone icon colors */
+	--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
+	--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);
+	--imlib_chat_components_messageBox_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_sender_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_content_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleHeader_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleHeader_time_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imMessageMeta_time_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imAutoMessageInfo_text_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_alt_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* text / icon failed colors */
+	--imlib_chat_components_messageBox_failed_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imageBubble_alt_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_summary_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_line_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleContent_content_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_title_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* bg colors */
+	--imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* bg failed colors */
+	--imlib_chat_components_messageBox_failed_bg_color: hsla(346, 36.31%, calc(30.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imageBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_articleBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* border failed colors */
+	--imlib_chat_components_attachmentBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imageBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_replyBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='pureDark'][data-zohoim-theme='blue'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='pureDark'][data-zohoim-theme='green'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='pureDark'][data-zohoim-theme='orange'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='pureDark'][data-zohoim-theme='red'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,40 @@
+[data-zohoim-mode='pureDark'][data-zohoim-theme='yellow'] {
+	/* bg colors */
+	--imlib_chat_components_actionIconWrapper_bg_color: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--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)));
+	--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--imlib_chat_components_locationBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_see_more_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--imlib_chat_components_textBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -53,10 +53,14 @@ export default function ActionIconWrapper(props) {
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
+    "aria-label": title,
     className: actionIconWrapperClass,
+    "data-a11y-focus": "true",
     "data-title": title,
     onClick: onClick,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseEnter,
+    role: "menuitem",
+    tabIndex: 0
   }, icon) : null;
 }
 ActionIconWrapper.propTypes = actionIconWrapperPropTypes;

package/es/AttachmentHandler/AttachmentHandler.js

@@ -71,6 +71,9 @@ export default function AttachmentHandler(props) {
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "column"
   }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
+    a11y: {
+      ariaLabel: iconTitle
+    },
     className: newStyle.iconButton,
     iconClass: newStyle.icon,
     iconName: iconName,

package/es/AttachmentHandler/css/AttachmentHandler.module.css

@@ -18,10 +18,10 @@
 
 
 .icon :global .path1:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
 }

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -22,21 +22,16 @@
   max-height: var(--zd_size48)  !important;
   background-color: transparent !important;
   border: 0 !important;
-  border-bottom: 1px solid
-    var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
+  border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
   padding: 0  !important;
 }
 
 .editableDiv:hover {
-  border-color: var(
-    --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
-  ) !important;
+  border-color: var(--zdt_textarea_hover_border) !important;
 }
 
 .editableDiv:focus {
-  border-color: var(
-    --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
-  ) !important;
+  border-color: var(--zdt_textarea_focus_border) !important;
 }
 
 .imgContent,
@@ -49,6 +44,7 @@
 .imgContent, .zoomContent {
   background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
   padding: var(--zd_size40);
+  background-color: var(--imlib_chat_components_attachmentPreview_body_bg_color);
 }
 
 [dir=ltr] .imgContent, [dir=ltr] .zoomContent {

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -2,10 +2,10 @@
 .imgPreviewerheader {
   position: relative;
   background-color: var(
-    --imlib_chat_components_attachmentPreviewHeader_bg_color
+    --imlib_chat_components_attachmentPreview_bg_color
   );
   padding: var(--zd_size15) var(--zd_size40);
-  border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
+  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
 }
 [dir=ltr] .imgPreviewerheader {
   border-top-left-radius: var(--zd_size5);
@@ -17,7 +17,7 @@
 }
 
 .imgName {
-  color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
+  color: var(--imlib_chat_components_attachmentPreview_name_color);
   font-size: var(--zd_font_size17);
   font-family: var(--zd_semibold);
   composes: dotted from '../../css/common.module.css';
@@ -27,7 +27,7 @@
 
 .imgSize {
   font-size: var(--zd_font_size13);
-  color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
+  color: var(--imlib_chat_components_attachmentPreview_size_color);
   composes: dotted from '../../css/common.module.css';
   max-width: var(--zd_size150);
 }

package/es/Emoji/Emoji.js

@@ -58,8 +58,12 @@ export default function Emoji(props) {
   });
   return /*#__PURE__*/React.createElement("span", {
     ref: eleRef,
+    "aria-label": title,
     className: emojiClass,
-    onClick: onSelect
+    "data-a11y-focus": "true",
+    onClick: onSelect,
+    role: "button",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     className: newStyle.emojiContent,
     "data-smiley": emojiName,

package/es/EmojiPopup/EmojiPopup.js

@@ -83,7 +83,10 @@ function EmojiPopupComp(props) {
     isActive: isPopupOpen,
     onClick: onTogglePopup,
     title: tooltip,
-    ...iconProps
+    ...iconProps,
+    a11y: {
+      ariaLabel: tooltip
+    }
   }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
     customClass: popupClass,

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -41,12 +41,12 @@
 }
 
 .icon :global .path1:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
 }
 
 .icon :global .path2{

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -1,10 +1,9 @@
 .footerTab {
   position: relative;
-  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
+  border-top: 1px solid var(--imlib_chat_components_common_border);
 }
 
 .tabIcon {
-  /* padding: var(--zd_size10) var(--zd_size16); */
   position: relative;
   height: var(--zd_size35) ;
   display: flex;
@@ -21,7 +20,7 @@
   height: var(--zd_size2) ;
   transition: 0.3s ease;
   width: 100% ;
-  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
+  background-color: var(--imlib_chat_components_emoji_tab_line_color);
 }
 
 [dir=ltr] .tabLine {
@@ -36,5 +35,5 @@
   width: auto ;
   height: auto ;
   margin: 0 ;
-  padding: 8% ;
+  padding: 0 8% ;
 }

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -1,12 +1,11 @@
 .container {
   padding: var(--zd_size10) ;
-  border-bottom: 1px solid
-    var(--imlib_chat_components_emojisHeader_border_color);
+  border-bottom: 1px solid var(--imlib_chat_components_common_border);
 }
 
 .emojisSearch {
   position: relative;
-  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
+  background-color: var(--imlib_chat_components_emoji_popup_search_bg);
 }
 
 .searchInput {
@@ -25,6 +24,7 @@
 
 .searchIcon {
   position: absolute;
+  color: var(--imlib_chat_components_primary_text);
 }
 
 [dir=ltr] .searchIcon {

package/es/MessageActions/MessageActions.js

@@ -29,7 +29,8 @@ export default function MessageActions(props) {
     setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
-    customProps
+    customProps,
+    moreTitle
   } = props;
   const {
     messageActionProps = dummyObject,
@@ -106,6 +107,7 @@ export default function MessageActions(props) {
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
   const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
     renderIcon: renderMoreIcon,
+    title: moreTitle,
     ...componentProps,
     ...actionIconWrapperProps
   }), [actionIconWrapperProps, renderMoreIcon]);

package/es/MessageActions/props/propTypes.js

@@ -21,6 +21,7 @@ const messageActionsPropTypes = {
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
   renderSecondaryActions: PropTypes.func,
-  setRetainMessageActions: PropTypes.func
+  setRetainMessageActions: PropTypes.func,
+  moreTitle: PropTypes.string
 };
 export default messageActionsPropTypes;