@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,92 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Selection mode. */
+export type AccordionMode = 'single' | 'multiple';
+/** Heading level wrapping the trigger button. Defaults to 'h3'. */
+export type AccordionHeaderLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Visual variant. Defaults to `'bordered'`.
+ * - `'bordered'` — outer border + radius + dividing lines between items. Standard standalone look.
+ * - `'borderless'` — no outer border, no item borders, transparent background. Use when the accordion sits inside another bordered container (e.g., a Card) or as a section divider.
+ */
+export type AccordionVariant = 'bordered' | 'borderless';
+/**
+ * Trigger size — controls font-size + padding. Defaults to `'md'`.
+ * - `'sm'` — `--font-size-sm`, tighter padding. Dense settings panels.
+ * - `'md'` — `--font-size-md`, default padding. Most use cases.
+ * - `'lg'` — `--font-size-lg`, larger padding. Hero FAQ sections.
+ */
+export type AccordionSize = 'sm' | 'md' | 'lg';
+/**
+ * Spacing between items. When set, items render as separated **cards** (each gets
+ * its own border + radius) and the joined container chrome (outer border + item
+ * dividers) is dropped. Omit for the default joined look. `'sm'`/`'md'`/`'lg'`
+ * step the gap. Applies regardless of `variant`.
+ */
+export type AccordionGap = 'sm' | 'md' | 'lg';
+/** Which side the trigger indicator (chevron) sits on. Defaults to `'right'`. */
+export type AccordionIndicatorSide = 'left' | 'right';
+/**
+ * Whether a `<Accordion.Trigger actions>` slot stays visible when its item is
+ * collapsed. `'show'` (default) keeps controls always visible; `'hide'` fades them
+ * out (and removes them from focus order) while the item is closed — useful for a
+ * dense sidebar of collapsed blocks whose controls act on hidden body content.
+ */
+export type AccordionActionsWhenClosed = 'show' | 'hide';
+interface AccordionBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** Visual variant. Defaults to `'bordered'`. */
+    variant?: AccordionVariant;
+    /** Trigger size (font + padding). Defaults to `'md'`. */
+    size?: AccordionSize;
+    /**
+     * Gap between items → separated "card" look (each item gets its own border +
+     * radius; the outer container chrome is dropped). Omit for the joined default.
+     */
+    gap?: AccordionGap;
+    /** Which side the chevron indicator sits on. Defaults to `'right'`. */
+    indicatorSide?: AccordionIndicatorSide;
+    /**
+     * Whether `Accordion.Trigger` `actions` stay visible when the item is collapsed.
+     * Defaults to `'show'`; `'hide'` fades them out (and drops them from focus order)
+     * while closed.
+     */
+    actionsWhenClosed?: AccordionActionsWhenClosed;
+    children: ReactNode;
+}
+/** Root props — `type='single'` variant. */
+interface AccordionSingleProps {
+    type: 'single';
+    /** Controlled open item value. `''` = nothing open (only meaningful when `collapsible`). */
+    value?: string;
+    /** Initial open item for uncontrolled use. */
+    defaultValue?: string;
+    /** Fires when the open item changes. */
+    onValueChange?: (next: string) => void;
+    /**
+     * When true, clicking the currently-open item closes it. Default: `false`
+     * (matches Radix; prevents accidentally closing the only available content).
+     */
+    collapsible?: boolean;
+}
+/** Root props — `type='multiple'` variant. */
+interface AccordionMultipleProps {
+    type: 'multiple';
+    /** Controlled open items array. */
+    value?: string[];
+    /** Initial open items for uncontrolled use. */
+    defaultValue?: string[];
+    /** Fires when the set of open items changes. */
+    onValueChange?: (next: string[]) => void;
+    collapsible?: never;
+}
+/** Discriminated union — `type` drives which variant of value/onValueChange is required. */
+export type AccordionProps = AccordionBaseProps & (AccordionSingleProps | AccordionMultipleProps);
+/**
+ * Compound export.
+ * @see docs/components/Accordion.md
+ */
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<import("./AccordionItem.js").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./AccordionTrigger.js").AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("./AccordionContent.js").AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,111 @@
+'use client';
+import { AccordionContext } from "./context.js";
+import { AccordionItem } from "./AccordionItem.js";
+import { AccordionTrigger } from "./AccordionTrigger.js";
+import { AccordionContent } from "./AccordionContent.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Accordion/Accordion.tsx
+/**
+* Vertically-stacked collapsible panels. Compound component with `Item`, `Trigger` and `Content`.
+* @see docs/components/Accordion.md
+*/
+var AccordionRoot = forwardRef(function AccordionRoot(props, ref) {
+	if (props.type === "single") return /* @__PURE__ */ jsx(AccordionSingleImpl, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(AccordionMultipleImpl, {
+		...props,
+		ref
+	});
+});
+var AccordionSingleImpl = forwardRef(function AccordionSingleImpl({ type: _type, value, defaultValue, onValueChange, collapsible = false, variant = "bordered", size = "md", gap, indicatorSide = "right", actionsWhenClosed = "show", children, className, ...rest }, ref) {
+	const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	const isOpen = useCallback((itemValue) => currentValue === itemValue, [currentValue]);
+	const toggle = useCallback((itemValue) => {
+		if (currentValue === itemValue) {
+			if (collapsible) {
+				if (!isControlled) setInternalValue("");
+				onValueChange?.("");
+			}
+		} else {
+			if (!isControlled) setInternalValue(itemValue);
+			onValueChange?.(itemValue);
+		}
+	}, [
+		currentValue,
+		collapsible,
+		isControlled,
+		onValueChange
+	]);
+	const ctx = useMemo(() => ({
+		mode: "single",
+		isOpen,
+		toggle
+	}), [isOpen, toggle]);
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...rest,
+			"data-accordion": "",
+			"data-variant": variant,
+			"data-size": size,
+			"data-gap": gap,
+			"data-indicator-side": indicatorSide,
+			"data-actions-when-closed": actionsWhenClosed,
+			className: clsx(Accordion_module_default.accordion, className),
+			children
+		})
+	});
+});
+var AccordionMultipleImpl = forwardRef(function AccordionMultipleImpl({ type: _type, value, defaultValue, onValueChange, variant = "bordered", size = "md", gap, indicatorSide = "right", actionsWhenClosed = "show", children, className, ...rest }, ref) {
+	const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	const isOpen = useCallback((itemValue) => currentValue.includes(itemValue), [currentValue]);
+	const toggle = useCallback((itemValue) => {
+		const next = currentValue.includes(itemValue) ? currentValue.filter((v) => v !== itemValue) : [...currentValue, itemValue];
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}, [
+		currentValue,
+		isControlled,
+		onValueChange
+	]);
+	const ctx = useMemo(() => ({
+		mode: "multiple",
+		isOpen,
+		toggle
+	}), [isOpen, toggle]);
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...rest,
+			"data-accordion": "",
+			"data-variant": variant,
+			"data-size": size,
+			"data-gap": gap,
+			"data-indicator-side": indicatorSide,
+			"data-actions-when-closed": actionsWhenClosed,
+			className: clsx(Accordion_module_default.accordion, className),
+			children
+		})
+	});
+});
+/**
+* Compound export.
+* @see docs/components/Accordion.md
+*/
+var Accordion = Object.assign(AccordionRoot, {
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+	Content: AccordionContent
+});
+export { Accordion };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,29 @@
+import "./Accordion.css";
+// src/components/Accordion/Accordion.module.scss
+var accordion = "Accordion__accordion__i8VI0";
+var item = "Accordion__item__NC9-Z";
+var header = "Accordion__header__LZ7RX";
+var heading = "Accordion__heading__5-Kv1";
+var trigger = "Accordion__trigger__3TPPQ";
+var label = "Accordion__label__t8wHJ";
+var indicatorSlot = "Accordion__indicatorSlot__gaR1F";
+var indicator = "Accordion__indicator__e6Tkj";
+var actions = "Accordion__actions__t1NVD";
+var content = "Accordion__content__u4fJk";
+var inner = "Accordion__inner__7afla";
+var body = "Accordion__body__ZpJ59";
+var Accordion_module_default = {
+	accordion,
+	item,
+	header,
+	heading,
+	trigger,
+	label,
+	indicatorSlot,
+	indicator,
+	actions,
+	content,
+	inner,
+	body
+};
+export { accordion, actions, body, content, Accordion_module_default as default, header, heading, indicator, indicatorSlot, inner, item, label, trigger };

