@product7/product7-js 0.5.6 → 0.5.8

package/src/widgets/{live-chat → liveChat}/views/ConversationsView.js

@@ -17,7 +17,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'live-chat-view live-chat-conversations-view';
+		this.element.className = 'liveChat-view liveChat-conversations-view';
 
 		this._updateContent();
 		this._attachEvents();
@@ -48,9 +48,9 @@
 		let conversationsHtml;
 		if (conversations.length === 0) {
 			conversationsHtml = `
-            <div class="live-chat-empty-state">
-                <div class="live-chat-empty-state-icon">
-                    <iconify-icon icon="ph:chat-circle-duotone" width="48" height="48"></iconify-icon>
+            <div class="liveChat-empty-state">
+                <div class="liveChat-empty-state-icon">
+                    <iconify-icon icon="ph:chat-circle" width="48" height="48"></iconify-icon>
                 </div>
                 <h3>No conversations yet</h3>
                 <p>Start a new conversation with our team</p>
@@ -58,26 +58,26 @@
         `;
 		} else {
 			conversationsHtml = `
-            <div class="live-chat-conversations-list">
+            <div class="liveChat-conversations-list">
                 ${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
             </div>
         `;
 		}
 
 		this.element.innerHTML = `
-        <div class="live-chat-conversations-header">
+        <div class="liveChat-conversations-header">
             <h2>Messages</h2>
-           <button class="sdk-close-btn live-chat-mobile-close-btn" aria-label="Close">
+           <button class="sdk-close-btn liveChat-mobile-close-btn" aria-label="Close">
   <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 </button>
         </div>
 
-        <div class="live-chat-conversations-body">
+        <div class="liveChat-conversations-body">
             ${conversationsHtml}
         </div>
 
-        <div class="live-chat-conversations-footer">
-            <button class="live-chat-new-message-btn">
+        <div class="liveChat-conversations-footer">
+            <button class="liveChat-new-message-btn">
                 <iconify-icon icon="ph:pencil-simple" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-secondary);"></iconify-icon>
                 <span style="flex: 1;">New conversation</span>
                 <iconify-icon icon="ph:caret-right" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-tertiary);"></iconify-icon>
@@ -98,19 +98,19 @@
 		);
 
 		return `
-			<div class="live-chat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
-				<div class="live-chat-conversation-avatars">
+			<div class="liveChat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
+				<div class="liveChat-conversation-avatars">
 					${avatarsHtml}
 				</div>
-				<div class="live-chat-conversation-content">
-					<div class="live-chat-conversation-header">
-						<span class="live-chat-conversation-title">${conversation.title || 'Chat with team'}</span>
-						<span class="live-chat-conversation-time">${timeAgo}</span>
+				<div class="liveChat-conversation-content">
+					<div class="liveChat-conversation-header">
+						<span class="liveChat-conversation-title">${conversation.title || 'Chat with team'}</span>
+						<span class="liveChat-conversation-time">${timeAgo}</span>
 					</div>
-					<div class="live-chat-conversation-preview">
-						${conversation.unread > 0 ? '<span class="live-chat-unread-dot"></span>' : ''}
-						${isClosed ? '<span class="live-chat-conversation-resolved-badge">Resolved</span>' : ''}
-						<span class="live-chat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
+					<div class="liveChat-conversation-preview">
+						${conversation.unread > 0 ? '<span class="liveChat-unread-dot"></span>' : ''}
+						${isClosed ? '<span class="liveChat-conversation-resolved-badge">Resolved</span>' : ''}
+						<span class="liveChat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
 					</div>
 				</div>
 			</div>
@@ -138,7 +138,7 @@
 			const color1 = this._getAvatarColor('S');
 			const color2 = this._getAvatarColor('T');
 			return `
-				<div class="live-chat-avatar-stack">
+				<div class="liveChat-avatar-stack">
 					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color1};">S</div>
 					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color2};">T</div>
 				</div>
@@ -157,7 +157,7 @@
 			})
 			.join('');
 
-		return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
+		return `<div class="liveChat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_formatTimeAgo(timestamp) {
@@ -192,7 +192,7 @@
 		}
 
 		this.element
