@tree-ia/design-system 2.3.0 → 2.3.3

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowLeft, ArrowUp, ArrowUpDown, Battery, Bot, Building2, Camera, Check, CheckCheck, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy, File, FileText, GripVertical, Image, Inbox, Info, Lightbulb, Loader2, LogOut, Menu, MessageCircle, Mic, Monitor, Moon, MoreVertical, Paperclip, Phone, Play, PlaySquare, Search, Send, Settings, ShieldAlert, Signal, Smile, Sun, Text, Upload, User, Video, Wifi, X, XCircle } from "lucide-react";
+import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowLeft, ArrowUp, ArrowUpDown, Bot, Building2, Camera, Check, CheckCheck, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy, File, FileText, GripVertical, Image, Inbox, Info, Lightbulb, Loader2, LogOut, Menu, MessageCircle, Mic, Monitor, Moon, MoreVertical, Paperclip, Phone, Play, PlaySquare, Search, Send, Settings, ShieldAlert, Smile, Sun, Text, Upload, User, Video, Wifi, X, XCircle } from "lucide-react";
 import { Bar, Doughnut, Line } from "react-chartjs-2";
 import { ArcElement, BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip as Tooltip$1 } from "chart.js";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
@@ -6097,8 +6097,79 @@ const DEFAULT_WAVEFORM = [
 	29,
 	17
 ];
+const FALLBACK_STATUS_TIME = "14:32";
+const WHATSAPP_PALETTES = {
+	dark: {
+		frame: "#0a0d12",
+		statusbar: "#111b21",
+		statusText: "#e9edef",
+		screen: "#0b141a",
+		header: "#111b21",
+		headerText: "#e9edef",
+		mutedText: "#aebac1",
+		subtleText: "#8696a0",
+		action: "#00a884",
+		wallpaperStroke: "#e9edef",
+		wallpaperOpacity: .045,
+		dateBg: "#182229",
+		dateText: "#aebac1",
+		noticeBg: "#182229",
+		noticeText: "#d0b66b",
+		incoming: "#202c33",
+		incomingText: "#e9edef",
+		outgoing: "#005c4b",
+		outgoingText: "#e9edef",
+		outgoingMeta: "#c7d4cf",
+		read: "#53bdeb",
+		avatarBg: "#60b531",
+		composer: "#111b21",
+		composerInput: "#202c33",
+		composerText: "#8696a0",
+		micBg: "#00a884",
+		micIcon: "#07130f",
+		audioWave: "#9ad8ca",
+		audioButtonBg: "#00a884",
+		shadow: "rgba(0, 0, 0, 0.22)"
+	},
+	light: {
+		frame: "#0a0d12",
+		statusbar: "#f7f5f0",
+		statusText: "#111b21",
+		screen: "#efe7db",
+		header: "#f7f5f0",
+		headerText: "#111b21",
+		mutedText: "#667781",
+		subtleText: "#667781",
+		action: "#008069",
+		wallpaperStroke: "#7d6f59",
+		wallpaperOpacity: .075,
+		dateBg: "rgba(255, 255, 255, 0.88)",
+		dateText: "#6b6255",
+		noticeBg: "#fff7d6",
+		noticeText: "#7a6420",
+		incoming: "#ffffff",
+		incomingText: "#111b21",
+		outgoing: "#d9fdd3",
+		outgoingText: "#111b13",
+		outgoingMeta: "#66756b",
+		read: "#53bdeb",
+		avatarBg: "#60b531",
+		composer: "#f7f5f0",
+		composerInput: "#ffffff",
+		composerText: "#667781",
+		micBg: "#00a884",
+		micIcon: "#ffffff",
+		audioWave: "#177866",
+		audioButtonBg: "#00a884",
+		shadow: "rgba(15, 23, 42, 0.11)"
+	}
+};
 const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
