@keboola/design 3.2.3 → 4.1.1

package/AGENTS.md

@@ -13,6 +13,35 @@ Working **on** the package (commands, layer boundary, token surface, the FA→Lu
   - `import '@keboola/design/styles'` — Tailwind-extending consumers. Your PostCSS+Tailwind processes `@tailwind` directives plus design's `dist/` in your content scan. Avoids duplicate preflights/utilities. **Default for any Keboola app.**
   - `import '@keboola/design/styles/compiled'` — drop-in pre-compiled CSS (~176 KB minified). No Tailwind setup required. Use only when you genuinely cannot run Tailwind.
 - Icons: `import { ChevronDown } from '@keboola/design/icons'`.
+- Code editors: `import { CodeEditor, SqlEditor, MergeEditor } from '@keboola/design/editors'`. These pull the full CodeMirror bundle (~1.3 MB), so they ship from a dedicated subpath — keeping the root barrel CodeMirror-free for apps that don't edit code.
+
+### Subpath entry index
+
+The root barrel (`@keboola/design`) is **not** the whole package. These live only at their subpath — an agent scanning the barrel (or `dist/index.d.ts`) misses them and wrongly concludes the capability is absent. The "always import from the package root" rule above holds for everything in the barrel; the rows below are the **deliberate exceptions** — import them from the subpath, not the root.
+
+| Subpath                           | Exports                                           | Reach for it when                                                |
+| --------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------- |
+| `@keboola/design`                 | Components, blocks, hooks, `ThemeProvider`, forms | Default — everything below the listed exceptions                 |
+| `@keboola/design/icons`           | Lucide re-export + Keboola-custom SVG icons       | Any icon (`import { ChevronDown } from '@keboola/design/icons'`) |
+| `@keboola/design/editors`         | `CodeEditor`, `SqlEditor`, `MergeEditor`          | Real code editing — pulls the ~1.3 MB CodeMirror bundle          |
+| `@keboola/design/mermaid`         | `MermaidDiagram` (`{ code }`)                     | Render a Mermaid diagram — **not** in the root barrel            |
+| `@keboola/design/markdown-editor` | `MarkdownEditor`                                  | Markdown editing — **not** in the root barrel                    |
+| `@keboola/design/testing`         | `renderWithTheme`                                 | Unit tests that need a component wrapped in `ThemeProvider`      |
+| `@keboola/design/styles`          | Tailwind-extending stylesheet                     | App entry, Tailwind consumers (**default**)                      |
+| `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB)                        | App entry, when you cannot run Tailwind                          |
+
+### design ≠ shadcn — API deltas
+
+The API is "shadcn-shaped" enough to invite copy-paste but different enough to break it — copied shadcn code fails type-check. Translate these before emitting:
+
+| Component             | shadcn shape (wrong here)                                                                         | `@keboola/design` shape                                                                                                                                                            |
+| --------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `DropdownMenu`        | named parts `DropdownMenuTrigger` / `DropdownMenuContent` / `DropdownMenuItem`                    | **compound** — only `DropdownMenu` exports; use `DropdownMenu.Trigger` / `.Content` / `.Item` / `.Label` / `.Separator`                                                            |
+| `Tabs`                | `<Tabs><TabsList><TabsTrigger/></TabsList><TabsContent/>`                                         | data-driven — `<Tabs triggers={[{ value, title }]}>` + `TabsContent` children. **No** `TabsList` / `TabsTrigger` export                                                            |
+| `Select`              | composed children `<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>` | data-driven — `Select` takes **`items`**; the form connector `SelectField` also takes **`items`** (canonical), with `options` as a deprecated alias. Same `{ value, label }` shape |
+| `Sidebar.SearchInput` | `asChild`-wrappable trigger                                                                       | concrete `<input>` (`ComponentProps<'input'>`), **no `asChild`** — put a custom search affordance in a plain element inside `Sidebar.Header`                                       |
+
+Other compound (not named-export) components in the barrel: `Modal.*`, `Sheet.*`, `Card.*`, `Sidebar.*`, `PageHeader.Index` / `.Detail`, `EmptyState.*`, `Pagination.*`, `Popover.*` — reach for the dotted sub-parts, not flat `XContent` / `XTrigger` named imports. (The root `SearchInput` block is distinct from `Sidebar.SearchInput` and is fully composable.)
 
 ## Decision tree
 
@@ -112,6 +141,14 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 Vertical rhythm: prefer `tw-gap-*` on a flex column parent over `tw-mt-*` on children — avoids margin-collapse. Page-level max width: use `PageLayout`'s `maxWidth` prop (`narrow` / `default` / `wide` / `full`), not `tw-max-w-[…]` literals.
 
+**Page gutter is consumer-owned.** `AppShell.Main` and `PageLayout` impose **no** page gutter by design — content renders flush against the sidebar/header unless you add one. Put the padding on the content region yourself (the `AppShell` story wraps Main content in `tw-p-6`):
+
+```tsx
+<AppShell.Main>
+  <div className="tw-flex tw-flex-col tw-gap-4 tw-px-6 tw-py-6">{/* page content */}</div>
+</AppShell.Main>
+```
+
 ### Navigation / flow
 
 | Use        | When                                                                                                                                        |
@@ -148,7 +185,7 @@ The `label` prop implies `orientation="horizontal"` — labels are not rendered
 | `CodeEditor`      | Generic code editing (JSON, YAML, shell)                      |
 | `SqlEditor`       | SQL editing (syntax + autocomplete)                           |
 
-`Select` is wrong above ~10 items — use `Combobox`. `Combobox` is wrong for free-form values — use `Tagger`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle; reserve for real code editing.
+`Select` is wrong above ~10 items — use `Combobox`. `Combobox` is wrong for free-form values — use `Tagger`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle and ship from the `@keboola/design/editors` subpath (not the root); reserve for real code editing.
 
 ## Composition recipes
 
@@ -269,6 +306,8 @@ const form = useAppForm({
 </div>
 ```
 
+**Editable data grid** — `Table` is presentational (no inline edit / selection / virtualization). For an editable grid (budget / forecast spreadsheet) bring [TanStack Table v8](https://tanstack.com/table/latest) (headless) for the column model + row state, render it through `Table` with `flexRender`, and use `NumberInput` / `TextInput` as the cell. Own the grid model in `useState`, write edits back from the cell renderer, and compute totals from the source data. Canonical example: the `Editable data grid (TanStack Table)` story in `Table.DataGridRecipe.stories.tsx`. Do **not** add a `DataGrid` primitive — this is a recipe.
+
 **Data card with skeleton** — render `Skeleton` / `SkeletonList` in the exact slot the real content will occupy:
 
 ```tsx
@@ -357,6 +396,17 @@ const form = useAppForm({
 />
 ```
 
+**Sheet** — use `Sheet.Header title="…" description="…"` for a styled title + close icon; do **not** hand-roll with the raw `Sheet.Title`, which renders an unstyled `<h2>`. `Sheet.Body` provides horizontal padding only (`tw-px-4`) — add your own vertical rhythm/gap:
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}>
+  <Sheet.Content>
+    <Sheet.Header title="Edit table" description="Adjust the table metadata." />
+    <Sheet.Body className="tw-flex tw-flex-col tw-gap-4 tw-py-4">{/* fields */}</Sheet.Body>
+  </Sheet.Content>
+</Sheet>
+```
+
 ## Icons
 
 Canonical icon surface is `@keboola/design/icons` — a wildcard re-export of [lucide-react](https://lucide.dev) plus Keboola-custom inline-SVG icons. Follow **shadcn convention**: import named icons directly, no wrapper component. Every Lucide icon is available without any package edit.
@@ -410,13 +460,26 @@ import { ThemeProvider } from '@keboola/design';
 - **`brand`** — the active brand decides the chrome. **argo styling is brand-driven**: any non-`keboola-legacy` brand renders argo chrome automatically (`renderArgo = !isLegacy`), so a default `keboola` / `example-customer` brand needs no per-component flags. The `keboola-legacy` brand renders the pre-modernization chrome. With no `brand` prop, `ThemeProvider` defaults to the canonical `keboola` brand.
 - **`colorScheme`** — `"light"` (default) / `"dark"` / `"system"`. Dark mode is set **here, on the root provider** — not per component. `"system"` follows the OS preference.
 
-The per-call-site `argo` / `variant="argo"` prop is a **transitional escape hatch** (force argo on one component regardless of brand), **not** the primary switch — prefer driving the whole tree from the brand. Two escape-hatch forms exist:
-
-- **Boolean prop:** `<Button argo>`, `<Alert argo>` — swaps the entire variant family.
-- **String variant:** `<Select variant="argo">`, `<MultiCombobox variant="argo">`, `<DropdownMenu variant="argo">` — for components whose `variant` union already encodes `'argo'`.
+Chrome is driven **entirely** by the active brand — there is no per-call-site `argo` prop or `variant="argo"` escape hatch. To render a subtree under a different brand (e.g. an argo section inside a `keboola-legacy` app), wrap it in a nested `<ThemeProvider brand={…}>`; `useIsLegacyBrand()` reads the nearest provider, so the override is scoped to that subtree.
 
 Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and pass it to `ThemeProvider`; or override the `--color-*` / `--radius-*` CSS variables directly on `:root`.
 
+## Testing (Vitest)
+
+The published ESM barrel is plain-Node resolvable — `import('@keboola/design')` works under raw Node, so **no special Vitest config is required** to render a component. A default jsdom project is enough:
+
+```ts
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: { environment: 'jsdom', globals: true },
+});
+```
+
+You do **not** need `test.css: true` or `server.deps.inline: [/@keboola\/design/, /react-day-picker/]`. The design system's structural CSS ships in the stylesheet (`@keboola/design/styles`), not as JS-side `.css` side-effect imports, so the barrel carries no raw `.css` import for Node to choke on. Wrap components in the brand context with `renderWithTheme` from `@keboola/design/testing`.
+
 ## Common Tailwind patterns
 
 ```