-			.querySelectorAll('.live-chat-conversation-item')
+			.querySelectorAll('.liveChat-conversation-item')
 			.forEach((item) => {
 				item.addEventListener('click', () => {
 					const convId = item.dataset.conversationId;
@@ -206,7 +206,7 @@
 				});
 			});
 
-		const newMsgBtn = this.element.querySelector('.live-chat-new-message-btn');
+		const newMsgBtn = this.element.querySelector('.liveChat-new-message-btn');
 		if (newMsgBtn) {
 			newMsgBtn.addEventListener('click', () => {
 				this._startNewConversation();

package/src/widgets/{live-chat → liveChat}/views/HelpView.js

@@ -8,7 +8,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'live-chat-view live-chat-help-view';
+		this.element.className = 'liveChat-view liveChat-help-view';
 
 		this._updateContent();
 
@@ -25,27 +25,27 @@
 		const searchQuery = this.state.helpSearchQuery || '';
 
 		this.element.innerHTML = `
-			<div class="live-chat-help-header">
-				<div class="live-chat-help-header-top">
+			<div class="liveChat-help-header">
+				<div class="liveChat-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn live-chat-help-close-btn live-chat-mobile-close-btn" aria-label="Close">
+					<button class="sdk-close-btn liveChat-help-close-btn liveChat-mobile-close-btn" aria-label="Close">
 						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
-				<div class="live-chat-help-search-wrap">
-					<span class="live-chat-help-search-icon">
-						<iconify-icon icon="ph:magnifying-glass-duotone" width="16" height="16"></iconify-icon>
+				<div class="liveChat-help-search-wrap">
+					<span class="liveChat-help-search-icon">
+						<iconify-icon icon="ph:magnifying-glass" width="16" height="16"></iconify-icon>
 					</span>
 					<input
 						type="text"
-						class="live-chat-help-search-input"
+						class="liveChat-help-search-input"
 						placeholder="Search for help..."
 						value="${searchQuery}"
 					/>
 				</div>
 			</div>
-			<div class="live-chat-help-body">
-				<div class="live-chat-help-collections"></div>
+			<div class="liveChat-help-body">
+				<div class="liveChat-help-collections"></div>
 			</div>
 		`;
 
@@ -54,7 +54,7 @@
 	}
 
 	_updateCollectionsList() {
-		const container = this.element.querySelector('.live-chat-help-collections');
+		const container = this.element.querySelector('.liveChat-help-collections');
 		const collections = (this.state.helpArticles || []).filter(
 			(c) => (c.articleCount || 0) > 0
 		);
@@ -112,7 +112,7 @@
 			return `<img
 				src="${collection.author.picture}"
 				alt="${collection.author.name || ''}"
-				class="live-chat-help-collection-avatar"
+				class="liveChat-help-collection-avatar"
 				title="${collection.author.name || ''}"
 			/>`;
 		}
@@ -123,7 +123,7 @@
 			: 'A';
 
 		return `<span
-			class="live-chat-help-collection-avatar live-chat-help-collection-avatar--initials"
+			class="liveChat-help-collection-avatar liveChat-help-collection-avatar--initials"
 			style="background-color: ${bg}; color: ${text};"
 			title="${collection.author?.name || 'Author'}"
 		>${initials}</span>`;
@@ -133,11 +133,11 @@
 		if (!icon) return this._defaultCollectionIcon();
 
 		if (icon.trimStart().startsWith('<')) {
-			return `<span class="live-chat-help-collection-icon">${icon}</span>`;
+			return `<span class="liveChat-help-collection-icon">${icon}</span>`;
 		}
 
 		if (icon.startsWith('ph:')) {
-			return `<span class="live-chat-help-collection-icon">
+			return `<span class="liveChat-help-collection-icon">
 				<iconify-icon icon="${icon}"></iconify-icon>
 			</span>`;
 		}
@@ -146,8 +146,8 @@
 	}
 
 	_defaultCollectionIcon() {
-		return `<span class="live-chat-help-collection-icon">
-			<iconify-icon icon="ph:book-open-duotone"></iconify-icon>
+		return `<span class="liveChat-help-collection-icon">
+			<iconify-icon icon="ph:book-open"></iconify-icon>
 		</span>`;
 	}
 
@@ -155,14 +155,14 @@
 		const articleCount = collection.articleCount || 0;
 
 		return `
-			<div class="live-chat-help-collection" data-collection-id="${collection.id}">
+			<div class="liveChat-help-collection" data-collection-id="${collection.id}">
 				${this._resolveCollectionIcon(collection.icon)}
-				<div class="live-chat-help-collection-content">
-					<div class="live-chat-help-collection-title">${collection.title}</div>
-					${collection.description ? `<p class="live-chat-help-collection-desc">${collection.description}</p>` : ''}
-					<div class="live-chat-help-collection-meta">
+				<div class="liveChat-help-collection-content">
+					<div class="liveChat-help-collection-title">${collection.title}</div>
+					${collection.description ? `<p class="liveChat-help-collection-desc">${collection.description}</p>` : ''}
+					<div class="liveChat-help-collection-meta">
 						${this._renderAuthorAvatar(collection)}
-						<span class="live-chat-help-collection-count">
+						<span class="liveChat-help-collection-count">
 							${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
 						</span>
 					</div>
@@ -174,9 +174,9 @@
 	_renderEmptyState() {
 		if (this.state.helpSearchQuery) {
 			return `
-				<div class="live-chat-empty-state">
-					<div class="live-chat-empty-state-icon">
-						<iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
+				<div class="liveChat-empty-state">
+					<div class="liveChat-empty-state-icon">
+						<iconify-icon icon="ph:magnifying-glass" width="48" height="48"></iconify-icon>
 					</div>
 					<h3>No results found</h3>
 					<p>Try a different search term</p>
@@ -185,9 +185,9 @@
 		}
 
 		return `
-			<div class="live-chat-empty-state">
-				<div class="live-chat-empty-state-icon">
-					<iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
+			<div class="liveChat-empty-state">
+				<div class="liveChat-empty-state-icon">
+					<iconify-icon icon="ph:books" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>Help collections</h3>
 				<p>No collections available yet</p>
@@ -197,7 +197,7 @@
 
 	_attachEvents() {
 		const mobileCloseBtn = this.element.querySelector(
-			'.live-chat-help-close-btn'
+			'.liveChat-help-close-btn'
 		);
 		if (mobileCloseBtn) {
 			mobileCloseBtn.addEventListener('click', () => {
@@ -206,7 +206,7 @@
 		}
 
 		const searchInput = this.element.querySelector(
-			'.live-chat-help-search-input'
+			'.liveChat-help-search-input'
 		);
 		let searchTimeout;
 		searchInput.addEventListener('input', (e) => {
@@ -221,7 +221,7 @@
 
 	_attachCollectionEvents() {
 		this.element
-			.querySelectorAll('.live-chat-help-collection')
+			.querySelectorAll('.liveChat-help-collection')
 			.forEach((item) => {
 				item.addEventListener('click', () => {
 					const collection = this.state.helpArticles.find(

package/src/widgets/{live-chat → liveChat}/views/HomeView.js

@@ -8,7 +8,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'live-chat-view live-chat-home-view';
+		this.element.className = 'liveChat-view liveChat-home-view';
 
 		this._updateContent();
 
@@ -30,21 +30,21 @@
 		const recentChangelogHtml = this._renderRecentChangelog();
 
 		this.element.innerHTML = `
-			<div class="live-chat-home-scroll">
-				<div class="live-chat-home-header">
-					<div class="live-chat-home-header-top">
-						<div class="live-chat-home-logo">
+			<div class="liveChat-home-scroll">
+				<div class="liveChat-home-header">
+					<div class="liveChat-home-header-top">
+						<div class="liveChat-home-logo">
 							${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
 						</div>
-						<div class="live-chat-home-avatars">${avatarsHtml}</div>
+						<div class="liveChat-home-avatars">${avatarsHtml}</div>
 					</div>
-					<div class="live-chat-home-welcome">
-						<span class="live-chat-home-greeting">${this.state.greetingMessage}</span>
-						<span class="live-chat-home-question">${this.state.welcomeMessage}</span>
+					<div class="liveChat-home-welcome">
+						<span class="liveChat-home-greeting">${this.state.greetingMessage}</span>
+						<span class="liveChat-home-question">${this.state.welcomeMessage}</span>
 					</div>
 				</div>
 
-				<div class="live-chat-home-body">
+				<div class="liveChat-home-body">
 					${this._renderMessageButton()}
 					${this._renderFeaturedCard()}
 					${recentChangelogHtml}
@@ -73,7 +73,7 @@
 			})
 			.join('');
 
