@reltio/design 0.0.3 → 0.1.0

package/components/Markdown/Markdown.types.js

@@ -0,0 +1 @@
+export {};

package/components/Markdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Markdown";
+export type * from "./Markdown.types";

package/components/Markdown/index.js

@@ -0,0 +1 @@
+export * from "./Markdown";

package/components/Markdown/markdownOverrides.d.ts

@@ -0,0 +1,19 @@
+import type { MarkdownToJSX } from "markdown-to-jsx";
+import type React from "react";
+type OverrideProps<T extends keyof React.JSX.IntrinsicElements> = React.ComponentPropsWithoutRef<T> & {
+    node?: unknown;
+};
+/**
+ * Markdown tag overrides — only elements that require React component
+ * replacement or extra attributes/logic. Standard HTML elements are
+ * styled via `.root` descendant selectors in Markdown.module.css.
+ */
+export declare const baseOverrides: {
+    a: ({ node: _node, href, ...props }: OverrideProps<"a">) => import("react/jsx-runtime").JSX.Element;
+    table: ({ node: _node, ...props }: OverrideProps<"table">) => import("react/jsx-runtime").JSX.Element;
+    button: ({ node: _node, ...props }: OverrideProps<"button">) => import("react/jsx-runtime").JSX.Element;
+    details: ({ node: _node, ...props }: OverrideProps<"details">) => import("react/jsx-runtime").JSX.Element;
+    li: ({ node: _node, children, ...props }: OverrideProps<"li">) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const allowedOverrides: MarkdownToJSX.Overrides;
+export {};

package/components/Markdown/markdownOverrides.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { Button } from "../../components/Button";
+import { Details } from "../../components/Details";
+import { classNames } from "../../utils/classNames";
+import styles from "./Markdown.module.css";
+/**
+ * Markdown tag overrides — only elements that require React component
+ * replacement or extra attributes/logic. Standard HTML elements are
+ * styled via `.root` descendant selectors in Markdown.module.css.
+ */
+export const baseOverrides = {
+    // Links — external detection, target/rel attributes
+    a: ({ node: _node, href, ...props }) => {
+        const isExternal = href && (href.startsWith("http") || href.startsWith("//"));
+        return (_jsx("a", { ...props, href: href, target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined }));
+    },
+    // Tables — wrapped in a div for overflow scrolling
+    table: ({ node: _node, ...props }) => (_jsx("div", { className: classNames(styles.tableWrapper), children: _jsx("table", { ...props }) })),
+    // Button — replaced with design system Button component
+    button: ({ node: _node, ...props }) => (_jsx(Button, { ...props, className: classNames(props.className) })),
+    // Details/Summary — replaced with Details component
+    details: ({ node: _node, ...props }) => (_jsx(Details, { ...props, children: props.children })),
+    // Task list items — wrap checkbox + text in <label> for accessibility
+    li: ({ node: _node, children, ...props }) => {
+        const childArray = Children.toArray(children);
+        const firstChild = childArray[0];
+        const isTaskItem = isValidElement(firstChild) &&
+            firstChild.props?.type === "checkbox";
+        if (isTaskItem) {
+            return (_jsx("li", { ...props, children: _jsx("label", { children: children }) }));
+        }
+        return _jsx("li", { ...props, children: children });
+    },
+};
+export const allowedOverrides = { Button };

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonProps } from "./Skeleton.types";
+/**
+ * Displays a configurable number of rectangular placeholder bars with a shimmer
+ * (moving gradient) animation. Used as a loading placeholder to reserve space
+ * and indicate that content is loading. Full width by default.
+ */
+export declare const Skeleton: ({ rows, className, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utils/classNames";
+import styles from "./Skeleton.module.css";
+const DEFAULT_LABEL = "Loading content";
+const DEFAULT_ROWS = 3;
+/**
+ * Displays a configurable number of rectangular placeholder bars with a shimmer
+ * (moving gradient) animation. Used as a loading placeholder to reserve space
+ * and indicate that content is loading. Full width by default.
+ */
+export const Skeleton = ({ rows = DEFAULT_ROWS, className, ...rest }) => {
+    const rowCount = Math.max(1, Math.floor(Number(rows)) || DEFAULT_ROWS);
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
+    _jsx("div", { className: classNames(styles.skeletonRoot, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: Array.from({ length: rowCount }, (_, i) => (_jsx("div", { className: styles.row, "aria-hidden": "true" }, i))) }));
+};

package/components/Skeleton/Skeleton.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Skeleton.module.css.json';
+export default json;

package/components/Skeleton/Skeleton.module.css.js

@@ -0,0 +1,73 @@
+import styleInject from 'style-inject';
+import json from './Skeleton.module.css.json';
+styleInject(`
+._skeletonRoot_1e8wa_1 {
+	--reltio-skeleton-row-height: 16px;
+	--reltio-skeleton-row-gap: 12px;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: var(--reltio-skeleton-row-gap, 12px);
+}
+
+._row_1e8wa_10 {
+	width: 100%;
+	height: var(--reltio-skeleton-row-height, 16px);
+	background-color: #f5f5fa;
+	overflow: hidden;
+	position: relative;
+}
+
+._row_1e8wa_10::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background-color: #9898b34d;
+	animation: _indeterminate1_1e8wa_1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+		infinite;
+}
+
+._row_1e8wa_10::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background-color: #9898b34d;
+	animation: _indeterminate2_1e8wa_1 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+	animation-delay: 1.15s;
+}
+
+@keyframes _indeterminate1_1e8wa_1 {
+	0% {
+		left: -35%;
+		right: 100%;
+	}
+	60% {
+		left: 100%;
+		right: -90%;
+	}
+	100% {
+		left: 100%;
+		right: -90%;
+	}
+}
+
+@keyframes _indeterminate2_1e8wa_1 {
+	0% {
+		left: -200%;
+		right: 100%;
+	}
+	60% {
+		left: 107%;
+		right: -8%;
+	}
+	100% {
+		left: 107%;
+		right: -8%;
+	}
+}
+`);
+export default json;

package/components/Skeleton/Skeleton.module.css.json

@@ -0,0 +1 @@
+{ "skeletonRoot": "_skeletonRoot_1e8wa_1", "row": "_row_1e8wa_10", "indeterminate1": "_indeterminate1_1e8wa_1", "indeterminate2": "_indeterminate2_1e8wa_1" }

package/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,31 @@
+import type React from "react";
+/**
+ * Props for the Skeleton component
+ */
+export type SkeletonProps = {
+    /**
+     * Number of rectangular placeholder bars to display
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Size (number) passed to styles; affects line height and line gap of placeholder bars (e.g. pixels).
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Accessible label for screen readers. When not provided, a default label is used.
+     */
+    label?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline styles (e.g. for CSS variable overrides)
+     */
+    style?: React.CSSProperties & {
+        "--reltio-skeleton-row-height"?: string;
+        "--reltio-skeleton-row-gap"?: string;
+    };
+} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;

package/components/Skeleton/Skeleton.types.js

@@ -0,0 +1 @@
+export {};

package/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Skeleton";
+export type * from "./Skeleton.types";

package/components/Skeleton/index.js

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/components/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+export declare const TextArea: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    error?: boolean;
+    supportingText?: string;
+    toolbar?: import("react").ReactNode;
+    style?: import("react").CSSProperties & {
+        "--reltio-textarea-font-family"?: string;
+        "--reltio-textarea-font-size"?: string;
+        "--reltio-textarea-line-height"?: string;
+        "--reltio-textarea-color-text"?: string;
+        "--reltio-textarea-color-border"?: string;
+        "--reltio-textarea-color-border-focus"?: string;
+        "--reltio-textarea-color-background"?: string;
+        "--reltio-textarea-color-error"?: string;
+        "--reltio-textarea-color-label"?: string;
+        "--reltio-textarea-color-supporting-text"?: string;
+        "--reltio-textarea-border-radius"?: string;
+        "--reltio-textarea-padding"?: string;
+        "--reltio-textarea-min-height"?: string;
+        "--reltio-textarea-max-height"?: string;
+    };
+} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/components/TextArea/TextArea.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./TextArea.module.css";
+export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, id: providedId, ...rest }, ref) => {
+    const generatedId = useId();
+    const textareaId = providedId || generatedId;
+    const supportingTextId = `${textareaId}-supporting`;
+    const hasValue = String(rest.value ?? rest.defaultValue ?? "").length > 0;
+    return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { htmlFor: textareaId, className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, id: textareaId, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, "aria-describedby": supportingText ? supportingTextId : undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { id: supportingTextId, className: classNames(styles.supportingText), children: supportingText }))] }));
+});
+TextArea.displayName = "TextArea";

