@redsift/ds-mcp-server 12.5.3-alpha.5 → 12.5.3-alpha.7

package/data/docs/llms-full.txt

@@ -3,8 +3,65 @@
 This file contains comprehensive documentation for all components in the Red Sift Design System.
 It is optimized for LLM consumption and includes props, types, defaults, and usage examples.
 
-Generated: 2026-05-06T13:08:06.962Z
-Total Components: 228
+Generated: 2026-05-12T09:42:09.200Z
+Total Components: 156
+
+---
+
+## Host App Setup — Required Bootstrap
+
+Before using ANY @redsift/* components, the host app must:
+
+### 1. Import the CSS foundation
+
+Add this import once, at your app entry point (e.g. `main.tsx`, `_app.tsx`, `index.tsx`):
+
+```tsx
+import '@redsift/design-system/style/index.css';
+```
+
+This loads design tokens (colors, spacing, typography), fonts (Poppins, Inter), and a CSS reset.
+Without it, components render without styling and CSS `var(--redsift-*)` tokens resolve to nothing.
+
+### 2. Set up theming
+
+**Option A — Full app shell (recommended):**
+```tsx
+import { AppContainer, AppSidePanel, AppBar, AppContent } from '@redsift/design-system';
+
+<AppContainer theme="light" product="ondmarc">
+  <AppSidePanel>{/* nav */}</AppSidePanel>
+  <AppContent>{/* pages */}</AppContent>
+</AppContainer>
+```
+
+**Option B — Standalone ThemeProvider (for non-Red-Sift-shell apps):**
+```tsx
+import { ThemeProvider } from '@redsift/design-system';
+
+<ThemeProvider value={{ theme: 'dark' }}>
+  {/* All @redsift/* components inside will read theme from context */}
+</ThemeProvider>
+```
+
+**Option C — Per-component theme prop (last resort, not recommended):**
+Every DS component accepts an optional `theme?: 'light' | 'dark'` prop.
+Use this only when a single component must override the inherited theme.
+Do NOT thread `theme` through every component in the tree — use Option A or B at the root.
+
+### 3. Icons
+
+Import icons from `@redsift/icons`, not `@mdi/js`:
+```tsx
+import { mdiPlus, mdiDelete } from '@redsift/icons';
+```
+
+### CSS framework co-existence (Tailwind, etc.)
+
+- **Safe:** Tailwind layout utilities (`flex`, `grid`, `gap-*`, `w-*`, `h-*`, `p-*`, `m-*`, `overflow-*`, `relative`, `absolute`).
+- **Conflicts:** Tailwind color classes (`bg-*`, `text-*`, `border-*`) override DS design tokens. Tailwind `dark:*` classes conflict with DS theme switching.
+- **Rule:** Never apply Tailwind `bg-*`, `text-*`, `border-*`, or `dark:*` classes to elements that render or wrap DS components. Use DS layout primitives (`Flexbox`, `Box`, `Grid`) or styled-components with `var(--redsift-*)` tokens instead.
+
 
 ---
 
@@ -125,25 +182,6 @@ Automatically adjusts its position based on the side panel's collapsed state.
 
 ---
 
-### AppContainer
-
-The AppContainer component.
-
-**Package:** @redsift/design-system
-**File:** packages/design-system/src/components/app-container/AppContainer.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| isFullScreen | false \| true | No | false | Whether the App takes the entire screen or not. |
-| locale | string | No | - | The locale to apply to the children. |
-| product | "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| { name: string; logo?: ReactElement<any, string \| JSXElementConstructor<any>> \| undefined; } | No | - | Product theme to apply to everything within. This overrides the CSS variables automatically. |
-| storageKey | string | No | - | When set, persists the side panel collapse/expand state in localStorage under this key. The `hidden` variant (from `isFullScreen`) is never persisted. |
-| theme | "light" \| "dark" | No | - | Overall theme. |
-
----
-
 ### AppContent
 
 AppContent is the main content area of a Red Sift application. It automatically
@@ -186,6 +224,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <AppContainer>. This is where page content goes.
+
 ---
 
 ### AppSidePanel
@@ -216,6 +258,10 @@ Must be used within an `AppContainer` to work properly.
 | theme | "light" \| "dark" | No | - | Theme. |
 | variant | "hidden" \| "shrinked" \| "standard" | No | - | Variant. |
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <AppContainer>. Houses the side navigation.
+
 ---
 
 ### Badge
@@ -421,6 +467,12 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Only accepts Breadcrumbs.Item as children. Non-Item children are silently ignored and will not render.
+- ⚠️ The last Breadcrumbs.Item is automatically marked as the current page and is not clickable.
+- ⚠️ Provide an aria-label for accessibility (e.g. aria-label="Breadcrumb navigation").
+
 ---
 
 ### Button
@@ -467,6 +519,11 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ The `theme` prop is optional — components inherit theme from the nearest ThemeProvider or AppContainer ancestor. Do NOT pass `theme` to every component; wrap the app at the root instead.
+- ⚠️ Variants: check with get_component_props — they differ from other UI libraries (no "primary", no "secondary").
+
 ---
 
 ### ButtonGroup
@@ -591,6 +648,20 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Card only accepts Card.Header, Card.Body, and Card.Actions as children. Other elements are silently ignored.
+- ⚠️ Card.Header has a fixed design. Use Card.Body for content and Card.Actions for button rows.
+- ⚠️ For collapsible cards, pass `isCollapsible` to Card. Use `isCollapsed`/`onCollapse` for controlled mode, or `defaultCollapsed` for uncontrolled.
+
+#### Disambiguation
+
+⚠️ Card is a generic container with Header/Body/Actions. Do NOT use for KPI/metric tiles — use DataCard from @redsift/dashboard instead.
+
+#### Common Anti-Patterns
+
+- ❌ Using Card with inline styles for KPI tiles → ✅ Use DataCard from @redsift/dashboard for metric/KPI tiles.
+
 ---
 
 ### CardActions
@@ -632,6 +703,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <Card>.
+
 ---
 
 ### CardBody
@@ -672,6 +747,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <Card>.
+
 ---
 
 ### CardHeader
@@ -712,6 +791,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <Card>.
+
 ---
 
 ### Checkbox
@@ -810,24 +893,6 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### ConditionalWrapper
-
-ConditionalWrapper conditionally wraps children in a wrapper component.
-Useful for applying wrappers like Tooltips or Gradient borders only when needed.
-
-**Package:** @redsift/design-system
-**File:** packages/design-system/src/components/conditional-wrapper/ConditionalWrapper.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| children | null \| ReactElement<{}, string \| JSXElementConstructor<any>> | Yes | - | Children to render with or without the wrapper. |
-| condition | false \| true | Yes | - | Condition to define whether or not the children should be wrapped. |
-| wrapper | (children: ReactElement<{}, string \| JSXElementConstructor<any>> \| null) => ReactElement<{}, string \| JSXElementConstructor<any>> \| null | Yes | - | Wrapper to conditionaly put around the children. |
-
----
-
 ### DetailedCard
 
 **Package:** @redsift/design-system
@@ -864,6 +929,16 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Content children (after DetailedCard.Header) must be DetailedCard.Section components. Other elements will not receive collapse/expand state injection via cloneElement.
+- ⚠️ DetailedCard.Header is extracted via partitionComponents — it must be a direct child, not wrapped.
+- ⚠️ DetailedCard.CollapsibleSectionItems must be a child of DetailedCard.Section for auto-detection of collapsible state.
+
+#### Disambiguation
+
+⚠️ DetailedCard is a complex card with collapsible sections. Use for rich detail panels, not KPI tiles. For KPI tiles use DataCard from @redsift/dashboard.
+
 ---
 
 ### DetailedCardCollapsibleSectionItems
@@ -897,6 +972,10 @@ The DetailedCardHeader component.
 | headingProps | Pick<HeadingProps, "as" \| "noWrap"> | No | - | Heading props allowing to override the component rendered by the heading without changing its style. |
 | isLoading | false \| true | No | - | Whether the card is loading or not. |
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <DetailedCard>.
+
 ---
 
 ### DetailedCardSection
@@ -917,6 +996,10 @@ The DetailedCardSection component.
 | isCollapsible | false \| true | No | - | Whether the section can be collasped or not. |
 | isLoading | false \| true | No | - | Whether the card is loading or not. |
 
+#### Usage Rules
+
+- ⚠️ Must be a direct child of <DetailedCard>. Do not wrap in a <div> — the parent injects `isCollapsed` and `theme` via cloneElement.
+
 ---
 
 ### DetailedCardSectionItem
@@ -992,6 +1075,11 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Common Anti-Patterns
+
+- ❌ gap={4} → ✅ gap="4px" — gap is a string prop (CSS value), not a number.
+- ❌ style={{ display: "flex", gap: 4 }} → ✅ <Flexbox gap="4px"> — use the Flexbox component instead of inline styles.
+
 ---
 
 ### FocusWithinGroup
@@ -1130,6 +1218,15 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ The `theme` prop is optional — inherited from context. Do NOT pass `theme` to every component.
+- ⚠️ Valid `color` values come from NeutralColorPalette ("black", "x-dark-grey", "dark-grey", "mid-grey", "light-grey", "x-light-grey", "white") and NotificationsColorPalette ("error", "warning", "success", "info", "question", "no-data"). You can also pass hex/rgb strings.
+
+#### Common Anti-Patterns
+
+- ❌ color="#22c55e" or color="var(--rs-color-green-500)" → ✅ color="success" — use semantic color values from NeutralColorPalette / NotificationsColorPalette.
+
 ---
 
 ### Icon
@@ -1171,6 +1268,15 @@ Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `margin
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Disambiguation
+
+⚠️ Icon renders an SVG icon from a path string. Always import mdi* icons from @redsift/icons. NEVER use unicode glyphs (✓, ✕, ⚠, ›) and NEVER import from @mdi/js.
+
+#### Common Anti-Patterns
+
+- ❌ Unicode characters (✓, ✕, ⚠, ›) → ✅ <Icon path={mdiCheck} /> from @redsift/icons.
+- ❌ import { mdiPlus } from "@mdi/js" → ✅ import { mdiPlus } from "@redsift/icons".
+
 ---
 
 ### IconButton
@@ -1216,6 +1322,20 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ The `theme` prop is optional — inherited from context. Do NOT pass `theme` to every component.
+- ⚠️ Requires `icon` prop (SVG path string from @redsift/icons). Import icons from @redsift/icons, not @mdi/js.
+
+#### Disambiguation
+
+⚠️ IconButton renders a clickable icon. Requires icon prop (SVG path string). Import icons from @redsift/icons, not @mdi/js.
+
+#### Common Anti-Patterns
+
+- ❌ Unicode characters as icon content → ✅ icon={mdiPlus} prop with mdi imports from @redsift/icons.
+- ❌ import { mdiPlus } from "@mdi/js" → ✅ import { mdiPlus } from "@redsift/icons".
+
 ---
 
 ### IconButtonLink
@@ -1648,6 +1768,15 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Content via `children`, NOT a `label` prop. Usage: `<Pill color="blue" size="small">Active</Pill>`
+- ⚠️ The `theme` prop is optional — inherited from context.
+
+#### Common Anti-Patterns
+
+- ❌ <Pill label="Active" /> → ✅ <Pill color="success">Active</Pill> — Pill uses children for content, NOT a label prop.
+
 ---
 
 ### ProgressBar
@@ -1971,6 +2100,14 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Disambiguation
+
+⚠️ Always use Skeleton from @redsift/design-system. NEVER import Skeleton from @mui/material — it will not match the DS theme.
+
+#### Common Anti-Patterns
+
+- ❌ import { Skeleton } from "@mui/material" → ✅ import { Skeleton } from "@redsift/design-system" — always use the DS Skeleton.
+
 ---
 
 ### SkeletonCircle
@@ -2003,6 +2140,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Disambiguation
+
+⚠️ Use SkeletonCircle from @redsift/design-system for avatar/icon-shaped loading placeholders.
+
 ---
 
 ### SkeletonText
@@ -2038,6 +2179,10 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Disambiguation
+
+⚠️ Use SkeletonText from @redsift/design-system for paragraph-shaped loading placeholders.
+
 ---
 
 ### Spinner
@@ -2207,6 +2352,11 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be a child of <Tabs>. Requires TabsContext — rendering outside <Tabs> will silently fail (no selection, no keyboard navigation).
+- ⚠️ Always provide a `value` prop that matches a corresponding TabPanel.
+
 ---
 
 ### TabPanel
@@ -2242,6 +2392,12 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Must be used within a <Tabs> provider. Requires TabsContext — rendering outside <Tabs> will silently fail (panel never shown).
+- ⚠️ The `value` prop must match a corresponding Tab `value`.
+- ⚠️ Use `keepMounted` to keep panel content in DOM when inactive (useful for preserving form state).
+
 ---
 
 ### Tabs
@@ -2286,6 +2442,12 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Accepts <Tab> and <TabPanel> children. Tabs must have a `value` prop that matches a TabPanel `value`.
+- ⚠️ For navigation tabs, use the `as` prop on Tab (e.g. as="a" href="/path") instead of onClick.
+- ⚠️ Supports controlled (`value`/`onChange`) and uncontrolled (`defaultValue`) modes.
+
 ---
 
 ### Text
@@ -2332,6 +2494,15 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ The `theme` prop is optional — inherited from context. Do NOT pass `theme` to every component.
+- ⚠️ The `slot` prop is NOT supported. Do not pass slot="heading" or similar — use Heading component or compound sub-component API instead.
+
+#### Common Anti-Patterns
+
+- ❌ color="#22c55e" or color="var(--rs-color-green-500)" → ✅ color="success" — use semantic color values from NeutralColorPalette / NotificationsColorPalette.
+
 ---
 
 ### TextArea
@@ -2604,85 +2775,6 @@ Placements: `top`, `bottom`, `left`, `right`
 
 ---
 