-		return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
+		return `<div class="liveChat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_renderAvailabilityStatus() {
@@ -81,17 +81,17 @@
 
 		if (isOnline) {
 			return `
-				<div class="live-chat-home-availability">
-					<span class="live-chat-availability-dot live-chat-availability-online"></span>
-					<span class="live-chat-availability-text">${this.state.onlineMessage}</span>
+				<div class="liveChat-home-availability">
+					<span class="liveChat-availability-dot liveChat-availability-online"></span>
+					<span class="liveChat-availability-text">${this.state.onlineMessage}</span>
 				</div>
 			`;
 		}
 
 		return `
-			<div class="live-chat-home-availability">
-				<span class="live-chat-availability-dot live-chat-availability-away"></span>
-				<span class="live-chat-availability-text">${this.state.responseTime}</span>
+			<div class="liveChat-home-availability">
+				<span class="liveChat-availability-dot liveChat-availability-away"></span>
+				<span class="liveChat-availability-text">${this.state.responseTime}</span>
 			</div>
 		`;
 	}
@@ -113,14 +113,14 @@
 
 		return `
 			${recentCardHtml}
-			<button class="live-chat-home-message-btn">
-				<div class="live-chat-home-continue-info">
-					<span class="live-chat-home-continue-label">Send us a message</span>
-					<span class="live-chat-home-message-subtext">${responseTime}</span>
+			<button class="liveChat-home-message-btn">
+				<div class="liveChat-home-continue-info">
+					<span class="liveChat-home-continue-label">Send us a message</span>
+					<span class="liveChat-home-message-subtext">${responseTime}</span>
 				</div>
 				${sendIcon}
 			</button>