-function WhatsAppMockup({ contactName, profilePhoto, profilePhotoAlt, profileAvatar, profileType = "business", contactSubtitle, messages = [], statusTime = "14:32", dateLabel = "Hoje", encryptionNotice = "Mensagens e ligações são protegidas com criptografia de ponta a ponta.", composerPlaceholder = "Mensagem", composer, showComposer = true, showHeaderActions = true, showWallpaper = true, screenWidth = 266, frameColor = "#0a0d12", statusbarColor = "#111b21", containerStyle, frameOnly, hideStatusBar, className, phoneClassName, screenClassName, messagesClassName, "aria-label": ariaLabel }) {
+function WhatsAppMockup({ contactName, profilePhoto, profilePhotoAlt, profileAvatar, profileType = "business", contactSubtitle, theme = "dark", headerBackgroundColor, profileAvatarBackgroundColor, messages = [], statusTime, dateLabel = "Hoje", encryptionNotice = "Mensagens e ligações são protegidas com criptografia de ponta a ponta.", composerPlaceholder = "Mensagem", composer, showComposer = true, showHeaderActions = true, showWallpaper = true, screenWidth = 266, frameColor, statusbarColor, containerStyle, frameOnly, hideStatusBar, className, phoneClassName, screenClassName, messagesClassName, "aria-label": ariaLabel }) {
+	const palette = WHATSAPP_PALETTES[theme];
+	const resolvedStatusTime = useResolvedStatusTime(statusTime);
+	const resolvedFrameColor = frameColor ?? palette.frame;
+	const resolvedStatusbarColor = statusbarColor ?? palette.statusbar;
 	const subtitle = contactSubtitle === void 0 ? profileType === "business" ? "WhatsApp Business" : void 0 : contactSubtitle || void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn$2("rounded-[2.65rem] shadow-[0_34px_74px_-34px_rgba(15,23,42,0.58)] dark:shadow-[0_34px_86px_-34px_rgba(10,13,18,0.82)]", className),
@@ -6106,19 +6177,24 @@ function WhatsAppMockup({ contactName, profilePhoto, profilePhotoAlt, profileAva
 		children: /* @__PURE__ */ jsx(IPhoneMockup, {
 			screenWidth,
 			screenType: "island",
-			frameColor,
-			statusbarColor,
+			frameColor: resolvedFrameColor,
+			statusbarColor: resolvedStatusbarColor,
 			hideNavBar: true,
 			frameOnly,
 			hideStatusBar,
 			containerStyle,
 			className: phoneClassName,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn$2("flex h-full w-full flex-col bg-[#efe7db] text-[#111b21] dark:bg-[#0b141a] dark:text-white/90", screenClassName),
+				className: cn$2("flex h-full w-full flex-col", screenClassName),
+				style: {
+					backgroundColor: palette.screen,
+					color: palette.headerText
+				},
 				children: [
 					/* @__PURE__ */ jsx(StatusBar, {
-						time: statusTime,
-						screenWidth
+						time: resolvedStatusTime,
+						screenWidth,
+						palette
 					}),
 					/* @__PURE__ */ jsx(WhatsAppHeader, {
 						contactName,
@@ -6126,75 +6202,152 @@ function WhatsAppMockup({ contactName, profilePhoto, profilePhotoAlt, profileAva
 						profilePhoto,
 						profilePhotoAlt,
 						profileAvatar,
-						showActions: showHeaderActions
+						showActions: showHeaderActions,
+						backgroundColor: headerBackgroundColor ?? palette.header,
+						avatarBackgroundColor: profileAvatarBackgroundColor ?? palette.avatarBg,
+						palette
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: cn$2("relative flex flex-1 flex-col gap-2 overflow-hidden px-2.5 py-2.5", messagesClassName),
 						children: [
-							showWallpaper ? /* @__PURE__ */ jsx(WhatsAppWallpaper, {}) : null,
+							showWallpaper ? /* @__PURE__ */ jsx(WhatsAppWallpaper, { palette }) : null,
 							dateLabel ? /* @__PURE__ */ jsx("div", {
-								className: "relative z-10 mx-auto rounded-full bg-white/82 px-2.5 py-0.5 text-[9px] font-semibold uppercase text-[#6b6255] shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:bg-[#1f2c33] dark:text-white/58",
+								className: "relative z-10 mx-auto rounded-full px-2.5 py-0.5 text-[9px] font-semibold uppercase shadow-[0_1px_2px_rgba(15,23,42,0.08)]",
+								style: {
+									backgroundColor: palette.dateBg,
+									color: palette.dateText
+								},
 								children: dateLabel
 							}) : null,
 							encryptionNotice ? /* @__PURE__ */ jsx("div", {
-								className: "relative z-10 mx-auto max-w-[92%] rounded-md bg-[#fff7d6] px-2.5 py-1.5 text-center text-[9px] leading-snug text-[#7a6420] shadow-[0_1px_2px_rgba(15,23,42,0.06)] dark:bg-[#182229] dark:text-[#d0b66b]",
+								className: "relative z-10 mx-auto max-w-[92%] rounded-md px-2.5 py-1.5 text-center text-[9px] leading-snug shadow-[0_1px_2px_rgba(15,23,42,0.06)]",
+								style: {
+									backgroundColor: palette.noticeBg,
+									color: palette.noticeText
+								},
 								children: encryptionNotice
 							}) : null,
-							messages.map((message, index) => /* @__PURE__ */ jsx(WhatsAppMessageBubble, { message }, message.id ?? `${message.time}-${index}`))
+							messages.map((message, index) => /* @__PURE__ */ jsx(WhatsAppMessageBubble, {
+								message,
+								palette
+							}, message.id ?? `${message.time}-${index}`))
 						]
 					}),
-					showComposer ? composer ?? /* @__PURE__ */ jsx(WhatsAppComposer, { composerPlaceholder }) : null
+					showComposer ? composer ?? /* @__PURE__ */ jsx(WhatsAppComposer, {
+						composerPlaceholder,
+						palette
+					}) : null
 				]
 			})
 		})
 	});
 }
-function StatusBar({ time, screenWidth }) {
+function useResolvedStatusTime(statusTime) {
+	const [currentTime, setCurrentTime] = useState(FALLBACK_STATUS_TIME);
+	useEffect(() => {
+		if (statusTime) return;
+		const updateCurrentTime = () => {
+			setCurrentTime(formatStatusTime(/* @__PURE__ */ new Date()));
+		};
+		updateCurrentTime();
+		let interval;
+		const now = /* @__PURE__ */ new Date();
+		const nextMinuteDelay = (60 - now.getSeconds()) * 1e3 - now.getMilliseconds();
+		const timeout = window.setTimeout(() => {
+			updateCurrentTime();
+			interval = window.setInterval(updateCurrentTime, 6e4);
+		}, nextMinuteDelay);
+		return () => {
+			window.clearTimeout(timeout);
+			if (interval !== void 0) window.clearInterval(interval);
+		};
+	}, [statusTime]);
+	return statusTime ?? currentTime;
+}
+function formatStatusTime(date) {
+	return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+}
+function StatusBar({ time, screenWidth, palette }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: "absolute left-0 right-0 top-0 z-50 flex items-center justify-between px-6 text-[11px] font-semibold tracking-tight text-[#111b21] dark:text-white/88",
+		className: "absolute left-0 right-0 top-0 z-50 flex items-center justify-between px-6 text-[11px] font-semibold tracking-tight",
 		style: { height: `${Math.floor(screenWidth * 59 / 390)}px` },
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
+			style: { color: palette.statusText },
 			children: time
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
+			style: { color: palette.statusText },
 			children: [
-				/* @__PURE__ */ jsx(Signal, {
-					className: "h-3 w-3",
-					strokeWidth: 2.4,
-					"aria-hidden": true
-				}),
+				/* @__PURE__ */ jsx(IosSignal, { color: palette.statusText }),
 				/* @__PURE__ */ jsx(Wifi, {
 					className: "h-3 w-3",
 					strokeWidth: 2.4,
 					"aria-hidden": true
 				}),
-				/* @__PURE__ */ jsx(Battery, {
-					className: "h-3.5 w-3.5",
-					strokeWidth: 2.4,
-					"aria-hidden": true
-				})
+				/* @__PURE__ */ jsx(IosBattery, { color: palette.statusText })
 			]
 		})]
 	});
 }
