cherry-styled-components 0.2.11 → 0.2.13

package/dist/chat-input.js

@@ -0,0 +1,257 @@
+"use client";
+"use client";
+import { alpha, formElementHeightStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { Button } from "./button.js";
+import { ChatContext } from "./chat-provider.js";
+import { Spinner } from "./spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import styled, { createGlobalStyle, css, keyframes } from "styled-components";
+//#region src/lib/chat-input.tsx
+var GLOW_COLORS = [
+	"#cc5555",
+	"#d9a745",
+	"#3ab0cc",
+	"#cc7fc2",
+	"#4380cc",
+	"#4c1fa3"
+];
+var SPARKLE_COLORS = [
+	"#ff6b6b",
+	"#feca57",
+	"#48dbfb",
+	"#ff9ff3",
+	"#54a0ff",
+	"#5f27cd"
+];
+var SPARKLE_POSITIONS = [
+	{
+		left: 8,
+		top: 35
+	},
+	{
+		left: 17,
+		top: 55
+	},
+	{
+		left: 26,
+		top: 28
+	},
+	{
+		left: 35,
+		top: 68
+	},
+	{
+		left: 44,
+		top: 42
+	},
+	{
+		left: 53,
+		top: 75
+	},
+	{
+		left: 62,
+		top: 32
+	},
+	{
+		left: 71,
+		top: 58
+	},
+	{
+		left: 80,
+		top: 45
+	},
+	{
+		left: 89,
+		top: 65
+	}
+];
+var MAX_TEXTAREA_HEIGHT = 160;
+var GradientAngleProperty = createGlobalStyle([`@property --cherry-gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false;}`]);
+var rotateGradient = keyframes([`0%{--cherry-gradient-angle:0deg;}100%{--cherry-gradient-angle:360deg;}`]);
+var pulseGlow = keyframes([`0%,100%{opacity:0.5;filter:blur(16px);}50%{opacity:1;filter:blur(22px);}`]);
+var sparkleFloat = keyframes([`0%,100%{opacity:0;transform:translateY(0) scale(0);}50%{opacity:0.9;transform:translateY(-20px) scale(1);}`]);
+var conicStops = (colors) => [...colors, colors[0]].join(", ");
+var StyledChatForm = styled.form.withConfig({
+	displayName: "chat-input__StyledChatForm",
+	componentId: "sc-d9366e15-0"
+})([
+	`display:flex;gap:10px;justify-content:center;align-items:flex-end;background:`,
+	`;padding:20px;width:100%;flex-shrink:0;border-top:solid 1px `,
+	`;`
+], ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
+var StyledInputWrapper = styled.div.withConfig({
+	displayName: "chat-input__StyledInputWrapper",
+	componentId: "sc-d9366e15-1"
+})([`position:relative;flex:1;min-width:0;`, ``], ({ $glow, $glowColors = GLOW_COLORS, theme }) => $glow && css([
+	`isolation:isolate;&::before{content:"";position:absolute;inset:0;border-radius:`,
+	`;background:conic-gradient( from var(--cherry-gradient-angle),`,
+	` );opacity:0;transition:all 0.3s ease;animation:`,
+	` 3s linear infinite;z-index:0;}&::after{content:"";position:absolute;inset:0;border-radius:`,
+	`;background:conic-gradient( from var(--cherry-gradient-angle),`,
+	` );opacity:0;transition:all 0.3s ease;animation:`,
+	` 3s linear infinite;z-index:-1;pointer-events:none;}&:hover::before,&:focus-within::before{opacity:1;}&:focus-within::after{opacity:1;inset:-4px;border-radius:calc(`,
+	` + 4px);}&:active::after{inset:-2px;border-radius:calc(`,
+	` + 2px);}@media (prefers-reduced-motion:reduce){&::before,&::after{animation:none;}}`
+], theme.spacing.radius.xs, conicStops($glowColors), rotateGradient, theme.spacing.radius.xs, conicStops($glowColors.map((color) => alpha(color, 40))), rotateGradient, theme.spacing.radius.xs, theme.spacing.radius.xs));
+var StyledRadiantGlow = styled.div.withConfig({
+	displayName: "chat-input__StyledRadiantGlow",
+	componentId: "sc-d9366e15-2"
+})([
+	`position:absolute;inset:-10px;border-radius:20px;pointer-events:none;z-index:-2;opacity:0.6;transition:all 0.3s ease;&::before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient( from var(--cherry-gradient-angle),`,
+	` );animation:`,
+	` 3s linear infinite,`,
+	` 2s ease-in-out infinite;}`,
+	` @media (prefers-reduced-motion:reduce){&::before{animation:none;}}`
+], ({ $glowColors = GLOW_COLORS }) => conicStops($glowColors.map((color) => alpha(color, 40))), rotateGradient, pulseGlow, ({ $isActive }) => $isActive && css([`opacity:1;`]));
+var StyledSparkleContainer = styled.div.withConfig({
+	displayName: "chat-input__StyledSparkleContainer",
+	componentId: "sc-d9366e15-3"
+})([`position:absolute;inset:-30px;pointer-events:none;overflow:hidden;border-radius:30px;z-index:-3;opacity:0;transition:all 0.3s ease;`, ` @media (prefers-reduced-motion:reduce){display:none;}`], ({ $isActive }) => $isActive && css([`opacity:1;`]));
+var StyledSparkle = styled.div.withConfig({
+	displayName: "chat-input__StyledSparkle",
+	componentId: "sc-d9366e15-4"
+})([
+	`position:absolute;width:4px;height:4px;border-radius:50%;background:`,
+	`;box-shadow:0 0 6px `,
+	`;left:`,
+	`%;top:`,
+	`%;animation:`,
+	` 2s ease-in-out infinite;animation-delay:`,
+	`s;`
+], ({ $color }) => $color, ({ $color }) => $color, ({ $left }) => $left, ({ $top }) => $top, sparkleFloat, ({ $delay }) => $delay);
+var StyledTextarea = styled.textarea.withConfig({
+	displayName: "chat-input__StyledTextarea",
+	componentId: "sc-d9366e15-5"
+})([
+	`position:relative;z-index:1;display:block;box-sizing:border-box;width:100%;resize:none;font-family:inherit;line-height:1.5;color:`,
+	`;background:`,
+	`;outline:none;max-height:`,
+	`px;overflow-y:auto;border:solid 2px `,
+	`;border-radius:`,
+	`;padding:11px 15px;font-size:`,
+	`;transition:border-color 0.3s ease,box-shadow 0.3s ease,background 0.3s ease;&::placeholder{color:`,
+	`;}&:disabled{cursor:not-allowed;background:`,
+	`;border-color:`,
+	`;color:`,
+	`;}`,
+	``
+], ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, MAX_TEXTAREA_HEIGHT, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.fontSizes.input.lg, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.gray, ({ $glow, theme }) => $glow ? css([`background-clip:padding-box;&:hover:not([disabled]),&:focus:not([disabled]){border-color:transparent;}`]) : css([
+	`box-shadow:0 0 0 0px `,
+	`;&:hover:not([disabled]){border-color:`,
+	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
+	`;border-color:`,
+	`;}&:active:not([disabled]){box-shadow:0 0 0 2px `,
+	`;}`
+], theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight));
+var StyledSendButton = styled(Button).withConfig({
+	displayName: "chat-input__StyledSendButton",
+	componentId: "sc-d9366e15-6"
+})([`flex-shrink:0;`, `;min-height:0;position:relative;& svg,& .lucide{transition:none;position:absolute;inset:0;margin:auto;}`], formElementHeightStyles());
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function LocalChatInput({ value, onValueChange, onSend, $loading, $glow = false, $glowColors, $maxRows, placeholder = "Ask AI Assistant...", "aria-label": ariaLabel = "Ask a question", ...props }, ref) {
+	const chat = useContext(ChatContext);
+	const textareaRef = useRef(null);
+	const [isFocused, setIsFocused] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	const currentValue = value ?? chat.input;
+	const setValue = onValueChange ?? chat.setInput;
+	const loading = $loading ?? chat.loading;
+	const hasContent = currentValue.trim().length > 0;
+	const isActive = isFocused || isHovered;
+	const maxHeight = $maxRows ? $maxRows * 24 + 24 : MAX_TEXTAREA_HEIGHT;
+	useIsomorphicLayoutEffect(() => {
+		const textarea = textareaRef.current;
+		if (!textarea) return;
+		textarea.style.height = "auto";
+		const borders = textarea.offsetHeight - textarea.clientHeight;
+		textarea.style.height = `${Math.min(textarea.scrollHeight + borders, maxHeight)}px`;
+	}, [currentValue, maxHeight]);
+	const submit = () => {
+		if (loading || !hasContent) return;
+		if (onSend) onSend(currentValue);
+		else chat.send(currentValue);
+	};
+	const handleKeyDown = (event) => {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			submit();
+		}
+	};
+	const sparkles = SPARKLE_POSITIONS.map((position, index) => ({
+		color: ($glowColors ?? SPARKLE_COLORS)[index % ($glowColors ?? SPARKLE_COLORS).length],
+		left: position.left,
+		top: position.top,
+		delay: index * .12
+	}));
+	return /*#__PURE__*/ jsxs(StyledChatForm, {
+		className: "chat-composer",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		"data-chat-composer": true,
+		children: [
+			$glow && /*#__PURE__*/ jsx(GradientAngleProperty, {}),
+			/*#__PURE__*/ jsxs(StyledInputWrapper, {
+				$glow,
+				$glowColors,
+				$isActive: isActive,
+				onMouseEnter: () => setIsHovered(true),
+				onMouseLeave: () => setIsHovered(false),
+				children: [
+					$glow && /*#__PURE__*/ jsx(StyledRadiantGlow, {
+						$glowColors,
+						$isActive: isActive
+					}),
+					$glow && /*#__PURE__*/ jsx(StyledSparkleContainer, {
+						$isActive: isActive,
+						children: sparkles.map((sparkle, index) => /*#__PURE__*/ jsx(StyledSparkle, {
+							$color: sparkle.color,
+							$left: sparkle.left,
+							$top: sparkle.top,
+							$delay: sparkle.delay
+						}, index))
+					}),
+					/*#__PURE__*/ jsx(StyledTextarea, {
+						$glow,
+						rows: 1,
+						autoComplete: "off",
+						placeholder,
+						"aria-label": ariaLabel,
+						...props,
+						value: currentValue,
+						onChange: (event) => setValue(event.target.value),
+						onKeyDown: handleKeyDown,
+						onFocus: (event) => {
+							setIsFocused(true);
+							props.onFocus?.(event);
+						},
+						onBlur: (event) => {
+							setIsFocused(false);
+							props.onBlur?.(event);
+						},
+						ref: (node) => {
+							textareaRef.current = node;
+							chat.inputRef.current = node;
+							if (typeof ref === "function") ref(node);
+							else if (ref) ref.current = node;
+						}
+					})
+				]
+			}),
+			/*#__PURE__*/ jsx(StyledSendButton, {
+				type: "submit",
+				disabled: loading || !hasContent,
+				"aria-label": loading ? "Loading response" : "Submit question",
+				children: loading ? /*#__PURE__*/ jsx(Spinner, {}) : /*#__PURE__*/ jsx(Icon, { name: "ArrowUp" })
+			})
+		]
+	});
+}
+var ChatInput = /*#__PURE__*/ forwardRef(LocalChatInput);
+//#endregion
+export { ChatInput };

package/dist/chat-launcher.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ChatLauncherProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    /** The animated rainbow halo. Off by default. */
+    $glow?: boolean;
+    /** Overrides the glow palette. */
+    $glowColors?: string[];
+}
+declare const ChatLauncher: React.ForwardRefExoticComponent<ChatLauncherProps & React.RefAttributes<HTMLButtonElement>>;
+export { ChatLauncher };