package/components/TextArea/TextArea.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './TextArea.module.css.json';
+export default json;

package/components/TextArea/TextArea.module.css.js

@@ -0,0 +1,159 @@
+import styleInject from 'style-inject';
+import json from './TextArea.module.css.json';
+styleInject(`
+._root_1k56p_1 {
+	--reltio-textarea-font-family: var(
+		--reltio-font-family-body,
+		"Roboto",
+		sans-serif
+	);
+	--reltio-textarea-font-size: var(--reltio-font-size-body, 16px);
+	--reltio-textarea-line-height: var(--reltio-line-height-body, 1.5);
+	--reltio-textarea-color-text: var(--reltio-color-text, #1d1b20);
+	--reltio-textarea-color-border: var(--reltio-color-border, #79747e);
+	--reltio-textarea-color-border-focus: var(--reltio-color-primary, #6750a4);
+	--reltio-textarea-color-background: var(--reltio-color-background, #fff);
+	--reltio-textarea-color-error: var(--reltio-color-error, #b3261e);
+	--reltio-textarea-color-label: var(--reltio-color-text-secondary, #49454f);
+	--reltio-textarea-color-supporting-text: var(
+		--reltio-color-text-secondary,
+		#49454f
+	);
+	--reltio-textarea-border-radius: var(--reltio-spacing-xs, 4px);
+	--reltio-textarea-padding: var(--reltio-spacing-md, 16px);
+	--reltio-textarea-min-height: var(--reltio-spacing-3xl, 56px);
+	--reltio-textarea-max-height: min(500px, 50cqh);
+	--reltio-textarea-border-width: 1px;
+	--reltio-textarea-border-width-focus: 2px;
+
+	--_border-color: var(--reltio-textarea-color-border);
+	--_border-width: var(--reltio-textarea-border-width);
+	--_label-color: var(--reltio-textarea-color-label);
+	--_supporting-text-color: var(--reltio-textarea-color-supporting-text);
+
+	font-family: var(--reltio-textarea-font-family);
+	container-type: inline-size;
+}
+
+._root_1k56p_1:focus-within {
+	--_border-color: var(--reltio-textarea-color-border-focus);
+	--_border-width: var(--reltio-textarea-border-width-focus);
+	--_label-color: var(--reltio-textarea-color-border-focus);
+}
+
+._root_1k56p_1[data-error="true"] {
+	--_border-color: var(--reltio-textarea-color-error);
+	--_label-color: var(--reltio-textarea-color-error);
+	--_supporting-text-color: var(--reltio-textarea-color-error);
+}
+
+._root_1k56p_1[data-error="true"]:focus-within {
+	--_border-color: var(--reltio-textarea-color-error);
+	--_label-color: var(--reltio-textarea-color-error);
+}
+
+._root_1k56p_1[data-disabled="true"] {
+	opacity: 0.38;
+	cursor: not-allowed;
+}
+
+._inputContainer_1k56p_57 {
+	position: relative;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr auto;
+	grid-template-areas:
+		"textarea"
+		"toolbar";
+	margin: 0;
+	box-sizing: border-box;
+	border-radius: var(--reltio-textarea-border-radius);
+	outline: var(--_border-width) solid var(--_border-color);
+	cursor: text;
+	transition:
+		outline-color 0.1s ease,
+		outline-width 0.1s ease;
+	background: var(--reltio-textarea-color-background);
+}
+
+._root_1k56p_1[data-disabled="true"] ._inputContainer_1k56p_57 {
+	cursor: not-allowed;
+}
+
+._textarea_1k56p_80 {
+	grid-area: textarea;
+	position: relative;
+	display: block;
+	z-index: 1;
+	border: none;
+	outline: none;
+	background: none;
+	width: 100%;
+	min-height: var(--reltio-textarea-min-height);
+	max-height: var(--reltio-textarea-max-height);
+	border-radius: var(--reltio-textarea-border-radius);
+	box-sizing: border-box;
+	font-size: var(--reltio-textarea-font-size);
+	font-family: var(--reltio-textarea-font-family);
+	line-height: var(--reltio-textarea-line-height);
+	resize: none;
+	color: var(--reltio-textarea-color-text);
+	padding: var(--reltio-textarea-padding);
+	overflow-y: auto;
+	field-sizing: content;
+}
+
+._textarea_1k56p_80::placeholder {
+	color: var(--reltio-textarea-color-label);
+}
+
+._textarea_1k56p_80:disabled {
+	cursor: not-allowed;
+}
+
+._label_1k56p_111 {
+	position: absolute;
+	opacity: 0;
+	top: 16px;
+	left: 8px;
+	transform: translateY(-50%);
+	transition: all 0.2s ease;
+	background-color: var(--reltio-textarea-color-background);
+	padding: 4px 8px;
+	border-radius: var(--reltio-textarea-border-radius);
+	color: var(--_label-color);
+	z-index: 2;
+	font-size: var(--reltio-textarea-font-size);
+	font-family: var(--reltio-textarea-font-family);
+	pointer-events: none;
+}
+
+._textarea_1k56p_80:not(:placeholder-shown) + ._label_1k56p_111 {
+	top: -1px;
+	font-size: 12px;
+	opacity: 1;
+}
+
+._textarea_1k56p_80:focus + ._label_1k56p_111 {
+	top: -1px;
+	font-size: 12px;
+	opacity: 1;
+}
+
+._supportingText_1k56p_140 {
+	font-size: 12px;
+	padding: 4px var(--reltio-textarea-padding);
+	color: var(--_supporting-text-color);
+	font-family: var(--reltio-textarea-font-family);
+}
+
+._toolbar_1k56p_147 {
+	grid-area: toolbar;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	padding: 8px 12px;
+}
+`);
+export default json;