-### Button
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/ButtonWithTooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | string | No | 'primary' | Color variant. |
-| fullWidth | false \| true | No | - | Whether the component take the full width or not. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| isLoading | false \| true | No | - | Whether the component is in a loading state or not. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the left icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the right icon. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### ButtonLink
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/ButtonLinkWithTooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | string | No | 'primary' | Color variant. |
-| as | "symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| "center" \| "search" \| ComponentClass<any, any> \| FunctionComponent<any> | No | - | Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the left icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the right icon. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
 ### Dialog
 
 **Package:** @redsift/popovers
@@ -2703,6 +2795,10 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | theme | "light" \| "dark" | No | - | Theme. |
 | triggerClassName | string | No | - | Class name to append to the trigger. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <Dialog.Trigger>, <Dialog.Content>, <Dialog.Title>, etc. Do not pass content as a string prop.
+
 ---
 
 ### DialogContent
@@ -2846,32 +2942,63 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### IconButton
+### Popover
 
 **Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/IconButtonWithTooltip.tsx
+**File:** packages/popovers/src/components/popover/Popover.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| color | string | No | 'primary' | Color variant. |
-| icon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | Yes | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| iconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to forward to the icon. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| isLoading | false \| true | No | - | Whether the component is in a loading state or not. |
+| width | number \| "trigger-width" \| "available-width" | No | - | Popover content width. Can be either based on the trigger, the available space or define with a number of pixels. |
+| minWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content min width. Can be either based on the trigger, the available space or define with a number of pixels. |
+| maxWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. |
+| color | string | No | - | Button color that will be forward to the trigger. |
+| children | ReactNode | Yes | - | Children. Can only be PopoverTrigger and PopoverContent. |
+| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
+| placement | "top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" | No | 'bottom' | Default placement of the popover. |
+| isModal | false \| true | No | false | Whether the popover is a modal or not. |
+| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
+| offset | number | No | 2 | Space between trigger and content (in pixels). |
+| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
+| overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
+| role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
+| triggerClassName | string | No | - | Class name to append to the trigger. |
 
-#### Layout Props (14 props)
+---
 
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
+### PopoverContent
 
-#### Spacing Props (5 props)
+The PopoverContent component.
 
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
+**Package:** @redsift/popovers
+**File:** packages/popovers/src/components/popover-content/PopoverContent.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| theme | "light" \| "dark" | No | - | Theme. |
+| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
+| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
+| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
+| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
+| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
+| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
+| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
+| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
+| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
+| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
+
+#### Layout Props (12 props)
+
+Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
+
+#### Spacing Props (10 props)
+
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
 
 #### Sizing Props (6 props)
 
@@ -2883,192 +3010,9 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### IconButtonLink
+### PopoverTrigger
 
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/IconButtonLinkWithTooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | string | No | 'primary' | Color variant. |
-| as | "symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| "center" \| "search" \| ComponentClass<any, any> \| FunctionComponent<any> | No | - | Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the left icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the right icon. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| icon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | Yes | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| iconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to forward to the icon. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### Link
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/LinkWithTooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| as | "symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| "center" \| "search" \| ComponentClass<any, any> \| FunctionComponent<any> | No | - | Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). |
-| color | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "black" \| "x-dark-grey" \| "dark-grey" \| "mid-grey" \| "light-grey" \| "x-light-grey" \| "white" \| "radar" \| string & {} | No | 'link' | Color variant. Either from color palette or hex or rgb strings. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the left icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the right icon. |
-| theme | "light" \| "dark" | No | - | Theme. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### LinkButton
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/tooltip/LinkButtonWithTooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "black" \| "x-dark-grey" \| "dark-grey" \| "mid-grey" \| "light-grey" \| "x-light-grey" \| "white" \| "radar" \| string & {} | No | 'link' | Color variant. Either from color palette or hex or rgb strings. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the left icon. |
-| rightIconProps | Omit<IconProps, "ref" \| "icon"> | No | - | Props to add to the right icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| isLoading | false \| true | No | - | Whether the component is in a loading state or not. |
-| theme | "light" \| "dark" | No | - | Theme. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### Popover
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/popover/Popover.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| width | number \| "trigger-width" \| "available-width" | No | - | Popover content width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| minWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content min width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| maxWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| color | string | No | - | Button color that will be forward to the trigger. |
-| children | ReactNode | Yes | - | Children. Can only be PopoverTrigger and PopoverContent. |
-| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
-| placement | "top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" | No | 'bottom' | Default placement of the popover. |
-| isModal | false \| true | No | false | Whether the popover is a modal or not. |
-| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
-| offset | number | No | 2 | Space between trigger and content (in pixels). |
-| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
-| overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
-| role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| triggerClassName | string | No | - | Class name to append to the trigger. |
-
----
-
-### PopoverContent
-
-The PopoverContent component.
-
-**Package:** @redsift/popovers
-**File:** packages/popovers/src/components/popover-content/PopoverContent.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| theme | "light" \| "dark" | No | - | Theme. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### PopoverTrigger
-
-The PopoverTrigger component.
+The PopoverTrigger component.
 
 **Package:** @redsift/popovers
 **File:** packages/popovers/src/components/popover-trigger/PopoverTrigger.tsx
@@ -3178,6 +3122,12 @@ Placements: `top-left`, `top-center`, `top-right`, `bottom-left`,
 | theme | "light" \| "dark" | No | - | Theme. |
 | triggerClassName | string | No | - | Class name to append to the trigger. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <Toggletip.Trigger> and <Toggletip.Content>.
+- ⚠️ Trigger and Content sub-components must not be used outside <Toggletip> — they throw if ToggletipContext is missing.
+- ⚠️ Use Toggletip instead of Tooltip when content should be triggered by click (not hover) for touch/keyboard accessibility.
+
 ---
 
 ### ToggletipContent
@@ -3267,6 +3217,11 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | theme | "light" \| "dark" | No | - | Theme. |
 | triggerClassName | string | No | - | Class name to append to the trigger. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <Tooltip.Trigger> and <Tooltip.Content>. Do not pass content as a string prop.
+- ⚠️ Trigger and Content sub-components must not be used outside <Tooltip> — they throw if TooltipContext is missing.
+
 ---
 
 ### TooltipContent
@@ -3596,6 +3551,12 @@ For searchable/filterable lists, use Combobox instead.
 | overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
 | role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <Combobox.Trigger> and <Combobox.Content>.
+- ⚠️ Combobox.Trigger requires a TextField or TextArea as its child. Custom inputs must forward refs correctly or focus management will break.
+- ⚠️ Combobox.Content accepts ComboboxContent.Header, .Listbox, and .Footer as children.
+
 ---
 
 ### ComboboxContent
@@ -3636,6 +3597,12 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Only accepts ComboboxContent.Header, ComboboxContent.Listbox, and ComboboxContent.Footer as children. Other elements are silently ignored.
+- ⚠️ Children are reordered internally (Header → Listbox → Footer) regardless of JSX order.
+- ⚠️ Must be used inside a <Combobox> — requires popover and combobox context.
+
 ---
 
 ### ComboboxContentFooter
@@ -3882,6 +3849,11 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
 | role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <MenuButton.Trigger> and <MenuButton.Content>.
+- ⚠️ MenuButton.Content accepts MenuButtonContent.Header, .Menu, and .Footer or plain Menu items.
+
 ---
 
 ### MenuButtonContent
@@ -3921,6 +3893,11 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
+#### Usage Rules
+
+- ⚠️ Only accepts MenuButtonContent.Header, MenuButtonContent.Menu, and MenuButtonContent.Footer as children. If none are provided, all children are wrapped in a Menu automatically.
+- ⚠️ Must be used inside a <MenuButton> — requires popover and menu button context.
+
 ---
 
 ### MenuButtonContentFooter
@@ -4110,6 +4087,12 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
 | role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
 
+#### Usage Rules
+
+- ⚠️ Must use compound sub-components: <Select.Trigger> and <Select.Content>.
+- ⚠️ Select.Content accepts <Item> components as children for options.
+- ⚠️ For searchable/filterable lists, use Combobox instead of Select.
+
 ---
 
 ### SelectContent
