@reltio/design 0.1.1 → 0.2.1

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;

package/components/Details/Details.js

@@ -10,13 +10,11 @@ import styles from "./Details.module.css";
  * with improved visual design, accessibility, and consistent styling
  * aligned with the design system.
  */
-export const Details = ({ open: initialOpen = false, children, className, style, ...rest }) => {
+export const Details = ({ open: initialOpen = false, children, className, ...rest }) => {
     const [isOpen, setIsOpen] = useState(initialOpen);
-    // Update internal state when open prop changes
     useEffect(() => {
         setIsOpen(initialOpen);
     }, [initialOpen]);
-    // Extract summary from children
     let summary = "Details";
     const contentChildren = [];
     React.Children.forEach(children, (child) => {
@@ -29,12 +27,9 @@ export const Details = ({ open: initialOpen = false, children, className, style,
             contentChildren.push(child);
         }
     });
-    // Handle toggle
     const handleToggle = (event) => {
         const detailsElement = event.currentTarget;
         setIsOpen(detailsElement.open);
     };
-    // Compose className using classNames utility
-    const composedClassName = classNames(styles.root, className);
-    return (_jsxs("details", { className: composedClassName, style: style, onToggle: handleToggle, open: initialOpen, ...rest, children: [_jsxs("summary", { className: styles.summary, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(CodeBrackets, { size: "small" }) }), _jsx("span", { className: styles.summaryText, children: summary }), _jsx("span", { className: classNames(styles.chevron, isOpen && styles.chevronOpen), children: isOpen ? (_jsx(ExpandLess, { size: "small", "aria-hidden": "true" })) : (_jsx(ExpandMore, { size: "small", "aria-hidden": "true" })) })] }), _jsx("div", { className: styles.content, children: contentChildren })] }));
+    return (_jsxs("details", { className: classNames(styles.root, className), onToggle: handleToggle, open: initialOpen, ...rest, children: [_jsxs("summary", { className: classNames(styles.summary), children: [_jsx("span", { className: classNames(styles.icon), "aria-hidden": "true", children: _jsx(CodeBrackets, { size: "small" }) }), _jsx("span", { className: classNames(styles.summaryText), children: summary }), _jsx("span", { className: classNames(styles.chevron, isOpen && styles.chevronOpen), children: isOpen ? (_jsx(ExpandLess, { size: "small", "aria-hidden": "true" })) : (_jsx(ExpandMore, { size: "small", "aria-hidden": "true" })) })] }), _jsx("div", { className: classNames(styles.content), children: contentChildren })] }));
 };

package/components/Details/Details.module.css.js

@@ -1,29 +1,27 @@
 import styleInject from 'style-inject';
 import json from './Details.module.css.json';
 styleInject(`
-/* Override via --reltio-details-* on .root or parent; fallbacks = light values */
-._root_1njq6_1 {
+.Details_root__L29wd {
 	margin: 1rem 0;
-	background-color: var(--reltio-details-background-color, #fff);
-	border: var(--reltio-details-border-width, 0.5px) solid
-		var(--reltio-details-border-color, #e3e3f2);
-	border-radius: var(--reltio-details-border-radius, 12px);
+	background-color: var(--reltio-color-surface-1);
+	border: 0.5px solid var(--reltio-color-border-2);
+	border-radius: 12px;
 	overflow: hidden;
 	padding: 0;
-	font-family: var(--reltio-details-font-family, "Roboto Flex", sans-serif);
-	font-size: var(--reltio-details-font-size, 14px);
+	font-family: "Roboto Flex", sans-serif;
+	font-size: 14px;
 }
 
-._summary_1njq6_14 {
+.Details_summary__L29wd {
 	display: flex;
 	align-items: center;
-	gap: var(--reltio-details-summary-gap, 8px);
+	gap: 8px;
 	cursor: pointer;
 	user-select: none;
 	list-style: none;
-	color: var(--reltio-details-summary-text-color, #0e0e25);
-	line-height: var(--reltio-details-summary-line-height, 1.71);
-	padding: var(--reltio-details-summary-padding, 12px);
+	color: var(--reltio-color-text);
+	line-height: 1.71;
+	padding: 12px;
 	margin: 0;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
@@ -31,19 +29,23 @@ styleInject(`
 	font-weight: 500;
 }
 
-._summary_1njq6_14:hover {
-	background-color: var(--reltio-details-summary-hover-bg, #b2b2ff4d);
+.Details_summary__L29wd:hover {
+	background-color: color-mix(
+		in srgb,
+		var(--reltio-color-primary) 12%,
+		transparent
+	);
 }
 
-._summary_1njq6_14::-webkit-details-marker {
+.Details_summary__L29wd::-webkit-details-marker {
 	display: none;
 }
 
-._summary_1njq6_14::marker {
+.Details_summary__L29wd::marker {
 	display: none;
 }
 
-._icon_1njq6_43 {
+.Details_icon__L29wd {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -51,55 +53,66 @@ styleInject(`
 	flex-shrink: 0;
 }
 
-._summaryText_1njq6_51 {
+.Details_summaryText__L29wd {
 	flex: 1;
-	font-weight: var(--reltio-details-title-font-weight, 500);
-	letter-spacing: var(--reltio-details-title-letter-spacing, 0.045px);
+	font-weight: 500;
+	letter-spacing: 0.045px;
 }
 
-._chevron_1njq6_57 {
+.Details_chevron__L29wd {
 	flex-shrink: 0;
-	transition: transform var(--reltio-details-transition-duration, 195ms)
-		var(--reltio-details-transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
-	color: var(--reltio-details-chevron-color, #0e0e25);
-	width: var(--reltio-details-chevron-size, 24px);
-	height: var(--reltio-details-chevron-size, 24px);
+	transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1);
+	color: var(--reltio-color-text);
+	width: 24px;
+	height: 24px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-._chevronOpen_1njq6_69 {
+.Details_chevronOpen__L29wd {
 	transform: rotate(180deg);
 }
 
-._content_1njq6_73 {
-	padding: 0 var(--reltio-details-content-padding, 12px)
-		var(--reltio-details-content-padding, 12px)
-		var(--reltio-details-content-padding, 12px);
-	color: var(--reltio-details-content-text-color, #0e0e25);
-	line-height: var(--reltio-details-content-line-height, 1.71);
+.Details_content__L29wd {
+	padding: 0 12px 12px 12px;
+	color: var(--reltio-color-text);
+	line-height: 1.71;
 }
 
-._content_1njq6_73 pre {
+.Details_content__L29wd pre {
 	margin: 0;
-	background-color: var(--reltio-details-code-background-color, #f5f5fa);
-	border-radius: var(--reltio-details-content-pre-radius, 8px);
-	padding: var(--reltio-details-content-pre-padding, 16px);
+	background-color: var(--reltio-color-surface-2);
+	border-radius: 8px;
+	padding: 16px;
+	border: 1px solid var(--reltio-color-border-2);
 }
 
-._content_1njq6_73 code {
-	color: var(--reltio-details-content-code-color, #0e0e25);
-	background-color: #f5f5f5;
+.Details_content__L29wd code {
+	color: var(--reltio-color-text);
+	background-color: var(--reltio-color-surface-2);
 	padding: 0.2em 0.4em;
 	border-radius: 3px;
 	font-family: monospace;
 	font-size: 0.9em;
 }
 
-._content_1njq6_73 p {
-	margin-top: var(--reltio-details-content-p-margin, 8px);
-	margin-bottom: var(--reltio-details-content-p-margin, 8px);
+[data-theme="dark"] .Details_root__L29wd {
+	background-color: var(--reltio-color-surface-2);
+}
+
+[data-theme="dark"] .Details_content__L29wd pre,
+[data-theme="dark"] .Details_content__L29wd code {
+	background-color: color-mix(
+		in srgb,
+		var(--reltio-color-border-2) 40%,
+		var(--reltio-color-surface-2)
+	);
+}
+
+.Details_content__L29wd p {
+	margin-top: 8px;
+	margin-bottom: 8px;
 }
 `);
 export default json;

package/components/Details/Details.module.css.json

@@ -1 +1 @@
-{ "root": "_root_1njq6_1", "summary": "_summary_1njq6_14", "icon": "_icon_1njq6_43", "summaryText": "_summaryText_1njq6_51", "chevron": "_chevron_1njq6_57", "chevronOpen": "_chevronOpen_1njq6_69", "content": "_content_1njq6_73" }
+{ "root": "Details_root__L29wd", "summary": "Details_summary__L29wd", "icon": "Details_icon__L29wd", "summaryText": "Details_summaryText__L29wd", "chevron": "Details_chevron__L29wd", "chevronOpen": "Details_chevronOpen__L29wd", "content": "Details_content__L29wd" }

package/components/Details/Details.types.d.ts

@@ -1,55 +1,8 @@
-import type React from "react";
-/**
- * CSS custom properties supported by Details (for style overrides).
- * Values are CSS strings (e.g. colors, lengths, var(...)).
- */
-/** Order matches Details.module.css (.root → .summary → .chevron → .content). */
-export type DetailsStyleVars = {
-    "--reltio-details-background-color"?: string;
-    "--reltio-details-border-color"?: string;
-    "--reltio-details-border-radius"?: string;
-    "--reltio-details-border-width"?: string;
-    "--reltio-details-font-family"?: string;
-    "--reltio-details-font-size"?: string;
-    "--reltio-details-summary-text-color"?: string;
-    "--reltio-details-summary-hover-bg"?: string;
-    "--reltio-details-summary-padding"?: string;
-    "--reltio-details-summary-gap"?: string;
-    "--reltio-details-summary-line-height"?: string;
-    "--reltio-details-title-font-weight"?: string;
-    "--reltio-details-title-letter-spacing"?: string;
-    "--reltio-details-chevron-size"?: string;
-    "--reltio-details-chevron-color"?: string;
-    "--reltio-details-transition-duration"?: string;
-    "--reltio-details-transition-ease"?: string;
-    "--reltio-details-content-text-color"?: string;
-    "--reltio-details-content-line-height"?: string;
-    "--reltio-details-content-padding"?: string;
-    "--reltio-details-content-code-color"?: string;
-    "--reltio-details-content-pre-padding"?: string;
-    "--reltio-details-content-pre-radius"?: string;
-    "--reltio-details-content-p-margin"?: string;
-    "--reltio-details-code-background-color"?: string;
-};
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the Details component
  */
-export type DetailsProps = {
-    /**
-     * Whether the details element is initially open
-     * @default false
-     */
+export type DetailsProps = HtmlProps<"details", {
+    /** @default false */
     open?: boolean;
-    /**
-     * Content of the details element (can include summary and other content)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Additional CSS variables (and standard style props)
-     */
-    style?: React.CSSProperties & DetailsStyleVars;
-} & Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, "open" | "className" | "style" | "children">;
+}>;

package/components/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import type { DividerProps } from "./Divider.types";
+export declare const Divider: ({ align, children, className, ...rest }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/components/Divider/Divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utils/classNames";
+import styles from "./Divider.module.css";
+export const Divider = ({ align = "start", children, className, ...rest }) => {
+    return (_jsx("div", { role: "separator", className: classNames(styles.root, children ? styles.labeled : styles.plain, children ? styles[align] : undefined, className), ...rest, children: children }));
+};

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

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

package/components/Divider/Divider.module.css.js

@@ -0,0 +1,40 @@
+import styleInject from 'style-inject';
+import json from './Divider.module.css.json';
+styleInject(`
+.Divider_root__L29wd {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+.Divider_plain__L29wd {
+	height: 1px;
+	background-color: var(--reltio-color-surface-3);
+}
+
+.Divider_labeled__L29wd {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--reltio-color-text-secondary);
+}
+
+.Divider_labeled__L29wd::before,
+.Divider_labeled__L29wd::after {
+	content: "";
+	flex: 1;
+	height: 1px;
+	background-color: var(--reltio-color-surface-3);
+}
+
+.Divider_start__L29wd::before {
+	display: none;
+}
+
+.Divider_end__L29wd::after {
+	display: none;
+}
+`);
+export default json;

package/components/Divider/Divider.module.css.json

@@ -0,0 +1 @@
+{ "root": "Divider_root__L29wd", "plain": "Divider_plain__L29wd", "labeled": "Divider_labeled__L29wd", "start": "Divider_start__L29wd", "end": "Divider_end__L29wd" }

package/components/Divider/Divider.types.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { HtmlProps } from "../../utils/types";
+export type DividerAlign = "start" | "center" | "end";
+export type DividerProps = HtmlProps<"div", {
+    /** Position of the label text relative to the line.
+     * @default "start"
+     */
+    align?: DividerAlign;
+    /** Optional label text displayed alongside the divider line. */
+    children?: React.ReactNode;
+}>;

package/components/Divider/Divider.types.js

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

package/components/Divider/index.d.ts

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

package/components/Divider/index.js

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

package/components/ErrorMessage/ErrorMessage.js

@@ -8,5 +8,5 @@ const DEFAULT_MESSAGE = "Something went wrong. Please try again.";
  * Uses role="alert" and aria-live for screen reader announcements.
  */
 export const ErrorMessage = ({ children, className, ...rest }) => {
-    return (_jsxs("div", { className: classNames(styles.root, className), role: "alert", "aria-live": "polite", ...rest, children: [_jsx("span", { className: styles.iconWrapper, "aria-hidden": "true", children: _jsx(ErrorCircle, { size: "small", color: "error" }) }), _jsx("p", { className: styles.text, children: children || DEFAULT_MESSAGE })] }));
+    return (_jsxs("div", { className: classNames(styles.root, className), role: "alert", "aria-live": "polite", ...rest, children: [_jsx("span", { className: classNames(styles.iconWrapper), "aria-hidden": "true", children: _jsx(ErrorCircle, { size: "small", color: "error" }) }), _jsx("p", { className: classNames(styles.text), children: children || DEFAULT_MESSAGE })] }));
 };