package/COMPONENT-API.md

@@ -1,8 +1,8 @@
 # @keboola/design — component API reference
 
-> **Generated file — do not edit by hand.** Regenerate with `yarn workspace @keboola/design generate:api` (extracts prop signatures from the TypeScript types via `react-docgen-typescript`).
+> **Generated file — do not edit by hand.** Regenerate with `pnpm --filter @keboola/design generate:api` (extracts prop signatures from the TypeScript types via `react-docgen-typescript`).
 
-This is the prop-signature contract for the most-used components. For _which_ component to reach for, see [`AGENTS.md`](./AGENTS.md) (the decision tree); for live worked examples, open the colocated `*.stories.tsx` in Storybook (`yarn dev --filter=@keboola/design`).
+This is the prop-signature contract for the most-used components. For _which_ component to reach for, see [`AGENTS.md`](./AGENTS.md) (the decision tree); for live worked examples, open the colocated `*.stories.tsx` in Storybook (`pnpm dev --filter=@keboola/design`).
 
 Props listed are the ones each component **declares itself**. Components built on a native element (`Button` on `<button>`, `Link` on `<a>`, `Card` on `<div>`, …) also accept that element's standard attributes — called out in each entry's note.
 
@@ -16,7 +16,6 @@ Source: `src/components/Button/Button.tsx`
 
 | Prop        | Type                                                                                                                  | Required | Default   | Description                                                                                                         |
 | ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `argo`      | `boolean`                                                                                                             | no       | `false`   | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`.                      |
 | `asChild`   | `boolean`                                                                                                             | no       | `false`   | Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element.             |
 | `block`     | `boolean \| null`                                                                                                     | no       | `false`   |                                                                                                                     |
 | `isLoading` | `boolean`                                                                                                             | no       | `false`   | Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. |
@@ -50,14 +49,13 @@ Source: `src/components/Alert/Alert.tsx`
 
 > Discriminated by `mode`: `"default"` renders `title`/`children`/`actions`; `"collapsible"` requires `title`+`children` and forbids `actions`. `variant` is a categorical colour contract (`info`/`success`/`warning`/`error`).
 
-| Prop       | Type                         | Required | Default   | Description                                                                                    |
-| ---------- | ---------------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------- |
-| `actions`  | `ReactNode`                  | no       | —         |                                                                                                |
-| `argo`     | `boolean`                    | no       | —         | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
-| `hideIcon` | `boolean`                    | no       | `false`   |                                                                                                |
-| `icon`     | `ReactNode`                  | no       | —         |                                                                                                |
-| `mode`     | `"collapsible" \| "default"` | no       | `default` |                                                                                                |
-| `variant`  | `Variant`                    | no       | `info`    |                                                                                                |
+| Prop       | Type                         | Required | Default   | Description |
+| ---------- | ---------------------------- | -------- | --------- | ----------- |
+| `actions`  | `ReactNode`                  | no       | —         |             |
+| `hideIcon` | `boolean`                    | no       | `false`   |             |
+| `icon`     | `ReactNode`                  | no       | —         |             |
+| `mode`     | `"collapsible" \| "default"` | no       | `default` |             |
+| `variant`  | `Variant`                    | no       | `info`    |             |
 
 ### `Toaster`
 
@@ -92,7 +90,7 @@ Source: `src/components/Input/TextInput/TextInput.tsx`
 | `testId`             | `string`                                                        | no       | —       |                                                                                           |
 | `type`               | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no       | `text`  |                                                                                           |
 | `value`              | `string \| null`                                                | no       | —       |                                                                                           |
-| `variant`            | `"primary" \| "secondary" \| "argo" \| null`                    | no       | —       |                                                                                           |
+| `variant`            | `"primary" \| "secondary" \| null`                              | no       | —       |                                                                                           |
 
 ### `PasswordInput`
 
@@ -111,7 +109,7 @@ Source: `src/blocks/PasswordInput/PasswordInput.tsx`
 | `sizing`                    | `"small" \| "medium" \| "default" \| null`      | no       | —              |             |
 | `state`                     | `"warning" \| "error" \| "default" \| null`     | no       | —              |             |
 | `value`                     | `string \| null`                                | no       | —              |             |
-| `variant`                   | `"primary" \| "secondary" \| "argo" \| null`    | no       | —              |             |
+| `variant`                   | `"primary" \| "secondary" \| null`              | no       | —              |             |
 
 ### `Textarea`
 
@@ -129,7 +127,7 @@ Source: `src/blocks/Textarea/Textarea.tsx`
 | `sizing`             | `"small" \| "medium" \| "default" \| null`                | no       | —         |             |
 | `state`              | `"warning" \| "error" \| "default" \| null`               | no       | `default` |             |
 | `value`              | `string \| null`                                          | no       | —         |             |
-| `variant`            | `"primary" \| "secondary" \| "argo" \| null`              | no       | —         |             |
+| `variant`            | `"primary" \| "secondary" \| null`                        | no       | —         |             |
 
 ## Inputs — FormGroup (label + input + help, shared validation state)
 
@@ -167,7 +165,7 @@ Source: `src/components/FormGroup/FormGroupTextInput.tsx`
 | `testId`             | `string`                                                        | no       | —       |                                                                                           |
 | `type`               | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no       | —       |                                                                                           |
 | `value`              | `string \| null`                                                | no       | —       |                                                                                           |
-| `variant`            | `"primary" \| "secondary" \| "argo" \| null`                    | no       | —       |                                                                                           |
+| `variant`            | `"primary" \| "secondary" \| null`                              | no       | —       |                                                                                           |
 
 ### `FormGroup.Help`
 
@@ -204,7 +202,7 @@ Source: `src/blocks/Form/connectors/TextField.tsx`
 | `sizing`             | `"small" \| "medium" \| "default" \| null`                      | no       | —       |                                                                                           |
 | `testId`             | `string`                                                        | no       | —       |                                                                                           |
 | `type`               | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no       | —       |                                                                                           |
-| `variant`            | `"primary" \| "secondary" \| "argo" \| null`                    | no       | —       |                                                                                           |
+| `variant`            | `"primary" \| "secondary" \| null`                              | no       | —       |                                                                                           |
 
 ### `field.PasswordField`
 
@@ -225,53 +223,54 @@ Source: `src/blocks/Form/connectors/PasswordField.tsx`
 | `required`                  | `boolean`                                       | no       | —       |             |
 | `sizing`                    | `"small" \| "medium" \| "default" \| null`      | no       | —       |             |
 | `state`                     | `"warning" \| "error" \| "default" \| null`     | no       | —       |             |
-| `variant`                   | `"primary" \| "secondary" \| "argo" \| null`    | no       | —       |             |
+| `variant`                   | `"primary" \| "secondary" \| null`              | no       | —       |             |
 
 ### `field.NumberField`
 
 Source: `src/blocks/Form/connectors/NumberField.tsx`
 
-| Prop           | Type                                         | Required | Default | Description |
-| -------------- | -------------------------------------------- | -------- | ------- | ----------- |
-| `className`    | `string`                                     | no       | —       |             |
-| `defaultValue` | `number \| null`                             | no       | —       |             |
-| `focusVariant` | `"off" \| "on" \| "default" \| null`         | no       | —       |             |
-| `help`         | `ReactNode`                                  | no       | —       |             |
-| `label`        | `ReactNode`                                  | no       | —       |             |
-| `onValueBlur`  | `((value: number \| null) => void)`          | no       | —       |             |
-| `prefix`       | `ReactNode`                                  | no       | —       |             |
-| `required`     | `boolean`                                    | no       | —       |             |
-| `sizing`       | `"small" \| "medium" \| "default" \| null`   | no       | —       |             |
-| `suffix`       | `ReactNode`                                  | no       | —       |             |
-| `variant`      | `"primary" \| "secondary" \| "argo" \| null` | no       | —       |             |
+| Prop           | Type                                       | Required | Default | Description |
+| -------------- | ------------------------------------------ | -------- | ------- | ----------- |
+| `className`    | `string`                                   | no       | —       |             |
+| `defaultValue` | `number \| null`                           | no       | —       |             |
+| `focusVariant` | `"off" \| "on" \| "default" \| null`       | no       | —       |             |
+| `help`         | `ReactNode`                                | no       | —       |             |
+| `label`        | `ReactNode`                                | no       | —       |             |
+| `onValueBlur`  | `((value: number \| null) => void)`        | no       | —       |             |
+| `prefix`       | `ReactNode`                                | no       | —       |             |
+| `required`     | `boolean`                                  | no       | —       |             |
+| `sizing`       | `"small" \| "medium" \| "default" \| null` | no       | —       |             |
+| `suffix`       | `ReactNode`                                | no       | —       |             |
+| `variant`      | `"primary" \| "secondary" \| null`         | no       | —       |             |
 
 ### `field.SelectField`
 
 Source: `src/blocks/Form/connectors/SelectField.tsx`
 
-> `options` is required. Forwards `variant === "argo"` to `Select.Content`.
-
-| Prop               | Type                                         | Required | Default | Description |
-| ------------------ | -------------------------------------------- | -------- | ------- | ----------- |
-| `options`          | `readonly Option[]`                          | yes      | —       |             |
-| `autoComplete`     | `string`                                     | no       | —       |             |
-| `className`        | `string`                                     | no       | —       |             |
-| `defaultOpen`      | `boolean`                                    | no       | —       |             |
-| `defaultValue`     | `string`                                     | no       | —       |             |
-| `dir`              | `"rtl" \| "ltr"`                             | no       | —       |             |
-| `disabled`         | `boolean`                                    | no       | —       |             |
-| `form`             | `string`                                     | no       | —       |             |
-| `help`             | `ReactNode`                                  | no       | —       |             |
-| `label`            | `ReactNode`                                  | no       | —       |             |
-| `name`             | `string`                                     | no       | —       |             |
-| `onOpenChange`     | `((open: boolean) => void)`                  | no       | —       |             |
-| `open`             | `boolean`                                    | no       | —       |             |
-| `placeholder`      | `string`                                     | no       | —       |             |
-| `required`         | `boolean`                                    | no       | —       |             |
-| `sizing`           | `"small" \| "medium" \| "default" \| null`   | no       | —       |             |
-| `state`            | `"warning" \| "error" \| "default" \| null`  | no       | —       |             |
-| `triggerClassName` | `string`                                     | no       | —       |             |
-| `variant`          | `"primary" \| "secondary" \| "argo" \| null` | no       | —       |             |
+> Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required.
+
+| Prop               | Type                                        | Required | Default | Description             |
+| ------------------ | ------------------------------------------- | -------- | ------- | ----------------------- |
+| `autoComplete`     | `string`                                    | no       | —       |                         |
+| `className`        | `string`                                    | no       | —       |                         |
+| `defaultOpen`      | `boolean`                                   | no       | —       |                         |
+| `defaultValue`     | `string`                                    | no       | —       |                         |
+| `dir`              | `"rtl" \| "ltr"`                            | no       | —       |                         |
+| `disabled`         | `boolean`                                   | no       | —       |                         |
+| `form`             | `string`                                    | no       | —       |                         |
+| `help`             | `ReactNode`                                 | no       | —       |                         |
+| `items`            | `readonly Option[]`                         | no       | —       |                         |
+| `label`            | `ReactNode`                                 | no       | —       |                         |
+| `name`             | `string`                                    | no       | —       |                         |
+| `onOpenChange`     | `((open: boolean) => void)`                 | no       | —       |                         |
+| `open`             | `boolean`                                   | no       | —       |                         |
+| `options`          | `readonly Option[]`                         | no       | —       | @deprecated use `items` |
+| `placeholder`      | `string`                                    | no       | —       |                         |
+| `required`         | `boolean`                                   | no       | —       |                         |
+| `sizing`           | `"small" \| "medium" \| "default" \| null`  | no       | —       |                         |
+| `state`            | `"warning" \| "error" \| "default" \| null` | no       | —       |                         |
+| `triggerClassName` | `string`                                    | no       | —       |                         |
+| `variant`          | `"primary" \| "secondary" \| null`          | no       | —       |                         |
 
 ### `field.TextAreaField`
 
@@ -290,39 +289,37 @@ Source: `src/blocks/Form/connectors/TextAreaField.tsx`
 | `onValueBlur`        | `(((value: string) => void) & ((value: string) => void))` | no       | —       |             |
 | `required`           | `boolean`                                                 | no       | —       |             |
 | `sizing`             | `"small" \| "medium" \| "default" \| null`                | no       | —       |             |
-| `variant`            | `"primary" \| "secondary" \| "argo" \| null`              | no       | —       |             |
+| `variant`            | `"primary" \| "secondary" \| null`                        | no       | —       |             |
 
 ### `field.CheckboxField`
 
 Source: `src/blocks/Form/connectors/CheckboxField.tsx`
 
-| Prop               | Type                                     | Required | Default | Description                                                                                    |
-| ------------------ | ---------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
-| `argo`             | `boolean`                                | no       | —       | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
-| `asChild`          | `boolean`                                | no       | —       |                                                                                                |
-| `className`        | `string`                                 | no       | —       |                                                                                                |
-| `description`      | `ReactNode`                              | no       | —       |                                                                                                |
-| `help`             | `ReactNode`                              | no       | —       |                                                                                                |
-| `label`            | `ReactNode`                              | no       | —       |                                                                                                |
-| `position`         | `"start" \| "end"`                       | no       | —       |                                                                                                |
-| `tooltip`          | `ReactNode`                              | no       | —       |                                                                                                |
-| `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left"` | no       | —       |                                                                                                |
-| `variant`          | `"default" \| "boxed" \| null`           | no       | —       |                                                                                                |
+| Prop               | Type                                     | Required | Default | Description |
+| ------------------ | ---------------------------------------- | -------- | ------- | ----------- |
+| `asChild`          | `boolean`                                | no       | —       |             |
+| `className`        | `string`                                 | no       | —       |             |
+| `description`      | `ReactNode`                              | no       | —       |             |
+| `help`             | `ReactNode`                              | no       | —       |             |
+| `label`            | `ReactNode`                              | no       | —       |             |
+| `position`         | `"start" \| "end"`                       | no       | —       |             |
+| `tooltip`          | `ReactNode`                              | no       | —       |             |
+| `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left"` | no       | —       |             |
+| `variant`          | `"default" \| "boxed" \| null`           | no       | —       |             |
 
 ### `field.SwitchField`
 
 Source: `src/blocks/Form/connectors/SwitchField.tsx`
 
