cherry-styled-components 0.2.11 → 0.2.13

package/dist/chat-showcase.js

@@ -0,0 +1,234 @@
+"use client";
+"use client";
+import { Avatar } from "./avatar.js";
+import { Callout } from "./callout.js";
+import { ChatSource, ChatSources } from "./chat-sources.js";
+import { ChatTyping } from "./chat-typing.js";
+import { Prose } from "./prose.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+//#region src/lib/chat-showcase.tsx
+var StyledStack = styled.div.withConfig({
+	displayName: "chat-showcase__StyledStack",
+	componentId: "sc-37301b14-0"
+})([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
+var StyledRow = styled.div.withConfig({
+	displayName: "chat-showcase__StyledRow",
+	componentId: "sc-37301b14-1"
+})([`display:flex;align-items:center;gap:12px;flex-wrap:wrap;`]);
+var CATALOG = [
+	{
+		group: "Form",
+		components: [
+			"Button",
+			"IconButton",
+			"Input (Checkbox / Radio via type)",
+			"Select",
+			"Textarea",
+			"Toggle",
+			"Range",
+			"Password",
+			"Dropzone",
+			"AvatarDropzone"
+		]
+	},
+	{
+		group: "Layout",
+		components: [
+			"Container",
+			"Grid",
+			"Col",
+			"Flex",
+			"Box",
+			"MaxWidth",
+			"Space"
+		]
+	},
+	{
+		group: "Interactive",
+		components: [
+			"Accordion",
+			"Tabs",
+			"Modal",
+			"Toast",
+			"ThemeToggle",
+			"Icon"
+		]
+	},
+	{
+		group: "Content",
+		components: [
+			"Prose",
+			"Callout",
+			"Avatar"
+		]
+	},
+	{
+		group: "Chat",
+		components: [
+			"ChatProvider",
+			"ChatPanel",
+			"ChatMessageList",
+			"ChatMessage",
+			"ChatInput",
+			"ChatLauncher",
+			"ChatTyping",
+			"ChatSources"
+		]
+	}
+];
+function HelpReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [/*#__PURE__*/ jsx("p", { children: "Here is what I can render:" }), /*#__PURE__*/ jsx("ul", { children: showcaseCommands.map((command) => /*#__PURE__*/ jsxs("li", { children: [
+			/*#__PURE__*/ jsx("code", { children: command.name }),
+			" — ",
+			command.description
+		] }, command.name)) })]
+	});
+}
+function ListReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [/*#__PURE__*/ jsx("p", { children: "The Cherry component catalog:" }), CATALOG.map(({ group, components }) => /*#__PURE__*/ jsxs(React.Fragment, { children: [/*#__PURE__*/ jsx("h6", { children: group }), /*#__PURE__*/ jsx("ul", { children: components.map((component) => /*#__PURE__*/ jsx("li", { children: component }, component)) })] }, group))]
+	});
+}
+function CalloutReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "note",
+			children: /*#__PURE__*/ jsx("p", { children: "A note callout for supplementary details." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "info",
+			children: /*#__PURE__*/ jsx("p", { children: "An info callout for neutral information." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "warning",
+			children: /*#__PURE__*/ jsx("p", { children: "A warning callout for things to watch out for." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "danger",
+			children: /*#__PURE__*/ jsx("p", { children: "A danger callout for destructive outcomes." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "success",
+			children: /*#__PURE__*/ jsx("p", { children: "A success callout for confirmations." })
+		})
+	] });
+}
+function AvatarReply() {
+	return /*#__PURE__*/ jsxs(StyledRow, { children: [
+		/*#__PURE__*/ jsx(Avatar, {
+			$size: "small",
+			$name: "Ada Lovelace"
+		}),
+		/*#__PURE__*/ jsx(Avatar, {
+			$name: "Cherry",
+			$color: "secondary"
+		}),
+		/*#__PURE__*/ jsx(Avatar, {
+			$size: "big",
+			$color: "tertiary",
+			$alt: "Assistant"
+		})
+	] });
+}
+function ProseReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [
+			/*#__PURE__*/ jsx("h5", { children: "Rendered markdown" }),
+			/*#__PURE__*/ jsxs("p", { children: [
+				"Prose styles ",
+				/*#__PURE__*/ jsx("a", {
+					href: "#",
+					children: "links"
+				}),
+				", lists, tables and",
+				" ",
+				/*#__PURE__*/ jsx("code", { children: "inline code" }),
+				" with Cherry typography."
+			] }),
+			/*#__PURE__*/ jsxs("ul", { children: [/*#__PURE__*/ jsx("li", { children: "First item" }), /*#__PURE__*/ jsx("li", { children: "Second item" })] }),
+			/*#__PURE__*/ jsx("div", {
+				className: "table-wrapper",
+				children: /*#__PURE__*/ jsxs("table", { children: [/*#__PURE__*/ jsx("thead", { children: /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", { children: "Prop" }), /*#__PURE__*/ jsx("th", { children: "Default" })] }) }), /*#__PURE__*/ jsx("tbody", { children: /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("td", { children: "$compact" }), /*#__PURE__*/ jsx("td", { children: "false" })] }) })] })
+			})
+		]
+	});
+}
+function SourcesReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [/*#__PURE__*/ jsx(Prose, {
+		$compact: true,
+		children: /*#__PURE__*/ jsx("p", { children: "Source chips link an answer back to where it came from:" })
+	}), /*#__PURE__*/ jsxs(ChatSources, { children: [
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Getting Started"
+		}),
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Theming"
+		}),
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Chat Kit"
+		})
+	] })] });
+}
+function TypingReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [/*#__PURE__*/ jsx(Prose, {
+		$compact: true,
+		children: /*#__PURE__*/ jsx("p", { children: "The typing indicator shown while a reply is on its way:" })
+	}), /*#__PURE__*/ jsx(ChatTyping, {})] });
+}
+var showcaseCommands = [
+	{
+		name: "help",
+		description: "list these commands",
+		render: () => /*#__PURE__*/ jsx(HelpReply, {})
+	},
+	{
+		name: "list",
+		description: "the full Cherry component catalog",
+		render: () => /*#__PURE__*/ jsx(ListReply, {})
+	},
+	{
+		name: "callout",
+		description: "the five callout intents",
+		render: () => /*#__PURE__*/ jsx(CalloutReply, {})
+	},
+	{
+		name: "avatar",
+		description: "avatars with initials and icon fallbacks",
+		render: () => /*#__PURE__*/ jsx(AvatarReply, {})
+	},
+	{
+		name: "prose",
+		description: "markdown-style content with Cherry typography",
+		render: () => /*#__PURE__*/ jsx(ProseReply, {})
+	},
+	{
+		name: "sources",
+		description: "the source-chip row",
+		render: () => /*#__PURE__*/ jsx(SourcesReply, {})
+	},
+	{
+		name: "typing",
+		description: "the three-dot typing indicator",
+		render: () => /*#__PURE__*/ jsx(TypingReply, {})
+	}
+];
+/**
+* Matches a chat question against the showcase commands ("help", "/help" and
+* any casing all work) and returns the rendered demo, or null when the input
+* is not a command and should go to the transport.
+*/ function resolveShowcaseCommand(input) {
+	const name = input.trim().toLowerCase().replace(/^\//, "");
+	const command = showcaseCommands.find((entry) => entry.name === name);
+	return command ? command.render() : null;
+}
+//#endregion
+export { resolveShowcaseCommand, showcaseCommands };

package/dist/chat-sources.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ChatSourcesProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ChatSourceProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+}
+declare const ChatSources: React.ForwardRefExoticComponent<ChatSourcesProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChatSource: React.ForwardRefExoticComponent<ChatSourceProps & React.RefAttributes<HTMLAnchorElement>>;
+export { ChatSource, ChatSources };

