@keboola/design 4.0.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/AGENTS.md +47 -4
  2. package/COMPONENT-API.md +75 -80
  3. package/dist/editors.cjs +8 -34
  4. package/dist/editors.cjs.map +1 -1
  5. package/dist/editors.d.cts +1 -3
  6. package/dist/editors.d.ts +1 -3
  7. package/dist/editors.js +8 -34
  8. package/dist/editors.js.map +1 -1
  9. package/dist/icons.cjs.map +1 -1
  10. package/dist/icons.js.map +1 -1
  11. package/dist/index.cjs +3283 -588
  12. package/dist/index.cjs.map +1 -1
  13. package/dist/index.d.cts +335 -330
  14. package/dist/index.d.ts +335 -330
  15. package/dist/index.js +3102 -411
  16. package/dist/index.js.map +1 -1
  17. package/dist/markdown-editor.cjs +17 -31
  18. package/dist/markdown-editor.cjs.map +1 -1
  19. package/dist/markdown-editor.js +17 -31
  20. package/dist/markdown-editor.js.map +1 -1
  21. package/dist/mermaid.cjs +4 -18
  22. package/dist/mermaid.cjs.map +1 -1
  23. package/dist/mermaid.js +4 -18
  24. package/dist/mermaid.js.map +1 -1
  25. package/dist/styles.css +2 -2
  26. package/dist/testing.cjs +1 -1
  27. package/dist/testing.cjs.map +1 -1
  28. package/dist/testing.js +1 -1
  29. package/dist/testing.js.map +1 -1
  30. package/package.json +37 -33
  31. package/src/styles.css +52 -14
package/AGENTS.md CHANGED
@@ -15,6 +15,34 @@ Working **on** the package (commands, layer boundary, token surface, the FA→Lu
15
15
  - Icons: `import { ChevronDown } from '@keboola/design/icons'`.
16
16
  - 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.
17
17
 
18
+ ### Subpath entry index
19
+
20
+ 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.
21
+
22
+ | Subpath | Exports | Reach for it when |
23
+ | --------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------- |
24
+ | `@keboola/design` | Components, blocks, hooks, `ThemeProvider`, forms | Default — everything below the listed exceptions |
25
+ | `@keboola/design/icons` | Lucide re-export + Keboola-custom SVG icons | Any icon (`import { ChevronDown } from '@keboola/design/icons'`) |
26
+ | `@keboola/design/editors` | `CodeEditor`, `SqlEditor`, `MergeEditor` | Real code editing — pulls the ~1.3 MB CodeMirror bundle |
27
+ | `@keboola/design/mermaid` | `MermaidDiagram` (`{ code }`) | Render a Mermaid diagram — **not** in the root barrel |
28
+ | `@keboola/design/markdown-editor` | `MarkdownEditor` | Markdown editing — **not** in the root barrel |
29
+ | `@keboola/design/testing` | `renderWithTheme` | Unit tests that need a component wrapped in `ThemeProvider` |
30
+ | `@keboola/design/styles` | Tailwind-extending stylesheet | App entry, Tailwind consumers (**default**) |
31
+ | `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB) | App entry, when you cannot run Tailwind |
32
+
33
+ ### design ≠ shadcn — API deltas
34
+
35
+ 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:
36
+
37
+ | Component | shadcn shape (wrong here) | `@keboola/design` shape |
38
+ | --------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
39
+ | `DropdownMenu` | named parts `DropdownMenuTrigger` / `DropdownMenuContent` / `DropdownMenuItem` | **compound** — only `DropdownMenu` exports; use `DropdownMenu.Trigger` / `.Content` / `.Item` / `.Label` / `.Separator` |
40
+ | `Tabs` | `<Tabs><TabsList><TabsTrigger/></TabsList><TabsContent/>` | data-driven — `<Tabs triggers={[{ value, title }]}>` + `TabsContent` children. **No** `TabsList` / `TabsTrigger` export |
41
+ | `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 |
42
+ | `Sidebar.SearchInput` | `asChild`-wrappable trigger | concrete `<input>` (`ComponentProps<'input'>`), **no `asChild`** — put a custom search affordance in a plain element inside `Sidebar.Header` |
43
+
44
+ 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.)
45
+
18
46
  ## Decision tree