package/components/TextArea/TextArea.module.css.json

@@ -0,0 +1 @@
+{ "root": "_root_1k56p_1", "inputContainer": "_inputContainer_1k56p_57", "textarea": "_textarea_1k56p_80", "label": "_label_1k56p_111", "supportingText": "_supportingText_1k56p_140", "toolbar": "_toolbar_1k56p_147" }

package/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,39 @@
+import type React from "react";
+export type TextAreaProps = {
+    /**
+     * Floating label text displayed above the textarea
+     */
+    label?: string;
+    /**
+     * Whether the textarea is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the textarea
+     */
+    supportingText?: string;
+    /**
+     * Toolbar content rendered below the textarea input
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Custom styles including CSS custom properties for theming
+     */
+    style?: React.CSSProperties & {
+        "--reltio-textarea-font-family"?: string;
+        "--reltio-textarea-font-size"?: string;
+        "--reltio-textarea-line-height"?: string;
+        "--reltio-textarea-color-text"?: string;
+        "--reltio-textarea-color-border"?: string;
+        "--reltio-textarea-color-border-focus"?: string;
+        "--reltio-textarea-color-background"?: string;
+        "--reltio-textarea-color-error"?: string;
+        "--reltio-textarea-color-label"?: string;
+        "--reltio-textarea-color-supporting-text"?: string;
+        "--reltio-textarea-border-radius"?: string;
+        "--reltio-textarea-padding"?: string;
+        "--reltio-textarea-min-height"?: string;
+        "--reltio-textarea-max-height"?: string;
+    };
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style">;

package/components/TextArea/TextArea.types.js

@@ -0,0 +1 @@
+export {};

package/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+export type * from "./TextArea.types";

package/components/TextArea/index.js

@@ -0,0 +1 @@
+export * from "./TextArea";

package/components/TreeList/TreeList.types.d.ts

@@ -35,7 +35,7 @@ export type RcTreeNodeData<T> = {
  */
 export type TreeListProps = {
     /** Hierarchical data to render.
-     * `type TreeItem = {id: TreeKey; label: string; children?: TreeItem[]}` `type TreeKey = string | number`
+     * `type TreeItem = {id: TreeKey; label: string; children?: TreeItem[]; isLoading?: boolean}` `type TreeKey = string | number`
      * @example
      * [
      *   { id: "1", label: "Node 1", children: [

package/components/TreeList/components/TreeNode/TreeNode.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
+import { ArrowRight } from "../../../../icons/ArrowRight";
 import { classNames } from "../../../../utils/classNames";
-import { ChevronIcon } from "../ChevronIcon";
 import { TreeLevelLines } from "../TreeLevelLines/TreeLevelLines";
 import styles from "./TreeNode.module.css";
 export const TreeNode = memo(({ id, node, depth, isLeaf, isExpanded, levelLines, isLast, onToggle, LabelComponent, }) => {
@@ -9,6 +9,6 @@ export const TreeNode = memo(({ id, node, depth, isLeaf, isExpanded, levelLines,
         event.stopPropagation();
         onToggle(id, isExpanded, node);
     }, [onToggle, id, isExpanded, node]);
-    return (_jsxs("div", { className: classNames(styles.wrapper), "data-depth": depth, children: [_jsx(TreeLevelLines, { levelLines: levelLines, isLast: isLast }), _jsx("span", { className: classNames(styles.indent), style: { ["--depth"]: `${depth}` } }), isLeaf ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true" })) : node.isLoading ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true", children: _jsx("span", { className: classNames(styles.spinner) }) })) : (_jsx("button", { type: "button", className: classNames(styles.toggle), "aria-label": isExpanded ? "Collapse" : "Expand", onClick: handleToggleClick, children: _jsx(ChevronIcon, { expanded: isExpanded }) })), LabelComponent ? _jsx(LabelComponent, { data: node }) : node.label] }));
+    return (_jsxs("div", { className: classNames(styles.wrapper), "data-depth": depth, children: [_jsx(TreeLevelLines, { levelLines: levelLines, isLast: isLast }), _jsx("span", { className: classNames(styles.indent), style: { ["--depth"]: `${depth}` } }), isLeaf ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true" })) : node.isLoading ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true", children: _jsx("span", { className: classNames(styles.spinner) }) })) : (_jsx("button", { type: "button", className: classNames(styles.toggle), "aria-label": isExpanded ? "Collapse" : "Expand", onClick: handleToggleClick, children: _jsx(ArrowRight, { size: "small", className: classNames(styles.chevron, isExpanded && styles.expanded) }) })), LabelComponent ? _jsx(LabelComponent, { data: node }) : node.label] }));
 });
 TreeNode.displayName = "TreeNode";

package/components/TreeList/components/TreeNode/TreeNode.module.css.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 import json from './TreeNode.module.css.json';
 styleInject(`
-._wrapper_9wzlc_1 {
+._wrapper_xk2s6_1 {
 	display: flex;
 	align-items: center;
 	line-height: var(--reltio-tree-list-line-height, 1.5);
@@ -11,13 +11,13 @@ styleInject(`
 	z-index: 1;
 }
 
-._indent_9wzlc_11 {
+._indent_xk2s6_11 {
 	display: inline-block;
 	width: calc(var(--depth, 1) * var(--reltio-tree-list-indent-size, 16px));
 	flex: 0 0 auto;
 }
 
-._toggle_9wzlc_17 {
+._toggle_xk2s6_17 {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -29,7 +29,15 @@ styleInject(`
 	cursor: pointer;
 }
 
-._spinner_9wzlc_29 {
+._chevron_xk2s6_29 {
+	transition: transform 0.2s ease;
+}
+
+._expanded_xk2s6_33 {
+	transform: rotate(90deg);
+}
+
+._spinner_xk2s6_37 {
 	display: inline-block;
 	width: var(--reltio-tree-list-spinner-size, 10px);
 	height: var(--reltio-tree-list-spinner-size, 10px);
@@ -37,10 +45,10 @@ styleInject(`
 	border: var(--reltio-tree-list-spinner-width, 2px) solid
 		var(--reltio-tree-list-spinner-color, currentColor);
 	border-top-color: transparent;
-	animation: _spin_9wzlc_29 0.8s linear infinite;
+	animation: _spin_xk2s6_37 0.8s linear infinite;
 }
 
-@keyframes _spin_9wzlc_29 {
+@keyframes _spin_xk2s6_37 {
 	from {
 		transform: rotate(0deg);
 	}
@@ -49,13 +57,13 @@ styleInject(`
 	}
 }
 
-._actions_9wzlc_49 {
+._actions_xk2s6_57 {
 	margin-left: auto;
 	opacity: 0;
 	transition: opacity 0.12s ease;
 }
 
-._wrapper_9wzlc_1:hover ._actions_9wzlc_49 {
+._wrapper_xk2s6_1:hover ._actions_xk2s6_57 {
 	opacity: 1;
 }
 `);

package/components/TreeList/components/TreeNode/TreeNode.module.css.json

@@ -1 +1 @@
-{ "wrapper": "_wrapper_9wzlc_1", "indent": "_indent_9wzlc_11", "toggle": "_toggle_9wzlc_17", "spinner": "_spinner_9wzlc_29", "spin": "_spin_9wzlc_29", "actions": "_actions_9wzlc_49" }
+{ "wrapper": "_wrapper_xk2s6_1", "indent": "_indent_xk2s6_11", "toggle": "_toggle_xk2s6_17", "chevron": "_chevron_xk2s6_29", "expanded": "_expanded_xk2s6_33", "spinner": "_spinner_xk2s6_37", "spin": "_spin_xk2s6_37", "actions": "_actions_xk2s6_57" }

package/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./AssistantLoader";
+export * from "./Button";
+export * from "./Chat";
+export * from "./Details";
+export * from "./ErrorBoundary";
+export * from "./ErrorMessage";
+export * from "./Markdown";
+export * from "./Skeleton";
+export * from "./TextArea";
+export * from "./TreeList";

package/components/index.js

@@ -0,0 +1,10 @@
+export * from "./AssistantLoader";
+export * from "./Button";
+export * from "./Chat";
+export * from "./Details";
+export * from "./ErrorBoundary";
+export * from "./ErrorMessage";
+export * from "./Markdown";
+export * from "./Skeleton";
+export * from "./TextArea";
+export * from "./TreeList";

package/icons/AccountCircle.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./Icon.types";
+export declare const AccountCircle: ({ size, color, className, style, "aria-label": ariaLabel, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/icons/AccountCircle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../utils/classNames";
+import styles from "./Icon.module.css";
+export const AccountCircle = ({ size = "medium", color = "inherited", className, style, "aria-label": ariaLabel, }) => {
+    return (_jsx("svg", { className: classNames(styles.root, styles[size], styles[color], className), style: style, viewBox: "0 -960 960 960", "aria-hidden": !ariaLabel, "aria-label": ariaLabel, role: ariaLabel ? "img" : undefined, children: _jsx("path", { d: "M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" }) }));
+};

package/icons/Add.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./Icon.types";
+export declare const Add: ({ size, color, className, style, "aria-label": ariaLabel, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/icons/Add.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../utils/classNames";
+import styles from "./Icon.module.css";
+export const Add = ({ size = "medium", color = "inherited", className, style, "aria-label": ariaLabel, }) => {
+    return (_jsx("svg", { className: classNames(styles.root, styles[size], styles[color], className), style: style, viewBox: "0 -960 960 960", "aria-hidden": !ariaLabel, "aria-label": ariaLabel, role: ariaLabel ? "img" : undefined, children: _jsx("path", { d: "M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" }) }));
+};

package/icons/ArrowBack.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./Icon.types";
+export declare const ArrowBack: ({ size, color, className, style, "aria-label": ariaLabel, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/icons/ArrowBack.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../utils/classNames";
+import styles from "./Icon.module.css";
+export const ArrowBack = ({ size = "medium", color = "inherited", className, style, "aria-label": ariaLabel, }) => {
+    return (_jsx("svg", { className: classNames(styles.root, styles[size], styles[color], className), style: style, viewBox: "0 -960 960 960", "aria-hidden": !ariaLabel, "aria-label": ariaLabel, role: ariaLabel ? "img" : undefined, children: _jsx("path", { d: "m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" }) }));
+};

package/icons/ArrowDropDown.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./Icon.types";
+export declare const ArrowDropDown: ({ size, color, className, style, "aria-label": ariaLabel, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/icons/ArrowDropDown.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../utils/classNames";
+import styles from "./Icon.module.css";
+export const ArrowDropDown = ({ size = "medium", color = "inherited", className, style, "aria-label": ariaLabel, }) => {
+    return (_jsx("svg", { className: classNames(styles.root, styles[size], styles[color], className), style: style, viewBox: "0 -960 960 960", "aria-hidden": !ariaLabel, "aria-label": ariaLabel, role: ariaLabel ? "img" : undefined, children: _jsx("path", { d: "M480-360 280-560h400L480-360Z" }) }));
+};