-			<button class="live-chat-home-message-btn live-chat-feedback-btn" data-action="feedback">
+			<button class="liveChat-home-message-btn liveChat-feedback-btn" data-action="feedback">
 				<span>Leave us feedback</span>
 				${caretIcon}
 			</button>
@@ -131,8 +131,8 @@
 		const logoUrl = this.options.logoUrl;
 		const teamName = this.state.teamName || 'Support';
 		const logoHtml = logoUrl
-			? `<div class="live-chat-home-recent-avatar live-chat-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
-			: `<div class="live-chat-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
+			? `<div class="liveChat-home-recent-avatar liveChat-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
+			: `<div class="liveChat-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
 
 		const title = conversation.title || teamName;
 		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
@@ -143,18 +143,18 @@
 		const hasUnread = conversation.unread > 0;
 
 		return `
-			<div class="live-chat-home-recent-card" data-conversation-id="${conversation.id}">
-				<div class="live-chat-home-recent-card-label">Recent message</div>
-				<div class="live-chat-home-recent-card-row">
+			<div class="liveChat-home-recent-card" data-conversation-id="${conversation.id}">
+				<div class="liveChat-home-recent-card-label">Recent message</div>
+				<div class="liveChat-home-recent-card-row">
 					${logoHtml}
-					<div class="live-chat-home-recent-card-content">
-						<div class="live-chat-home-recent-card-header">
-							<span class="live-chat-home-recent-card-name">${title}</span>
-							<span class="live-chat-home-recent-card-time">${timeAgo}</span>
+					<div class="liveChat-home-recent-card-content">
+						<div class="liveChat-home-recent-card-header">
+							<span class="liveChat-home-recent-card-name">${title}</span>
+							<span class="liveChat-home-recent-card-time">${timeAgo}</span>
 						</div>
-						<div class="live-chat-home-recent-card-preview">
-							<span class="live-chat-home-recent-card-message">${preview}</span>
-							${hasUnread ? '<span class="live-chat-home-recent-unread-dot"></span>' : ''}
+						<div class="liveChat-home-recent-card-preview">
+							<span class="liveChat-home-recent-card-message">${preview}</span>
+							${hasUnread ? '<span class="liveChat-home-recent-unread-dot"></span>' : ''}
 						</div>
 					</div>
 				</div>
@@ -186,13 +186,13 @@
 			this.options.featuredContent;
 
 		return `
