@reltio/design 0.0.2 → 0.1.0

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

@@ -0,0 +1,105 @@
+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 {
+	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);
+	overflow: hidden;
+	padding: 0;
+	font-family: var(--reltio-details-font-family, "Roboto Flex", sans-serif);
+	font-size: var(--reltio-details-font-size, 14px);
+}
+
+._summary_1njq6_14 {
+	display: flex;
+	align-items: center;
+	gap: var(--reltio-details-summary-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);
+	margin: 0;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	outline: none;
+	font-weight: 500;
+}
+
+._summary_1njq6_14:hover {
+	background-color: var(--reltio-details-summary-hover-bg, #b2b2ff4d);
+}
+
+._summary_1njq6_14::-webkit-details-marker {
+	display: none;
+}
+
+._summary_1njq6_14::marker {
+	display: none;
+}
+
+._icon_1njq6_43 {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: transparent;
+	flex-shrink: 0;
+}
+
+._summaryText_1njq6_51 {
+	flex: 1;
+	font-weight: var(--reltio-details-title-font-weight, 500);
+	letter-spacing: var(--reltio-details-title-letter-spacing, 0.045px);
+}
+
+._chevron_1njq6_57 {
+	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);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+._chevronOpen_1njq6_69 {
+	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);
+}
+
+._content_1njq6_73 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);
+}
+
+._content_1njq6_73 code {
+	color: var(--reltio-details-content-code-color, #0e0e25);
+	background-color: #f5f5f5;
+	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);
+}
+`);
+export default json;

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

@@ -0,0 +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" }

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

@@ -0,0 +1,55 @@
+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;
+};
+/**
+ * Props for the Details component
+ */
+export type DetailsProps = {
+    /**
+     * Whether the details element is initially open
+     * @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/Details/Details.types.js

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

package/components/Details/index.d.ts

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

package/components/Details/index.js

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

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ErrorBoundaryProps, ErrorBoundaryState } from "./ErrorBoundary.types";
+/**
+ * Reusable React Error Boundary (class component).
+ * Catches render-time errors from descendants, renders fallback UI, and optionally calls onError.
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}

package/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,23 @@
+import React from "react";
+/**
+ * Reusable React Error Boundary (class component).
+ * Catches render-time errors from descendants, renders fallback UI, and optionally calls onError.
+ */
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, info) {
+        this.props.onError?.(error, info);
+    }
+    render() {
+        if (this.state.error) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}

package/components/ErrorBoundary/ErrorBoundary.types.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+/**
+ * Props for the ErrorBoundary component.
+ */
+export type ErrorBoundaryProps = {
+    /**
+     * Content to render when no error occurs.
+     */
+    children: React.ReactNode;
+    /**
+     * Content to render when an error is caught from a descendant.
+     */
+    fallback: React.ReactNode;
+    /**
+     * Optional callback invoked in componentDidCatch with the caught error and React.ErrorInfo.
+     */
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+};
+/**
+ * Internal state for the ErrorBoundary class component.
+ */
+export type ErrorBoundaryState = {
+    hasError: boolean;
+    error: Error | null;
+};

package/components/ErrorBoundary/ErrorBoundary.types.js

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

package/components/ErrorBoundary/index.d.ts

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

package/components/ErrorBoundary/index.js

@@ -0,0 +1 @@
+export { ErrorBoundary } from "./ErrorBoundary";

package/components/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,6 @@
+import type { ErrorMessageProps } from "./ErrorMessage.types";
+/**
+ * Displays a standardized error message.
+ * Uses role="alert" and aria-live for screen reader announcements.
+ */
+export declare const ErrorMessage: ({ children, className, ...rest }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;

package/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorCircle } from "../../icons";
+import { classNames } from "../../utils/classNames";
+import styles from "./ErrorMessage.module.css";
+const DEFAULT_MESSAGE = "Something went wrong. Please try again.";
+/**
+ * Displays a standardized error message.
+ * 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 })] }));
+};

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

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

package/components/ErrorMessage/ErrorMessage.module.css.js

@@ -0,0 +1,50 @@
+import styleInject from 'style-inject';
+import json from './ErrorMessage.module.css.json';
+styleInject(`
+/* CSS Custom Properties - All defined on .root with --reltio-error-message- prefix */
+._root_gqx9m_1 {
+	--reltio-error-message-bg: #fef2f2;
+	--reltio-error-message-border-color: #fecaca;
+	--reltio-error-message-text-color: #b91c1c;
+	--reltio-error-message-icon-color: #dc2626;
+	--reltio-error-message-padding: 12px 16px;
+	--reltio-error-message-gap: 8px;
+	--reltio-error-message-border-radius: 8px;
+	--reltio-error-message-border-width: 1px;
+	--reltio-error-message-icon-size: 20px;
+
+	display: flex;
+	align-items: flex-start;
+	gap: var(--reltio-error-message-gap, 8px);
+	padding: var(--reltio-error-message-padding, 12px 16px);
+	background-color: var(--reltio-error-message-bg, #fef2f2);
+	border: var(--reltio-error-message-border-width, 1px) solid
+		var(--reltio-error-message-border-color, #fecaca);
+	border-radius: var(--reltio-error-message-border-radius, 8px);
+	box-sizing: border-box;
+}
+
+._text_gqx9m_24 {
+	color: var(--reltio-error-message-text-color, #b91c1c);
+	font-size: 14px;
+	line-height: 1.5;
+	margin: 0;
+	flex: 1;
+	min-width: 0;
+}
+
+._iconWrapper_gqx9m_33 {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--reltio-error-message-icon-size, 20px);
+	height: var(--reltio-error-message-icon-size, 20px);
+}
+
+._iconWrapper_gqx9m_33 svg {
+	width: 100%;
+	height: 100%;
+}
+`);
+export default json;

package/components/ErrorMessage/ErrorMessage.module.css.json

@@ -0,0 +1 @@
+{ "root": "_root_gqx9m_1", "text": "_text_gqx9m_24", "iconWrapper": "_iconWrapper_gqx9m_33" }

package/components/ErrorMessage/ErrorMessage.types.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+/**
+ * Props for the ErrorMessage component
+ */
+export type ErrorMessageProps = {
+    /**
+     * Custom error message text. When not provided or empty, a default message is shown.
+     */
+    children?: React.ReactNode | null;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className">;

package/components/ErrorMessage/ErrorMessage.types.js

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

package/components/ErrorMessage/index.d.ts

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

package/components/ErrorMessage/index.js

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

package/components/Markdown/Markdown.d.ts

@@ -0,0 +1,8 @@
+import type { MarkdownProps } from "./Markdown.types";
+/**
+ * Safely renders Markdown-formatted text content with robust error handling
+ * for invalid or malformed Markdown input. Supports GitHub Flavored Markdown
+ * (GFM), raw HTML rendering with proper sanitization, and optional
+ * tag-to-component overrides via the components prop.
+ */
+export declare const Markdown: ({ children, className, style, }: React.PropsWithChildren<MarkdownProps>) => import("react/jsx-runtime").JSX.Element;

package/components/Markdown/Markdown.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MarkdownToJsx, { sanitizer } from "markdown-to-jsx";
+import { ErrorBoundary } from "../../components/ErrorBoundary";
+import { classNames } from "../../utils/classNames";
+import styles from "./Markdown.module.css";
+import { allowedOverrides, baseOverrides } from "./markdownOverrides";
+/**
+ * Safely renders Markdown-formatted text content with robust error handling
+ * for invalid or malformed Markdown input. Supports GitHub Flavored Markdown
+ * (GFM), raw HTML rendering with proper sanitization, and optional
+ * tag-to-component overrides via the components prop.
+ */
+export const Markdown = ({ children, className, style, }) => {
+    if (children === null || children === undefined) {
+        return null;
+    }
+    const composedClassName = classNames(styles.root, className);
+    return (_jsx("div", { className: composedClassName, style: style, children: _jsx(ErrorBoundary, { fallback: _jsx("pre", { className: styles.error, children: children }), children: _jsx(MarkdownToJsx, { options: {
+                    overrides: {
+                        ...baseOverrides,
+                        ...allowedOverrides,
+                    },
+                    tagfilter: true,
+                    sanitizer,
+                }, children: typeof children === "string" ? children : String(children) }) }) }));
+};

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

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

package/components/Markdown/Markdown.module.css.js

@@ -0,0 +1,228 @@
+import styleInject from 'style-inject';
+import json from './Markdown.module.css.json';
+styleInject(`
+/* Error fallback when markdown fails to parse */
+._error_1ixrx_2 {
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+/* ── Root ── */
+._root_1ixrx_8 {
+	word-wrap: break-word;
+	line-height: var(--reltio-markdown-line-height, 1.5);
+	font-family: var(--reltio-markdown-font-family, "Roboto Flex", sans-serif);
+	font-size: var(--reltio-markdown-font-size, 14px);
+	font-weight: var(--reltio-markdown-font-weight, 400);
+	letter-spacing: var(--reltio-markdown-letter-spacing, 0.15px);
+	color: var(--reltio-markdown-color-text, #0e0e25);
+}
+
+/* ── Paragraphs ── */
+._root_1ixrx_8 p {
+	margin: 8px 0 7px 0;
+	line-height: var(--reltio-markdown-line-height, 1.5);
+}
+
+._root_1ixrx_8 p:not(:last-child) {
+	margin-bottom: var(--reltio-markdown-paragraph-margin-bottom, 0.5rem);
+}
+
+/* ── Headings ── */
+._root_1ixrx_8 h1,
+._root_1ixrx_8 h2,
+._root_1ixrx_8 h3,
+._root_1ixrx_8 h4,
+._root_1ixrx_8 h5,
+._root_1ixrx_8 h6 {
+	margin: var(--reltio-markdown-heading-margin, 1rem 0 0.5rem 0);
+	font-weight: 600;
+	font-family: "Libre Franklin", sans-serif;
+}
+
+._root_1ixrx_8 h1 {
+	font-size: var(--reltio-markdown-heading1-size, 1.5rem);
+}
+
+._root_1ixrx_8 h2 {
+	font-size: var(--reltio-markdown-heading2-size, 1.25rem);
+}
+
+._root_1ixrx_8 h3 {
+	font-size: var(--reltio-markdown-heading3-size, 1.1rem);
+}
+
+._root_1ixrx_8 h4 {
+	font-size: var(--reltio-markdown-heading4-size, 1rem);
+}
+
+._root_1ixrx_8 h5 {
+	font-size: var(--reltio-markdown-heading5-size, 0.95rem);
+}
+
+._root_1ixrx_8 h6 {
+	font-size: var(--reltio-markdown-heading6-size, 0.9rem);
+}
+
+/* ── Emphasis ── */
+._root_1ixrx_8 strong {
+	font-weight: 600;
+}
+
+._root_1ixrx_8 em {
+	font-style: italic;
+}
+
+/* ── Lists ── */
+._root_1ixrx_8 ul,
+._root_1ixrx_8 ol {
+	margin: var(--reltio-markdown-list-margin, 0.5rem 0);
+	padding-left: var(--reltio-markdown-list-padding-left, 1.5rem);
+}
+
+._root_1ixrx_8 li {
+	margin: var(--reltio-markdown-list-item-margin, 0.25rem 0);
+}
+
+/* ── Code ── */
+._root_1ixrx_8 pre {
+	overflow-x: auto;
+	margin: 0;
+	background-color: #e3e3f2;
+	border-radius: 8px;
+	padding: 16px;
+	border: 1px solid #e3e3f2;
+}
+
+._root_1ixrx_8 code {
+	font-family: var(--reltio-markdown-code-font-family, monospace);
+	font-size: var(--reltio-markdown-code-font-size, 0.9em);
+	background-color: var(--reltio-markdown-color-code-background, #f5f5f5);
+	padding: var(--reltio-markdown-code-padding, 0.2em 0.4em);
+	border-radius: var(--reltio-markdown-code-border-radius, 3px);
+}
+
+._root_1ixrx_8 pre code {
+	background-color: transparent;
+	padding: 0;
+}
+
+/* ── Links ── */
+._root_1ixrx_8 a {
+	color: var(--reltio-markdown-color-link, #0000cc);
+	text-decoration: underline;
+}
+
+._root_1ixrx_8 a:hover {
+	text-decoration: none;
+}
+
+/* ── Blockquote ── */
+._root_1ixrx_8 blockquote {
+	border-left: var(--reltio-markdown-blockquote-border-width, 4px) solid
+		var(--reltio-markdown-color-blockquote-border, #ddd);
+	margin: var(--reltio-markdown-blockquote-margin, 1rem 0);
+	padding-left: var(--reltio-markdown-blockquote-padding-left, 1rem);
+	color: var(--reltio-markdown-color-blockquote-text, #666);
+}
+
+/* ── Tables ── */
+._tableWrapper_1ixrx_127 {
+	font-family: var(--reltio-markdown-base-font, "Roboto Flex", sans-serif);
+	width: 100%;
+	border-collapse: collapse;
+	position: relative;
+	color: var(--color-text, #0e0e25);
+	background-color: #ffffff;
+	border: 1px solid #9898b34d;
+	border-radius: 16px;
+	overflow: auto;
+	box-sizing: border-box;
+	font-size: 14px;
+}
+
+._tableWrapper_1ixrx_127 table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+._tableWrapper_1ixrx_127 thead {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	box-shadow: 0 1px 0 #9898b34d;
+}
+
+._tableWrapper_1ixrx_127 th {
+	padding: 16px;
+	font-weight: 600;
+	text-align: left;
+	border-right: 1px solid #9898b34d;
+	background-color: #e3e3f2;
+}
+
+._tableWrapper_1ixrx_127 th:last-child {
+	border-right: none;
+}
+
+._tableWrapper_1ixrx_127 td {
+	padding: 8px 16px;
+	border-bottom: 1px solid #9898b34d;
+	border-right: 1px solid #9898b34d;
+	text-align: left;
+	background-color: var(--reltio-markdown-color-table-cell-background, #ffffff);
+}
+
+._tableWrapper_1ixrx_127 td:last-child {
+	border-right: none;
+}
+
+._tableWrapper_1ixrx_127 tr:hover td {
+	background-color: var(--color-table-row-hover, #f5f5fa);
+}
+
+._tableWrapper_1ixrx_127 tr:last-child td {
+	border-bottom: none;
+}
+
+/* ── Strikethrough ── */
+._root_1ixrx_8 del {
+	text-decoration: line-through;
+	color: var(--reltio-markdown-color-del, #595972);
+}
+
+/* ── Checkboxes ── */
+._root_1ixrx_8 input[type="checkbox"] {
+	margin-right: var(--reltio-spacing-xs, 8px);
+	cursor: not-allowed;
+}
+
+/* ── Horizontal rule ── */
+._root_1ixrx_8 hr {
+	border: none;
+	border-top: 1px solid var(--color-border, #ddd);
+	margin: 1.5rem 0;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+	._tableWrapper_1ixrx_127 table {
+		display: block;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	._root_1ixrx_8 h1 {
+		font-size: 1.3rem;
+	}
+
+	._root_1ixrx_8 h2 {
+		font-size: 1.15rem;
+	}
+
+	._root_1ixrx_8 h3 {
+		font-size: 1.05rem;
+	}
+}
+`);
+export default json;

package/components/Markdown/Markdown.module.css.json

@@ -0,0 +1 @@
+{ "error": "_error_1ixrx_2", "root": "_root_1ixrx_8", "tableWrapper": "_tableWrapper_1ixrx_127" }

package/components/Markdown/Markdown.types.d.ts

@@ -0,0 +1,54 @@
+import type React from "react";
+/**
+ * CSS custom properties for the Markdown component.
+ */
+export type MarkdownCSSVariables = {
+    /** Base typography */
+    "--reltio-markdown-font-family"?: string;
+    "--reltio-markdown-font-size"?: string;
+    "--reltio-markdown-font-weight"?: string;
+    "--reltio-markdown-line-height"?: string;
+    "--reltio-markdown-letter-spacing"?: string;
+    "--reltio-markdown-base-font"?: string;
+    /** Heading sizes */
+    "--reltio-markdown-heading1-size"?: string;
+    "--reltio-markdown-heading2-size"?: string;
+    "--reltio-markdown-heading3-size"?: string;
+    "--reltio-markdown-heading4-size"?: string;
+    "--reltio-markdown-heading5-size"?: string;
+    "--reltio-markdown-heading6-size"?: string;
+    /** Code */
+    "--reltio-markdown-code-font-family"?: string;
+    "--reltio-markdown-code-font-size"?: string;
+    "--reltio-markdown-color-code-background"?: string;
+    "--reltio-markdown-code-padding"?: string;
+    "--reltio-markdown-code-border-radius"?: string;
+    /** Colors */
+    "--reltio-markdown-color-text"?: string;
+    "--reltio-markdown-color-link"?: string;
+    "--reltio-markdown-color-blockquote-border"?: string;
+    "--reltio-markdown-color-blockquote-text"?: string;
+    "--reltio-markdown-color-table-cell-background"?: string;
+    /** Spacing */
+    "--reltio-markdown-paragraph-margin-bottom"?: string;
+    "--reltio-markdown-heading-margin"?: string;
+    "--reltio-markdown-list-margin"?: string;
+    "--reltio-markdown-list-padding-left"?: string;
+    "--reltio-markdown-list-item-margin"?: string;
+    "--reltio-markdown-blockquote-margin"?: string;
+    "--reltio-markdown-blockquote-padding-left"?: string;
+    "--reltio-markdown-blockquote-border-width"?: string;
+};
+/**
+ * Props for the Markdown component
+ */
+export type MarkdownProps = {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Additional inline styles and CSS variable overrides
+     */
+    style?: React.CSSProperties & MarkdownCSSVariables;
+};