package/dist/chat-sources.js

@@ -0,0 +1,41 @@
+"use client";
+"use client";
+import { alpha, interactiveStyles } from "./utils/mixins.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+//#region src/lib/chat-sources.tsx
+var StyledChatSources = styled.div.withConfig({
+	displayName: "chat-sources__StyledChatSources",
+	componentId: "sc-7fa69b52-0"
+})([`display:flex;gap:16px;flex-wrap:wrap;`]);
+var StyledChatSource = styled.a.withConfig({
+	displayName: "chat-sources__StyledChatSource",
+	componentId: "sc-7fa69b52-1"
+})([
+	`position:relative;text-decoration:none;font-size:`,
+	`;line-height:1;color:`,
+	`;display:flex;align-items:center;gap:6px;transition:all 0.3s ease;font-weight:600;white-space:nowrap;min-width:fit-content;background:`,
+	`;padding:6px 8px;border-radius:`,
+	`;`,
+	`;& svg{width:14px;height:14px;flex-shrink:0;}&:hover{color:`,
+	`;}`
+], ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primaryLight, 10), ({ theme }) => theme.spacing.radius.xs, interactiveStyles, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+function LocalChatSources({ children, ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledChatSources, {
+		...props,
+		ref,
+		children
+	});
+}
+function LocalChatSource({ children, ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledChatSource, {
+		...props,
+		ref,
+		children
+	});
+}
+var ChatSources = /*#__PURE__*/ forwardRef(LocalChatSources);
+var ChatSource = /*#__PURE__*/ forwardRef(LocalChatSource);
+//#endregion
+export { ChatSource, ChatSources };

package/dist/chat-typing.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ChatTypingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The label before the dots. */
+    children?: React.ReactNode;
+}
+declare const ChatTyping: React.ForwardRefExoticComponent<ChatTypingProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatTyping };

package/dist/chat-typing.js

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+import { chatTextStyles } from "./chat-message.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { keyframes } from "styled-components";
+//#region src/lib/chat-typing.tsx
+var dotFade = keyframes([`0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}`]);
+var StyledChatTyping = styled.div.withConfig({
+	displayName: "chat-typing__StyledChatTyping",
+	componentId: "sc-ef02cd3b-0"
+})([
+	`width:100%;font-weight:600;color:`,
+	`;`,
+	`;& .chat-typing-dot{animation:`,
+	` 1s ease infinite;&:nth-child(2){animation-delay:0.2s;}&:nth-child(3){animation-delay:0.4s;}}@media (prefers-reduced-motion:reduce){& .chat-typing-dot{animation:none;}}`
+], ({ theme }) => theme.colors.dark, ({ theme }) => chatTextStyles(theme), dotFade);
+function LocalChatTyping({ children = "Answering", ...props }, ref) {
+	return /*#__PURE__*/ jsxs(StyledChatTyping, {
+		role: "status",
+		...props,
+		ref,
+		children: [children, /*#__PURE__*/ jsxs("span", {
+			"aria-hidden": "true",
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				})
+			]
+		})]
+	});
+}
+var ChatTyping = /*#__PURE__*/ forwardRef(LocalChatTyping);
+//#endregion
+export { ChatTyping };

package/dist/dropzone.js

@@ -1,12 +1,11 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/dropzone.tsx
 /** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
 mirroring the native file-picker filter for dropped files. */ var matchesAccept = (file, accept) => {
@@ -155,11 +154,11 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
 var StyledDropzoneWrapper = styled.div.withConfig({
 	displayName: "dropzone__StyledDropzoneWrapper",
-	componentId: "sc-4b43e6a9-0"
+	componentId: "sc-a5a0875f-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-4b43e6a9-1"
+	componentId: "sc-a5a0875f-1"
 })([
 	``,
 	`;font-family:inherit;display:flex;flex-direction:`,
@@ -179,11 +178,12 @@ var StyledDropzone = styled.button.withConfig({
 ], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
 	`border-color:`,
 	`;background:`,
-	`;`
-], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+	`;:root.dark &{background:`,
+	`;}`
+], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 12 : 5), alpha(theme.colors.primary, 12)), ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primary, theme.isDark ? 10 : 4), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledDropIcon = styled.span.withConfig({
 	displayName: "dropzone__StyledDropIcon",
-	componentId: "sc-4b43e6a9-2"
+	componentId: "sc-a5a0875f-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -197,7 +197,7 @@ var StyledDropIcon = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
 var StyledDropPrompt = styled.span.withConfig({
 	displayName: "dropzone__StyledDropPrompt",
-	componentId: "sc-4b43e6a9-3"
+	componentId: "sc-a5a0875f-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
@@ -209,7 +209,7 @@ var StyledDropPrompt = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
 var StyledDropHint = styled.span.withConfig({
 	displayName: "dropzone__StyledDropHint",
-	componentId: "sc-4b43e6a9-4"
+	componentId: "sc-a5a0875f-4"
 })([
 	`font-family:inherit;font-size:`,
 	`;line-height:`,
@@ -219,11 +219,11 @@ var StyledDropHint = styled.span.withConfig({
 ], ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
 var StyledThumbs = styled.div.withConfig({
 	displayName: "dropzone__StyledThumbs",
-	componentId: "sc-4b43e6a9-5"
+	componentId: "sc-a5a0875f-5"
 })([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
 var StyledThumb = styled.div.withConfig({
 	displayName: "dropzone__StyledThumb",
-	componentId: "sc-4b43e6a9-6"
+	componentId: "sc-a5a0875f-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -233,7 +233,7 @@ var StyledThumb = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
 var StyledThumbFile = styled.span.withConfig({
 	displayName: "dropzone__StyledThumbFile",
-	componentId: "sc-4b43e6a9-7"
+	componentId: "sc-a5a0875f-7"
 })([
 	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
 	`;& svg{width:20px;height:20px;color:`,
@@ -241,12 +241,12 @@ var StyledThumbFile = styled.span.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-4b43e6a9-8"
+	componentId: "sc-a5a0875f-8"
 })([
 	``,
 	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
 	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}&:hover:not(:disabled){background:`,
 	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
-], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+], resetButton, ({ theme }) => alpha(theme.colors.dark, 60), ({ theme }) => theme.colors.error);
 //#endregion
 export { Dropzone, matchesAccept };

package/dist/icon-button.js

@@ -1,10 +1,9 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import { darken, lighten, rgba } from "polished";
 //#region src/lib/icon-button.tsx
 var iconButtonSizes = {
 	small: {
@@ -36,14 +35,14 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		` `,
 		` `,
 		``
-	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? lighten(.1, theme.colors.error) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
+	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? tint(theme.colors.error, 10) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
 		`border-color:`,
 		`;&:hover{border-color:`,
 		`;color:`,
 		`;}&:focus{box-shadow:0 0 0 4px `,
 		`;}&:active{box-shadow:0 0 0 2px `,
 		`;}`
-	], theme.colors.error, darken(.1, theme.colors.error), darken(.1, theme.colors.error), lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)) : css([
+	], theme.colors.error, shade(theme.colors.error, 10), shade(theme.colors.error, 10), tint(theme.colors.error, 10), tint(theme.colors.error, 10)) : css([
 		`&:hover{border-color:`,
 		`;color:`,
 		`;}&:focus{box-shadow:0 0 0 4px `,
@@ -54,8 +53,9 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		`border-color:`,
 		`;background:`,
 		`;color:`,
-		`;`
-	], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .18 : .1), theme.colors.primary), disabled && css([
+		`;:root.dark &{background:`,
+		`;}`
+	], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 18 : 10), theme.colors.primary, alpha(theme.colors.primary, 18)), disabled && css([
 		`cursor:not-allowed;background:`,
 		`;border-color:`,
 		`;color:`,
@@ -64,7 +64,7 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-e26e58e2-0"
+	componentId: "sc-3df98d32-0"
 })([``, ``], ({ theme, $size, $error, disabled, $active }) => iconButtonStyles(theme, $size, $error, disabled, $active));
 function LocalIconButton({ ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledIconButton, {

package/dist/index.d.ts

@@ -1,9 +1,20 @@
 export * from './styled-components';
 export * from './utils';
 export * from './accordion';
+export * from './avatar';
 export * from './avatar-dropzone';
 export * from './box';
 export * from './button';
+export * from './callout';
+export * from './chat-input';
+export * from './chat-launcher';
+export * from './chat-message';
+export * from './chat-message-list';
+export * from './chat-panel';
+export * from './chat-provider';
+export * from './chat-showcase';
+export * from './chat-sources';
+export * from './chat-typing';
 export * from './col';
 export * from './container';
 export * from './dropzone';
@@ -15,9 +26,11 @@ export * from './input';
 export * from './max-width';
 export * from './modal';
 export * from './password';
+export * from './prose';
 export * from './range';
 export * from './select';
 export * from './space';
+export * from './spinner';
 export * from './tabs';
 export * from './textarea';
 export * from './theme-toggle';

package/dist/index.js

@@ -1,7 +1,9 @@
 import { GlobalStyles } from "./utils/global.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
-import { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint } from "./utils/mixins.js";
 import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
+import { useLockBodyScroll } from "./utils/use-lock-body-scroll.js";
+import { useBelowBreakpoint, useMediaQuery } from "./utils/use-media-query.js";
 import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
 import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
@@ -9,15 +11,28 @@ import { StyledComponentsRegistry } from "./styled-components/registry.js";
 import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
 import { Icon } from "./icon.js";
 import { Accordion } from "./accordion.js";
+import { Avatar } from "./avatar.js";
 import { Dropzone, matchesAccept } from "./dropzone.js";
 import { AvatarDropzone } from "./avatar-dropzone.js";
 import { Container } from "./container.js";
 import { Box } from "./box.js";
 import { Button, buttonStyles } from "./button.js";
+import { Callout } from "./callout.js";
+import { ChatSource, ChatSources } from "./chat-sources.js";
+import { ChatMessage, chatTextStyles } from "./chat-message.js";
+import { ChatTyping } from "./chat-typing.js";
+import { Prose, proseStyles } from "./prose.js";
+import { resolveShowcaseCommand, showcaseCommands } from "./chat-showcase.js";
+import { ChatContext, ChatProvider, useChat } from "./chat-provider.js";
+import { Spinner } from "./spinner.js";
+import { ChatInput } from "./chat-input.js";
+import { ChatLauncher } from "./chat-launcher.js";
+import { ChatMessageList } from "./chat-message-list.js";
+import { IconButton, iconButtonStyles } from "./icon-button.js";
+import { ChatPanel } from "./chat-panel.js";
 import { Col } from "./col.js";
 import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
-import { IconButton, iconButtonStyles } from "./icon-button.js";
 import { Input, StyledInputWrapper, StyledLabel } from "./input.js";
 import { MaxWidth } from "./max-width.js";
 import { Modal } from "./modal.js";
@@ -30,4 +45,4 @@ import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
+export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-f294a26b-0"
+	componentId: "sc-5352dea9-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -20,7 +20,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $size }) => $size === "small" ? "14px" : "17px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-f294a26b-1"
+	componentId: "sc-5352dea9-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -29,7 +29,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-f294a26b-2"
+	componentId: "sc-5352dea9-2"
 })([
 	``,
 	`;`,
@@ -85,7 +85,7 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-f294a26b-3"
+	componentId: "sc-5352dea9-3"
 })([
 	`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`,
 	`;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;color:`,
@@ -93,7 +93,7 @@ var StyledIconWrapper = styled.span.withConfig({
 ], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-f294a26b-4"
+	componentId: "sc-5352dea9-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -178,7 +178,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-f294a26b-5"
+	componentId: "sc-5352dea9-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,