-| Prop          | Type                                     | Required | Default | Description                                                                                    |
-| ------------- | ---------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
-| `argo`        | `boolean`                                | no       | —       | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
-| `className`   | `string`                                 | no       | —       |                                                                                                |
-| `description` | `ReactNode`                              | no       | —       |                                                                                                |
-| `help`        | `ReactNode`                              | no       | —       |                                                                                                |
-| `label`       | `ReactNode`                              | no       | —       |                                                                                                |
-| `position`    | `"start" \| "end"`                       | no       | —       |                                                                                                |
-| `size`        | `"small" \| "medium" \| "large" \| null` | no       | —       |                                                                                                |
-| `variant`     | `"default" \| "boxed" \| null`           | no       | —       |                                                                                                |
+| Prop          | Type                                     | Required | Default | Description |
+| ------------- | ---------------------------------------- | -------- | ------- | ----------- |
+| `className`   | `string`                                 | no       | —       |             |
+| `description` | `ReactNode`                              | no       | —       |             |
+| `help`        | `ReactNode`                              | no       | —       |             |
+| `label`       | `ReactNode`                              | no       | —       |             |
+| `position`    | `"start" \| "end"`                       | no       | —       |             |
+| `size`        | `"small" \| "medium" \| "large" \| null` | no       | —       |             |
+| `variant`     | `"default" \| "boxed" \| null`           | no       | —       |             |
 
 ## Data display — Card (compound)
 