-function WhatsAppHeader({ contactName, subtitle, profilePhoto, profilePhotoAlt, profileAvatar, showActions }) {
+function IosSignal({ color }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex h-3 w-3 items-end gap-[1px]",
+		"aria-hidden": true,
+		children: [
+			4,
+			6,
+			8,
+			10
+		].map((height) => /* @__PURE__ */ jsx("span", {
+			className: "w-[2px] rounded-sm",
+			style: {
+				height,
+				backgroundColor: color
+			}
+		}, height))
+	});
+}
+function IosBattery({ color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-[1px]",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "relative h-[8px] w-[16px] rounded-[2px] border",
+			style: { borderColor: color },
+			children: /* @__PURE__ */ jsx("span", {
+				className: "absolute bottom-[1px] left-[1px] top-[1px] w-[10px] rounded-[1px]",
+				style: { backgroundColor: color }
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "h-[4px] w-[1.5px] rounded-r",
+			style: { backgroundColor: color }
+		})]
+	});
+}
+function WhatsAppHeader({ contactName, subtitle, profilePhoto, profilePhotoAlt, profileAvatar, showActions, backgroundColor, avatarBackgroundColor, palette }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "relative bg-[#f7f5f0] text-[#111b21] shadow-[0_1px_0_rgba(17,27,33,0.08)] dark:bg-[#111b21] dark:text-white/90",
+		className: "relative shadow-[0_1px_0_rgba(17,27,33,0.08)]",
+		style: {
+			backgroundColor,
+			color: palette.headerText
+		},
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 px-2.5 pb-2 pt-2",
 			children: [
 				/* @__PURE__ */ jsx(ChevronLeft, {
-					className: "h-5 w-5 shrink-0 text-[#008069] dark:text-[#00a884]",
+					className: "h-5 w-5 shrink-0",
 					strokeWidth: 2.4,
+					style: { color: palette.action },
 					"aria-hidden": true
 				}),
 				/* @__PURE__ */ jsx(ProfileAvatar, {
 					contactName,
 					profilePhoto,
 					profilePhotoAlt,
-					profileAvatar
+					profileAvatar,
+					backgroundColor: avatarBackgroundColor
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1",
@@ -6202,24 +6355,28 @@ function WhatsAppHeader({ contactName, subtitle, profilePhoto, profilePhotoAlt,
 						className: "truncate text-[13px] font-semibold leading-tight",
 						children: contactName
 					}), subtitle ? /* @__PURE__ */ jsx("p", {
-						className: "truncate text-[10px] leading-tight text-[#667781] dark:text-white/52",
+						className: "truncate text-[10px] leading-tight",
+						style: { color: palette.mutedText },
 						children: subtitle
 					}) : null]
 				}),
 				showActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(Video, {
-						className: "h-4 w-4 shrink-0 text-[#008069] dark:text-[#00a884]",
+						className: "h-4 w-4 shrink-0",
 						strokeWidth: 2.2,
+						style: { color: palette.action },
 						"aria-hidden": true
 					}),
 					/* @__PURE__ */ jsx(Phone, {
-						className: "h-3.5 w-3.5 shrink-0 text-[#008069] dark:text-[#00a884]",
+						className: "h-3.5 w-3.5 shrink-0",
 						strokeWidth: 2.2,
+						style: { color: palette.action },
 						"aria-hidden": true
 					}),
 					/* @__PURE__ */ jsx(MoreVertical, {
-						className: "h-4 w-4 shrink-0 text-[#008069] dark:text-[#00a884]",
+						className: "h-4 w-4 shrink-0",
 						strokeWidth: 2.2,
+						style: { color: palette.action },
 						"aria-hidden": true
 					})
 				] }) : null