package/dist/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Collapsible region announced via `role="region"` + `aria-labelledby` pointing at the trigger.
+ * @see docs/components/Accordion.md
+ */
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionContent.js

@@ -0,0 +1,31 @@
+'use client';
+import { useAccordionItemContext } from "./context.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Accordion/AccordionContent.tsx
+/**
+* Collapsible region announced via `role="region"` + `aria-labelledby` pointing at the trigger.
+* @see docs/components/Accordion.md
+*/
+var AccordionContent = forwardRef(function AccordionContent({ children, className, ...props }, ref) {
+	const { isOpen, triggerId, contentId } = useAccordionItemContext("Content");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		id: contentId,
+		role: "region",
+		"aria-labelledby": triggerId,
+		"data-state": isOpen ? "open" : "closed",
+		className: clsx(Accordion_module_default.content, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: Accordion_module_default.inner,
+			children: /* @__PURE__ */ jsx("div", {
+				className: Accordion_module_default.body,
+				children
+			})
+		})
+	});
+});
+export { AccordionContent };

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { AccordionHeaderLevel } from './Accordion.js';
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value'> {
+    /** Unique value used to identify the item in the root's `value`/`onValueChange`. */
+    value: string;
+    /** When true, the trigger is non-interactive and keyboard nav skips this item. */
+    disabled?: boolean;
+    /**
+     * Heading level wrapping the trigger. WAI-ARIA APG requires triggers to live
+     * inside a heading element. Defaults to `'h3'`.
+     */
+    headerLevel?: AccordionHeaderLevel;
+    children: ReactNode;
+}
+/**
+ * Item wrapper providing the item context to its Trigger and Content.
+ * @see docs/components/Accordion.md
+ */
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionItem.js

