@reltio/design 0.1.0 → 0.2.0

package/components/Button/Button.js

@@ -9,7 +9,7 @@ import styles from "./Button.module.css";
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
  */
-export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, onClick, href, type = "button", "aria-label": ariaLabel, ...rest }) => {
+export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, href, type = "button", ...rest }) => {
     const buttonRef = useRef(null);
     // Remove focus when button becomes disabled
     useEffect(() => {
@@ -19,53 +19,12 @@ export const Button = ({ variant = "filled", color = "inherited", size = "medium
             buttonRef.current.blur();
         }
     }, [disabled]);
-    // Determine if button is interactive
-    const isInteractive = !disabled;
-    // Handle click events
-    const handleClick = (event) => {
-        if (!isInteractive) {
-            event.preventDefault();
-            return;
-        }
-        // Prevent navigation for disabled anchors
-        if (href && disabled) {
-            event.preventDefault();
-            return;
-        }
-        onClick?.(event);
-    };
-    // Handle keyboard events (Enter and Space)
-    const handleKeyDown = (event) => {
-        if (!isInteractive) {
-            event.preventDefault();
-            return;
-        }
-        // Enter and Space activate button
-        if (event.key === "Enter" || event.key === " ") {
-            if (event.key === " ") {
-                event.preventDefault(); // Prevent page scroll
-            }
-            if (href) {
-                // For anchors, trigger click
-                buttonRef.current?.click();
-            }
-            else {
-                // For buttons, trigger onClick
-                onClick?.(event);
-            }
-        }
-    };
     // Compose className using classNames utility
     const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, className);
-    // ARIA attributes
-    const ariaAttributes = {
-        "aria-label": ariaLabel,
-        "aria-disabled": disabled ? true : undefined,
-    };
     // Render as anchor if href is provided
     if (href) {
-        return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+        return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, "aria-disabled": disabled ? true : undefined, ...rest, children: children }));
     }
     // Render as button
-    return (_jsx("button", { ref: buttonRef, type: type, disabled: disabled, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+    return (_jsx("button", { ref: buttonRef, type: type, disabled: disabled, className: composedClassName, ...rest, children: children }));
 };

package/components/Button/Button.module.css.js

@@ -1,193 +1,144 @@
 import styleInject from 'style-inject';
 import json from './Button.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root (Principle IX) */
-._root_1lt78_1 {
-	/* Font tokens */
-	--reltio-button-font-family: var(
-		--reltio-font-family-body,
-		"Roboto",
-		sans-serif
-	);
-	--reltio-button-font-size: var(--reltio-font-size-body, 16px);
-	--reltio-button-font-weight: var(--reltio-font-weight-body, 500);
-	--reltio-button-line-height: var(--reltio-line-height-body, 1.5);
-	--reltio-button-letter-spacing: var(--reltio-letter-spacing-body, 0.15px);
-
-	/* Color tokens */
-	--reltio-button-color-background: #f5f5fa;
-	--reltio-button-color-primary: var(--reltio-color-primary, #0000cc);
-	--reltio-button-color-primary-text: var(--reltio-color-on-primary, #ffffff);
-	--reltio-button-color-text: var(--reltio-color-text, #0e0e25);
-
-	/* Spacing tokens */
-	--reltio-button-padding-x-small: var(--reltio-spacing-sm, 16px);
-	--reltio-button-padding-y-small: var(--reltio-spacing-xs, 8px);
-	--reltio-button-padding-x-medium: var(--reltio-spacing-md, 20px);
-	--reltio-button-padding-y-medium: var(--reltio-spacing-sm, 12px);
-	--reltio-button-padding-x-large: var(--reltio-spacing-lg, 32px);
-	--reltio-button-padding-y-large: var(--reltio-spacing-md, 16px);
-	--reltio-button-gap-x: var(--reltio-spacing-xs, 8px);
-
-	/* Size tokens */
-	--reltio-button-height-small: var(--reltio-spacing-xl, 32px);
-	--reltio-button-height-medium: var(--reltio-spacing-2xl, 40px);
-	--reltio-button-height-large: var(--reltio-spacing-3xl, 48px);
-
-	/* Border and shape */
-	--reltio-button-border-radius: 9999px; /* Fully rounded corners (pill shape) - Material Design 3 */
-	--reltio-button-border-width: 0;
-
-	/* Transitions */
-	--reltio-button-transition-duration: 200ms;
-	--reltio-button-transition-timing: ease;
-
-	/* Disabled state */
-	--reltio-button-disabled-opacity: 0.38;
-	--reltio-button-disabled-cursor: not-allowed;
-
-	/* Base styles */
+.Button_root__L29wd {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	gap: var(--reltio-button-gap-x);
-	border: var(--reltio-button-border-width) solid transparent;
-	border-radius: var(--reltio-button-border-radius);
+	gap: 8px;
+	border: 0 solid transparent;
+	border-radius: 9999px;
 	cursor: pointer;
-	font-family: var(--reltio-button-font-family);
-	font-size: var(--reltio-button-font-size);
-	font-weight: var(--reltio-button-font-weight);
-	line-height: var(--reltio-button-line-height);
-	letter-spacing: var(--reltio-button-letter-spacing);
+	font-family: "Roboto", sans-serif;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 1.5;
+	letter-spacing: 0.15px;
 	text-align: center;
 	text-decoration: none;
 	white-space: nowrap;
 	user-select: none;
-	transition: all var(--reltio-button-transition-duration)
-		var(--reltio-button-transition-timing);
+	transition: all 200ms ease;
 	box-sizing: border-box;
-	/* Remove default button styles */
 	background: none;
 	margin: 0;
 	padding: 0;
 
-	/* Focus visible state */
 	&:focus-visible {
-		outline: 2px solid var(--reltio-button-color-primary);
+		outline: 2px solid var(--reltio-color-primary);
 		outline-offset: 2px;
 	}
 
-	/* Disabled state */
 	&:disabled,
 	&[aria-disabled="true"] {
-		opacity: var(--reltio-button-disabled-opacity);
-		cursor: var(--reltio-button-disabled-cursor);
+		opacity: 0.38;
+		cursor: not-allowed;
 		pointer-events: none;
 	}
 }
 
-/* Style: Filled - base structure */
-._filled_1lt78_87 {
+/* Style: Filled */
+.Button_filled__L29wd {
 	border: none;
 }
 
-/* Style: Outlined - base structure */
-._outlined_1lt78_92 {
+/* Style: Outlined */
+.Button_outlined__L29wd {
 	background-color: transparent;
 	border: 1px solid;
 }
 
-/* Style: Text - base structure */
-._text_1lt78_98 {
+/* Style: Text */
+.Button_text__L29wd {
 	background-color: transparent;
 	border: none;
 }
 
 /* Filled + Primary */
-._filled_1lt78_87._primary_1lt78_104 {
-	background-color: var(--reltio-button-color-primary);
-	color: #fff;
+.Button_filled__L29wd.Button_primary__L29wd {
+	background-color: var(--reltio-color-primary);
+	color: var(--reltio-color-text-forced-white);
 
 	&:hover {
-		background-color: #006;
+		background-color: var(--reltio-color-primary-hover);
 	}
 }
 
 /* Filled + Inherited */
-._filled_1lt78_87._inherited_1lt78_114 {
-	background-color: var(--reltio-button-color-background);
-	color: var(--reltio-button-color-text);
+.Button_filled__L29wd.Button_inherited__L29wd {
+	background-color: var(--reltio-color-surface-2);
+	color: var(--reltio-color-text);
+}
+
+[data-theme="dark"] .Button_filled__L29wd.Button_inherited__L29wd {
+	border: 1px solid var(--reltio-color-border-2);
 }
 
 /* Outlined + Primary */
-._outlined_1lt78_92._primary_1lt78_104 {
-	border-color: var(--reltio-button-color-primary);
-	color: var(--reltio-button-color-primary);
+.Button_outlined__L29wd.Button_primary__L29wd {
+	border-color: var(--reltio-color-primary);
+	color: var(--reltio-color-primary);
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Outlined + Inherited */
-._outlined_1lt78_92._inherited_1lt78_114 {
-	/* Border and text color inherit from parent */
+.Button_outlined__L29wd.Button_inherited__L29wd {
 	border-color: currentColor;
 	color: inherit;
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Text + Primary */
-._text_1lt78_98._primary_1lt78_104 {
-	color: var(--reltio-button-color-primary);
+.Button_text__L29wd.Button_primary__L29wd {
+	color: var(--reltio-color-primary);
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Text + Inherited */
-._text_1lt78_98._inherited_1lt78_114 {
+.Button_text__L29wd.Button_inherited__L29wd {
 	color: inherit;
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Size: Small */
-._small_1lt78_159 {
-	min-height: var(--reltio-button-height-small);
-	padding: var(--reltio-button-padding-y-small)
-		var(--reltio-button-padding-x-small);
+.Button_small__L29wd {
+	min-height: 32px;
+	padding: 8px 16px;
 	font-size: 0.875rem;
 }
 
 /* Size: Medium */
-._medium_1lt78_167 {
-	min-height: var(--reltio-button-height-medium);
-	padding: var(--reltio-button-padding-y-medium)
-		var(--reltio-button-padding-x-medium);
+.Button_medium__L29wd {
+	min-height: 40px;
+	padding: 12px 20px;
 }
 
 /* Size: Large */
-._large_1lt78_174 {
-	min-height: var(--reltio-button-height-large);
-	padding: var(--reltio-button-padding-y-large)
-		var(--reltio-button-padding-x-large);
+.Button_large__L29wd {
+	min-height: 48px;
+	padding: 16px 32px;
 }
 
 /* State: Disabled */
-._disabled_1lt78_181 {
-	opacity: var(--reltio-button-disabled-opacity);
-	cursor: var(--reltio-button-disabled-cursor);
+.Button_disabled__L29wd {
+	opacity: 0.38;
+	cursor: not-allowed;
 }
 
 /* Full Width */
-._fullWidth_1lt78_187 {
+.Button_fullWidth__L29wd {
 	width: 100%;
 }
 `);

package/components/Button/Button.module.css.json

@@ -1 +1 @@
-{ "root": "_root_1lt78_1", "filled": "_filled_1lt78_87", "outlined": "_outlined_1lt78_92", "text": "_text_1lt78_98", "primary": "_primary_1lt78_104", "inherited": "_inherited_1lt78_114", "small": "_small_1lt78_159", "medium": "_medium_1lt78_167", "large": "_large_1lt78_174", "disabled": "_disabled_1lt78_181", "fullWidth": "_fullWidth_1lt78_187" }
+{ "root": "Button_root__L29wd", "filled": "Button_filled__L29wd", "outlined": "Button_outlined__L29wd", "text": "Button_text__L29wd", "primary": "Button_primary__L29wd", "inherited": "Button_inherited__L29wd", "small": "Button_small__L29wd", "medium": "Button_medium__L29wd", "large": "Button_large__L29wd", "disabled": "Button_disabled__L29wd", "fullWidth": "Button_fullWidth__L29wd" }

package/components/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Visual variant for the button
  */
@@ -12,7 +12,7 @@ export type ButtonColor = "primary" | "inherited";
  */
 export type ButtonSize = "small" | "medium" | "large";
 /**
- * Base button props (without element-specific attributes)
+ * Base button props shared between button and anchor renderings
  */
 type BaseButtonProps = {
     /**
@@ -40,35 +40,11 @@ type BaseButtonProps = {
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * Button content (text, icons, etc.)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Additional CSS variables
-     */
-    style?: React.CSSProperties & {
-        "--reltio-button-color-background"?: string;
-        "--reltio-button-color-text"?: string;
-    };
-    /**
-     * Click event handler
-     */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Accessible label for screen readers
-     * Required if button has no visible text
-     */
-    "aria-label"?: string;
 };
 /**
  * Button props when rendered as button element (no href)
  */
-type ButtonElementProps = BaseButtonProps & {
+type ButtonElementProps = HtmlProps<"button", BaseButtonProps & {
     /**
      * If href is provided, component renders as anchor element
      * If href is not provided, component renders as button element
@@ -79,11 +55,11 @@ type ButtonElementProps = BaseButtonProps & {
      * @default "button"
      */
     type?: "button" | "submit" | "reset";
-};
+}>;
 /**
  * Anchor props when rendered as anchor element (with href)
  */
-type AnchorElementProps = BaseButtonProps & {
+type AnchorElementProps = HtmlProps<"a", BaseButtonProps & {
     /**
      * URL to navigate to (causes component to render as anchor)
      */
@@ -100,10 +76,10 @@ type AnchorElementProps = BaseButtonProps & {
      * Rel attribute for anchor (e.g., "noopener noreferrer")
      */
     rel?: string;
-};
+}>;
 /**
  * Union type for Button component props
  * Component can be either a button or an anchor based on href prop
  */
-export type ButtonProps = (ButtonElementProps | AnchorElementProps) & Omit<React.ComponentPropsWithoutRef<"button">, keyof ButtonElementProps> & Omit<React.ComponentPropsWithoutRef<"a">, keyof AnchorElementProps>;
+export type ButtonProps = ButtonElementProps | AnchorElementProps;
 export {};

package/components/Chat/Chat.js

@@ -70,8 +70,6 @@ export const Chat = ({ messages, thinking = false, initialLoading = false, class
         }
     }, [thinking, scrollToBottom]);
     const [topMessages, lastMessages] = useMemo(() => {
-        if (messages.length <= 2)
-            return [messages, []];
         const lastUserMessageIndex = messages.findLastIndex(isUserMessage);
         return [
             messages.slice(0, lastUserMessageIndex),
@@ -80,5 +78,5 @@ export const Chat = ({ messages, thinking = false, initialLoading = false, class
     }, [messages]);
     return (_jsxs("div", { ref: containerRef, className: classNames(styles.root, className), role: "log", "aria-live": "polite", "aria-label": "Chat messages", 
         // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region must be keyboard-focusable (WCAG 2.1.1)
-        tabIndex: 0, ...rest, children: [initialLoading ? (_jsx(Skeleton, { rows: 5 })) : (_jsxs(_Fragment, { children: [topMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), lastMessages.length > 0 && (_jsxs("div", { className: styles.lastMessageWrapper, children: [lastMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), thinking && _jsx(AssistantLoader, {})] }))] })), showScrollButton && (_jsx("button", { type: "button", className: classNames(styles.scrollToBottom), onClick: () => scrollToBottom("smooth"), "aria-label": "Scroll to bottom", children: _jsx(KeyboardArrowDown, { size: "small" }) }))] }));
+        tabIndex: 0, ...rest, children: [initialLoading ? (_jsx(Skeleton, { rows: 5 })) : (_jsxs(_Fragment, { children: [topMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), lastMessages.length > 0 && (_jsxs("div", { className: classNames(styles.lastMessageWrapper), children: [lastMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), thinking && _jsx(AssistantLoader, {})] }))] })), showScrollButton && (_jsx("button", { type: "button", className: classNames(styles.scrollToBottom), onClick: () => scrollToBottom("smooth"), "aria-label": "Scroll to bottom", children: _jsx(KeyboardArrowDown, { size: "small" }) }))] }));
 };

package/components/Chat/Chat.module.css.js

@@ -1,17 +1,7 @@
 import styleInject from 'style-inject';
 import json from './Chat.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root with --reltio-chat- prefix */
-._root_d5cr4_1 {
-	--reltio-chat-padding: 16px;
-	--reltio-chat-message-gap: 16px;
-	--reltio-chat-scroll-button-size: 36px;
-	--reltio-chat-scroll-button-bg: #ffffff;
-	--reltio-chat-scroll-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	--reltio-chat-scroll-button-color: #5f6368;
-	--reltio-chat-scroll-button-hover-bg: #f1f3f4;
-	--reltio-chat-scroll-button-bottom: 16px;
-
+.Chat_root__L29wd {
 	display: flex;
 	flex-direction: column;
 	position: relative;
@@ -20,57 +10,54 @@ styleInject(`
 	box-sizing: border-box;
 	overflow: auto;
 	align-items: start;
-	padding: var(--reltio-chat-padding);
-	gap: var(--reltio-chat-message-gap);
+	padding: 16px;
+	gap: 16px;
 }
 
-._userMessage_d5cr4_24 {
+.Chat_userMessage__L29wd {
 	margin-left: auto;
 	max-width: 80%;
 }
 
-._userMessageSkeletonWrapper_d5cr4_29 {
+.Chat_userMessageSkeletonWrapper__L29wd {
 	width: 40%;
 	margin-left: auto;
 }
 
-._scrollToBottom_d5cr4_34 {
+.Chat_scrollToBottom__L29wd {
 	position: sticky;
-	bottom: var(--reltio-chat-scroll-button-bottom, 16px);
+	bottom: 16px;
 	align-self: center;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: var(--reltio-chat-scroll-button-size, 36px);
-	height: var(--reltio-chat-scroll-button-size, 36px);
+	width: 36px;
+	height: 36px;
 	border-radius: 50%;
 	border: none;
-	background: var(--reltio-chat-scroll-button-bg, #ffffff);
-	box-shadow: var(
-		--reltio-chat-scroll-button-shadow,
-		0 2px 8px rgba(0, 0, 0, 0.15)
-	);
-	color: var(--reltio-chat-scroll-button-color, #5f6368);
+	background: var(--reltio-color-surface-1);
+	box-shadow: 0 2px 8px var(--reltio-color-shadow-2);
+	color: var(--reltio-color-text-secondary);
 	cursor: pointer;
 	transition: background 0.15s ease;
 	flex-shrink: 0;
 }
 
-._scrollToBottom_d5cr4_34:hover {
-	background: var(--reltio-chat-scroll-button-hover-bg);
+.Chat_scrollToBottom__L29wd:hover {
+	background: var(--reltio-color-surface-2);
 }
 
-._scrollToBottom_d5cr4_34:focus-visible {
-	outline: 2px solid #1a73e8;
+.Chat_scrollToBottom__L29wd:focus-visible {
+	outline: 2px solid var(--reltio-color-primary-transparent-focus);
 	outline-offset: 2px;
 }
 
-._lastMessageWrapper_d5cr4_65 {
+.Chat_lastMessageWrapper__L29wd {
 	display: flex;
 	flex-direction: column;
 	position: relative;
 	align-items: start;
-	gap: var(--reltio-chat-message-gap);
+	gap: 16px;
 	min-height: 100%;
 	width: 100%;
 }

package/components/Chat/Chat.module.css.json

@@ -1 +1 @@
-{ "root": "_root_d5cr4_1", "userMessage": "_userMessage_d5cr4_24", "userMessageSkeletonWrapper": "_userMessageSkeletonWrapper_d5cr4_29", "scrollToBottom": "_scrollToBottom_d5cr4_34", "lastMessageWrapper": "_lastMessageWrapper_d5cr4_65" }
+{ "root": "Chat_root__L29wd", "userMessage": "Chat_userMessage__L29wd", "userMessageSkeletonWrapper": "Chat_userMessageSkeletonWrapper__L29wd", "scrollToBottom": "Chat_scrollToBottom__L29wd", "lastMessageWrapper": "Chat_lastMessageWrapper__L29wd" }

package/components/Chat/Chat.types.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * User message payload for Chat. Renders via UserMessage component.
  */
@@ -31,7 +31,7 @@ export type Message = {
 /**
  * Props for the Chat component
  */
-export type ChatProps = {
+export type ChatProps = HtmlProps<"div", {
     /**
      * List of messages to display in order. Each message is rendered by type (user → UserMessage, assistant → AssistantMessage).
      */
@@ -47,12 +47,4 @@ export type ChatProps = {
      * @default false
      */
     initialLoading?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties;
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+}>;

package/components/Chat/components/AssistantMessage/AssistantMessage.d.ts

@@ -1,7 +1,6 @@
-import type React from "react";
 import type { AssistantMessageProps } from "./AssistantMessage.types";
 /**
  * Displays assistant-authored message content with Markdown and MDX support via the Markdown component.
  * When error is true, shows ErrorMessage and hides content.
  */
-export declare const AssistantMessage: ({ children, errorMessage, className, style, ...rest }: React.PropsWithChildren<AssistantMessageProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantMessage: ({ children, errorMessage, className, style, ...rest }: AssistantMessageProps) => import("react/jsx-runtime").JSX.Element;

package/components/Chat/components/AssistantMessage/AssistantMessage.module.css.js

@@ -1,26 +1,14 @@
 import styleInject from 'style-inject';
 import json from './AssistantMessage.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root with --reltio-assistant-message- prefix */
-._assistantMessageRoot_qtch8_2 {
-	--reltio-assistant-message-background: transparent;
-	--reltio-assistant-message-padding: 0;
-	--reltio-assistant-message-border-radius: 8px;
-	--reltio-assistant-message-content-color: #0e0e25;
-
+.AssistantMessage_assistantMessageRoot__L29wd {
 	display: flex;
 	flex-direction: column;
-	background-color: var(--reltio-assistant-message-background);
-	padding: var(--reltio-assistant-message-padding);
-	border-radius: var(--reltio-assistant-message-border-radius);
+	background-color: transparent;
+	padding: 0;
+	border-radius: 8px;
 	box-sizing: border-box;
 	width: 100%;
 }
-
-._content_qtch8_17 {
-	flex: 1;
-	min-width: 0;
-	color: var(--reltio-assistant-message-content-color);
-}
 `);
 export default json;

package/components/Chat/components/AssistantMessage/AssistantMessage.module.css.json

@@ -1 +1 @@
-{ "assistantMessageRoot": "_assistantMessageRoot_qtch8_2", "content": "_content_qtch8_17" }
+{ "assistantMessageRoot": "AssistantMessage_assistantMessageRoot__L29wd" }

package/components/Chat/components/AssistantMessage/AssistantMessage.types.d.ts

@@ -1,20 +1,13 @@
 import type React from "react";
+import type { HtmlProps } from "../../../../utils/types";
 /**
  * Props for the AssistantMessage component
  */
-export type AssistantMessageProps = {
+export type AssistantMessageProps = HtmlProps<"div", {
     /**
      * Error content: string is passed to ErrorMessage; custom ReactNode is rendered as is.
      */
     errorMessage?: React.ReactNode | null;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties;
     /** We expect assistant message source as a string */
     children: string;
-};
+}>;

package/components/Chat/components/UserMessage/UserMessage.module.css.js

@@ -1,11 +1,16 @@
 import styleInject from 'style-inject';
 import json from './UserMessage.module.css.json';
 styleInject(`
-._userMessageRoot_11l9d_1 {
+.UserMessage_userMessageRoot__L29wd {
 	display: inline-flex;
-	background-color: var(--reltio-user-message-background, #f5f5fa);
-	padding: var(--reltio-user-message-padding, 12px 16px);
-	border-radius: var(--reltio-user-message-border-radius, 12px);
+	background-color: var(--reltio-color-surface-2);
+	border: 1px solid transparent;
+	padding: 12px 16px;
+	border-radius: 12px;
+}
+
+[data-theme="dark"] .UserMessage_userMessageRoot__L29wd {
+	border-color: var(--reltio-color-border-2);
 }
 `);
 export default json;

package/components/Chat/components/UserMessage/UserMessage.module.css.json

@@ -1 +1 @@
-{ "userMessageRoot": "_userMessageRoot_11l9d_1" }
+{ "userMessageRoot": "UserMessage_userMessageRoot__L29wd" }

package/components/Chat/components/UserMessage/UserMessage.types.d.ts

@@ -1,16 +1,8 @@
-import type React from "react";
+import type { HtmlProps } from "../../../../utils/types";
 /**
  * Props for the UserMessage component
  */
-export type UserMessageProps = {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties;
+export type UserMessageProps = HtmlProps<"div", {
     /** We expect user message source as a string */
     children: string;
-};
+}>;

package/components/Details/Details.d.ts

@@ -4,4 +4,4 @@ import type { DetailsProps } from "./Details.types";
  * with improved visual design, accessibility, and consistent styling
  * aligned with the design system.
  */
-export declare const Details: ({ open: initialOpen, children, className, style, ...rest }: DetailsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Details: ({ open: initialOpen, children, className, ...rest }: DetailsProps) => import("react/jsx-runtime").JSX.Element;