@@ -6227,18 +6384,21 @@ function WhatsAppHeader({ contactName, subtitle, profilePhoto, profilePhotoAlt,
 		})
 	});
 }
-function ProfileAvatar({ contactName, profilePhoto, profilePhotoAlt, profileAvatar }) {
+function ProfileAvatar({ contactName, profilePhoto, profilePhotoAlt, profileAvatar, backgroundColor }) {
 	if (profileAvatar) return /* @__PURE__ */ jsx("div", {
-		className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#60b531]",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
+		style: { backgroundColor },
 		children: profileAvatar
 	});
 	if (profilePhoto) return /* @__PURE__ */ jsx("img", {
 		src: profilePhoto,
 		alt: profilePhotoAlt ?? contactName,
-		className: "h-8 w-8 shrink-0 rounded-full bg-[#60b531] object-cover"
+		className: "h-8 w-8 shrink-0 rounded-full object-cover",
+		style: { backgroundColor }
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#60b531] text-[11px] font-bold uppercase text-white",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[11px] font-bold uppercase text-white",
+		style: { backgroundColor },
 		children: getInitials(contactName)
 	});
 }
@@ -6246,20 +6406,30 @@ function getInitials(name) {
 	const parts = name.trim().split(/\s+/).filter(Boolean);
 	return `${parts[0]?.[0] ?? "W"}${(parts.length > 1 ? parts[parts.length - 1]?.[0] : void 0) ?? ""}`;
 }
-function WhatsAppMessageBubble({ message }) {
+function WhatsAppMessageBubble({ message, palette }) {
 	const direction = message.direction ?? "outgoing";
 	const type = message.type ?? "text";
 	const isOutgoing = direction === "outgoing";
+	const bubbleColor = isOutgoing ? palette.outgoing : palette.incoming;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$2("relative z-10 max-w-[86%] rounded-[14px] px-2.5 py-2 shadow-[0_1px_1.5px_rgba(15,23,42,0.11)]", isOutgoing ? "ml-auto rounded-tr-[4px] bg-[#d9fdd3] text-[#111b13] dark:bg-[#005c4b] dark:text-white/92" : "mr-auto rounded-tl-[4px] bg-white text-[#111b21] dark:bg-[#202c33] dark:text-white/92", message.className),
+		className: cn$2("relative z-10 max-w-[86%] rounded-[14px] px-2.5 py-2 shadow-[0_1px_1.5px_rgba(15,23,42,0.11)]", isOutgoing ? "ml-auto rounded-tr-[4px]" : "mr-auto rounded-tl-[4px]", message.className),
+		style: {
+			backgroundColor: bubbleColor,
+			color: isOutgoing ? palette.outgoingText : palette.incomingText,
+			boxShadow: `0 1px 1.5px ${palette.shadow}`,
+			...message.style
+		},
 		children: [
 			/* @__PURE__ */ jsx(BubbleTail, {
 				side: isOutgoing ? "out" : "in",
-				className: isOutgoing ? "fill-[#d9fdd3] dark:fill-[#005c4b]" : "fill-white dark:fill-[#202c33]"
+				color: message.style?.backgroundColor?.toString() ?? bubbleColor
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: message.contentClassName,
-				children: message.children ?? (type === "audio" ? /* @__PURE__ */ jsx(AudioMessage, { message }) : type === "custom" ? null : /* @__PURE__ */ jsx("p", {
+				children: message.children ?? (type === "audio" ? /* @__PURE__ */ jsx(AudioMessage, {
+					message,
+					palette
+				}) : type === "custom" ? null : /* @__PURE__ */ jsx("p", {
 					className: "max-w-[31ch] text-[10.5px] leading-snug",
 					children: message.text
 				}))
@@ -6267,18 +6437,23 @@ function WhatsAppMessageBubble({ message }) {
 			message.hideMeta ? null : /* @__PURE__ */ jsx(MessageMeta, {
 				time: message.time,
 				direction,
-				read: message.read
+				read: message.read,
+				palette
 			})
 		]
 	});
 }
-function AudioMessage({ message }) {
+function AudioMessage({ message, palette }) {
 	const waveform = message.waveform ?? DEFAULT_WAVEFORM;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#00a884] text-white",
+				className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+				style: {
+					backgroundColor: palette.audioButtonBg,
+					color: palette.micIcon
+				},
 				children: /* @__PURE__ */ jsx(Play, {
 					className: "ml-0.5 h-3.5 w-3.5 fill-current",
 					strokeWidth: 2.2,
@@ -6289,68 +6464,78 @@ function AudioMessage({ message }) {
 				className: "flex h-7 flex-1 items-center gap-[2px]",
 				"aria-hidden": true,
 				children: waveform.map((height, index) => /* @__PURE__ */ jsx("span", {
-					className: "origin-center rounded-full bg-[#177866]/75 dark:bg-[#bcebdc]/80",
+					className: "origin-center rounded-full",
 					style: {
+						backgroundColor: palette.audioWave,
 						height: Math.max(8, Math.round(height * .78)),
+						opacity: .76,
 						width: 2
 					}
 				}, `${height}-${index}`))
 			}),
 			message.duration ? /* @__PURE__ */ jsx("span", {
-				className: "text-[10px] font-medium text-[#53665c] dark:text-white/68",
+				className: "text-[10px] font-medium",
+				style: { color: palette.outgoingMeta },
 				children: message.duration
 			}) : null
 		]
 	}), message.text ? /* @__PURE__ */ jsx("p", {
-		className: "mt-1.5 max-w-[29ch] text-[9.5px] leading-snug text-[#53665c] dark:text-white/68",
+		className: "mt-1.5 max-w-[29ch] text-[9.5px] leading-snug",
+		style: { color: palette.outgoingMeta },
 		children: message.text
 	}) : null] });
 }
-function MessageMeta({ time, direction, read }) {
+function MessageMeta({ time, direction, read, palette }) {
+	const isOutgoing = direction === "outgoing";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-1 flex items-center justify-end gap-1 text-[9px] text-[#66756b] dark:text-white/58",
-		children: [/* @__PURE__ */ jsx("span", { children: time }), direction === "outgoing" ? read === void 0 ? /* @__PURE__ */ jsx(Check, {
+		className: "mt-1 flex items-center justify-end gap-1 text-[9px]",
+		style: { color: isOutgoing ? palette.outgoingMeta : palette.subtleText },
+		children: [/* @__PURE__ */ jsx("span", { children: time }), isOutgoing ? read === void 0 ? /* @__PURE__ */ jsx(Check, {
 			className: "h-3 w-3",
 			strokeWidth: 2.5,
 			"aria-hidden": true
 		}) : /* @__PURE__ */ jsx(CheckCheck, {
-			className: cn$2("h-3 w-3", read ? "text-[#53bdeb]" : void 0),
+			className: "h-3 w-3",
 			strokeWidth: 2.5,
+			style: { color: read ? palette.read : void 0 },
 			"aria-hidden": true
 		}) : null]
 	});
 }
-function BubbleTail({ side, className }) {
+function BubbleTail({ side, color }) {
 	const path = side === "out" ? "M0 0H14C10 1.8 7.4 4.7 6.4 8.3L5.3 12C4.2 7 2.4 2.9 0 0Z" : "M14 0H0C4 1.8 6.6 4.7 7.6 8.3L8.7 12C9.8 7 11.6 2.9 14 0Z";
 	return /* @__PURE__ */ jsx("svg", {
 		"aria-hidden": true,
-		className: cn$2("pointer-events-none absolute top-0 h-3.5 w-3.5", side === "out" ? "-right-[7px]" : "-left-[7px]", className),
+		className: cn$2("pointer-events-none absolute top-0 h-3.5 w-3.5", side === "out" ? "-right-[7px]" : "-left-[7px]"),
+		style: { fill: color },
 		viewBox: "0 0 14 12",
 		children: /* @__PURE__ */ jsx("path", { d: path })
 	});
 }
-function WhatsAppWallpaper() {
+function WhatsAppWallpaper({ palette }) {
 	const patternId = useId().replace(/:/g, "");
 	return /* @__PURE__ */ jsxs("svg", {
 		"aria-hidden": true,
-		className: "pointer-events-none absolute inset-0 h-full w-full text-[#7d6f59]/16 dark:text-white/7",
+		className: "pointer-events-none absolute inset-0 h-full w-full",
 		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", {
 			id: patternId,
-			width: "76",
-			height: "76",
+			width: "46",
+			height: "46",
 			patternUnits: "userSpaceOnUse",
 			children: [/* @__PURE__ */ jsx("path", {
-				d: "M12 18h18m-9-9v18M49 12c7 0 12 5 12 11 0 8-8 11-12 16-4-5-12-8-12-16 0-6 5-11 12-11Zm-22 42c6 0 10 4 10 9s-4 9-10 9-10-4-10-9 4-9 10-9Zm27 43 10-10m-10 0 10 10",
-				stroke: "currentColor",
-				strokeWidth: "1.2",
+				d: "M8 11h12m-6-6v12M31 7c4 0 7 3 7 7 0 5-5 7-7 10-2-3-7-5-7-10 0-4 3-7 7-7Zm-14 25c4 0 6 2 6 5s-2 5-6 5-6-2-6-5 2-5 6-5Zm19 10 6-6m-6 0 6 6",
+				stroke: palette.wallpaperStroke,
+				strokeWidth: "1",
 				fill: "none",
+				opacity: palette.wallpaperOpacity,
 				strokeLinecap: "round",
 				strokeLinejoin: "round"
 			}), /* @__PURE__ */ jsx("path", {
-				d: "M58 53c5 0 8 3 8 7s-3 7-8 7h-9v-7c0-4 4-7 9-7Z",
-				stroke: "currentColor",
-				strokeWidth: "1.2",
+				d: "M34 29c3 0 5 2 5 4s-2 4-5 4h-6v-4c0-2 3-4 6-4Z",
+				stroke: palette.wallpaperStroke,
+				strokeWidth: "1",
 				fill: "none",
+				opacity: palette.wallpaperOpacity,
 				strokeLinecap: "round",
 				strokeLinejoin: "round"
 			})]
@@ -6361,11 +6546,16 @@ function WhatsAppWallpaper() {
 		})]
 	});
 }
-function WhatsAppComposer({ composerPlaceholder }) {
+function WhatsAppComposer({ composerPlaceholder, palette }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1.5 bg-[#f7f5f0] px-2 pb-[22px] pt-2 dark:bg-[#111b21]",
+		className: "flex items-center gap-1.5 px-2 pb-[22px] pt-2",
+		style: { backgroundColor: palette.composer },
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-full bg-white px-2.5 py-1.5 text-[#667781] shadow-[0_1px_1px_rgba(15,23,42,0.06)] dark:bg-[#202c33] dark:text-white/52",
+			className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-full px-2.5 py-1.5 shadow-[0_1px_1px_rgba(15,23,42,0.06)]",
+			style: {
+				backgroundColor: palette.composerInput,
+				color: palette.composerText
+			},
 			children: [
 				/* @__PURE__ */ jsx(Smile, {
 					className: "h-3.5 w-3.5 shrink-0",
@@ -6388,7 +6578,11 @@ function WhatsAppComposer({ composerPlaceholder }) {
 				})
 			]
 		}), /* @__PURE__ */ jsx("span", {
-			className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#00a884] text-white",
+			className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+			style: {
+				backgroundColor: palette.micBg,
+				color: palette.micIcon
+			},
 			children: /* @__PURE__ */ jsx(Mic, {
 				className: "h-3.5 w-3.5",
 				strokeWidth: 2.2,