@@ -332,11 +329,10 @@ Source: `src/components/Card/Card.tsx`
 
 > Subcomponents that EXIST: `Card.Header`, `Card.Title`, `Card.Content`. There is NO `Card.Description` and NO `Card.Footer`. Plus native `<div>` attributes.
 
-| Prop       | Type                                               | Required | Default | Description                                                                                    |
-| ---------- | -------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
-| `argo`     | `boolean`                                          | no       | `false` | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
-| `bordered` | `boolean \| null`                                  | no       | `false` |                                                                                                |
-| `padding`  | `"small" \| "medium" \| "large" \| "none" \| null` | no       | `small` |                                                                                                |
+| Prop       | Type                                               | Required | Default | Description |
+| ---------- | -------------------------------------------------- | -------- | ------- | ----------- |
+| `bordered` | `boolean \| null`                                  | no       | `false` |             |
+| `padding`  | `"small" \| "medium" \| "large" \| "none" \| null` | no       | `small` |             |
 
 ### `Card.Header`
 

package/README.md

@@ -23,7 +23,7 @@ It is version-pinned to your lockfile, so it always matches the components you a
 ## Install
 
 ```bash
-yarn add @keboola/design @keboola/tailwind-config
+pnpm add @keboola/design @keboola/tailwind-config
 ```
 
 ## Use