package/dist/chat-launcher.js

@@ -0,0 +1,78 @@
+"use client";
+"use client";
+import { alpha, interactiveStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { ChatContext } from "./chat-provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import styled, { createGlobalStyle, css, keyframes } from "styled-components";
+//#region src/lib/chat-launcher.tsx
+var GLOW_COLORS = [
+	"#cc5555",
+	"#d9a745",
+	"#3ab0cc",
+	"#cc7fc2",
+	"#4380cc",
+	"#4c1fa3"
+];
+var GradientAngleProperty = createGlobalStyle([`@property --cherry-gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false;}`]);
+var rotateGradient = keyframes([`0%{--cherry-gradient-angle:0deg;}100%{--cherry-gradient-angle:360deg;}`]);
+var pulseGlow = keyframes([`0%,100%{opacity:0.5;filter:blur(16px);}50%{opacity:1;filter:blur(22px);}`]);
+var conicStops = (colors) => [...colors, colors[0]].join(", ");
+var StyledChatLauncher = styled.button.withConfig({
+	displayName: "chat-launcher__StyledChatLauncher",
+	componentId: "sc-2dd3d5f9-0"
+})([
+	``,
+	`;appearance:none;outline:none;cursor:pointer;background:`,
+	`;border:solid 1px `,
+	`;color:`,
+	`;border-radius:`,
+	`;padding:0;font-size:12px;font-family:inherit;font-weight:600;& .chat-launcher-inner{padding:6px 8px;display:flex;align-items:center;gap:6px;background:`,
+	`;border-radius:`,
+	`;}& svg{width:16px;height:16px;color:inherit;}`,
+	``
+], interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.xs, ({ $glow, $glowColors = GLOW_COLORS, $isActive, theme }) => $glow && css([
+	`position:relative;isolation:isolate;&::before,&::after,& .chat-launcher-ring{content:"";position:absolute;background:conic-gradient( from var(--cherry-gradient-angle),`,
+	` );opacity:0;transition:opacity 0.3s ease;animation:`,
+	` 3s linear infinite;z-index:-1;pointer-events:none;}&::before{inset:-1px;border-radius:calc(`,
+	` + 1px);}&::after{inset:-2px;border-radius:calc(`,
+	` + 2px);}& .chat-launcher-ring{inset:-4px;border-radius:calc(`,
+	` + 4px);}& .chat-launcher-glow{position:absolute;inset:-8px;border-radius:14px;pointer-events:none;z-index:-3;opacity:0.6;transition:all 0.3s ease;&::before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient( from var(--cherry-gradient-angle),`,
+	` );animation:`,
+	` 3s linear infinite,`,
+	` 2s ease-in-out infinite;}}&:hover,&:focus,&:active{border-color:`,
+	`;box-shadow:none;}&:hover::before,&:focus::before,&:active::before{opacity:1;}&:active::after{opacity:1;}&:focus .chat-launcher-ring{opacity:1;}&:hover .chat-launcher-glow,&:focus .chat-launcher-glow,&:active .chat-launcher-glow{opacity:1;}`,
+	` @media (prefers-reduced-motion:reduce){&::before,&::after,& .chat-launcher-ring,& .chat-launcher-glow::before{animation:none;}}`
+], conicStops($glowColors), rotateGradient, theme.spacing.radius.xs, theme.spacing.radius.xs, theme.spacing.radius.xs, conicStops($glowColors.map((color) => alpha(color, 40))), rotateGradient, pulseGlow, theme.colors.grayLight, $isActive && css([`&::before,& .chat-launcher-glow{opacity:1;}`])));
+function LocalChatLauncher({ children, $glow = false, $glowColors, onClick, "aria-label": ariaLabel, ...props }, ref) {
+	const { toggle, isOpen } = useContext(ChatContext);
+	return /*#__PURE__*/ jsxs(Fragment, { children: [$glow && /*#__PURE__*/ jsx(GradientAngleProperty, {}), /*#__PURE__*/ jsxs(StyledChatLauncher, {
+		type: "button",
+		$glow,
+		$glowColors,
+		$isActive: isOpen,
+		"aria-label": ariaLabel ?? "Ask AI Assistant",
+		"aria-expanded": isOpen,
+		onClick: onClick ?? toggle,
+		...props,
+		ref,
+		children: [
+			$glow && /*#__PURE__*/ jsx("span", {
+				className: "chat-launcher-glow",
+				"aria-hidden": "true"
+			}),
+			$glow && /*#__PURE__*/ jsx("span", {
+				className: "chat-launcher-ring",
+				"aria-hidden": "true"
+			}),
+			/*#__PURE__*/ jsx("span", {
+				className: "chat-launcher-inner",
+				children: children ?? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Icon, { name: "Sparkles" }), "Ask AI"] })
+			})
+		]
+	})] });
+}
+var ChatLauncher = /*#__PURE__*/ forwardRef(LocalChatLauncher);
+//#endregion
+export { ChatLauncher };