@@ -0,0 +1,45 @@
+'use client';
+import { AccordionItemContext, useAccordionContext } from "./context.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { forwardRef, useId, useMemo } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Accordion/AccordionItem.tsx
+/**
+* Item wrapper providing the item context to its Trigger and Content.
+* @see docs/components/Accordion.md
+*/
+var AccordionItem = forwardRef(function AccordionItem({ value, disabled = false, headerLevel = "h3", children, className, ...props }, ref) {
+	const { isOpen } = useAccordionContext("Item");
+	const open = isOpen(value);
+	const reactId = useId();
+	const triggerId = `accordion-trigger-${reactId}`;
+	const contentId = `accordion-content-${reactId}`;
+	const ctx = useMemo(() => ({
+		value,
+		disabled,
+		isOpen: open,
+		triggerId,
+		contentId,
+		headerLevel
+	}), [
+		value,
+		disabled,
+		open,
+		triggerId,
+		contentId,
+		headerLevel
+	]);
+	return /* @__PURE__ */ jsx(AccordionItemContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...props,
+			"data-state": open ? "open" : "closed",
+			"data-disabled": disabled ? "true" : void 0,
+			className: clsx(Accordion_module_default.item, className),
+			children
+		})
+	});
+});
+export { AccordionItem };

package/dist/components/Accordion/AccordionTrigger.d.ts

@@ -0,0 +1,21 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface AccordionTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Override the default trigger indicator icon (rotates 180° when open).
+     * Pass `null` to suppress the icon entirely. Default: `<ChevronDown />`.
+     */
+    icon?: ReactNode | null;
+    /**
+     * Controls rendered at the **right of the header**, OUTSIDE the toggle button —
+     * so their buttons/menus are clickable without toggling the section, and the
+     * heading's accessible name stays just the title. Keep it to a few small
+     * controls (`<Button iconOnly>`, a `<DropdownMenu>` trigger, a `<Switch>`).
+     */
+    actions?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Heading-wrapped button that toggles the parent Item.
+ * @see docs/components/Accordion.md
+ */
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Accordion/AccordionTrigger.js