@@ -38,7 +38,7 @@ import '@keboola/design/styles';
 ### Documentation
 
 ```
-$ yarn dev
+$ pnpm dev
 ```
 
 See [Storybook's documentation](https://storybook.js.org/docs/react/writing-stories/introduction) for an introduction to writing stories
@@ -46,13 +46,13 @@ See [Storybook's documentation](https://storybook.js.org/docs/react/writing-stor
 ### Testing
 
 ```
-$ yarn test
+$ pnpm test
 ```
 
 Or in UI mode:
 
 ```
-$ yarn test:ui
+$ pnpm test:ui
 ```
 
 For more information, read [Vitest's documentation](https://vitest.dev/guide/)
@@ -65,18 +65,18 @@ Every story is also run as a test via the [Storybook Vitest addon](https://story
 - **interaction** — each story's `play()` function runs as a test.
 
 ```bash
-yarn workspace @keboola/design test:stories
+pnpm --filter @keboola/design test:stories
 ```
 
 This is the cheap, low-flakiness base layer for testing stories. Screenshot/visual regression is a separate, complementary layer (UT-4060) — the Vitest addon does **not** do screenshot comparison.
 
 **How it's wired:**
 
-- `vitest.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `yarn test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`. It is named `vitest.config.ts` (not `vitest.storybook.config.ts`) so the Storybook "Run tests" button (`@storybook/addon-vitest`) can discover it — the addon only scans `vitest.workspace.*` / `vitest.config.*` / `vite.config.*` names; under any other name it falls back to `vite.config.ts` and crashes the dev server (UT-4243). The jsdom `test` script therefore pins `--config vite.config.ts` explicitly.
+- `vitest.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `pnpm test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`. It is named `vitest.config.ts` (not `vitest.storybook.config.ts`) so the Storybook "Run tests" button (`@storybook/addon-vitest`) can discover it — the addon only scans `vitest.workspace.*` / `vitest.config.*` / `vite.config.*` names; under any other name it falls back to `vite.config.ts` and crashes the dev server (UT-4243). The jsdom `test` script therefore pins `--config vite.config.ts` explicitly.
 - `.storybook/vitest.setup.ts` — applies the Storybook `preview` annotations (decorators, globals) so tests render exactly like Storybook.
 - `optimizeDeps.entries` crawls every story up front so Vite optimizes all story dependencies in one pass — without it, a heavy dep (mermaid, codemirror, …) discovered mid-run makes Vite re-optimize and 404 in-flight imports.
 
-**Prerequisites:** build the workspace deps once (`yarn build --filter='@keboola/design^...'`) and install the browser (`yarn workspace @keboola/design exec playwright install chromium`).
+**Prerequisites:** build the workspace deps once (`pnpm build --filter='@keboola/design^...'`) and install the browser (`pnpm --filter @keboola/design exec playwright install chromium`).
 
 **Adding coverage:** nothing to do — every CSF `*.stories.tsx` is picked up automatically. Add a `play()` to a story to turn it into an interaction test. (MDX docs pages — `src/**/*.mdx` — are not executed as tests; the addon only runs CSF stories.)
 
@@ -127,7 +127,7 @@ Worked examples: `src/components/Button/Button.stories.tsx` (click + disabled),
 Coverage is **measured, not gated** — it gives a baseline for the story suite. The default `test:stories` run stays coverage-free and fast; coverage only loads when you opt in:
 
 ```bash
-yarn workspace @keboola/design test:stories:coverage
+pnpm --filter @keboola/design test:stories:coverage
 ```
 
 Same prerequisites as `test:stories` (build workspace deps, install Chromium). Reports land in `packages/design/coverage/` (gitignored): a `text` summary in the console and a browsable `html` report at `coverage/index.html`.

package/dist/constants-D3gaMY-W.d.cts

@@ -0,0 +1,39 @@
+declare const CHUNK_TYPE: {
+    readonly UNCHANGED: "unchanged";
+    readonly ADDED: "added";
+    readonly REMOVED: "removed";
+};
+type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
+type DiffChunk = {
+    type: ChunkType;
+    value: string;
+    /** 1-indexed start line in the old (left) text */
+    oldStart: number;
+    /** 1-indexed end line in the old (left) text */
+    oldEnd: number;
+    /** 1-indexed start line in the new (right) text */
+    newStart: number;
+    /** 1-indexed end line in the new (right) text */
+    newEnd: number;
+};
+/**
+ * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
+ * representing a section that was modified. If only one side exists,
+ * the other is empty (pure insertion or deletion).
+ */
+type MergeConflict = {
+    id: string;
+    oldValue: string;
+    oldStartLine: number;
+    oldEndLine: number;
+    newValue: string;
+    newStartLine: number;
+    newEndLine: number;
+};
+declare const CHANGE_CLASS: {
+    readonly SAFE: "safe";
+    readonly CONFLICT: "conflict";
+};
+type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
+
+export type { ChangeClassification as C, DiffChunk as D, MergeConflict as M };

package/dist/constants-D3gaMY-W.d.ts

@@ -0,0 +1,39 @@
+declare const CHUNK_TYPE: {
+    readonly UNCHANGED: "unchanged";
+    readonly ADDED: "added";
+    readonly REMOVED: "removed";
+};
+type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
+type DiffChunk = {
+    type: ChunkType;
+    value: string;
+    /** 1-indexed start line in the old (left) text */
+    oldStart: number;
+    /** 1-indexed end line in the old (left) text */
+    oldEnd: number;
+    /** 1-indexed start line in the new (right) text */
+    newStart: number;
+    /** 1-indexed end line in the new (right) text */
+    newEnd: number;
+};
+/**
+ * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
+ * representing a section that was modified. If only one side exists,
+ * the other is empty (pure insertion or deletion).
+ */
+type MergeConflict = {
+    id: string;
+    oldValue: string;
+    oldStartLine: number;
+    oldEndLine: number;
+    newValue: string;
+    newStartLine: number;
+    newEndLine: number;
+};
+declare const CHANGE_CLASS: {
+    readonly SAFE: "safe";
+    readonly CONFLICT: "conflict";
+};
+type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
+
+export type { ChangeClassification as C, DiffChunk as D, MergeConflict as M };