package/dist/chat-message-list.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface ChatMessageListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * While true, auto-scroll jumps instead of smooth-scrolling so a streaming
+     * reply does not fight the animation. Defaults to the provider's loading
+     * state when inside a ChatProvider.
+     */
+    $streaming?: boolean;
+}
+declare const ChatMessageList: React.ForwardRefExoticComponent<ChatMessageListProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatMessageList };

package/dist/chat-message-list.js

@@ -0,0 +1,88 @@
+"use client";
+"use client";
+import { thinScrollbar } from "./utils/mixins.js";
+import { ChatContext } from "./chat-provider.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useLayoutEffect, useRef } from "react";
+import styled from "styled-components";
+//#region src/lib/chat-message-list.tsx
+var StyledChatMessageList = styled.div.withConfig({
+	displayName: "chat-message-list__StyledChatMessageList",
+	componentId: "sc-46a93f6c-0"
+})([`display:flex;flex-direction:column;gap:20px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;`, `;`], thinScrollbar);
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function LocalChatMessageList({ children, $streaming, ...props }, ref) {
+	const { isOpen, loading } = useContext(ChatContext);
+	const streaming = $streaming ?? loading;
+	const scrollRef = useRef(null);
+	const scrollFrameRef = useRef(null);
+	const shouldAutoScrollRef = useRef(true);
+	const streamingRef = useRef(streaming);
+	useEffect(() => {
+		streamingRef.current = streaming;
+	}, [streaming]);
+	const jumpNextScrollRef = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		if (isOpen) {
+			shouldAutoScrollRef.current = true;
+			jumpNextScrollRef.current = true;
+			return;
+		}
+		if (scrollFrameRef.current !== null) {
+			cancelAnimationFrame(scrollFrameRef.current);
+			scrollFrameRef.current = null;
+		}
+	}, [isOpen]);
+	const prevLoadingRef = useRef(loading);
+	useIsomorphicLayoutEffect(() => {
+		if (loading && !prevLoadingRef.current) shouldAutoScrollRef.current = true;
+		prevLoadingRef.current = loading;
+	}, [loading]);
+	useEffect(() => {
+		if (!shouldAutoScrollRef.current) return;
+		if (scrollFrameRef.current !== null) return;
+		scrollFrameRef.current = requestAnimationFrame(() => {
+			scrollFrameRef.current = null;
+			const scrollContainer = scrollRef.current;
+			if (!scrollContainer || !shouldAutoScrollRef.current) return;
+			const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			const jump = jumpNextScrollRef.current;
+			jumpNextScrollRef.current = false;
+			scrollContainer.scrollTo({
+				top: scrollContainer.scrollHeight,
+				behavior: reduceMotion || streamingRef.current || jump ? "auto" : "smooth"
+			});
+		});
+	}, [
+		children,
+		isOpen,
+		streaming
+	]);
+	useEffect(() => {
+		return () => {
+			if (scrollFrameRef.current !== null) cancelAnimationFrame(scrollFrameRef.current);
+		};
+	}, []);
+	const handleScroll = (event) => {
+		const scrollContainer = scrollRef.current;
+		if (!scrollContainer) return;
+		const distanceFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+		shouldAutoScrollRef.current = distanceFromBottom <= scrollContainer.clientHeight * .15;
+		props.onScroll?.(event);
+	};
+	return /*#__PURE__*/ jsx(StyledChatMessageList, {
+		role: "log",
+		className: "chat-body",
+		...props,
+		onScroll: handleScroll,
+		ref: (node) => {
+			scrollRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		children
+	});
+}
+var ChatMessageList = /*#__PURE__*/ forwardRef(LocalChatMessageList);
+//#endregion
+export { ChatMessageList };