@@ -0,0 +1,74 @@
+'use client';
+import { useAccordionContext, useAccordionItemContext } from "./context.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+// src/components/Accordion/AccordionTrigger.tsx
+/**
+* Heading-wrapped button that toggles the parent Item.
+* @see docs/components/Accordion.md
+*/
+var AccordionTrigger = forwardRef(function AccordionTrigger({ icon, actions, children, className, onKeyDown, ...props }, ref) {
+	const { toggle } = useAccordionContext("Trigger");
+	const { value, disabled, isOpen, triggerId, contentId, headerLevel } = useAccordionItemContext("Trigger");
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		const root = e.currentTarget.closest("[data-accordion]");
+		if (!root) return;
+		const triggers = Array.from(root.querySelectorAll("button[data-accordion-trigger]:not(:disabled)")).filter((btn) => btn.closest("[data-accordion]") === root);
+		if (triggers.length === 0) return;
+		const current = triggers.indexOf(e.currentTarget);
+		let next = current;
+		if (e.key === "ArrowDown") next = (current + 1) % triggers.length;
+		else if (e.key === "ArrowUp") next = (current - 1 + triggers.length) % triggers.length;
+		else if (e.key === "Home") next = 0;
+		else if (e.key === "End") next = triggers.length - 1;
+		triggers[next]?.focus();
+	};
+	const renderedIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsx(ChevronDown, {
+		size: 16,
+		"aria-hidden": "true",
+		className: Accordion_module_default.indicator
+	});
+	const Heading = headerLevel;
+	return /* @__PURE__ */ jsxs("div", {
+		className: Accordion_module_default.header,
+		children: [/* @__PURE__ */ jsx(Heading, {
+			className: Accordion_module_default.heading,
+			children: /* @__PURE__ */ jsxs("button", {
+				...props,
+				ref,
+				type: "button",
+				id: triggerId,
+				"data-accordion-trigger": "",
+				"aria-expanded": isOpen,
+				"aria-controls": contentId,
+				disabled,
+				onClick: () => toggle(value),
+				onKeyDown: handleKeyDown,
+				className: clsx(Accordion_module_default.trigger, className),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: Accordion_module_default.label,
+					children
+				}), renderedIcon !== null && /* @__PURE__ */ jsx("span", {
+					className: Accordion_module_default.indicatorSlot,
+					children: renderedIcon
+				})]
+			})
+		}), actions != null && /* @__PURE__ */ jsx("div", {
+			className: Accordion_module_default.actions,
+			children: actions
+		})]
+	});
+});
+export { AccordionTrigger };

package/dist/components/Accordion/context.d.ts

@@ -0,0 +1,28 @@
+export interface AccordionContextValue {
+    /** Selection mode. */
+    mode: 'single' | 'multiple';
+    /** Whether the given item value is currently open. */
+    isOpen: (value: string) => boolean;
+    /** Toggle the given item value. Closes others in single mode; flips membership in multiple mode. */
+    toggle: (value: string) => void;
+}
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;
+/**
+ * Hook for child components to read the root context. Throws if used outside
+ * an `<Accordion>` — surfaces the bug early instead of silently no-op'ing.
+ */
+export declare function useAccordionContext(componentName: string): AccordionContextValue;
+export interface AccordionItemContextValue {
+    /** This item's unique value. */
+    value: string;
+    /** Whether the item is disabled (Trigger non-interactive, keyboard nav skips). */
+    disabled: boolean;
+    /** Whether the item is currently open (mirrored from root context for convenience). */
+    isOpen: boolean;
+    /** Stable id for the Trigger (so Content's aria-labelledby points at it). */
+    triggerId: string;
+    /** Stable id for the Content (so Trigger's aria-controls points at it). */
+    contentId: string;
+}
+export declare const AccordionItemContext: import("react").Context<AccordionItemContextValue | null>;
+export declare function useAccordionItemContext(componentName: string): AccordionItemContextValue;

package/dist/components/Accordion/context.js

@@ -0,0 +1,20 @@
+'use client';
+import { createContext, useContext } from "react";
+// src/components/Accordion/context.ts
+var AccordionContext = createContext(null);
+/**
+* Hook for child components to read the root context. Throws if used outside
+* an `<Accordion>` — surfaces the bug early instead of silently no-op'ing.
+*/
+function useAccordionContext(componentName) {
+	const ctx = useContext(AccordionContext);
+	if (ctx === null) throw new Error(`<Accordion.${componentName}> must be used inside <Accordion>`);
+	return ctx;
+}
+var AccordionItemContext = createContext(null);
+function useAccordionItemContext(componentName) {
+	const ctx = useContext(AccordionItemContext);
+	if (ctx === null) throw new Error(`<Accordion.${componentName}> must be used inside <Accordion.Item>`);
+	return ctx;
+}
+export { AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItemContext };

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

@@ -0,0 +1,5 @@
+export { Accordion } from './Accordion.js';
+export type { AccordionProps, AccordionMode, AccordionHeaderLevel, AccordionVariant, AccordionSize, AccordionGap, AccordionIndicatorSide, AccordionActionsWhenClosed, } from './Accordion.js';
+export type { AccordionItemProps } from './AccordionItem.js';
+export type { AccordionTriggerProps } from './AccordionTrigger.js';
+export type { AccordionContentProps } from './AccordionContent.js';

package/dist/components/Alert/Alert.css

@@ -0,0 +1,116 @@
+:root {
+  --alert-bg: var(--color-bg);
+  --alert-fg: var(--color-fg);
+  --alert-border-color: var(--color-fg-muted);
+  --alert-border-width: var(--border-width-strong);
+  --alert-radius: var(--radius-md);
+  --alert-padding-y: var(--space-3);
+  --alert-padding-x: var(--space-4);
+  --alert-gap: var(--space-3);
+  --alert-icon: var(--color-fg-muted);
+  --alert-title-fg: var(--color-fg);
+  --alert-title-font-size: var(--font-size-md);
+  --alert-title-font-weight: var(--font-weight-medium);
+  --alert-icon-row-height: calc(var(--alert-title-font-size) * 1.4);
+  --alert-description-fg: var(--color-fg-muted);
+  --alert-description-font-size: var(--font-size-sm);
+  --alert-title-description-gap: var(--space-1);
+  --alert-actions-gap: var(--space-2);
+  --alert-bg-info: var(--color-info-bg-subtle);
+  --alert-fg-info: var(--color-fg);
+  --alert-icon-info: var(--color-info);
+  --alert-border-color-info: var(--color-info);
+  --alert-bg-success: var(--color-success-bg-subtle);
+  --alert-fg-success: var(--color-fg);
+  --alert-icon-success: var(--color-success);
+  --alert-border-color-success: var(--color-success);
+  --alert-bg-warning: var(--color-warning-bg-subtle);
+  --alert-fg-warning: var(--color-fg);
+  --alert-icon-warning: var(--color-warning-strong);
+  --alert-border-color-warning: var(--color-warning-strong);
+  --alert-bg-danger: var(--color-danger-bg-subtle);
+  --alert-fg-danger: var(--color-fg);
+  --alert-icon-danger: var(--color-danger);
+  --alert-border-color-danger: var(--color-danger);
+}
+
+.Alert__alert__cp3nH {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--alert-gap);
+  align-items: start;
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  background: var(--alert-bg);
+  border-radius: var(--alert-radius);
+  border-left: var(--alert-border-width) solid var(--alert-border-color);
+  color: var(--alert-fg);
+}
+
+.Alert__alert__cp3nH[data-tone=info] {
+  background: var(--alert-bg-info);
+  border-left-color: var(--alert-border-color-info);
+}
+
+.Alert__alert__cp3nH[data-tone=success] {
+  background: var(--alert-bg-success);
+  border-left-color: var(--alert-border-color-success);
+}
+
+.Alert__alert__cp3nH[data-tone=warning] {
+  background: var(--alert-bg-warning);
+  border-left-color: var(--alert-border-color-warning);
+}
+
+.Alert__alert__cp3nH[data-tone=error] {
+  background: var(--alert-bg-danger);
+  border-left-color: var(--alert-border-color-danger);
+}
+
+.Alert__icon__-USyE {
+  display: grid;
+  place-items: center;
+  min-height: var(--alert-icon-row-height);
+  color: var(--alert-icon);
+}
+
+.Alert__alert__cp3nH[data-tone=info] .Alert__icon__-USyE {
+  color: var(--alert-icon-info);
+}
+
+.Alert__alert__cp3nH[data-tone=success] .Alert__icon__-USyE {
+  color: var(--alert-icon-success);
+}
+
+.Alert__alert__cp3nH[data-tone=warning] .Alert__icon__-USyE {
+  color: var(--alert-icon-warning);
+}
+
+.Alert__alert__cp3nH[data-tone=error] .Alert__icon__-USyE {
+  color: var(--alert-icon-danger);
+}
+
+.Alert__body__iYcc7 {
+  min-width: 0;
+}
+
+.Alert__title__KgaC4 {
+  display: block;
+  font-size: var(--alert-title-font-size);
+  font-weight: var(--alert-title-font-weight);
+  line-height: 1.4;
+  color: var(--alert-title-fg);
+}
+
+.Alert__description__RN11i {
+  font-size: var(--alert-description-font-size);
+  color: var(--alert-description-fg);
+  line-height: 1.5;
+}
+
+.Alert__title__KgaC4 + .Alert__description__RN11i {
+  margin-top: var(--alert-title-description-gap);
+}
+
+.Alert__actions__TP4gz {
+  margin-top: var(--alert-actions-gap);
+}