-			<div class="live-chat-home-featured">
-				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="live-chat-home-featured-image" onerror="this.style.display='none';" />` : ''}
-				<div class="live-chat-home-featured-divider"></div>
-				<div class="live-chat-home-featured-content">
+			<div class="liveChat-home-featured">
+				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="liveChat-home-featured-image" onerror="this.style.display='none';" />` : ''}
+				<div class="liveChat-home-featured-divider"></div>
+				<div class="liveChat-home-featured-content">
 					<h3>${title}</h3>
 					${description ? `<p>${description}</p>` : ''}
-					${action ? `<button class="sdk-btn sdk-btn-primary live-chat-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+					${action ? `<button class="sdk-btn sdk-btn-primary liveChat-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
 				</div>
 			</div>
 		`;
@@ -207,20 +207,20 @@
 		const changelogHtml = changelogItems
 			.map(
 				(item) => `
-			<div class="live-chat-home-changelog-card" data-changelog-id="${item.id}">
+			<div class="liveChat-home-changelog-card" data-changelog-id="${item.id}">
 				${
 					item.coverImage
 						? `
-					<div class="live-chat-home-changelog-cover">
+					<div class="liveChat-home-changelog-cover">
 						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
-						${item.coverText ? `<span class="live-chat-home-changelog-cover-text">${item.coverText}</span>` : ''}
+						${item.coverText ? `<span class="liveChat-home-changelog-cover-text">${item.coverText}</span>` : ''}
 					</div>
 				`
 						: ''
 				}
-				<div class="live-chat-home-changelog-card-content">
-					<h4 class="live-chat-home-changelog-card-title">${item.title}</h4>
-					<p class="live-chat-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
+				<div class="liveChat-home-changelog-card-content">
+					<h4 class="liveChat-home-changelog-card-title">${item.title}</h4>
+					<p class="liveChat-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
 				</div>
 			</div>
 		`
@@ -228,7 +228,7 @@
 			.join('');
 
 		return `
-			<div class="live-chat-home-changelog-section">
+			<div class="liveChat-home-changelog-section">
 				${changelogHtml}
 			</div>
 		`;
@@ -254,7 +254,7 @@
 	}
 
 	_attachEvents() {
-		const recentCard = this.element.querySelector('.live-chat-home-recent-card');
+		const recentCard = this.element.querySelector('.liveChat-home-recent-card');
 		if (recentCard) {
 			recentCard.addEventListener('click', () => {
 				const convId = recentCard.dataset.conversationId;
@@ -268,7 +268,7 @@
 		}
 
 		const msgBtn = this.element.querySelector(
-			'.live-chat-home-message-btn:not(.live-chat-feedback-btn)'
+			'.liveChat-home-message-btn:not(.liveChat-feedback-btn)'
 		);
 		if (msgBtn) {
 			msgBtn.addEventListener('click', () => {
@@ -277,7 +277,7 @@
 			});
 		}
 
-		const feedbackBtn = this.element.querySelector('.live-chat-feedback-btn');
+		const feedbackBtn = this.element.querySelector('.liveChat-feedback-btn');
 		if (feedbackBtn) {
 			feedbackBtn.addEventListener('click', () => {
 				if (this.options.onFeedbackClick) {
@@ -290,7 +290,7 @@
 		}
 
 		this.element
-			.querySelectorAll('.live-chat-home-changelog-card')
+			.querySelectorAll('.liveChat-home-changelog-card')
 			.forEach((card) => {
 				card.addEventListener('click', () => {
 					const item = this.state.homeChangelogItems.find(
@@ -305,7 +305,7 @@
 			});
 
 		const seeAllBtn = this.element.querySelector(
-			'.live-chat-home-changelog-all'
+			'.liveChat-home-changelog-all'
 		);
 		if (seeAllBtn) {
 			seeAllBtn.addEventListener('click', () => {
@@ -314,7 +314,7 @@
 		}
 
 		const featuredBtn = this.element.querySelector(
-			'.live-chat-home-featured-btn'
+			'.liveChat-home-featured-btn'
 		);
 		if (featuredBtn) {
 			featuredBtn.addEventListener('click', () => {

package/src/widgets/{live-chat → liveChat}/views/PreChatFormView.js

@@ -8,42 +8,39 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'live-chat-view live-chat-prechat-view';
+		this.element.className = 'liveChat-view liveChat-prechat-view';
 		this._updateContent();
 		return this.element;
 	}
 
 	_updateContent() {
 		this.element.innerHTML = `
-			<div class="live-chat-prechat-overlay">
-				<div class="live-chat-prechat-card">
-					<div class="live-chat-prechat-icon">
-						<iconify-icon icon="ph:chat-teardrop-dots-duotone" width="36" height="36"></iconify-icon>
-					</div>
-					<h4 class="live-chat-prechat-title">Before we continue</h4>
-					<p class="live-chat-prechat-subtitle">Enter your details so we can get back to you.</p>
-					<form class="live-chat-prechat-form" novalidate>
-						<div class="live-chat-prechat-field">
+			<div class="liveChat-prechat-overlay">
+				<div class="liveChat-prechat-card">
+					<h4 class="liveChat-prechat-title">Before we continue</h4>
+					<p class="liveChat-prechat-subtitle">Enter your details so we can get back to you.</p>
+					<form class="liveChat-prechat-form" novalidate>
+						<div class="liveChat-prechat-field">
 							<input
 								type="text"
 								name="name"
-								class="live-chat-prechat-input"
+								class="liveChat-prechat-input"
 								placeholder="Your name"
 								autocomplete="name"
 							/>
 						</div>
-						<div class="live-chat-prechat-field">
+						<div class="liveChat-prechat-field">
 							<input
 								type="email"
 								name="email"
-								class="live-chat-prechat-input"
+								class="liveChat-prechat-input"
 								placeholder="Your email address"
 								autocomplete="email"
 								required
 							/>
-							<span class="live-chat-prechat-error" style="display:none;"></span>
+							<span class="liveChat-prechat-error" style="display:none;"></span>
 						</div>
-						<button type="submit" class="live-chat-prechat-submit">
+						<button type="submit" class="liveChat-prechat-submit">
 							Start chat
 						</button>
 					</form>
@@ -55,7 +52,7 @@
 	}
 
 	_attachEvents() {
-		const form = this.element.querySelector('.live-chat-prechat-form');
+		const form = this.element.querySelector('.liveChat-prechat-form');
 		form.addEventListener('submit', async (e) => {
 			e.preventDefault();
 			await this._handleSubmit();
@@ -67,8 +64,8 @@
 
 		const emailInput = this.element.querySelector('input[name="email"]');
 		const nameInput = this.element.querySelector('input[name="name"]');
-		const errorEl = this.element.querySelector('.live-chat-prechat-error');
-		const submitBtn = this.element.querySelector('.live-chat-prechat-submit');
+		const errorEl = this.element.querySelector('.liveChat-prechat-error');
+		const submitBtn = this.element.querySelector('.liveChat-prechat-submit');
 
 		const email = emailInput.value.trim();
 		const name = nameInput.value.trim();

package/types/index.d.ts

@@ -375,5 +375,3 @@
 	const Product7Default: Product7Export;
 	export default Product7Default;
 }
-
-

package/src/styles/live-chat.js

@@ -1,17 +0,0 @@
-import { liveChatComponentsStyles } from './live-chat-components.js';
-import { liveChatCoreStyles } from './live-chat-core.js';
-import { liveChatFeaturesStyles } from './live-chat-features.js';
-import { liveChatViewsStyles } from './live-chat-views.js';
-
-export const liveChatStyles =
-	liveChatCoreStyles +
-	liveChatViewsStyles +
-	liveChatComponentsStyles +
-	liveChatFeaturesStyles;
-
-export {
-	liveChatComponentsStyles,
-	liveChatCoreStyles,
-	liveChatFeaturesStyles,
-	liveChatViewsStyles,
-};