@@ -4400,67 +4383,17 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### BarChartBars
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/BarChartBars.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| category | string | No | - |  |
-
----
-
-### BarChartGroupedTooltip
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/BarChartBars.tsx
-
----
-
-### BarChartOverlay
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/BarChartOverlay.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| from | number | No | - |  |
-| to | number | No | - |  |
-| regions | { from: string; to: string; backgroundColor?: string \| undefined; backgroundOpacity?: number \| undefined; colorTheme?: Record<string, string> \| undefined; tooltipDecorator?: ((data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>>) \| undefined; }[] | No | - |  |
-
----
-
-### BarChartSection
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/BarChartSection.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| from | number | No | - | Starting point in percentage of the chart height. |
-| to | number | No | - | Ending point in percentage of the chart height. |
-| color | "red" \| "green" \| { textColor: string; backgroundColor?: string \| undefined; } | No | - | Color. |
-| title | string | No | - | Section title |
-| titlePosition | "center" \| "left" \| "right" | No | - | Title position relative to section |
-| scaleX | ScaleLinear<number, number, never> \| ScaleTime<number, number, never> \| ScalePoint<string> | No | - |  |
-| scaleY | ScaleLinear<number, number, never> | No | - |  |
-| direction | string | No | - |  |
-| regions | { from: string; to: string; backgroundColor?: string \| undefined; backgroundOpacity?: number \| undefined; colorTheme?: Record<string, string> \| undefined; tooltipDecorator?: ((data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>>) \| undefined; }[] | No | - | Regions for highlighting a specific area by changing the background color. Only works with datestrings for X axis. |
-
----
-
 ### BaseBarChart
 
 BarChart visualizes categorical data with rectangular bars.
 Built on D3.js with responsive sizing and interactive tooltips.
 
+This is the only public entry point for bar charts. Do not import
+`RenderedLinearBarChart`, `RenderedOrdinalBarChart`, `EmptyBarChart`, or
+`LoadingBarChart` directly — `BarChart` selects the correct renderer
+(linear vs. ordinal scale) automatically based on the data type,
+and manages all loading and empty states internally.
+
 Supports horizontal/vertical orientation, stacked/grouped bars,
 and various legend placements.
 
@@ -4661,59 +4594,23 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### EmptyBarChart
+### Legend
 
 **Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/EmptyBarChart.tsx
+**File:** packages/charts/src/components/Legend/Legend.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| data | CategoryData \| LinearData \| TwoCategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| areXLabelsRotated | false \| true | No | - | @deprecated : Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. |
-| barProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "direction" \| "orientation" \| "scale"> & { minWidth?: number \| undefined; gap?: number \| undefined; } | No | - | Native HTML props to forward to each bar. |
-| barRole | "button" \| "img" \| "link" \| "option" | No | - | Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. |
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| dataType | "TwoCategoryData" \| "LinearData" \| "CategoryData" | No | - | Data type override to skip data type inferrence. |
-| direction | string | No | - | Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down". They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getBarAnchorProps | (datum: BarDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the bar is a navigation link. |
-| isBarSelected | (datum: BarDatum) => void | No | - | Method to determine whether a bar is selected or not. |
-| labelDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBarClick | (datum: BarDatum, data: BarDatum[]) => void | No | - | Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. |
-| orientation | string | No | - | Orientation of the bar. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| BarChartDimensions | No | - | BarChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| tooltipDecorator | (data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| xScaleType | "number" \| "Date" \| "dateString" | No | - | X-scale type override to skip x-scale type inferrence. |
-| xAxisStartDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) |
-| xAxisEndDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) |
-| yScaleLogBase | number | No | - | If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
+| children | ReactElement<any, string \| JSXElementConstructor<any>> \| ReactElement<any, string \| JSXElementConstructor<any>>[] \| (data: (Statistic & { color: string; })[], total?: number \| undefined) => ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Children |
+| data | (Statistic & { color: string; })[] | No | - | Data. |
+| isLegendItemSelected | (datum: LegendItemDatum) => void | No | - | Method to determine whether a legend is selected or not. |
+| labelDecorator | (datum: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
+| legendDecorator | (datum: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the variant is "custom". |
+| onLegendItemClick | (datum: LegendItemDatum, data: LegendItemDatum[]) => void | No | - | Method to be called on a click on a legend item. |
+| legendItemRole | "button" \| "img" \| "link" \| "option" | No | - | LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. |
+| variant | "label" \| "value" \| "none" \| "percent" \| "custom" | No | - | Variant. |
 | display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
 | background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
 | backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
@@ -4743,19 +4640,44 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### EmptyLineChart
+### Line
+
+**Package:** @redsift/charts
+**File:** packages/charts/src/components/Line/Line.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| createLine | Line<LinePointDatum> | Yes | - | Line generator used to determine the path of the line. |
+| data | LinePointDatum[] | Yes | - | Points used to compute the line path. |
+| disableAnimations | false \| true | No | - | Disable animations. |
+| previousData | LinePointDatum[] | No | - | Previous data used for animation. |
+| role | "button" \| "img" \| "link" \| "option" | No | - | Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. |
+| isSelected | false \| true | No | - | Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. |
+
+---
+
+### LineChart
+
+LineChart displays trends over time or continuous data.
+Built on D3.js with smooth interpolation and interactive data points.
+
+This is the only public entry point for line charts. Do not import
+`RenderedLineChart`, `EmptyLineChart`, or `LoadingLineChart` directly —
+those are internal sub-components that `LineChart` selects automatically
+based on whether `data` is present and non-empty.
+
+Data format: `LinearData` `[{ key: Date, value: number, label?: string }]`
 
 **Package:** @redsift/charts
-**File:** packages/charts/src/components/LineChart/EmptyLineChart.tsx
+**File:** packages/charts/src/components/LineChart/LineChart.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | data | TwoCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
 | dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
 | emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
 | getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
@@ -4763,7 +4685,7 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
 | legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
 | legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
+| legendProps | Omit<LegendProps, "data" \| "ref" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
 | localeText | LocaleText | No | - | Labels and texts. |
 | margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
 | onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
@@ -4779,6 +4701,9 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
 | descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
 | disableAnimations | false \| true | No | - | Disable animations. |
+| id | string | No | - | Id. |
+| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
+| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
 | descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
 | mode | string | No | - | Whether the chart is static or interactive. |
 | definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
@@ -4815,21 +4740,24 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### EmptyPieChart
+### PieChart
+
+PieChart displays proportional data as slices of a circle.
+Built on D3.js with interactive slices and customizable legends.
+
+Variants: `default`, `spaced`, `donut`, `spacedDonut`
+
+Data format: `CategoryData` `[{ key: string, value: number }]`
 
 **Package:** @redsift/charts
-**File:** packages/charts/src/components/PieChart/EmptyPieChart.tsx
+**File:** packages/charts/src/components/PieChart/PieChart.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| data | CategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| text | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
 | caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
+| data | CategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
 | emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
 | getSliceAnchorProps | (datum: ArcDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the slice is a navigation link. |
 | isHalf | false \| true | No | - | Whether the pie or donut is cut in half or not. |
@@ -4837,7 +4765,7 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | labelDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
 | legendDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
 | legendVariant | "none" \| "internal" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
+| legendProps | Omit<LegendProps, "data" \| "ref" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
 | localeText | LocaleText | No | - | Labels and texts. |
 | onSliceClick | (datum: ArcDatum) => void | No | - | Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. |
 | others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
@@ -4847,6 +4775,7 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
 | middleText | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. |
 | subtext | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. |
+| text | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. |
 | colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
 | variant | "plain" \| "spaced" \| "donut" \| "spacedDonut" | No | - | PieChart variant. |
 | tooltipDecorator | (data: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
@@ -4857,6 +4786,9 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
 | descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
 | disableAnimations | false \| true | No | - | Disable animations. |
+| id | string | No | - | Id. |
+| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
+| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
 | descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
 | mode | string | No | - | Whether the chart is static or interactive. |
 | definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
@@ -4893,19 +4825,23 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### EmptyScatterPlot
+### ScatterPlot
+
+ScatterPlot displays relationships between two numeric variables.
+Built on D3.js with interactive dots and brush selection.
+
+Supports zooming, brushing for multi-select, and dot clustering.
+
+Data format: `CoordinatesCategoryData` `[{ x: number, y: number, category?: string }]`
 
 **Package:** @redsift/charts
-**File:** packages/charts/src/components/ScatterPlot/EmptyScatterPlot.tsx
+**File:** packages/charts/src/components/ScatterPlot/ScatterPlot.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | data | CoordinatesCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
 | getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
 | dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
 | emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
@@ -4915,7 +4851,7 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
 | legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
 | legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant" \| "width"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
+| legendProps | Omit<LegendProps, "data" \| "ref" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
 | localeText | LocaleText | No | - | Labels and texts. |
 | margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
 | onBrush | (selection: [[number, number], [number, number]] \| null, scaleX: ScaleLinear<number, number, never>, scaleY: ScaleLinear<number, number, never>) => void | No | - | Method called on brush. |
@@ -4934,6 +4870,9 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 | description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
 | descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
 | disableAnimations | false \| true | No | - | Disable animations. |
+| id | string | No | - | Id. |
+| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
+| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
 | descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
 | mode | string | No | - | Whether the chart is static or interactive. |
 | definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
@@ -4970,1631 +4909,208 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### Legend
+## Package: @redsift/table
 
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/Legend/Legend.tsx
+### ControlledPagination
+
+**Package:** @redsift/table
+**File:** packages/table/src/components/Pagination/ControlledPagination.tsx
+
+---
+
+### DataGrid
+
+DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
+Built on MUI X DataGrid Pro with Red Sift styling and theming.
+
+Requires MUI Premium license key (set via `MUI_LICENSE_KEY` env variable).
+
+Use `createColumn()` to get pre-configured column definitions with typed filter operators.
+Supported types: `string`, `number`, `date`, `dateTime`, `singleSelect`, `multiSelect`, `tags`.
+For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper needed).
+
+**Package:** @redsift/table
+**File:** packages/table/src/components/DataGrid/DataGrid.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| children | ReactElement<any, string \| JSXElementConstructor<any>> \| ReactElement<any, string \| JSXElementConstructor<any>>[] \| (data: (Statistic & { color: string; })[], total?: number \| undefined) => ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Children |
-| data | (Statistic & { color: string; })[] | No | - | Data. |
-| isLegendItemSelected | (datum: LegendItemDatum) => void | No | - | Method to determine whether a legend is selected or not. |
-| labelDecorator | (datum: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the variant is "custom". |
-| onLegendItemClick | (datum: LegendItemDatum, data: LegendItemDatum[]) => void | No | - | Method to be called on a click on a legend item. |
-| legendItemRole | "button" \| "img" \| "link" \| "option" | No | - | LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. |
-| variant | "label" \| "value" \| "none" \| "percent" \| "custom" | No | - | Variant. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
+| license | string | No | - | License key for MUI Datagrid Pro. |
+| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
+| toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
+| hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
+| paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| theme | "light" \| "dark" | No | - | Theme. |
+| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
-#### Layout Props (12 props)
+---
 
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
+### GridToolbarFilterSemanticField
 
-#### Spacing Props (10 props)
+The GridToolbarFilterSemanticField component.
 
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
+**Package:** @redsift/table
+**File:** packages/table/src/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.tsx
 
-#### Sizing Props (6 props)
+#### Props
 
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| nlpFilterConfig | FilterConfig | Yes | - |  |
+| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - |  |
+| dateFormat | string | No | - |  |
+| defaultModel | string | No | - |  |
+| defaultFilter | CompletionResponse | No | - |  |
+| disablePower | false \| true | No | - |  |
+| localeText | LocaleText | No | - |  |
 
-#### Positioning Props (6 props)
+---
 
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
+### ServerSideControlledPagination
+
+**Package:** @redsift/table
+**File:** packages/table/src/components/Pagination/ServerSideControlledPagination.tsx
 
 ---
 
-### LegendItem
+### StatefulDataGrid
 
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/LegendItem/LegendItem.tsx
+StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
+Preserves filters, sorting, pagination, column visibility, and column widths
+across page refreshes.
+
+Use when users need persistent table preferences. Requires unique `localStorageKey`.
+
+**Package:** @redsift/table
+**File:** packages/table/src/components/StatefulDataGrid/StatefulDataGrid.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| legendDecorator | (datum: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the variant is "custom". |
-| variant | "label" \| "value" \| "none" \| "percent" \| "custom" | No | 'standard' | Variant. |
-| color | string | No | - | Color of the DataPoint. |
-| data | LegendItemDatum | Yes | - | Data. Also state to which the component should end the animation, if any. |
-| dataset | any[] | Yes | - | Entire dataset in which the data point is a part of. |
-| id | string | No | - | Id. Used for accessibility. |
-| index | number | No | - | Position in the list of siblings. Used for placement and selection. |
-| isSelected | false \| true | No | - | Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. |
-| labelDecorator | (data: LegendItemDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying the label before displaying it. |
-| onClick | (data: LegendItemDatum, dataset: any[]) => void | No | - | Method called when a click or keydown occurs on the component. |
-| previousData | LegendItemDatum | No | - | State from which the component should start the animation, if any. |
-| role | "button" \| "img" \| "link" \| "option" | No | - | Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. |
-| tooltipVariant | string | No | - | Tooltip variant. |
+| useRouter | () => { pathname: string; search: string; historyReplace: (newSearch: string) => void; } | Yes | - | Hook returning pathname, search params and a method to update query params. |
+| localStorageVersion | number | No | - | Local Storage version, to upgrade when we want to force a clean out. |
+| previousLocalStorageVersions | number[] | No | - | Previous Local Storage versions to clean out when a new one is released. |
+| license | string | No | - | License key for MUI Datagrid Pro. |
+| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
+| toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
+| hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
+| paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| theme | "light" \| "dark" | No | - | Theme. |
+| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
 ---
 
-### Line
+### TextCell
 
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/Line/Line.tsx
+The Cell component.
+
+**Package:** @redsift/table
+**File:** packages/table/src/components/TextCell/TextCell.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| createLine | Line<LinePointDatum> | Yes | - | Line generator used to determine the path of the line. |
-| data | LinePointDatum[] | Yes | - | Points used to compute the line path. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| previousData | LinePointDatum[] | No | - | Previous data used for animation. |
-| role | "button" \| "img" \| "link" \| "option" | No | - | Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. |
-| isSelected | false \| true | No | - | Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. |
+| badge | ReactNode | No | - | Including Badge Component. |
+| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| leftIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Left Icon Color variant. |
+| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| rightIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Right Icon Color variant. |
+| shieldVariant | "success" \| "warning" \| "question" \| "successLocked" \| "successUnlocked" \| "fail" \| "failLocked" \| "failUnlocked" \| "warningLocked" \| "warningUnlocked" \| "ignored" \| "noData" \| "email" | No | - | Shield variant. |
 
 ---
 
-### LineChart
-
-LineChart displays trends over time or continuous data.
-Built on D3.js with smooth interpolation and interactive data points.
+### Toolbar
 
-Data format: `LinearData` `[{ key: Date, value: number, label?: string }]`
+------
 
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/LineChart/LineChart.tsx
+**Package:** @redsift/table
+**File:** packages/table/src/components/Toolbar/Toolbar.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| data | TwoCategoryData | No | - | Dataset to use to generate the chart. |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "data" \| "ref" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| LineChartDimensions | No | - | LineChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### LoadingBarChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/LoadingBarChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CategoryData \| LinearData \| TwoCategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| areXLabelsRotated | false \| true | No | - | @deprecated : Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. |
-| barProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "direction" \| "orientation" \| "scale"> & { minWidth?: number \| undefined; gap?: number \| undefined; } | No | - | Native HTML props to forward to each bar. |
-| barRole | "button" \| "img" \| "link" \| "option" | No | - | Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. |
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| dataType | "TwoCategoryData" \| "LinearData" \| "CategoryData" | No | - | Data type override to skip data type inferrence. |
-| direction | string | No | - | Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down". They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getBarAnchorProps | (datum: BarDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the bar is a navigation link. |
-| isBarSelected | (datum: BarDatum) => void | No | - | Method to determine whether a bar is selected or not. |
-| labelDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBarClick | (datum: BarDatum, data: BarDatum[]) => void | No | - | Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. |
-| orientation | string | No | - | Orientation of the bar. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| BarChartDimensions | No | - | BarChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| tooltipDecorator | (data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| xScaleType | "number" \| "Date" \| "dateString" | No | - | X-scale type override to skip x-scale type inferrence. |
-| xAxisStartDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) |
-| xAxisEndDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) |
-| yScaleLogBase | number | No | - | If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### LoadingLineChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/LineChart/LoadingLineChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | TwoCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| LineChartDimensions | No | - | LineChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### LoadingPieChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/PieChart/LoadingPieChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| text | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getSliceAnchorProps | (datum: ArcDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the slice is a navigation link. |
-| isHalf | false \| true | No | - | Whether the pie or donut is cut in half or not. |
-| isSliceSelected | (datum: ArcDatum) => boolean \| undefined | No | - | Method to determine whether a slice is selected or not. |
-| labelDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "internal" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| onSliceClick | (datum: ArcDatum) => void | No | - | Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| PieChartDimensions | No | - | PieChart size. |
-| sliceProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "width"> | No | - | Native HTML props to forward to each slice. |
-| sliceRole | "button" \| "img" \| "link" \| "option" | No | - | Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| middleText | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. |
-| subtext | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| variant | "plain" \| "spaced" \| "donut" \| "spacedDonut" | No | - | PieChart variant. |
-| tooltipDecorator | (data: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### LoadingScatterPlot
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/ScatterPlot/LoadingScatterPlot.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CoordinatesCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| hideControlKeyPanel | false \| true | No | - | Whether the Control Keys panel is displayed or not. |
-| isBrushable | false \| true | No | - | Whether the scatter plot dots are selectable using brush or not. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant" \| "width"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBrush | (selection: [[number, number], [number, number]] \| null, scaleX: ScaleLinear<number, number, never>, scaleY: ScaleLinear<number, number, never>) => void | No | - | Method called on brush. |
-| onBrushEnd | (selection: [[number, number], [number, number]] \| null, scaleX?: ScaleLinear<number, number, never> \| undefined, scaleY?: ScaleLinear<number, number, never> \| undefined) => void | No | - | Method called on brush end. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| ScatterPlotDimensions | No | - | ScatterPlot size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| variant | "default" \| "gridded" | No | - | Variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### PieChart
-
-PieChart displays proportional data as slices of a circle.
-Built on D3.js with interactive slices and customizable legends.
-
-Variants: `default`, `spaced`, `donut`, `spacedDonut`
-
-Data format: `CategoryData` `[{ key: string, value: number }]`
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/PieChart/PieChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| data | CategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getSliceAnchorProps | (datum: ArcDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the slice is a navigation link. |
-| isHalf | false \| true | No | - | Whether the pie or donut is cut in half or not. |
-| isSliceSelected | (datum: ArcDatum) => boolean \| undefined | No | - | Method to determine whether a slice is selected or not. |
-| labelDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "internal" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "data" \| "ref" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| onSliceClick | (datum: ArcDatum) => void | No | - | Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| PieChartDimensions | No | - | PieChart size. |
-| sliceProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "width"> | No | - | Native HTML props to forward to each slice. |
-| sliceRole | "button" \| "img" \| "link" \| "option" | No | - | Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| middleText | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. |
-| subtext | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. |
-| text | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| variant | "plain" \| "spaced" \| "donut" \| "spacedDonut" | No | - | PieChart variant. |
-| tooltipDecorator | (data: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### RenderedLinearBarChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/RenderedLinearBarChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | LinearData \| TwoCategoryData | Yes | - |  |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| areXLabelsRotated | false \| true | No | - | @deprecated : Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. |
-| barProps | Omit<SVGProps<SVGGElement>, "ref" \| "orientation" \| "onClick" \| "direction" \| "scale"> & { minWidth?: number \| undefined; gap?: number \| undefined; } | No | - | Native HTML props to forward to each bar. |
-| barRole | "link" \| "button" \| "img" \| "option" | No | - | Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| dataType | "TwoCategoryData" \| "LinearData" \| "CategoryData" | No | - | Data type override to skip data type inferrence. |
-| direction | string | No | - | Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down". They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getBarAnchorProps | (datum: BarDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the bar is a navigation link. |
-| isBarSelected | (datum: BarDatum) => void | No | - | Method to determine whether a bar is selected or not. |
-| labelDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBarClick | (datum: BarDatum, data: BarDatum[]) => void | No | - | Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| BarChartDimensions | No | - | BarChart size. |
-| sortingMethod | string[] \| "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| tooltipDecorator | (data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| xScaleType | "number" \| "Date" \| "dateString" | No | - | X-scale type override to skip x-scale type inferrence. |
-| xAxisStartDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) |
-| xAxisEndDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) |
-| yScaleLogBase | number | No | - | If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### RenderedLineChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/LineChart/RenderedLineChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | TwoCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| LineChartDimensions | No | - | LineChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### RenderedOrdinalBarChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/BarChart/RenderedOrdinalBarChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CategoryData \| LinearData \| TwoCategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| areXLabelsRotated | false \| true | No | - | @deprecated : Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. |
-| barProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "direction" \| "orientation" \| "scale"> & { minWidth?: number \| undefined; gap?: number \| undefined; } | No | - | Native HTML props to forward to each bar. |
-| barRole | "button" \| "img" \| "link" \| "option" | No | - | Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. |
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| dataType | "TwoCategoryData" \| "LinearData" \| "CategoryData" | No | - | Data type override to skip data type inferrence. |
-| direction | string | No | - | Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down". They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getBarAnchorProps | (datum: BarDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the bar is a navigation link. |
-| isBarSelected | (datum: BarDatum) => void | No | - | Method to determine whether a bar is selected or not. |
-| labelDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBarClick | (datum: BarDatum, data: BarDatum[]) => void | No | - | Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. |
-| orientation | string | No | - | Orientation of the bar. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| BarChartDimensions | No | - | BarChart size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| tooltipDecorator | (data: BarDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined, dataset?: ComputedBarProps[] \| undefined, groupedData?: ComputedBarProps[] \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| xScaleType | "number" \| "Date" \| "dateString" | No | - | X-scale type override to skip x-scale type inferrence. |
-| xAxisStartDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) |
-| xAxisEndDateOffset | number | No | - | In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument. For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) |
-| yScaleLogBase | number | No | - | If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### RenderedPieChart
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/PieChart/RenderedPieChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CategoryData | No | - | Dataset to use to generate the chart, should be a list of objects containing a key and a value. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| text | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| caping | number | No | - | Number of categories to use, the rest being put into a new category called "Others". |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| getSliceAnchorProps | (datum: ArcDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the slice is a navigation link. |
-| isHalf | false \| true | No | - | Whether the pie or donut is cut in half or not. |
-| isSliceSelected | (datum: ArcDatum) => boolean \| undefined | No | - | Method to determine whether a slice is selected or not. |
-| labelDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data labels. |
-| legendDecorator | (datum: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "internal" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| onSliceClick | (datum: ArcDatum) => void | No | - | Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. |
-| others | string \| false \| true | No | - | Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. |
-| size | "small" \| "medium" \| "large" \| PieChartDimensions | No | - | PieChart size. |
-| sliceProps | Omit<SVGProps<SVGGElement>, "ref" \| "onClick" \| "width"> | No | - | Native HTML props to forward to each slice. |
-| sliceRole | "button" \| "img" \| "link" \| "option" | No | - | Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| middleText | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. |
-| subtext | string \| ReactElement<any, string \| JSXElementConstructor<any>> \| (data: PieArcDatum<CategoryDatum>[], total: number) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| variant | "plain" \| "spaced" \| "donut" \| "spacedDonut" | No | - | PieChart variant. |
-| tooltipDecorator | (data: ArcDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### RenderedScatterPlot
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/ScatterPlot/RenderedScatterPlot.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CoordinatesCategoryData | No | - | Dataset to use to generate the chart. |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| hideControlKeyPanel | false \| true | No | - | Whether the Control Keys panel is displayed or not. |
-| isBrushable | false \| true | No | - | Whether the scatter plot dots are selectable using brush or not. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "ref" \| "data" \| "variant" \| "width"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBrush | (selection: [[number, number], [number, number]] \| null, scaleX: ScaleLinear<number, number, never>, scaleY: ScaleLinear<number, number, never>) => void | No | - | Method called on brush. |
-| onBrushEnd | (selection: [[number, number], [number, number]] \| null, scaleX?: ScaleLinear<number, number, never> \| undefined, scaleY?: ScaleLinear<number, number, never> \| undefined) => void | No | - | Method called on brush end. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| ScatterPlotDimensions | No | - | ScatterPlot size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| variant | "default" \| "gridded" | No | - | Variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### ScatterPlot
-
-ScatterPlot displays relationships between two numeric variables.
-Built on D3.js with interactive dots and brush selection.
-
-Supports zooming, brushing for multi-select, and dot clustering.
-
-Data format: `CoordinatesCategoryData` `[{ x: number, y: number, category?: string }]`
-
-**Package:** @redsift/charts
-**File:** packages/charts/src/components/ScatterPlot/ScatterPlot.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | CoordinatesCategoryData | No | - | Dataset to use to generate the chart. |
-| getDotAnchorProps | (datum: DotDatum) => AnchorProps | No | - | Method used to define the anchor props to use when the dot is a navigation link. |
-| dotRole | "button" \| "img" \| "link" \| "option" | No | - | Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. |
-| emptyComponent | ReactNode | No | - | Component to use if the chart is empty (replacing the default one). |
-| hideControlKeyPanel | false \| true | No | - | Whether the Control Keys panel is displayed or not. |
-| isBrushable | false \| true | No | - | Whether the scatter plot dots are selectable using brush or not. |
-| isDotSelected | (datum: DotDatum) => boolean \| undefined | No | - | Method to determine whether a dot is selected or not. |
-| labelDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method to override the data point labels. |
-| legendDecorator | (datum: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the legend when the legendVariant is "custom". |
-| legendVariant | "none" \| "externalLabel" \| "externalLabelValue" \| "externalLabelPercent" \| "custom" | No | - | Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. |
-| legendProps | Omit<LegendProps, "data" \| "ref" \| "width" \| "variant"> & { extraLegendItems?: Statistics \| undefined; } | No | - | Props to forward to the Legend block. Can be used to make the legend selectable. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| margins | MarginProps | No | - | Custom margins, used to give more space for axes labels and legend for instance. |
-| onBrush | (selection: [[number, number], [number, number]] \| null, scaleX: ScaleLinear<number, number, never>, scaleY: ScaleLinear<number, number, never>) => void | No | - | Method called on brush. |
-| onBrushEnd | (selection: [[number, number], [number, number]] \| null, scaleX?: ScaleLinear<number, number, never> \| undefined, scaleY?: ScaleLinear<number, number, never> \| undefined) => void | No | - | Method called on brush end. |
-| onDotClick | (datum: DotDatum) => void | No | - | Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. |
-| size | "small" \| "medium" \| "large" \| ScatterPlotDimensions | No | - | ScatterPlot size. |
-| sortingMethod | "none" \| "asc-key" \| "desc-key" \| "asc-value" \| "desc-value" \| string[] \| (a: CategoryDatum, b: CategoryDatum) => 1 \| -1 | No | - | Define how to sort categories. |
-| svgRef | MutableRefObject<SVGSVGElement> | No | - | Reference to the SVG tag. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme \| CustomColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| tooltipDecorator | (data: DotDatum, props?: { index?: number \| undefined; isSelected?: boolean \| undefined; color?: string \| undefined; } \| undefined) => string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". |
-| tooltipVariant | string | No | - | Tooltip variant. |
-| variant | "default" \| "gridded" | No | - | Variant. |
-| theme | "dark" \| "light" | No | - | Theme. |
-| chartProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | No | - | Native HTML props to pass to the chart. |
-| chartRef | RefObject<HTMLDivElement> | No | - | Ref to the chart. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description. |
-| descriptionPosition | "belowTitle" \| "belowChart" | No | - | Whether the description should be placed below the title or below the chart. |
-| disableAnimations | false \| true | No | - | Disable animations. |
-| id | string | No | - | Id. |
-| onReset | () => void | No | - | Method called when the Reset button is displayed (defines whether or not the button should be displayed). |
-| title | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Title. |
-| descriptionForAssistiveTechnology | string | No | - | Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. |
-| mode | string | No | - | Whether the chart is static or interactive. |
-| definition | string | No | - | Small text explaining which kind of chart is presenting and what's its basic composition. |
-| xAxisDefinition | string | No | - | Small text explaining the basic composition of the x-axis, if any. |
-| yAxisDefinition | string | No | - | Small text explaining the basic composition of the y-axis, if any. |
-| interactionExplanation | string | No | - | Small text explaining how the chart is interactive, if any. |
-| dataTableRepresentation | { header: ReactElement<any, string \| JSXElementConstructor<any>>; body: ReactElement<any, string \| JSXElementConstructor<any>>; } | No | - | Table representation of the chart. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-## Package: @redsift/table
-
-### ControlledPagination
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/Pagination/ControlledPagination.tsx
-
----
-
-### DataGrid
-
-DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
-Built on MUI X DataGrid Pro with Red Sift styling and theming.
-
-Requires MUI Premium license key (set via `MUI_LICENSE_KEY` env variable).
-
-Use `createColumn()` to get pre-configured column definitions with typed filter operators.
-Supported types: `string`, `number`, `date`, `dateTime`, `singleSelect`, `multiSelect`, `tags`.
-For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper needed).
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/DataGrid/DataGrid.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| license | string | No | - | License key for MUI Datagrid Pro. |
-| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
-| toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
-| hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
-| paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
-| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
-| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
-
----
-
-### GridToolbarFilterSemanticField
-
-The GridToolbarFilterSemanticField component.
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| nlpFilterConfig | FilterConfig | Yes | - |  |
-| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - |  |
-| dateFormat | string | No | - |  |
-| defaultModel | string | No | - |  |
-| defaultFilter | CompletionResponse | No | - |  |
-| disablePower | false \| true | No | - |  |
-| localeText | LocaleText | No | - |  |
-
----
-
-### ServerSideControlledPagination
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/Pagination/ServerSideControlledPagination.tsx
-
----
-
-### StatefulDataGrid
-
-StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
-Preserves filters, sorting, pagination, column visibility, and column widths
-across page refreshes.
-
-Use when users need persistent table preferences. Requires unique `localStorageKey`.
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/StatefulDataGrid/StatefulDataGrid.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| useRouter | () => { pathname: string; search: string; historyReplace: (newSearch: string) => void; } | Yes | - | Hook returning pathname, search params and a method to update query params. |
-| localStorageVersion | number | No | - | Local Storage version, to upgrade when we want to force a clean out. |
-| previousLocalStorageVersions | number[] | No | - | Previous Local Storage versions to clean out when a new one is released. |
-| license | string | No | - | License key for MUI Datagrid Pro. |
-| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
-| toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
-| hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
-| paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
-| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
-| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
-
----
-
-### TextCell
-
-The Cell component.
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/TextCell/TextCell.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| badge | ReactNode | No | - | Including Badge Component. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Left Icon Color variant. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Right Icon Color variant. |
-| shieldVariant | "success" \| "warning" \| "question" \| "successLocked" \| "successUnlocked" \| "fail" \| "failLocked" \| "failUnlocked" \| "warningLocked" \| "warningUnlocked" \| "ignored" \| "noData" \| "email" | No | - | Shield variant. |
-
----
-
-### Toolbar
-
-------
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/Toolbar/Toolbar.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| columnsButtonProps | GridToolbarColumnsButtonProps \| GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the column button. |
-| columnsButtonRef | RefObject<HTMLButtonElement> | No | - | Column button ref. |
-| densityButtonProps | GridToolbarDensitySelectorProps \| GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the density button. |
-| densityButtonRef | RefObject<HTMLButtonElement> | No | - | Density button ref. |
-| exportButtonProps | GridToolbarExportProps | No | - | Props to forward to the export button. |
-| exportButtonRef | RefObject<HTMLButtonElement> | No | - | Export button ref. |
-| filterButtonProps | GridToolbarFilterButtonProps | No | - | Props to forward to the filter button. |
-| filterButtonRef | RefObject<HTMLButtonElement> | No | - | Filter button ref. |
-| hasColumnsButton | false \| true | No | - | Whether the columns button is displayed or not. |
-| hasDensityButton | false \| true | No | - | Whether the density button is displayed or not. |
-| hasExportButton | false \| true | No | - | Whether the export button is displayed or not. |
-| hasFilterButton | false \| true | No | - | Whether the filter button is displayed or not. |
-| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - | Configuration object for NLP filter. undefined if disabled. |
-| semanticFilterProps | GridToolbarFilterSemanticProps | No | - |  |
-| showQuickFilter | false \| true | No | - | Whether you want to show the quick filter or not. |
-
----
-
-### ToolbarWrapper
-
-**Package:** @redsift/table
-**File:** packages/table/src/components/ToolbarWrapper/ToolbarWrapper.tsx
-
----
-
-## Package: @redsift/dashboard
-
-### ChartEmptyState
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/ChartEmptyState/ChartEmptyState.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| onReset | () => void | No | - | Method to call when the reset button is pressed. Also conditioned whether the button is displayed or not. |
-| resetLabel | string | No | - | Reset button label. |
-| subtitle | string | No | - | Subtitle. |
-| title | string | No | - | Title. |
-
----
-
-### CrossfilteredDashboard.Card
-
-CrossfilteredDashboard with attached sub-components.
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/CrossfilteredDashboard/CrossfilteredDashboard.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | JSONArray | Yes | - | The full dataset for crossfilter. |
-| children | ReactNode | Yes | - | Dashboard content — use CrossfilteredDashboard.Card, .PieChart, .BarChart, .Grid sub-components. |
-
----
-
-### Dashboard
-
-Dashboard provides a context for connected, filterable visualizations.
-Uses Crossfilter.js for high-performance multi-dimensional filtering.
-
-Wrap charts and DataGrids with `WithFilters` to enable cross-filtering.
-When one chart is filtered, all connected charts update automatically.
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/Dashboard/Dashboard.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | JSONArray | Yes | - | Dataset that will be share across every components within the dashboard. |
-| dataGridApiRef | MutableRefObject<GridApiPremium \| null> | No | - | Datagrid API Ref. MUI v8: can be null initially. |
-
----
-
-### DataCard
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DataCard/DataCard.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | "error" \| "success" \| "warning" \| "info" | No | 'info' | Color variant for the card border. Maps to notification color tokens. |
-| isLoading | false \| true | No | - | Whether the card is in a loading state. When true, the header is hidden. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### DataCardBody
-
-DataCardBody is the main content area of a DataCard.
-Typically contains DataRow children.
-
-When `columns` is set, children are laid out in a CSS Grid with size-aware spanning:
-- `large` DataRows claim their own column and span all rows
-- Other DataRows fill remaining columns evenly
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DataCardBody/DataCardBody.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| columns | number | No | - | Number of columns for multi-column layout. When set, children are laid out in a CSS Grid. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### DataCardHeader
-
-DataCardHeader displays an icon and title that floats on top of
-the DataCard border. Optionally wraps in a Tooltip.
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DataCardHeader/DataCardHeader.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| icon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | Yes | - | Can be a string or an array of strings containing `d` property of the `path` SVG element. Can also be a ReactElement. |
-| title | string | Yes | - | Title text displayed in the header. |
-| tooltip | string | No | - | Optional tooltip text displayed on hover. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### DataCardListbox
-
-DataCardListbox is a styled Listbox for use inside a DataCard.
-Designed to hold DataRow children for filter-selection interactions.
-
-When `columns` is set, children are laid out in a CSS Grid with size-aware spanning:
-- `large` DataRows claim their own column and span all rows
-- Other DataRows fill remaining columns evenly
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DataCardListbox/DataCardListbox.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| columns | number | No | - | Number of columns for multi-column layout. When set, children are laid out in a CSS Grid. |
-| defaultValues | string[] | No | - | Default selected values. Used for uncontrolled version. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| isInvalid | false \| true | No | - | Whether the component is invalid or not. |
-| isReadOnly | false \| true | No | - | Whether the component is read only or not. |
-| isRequired | false \| true | No | - | Whether the component is required or not. |
-| label | string | No | - | Label of the switch group. |
-| onChange | (values: string[]) => void | No | - | Method to handle component change. |
-| selectionMode | "single" \| "multiple" | No | 'single' | Whether the listbox allows multiple selections or single ones. |
-| values | string[] | No | - | Currently selected values. Used for controlled version. |
-| variant | "standalone" \| "unstyled" | No | 'standalone' | Whether the Listbox is used as standalone or is unstyled within another component. |
-| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
-| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
-| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
-| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
-| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
-| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
-| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
-| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
-| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
-| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
-
-#### Layout Props (12 props)
-
-Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
-
-#### Spacing Props (10 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### DataRow
-
-DataRow displays a formatted number alongside a legend label.
-When `href` is provided, it renders as a clickable link.
-Otherwise, it renders as a static display.
-
-Use `as` to provide a custom link component (e.g., React Router's Link).
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DataRow/DataRow.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| as | "symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| "center" \| "search" \| ComponentClass<any, any> \| FunctionComponent<any> | No | - | Prop to pass a custom react component instead of a simple HTML anchor (useful for Next.js or React Router Link component). |
-| filterIcon | string | No | mdiFilterVariantPlus | Optional icon path displayed as a filter action indicator. Shown when `hasFilterIcon` is true and `onClick` is provided. |
-| hasFilterIcon | false \| true | No | - | Whether the filter action icon is visible. When true and `onClick` is provided, shows the filter icon. |
-| isSelected | false \| true | No | - | Whether the row is visually selected. Only applies to the button variant (outside a Listbox). Inside a Listbox, selection is managed by the Listbox context. |
-| href | string | No | - | Navigation URL. When provided, the row renders as a link. |
-| isCentered | false \| true | No | - | Whether the content is centered within the row. |
-| isLoading | false \| true | No | - | Whether the row is in a loading state. Renders skeleton placeholders. |
-| legend | string | Yes | - | The label text displayed next to the number. |
-| rowIndex | null \| number | No | - | Row index for 2D grid keyboard navigation within a multi-column listbox. Injected by DataCardListbox when `columns` is set. |
-| size | "small" \| "xsmall" \| "medium" \| "large" | No | 'medium' | Size variant controlling font size, weight, height, and layout direction. |
-| labelDecorator | (label: string) => string | No | - | Optional transform function applied to the legend text before display. |
-| tooltip | string | No | - | Optional tooltip text displayed on hover (only for link variant). |
-| value | number | Yes | - | The numeric value to display. |
-
-#### Layout Props (14 props)
-
-Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
-
-#### Spacing Props (5 props)
-
-Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
-
-#### Sizing Props (6 props)
-
-Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
-
-#### Positioning Props (6 props)
-
-Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
-
----
-
-### DrilldownDashboard.Card
-
-DrilldownDashboard with attached sub-components.
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/DrilldownDashboard/DrilldownDashboard.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| data | JSONArray | Yes | - | The full dataset. |
-| computeAggregates | ComputeAggregates | Yes | - | Function to compute aggregates from the dataset. Called once and memoized. |
-| children | ReactNode | Yes | - | DataGrid columns. |
-
----
-
-### FilterableBarChart
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/FilterableBarChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
+| columnsButtonProps | GridToolbarColumnsButtonProps \| GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the column button. |
+| columnsButtonRef | RefObject<HTMLButtonElement> | No | - | Column button ref. |
+| densityButtonProps | GridToolbarDensitySelectorProps \| GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the density button. |
+| densityButtonRef | RefObject<HTMLButtonElement> | No | - | Density button ref. |
+| exportButtonProps | GridToolbarExportProps | No | - | Props to forward to the export button. |
+| exportButtonRef | RefObject<HTMLButtonElement> | No | - | Export button ref. |
+| filterButtonProps | GridToolbarFilterButtonProps | No | - | Props to forward to the filter button. |
+| filterButtonRef | RefObject<HTMLButtonElement> | No | - | Filter button ref. |
+| hasColumnsButton | false \| true | No | - | Whether the columns button is displayed or not. |
+| hasDensityButton | false \| true | No | - | Whether the density button is displayed or not. |
+| hasExportButton | false \| true | No | - | Whether the export button is displayed or not. |
+| hasFilterButton | false \| true | No | - | Whether the filter button is displayed or not. |
+| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - | Configuration object for NLP filter. undefined if disabled. |
+| semanticFilterProps | GridToolbarFilterSemanticProps | No | - |  |
+| showQuickFilter | false \| true | No | - | Whether you want to show the quick filter or not. |
 
 ---
 
-### FilterableDataCard
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/FilterableDataCard.tsx
-
-#### Props
+### ToolbarWrapper
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
+**Package:** @redsift/table
+**File:** packages/table/src/components/ToolbarWrapper/ToolbarWrapper.tsx
 
 ---
 
-### FilterableDataGrid
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/FilterableDataGrid.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
-
----
+## Package: @redsift/dashboard
 
-### FilterablePieChart
+### ChartEmptyState
 
 **Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/FilterablePieChart.tsx
+**File:** packages/dashboard/src/components/ChartEmptyState/ChartEmptyState.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
+| onReset | () => void | No | - | Method to call when the reset button is pressed. Also conditioned whether the button is displayed or not. |
+| resetLabel | string | No | - | Reset button label. |
+| subtitle | string | No | - | Subtitle. |
+| title | string | No | - | Title. |
 
 ---
 
-### FilterableScatterPlot
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/FilterableScatterPlot.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
+### Dashboard
 
----
+Dashboard provides a context for connected, filterable visualizations.
+Uses Crossfilter.js for high-performance multi-dimensional filtering.
 
-### PdfDocument
+Wrap charts and DataGrids with `WithFilters` to enable cross-filtering.
+When one chart is filtered, all connected charts update automatically.
 
 **Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/PdfExportButton/PdfDocument.tsx
+**File:** packages/dashboard/src/components/Dashboard/Dashboard.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| dashboardImage | string | Yes | - |  |
-| dataTable | PdfTableData | No | - |  |
-| introduction | string | No | - |  |
-| localeText | LocaleText | No | - |  |
-| logo | string | No | - |  |
-| primaryColor | string | Yes | - |  |
+| data | JSONArray | Yes | - | Dataset that will be share across every components within the dashboard. |
+| dataGridApiRef | MutableRefObject<GridApiPremium \| null> | No | - | Datagrid API Ref. MUI v8: can be null initially. |
 
 ---
 
-### PdfExportButton
+### DataCard
 
 **Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/PdfExportButton/PdfExportButton.tsx
+**File:** packages/dashboard/src/components/DataCard/DataCard.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| componentRef | RefObject<HTMLElement> | No | - | Ref to the DOM component to export. By default, will be the ref to the parent Dashboard. |
-| fileName | string | No | - | Name of the exported PDF file. |
-| introduction | string | No | - | Text to display at the beginning of the PDF. |
-| localeText | LocaleText | No | - | Labels and texts. |
-| logo | string | No | - | Image to put at the top of the PDF (SVG format not supported). |
-| onClick | () => void | No | - | Function to be executed when button is clicked. |
-| primaryColor | string | No | - | Color used for the header and footer of the PDF. |
-| color | string | No | 'primary' | Color variant. |
-| fullWidth | false \| true | No | - | Whether the component take the full width or not. |
-| isActive | false \| true | No | - | Whether the component is active or not. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| isHovered | false \| true | No | - | Whether the component is hovered or not. |
-| isLoading | false \| true | No | - | Whether the component is in a loading state or not. |
-| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| leftIconProps | Omit<IconProps, "icon" \| "ref"> | No | - | Props to add to the left icon. |
-| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
-| rightIconProps | Omit<IconProps, "icon" \| "ref"> | No | - | Props to add to the right icon. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
+| color | "error" \| "success" \| "warning" \| "info" | No | 'info' | Color variant for the card border. Maps to notification color tokens. |
+| isLoading | false \| true | No | - | Whether the card is in a loading state. When true, the header is hidden. |
 
 #### Layout Props (14 props)
 
@@ -6612,420 +5128,319 @@ Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`,
 
 Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
----
-
-### TimeSeriesBarChart
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/TimeSeriesBarChart/TimeSeriesBarChart.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| caption | string | No | - | Caption. |
-| areXLabelsRotated | false \| true | No | - | Whether the x axis labels are rotated or not. |
-| columnToFilter | string | No | - | Field value of the DataGrid column to filter. |
-| data | JSONArray | No | - | Dataset to use to generate the chart, if no context is provided. |
-| dateTimeFieldName | string | Yes | - | Name of the dataset field that contains the datetime value. |
-| dateTimeFormat | string | No | - | Format used for the date and time values in the dataset by d3.js. Should follow https://github.com/d3/d3-time-format#locale_format. |
-| dateTimeGroup | "hour" \| "day" \| "week" \| "month" \| "year" | No | 'month' | Datetime unit to used to group values and for x units. |
-| dimension | DimensionSelector | Yes | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: string[] \| undefined, allFiltered?: JSONArray \| undefined) => void | No | - | Method to call when a filter occured on the chart. |
-| size | "small" \| "large" \| "medium" | No | 'medium' | TimeSeriesChart size. |
-| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
-| title | string | No | - | Title. |
-| stackedCategory | string | No | - | Dataset key to use to stack values. |
-| xAxisLabel | string | No | - | X Axis Label. |
-| yAxisLabel | string | No | - | Y Axis Label. |
-
----
-
-### WithFilters
-
-**Package:** @redsift/dashboard
-**File:** packages/dashboard/src/components/WithFilters/WithFilters.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
-| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
-| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
-| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
-| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
-| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
-| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
-| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
-| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
-| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
-
----
-
-## Package: @redsift/products
-
-### ChartSankey
-
-Wrapper component that provides a React-friendly unique ID via useId()
-instead of using a global counter variable.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/charts/ChartSankey.tsx
-
----
-
-### CheckBox
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/CheckBox.tsx
-
----
-
-### ChecklistContainer
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/Checklist/Checklist.tsx
-
----
-
-### ChecklistRenderer
-
-ChecklistRenderer - Renders categorized checklists within DetailedCard sections
-
-Extracted from SignalCardNormal to improve code organization.
-Used by VMCCertificate, SafeSVG, and other checklist-based sections.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/ChecklistRenderer.tsx
+#### Usage Rules
 
-#### Props
+- ⚠️ DataCard.Header, DataCard.Body, and DataCard.Listbox must be direct children of <DataCard>. Never nest them inside each other (e.g. Listbox inside Body) — nesting doubles margins and breaks layout.
+- ⚠️ Use DataCard.Body for static/link DataRow children. Use DataCard.Listbox for interactive filter-selection DataRow children. Do not combine both in one DataCard.
+- ⚠️ The `slot` prop is not supported. Do not pass slot="heading" or similar — use the compound sub-component API instead.
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| infoItemsCategories | any[] | Yes | - | Array of category objects containing items to render. Accepts any[] for backwards compatibility with existing prop types. |
-| isCollapsible | false \| true | No | true | Whether sections are collapsible |
-| areAllCollapsed | false \| true | No | - | Whether all sections are collapsed |
-| t | (key: string) => string | Yes | - | Translation function for captions |
+#### Disambiguation
 
----
+⚠️ DataCard is a purpose-built KPI/metric tile from @redsift/dashboard. This is the correct component 9 out of 10 times when building "a card with a big number" or "summary cards above a grid". Do NOT use Card or DetailedCard for this.
 
-### DeliverabilityDescriptionContainer
+#### Common Anti-Patterns
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/components/CardDescriptionStyles.tsx
+- ❌ <Card style={{ borderLeft: "4px solid green" }}> for KPI tiles → ✅ <DataCard color="success"> — DataCard is purpose-built for metric tiles.
 
 ---
 
-### Dialog
+### DataCardBody
 
-RadarDialog displays Radar AI interactions in a branded modal dialog.
-Pre-styled with Radar branding, scatter grid background, and pulsing animation.
+DataCardBody is the main content area of a DataCard.
+Typically contains DataRow children.
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/radar-dialog/RadarDialog.tsx
+When `columns` is set, children are laid out in a CSS Grid with size-aware spanning:
+- `large` DataRows claim their own column and span all rows
+- Other DataRows fill remaining columns evenly
+
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/DataCardBody/DataCardBody.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| color | string | No | - | Button color that will be forward to the trigger. |
-| children | ReactNode | Yes | - | Children. Can only be DialogTrigger and DialogContent. |
-| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
-| hasCloseButton | false \| true | No | true | Whether the Close icon button is displayed or not. |
-| initialFocus | number \| MutableRefObject<HTMLElement \| null> \| "header" \| "body" \| "actions" | No | - | Which element to initially focus. Can be either a number (tabbable index), a ref to en element, or a shortcut pointing towards a section of the dialog. See the accessibility section in the documentation to know which one to use. |
-| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
-| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
-| size | "small" \| "medium" \| "large" \| "xlarge" \| { width?: string \| undefined; maxWidth?: string \| undefined; minWidth?: string \| undefined; } | No | 'medium' | Dialog size. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| triggerClassName | string | No | - | Class name to append to the trigger. |
-
----
+| columns | number | No | - | Number of columns for multi-column layout. When set, children are laid out in a CSS Grid. |
+| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
+| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
+| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
+| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
+| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
+| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
+| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
+| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
+| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
+| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
 
-### Dialog
+#### Layout Props (12 props)
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/radar-dialog/RadarSimpleDialog.tsx
+Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
 
-#### Props
+#### Spacing Props (10 props)
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | string | No | - | Button color that will be forward to the trigger. |
-| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
-| hasCloseButton | false \| true | No | true | Whether the Close icon button is displayed or not. |
-| initialFocus | number \| "body" \| "header" \| MutableRefObject<HTMLElement \| null> \| "actions" | No | - | Which element to initially focus. Can be either a number (tabbable index), a ref to en element, or a shortcut pointing towards a section of the dialog. See the accessibility section in the documentation to know which one to use. |
-| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
-| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
-| size | "small" \| "medium" \| "large" \| "xlarge" \| { width?: string \| undefined; maxWidth?: string \| undefined; minWidth?: string \| undefined; } | No | 'medium' | Dialog size. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| triggerClassName | string | No | - | Class name to append to the trigger. |
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
 
----
+#### Sizing Props (6 props)
 
-### DmarcPromoBanner
+Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
 
-Promotional banner for OnDMARC displayed at the top of the DMARC signal card.
-When useInvestigateColors is true, uses website button tokens (matching SignalCardButton).
-When false, uses the DS Button component.
-Text uses CSS variables (--sc-font-body, --sc-text-color) which adapt based on the theme.
+#### Positioning Props (6 props)
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardDmarc/DmarcPromoBanner.tsx
+Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
-#### Props
+#### Usage Rules
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| text | string | Yes | - | Translated banner text |
-| buttonLabel | string | Yes | - | Translated button label |
-| useInvestigateColors | false \| true | No | false | Use Investigate-specific styling for the button. When false, uses DS Button. |
-| href | string | No | https://iam.redsift.cloud/signup?redirectapp=cloud&product=ondmarc | Override the button href (e.g. to add UTM parameters). Defaults to the OnDMARC signup URL. |
+- ⚠️ Must be a direct child of <DataCard>. Do not place DataCard.Listbox or DataCard.Header inside DataCard.Body.
+- ⚠️ Children should be <DataRow> components.
 
 ---
 
-### DmarcSummaryBoxes
-
-DmarcSummaryBoxes renders two side-by-side summary boxes for the DMARC card.
-
-- Box 1 ("Email: Compliance") summarises whether the specific email passed DMARC.
-  Hidden in domain-analyzer mode (no email to evaluate) and when result is an error.
-- Box 2 ("Domain: Policy") summarises the domain's DMARC policy strength. Always shown.
+### DataCardHeader
 
-On smaller viewports (≤765px) the boxes stack vertically.
+DataCardHeader displays an icon and title that floats on top of
+the DataCard border. Optionally wraps in a Tooltip.
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardDmarc/DmarcSummaryBoxes.tsx
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/DataCardHeader/DataCardHeader.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| dmarc | undefined \| DmarcProps | Yes | - |  |
-| isDomainAnalyzer | false \| true | No | false |  |
-| cardType | "warning" \| "good" \| "danger" \| "info" \| "unknown" | No | - | Card-level status from signal-logic. Used to distinguish permerror sub-cases (rua present → warning, no rua → danger). |
-| t | (key: string, params?: Record<string, unknown> \| undefined) => string | Yes | - |  |
+| icon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | Yes | - | Can be a string or an array of strings containing `d` property of the `path` SVG element. Can also be a ReactElement. |
+| title | string | Yes | - | Title text displayed in the header. |
+| tooltip | string | No | - | Optional tooltip text displayed on hover. |
 
----
+#### Layout Props (14 props)
+
+Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
 
-### ExpandableDescription
+#### Spacing Props (5 props)
 
-ExpandableDescription - Isolated description component with its own state
-to prevent parent re-renders when toggling description visibility.
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/ExpandableDescription.tsx
+#### Sizing Props (6 props)
 
-#### Props
+Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| shortDescription | ReactNode | Yes | - |  |
-| additionalDescription | ReactNode | No | - |  |
-| hasAdditionalContent | false \| true | Yes | - |  |
-| showShowMoreButton | false \| true | Yes | - |  |
-| showCTAButton | false \| true | Yes | - |  |
-| onCTAButtonClick | () => void | No | - |  |
-| ctaButtonName | string | No | - |  |
-| t | TranslationFn | Yes | - |  |
-| onHeightChange | () => void | No | - |  |
-| useInvestigateColors | false \| true | No | - |  |
+#### Positioning Props (6 props)
 
----
+Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
-### ExtractedCategoryContent
+#### Usage Rules
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/SignalCardExtractedItems.tsx
+- ⚠️ Must be a direct child of <DataCard>, not nested inside DataCard.Body or DataCard.Listbox.
 
 ---
 
-### ExtractedItem
+### DataCardListbox
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/SignalCardExtractedItems.tsx
+DataCardListbox is a styled Listbox for use inside a DataCard.
+Designed to hold DataRow children for filter-selection interactions.
+
+When `columns` is set, children are laid out in a CSS Grid with size-aware spanning:
+- `large` DataRows claim their own column and span all rows
+- Other DataRows fill remaining columns evenly
+
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/DataCardListbox/DataCardListbox.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| type | any | Yes | - |  |
-| theme | any | Yes | - |  |
-| label | any | Yes | - |  |
-| text | any | Yes | - |  |
-| inline | false \| true | No | true |  |
-| useCodeBlock | false \| true | No | false |  |
-| extractionBox | { caption?: ExtractionCaptionType \| undefined; } | No | - |  |
-
----
-
-### ExtractionBox
+| columns | number | No | - | Number of columns for multi-column layout. When set, children are laid out in a CSS Grid. |
+| defaultValues | string[] | No | - | Default selected values. Used for uncontrolled version. |
+| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
+| isInvalid | false \| true | No | - | Whether the component is invalid or not. |
+| isReadOnly | false \| true | No | - | Whether the component is read only or not. |
+| isRequired | false \| true | No | - | Whether the component is required or not. |
+| label | string | No | - | Label of the switch group. |
+| onChange | (values: string[]) => void | No | - | Method to handle component change. |
+| selectionMode | "single" \| "multiple" | No | 'single' | Whether the listbox allows multiple selections or single ones. |
+| values | string[] | No | - | Currently selected values. Used for controlled version. |
+| variant | "standalone" \| "unstyled" | No | 'standalone' | Whether the Listbox is used as standalone or is unstyled within another component. |
+| display | "inline" \| "inherit" \| "grid" \| "block" \| "inline-block" \| "flex" \| "inline-flex" \| "inline-grid" | No | - | Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. |
+| background | string | No | - | The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. |
+| backgroundColor | string | No | - | The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. |
+| border | string | No | - | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. |
+| borderTop | string | No | - | The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. |
+| borderBottom | string | No | - | The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. |
+| borderLeft | string | No | - | The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. |
+| borderRight | string | No | - | The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. |
+| borderRadius | string | No | - | The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. |
+| boxShadow | string | No | - | The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. |
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/components/InfoSectionStyles.tsx
+#### Layout Props (12 props)
 
----
+Inherits standard layout props: `alignContent`, `alignItems`, `flexDirection`, `flexWrap`, `gap`, `justifyContent`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateAreas`, `gridTemplateColumns`, `gridTemplateRows`, `justifyItems`
 
-### GlossaryTag
+#### Spacing Props (10 props)
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/GlossaryTag/GlossaryTag.tsx
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`, `padding`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingTop`
 
----
+#### Sizing Props (6 props)
 
-### IconContainer
+Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/Icons/containers/IconContainer.tsx
+#### Positioning Props (6 props)
 
----
+Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
-### InfoItemContainer
+#### Usage Rules
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/components/InfoItemElements.tsx
+- ⚠️ Must be a direct child of <DataCard>. Do not place DataCard.Body or DataCard.Header inside DataCard.Listbox.
+- ⚠️ Children should be <DataRow> components with onClick and hasFilterIcon for drilldown interactions.
 
 ---
 
-### LazyChartSankey
+### DataRow
+
+DataRow displays a formatted number alongside a legend label.
+When `href` is provided, it renders as a clickable link.
+Otherwise, it renders as a static display.
 
-Lazy-loaded Sankey chart that defers D3 bundle loading until render.
+Use `as` to provide a custom link component (e.g., React Router's Link).
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/charts/LazyChartSankey.tsx
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/DataRow/DataRow.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| data | SankeyData | Yes | - |  |
-| options | ChartSankeyOptions | No | - |  |
-| fallback | ReactNode | No | - | Fallback to show while loading. Defaults to a placeholder with matching dimensions. |
-
----
-
-### MemoizedSankeyChart
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardFcrdns/MemoizedSankeyChart.tsx
+| as | "symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| "center" \| "search" \| ComponentClass<any, any> \| FunctionComponent<any> | No | - | Prop to pass a custom react component instead of a simple HTML anchor (useful for Next.js or React Router Link component). |
+| filterIcon | string | No | mdiFilterVariantPlus | Optional icon path displayed as a filter action indicator. Shown when `hasFilterIcon` is true and `onClick` is provided. |
+| hasFilterIcon | false \| true | No | - | Whether the filter action icon is visible. When true and `onClick` is provided, shows the filter icon. |
+| isSelected | false \| true | No | - | Whether the row is visually selected. Only applies to the button variant (outside a Listbox). Inside a Listbox, selection is managed by the Listbox context. |
+| href | string | No | - | Navigation URL. When provided, the row renders as a link. |
+| isCentered | false \| true | No | - | Whether the content is centered within the row. |
+| isLoading | false \| true | No | - | Whether the row is in a loading state. Renders skeleton placeholders. |
+| legend | string | Yes | - | The label text displayed next to the number. |
+| rowIndex | null \| number | No | - | Row index for 2D grid keyboard navigation within a multi-column listbox. Injected by DataCardListbox when `columns` is set. |
+| size | "small" \| "xsmall" \| "medium" \| "large" | No | 'medium' | Size variant controlling font size, weight, height, and layout direction. |
+| labelDecorator | (label: string) => string | No | - | Optional transform function applied to the legend text before display. |
+| tooltip | string | No | - | Optional tooltip text displayed on hover (only for link variant). |
+| value | number | Yes | - | The numeric value to display. |
 
-#### Props
+#### Layout Props (14 props)
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| nodes | SankeyNode[] | Yes | - |  |
-| links | SankeyLink[] | Yes | - |  |
-| width | number | Yes | - |  |
-| height | number | Yes | - |  |
-| marginRight | number | Yes | - |  |
-| marginLeft | number | Yes | - |  |
-| marginBottom | number | Yes | - |  |
-| matchingPath | any | Yes | - |  |
-| chartId | string | Yes | - |  |
+Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
 
----
+#### Spacing Props (5 props)
 
-### MenuButton
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
 
-The RadarMenuButton component.
+#### Sizing Props (6 props)
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/radar-menu-button/RadarMenuButton.tsx
+Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
 
-#### Props
+#### Positioning Props (6 props)
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| color | string | No | - | Button color that will be forward to the trigger. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description of the menu button. |
-| descriptionProps | Omit<TextProps, "ref"> | No | - | Additional description properties. |
-| isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| label | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Label of the menu button. |
-| labelProps | Omit<TextProps, "ref"> | No | - | Additional label properties. |
-| triggerClassName | string | No | - | Class name to append to the trigger. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | - | Button variant that will be forward to the trigger. |
-| theme | "light" \| "dark" | No | - | Theme. |
-| wrapperProps | Omit<FlexboxProps, "ref"> | No | - | Props to forward to the wrapper. |
-| width | number \| "trigger-width" \| "available-width" | No | - | Popover content width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| minWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content min width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| maxWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| children | ReactNode | Yes | - | Children. Can only be PopoverTrigger and PopoverContent. |
-| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
-| placement | "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" | No | 'bottom' | Default placement of the popover. |
-| isModal | false \| true | No | false | Whether the popover is a modal or not. |
-| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
-| offset | number | No | 2 | Space between trigger and content (in pixels). |
-| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
-| overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
-| role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
+Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
 ---
 
-### MenuButton
-
-The RadarSimpleMenuButton component.
+### PdfExportButton
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/radar-menu-button/RadarSimpleMenuButton.tsx
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/PdfExportButton/PdfExportButton.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| color | string | No | - | Button color that will be forward to the trigger. |
-| description | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Description of the menu button. |
-| descriptionProps | Omit<TextProps, "ref"> | No | - | Additional description properties. |
+| componentRef | RefObject<HTMLElement> | No | - | Ref to the DOM component to export. By default, will be the ref to the parent Dashboard. |
+| fileName | string | No | - | Name of the exported PDF file. |
+| introduction | string | No | - | Text to display at the beginning of the PDF. |
+| localeText | LocaleText | No | - | Labels and texts. |
+| logo | string | No | - | Image to put at the top of the PDF (SVG format not supported). |
+| onClick | () => void | No | - | Function to be executed when button is clicked. |
+| primaryColor | string | No | - | Color used for the header and footer of the PDF. |
+| color | string | No | 'primary' | Color variant. |
+| fullWidth | false \| true | No | - | Whether the component take the full width or not. |
+| isActive | false \| true | No | - | Whether the component is active or not. |
 | isDisabled | false \| true | No | - | Whether the component is disabled or not. |
-| label | string \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Label of the menu button. |
-| labelProps | Omit<TextProps, "ref"> | No | - | Additional label properties. |
-| triggerClassName | string | No | - | Class name to append to the trigger. |
-| variant | "primary" \| "secondary" \| "unstyled" | No | - | Button variant that will be forward to the trigger. |
+| isHovered | false \| true | No | - | Whether the component is hovered or not. |
+| isLoading | false \| true | No | - | Whether the component is in a loading state or not. |
+| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| leftIconProps | Omit<IconProps, "icon" \| "ref"> | No | - | Props to add to the left icon. |
+| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| rightIconProps | Omit<IconProps, "icon" \| "ref"> | No | - | Props to add to the right icon. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| wrapperProps | Omit<FlexboxProps, "ref"> | No | - | Props to forward to the wrapper. |
-| width | number \| "trigger-width" \| "available-width" | No | - | Popover content width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| minWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content min width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| maxWidth | number \| "trigger-width" \| "available-width" | No | - | Popover content max width. Can be either based on the trigger, the available space or define with a number of pixels. |
-| defaultOpen | false \| true | No | - | Default open status. Used for uncontrolled version. |
-| placement | "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" | No | 'bottom' | Default placement of the popover. |
-| isModal | false \| true | No | false | Whether the popover is a modal or not. |
-| isOpen | false \| true | No | - | Whether the component is opened or not. Used for controlled version. |
-| offset | number | No | 2 | Space between trigger and content (in pixels). |
-| onOpen | (open: boolean) => void | No | - | Method to handle component change. |
-| overrideDisplayName | { content?: string \| undefined; trigger?: string \| undefined; } | No | - | Allows other components to be treated as trigger and content. |
-| role | "dialog" \| "menu" \| "listbox" | No | - | Role to apply to the popover. |
+| variant | "primary" \| "secondary" \| "unstyled" | No | 'primary' | Button variant. |
+
+#### Layout Props (14 props)
+
+Inherits standard layout props: `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignSelf`, `justifySelf`, `order`, `gridArea`, `gridColumn`, `gridRow`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
+
+#### Spacing Props (5 props)
 
----
+Inherits standard spacing props: `margin`, `marginBottom`, `marginLeft`, `marginRight`, `marginTop`
+
+#### Sizing Props (6 props)
 
-### OpenInNewTabIcon
+Inherits standard sizing props: `height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/Icons/OpenInNewTabIcon.tsx
+#### Positioning Props (6 props)
+
+Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right`, `zIndex`
 
 ---
 
-### Portal
+### TimeSeriesBarChart
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/Portal/Portal.tsx
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/TimeSeriesBarChart/TimeSeriesBarChart.tsx
 
 #### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| onClickOutside | () => void | No | () => {} |  |
-| rootId | string | No | portal-root |  |
+| caption | string | No | - | Caption. |
+| areXLabelsRotated | false \| true | No | - | Whether the x axis labels are rotated or not. |
+| columnToFilter | string | No | - | Field value of the DataGrid column to filter. |
+| data | JSONArray | No | - | Dataset to use to generate the chart, if no context is provided. |
+| dateTimeFieldName | string | Yes | - | Name of the dataset field that contains the datetime value. |
+| dateTimeFormat | string | No | - | Format used for the date and time values in the dataset by d3.js. Should follow https://github.com/d3/d3-time-format#locale_format. |
+| dateTimeGroup | "hour" \| "day" \| "week" \| "month" \| "year" | No | 'month' | Datetime unit to used to group values and for x units. |
+| dimension | DimensionSelector | Yes | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
+| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
+| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
+| onFilter | (filters?: string[] \| undefined, allFiltered?: JSONArray \| undefined) => void | No | - | Method to call when a filter occured on the chart. |
+| size | "small" \| "large" \| "medium" | No | 'medium' | TimeSeriesChart size. |
+| colorTheme | "default" \| "dark" \| "darker" \| "darkerer" \| "light" \| "lighter" \| "lighterer" \| "monochrome" \| SuccessDangerColorTheme | No | - | Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. |
+| title | string | No | - | Title. |
+| stackedCategory | string | No | - | Dataset key to use to stack values. |
+| xAxisLabel | string | No | - | X Axis Label. |
+| yAxisLabel | string | No | - | Y Axis Label. |
 
 ---
 
-### PulsedRadarImage
+### WithFilters
+
+**Package:** @redsift/dashboard
+**File:** packages/dashboard/src/components/WithFilters/WithFilters.tsx
 
-**Package:** @redsift/products
-**File:** packages/products/src/components/radar-dialog/PulsedRadarImage.tsx
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| datagridCategoryDimFilter | CategoryFilterType | No | - | In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. |
+| datagridCoordinatesCategoryDimFilter | [CoordinateFilterType, CoordinateFilterType] \| [CoordinateFilterType, CoordinateFilterType, CategoryFilterType] | No | - | In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. |
+| dimension | DimensionSelector | No | - | Method that will be used by crossfilter to compute the dimensions of the charts. |
+| field | string | No | - | Shorthand field name to filter on. Used by DataCard to create a crossfilter dimension from `(d) => d[field]`. When provided, `dimension` is derived automatically. `datagridCategoryDimFilter` must still be provided explicitly for DataGrid sync. |
+| group | (d: Dimension) => Group | No | - | Method that will be used by crossfilter to compute the groups of the charts. |
+| isDimensionArray | false \| true | No | - | Whether the dimension field is an array or not. |
+| isResetable | false \| true | No | - | Whether the reset button is hidden or not. |
+| localeText | LocaleText | No | - | Overriden values for internal labels and texts. |
+| onFilter | (filters?: any) => void | No | - | Method to call when a filter occured on the chart. |
+| syncMode | "one-way" \| "two-way" | No | 'two-way' | Sync mode for DataCard filters. - `'one-way'`: Card clicks push filters to the DataGrid. DataGrid filter changes do NOT update the card. - `'two-way'`: Card clicks push filters to the DataGrid AND DataGrid filter changes update the card selection. |
 
 ---
 
+## Package: @redsift/products
+
 ### RadarButton
 
 RadarButton is a pre-styled button for Radar AI features.
@@ -7122,45 +5537,6 @@ Inherits standard positioning props: `position`, `top`, `bottom`, `left`, `right
 
 ---
 
-### RecommendationsSummary
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardList/RecommendationsSummary.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| recommendations | null \| RecommendationsData | No | - | AI recommendations data |
-| loading | false \| true | No | false | Whether recommendations are loading |
-| cta | CTAData | No | - | Structured CTA data for the call-to-action card |
-| onExpandSignalCard | (signalType: string) => void | No | - | Callback when user clicks "See more details" on a status card |
-
----
-
-### SignalCard
-
-SignalCard is the visual wrapper component for signal cards.
-Provides card structure with header (icon + title) and body content area.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/SignalCard.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| title | ReactNode | No | - | Card title displayed in header (can be string or React element). |
-| cardType | string | No | - | Card status type determining icon and color (good/warning/danger/unknown). |
-| cardTheme | "EMAIL" \| "DNS" | No | - | Card theme for styling variations. |
-| icon | ReactNode | No | - | Custom icon to display in header. If not provided, icon is determined by cardType. |
-| bannerVariant | "standard" \| "condensed" \| "none" | No | 'none' | Banner display mode. - 'standard': Full 100px banner with centered icon (for XMasonry layouts like BIMI Checker, Domain Analyzer) - 'condensed': Minimal colored strip - 'none': No banner, icon appears next to card title (default) |
-| bannerColor | string | No | - | Color for the banner. Only used when bannerVariant is 'standard' or 'condensed'. |
-| children | ReactNode | No | - | Card content rendered in the body section. |
-| useInvestigateColors | false \| true | No | false | Use Investigate product-specific hardcoded colors and fonts instead of Design System CSS variables. Set to true for Investigate website/product. Defaults to false (Design System colors). |
-
----
-
 ### SignalCardAmp
 
 SignalCardAmp Component
@@ -7214,13 +5590,6 @@ BIMI record validation, VMC certificate details, and SVG logo validation.
 
 ---
 
-### SignalCardButton
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/components/SignalCardButton.tsx
-
----
-
 ### SignalCardDkim
 
 **Package:** @redsift/products
@@ -7346,45 +5715,6 @@ DNSSEC adds cryptographic signatures to DNS data to ensure authenticity and inte
 
 ---
 
-### SignalCardErrorBoundary
-
-Error boundary component for Signal Cards.
-
-Catches errors in signal card rendering and displays a user-friendly fallback
-instead of crashing the entire UI. Logs errors to help with debugging.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ErrorBoundary/SignalCardErrorBoundary.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| children | ReactNode | Yes | - | Children components to wrap |
-| signalType | string | No | - | Optional signal type for error context |
-| fallback | ReactNode | No | - | Optional custom fallback component |
-| onError | (error: Error, errorInfo: ErrorInfo) => void | No | - | Optional callback when error is caught |
-| resetKey | string \| number | No | - | Optional key to reset the error boundary. When this key changes, the error boundary resets and attempts to re-render children. Useful for retry mechanisms or when underlying data changes. |
-
----
-
-### SignalCardExtractedItems
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/SignalCardExtractedItems.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| extractedItemsCategories | any[] | No | - |  |
-| extractedItems | null \| any[] | No | - |  |
-| defaultTitle | null \| string | No | - |  |
-| isCollapsible | false \| true | No | - |  |
-| areAllCollapsed | false \| true | No | - |  |
-
----
-
 ### SignalCardFcrdns
 
 SignalCardFcrdns Component
@@ -7445,13 +5775,6 @@ Shows authentication (SPF, DKIM, DMARC), alignment, FCrDNS, TLS, and one-click u
 
 ---
 
-### SignalCardInfoBox
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/components/SignalCardInfoBox.tsx
-
----
-
 ### SignalCardList
 
 **Package:** @redsift/products
@@ -7528,66 +5851,6 @@ MTA-STS DNS records, policy file configuration, and SSL certificate status.
 
 ---
 
-### SignalCardNormal
-
-SignalCardNormal is the base component for all signal cards in the Investigate tool.
-It provides a consistent structure for displaying card header, extracted items, checklists,
-descriptions, and custom content sections.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardNormal/SignalCardNormal.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| cardType | "good" \| "warning" \| "danger" \| "info" \| "unknown" | No | - | Card status determining visual theme (good/warning/danger/unknown). |
-| sections | SignalCardSection[] | No | - | Generic sections to render in the card. Replaces specific props like checklistsDmarc, extractedItemsDmarc, etc. |
-| resultSelected | string \| number | No | - | Currently selected option value for dropdown/select. |
-| resultOptions | ({ label: string; value: string \| number; } \| Record<string, any>)[] | No | - | Available options for result dropdown. |
-| optionsLabel | string | No | - | Label text for options dropdown. |
-| onResultsChange | (value: any) => void | No | - | Callback when dropdown selection changes. |
-| type | string | No | - | Card type identifier - used for i18n description lookup via signal-description.{type}_md. Note: This serves a different purpose than `cardType`. While `cardType` determines visual styling (good/warning/danger), `type` is used as a key to look up card descriptions in i18n. Currently used by 13 cards: AMP, BIMI, DKIM, DKIM Domain Analyzer, DMARC, DNSSEC, FCrDNS, MTA-STS, SPF, Subdo, Threat Intel, TLS, URLs. |
-| title | ReactNode | No | - | Card title displayed in header (can be string or React element). |
-| safeSVG | ComponentClass<{}, any> \| FunctionComponent<{}> | No | - | Custom SVG component for safe rendering (used by BIMI). |
-| VMCCertificate | ReactNode | No | - | VMC Certificate component for BIMI. |
-| customSectionOrder | string[] | No | - | Custom ordering of card sections (allows any string for flexibility). |
-| onHeightChange | () => void | No | - | Callback triggered when card height changes (for layout adjustments). |
-| onCTAButtonClick | () => void | No | - | Callback for CTA button click. |
-| ctaButtonName | string | No | - | Custom text for CTA button. |
-| shortDescription | any | No | - | Short description text (always visible) - can be React node or i18n object. |
-| longDescription | any | No | - | Long description text (shown on "Show more" click) - can be React node or i18n object. |
-| introDescription | any | No | - | Intro description shown at top of card. |
-| onComponentMount | () => void | No | - | Callback when component mounts. |
-| children | ReactNode | No | - | Custom content rendered at the bottom of the card, after all standard sections. |
-| renderHeader | null \| () => ReactNode | No | - | Optional header renderer for content at the top of the card, after the title. Used to inject promotional banners, CTAs, or contextual information below the card header. Rendered after the DetailedCard.Header and before the card sections. Pass `null` to suppress the default header. |
-| promoHref | string | No | - | Override the promo banner button href (e.g. to add UTM parameters). Only used when renderHeader is not provided (i.e. the default DmarcPromoBanner is shown). |
-| renderFooter | () => ReactNode | No | - | Optional footer renderer for variant-specific content at the bottom of the card. Used to inject website-specific or OnDMARC-specific CTAs, links, or contextual information. Rendered after children in a styled CardFooter container. |
-| bannerVariant | "standard" \| "condensed" \| "none" | No | 'none' | Banner display mode. - 'standard': Full 80px banner with icon/shield (for masonry layouts) - 'condensed': Minimal 8px colored strip - 'none': No banner, icon appears next to card title (default) |
-| isLoading | false \| true | No | - | Whether the card is in loading state. Shows skeleton loaders. |
-| shield | any | No | - | Shield icon to display instead of regular icon in banner. Common values: 'success', 'fail', 'partial', 'na' |
-| icon | ReactNode | No | - | Custom icon to display in the card header. If not provided, icon is determined by cardType. |
-| checklistsTlsRpt | ItemCategory[] | No | - | MTA-STS-specific: TLS-RPT Record checklist categories. Allows interleaved rendering of MTA-STS components. |
-| extractedItemsTlsRpt | ItemCategory[] | No | - | MTA-STS-specific: TLS-RPT extracted items categories. Allows interleaved rendering of MTA-STS components. |
-| checklistsMtaSts | ItemCategory[] | No | - | MTA-STS-specific: MTA-STS Record checklist categories. Allows interleaved rendering of MTA-STS components. |
-| extractedItemsMtaSts | ItemCategory[] | No | - | MTA-STS-specific: MTA-STS extracted items categories. Allows interleaved rendering of MTA-STS components. |
-| checklistsPolicy | ItemCategory[] | No | - | MTA-STS-specific: Policy File checklist categories. Allows interleaved rendering of MTA-STS components. |
-| extractedItemsPolicy | ItemCategory[] | No | - | MTA-STS-specific: Policy File extracted items categories. Allows interleaved rendering of MTA-STS components. |
-| checklistsCertificate | ItemCategory[] | No | - | MTA-STS-specific: Certificate checklist categories. Allows interleaved rendering of MTA-STS components. |
-| useInvestigateColors | false \| true | No | false | Use Investigate product-specific hardcoded colors and fonts instead of Design System CSS variables. Set to true for Investigate website/product. Defaults to false (Design System colors). |
-| isCollapsible | false \| true | No | false | Enable collapse/expand all icons in the card header. When true, shows chevron icons to collapse/expand all collapsible sections. |
-| areAllCollapsed | false \| true | No | - | Control whether all collapsible sections are collapsed. Used with isCollapsible to manage collapsed state externally. |
-| onCollapseAll | (areAllCollapsed: boolean) => void | No | - | Callback when collapse/expand all is triggered. Receives the new collapsed state (true = all collapsed, false = all expanded). |
-
----
-
-### SignalCardSection
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCard/components/SignalCardSection.tsx
-
----
-
 ### SignalCardSpf
 
 **Package:** @redsift/products
@@ -7739,15 +6002,6 @@ Shows whether SPF records are vulnerable to subdomain poisoning attacks.
 
 ---
 
-### SignalCardTlsProps
-
-Component props.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardTls/SignalCardTls.tsx
-
----
-
 ### SignalCardUrls
 
 SignalCardUrls Component
@@ -7775,103 +6029,6 @@ Shows clickable HTTP/HTTPS links and plain text for other URL types.
 
 ---
 
-### StatusType
-
-Status values matching signal-logic's CardStatus union.
-Includes 'info' and 'unknown' in addition to the primary three.
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/cards/SignalCardList/RecommendationsSummary.tsx
-
----
-
-### SVGLogo
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/SVGLogo.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| svgUrl | null \| string | No | - |  |
-
----
-
-### Tooltip
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/Tooltip/Tooltip.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| className | string | No | - |  |
-| placement | "up" \| "down" \| "top-left" \| "right" \| "center" \| "left" | No | down |  |
-| renderContent | ReactNode | No | - |  |
-| ContentComponent | ComponentClass<{}, any> \| FunctionComponent<{}> | No | - |  |
-| isOpen | false \| true | No | - |  |
-| styles | CSSProperties | No | - |  |
-
----
-
-### TooltipInPortal
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/TooltipInPortal/TooltipInPortal.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| isOpen | false \| true | Yes | - |  |
-| parentRef | RefObject<HTMLElement> | Yes | - |  |
-| ContentComponent | ComponentClass<{}, any> \| FunctionComponent<{}> | Yes | - |  |
-| styles | CSSProperties | No | {} |  |
-| placement | "up" \| "down" \| "top-left" \| "right" \| "center" \| "left" | No | up |  |
-| className | string | No | - |  |
-| renderContent | ReactNode | No | - |  |
-
----
-
-### TooltipInPortalWrapper
-
-Wraps children in a container that will show the tooltip on mouse enter and hide it on mouse leave
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/TooltipInPortal/TooltipInPortal.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| message | ReactNode | Yes | - |  |
-| className | string | No | - |  |
-| isDisabled | false \| true | No | false |  |
-| styles | CSSProperties | No | {} |  |
-| placement | "up" \| "down" \| "top-left" \| "right" \| "center" \| "left" | No | up |  |
-| renderContent | ReactNode | No | - |  |
-
----
-
-### WordHighlighter
-
-**Package:** @redsift/products
-**File:** packages/products/src/components/signal-cards/components/ui/WordHighlighter/WordHighlighter.tsx
-
-#### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| startPos | number | No | 0 |  |
-| highlightClassName | string | No | syntax-error-highlight |  |
-| searchWord | string | No | - |  |
-| textToHighlight | string | Yes | - |  |
-| highlightStyle | CSSProperties | No | - |  |
-
----
-
 # Composition Patterns
 
 The following patterns document proven component groupings extracted from production applications.
@@ -10047,3 +8204,179 @@ export default () => {
 - **drilldown-datagrid-page**: The detail page a summary dashboard typically links to
 - **crossfiltered-datagrid-page**: Interactive version with cross-filtering and a DataGrid
 - **server-crossfiltered-datagrid-page**: Server-driven interactive dashboard
+
+## KPI Cards Above Charts
+**Description:** A row of metric tiles (DataCards) followed by one or two chart tiles, forming a dashboard overview page. Each DataCard shows a key metric; charts visualize trends or distributions. Users scan KPIs then drill into charts. This is the standard layout for 'Overview' pages across Red Sift products.
+**Components:** DataCard, DataCardHeader, DataCardBody, DataRow, BarChart, PieChart, ChartContainer, Flexbox, Heading, Text, Skeleton
+**Packages:** @redsift/dashboard, @redsift/charts, @redsift/design-system
+**Layout:** Flexbox column: top row = Flexbox row wrapping DataCards (flex: 1 each), bottom row = Flexbox row with one or two chart containers. Each DataCard has DataCardHeader + DataCardBody with DataRow children.
+**Tags:** dashboard, kpi, metric, chart, overview, summary, tiles, landing-page
+
+### When to Use
+
+- Building an overview or landing page that shows key metrics at a glance
+- Users need to see aggregate KPIs and trend charts without interactive filtering
+- The page is read-only — clicking a DataRow navigates to a detail page
+- You want a standard two-row layout: metrics on top, charts below
+
+**When NOT to use:**
+
+- Users need to cross-filter between cards and a DataGrid — use Crossfiltered Datagrid Page instead
+- The page is primarily a table with summary KPIs — use Drilldown Datagrid Page instead
+- Only charts, no KPI tiles — use a simple Flexbox of ChartContainers
+
+### Anatomy
+
+1. Heading — Page title
+2. KPI Row — Flexbox row of DataCards, each with DataCardHeader and DataCardBody containing DataRow items
+3. Chart Row — Flexbox row of chart containers (BarChart, PieChart, etc.) wrapped in styled containers with titles
+
+## Chart Empty State
+**Description:** How to render loading, empty, and error states inside a DataCard or ChartContainer. Uses ChartEmptyState from @redsift/dashboard for consistent empty/error messaging, Skeleton for loading shimmer, and Alert + Button for error-with-retry.
+**Components:** ChartEmptyState, DataCard, DataCardHeader, DataCardBody, Skeleton, Alert, Button, Text
+**Packages:** @redsift/dashboard, @redsift/design-system
+**Layout:** DataCard with conditional content: loading (Skeleton), empty (ChartEmptyState), error (Alert + Button), or success (chart content).
+**Tags:** empty-state, loading, error, skeleton, chart, dashboard, retry
+
+### When to Use
+
+- A chart or DataCard needs to show loading, empty, or error states
+- You want a consistent look across all chart tiles for non-happy-path states
+- The error state should include a retry action
+
+**When NOT to use:**
+
+- The component is a DataGrid — DataGrid has its own built-in loading/empty/error overlays
+- You only need a full-page loading spinner — use Spinner instead
+
+### Anatomy
+
+1. DataCard — Container for the chart tile
+2. DataCardHeader — Title of the chart
+3. DataCardBody — Conditional content based on state
+4. Loading: Skeleton components matching the chart shape
+5. Empty: ChartEmptyState with a message and optional illustration
+6. Error: Alert variant='error' + Button variant='secondary' for retry
+
+## Error Banner with Retry
+**Description:** A section-level error display with a retry button, replacing hand-rolled styled.button and hex colors. Uses Alert from @redsift/design-system for the error message and Button variant='secondary' for the retry action. Never use styled.button or hardcoded rgba() values for this pattern.
+**Components:** Alert, Button, Flexbox, Text
+**Packages:** @redsift/design-system
+**Layout:** Flexbox column with Alert at top and optional Button below, or Alert with action prop containing the retry Button.
+**Tags:** error, retry, alert, banner, notification, failure
+
+### When to Use
+
+- A section of the page failed to load and the user can retry
+- You need an inline error message with an action
+- Replacing a hand-rolled error banner with hardcoded styles
+
+**When NOT to use:**
+
+- The entire page failed — use a full-page error boundary instead
+- The error is inside a chart tile — use Chart Empty State pattern instead
+
+### Anatomy
+
+1. Alert — Displays the error message with severity='error'
+2. Button — 'Retry' button with variant='secondary' and onClick handler
+
+## Host App Page Registration
+**Description:** Abstract contract for adding a new page to a Red Sift host application. Every new page requires a routing entry, a navigation entry in the sidebar, and a page title registered as an i18n key in ALL supported locales. Missing any locale mirror causes the page title to show as a raw key string. This is a framework pattern — concrete implementation depends on the host app's router and i18n system.
+**Components:** AppContainer, AppSidePanel, AppBar, AppContent
+**Packages:** @redsift/design-system
+**Layout:** AppContainer > AppSidePanel (nav entry) + AppContent (routed page component). AppBar displays the page title from i18n.
+**Tags:** host-app, page, routing, navigation, i18n, locale, title, setup
+
+### When to Use
+
+- Adding a new page or view to a Red Sift application
+- The page needs a sidebar navigation entry
+- The page title must be translated across all supported locales
+
+**When NOT to use:**
+
+- Rendering a modal or dialog — no route needed
+- A sub-tab within an existing page — handled by the page's Tabs component
+
+### Anatomy
+
+1. Route definition — maps a URL path to a page component
+2. Navigation entry — adds an item to AppSidePanel with icon, label i18n key, and route path
+3. Page title i18n key — registered in EVERY locale file (e.g. en-US.json, fr-FR.json). If any locale is missing the key, the title renders as the raw key string.
+4. Page component — wrapped in AppContent, receives route params
+
+### Implementation Checklist
+
+1. Define the route path and page component in the app's router configuration
+2. Add a navigation entry to AppSidePanel with the route path and an i18n label key
+3. Register the page title i18n key in ALL locale files (en-US, fr-FR, etc.)
+4. Verify the title renders correctly by switching locales
+5. Import @redsift/design-system/style/index.css at the app entry if not already done
+
+## Category Tabs Above Table
+**Description:** A row of Tabs above a DataGrid that filter the grid's rows by a category (e.g. All / Active / Expired / Critical). The selected tab becomes part of the grid's filterModel. Use this pattern when you have a small, well-known set of mutually exclusive row categories — it is a UX shortcut for the most common filter on the page. For arbitrary or many-valued filters, use the DataGrid's built-in column filter UI instead.
+**Components:** Tabs, Tab, TabPanel, DataGrid, Pill, Flexbox
+**Packages:** @redsift/design-system, @redsift/table
+**Layout:** Flexbox column: Tabs row + DataGrid below. Tabs are sticky-positioned above the grid; the active Tab drives a filterModel applied to the DataGrid.
+**Tags:** tabs, datagrid, filter, category, status-filter, segmented-control
+
+### When to Use
+
+- You have a fixed, small set of mutually exclusive row categories (typically 2–6 tabs)
+- The category filter is the dominant user action on the page
+- Tabs should mirror an enum field on the row (e.g. status, severity)
+
+**When NOT to use:**
+
+- The filter values are dynamic or numerous — use the DataGrid's built-in column filter instead
+- Multiple simultaneous filters are required — Tabs are mutually exclusive by design
+- The categories themselves are not orthogonal (overlapping memberships)
+
+### Anatomy
+
+1. Tabs — DS Tabs from @redsift/design-system, one Tab per category plus an 'All' tab
+2. Optional Pill — count badge inside each Tab label (e.g. 'Active (12)')
+3. DataGrid — receives filterModel derived from the active tab
+
+### State Management
+
+| Hook | Type | Initial | Description |
+|------|------|---------|-------------|
+| activeTab | string | 'all' | Slug of the currently selected tab; drives the DataGrid filterModel. |
+
+### Data Contract
+
+```tsx
+type Row = {
+  id: string;
+  status: 'active' | 'warning' | 'critical' | 'expired';
+  // …other fields
+};
+
+// activeTab → filterModel mapping
+const filterModelForTab = (tab: string): GridFilterModel =>
+  tab === 'all'
+    ? { items: [] }
+    : { items: [{ columnField: 'status', operatorValue: 'equals', value: tab }] };
+```
+
+### Implementation Checklist
+
+1. Define the tab list as a const array of { slug, label, filterValue } entries — one per category plus 'all'.
+2. Add useState<string>('all') for activeTab.
+3. Render <Tabs value={activeTab} onChange={setActiveTab}> with one <Tab> per entry. Inside the label, optionally show a count <Pill>.
+4. Compute filterModel from activeTab via a pure helper.
+5. Pass filterModel into <DataGrid filterModel={...} onFilterModelChange={...}>. Keep the DataGrid's own filter UI enabled so users can layer column filters on top.
+6. Sync activeTab to the URL query string (?status=active) for shareable links.
+
+### Keyboard & Accessibility
+
+- Tabs and Tab from @redsift/design-system already wire role="tablist" / role="tab" and arrow-key navigation
+- Use aria-controls to associate each Tab with the DataGrid id
+- Do not hide the DataGrid's built-in column filter — tab filters are a shortcut, not a replacement
+
+### Related Patterns
+
+- **datagrid-page**: The underlying full-page grid. Add tabs on top when one enum field dominates filtering.
+- **tabbed-datagrid-client-side**: Closely related; this pattern is specifically the 'category filter' variant.