package/dist/chat-message.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export type ChatMessageRole = "user" | "assistant";
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    $role?: ChatMessageRole;
+    /** Rendered beside the message, typically an <Avatar>. */
+    $avatar?: React.ReactNode;
+}
+/**
+ * The chat type scale: one step tighter than body text so a transcript stays
+ * dense. Shared by the message bubbles and the typing indicator.
+ */
+export declare const chatTextStyles: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatMessage };

package/dist/chat-message.js

@@ -0,0 +1,56 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { darkFilledTextRule, filledTextColor } from "./utils/mixins.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/chat-message.tsx
+/**
+* The chat type scale: one step tighter than body text so a transcript stays
+* dense. Shared by the message bubbles and the typing indicator.
+*/ var chatTextStyles = (theme) => css([
+	`font-size:`,
+	`;line-height:`,
+	`;`,
+	`{font-size:`,
+	`;line-height:`,
+	`;}`
+], theme.fontSizes.text.xs, theme.lineHeights.text.xs, mq("lg"), theme.fontSizes.small.lg, theme.lineHeights.small.lg);
+var StyledChatMessage = styled.div.withConfig({
+	displayName: "chat-message__StyledChatMessage",
+	componentId: "sc-878d3851-0"
+})([
+	`display:flex;align-items:flex-end;gap:10px;width:100%;& .chat-message-avatar{flex-shrink:0;display:flex;align-items:center;height:calc( `,
+	` * `,
+	` );`,
+	`{height:calc( `,
+	` * `,
+	` );}}& .chat-message-content{min-width:0;`,
+	`;& p{`,
+	`;}& ul li,& ol li{`,
+	`;}}`,
+	``
+], ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, mq("lg"), ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme }) => chatTextStyles(theme), ({ theme }) => chatTextStyles(theme), ({ theme }) => chatTextStyles(theme), ({ $role, theme }) => $role === "user" ? css([
+	`flex-direction:row-reverse;& .chat-message-avatar{margin-bottom:9px;}& .chat-message-content{background:`,
+	`;color:`,
+	`;`,
+	`;padding:9px 14px;border-radius:16px 16px 4px 16px;margin-left:auto;width:fit-content;max-width:min(560px,88%);font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere;}`
+], theme.colors.primary, filledTextColor(theme), darkFilledTextRule(theme)) : css([`& .chat-message-content{color:`, `;width:100%;}& .chat-message-avatar{position:sticky;bottom:0;}`], theme.colors.dark));
+function LocalChatMessage({ children, $role = "assistant", $avatar, ...props }, ref) {
+	return /*#__PURE__*/ jsxs(StyledChatMessage, {
+		$role,
+		...props,
+		ref,
+		children: [$avatar && /*#__PURE__*/ jsx("span", {
+			className: "chat-message-avatar",
+			children: $avatar
+		}), /*#__PURE__*/ jsx("div", {
+			className: "chat-message-content",
+			children
+		})]
+	});
+}
+var ChatMessage = /*#__PURE__*/ forwardRef(LocalChatMessage);
+//#endregion
+export { ChatMessage, chatTextStyles };

package/dist/chat-panel.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { IconProps } from './icon';
+export type ChatPanelVariant = "drawer" | "inline" | "fullscreen";
+export interface ChatPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * drawer: fixed side panel, full-screen modal below the lg breakpoint.
+     * inline: a normal flow-sized container, always visible, no dialog
+     * semantics; the app controls its size and presence.
+     * fullscreen: fills the viewport, always modal.
+     */
+    $variant?: ChatPanelVariant;
+    $side?: "left" | "right";
+    /** Drawer width from the lg breakpoint up. */
+    $width?: number;
+    /** Header title. Pass null to render no header text. */
+    $title?: React.ReactNode;
+    $titleIcon?: IconProps | null;
+    /** Extra header controls (reset button, …), placed before the close button. */
+    $actions?: React.ReactNode;
+    $hideCloseButton?: boolean;
+    "aria-label"?: string;
+}
+declare const ChatPanel: React.ForwardRefExoticComponent<ChatPanelProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatPanel };