@reltio/design 0.1.1 → 0.2.1

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

@@ -1,31 +1,19 @@
 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;
-
+.ErrorMessage_root__L29wd {
 	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);
+	gap: 8px;
+	padding: 12px 16px;
+	background-color: var(--reltio-color-error-soft);
+	border: 1px solid var(--reltio-color-error);
+	border-radius: 8px;
 	box-sizing: border-box;
 }
 
-._text_gqx9m_24 {
-	color: var(--reltio-error-message-text-color, #b91c1c);
+.ErrorMessage_text__L29wd {
+	color: var(--reltio-color-error-font);
 	font-size: 14px;
 	line-height: 1.5;
 	margin: 0;
@@ -33,16 +21,16 @@ styleInject(`
 	min-width: 0;
 }
 
-._iconWrapper_gqx9m_33 {
+.ErrorMessage_iconWrapper__L29wd {
 	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);
+	width: 20px;
+	height: 20px;
 }
 
-._iconWrapper_gqx9m_33 svg {
+.ErrorMessage_iconWrapper__L29wd svg {
 	width: 100%;
 	height: 100%;
 }

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

@@ -1 +1 @@
-{ "root": "_root_gqx9m_1", "text": "_text_gqx9m_24", "iconWrapper": "_iconWrapper_gqx9m_33" }
+{ "root": "ErrorMessage_root__L29wd", "text": "ErrorMessage_text__L29wd", "iconWrapper": "ErrorMessage_iconWrapper__L29wd" }

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

@@ -1,14 +1,11 @@
 import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the ErrorMessage component
  */
-export type ErrorMessageProps = {
+export type ErrorMessageProps = HtmlProps<"div", {
     /**
      * 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/Markdown/Markdown.d.ts

@@ -5,4 +5,4 @@ import type { MarkdownProps } from "./Markdown.types";
  * (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;
+export declare const Markdown: ({ children, className, style, ...rest }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/components/Markdown/Markdown.js

@@ -10,12 +10,12 @@ import { allowedOverrides, baseOverrides } from "./markdownOverrides";
  * (GFM), raw HTML rendering with proper sanitization, and optional
  * tag-to-component overrides via the components prop.
  */
-export const Markdown = ({ children, className, style, }) => {
+export const Markdown = ({ children, className, style, ...rest }) => {
     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: {
+    return (_jsx("div", { className: composedClassName, style: style, ...rest, children: _jsx(ErrorBoundary, { fallback: _jsx("pre", { className: classNames(styles.error), children: children }), children: _jsx(MarkdownToJsx, { options: {
                     overrides: {
                         ...baseOverrides,
                         ...allowedOverrides,

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

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

@@ -1 +1 @@
-{ "error": "_error_1ixrx_2", "root": "_root_1ixrx_8", "tableWrapper": "_tableWrapper_1ixrx_127" }
+{ "error": "Markdown_error__L29wd", "root": "Markdown_root__L29wd", "tableWrapper": "Markdown_tableWrapper__L29wd" }

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

@@ -1,54 +1,4 @@
-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;
-};
+export type MarkdownProps = React.ComponentPropsWithoutRef<"div">;

package/components/Popover/Popover.d.ts

@@ -0,0 +1,36 @@
+import type { PopoverProps } from "./Popover.types";
+/**
+ * Uncontrolled anchored popover built on the native Popover API and CSS Anchor Positioning.
+ *
+ * Use the `trigger` prop to provide the element that toggles the popover.
+ * Positioning is handled automatically via CSS Anchor Positioning relative
+ * to the trigger. Light dismiss (Esc + click outside) is built in.
+ *
+ * Optional `header` and `footer` props render in fixed areas — only `children`
+ * scroll when content overflows.
+ *
+ * **Auto-close on content click:** clicking any element inside the popover
+ * closes it (click bubbles to the root and triggers toggle). This is the
+ * expected behavior for menus and action lists. For interactive content
+ * (inputs, forms), call `e.stopPropagation()` on the container to prevent
+ * auto-close.
+ *
+ * **Focus management:** add a `data-autofocus` attribute to an element inside
+ * the popover to focus it when the popover opens.
+ *
+ * @example
+ * ```tsx
+ * <Popover trigger={<Button>Actions</Button>}>
+ *   <button onClick={handleEdit}>Edit</button>
+ *   <button onClick={handleDelete}>Delete</button>
+ * </Popover>
+ *
+ * // With form content — stopPropagation prevents auto-close
+ * <Popover trigger={<Button>Add Note</Button>} header="New Note">
+ *   <div onClick={e => e.stopPropagation()}>
+ *     <TextArea label="Note" data-autofocus />
+ *   </div>
+ * </Popover>
+ * ```
+ */
+export declare const Popover: ({ trigger, positionArea, onToggle, header, footer, children, className, style, ...rest }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/Popover/Popover.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./Popover.module.css";
+/**
+ * Uncontrolled anchored popover built on the native Popover API and CSS Anchor Positioning.
+ *
+ * Use the `trigger` prop to provide the element that toggles the popover.
+ * Positioning is handled automatically via CSS Anchor Positioning relative
+ * to the trigger. Light dismiss (Esc + click outside) is built in.
+ *
+ * Optional `header` and `footer` props render in fixed areas — only `children`
+ * scroll when content overflows.
+ *
+ * **Auto-close on content click:** clicking any element inside the popover
+ * closes it (click bubbles to the root and triggers toggle). This is the
+ * expected behavior for menus and action lists. For interactive content
+ * (inputs, forms), call `e.stopPropagation()` on the container to prevent
+ * auto-close.
+ *
+ * **Focus management:** add a `data-autofocus` attribute to an element inside
+ * the popover to focus it when the popover opens.
+ *
+ * @example
+ * ```tsx
+ * <Popover trigger={<Button>Actions</Button>}>
+ *   <button onClick={handleEdit}>Edit</button>
+ *   <button onClick={handleDelete}>Delete</button>
+ * </Popover>
+ *
+ * // With form content — stopPropagation prevents auto-close
+ * <Popover trigger={<Button>Add Note</Button>} header="New Note">
+ *   <div onClick={e => e.stopPropagation()}>
+ *     <TextArea label="Note" data-autofocus />
+ *   </div>
+ * </Popover>
+ * ```
+ */
+export const Popover = ({ trigger, positionArea = "bottom", onToggle, header, footer, children, className, style, ...rest }) => {
+    const contentRef = useRef(null);
+    const isOpen = useRef(false);
+    const handleToggle = (e) => {
+        isOpen.current = e.newState === "open";
+        if (isOpen.current) {
+            const target = contentRef.current?.querySelector("[data-autofocus]");
+            target?.focus();
+        }
+        onToggle?.(e);
+    };
+    const handleClick = () => {
+        if (isOpen.current) {
+            contentRef.current?.hidePopover();
+        }
+        else {
+            contentRef.current?.showPopover();
+        }
+    };
+    return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: trigger child handles its own keyboard interaction
+    // biome-ignore lint/a11y/noStaticElementInteractions: wrapper delegates to interactive trigger child
+    _jsxs("span", { className: classNames(styles.root), onClick: handleClick, children: [trigger, _jsxs("div", { ref: contentRef, popover: "auto", className: classNames(styles.container, className), style: { ...style, positionArea }, onToggle: handleToggle, ...rest, children: [header && _jsx("div", { className: classNames(styles.header), children: header }), _jsx("div", { className: classNames(styles.body), children: children }), footer && _jsx("div", { className: classNames(styles.footer), children: footer })] })] }));
+};

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

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

package/components/Popover/Popover.module.css.js

@@ -0,0 +1,62 @@
+import styleInject from 'style-inject';
+import json from './Popover.module.css.json';
+styleInject(`
+.Popover_root__L29wd {
+	display: inline-flex;
+	width: fit-content;
+	anchor-scope: --trigger;
+	anchor-name: --trigger;
+}
+
+.Popover_container__L29wd {
+	position-anchor: --trigger;
+	box-sizing: border-box;
+	margin: 8px;
+	padding: 0;
+	border: 1px solid var(--reltio-color-border-2);
+	border-radius: 12px;
+	background: var(--reltio-color-surface-1);
+	color: var(--reltio-color-text);
+	box-shadow:
+		0 4px 16px var(--reltio-color-shadow-2),
+		0 1px 4px var(--reltio-color-shadow-1);
+	inset: auto;
+	max-width: calc(100vw - 16px);
+	max-height: calc(100vh - 16px);
+}
+
+.Popover_container__L29wd:popover-open {
+	display: flex;
+	flex-direction: column;
+}
+
+.Popover_header__L29wd {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 12px;
+	border-bottom: 1px solid var(--reltio-color-border-1);
+	font-weight: 600;
+	font-size: 14px;
+	flex-shrink: 0;
+	min-height: 32px;
+}
+
+.Popover_body__L29wd {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	min-height: 0;
+	padding: 0;
+}
+
+.Popover_footer__L29wd {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 12px;
+	border-top: 1px solid var(--reltio-color-border-1);
+	flex-shrink: 0;
+}
+`);
+export default json;

package/components/Popover/Popover.module.css.json

@@ -0,0 +1 @@
+{ "root": "Popover_root__L29wd", "container": "Popover_container__L29wd", "header": "Popover_header__L29wd", "body": "Popover_body__L29wd", "footer": "Popover_footer__L29wd" }

package/components/Popover/Popover.types.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+import type { HtmlProps } from "../../utils/types";
+export type PopoverProps = HtmlProps<"div", {
+    /** The element that toggles the popover on click. Clicks on content also bubble to the root and close the popover — use `e.stopPropagation()` to prevent this for interactive content. */
+    trigger: React.ReactElement;
+    /** CSS `position-area` value controlling placement relative to the trigger.
+     * Common values: `"bottom"`, `"top"`, `"left"`, `"right"`, `"bottom span-right"`, `"top span-left"`.
+     * See https://developer.mozilla.org/en-US/docs/Web/CSS/position-area for more details.
+     * @default "bottom"
+     */
+    positionArea?: string;
+    /** Called when the popover opens or closes. Forwards the native `toggle` event — check `event.newState` for `"open"` or `"closed"`. */
+    onToggle?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+    /** Content rendered in a fixed header area at the top, with a bottom border separator */
+    header?: React.ReactNode;
+    /** Content rendered in a fixed footer area at the bottom, right-aligned by default, with a top border separator */
+    footer?: React.ReactNode;
+}>;