cherry-styled-components 0.2.11 → 0.2.13

package/README.md

@@ -36,7 +36,55 @@ export default function App() {
 
 The built-in `theme` and `themeDark` objects are a starting point; both are plain objects you can extend or replace to white-label the system. Styled props use a `$` prefix (`$variant`, `$size`, `$fullWidth`) so they never leak into the DOM.
 
-The library ships form components (Button, Input, Select, Textarea, Toggle, Range, Password, Checkbox, Radio, Dropzone, AvatarDropzone), layout primitives (Container, Grid, Col, Flex, Box, MaxWidth, Space), and interactive components (Accordion, Modal, Toast, ThemeToggle, Icon, IconButton). See the [component docs](https://cherry.al/) for the full API.
+The library ships form components (Button, Input, Select, Textarea, Toggle, Range, Password, Checkbox, Radio, Dropzone, AvatarDropzone), layout primitives (Container, Grid, Col, Flex, Box, MaxWidth, Space), interactive components (Accordion, Modal, Toast, ThemeToggle, Icon, IconButton), content components (Prose, Callout, Avatar), and a chat kit (see below). See the [component docs](https://cherry.al/) for the full API.
+
+## Chat kit
+
+Cherry ships everything needed to build an AI-assistant chat UI, split into a headless provider and presentational components. The provider owns panel state, focus management, the transcript, and streaming bookkeeping; **the app owns the transport** — Cherry never fetches, parses SSE, or assumes an endpoint.
+
+```tsx
+import {
+  ChatInput,
+  ChatLauncher,
+  ChatMessage,
+  ChatMessageList,
+  ChatPanel,
+  ChatProvider,
+  Prose,
+  useChat,
+} from "cherry-styled-components";
+
+<ChatProvider
+  onSend={async (question, { signal, history, setAssistant }) => {
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ question, history }),
+      signal,
+    });
+    for await (const text of readMyStream(res)) {
+      setAssistant(text); // patches the same assistant bubble on each call
+    }
+    setAssistant(<Prose $compact>{renderMarkdown(text)}</Prose>, {
+      text, // plain-text mirror used for the next request's history
+      sources: [{ id: "1", label: "Docs", href: "/docs" }],
+    });
+  }}
+>
+  <ChatLauncher $glow />
+  <ChatPanel>
+    <MyTranscript /> {/* map useChat().messages into ChatMessageList */}
+    <ChatInput $glow />
+  </ChatPanel>
+</ChatProvider>;
+```
+
+- `ChatProvider` — headless state: `useChat()` returns `{ isOpen, open, close, toggle, messages, input, setInput, loading, error, send, ask, reset, inputRef }`. Props: `onSend`, `greeting`, `historyLimit`, `shortcut` (Cmd/Ctrl+I by default, `null` to disable), and `$showcase`.
+- `$showcase` — demo mode. Chat input matching a showcase command is answered locally with a live rendering of that element; everything else still goes to `onSend` (which becomes optional). `help` lists the commands: `list` (the component catalog), `callout`, `avatar`, `prose`, `sources`, and `typing`. Off by default — without `$showcase` every message goes to the transport.
+- `ChatPanel` — the shell. `$variant="drawer"` (fixed side panel, full-screen modal below `lg`), `"inline"` (flows with the page), or `"fullscreen"`. Handles dialog semantics, focus trapping, `inert` siblings, and body scroll locking while modal.
+- `ChatMessageList` — scroll container with stick-to-bottom behavior that releases when the reader scrolls up.
+- `ChatMessage` — `$role="user"` (filled bubble) or `"assistant"` (full-width, pair with `Prose` for markdown), plus an `$avatar` slot.
+- `ChatInput` — auto-growing composer; Enter submits, Shift+Enter breaks the line. `$glow` opts into the animated rainbow border and sparkles.
+- `ChatLauncher`, `ChatTyping`, `ChatSources`/`ChatSource` — the "Ask AI" pill, the typing indicator, and the source-chip row.
 
 ## Theming
 
@@ -150,33 +198,46 @@ The route is handled in `src/main.tsx` and the previews live in `src/preview.tsx
 
 ### Available previews
 
-| Name               | Renders                                           |
-| ------------------ | ------------------------------------------------- |
-| `accordion`        | Card accordion, open by default                   |
-| `accordion-inline` | Inline accordion variant, open by default         |
-| `avatar-dropzone`  | Empty avatar dropzone, default size               |
-| `box`              | Box surface with a placeholder block              |
-| `button`           | Primary filled button                             |
-| `button-secondary` | Secondary filled button                           |
-| `button-tertiary`  | Tertiary filled button                            |
-| `button-outline`   | Primary outline button                            |
-| `checkbox`         | Checked checkbox                                  |
-| `dropzone`         | Block dropzone with prompt, browse, and hint text |
-| `dropzone-inline`  | Inline dropzone variant                           |
-| `flex`             | Flex row with three placeholder blocks            |
-| `grid`             | Three-column grid with a full-width row           |
-| `icon`             | Cherry icon at 48px                               |
-| `icon-button`      | Icon button with a settings icon                  |
-| `input`            | Text input with label and placeholder             |
-| `modal`            | Modal, already open on a backdrop                 |
-| `password`         | Password field with label and placeholder         |
-| `radio`            | Checked radio button                              |
-| `range`            | Range slider                                      |
-| `select`           | Select with label                                 |
-| `textarea`         | Textarea with label and value                     |
-| `theme-toggle`     | Pill-shaped sun/moon theme switch                 |
-| `toast`            | Success, error, and info toasts, fired on mount   |
-| `toggle`           | Checked toggle                                    |
+| Name               | Renders                                                |
+| ------------------ | ------------------------------------------------------ |
+| `accordion`        | Card accordion, open by default                        |
+| `accordion-inline` | Inline accordion variant, open by default              |
+| `avatar`           | Avatar with initials and icon fallbacks, three sizes   |
+| `avatar-dropzone`  | Empty avatar dropzone, default size                    |
+| `box`              | Box surface with a placeholder block                   |
+| `button`           | Primary filled button                                  |
+| `button-secondary` | Secondary filled button                                |
+| `button-tertiary`  | Tertiary filled button                                 |
+| `button-outline`   | Primary outline button                                 |
+| `callout`          | The five callout intents stacked                       |
+| `chat`             | Chat drawer with launcher and fake streaming transport |
+| `chat-fullscreen`  | Fullscreen chat variant behind a launcher              |
+| `chat-glow`        | Chat drawer with the rainbow glow treatment            |
+| `chat-inline`      | Inline chat panel embedded in the page                 |
+| `chat-input`       | Standalone chat composer                               |
+| `chat-input-glow`  | Chat composer with the rainbow glow treatment          |
+| `chat-launcher`    | "Ask AI" launcher pill with glow                       |
+| `chat-message`     | Static user and assistant messages                     |
+| `chat-typing`      | Three-dot typing indicator                             |
+| `checkbox`         | Checked checkbox                                       |
+| `dropzone`         | Block dropzone with prompt, browse, and hint text      |
+| `dropzone-inline`  | Inline dropzone variant                                |
+| `flex`             | Flex row with three placeholder blocks                 |
+| `grid`             | Three-column grid with a full-width row                |
+| `icon`             | Cherry icon at 48px                                    |
+| `icon-button`      | Icon button with a settings icon                       |
+| `input`            | Text input with label and placeholder                  |
+| `modal`            | Modal, already open on a backdrop                      |
+| `password`         | Password field with label and placeholder              |
+| `prose`            | Markdown-style content with Cherry typography          |
+| `spinner`          | Rotating loading indicator in three sizes              |
+| `radio`            | Checked radio button                                   |
+| `range`            | Range slider                                           |
+| `select`           | Select with label                                      |
+| `textarea`         | Textarea with label and value                          |
+| `theme-toggle`     | Pill-shaped sun/moon theme switch                      |
+| `toast`            | Success, error, and info toasts, fired on mount        |
+| `toggle`           | Checked toggle                                         |
 
 Pure layout primitives with no visual output of their own (Container, Col, MaxWidth, Space) have no preview entry.
 

package/dist/avatar-dropzone.js

@@ -1,12 +1,11 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { Icon } from "./icon.js";
 import { matchesAccept } from "./dropzone.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/avatar-dropzone.tsx
 var avatarSizes = {
 	small: {
@@ -115,7 +114,7 @@ function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": a
 var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
 var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
-	componentId: "sc-38b0b6de-0"
+	componentId: "sc-758cb640-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -123,7 +122,7 @@ var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 ], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
 var StyledAvatarDropzone = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzone",
-	componentId: "sc-38b0b6de-1"
+	componentId: "sc-758cb640-1"
 })([
 	``,
 	`;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
@@ -142,16 +141,17 @@ var StyledAvatarDropzone = styled.button.withConfig({
 ], resetButton, ({ $hasImage }) => $hasImage ? "solid" : "dashed", ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ theme }) => theme.colors.primary, ({ 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 StyledAvatarRemove = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarRemove",
-	componentId: "sc-38b0b6de-2"
+	componentId: "sc-758cb640-2"
 })([
 	``,
 	`;position:absolute;top:0;right:0;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 { AvatarDropzone };

package/dist/avatar.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { IconProps } from './icon';
+export type AvatarSize = "small" | "default" | "big";
+export type AvatarColor = "primary" | "secondary" | "tertiary" | "gray";
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    $size?: AvatarSize;
+    /** Image URL. Falls back to initials, then to the icon, if absent. */
+    $src?: string;
+    $alt?: string;
+    /** Full name or label; the first letters of its first two words are shown. */
+    $name?: string;
+    /** Fallback icon used when there is no image and no name. */
+    $icon?: IconProps;
+    $color?: AvatarColor;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };

package/dist/avatar.js

@@ -0,0 +1,68 @@
+"use client";
+"use client";
+import { darkFilledTextRule, filledTextColor } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/avatar.tsx
+var avatarSizes = {
+	small: {
+		box: 28,
+		icon: 14
+	},
+	default: {
+		box: 36,
+		icon: 18
+	},
+	big: {
+		box: 48,
+		icon: 24
+	}
+};
+var avatarColors = {
+	primary: (theme) => theme.colors.primary,
+	secondary: (theme) => theme.colors.secondary,
+	tertiary: (theme) => theme.colors.tertiary,
+	gray: (theme) => theme.colors.grayDark
+};
+function toInitials(name) {
+	return name.trim().split(/\s+/).slice(0, 2).map((word) => word[0] ?? "").join("").toUpperCase();
+}
+var StyledAvatar = styled.span.withConfig({
+	displayName: "avatar__StyledAvatar",
+	componentId: "sc-d3a5da79-0"
+})([``, `;`], ({ theme, $size = "default", $color = "primary" }) => {
+	const { box } = avatarSizes[$size];
+	return css([
+		`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;width:`,
+		`px;height:`,
+		`px;border-radius:50%;background:`,
+		`;color:`,
+		`;font-size:`,
+		`px;line-height:1;font-weight:600;user-select:none;`,
+		`;& img{width:100%;height:100%;object-fit:cover;display:block;}`
+	], box, box, avatarColors[$color](theme), filledTextColor(theme), Math.round(box * .38), darkFilledTextRule(theme));
+});
+function LocalAvatar({ $size = "default", $src, $alt, $name, $icon = "User", $color, ...props }, ref) {
+	const initials = $name ? toInitials($name) : "";
+	const fallbackLabel = $src || initials ? void 0 : $alt ?? $name;
+	return /*#__PURE__*/ jsx(StyledAvatar, {
+		$size,
+		$color,
+		role: fallbackLabel ? "img" : void 0,
+		"aria-label": fallbackLabel,
+		...props,
+		ref,
+		children: $src ? /*#__PURE__*/ jsx("img", {
+			src: $src,
+			alt: $alt ?? $name ?? ""
+		}) : initials ? initials : /*#__PURE__*/ jsx(Icon, {
+			name: $icon,
+			size: avatarSizes[$size].icon
+		})
+	});
+}
+var Avatar = /*#__PURE__*/ forwardRef(LocalAvatar);
+//#endregion
+export { Avatar };

package/dist/button.js

@@ -1,10 +1,9 @@
 "use client";
 "use client";
-import { formElementHeightStyles, resetButton } from "./utils/mixins.js";
+import { darkFilledTextRule, filledTextColor, formElementHeightStyles, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import { darken, lighten } from "polished";
 //#region src/lib/button.tsx
 var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css([
 	``,
@@ -18,9 +17,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	` `,
 	` `,
 	``
-], resetButton, theme.isDark ? theme.colors.dark : theme.colors.light, !disabled && $variant === "primary" && css([
+], resetButton, filledTextColor(theme), !disabled && $variant === "primary" && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -29,9 +29,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`;}&:focus{box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], $outline ? theme.colors.primary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
+], $outline ? theme.colors.primary : filledTextColor(theme), !$outline && darkFilledTextRule(theme), $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -40,9 +41,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`;}&:focus{box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], $outline ? theme.colors.secondary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
+], $outline ? theme.colors.secondary : filledTextColor(theme), !$outline && darkFilledTextRule(theme), $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -51,9 +53,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`;}&:focus{box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], $outline ? theme.colors.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
+], $outline ? theme.colors.tertiary : filledTextColor(theme), !$outline && darkFilledTextRule(theme), $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -62,7 +65,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`;}&:focus{box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], $outline ? theme.colors.error : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : darken(.1, theme.colors.error), darken(.1, theme.colors.error), $outline && `color: ${darken(.1, theme.colors.error)}`, lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
+], $outline ? theme.colors.error : filledTextColor(theme), !$outline && darkFilledTextRule(theme), $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : shade(theme.colors.error, 10), shade(theme.colors.error, 10), $outline && `color: ${shade(theme.colors.error, 10)}`, tint(theme.colors.error, 10), tint(theme.colors.error, 10)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
 			line-height: ${theme.lineHeights.buttonBig.lg};
       padding: 18px 30px;
 	` : $size === "small" ? `font-size: ${theme.fontSizes.buttonSmall.lg};
@@ -77,7 +80,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-2f3ba034-0"
+	componentId: "sc-286fdf36-0"
 })([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledButton, {

package/dist/callout.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { IconProps } from './icon';
+export type CalloutType = "note" | "info" | "warning" | "danger" | "success";
+export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    $type?: CalloutType;
+    /** Overrides the icon the type would pick, or supplies one when untyped. */
+    $icon?: IconProps;
+    /** Renders without an icon. */
+    $hideIcon?: boolean;
+}
+declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLDivElement>>;
+export { Callout };

package/dist/callout.js

@@ -0,0 +1,121 @@
+"use client";
+"use client";
+import { styledSmall } from "./utils/typography.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/callout.tsx
+var calloutTints = {
+	note: {
+		light: {
+			border: "#0ea5e933",
+			background: "#f0f9ff80",
+			text: "#0c4a6e"
+		},
+		dark: {
+			border: "#0ea5e94d",
+			background: "#0ea5e91a",
+			text: "#bae6fd"
+		}
+	},
+	info: {
+		light: {
+			border: "#71717a33",
+			background: "#fafafa80",
+			text: "#18181b"
+		},
+		dark: {
+			border: "#71717a4d",
+			background: "#71717a1a",
+			text: "#e4e4e7"
+		}
+	},
+	warning: {
+		light: {
+			border: "#f59e0b33",
+			background: "#fffbeb80",
+			text: "#78350f"
+		},
+		dark: {
+			border: "#f59e0b4d",
+			background: "#f59e0b1a",
+			text: "#fde68a"
+		}
+	},
+	danger: {
+		light: {
+			border: "#ef444433",
+			background: "#fef2f280",
+			text: "#7f1d1d"
+		},
+		dark: {
+			border: "#ef44444d",
+			background: "#ef44441a",
+			text: "#fecaca"
+		}
+	},
+	success: {
+		light: {
+			border: "#10b98133",
+			background: "#ecfdf580",
+			text: "#064e3b"
+		},
+		dark: {
+			border: "#10b9814d",
+			background: "#10b9811a",
+			text: "#a7f3d0"
+		}
+	}
+};
+var calloutIcons = {
+	note: "CircleAlert",
+	info: "Info",
+	warning: "TriangleAlert",
+	danger: "OctagonAlert",
+	success: "Check"
+};
+var tintStyles = (tint) => css([
+	`border-color:`,
+	`;background:`,
+	`;& .callout-icon svg,& .callout-content,& .callout-content p{color:`,
+	`;}`
+], tint.border, tint.background, tint.text);
+var StyledCallout = styled.div.withConfig({
+	displayName: "callout__StyledCallout",
+	componentId: "sc-84e10f5e-0"
+})([
+	`background:`,
+	`;border:solid 1px `,
+	`;border-radius:`,
+	`;padding:20px;margin:0;max-width:100%;color:`,
+	`;display:flex;`,
+	`;& .callout-icon{display:flex;flex-shrink:0;margin:3px 10px 0 0;& svg{width:16px;height:16px;}}& .callout-content{display:flex;flex-direction:column;gap:10px;min-width:0;& > *:first-child{margin-top:0;}& > *:last-child{margin-bottom:0;}}`,
+	``
+], ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayDark, ({ theme }) => styledSmall(theme), ({ $type, theme }) => $type && css([
+	``,
+	`;`,
+	`;:root.dark &{`,
+	`;}`
+], tintStyles(calloutTints[$type].light), theme.isDark && tintStyles(calloutTints[$type].dark), tintStyles(calloutTints[$type].dark)));
+function LocalCallout({ children, $type, $icon, $hideIcon, ...props }, ref) {
+	const iconName = $icon ?? ($type ? calloutIcons[$type] : void 0);
+	return /*#__PURE__*/ jsxs(StyledCallout, {
+		$type,
+		...props,
+		ref,
+		children: [!$hideIcon && iconName && /*#__PURE__*/ jsx("span", {
+			className: "callout-icon",
+			children: /*#__PURE__*/ jsx(Icon, {
+				name: iconName,
+				size: 16
+			})
+		}), /*#__PURE__*/ jsx("span", {
+			className: "callout-content",
+			children
+		})]
+	});
+}
+var Callout = /*#__PURE__*/ forwardRef(LocalCallout);
+//#endregion
+export { Callout };

package/dist/chat-input.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface ChatInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onSubmit"> {
+    /** Controlled value. Defaults to the provider's input state. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Submit handler. Defaults to the provider's send(). */
+    onSend?: (value: string) => void;
+    /** Overrides the provider's loading state. */
+    $loading?: boolean;
+    /** The animated rainbow border + sparkle treatment. Off by default. */
+    $glow?: boolean;
+    /** Overrides the glow palette. */
+    $glowColors?: string[];
+    /** Max height in px the textarea may grow to before it scrolls. */
+    $maxRows?: number;
+}
+declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { ChatInput };