@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,79 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Tone — drives icon, accent stripe color, tinted background, and ARIA role.
+ *
+ * - `'info'` — blue accent. Neutral updates ("Synced 5 minutes ago").
+ * - `'success'` — green accent. Confirmations ("Changes saved").
+ * - `'warning'` — dark amber accent. Non-blocking heads-up ("Storage at 85%").
+ * - `'error'` — red accent. Failures. ALSO sets `role="alert"` (assertive); the
+ *   other tones use `role="status"` (polite). With `live={false}` every tone
+ *   is a static `role="note"` instead.
+ */
+export type AlertTone = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'title'> {
+    /** Tone. Defaults to `'info'`. See `AlertTone` for full descriptions. */
+    tone?: AlertTone;
+    /**
+     * Optional bold heading. Renders above the description. ReactNode so you
+     * can embed inline emphasis (`<>Update <strong>1.2.3</strong> available</>`).
+     *
+     * The native HTML `title` attribute (tooltip-on-hover) is collapsed by this
+     * prop. Use `aria-label` if you need that.
+     */
+    title?: ReactNode;
+    /** Description body. Rendered below the title in muted color. */
+    children?: ReactNode;
+    /**
+     * Override the tone's default icon. Pass any ReactNode (typically a
+     * lucide-react icon). Pass `null` to hide the icon entirely.
+     *
+     * Defaults: `info` → `Info`, `success` → `CheckCircle2`,
+     * `warning` → `AlertTriangle`, `error` → `XCircle`.
+     */
+    icon?: ReactNode | null;
+    /**
+     * Optional action row rendered below the description. Typically a single
+     * Button or a Cluster of two ("Retry", "Dismiss"). The component doesn't
+     * manage the action row's layout — pass a pre-laid-out node.
+     */
+    actions?: ReactNode;
+    /**
+     * Whether the Alert is a live region. Defaults to `true`: `role="status"`
+     * (polite), or `role="alert"` (assertive) for `tone="error"` — right for a
+     * message that APPEARS in response to something (a save failed, an update
+     * arrived).
+     *
+     * Pass `false` for a callout that is simply part of the page when it opens —
+     * a "Needs action" note in each card of a list, a standing warning in a
+     * form. It renders `role="note"` with the same visuals and no live
+     * semantics, so screen readers read it in place instead of announcing it.
+     * N live Alerts mounting together can queue N announcements (#547).
+     *
+     * The tone is shown by the icon's shape and the colour only; it is not
+     * exposed to assistive tech in either mode (the icon is decorative). With
+     * `live={false}`, `tone="error"` also loses the "alert" role that browse-mode
+     * readers speak. So put the urgency in `title` ("Needs action").
+     *
+     * Decide it at mount: flipping `false` → `true` on a mounted Alert turns
+     * content that is already there into a live region, which announces nothing.
+     * @default true
+     */
+    live?: boolean;
+    /**
+     * Called when the user clicks the close (×) button. When set, the close
+     * button renders; when omitted, no close button. Alert is **controlled** —
+     * the component does NOT manage internal hidden state. Hide via
+     * conditional render in the consumer:
+     *
+     * ```tsx
+     * const [show, setShow] = useState(true);
+     * {show && <Alert tone="success" onDismiss={() => setShow(false)}>Saved</Alert>}
+     * ```
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Persistent in-flow notification.
+ * @see docs/components/Alert.md
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,78 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import Alert_module_default from "./Alert.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+// src/components/Alert/Alert.tsx
+var DEFAULT_ICONS = {
+	info: /* @__PURE__ */ jsx(Info, {
+		size: 16,
+		"aria-hidden": "true"
+	}),
+	success: /* @__PURE__ */ jsx(CheckCircle2, {
+		size: 16,
+		"aria-hidden": "true"
+	}),
+	warning: /* @__PURE__ */ jsx(AlertTriangle, {
+		size: 16,
+		"aria-hidden": "true"
+	}),
+	error: /* @__PURE__ */ jsx(XCircle, {
+		size: 16,
+		"aria-hidden": "true"
+	})
+};
+/**
+* Persistent in-flow notification.
+* @see docs/components/Alert.md
+*/
+var Alert = forwardRef(function Alert({ tone = "info", title, children, icon, actions, live = true, onDismiss, className, ...props }, ref) {
+	const t = useTranslation();
+	const role = !live ? "note" : tone === "error" ? "alert" : "status";
+	const renderedIcon = icon === null ? null : icon ?? DEFAULT_ICONS[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		role,
+		"data-tone": tone,
+		className: clsx(Alert_module_default.alert, className),
+		children: [
+			renderedIcon && /* @__PURE__ */ jsx("div", {
+				className: Alert_module_default.icon,
+				children: renderedIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Alert_module_default.body,
+				children: [
+					title && /* @__PURE__ */ jsx("strong", {
+						className: Alert_module_default.title,
+						children: title
+					}),
+					children && /* @__PURE__ */ jsx("div", {
+						className: Alert_module_default.description,
+						children
+					}),
+					actions && /* @__PURE__ */ jsx("div", {
+						className: Alert_module_default.actions,
+						children: actions
+					})
+				]
+			}),
+			onDismiss && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				"aria-label": t("alert.dismiss"),
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(X, {
+					size: 14,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+});
+export { Alert };

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,17 @@
+import "./Alert.css";
+// src/components/Alert/Alert.module.scss
+var alert = "Alert__alert__cp3nH";
+var icon = "Alert__icon__-USyE";
+var body = "Alert__body__iYcc7";
+var title = "Alert__title__KgaC4";
+var description = "Alert__description__RN11i";
+var actions = "Alert__actions__TP4gz";
+var Alert_module_default = {
+	alert,
+	icon,
+	body,
+	title,
+	description,
+	actions
+};
+export { actions, alert, body, Alert_module_default as default, description, icon, title };

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertTone } from './Alert.js';

package/dist/components/AppLayout/AppLayout.css

@@ -0,0 +1,72 @@
+:root {
+  --app-layout-content-padding: var(--space-6);
+  --app-layout-content-background: var(--color-bg-subtle);
+}
+
+@media (max-width: 640px) {
+  :root {
+    --app-layout-content-padding: var(--space-4);
+  }
+}
+.AppLayout__root__IP-Jq {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  isolation: isolate;
+}
+
+.AppLayout__banner__BW2P-,
+.AppLayout__contextBanner__73wRi {
+  flex: none;
+}
+
+.AppLayout__row__55vzY {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.AppLayout__sidebar__rCe_d {
+  flex: none;
+}
+
+.AppLayout__sidebarPinned__yRbD6 {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
+}
+
+.AppLayout__body__O9MK7 {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.AppLayout__topBar__VQKs_ {
+  flex: none;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-app-chrome);
+}
+
+.AppLayout__main__TVOvJ {
+  flex: 1;
+  min-width: 0;
+  padding: var(--app-layout-content-padding);
+  background: var(--app-layout-content-background);
+}
+
+.AppLayout__overlaySidebar__J_-p6 {
+  --rail-width-expanded: 100%;
+  --rail-width-collapsed: 100%;
+}
+
+.AppLayout__overlaySidebarContent__-YcBR {
+  flex: 1 1 auto;
+  min-height: 0;
+}

package/dist/components/AppLayout/AppLayout.d.ts

@@ -0,0 +1,111 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { CollapseBreakpoint } from '../_internal/collapse.js';
+export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * System-wide banner slot — full WINDOW width, above the sidebar + content
+     * row. For messages that apply wherever the user is: maintenance, billing
+     * overdue, impersonation. Pass a `<Banner>` (or several, most severe first).
+     * Not sticky: it scrolls away with the page while the `topBar` stays pinned.
+     * Omit (or pass `null` / `false`) for no wrapper.
+     *
+     * With `sidebarPinned`, the pinned sidebar starts below this banner, so at
+     * scroll position 0 its bottom (a `Rail.Footer`) sits up to one banner height
+     * below the fold until the page scrolls past the banner. This is accepted —
+     * banners are temporary.
+     */
+    banner?: ReactNode;
+    /**
+     * Context banner slot — inside the content column, between the `topBar` and
+     * the padded content region, full-bleed within the column. For messages
+     * scoped to a module or route ("Email sending suspended" on the Email
+     * pages); the app decides which routes render it. Pass a `<Banner>`. Not
+     * sticky. Page-level messages belong in the content as `<Alert>` instead.
+     */
+    contextBanner?: ReactNode;
+    /**
+     * Top bar slot — sits above the main content, spanning the content column to
+     * the right of the sidebar (not the full window width). Omit for no top bar.
+     */
+    topBar?: ReactNode;
+    /**
+     * Sidebar slot — runs the full height down the left, alongside both the top
+     * bar and the content. Sets its own width (intrinsic). Omit for no sidebar.
+     */
+    sidebar?: ReactNode;
+    /**
+     * Pin the sidebar to the viewport: `position: sticky; top: 0; height: 100dvh`
+     * with internal overflow scrolling. On pages taller than the viewport the
+     * sidebar (and a `Rail` inside it — including its `Rail.Footer` /
+     * CollapseToggle) spans exactly the SCREEN, keeping the footer glued to the
+     * viewport bottom instead of the page bottom. Default `false` (sidebar
+     * stretches to the full row/page height — the original behavior).
+     *
+     * Prefer this over wrapping the sidebar slot in `Sticky` — the rail pins its
+     * footer by filling its own `height: 100%` box, which needs a DEFINITE
+     * height to resolve against. `Sticky` sets `align-self: start`, which drops
+     * the row stretch that made it definite, so the footer stops pinning.
+     *
+     * `100dvh` is always relative to the real browser viewport, never to a
+     * nested scroll container — so this only pins correctly when AppLayout is
+     * the actual outermost, page-scroll shell (its documented top-level use).
+     * Nest it inside another scrollable region and the sidebar will size to
+     * the whole window, not that region, and overflow it.
+     */
+    sidebarPinned?: boolean;
+    /**
+     * Move the sidebar out of the flow and into a left-anchored `<Drawer>` while
+     * the **viewport** is at or below a width threshold: `'sm'` 480px / `'md'`
+     * 640px / `'lg'` 768px. Omit for no responsive behavior (the default) — the
+     * sidebar always renders in the flow.
+     *
+     * Below the threshold the content column claims the full viewport width, and
+     * the sidebar is reachable only by opening the drawer. Render your own
+     * trigger (a hamburger in the `topBar`) and drive it with `sidebarOpen` +
+     * `onSidebarOpenChange` — AppLayout deliberately renders no trigger of its
+     * own, since where it belongs in the bar is the consumer's call, which means
+     * both props are effectively required together (see `sidebarOpen`'s doc).
+     * Use the exported `useBelowBreakpoint` hook to show that trigger only while
+     * the overlay mode is active.
+     *
+     * `sidebarPinned` is ignored below the threshold: the drawer owns the
+     * sidebar's box there, and a `sticky; height: 100dvh` wrapper inside it would
+     * size the rail to the window instead of the drawer.
+     *
+     * Measures the viewport (`matchMedia`), not a container — the sidebar's
+     * presence in the row is exactly what the threshold changes, so a container
+     * query would be circular. Same scale and same basis as `<Rail collapseBelow>`.
+     *
+     * The `sidebar` node moves between the in-flow slot and the `Drawer`,
+     * remounting it, so a `Rail`'s internal state (expanded `Rail.Group`s, scroll
+     * position) resets each time, by design. A `<Rail>` in the drawer scrolls its
+     * own body while its footer stays visible; a custom non-`Rail` sidebar needs
+     * its own height-filling scroll container, especially on short viewports
+     * (phone landscape, ~380px).
+     */
+    sidebarOverlayBelow?: CollapseBreakpoint;
+    /**
+     * Open state of the overlay sidebar. Technically optional, but effectively
+     * required together with `onSidebarOpenChange` whenever `sidebarOverlayBelow`
+     * is set — AppLayout renders no trigger of its own (see `sidebarOverlayBelow`),
+     * so with both omitted nothing can ever open the drawer; Esc/backdrop close it,
+     * but there's no way in. Has no effect unless `sidebarOverlayBelow` is set and
+     * the viewport is below it.
+     */
+    sidebarOpen?: boolean;
+    /** Fires whenever the overlay sidebar opens or closes — close button, Esc, backdrop click, swipe, or programmatic. Pair with `sidebarOpen` — see its doc. */
+    onSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * Render the content region as a `<main>` landmark instead of a plain `<div>`.
+     * Pass it on the outermost app shell so the page gets its single `main`
+     * landmark without a wrapper element. Leave it off (default) for nested
+     * use — demos, documentation previews — so the page never gets two `main`s.
+     */
+    mainLandmark?: boolean;
+    /** Main content slot — fills the remaining space below the top bar. */
+    children: ReactNode;
+}
+/**
+ * Viewport-filling application shell layout: full-height `sidebar`, optional `topBar` over the content column, main `children` below.
+ * @see docs/components/AppLayout.md
+ */
+export declare const AppLayout: import("react").ForwardRefExoticComponent<AppLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/AppLayout/AppLayout.js

@@ -0,0 +1,81 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { useBelowBreakpoint } from "../../hooks/useBelowBreakpoint.js";
+import { useControllableState } from "../_internal/useControllableState.js";
+import { Drawer } from "../Drawer/Drawer.js";
+import AppLayout_module_default from "./AppLayout.module.js";
+import { forwardRef, useEffect, useRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/AppLayout/AppLayout.tsx
+/**
+* Viewport-filling application shell layout: full-height `sidebar`, optional `topBar` over the content column, main `children` below.
+* @see docs/components/AppLayout.md
+*/
+var AppLayout = forwardRef(function AppLayout({ banner, contextBanner, topBar, sidebar, sidebarPinned, sidebarOverlayBelow, mainLandmark, sidebarOpen, onSidebarOpenChange, children, className, ...props }, ref) {
+	const t = useTranslation();
+	const Main = mainLandmark ? "main" : "div";
+	const overlay = useBelowBreakpoint(sidebarOverlayBelow) && sidebar != null;
+	const overlayConfigured = sidebarOverlayBelow != null && sidebar != null;
+	const [open, setOpen] = useControllableState({
+		value: sidebarOpen,
+		defaultValue: false,
+		onChange: onSidebarOpenChange
+	});
+	const wasOverlay = useRef(overlay);
+	useEffect(() => {
+		if (wasOverlay.current && !overlay && open) setOpen(false);
+		wasOverlay.current = overlay;
+	}, [
+		overlay,
+		open,
+		setOpen
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: clsx(AppLayout_module_default.root, className),
+		...props,
+		children: [
+			banner != null && banner !== false && /* @__PURE__ */ jsx("div", {
+				className: AppLayout_module_default.banner,
+				children: banner
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: AppLayout_module_default.row,
+				children: [sidebar != null && !overlay && /* @__PURE__ */ jsx("div", {
+					className: clsx(AppLayout_module_default.sidebar, sidebarPinned && AppLayout_module_default.sidebarPinned),
+					children: sidebar
+				}), /* @__PURE__ */ jsxs("div", {
+					className: AppLayout_module_default.body,
+					children: [
+						topBar != null && /* @__PURE__ */ jsx("div", {
+							className: AppLayout_module_default.topBar,
+							children: topBar
+						}),
+						contextBanner != null && contextBanner !== false && /* @__PURE__ */ jsx("div", {
+							className: AppLayout_module_default.contextBanner,
+							children: contextBanner
+						}),
+						/* @__PURE__ */ jsx(Main, {
+							className: AppLayout_module_default.main,
+							children
+						})
+					]
+				})]
+			}),
+			overlayConfigured && /* @__PURE__ */ jsxs(Drawer, {
+				open: overlay && open,
+				onOpenChange: setOpen,
+				side: "left",
+				size: "sm",
+				className: AppLayout_module_default.overlaySidebar,
+				"aria-label": t("appLayout.sidebar"),
+				children: [/* @__PURE__ */ jsx(Drawer.Header, { children: t("appLayout.sidebar") }), /* @__PURE__ */ jsx("div", {
+					className: AppLayout_module_default.overlaySidebarContent,
+					children: sidebar
+				})]
+			})
+		]
+	});
+});
+export { AppLayout };

package/dist/components/AppLayout/AppLayout.module.js

@@ -0,0 +1,27 @@
+import "./AppLayout.css";
+// src/components/AppLayout/AppLayout.module.scss
+var root = "AppLayout__root__IP-Jq";
+var banner = "AppLayout__banner__BW2P-";
+var contextBanner = "AppLayout__contextBanner__73wRi";
+var row = "AppLayout__row__55vzY";
+var sidebar = "AppLayout__sidebar__rCe_d";
+var sidebarPinned = "AppLayout__sidebarPinned__yRbD6";
+var body = "AppLayout__body__O9MK7";
+var topBar = "AppLayout__topBar__VQKs_";
+var main = "AppLayout__main__TVOvJ";
+var overlaySidebar = "AppLayout__overlaySidebar__J_-p6";
+var overlaySidebarContent = "AppLayout__overlaySidebarContent__-YcBR";
+var AppLayout_module_default = {
+	root,
+	banner,
+	contextBanner,
+	row,
+	sidebar,
+	sidebarPinned,
+	body,
+	topBar,
+	main,
+	overlaySidebar,
+	overlaySidebarContent
+};
+export { banner, body, contextBanner, AppLayout_module_default as default, main, overlaySidebar, overlaySidebarContent, root, row, sidebar, sidebarPinned, topBar };

package/dist/components/AppLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { AppLayout } from './AppLayout.js';
+export type { AppLayoutProps } from './AppLayout.js';

package/dist/components/Avatar/AgentAvatar.css

@@ -0,0 +1,185 @@
+:root {
+  --avatar-radius: var(--radius-full);
+  --avatar-fg: var(--color-avatar-fg);
+  --avatar-bg-fallback: var(--color-bg-sunken);
+  --avatar-font-weight: var(--font-weight-semibold);
+  --avatar-size-inline: 1.5em;
+  --avatar-font-size-inline: 0.7em;
+  --avatar-presence-size-inline: max(var(--size-presence-sm), 0.5em);
+  --avatar-size-sm: var(--size-sm);
+  --avatar-size-md: var(--size-md);
+  --avatar-size-lg: var(--size-lg);
+  --avatar-size-xl: var(--size-xl);
+  --avatar-font-size-sm: var(--font-size-xs);
+  --avatar-font-size-md: var(--font-size-sm);
+  --avatar-font-size-lg: var(--font-size-md);
+  --avatar-font-size-xl: var(--font-size-2xl);
+  --avatar-presence-radius: var(--radius-full);
+  --avatar-presence-ring-width: var(--border-width-emphasis);
+  --avatar-presence-ring-color: var(--color-bg);
+  --avatar-presence-size-sm: var(--size-presence-sm);
+  --avatar-presence-size-md: var(--size-presence-md);
+  --avatar-presence-size-lg: var(--size-presence-lg);
+  --avatar-presence-size-xl: var(--size-presence-xl);
+  --avatar-presence-bg-online: var(--color-presence-online);
+  --avatar-presence-bg-busy: var(--color-presence-busy);
+  --avatar-presence-bg-away: var(--color-presence-away);
+  --avatar-presence-bg-offline: var(--color-presence-offline);
+  --avatar-presence-glyph-color: var(--avatar-presence-ring-color);
+  --avatar-presence-hollow-width: var(--border-width-emphasis);
+  --avatar-presence-bar-height: var(--border-width-emphasis);
+  --agent-avatar-bg: var(--color-bg-muted);
+  --agent-avatar-fg: var(--color-fg-muted);
+  --agent-avatar-mark-size-inline: calc(var(--avatar-size-inline) * 0.6);
+  --agent-avatar-mark-size-sm: calc(var(--avatar-size-sm) * 0.6);
+  --agent-avatar-mark-size-md: calc(var(--avatar-size-md) * 0.6);
+  --agent-avatar-mark-size-lg: calc(var(--avatar-size-lg) * 0.6);
+  --agent-avatar-mark-size-xl: calc(var(--avatar-size-xl) * 0.6);
+  --agent-avatar-badge-size-sm: calc(var(--avatar-size-sm) * 0.5);
+  --agent-avatar-badge-size-md: calc(var(--avatar-size-md) * 0.5);
+  --agent-avatar-badge-size-lg: calc(var(--avatar-size-lg) * 0.5);
+  --agent-avatar-badge-size-xl: calc(var(--avatar-size-xl) * 0.45);
+  --agent-avatar-badge-font-size: 0.4em;
+  --agent-avatar-badge-ring-width: var(--avatar-presence-ring-width);
+  --agent-avatar-badge-ring-color: var(--avatar-presence-ring-color);
+  --avatar-in-group-ring-width: var(--border-width-emphasis);
+  --avatar-in-group-ring-color: var(--color-bg);
+  --avatar-group-overlap-sm: var(--avatar-overlap-sm);
+  --avatar-group-overlap-md: var(--avatar-overlap-md);
+  --avatar-group-overlap-lg: var(--avatar-overlap-lg);
+  --avatar-group-overlap-xl: var(--avatar-overlap-xl);
+  --avatar-overflow-gap: var(--space-1);
+  --avatar-overflow-padding-x: var(--space-2);
+  --avatar-overflow-bg: var(--color-bg-muted);
+  --avatar-overflow-fg: var(--color-fg-muted);
+  --avatar-overflow-radius: var(--radius-full);
+  --avatar-overflow-font-weight: var(--font-weight-semibold);
+  --avatar-overflow-ring-width: var(--border-width-emphasis);
+  --avatar-overflow-ring-color: var(--color-bg);
+  --avatar-overflow-bg-hover: var(--color-bg-muted-hover);
+  --avatar-overflow-fg-hover: var(--color-fg);
+  --avatar-overflow-ring-focus: var(--ring-accent);
+  --avatar-overflow-size-sm: var(--size-sm);
+  --avatar-overflow-size-md: var(--size-md);
+  --avatar-overflow-size-lg: var(--size-lg);
+  --avatar-overflow-size-xl: var(--size-xl);
+  --avatar-overflow-font-size-sm: var(--font-size-xs);
+  --avatar-overflow-font-size-md: var(--font-size-sm);
+  --avatar-overflow-font-size-lg: var(--font-size-md);
+  --avatar-overflow-font-size-xl: var(--font-size-2xl);
+}
+
+@supports (height: 1lh) {
+  :root {
+    --avatar-size-inline: 1lh;
+  }
+}
+.AgentAvatar__agent__rpjTR {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--avatar-radius);
+  user-select: none;
+}
+
+.AgentAvatar__tile___flHy {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--agent-avatar-bg);
+  color: var(--agent-avatar-fg);
+}
+
+.AgentAvatar__mark__3Gkcw {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.AgentAvatar__mark__3Gkcw svg {
+  width: 100%;
+  height: 100%;
+}
+
+.AgentAvatar__inline__6QQon .AgentAvatar__mark__3Gkcw {
+  width: var(--agent-avatar-mark-size-inline);
+  height: var(--agent-avatar-mark-size-inline);
+}
+
+.AgentAvatar__sm__Dv5Xr .AgentAvatar__mark__3Gkcw {
+  width: var(--agent-avatar-mark-size-sm);
+  height: var(--agent-avatar-mark-size-sm);
+}
+
+.AgentAvatar__md__b49yX .AgentAvatar__mark__3Gkcw {
+  width: var(--agent-avatar-mark-size-md);
+  height: var(--agent-avatar-mark-size-md);
+}
+
+.AgentAvatar__lg__kygds .AgentAvatar__mark__3Gkcw {
+  width: var(--agent-avatar-mark-size-lg);
+  height: var(--agent-avatar-mark-size-lg);
+}
+
+.AgentAvatar__xl__TiYWd .AgentAvatar__mark__3Gkcw {
+  width: var(--agent-avatar-mark-size-xl);
+  height: var(--agent-avatar-mark-size-xl);
+}
+
+.AgentAvatar__badge__GbsQ2 {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  border-radius: var(--avatar-radius);
+  box-shadow: 0 0 0 var(--agent-avatar-badge-ring-width) var(--agent-avatar-badge-ring-color);
+  font-size: var(--agent-avatar-badge-font-size);
+}
+
+.AgentAvatar__badge__GbsQ2 > span {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}
+
+.AgentAvatar__erased__4Eo4z {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--agent-avatar-bg);
+  color: var(--agent-avatar-fg);
+}
+
+.AgentAvatar__erased__4Eo4z svg {
+  width: 70%;
+  height: 70%;
+}
+
+.AgentAvatar__sm__Dv5Xr .AgentAvatar__badge__GbsQ2 {
+  width: var(--agent-avatar-badge-size-sm);
+  height: var(--agent-avatar-badge-size-sm);
+}
+
+.AgentAvatar__md__b49yX .AgentAvatar__badge__GbsQ2 {
+  width: var(--agent-avatar-badge-size-md);
+  height: var(--agent-avatar-badge-size-md);
+}
+
+.AgentAvatar__lg__kygds .AgentAvatar__badge__GbsQ2 {
+  width: var(--agent-avatar-badge-size-lg);
+  height: var(--agent-avatar-badge-size-lg);
+}
+
+.AgentAvatar__xl__TiYWd .AgentAvatar__badge__GbsQ2 {
+  width: var(--agent-avatar-badge-size-xl);
+  height: var(--agent-avatar-badge-size-xl);
+}