19
47
 
20
48
  This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-API.md) carries the exact prop signatures.
@@ -278,6 +306,8 @@ const form = useAppForm({
278
306
  </div>
279
307
  ```
280
308
 
309
+ **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.
310
+
281
311
  **Data card with skeleton** — render `Skeleton` / `SkeletonList` in the exact slot the real content will occupy:
282
312
 
283
313
  ```tsx
@@ -430,13 +460,26 @@ import { ThemeProvider } from '@keboola/design';
430
460
  - **`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.
431
461
  - **`colorScheme`** — `"light"` (default) / `"dark"` / `"system"`. Dark mode is set **here, on the root provider** — not per component. `"system"` follows the OS preference.
432
462
 
433
- 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:
434
-
435
- - **Boolean prop:** `<Button argo>`, `<Alert argo>` — swaps the entire variant family.
436
- - **String variant:** `<Select variant="argo">`, `<MultiCombobox variant="argo">`, `<DropdownMenu variant="argo">` — for components whose `variant` union already encodes `'argo'`.
463
+ 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.
437
464
 
438
465
  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`.
439
466
 
467
+ ## Testing (Vitest)
468
+
469
+ 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:
470
+
471
+ ```ts
472
+ import { defineConfig } from 'vitest/config';
473
+ import react from '@vitejs/plugin-react';
474
+
475
+ export default defineConfig({
476
+ plugins: [react()],
477
+ test: { environment: 'jsdom', globals: true },
478
+ });
479
+ ```
480
+
481
+ 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`.
482
+
440
483
  ## Common Tailwind patterns
441
484
 
442
485
  ```
package/COMPONENT-API.md CHANGED
@@ -16,7 +16,6 @@ Source: `src/components/Button/Button.tsx`
16
16
 
17
17
  | Prop | Type | Required | Default | Description |
18
18
  | ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
19
- | `argo` | `boolean` | no | `false` | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
20
19
  | `asChild` | `boolean` | no | `false` | Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. |
21
20
  | `block` | `boolean \| null` | no | `false` | |
22
21
  | `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`
50
49
 
51
50
  > 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`).
52
51
 
53
- | Prop | Type | Required | Default | Description |
54
- | ---------- | ---------------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------- |
55
- | `actions` | `ReactNode` | no | — | |
56
- | `argo` | `boolean` | no | — | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
57
- | `hideIcon` | `boolean` | no | `false` | |
58
- | `icon` | `ReactNode` | no | — | |
59
- | `mode` | `"collapsible" \| "default"` | no | `default` | |
60
- | `variant` | `Variant` | no | `info` | |
52
+ | Prop | Type | Required | Default | Description |
53
+ | ---------- | ---------------------------- | -------- | --------- | ----------- |
54
+ | `actions` | `ReactNode` | no | — | |
55
+ | `hideIcon` | `boolean` | no | `false` | |
56
+ | `icon` | `ReactNode` | no | — | |
57
+ | `mode` | `"collapsible" \| "default"` | no | `default` | |
58
+ | `variant` | `Variant` | no | `info` | |
61
59
 
62
60
  ### `Toaster`
63
61
 
@@ -92,7 +90,7 @@ Source: `src/components/Input/TextInput/TextInput.tsx`
92
90
  | `testId` | `string` | no | — | |
93
91
  | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | `text` | |
94
92
  | `value` | `string \| null` | no | — | |
95
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
93
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
96
94
 
97
95
  ### `PasswordInput`
98
96
 
@@ -111,7 +109,7 @@ Source: `src/blocks/PasswordInput/PasswordInput.tsx`
111
109
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
112
110
  | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
113
111
  | `value` | `string \| null` | no | — | |
114
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
112
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
115
113
 
116
114
  ### `Textarea`
117
115
 
@@ -129,7 +127,7 @@ Source: `src/blocks/Textarea/Textarea.tsx`
129
127
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
130
128
  | `state` | `"warning" \| "error" \| "default" \| null` | no | `default` | |
131
129
  | `value` | `string \| null` | no | — | |
132
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
130
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
133
131
 
134
132
  ## Inputs — FormGroup (label + input + help, shared validation state)
135
133
 
@@ -167,7 +165,7 @@ Source: `src/components/FormGroup/FormGroupTextInput.tsx`
167
165
  | `testId` | `string` | no | — | |
168
166
  | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | — | |
169
167
  | `value` | `string \| null` | no | — | |
170
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
168
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
171
169
 
172
170
  ### `FormGroup.Help`
173
171
 
@@ -204,7 +202,7 @@ Source: `src/blocks/Form/connectors/TextField.tsx`
204
202
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
205
203
  | `testId` | `string` | no | — | |
206
204
  | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | — | |
207
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
205
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
208
206
 
209
207
  ### `field.PasswordField`
210
208
 
@@ -225,54 +223,54 @@ Source: `src/blocks/Form/connectors/PasswordField.tsx`
225
223
  | `required` | `boolean` | no | — | |
226
224
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
227
225
  | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
228
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
226
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
229
227
 
230
228
  ### `field.NumberField`
231
229
 
232
230
  Source: `src/blocks/Form/connectors/NumberField.tsx`
233
231
 
234
- | Prop | Type | Required | Default | Description |
235
- | -------------- | -------------------------------------------- | -------- | ------- | ----------- |
236
- | `className` | `string` | no | — | |
237
- | `defaultValue` | `number \| null` | no | — | |
238
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
239
- | `help` | `ReactNode` | no | — | |
240
- | `label` | `ReactNode` | no | — | |
241
- | `onValueBlur` | `((value: number \| null) => void)` | no | — | |
242
- | `prefix` | `ReactNode` | no | — | |
243
- | `required` | `boolean` | no | — | |
244
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
245
- | `suffix` | `ReactNode` | no | — | |
246
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
232
+ | Prop | Type | Required | Default | Description |
233
+ | -------------- | ------------------------------------------ | -------- | ------- | ----------- |
234
+ | `className` | `string` | no | — | |
235
+ | `defaultValue` | `number \| null` | no | — | |
236
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
237
+ | `help` | `ReactNode` | no | — | |
238
+ | `label` | `ReactNode` | no | — | |
239
+ | `onValueBlur` | `((value: number \| null) => void)` | no | — | |
240
+ | `prefix` | `ReactNode` | no | — | |
241
+ | `required` | `boolean` | no | — | |
242
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
243
+ | `suffix` | `ReactNode` | no | — | |
244
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
247
245
 
248
246
  ### `field.SelectField`
249
247
 
250
248
  Source: `src/blocks/Form/connectors/SelectField.tsx`
251
249
 
252
- > Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required. Forwards `variant === "argo"` to `Select.Content`.
253
-
254
- | Prop | Type | Required | Default | Description |
255
- | ------------------ | -------------------------------------------- | -------- | ------- | ----------------------- |
256
- | `autoComplete` | `string` | no | — | |
257
- | `className` | `string` | no | — | |
258
- | `defaultOpen` | `boolean` | no | — | |
259
- | `defaultValue` | `string` | no | — | |
260
- | `dir` | `"rtl" \| "ltr"` | no | — | |
261
- | `disabled` | `boolean` | no | — | |
262
- | `form` | `string` | no | — | |
263
- | `help` | `ReactNode` | no | — | |
264
- | `items` | `readonly Option[]` | no | — | |
265
- | `label` | `ReactNode` | no | — | |
266
- | `name` | `string` | no | — | |
267
- | `onOpenChange` | `((open: boolean) => void)` | no | — | |
268
- | `open` | `boolean` | no | — | |
269
- | `options` | `readonly Option[]` | no | — | @deprecated use `items` |
270
- | `placeholder` | `string` | no | — | |
271
- | `required` | `boolean` | no | — | |
272
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
273
- | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
274
- | `triggerClassName` | `string` | no | — | |
275
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
250
+ > Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required.
251
+
252
+ | Prop | Type | Required | Default | Description |
253
+ | ------------------ | ------------------------------------------- | -------- | ------- | ----------------------- |
254
+ | `autoComplete` | `string` | no | — | |
255
+ | `className` | `string` | no | — | |
256
+ | `defaultOpen` | `boolean` | no | — | |
257
+ | `defaultValue` | `string` | no | — | |
258
+ | `dir` | `"rtl" \| "ltr"` | no | — | |
259
+ | `disabled` | `boolean` | no | — | |
260
+ | `form` | `string` | no | — | |
261
+ | `help` | `ReactNode` | no | — | |
262
+ | `items` | `readonly Option[]` | no | — | |
263
+ | `label` | `ReactNode` | no | — | |
264
+ | `name` | `string` | no | — | |
265
+ | `onOpenChange` | `((open: boolean) => void)` | no | — | |
266
+ | `open` | `boolean` | no | — | |
267
+ | `options` | `readonly Option[]` | no | — | @deprecated use `items` |
268
+ | `placeholder` | `string` | no | — | |
269
+ | `required` | `boolean` | no | — | |
270
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
271
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
272
+ | `triggerClassName` | `string` | no | — | |
273
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
276
274
 
277
275
  ### `field.TextAreaField`
278
276
 
@@ -291,39 +289,37 @@ Source: `src/blocks/Form/connectors/TextAreaField.tsx`
291
289
  | `onValueBlur` | `(((value: string) => void) & ((value: string) => void))` | no | — | |
292
290
  | `required` | `boolean` | no | — | |
293
291
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
294
- | `variant` | `"primary" \| "secondary" \| "argo" \| null` | no | — | |
292
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
295
293
 
296
294
  ### `field.CheckboxField`
297
295
 
298
296
  Source: `src/blocks/Form/connectors/CheckboxField.tsx`
299
297
 
300
- | Prop | Type | Required | Default | Description |
301
- | ------------------ | ---------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
302
- | `argo` | `boolean` | no | — | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
303
- | `asChild` | `boolean` | no | — | |
304
- | `className` | `string` | no | — | |
305
- | `description` | `ReactNode` | no | — | |
306
- | `help` | `ReactNode` | no | — | |
307
- | `label` | `ReactNode` | no | — | |
308
- | `position` | `"start" \| "end"` | no | — | |
309
- | `tooltip` | `ReactNode` | no | — | |
310
- | `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left"` | no | — | |
311
- | `variant` | `"default" \| "boxed" \| null` | no | — | |
298
+ | Prop | Type | Required | Default | Description |
299
+ | ------------------ | ---------------------------------------- | -------- | ------- | ----------- |
300
+ | `asChild` | `boolean` | no | — | |
301
+ | `className` | `string` | no | — | |
302
+ | `description` | `ReactNode` | no | — | |
303
+ | `help` | `ReactNode` | no | — | |
304
+ | `label` | `ReactNode` | no | — | |
305
+ | `position` | `"start" \| "end"` | no | — | |
306
+ | `tooltip` | `ReactNode` | no | — | |
307
+ | `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left"` | no | — | |
308
+ | `variant` | `"default" \| "boxed" \| null` | no | — | |
312
309
 
313
310
  ### `field.SwitchField`
314
311
 
315
312
  Source: `src/blocks/Form/connectors/SwitchField.tsx`
316
313
 
317
- | Prop | Type | Required | Default | Description |
318
- | ------------- | ---------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
319
- | `argo` | `boolean` | no | — | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
320
- | `className` | `string` | no | — | |
321
- | `description` | `ReactNode` | no | — | |
322
- | `help` | `ReactNode` | no | — | |
323
- | `label` | `ReactNode` | no | — | |
324
- | `position` | `"start" \| "end"` | no | — | |
325
- | `size` | `"small" \| "medium" \| "large" \| null` | no | — | |
326
- | `variant` | `"default" \| "boxed" \| null` | no | — | |
314
+ | Prop | Type | Required | Default | Description |
315
+ | ------------- | ---------------------------------------- | -------- | ------- | ----------- |
316
+ | `className` | `string` | no | — | |
317
+ | `description` | `ReactNode` | no | — | |
318
+ | `help` | `ReactNode` | no | — | |
319
+ | `label` | `ReactNode` | no | — | |
320
+ | `position` | `"start" \| "end"` | no | — | |
321
+ | `size` | `"small" \| "medium" \| "large" \| null` | no | — | |
322
+ | `variant` | `"default" \| "boxed" \| null` | no | — | |
327
323
 
328
324
  ## Data display — Card (compound)
329
325
 
@@ -333,11 +329,10 @@ Source: `src/components/Card/Card.tsx`
333
329
 
334
330
  > Subcomponents that EXIST: `Card.Header`, `Card.Title`, `Card.Content`. There is NO `Card.Description` and NO `Card.Footer`. Plus native `<div>` attributes.
335
331
 
336
- | Prop | Type | Required | Default | Description |
337
- | ---------- | -------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------- |
338
- | `argo` | `boolean` | no | `false` | @internal Transitional opt-in; removed once consumers wrap argo sections in `<ThemeProvider>`. |
339
- | `bordered` | `boolean \| null` | no | `false` | |
340
- | `padding` | `"small" \| "medium" \| "large" \| "none" \| null` | no | `small` | |
332
+ | Prop | Type | Required | Default | Description |
333
+ | ---------- | -------------------------------------------------- | -------- | ------- | ----------- |
334
+ | `bordered` | `boolean \| null` | no | `false` | |
335
+ | `padding` | `"small" \| "medium" \| "large" \| "none" \| null` | no | `small` | |
341
336
 
342
337
  ### `Card.Header`
343
338
 
package/dist/editors.cjs CHANGED
@@ -160,7 +160,6 @@ var tooltipVariants = classVarianceAuthority.cva(
160
160
  var TooltipContent = ({
161
161
  className,
162
162
  variant,
163
- argo,
164
163
  keepOpenOnPointerDownOutside = false,
165
164
  children,
166
165
  onPointerDownOutside,
@@ -171,7 +170,7 @@ var TooltipContent = ({
171
170
  ...rest
172
171
  }) => {
173
172
  const isLegacy = useIsLegacyBrand();
174
- const renderArgo = !isLegacy || argo === true;
173
+ const renderArgo = !isLegacy;
175
174
  const handlePointerDownOutside = (event) => {
176
175
  if (keepOpenOnPointerDownOutside) event.preventDefault();
177
176
  onPointerDownOutside?.(event);
@@ -240,7 +239,6 @@ var Tooltip = ({
240
239
  className,
241
240
  keepOpenOnTriggerClick = false,
242
241
  variant,
243
- argo,
244
242
  placement = "right",
245
243
  forceHide = false,
246
244
  forceShow = false,
@@ -279,7 +277,6 @@ var Tooltip = ({
279
277
  {
280
278
  className,
281
279
  variant: resolvedVariant,
282
- argo,
283
280
  placement,
284
281
  keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
285
282
  children: tooltip
@@ -623,14 +620,13 @@ var Button = ({
623
620
  isLoading = false,
624
621
  asChild = false,
625
622
  onClick,
626
- argo = false,
627
623
  variant = "primary",
628
624
  size = "medium",
629
625
  block = false,
630
626
  ...buttonProps
631
627
  }) => {
632
628
  const isLegacy = useIsLegacyBrand();
633
- const renderArgo = !isLegacy || argo;
629
+ const renderArgo = !isLegacy;
634
630
  const Comp = asChild ? reactSlot.Root : "button";
635
631
  const isIconOnly = String(size).startsWith("icon");
636
632
  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -1564,30 +1560,12 @@ var CHANGE_CLASS = {
1564
1560
  SAFE: "safe"};
1565
1561
  var LINE_HEIGHT_PX = 20;
1566
1562
  var PANE_HEADER_HEIGHT_PX = 58;
1567
- var AcceptButton = ({ side, onAccept, argo }) => {
1563
+ var AcceptButton = ({ side, onAccept }) => {
1568
1564
  const label = `Accept ${side === "left" ? "production" : "branch"} version`;
1569
1565
  const Chevron = side === "left" ? icons_exports.ChevronsRight : icons_exports.ChevronsLeft;
1570
- return /* @__PURE__ */ jsxRuntime.jsx(
1571
- Button,
1572
- {
1573
- onClick: onAccept,
1574
- variant: "outline",
1575
- size: "icon-sm",
1576
- title: label,
1577
- "aria-label": label,
1578
- argo,
1579
- children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { className: "tw-size-5" })
1580
- }
1581
- );
1566
+ return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onAccept, variant: "outline", size: "icon-sm", title: label, "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { className: "tw-size-5" }) });
1582
1567
  };
1583
- var AcceptControls = ({
1584
- conflicts,
1585
- side,
1586
- onAccept,
1587
- onDismiss,
1588
- contentRef,
1589
- argo
1590
- }) => /* @__PURE__ */ jsxRuntime.jsx(
1568
+ var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsxRuntime.jsx(
1591
1569
  "div",
1592
1570
  {
1593
1571
  className: cn(
@@ -1605,7 +1583,7 @@ var AcceptControls = ({
1605
1583
  className: "tw-absolute tw-inset-x-0 tw-flex tw-flex-col tw-items-center tw-gap-0.5",
1606
1584
  style: { top: `${topOffset}px` },
1607
1585
  children: [
1608
- /* @__PURE__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict), argo }),
1586
+ /* @__PURE__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict) }),
1609
1587
  onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
1610
1588
  Button,
1611
1589
  {
@@ -1614,7 +1592,6 @@ var AcceptControls = ({
1614
1592
  size: "icon-sm",
1615
1593
  title: "Dismiss",
1616
1594
  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
1617
- argo,
1618
1595
  children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
1619
1596
  }
1620
1597
  )
@@ -1889,7 +1866,6 @@ var MergeEditor = ({
1889
1866
  middleClassName,
1890
1867
  rightHeader,
1891
1868
  className,
1892
- argo,
1893
1869
  leftDeleted = false,
1894
1870
  rightDeleted = false
1895
1871
  }) => {
@@ -1923,8 +1899,7 @@ var MergeEditor = ({
1923
1899
  side: "left",
1924
1900
  onAccept: acceptLeft,
1925
1901
  onDismiss: dismissLeft,
1926
- contentRef: registerFollower(0, "left-controls"),
1927
- argo
1902
+ contentRef: registerFollower(0, "left-controls")
1928
1903
  }
1929
1904
  ),
1930
1905
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1947,8 +1922,7 @@ var MergeEditor = ({
1947
1922
  side: "right",
1948
1923
  onAccept: acceptRight,
1949
1924
  onDismiss: dismissRight,
1950
- contentRef: registerFollower(2, "right-controls"),
1951
- argo
1925
+ contentRef: registerFollower(2, "right-controls")
1952
1926
  }
1953
1927
  ),
1954
1928
  /* @__PURE__ */ jsxRuntime.jsx(