@keboola/design 13.1.2 → 13.2.0

package/AGENTS.md

@@ -92,6 +92,7 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 | `OtpInput`              | Fixed-length verification code (MFA, email confirm, sudo step-up)  |
 | `FileUpload`            | Drag-and-drop file picker box; caller owns the file array          |
 | `useFileDropTarget`     | Make an existing subtree a drop target, styled by you              |
+| `InlineEdit`            | Click-to-edit name or title in place (`multiline` for page titles) |
 
 **Never** build custom label + input combinations — compose `Label` + `FormGroup.TextInput` + `FormGroup.Help` inside `FormGroup`.
 
@@ -773,7 +774,7 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
 ```
 
 - **One import surface**: Lucide icons and Keboola-custom icons (e.g. `Keboola`) both export from `@keboola/design/icons` and share the `LucideIcon` type, so they're interchangeable in any API typed `icon: LucideIcon` (Button, etc.).
-- **Vendor marks** also ship from `@keboola/design/icons` — `Auth0`, `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Gcp`, `GitHub`, `GitLab`, `Google`, `Keboola`, `Make`, `Microsoft`, `Okta` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
+- **Vendor marks** also ship from `@keboola/design/icons` — `Auth0`, `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Facebook`, `Gcp`, `GitHub`, `GitLab`, `Google`, `Keboola`, `Make`, `Microsoft`, `Okta` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
 - **Sizing**: prefixed Tailwind `tw:size-*` utility — `tw:size-4` = 16px (default for inline icons), `tw:size-5` = 20px, `tw:size-6` = 24px.
 - **Spinner animation**: explicit via `tw:animate-spin`.
 
@@ -783,7 +784,9 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
 
 Layer-0 colour usage splits into three buckets.
 
-**Chrome — follows the brand.** Surface, structure, navigation: Card body, Modal frame, Input border, Button outline, focus rings, Sidebar, generic text. Re-skins when a customer brand is applied. **Rule:** use semantic tokens (`tw:bg-background`, `tw:text-foreground`, `tw:border-border`, `tw:bg-muted`, `tw:text-muted-foreground`, `tw:bg-accent`, `tw:bg-destructive`, …). Customers override these via `@keboola/brand-registry`.
+**Chrome — follows the brand.** Surface, structure, navigation: Card body, Modal frame, Input border, Button outline, focus rings, Sidebar, generic text. Re-skins when a customer brand is applied. **Rule:** use semantic tokens (`tw:bg-background`, `tw:text-foreground`, `tw:border-border`, `tw:bg-muted`, `tw:text-muted-foreground`, `tw:bg-hover`, `tw:bg-selected`, `tw:bg-destructive`, …). Customers override these via `@keboola/brand-registry`.
+
+**State has its own tokens — never `accent`.** Hover and keyboard highlight paint `tw:bg-hover` (+ `tw:text-hover-foreground` where the label changes); selected, checked and current paint `tw:bg-selected` / `tw:text-selected-foreground`; a pressed wash is `tw:bg-pressed`; a modal backdrop is `tw:bg-scrim`; a disabled control is `tw:disabled:opacity-disabled`. Unset, `hover` and `selected` both resolve to `accent`, so they look alike by default — a brand that sets them separately is what tells a hovered row from a selected one, and a component that paints either with `accent` opts out of that. `accent` stays for a decorative tinted surface (an icon tile) that is neither.
 
 A border **width** utility carries no colour of its own — a lone `tw:border` / `tw:border-t` / `tw:border-2` paints the element's _text_ colour, a near-black frame where a light-grey rule belongs. Pair every width with a colour: `tw:border tw:border-border` for chrome, `tw:border-input` on form controls. `pnpm test:stories` fails on any story that ships a width without one.
 
@@ -842,6 +845,61 @@ Because the value is read from the nearest provider, a nested override scopes to
 
 Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and pass it in `brands`; or override the `--color-*` / `--radius-*` CSS variables directly on `:root`.
 
+**Interaction states and surface corners** are part of the same theme. Every one is optional and, unset, keeps the look the package ships:
+
+| Theme field                                                    | CSS variable                                           | Unset                                                 |
+| -------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------- |
+| `colors.hover` / `hoverForeground`                             | `--hover` / `--hover-foreground`                       | `accent` / `accent-foreground`                        |
+| `colors.pressed`                                               | `--pressed`                                            | `accent`, a step stronger — no component reads it yet |
+| `colors.selected` / `selectedForeground`                       | `--selected` / `--selected-foreground`                 | `accent` / `accent-foreground`                        |
+| `colors.scrim`                                                 | `--scrim`                                              | black at 50%                                          |
+| `opacity.disabled`                                             | `--disabled-opacity`                                   | `0.5`                                                 |
+| `radii.card`                                                   | `--radius-card`                                        | `Card`: `radii.lg`; `tw:rounded-card`: 10px           |
+| `radii.popover`                                                | `--radius-popover`                                     | menus, popovers, hover cards, tooltips 1rem           |
+| `radii.modal`                                                  | `--radius-modal`                                       | `Modal` / `AlertModal` 1.5rem                         |
+| `radii.sheet`                                                  | `--radius-sheet`                                       | `Sheet`'s inner edge: `radii.lg`                      |
+| `radii.toast`                                                  | `--radius-toast`                                       | `Toast`: `radii.lg`                                   |
+| `colors.sidebar.sidebarHover` / `sidebarHoverForeground`       | `--sidebar-hover` / `--sidebar-hover-foreground`       | `sidebarAccent` / `sidebarAccentForeground`           |
+| `colors.sidebar.sidebarSelected` / `sidebarSelectedForeground` | `--sidebar-selected` / `--sidebar-selected-foreground` | `sidebarAccent` / `sidebarAccentForeground`           |
+
+- The state colours take **any CSS colour**, not the `R G B` channels the other colours use, so a wash can be translucent.
+- Each scheme falls back on its own: a value set in `colors` does not reach dark mode. Set `colorsDark` too.
+- Set `hover` and `hoverForeground` together, and `selected` and `selectedForeground`. Several components change the label on hover, and an unset foreground keeps the `accent-foreground` blue over whatever wash you chose.
+- Unset, a few components keep a hover or selected look of their own rather than `accent`: argo `DropdownMenu` (a `primary` tint), `Table` rows and `SectionNav` (`muted`). Once a theme sets the token, they follow it like the rest.
+- `Sidebar` and `Navbar` sit on their own surface, so they take their own pair: `sidebarHover` for a hovered or open item, `sidebarSelected` for the current page. Set them inside `colors.sidebar` (and `colorsDark.sidebar`).
+- The fallbacks resolve where each class is used, so a brand that only re-points `accent` still moves hover and selected with it.
+
+```ts
+const brand: Brand = {
+  // …
+  theme: {
+    colors: {
+      // …
+      hover: 'color-mix(in srgb, rgb(15 23 42) 4%, transparent)',
+      hoverForeground: 'rgb(15 23 42)',
+      selected: 'rgb(224 242 254)',
+      selectedForeground: 'rgb(7 89 133)',
+      scrim: 'rgb(15 23 42 / 0.55)',
+    },
+    colorsDark: {
+      // …
+      hover: 'color-mix(in srgb, rgb(241 245 249) 7%, transparent)',
+      hoverForeground: 'rgb(241 245 249)',
+    },
+    radii: {
+      sm: '6px',
+      md: '8px',
+      lg: '10px',
+      card: '16px',
+      popover: '16px',
+      modal: '24px',
+      sheet: '24px',
+      toast: '16px',
+    },
+  },
+};
+```
+
 ## 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:
@@ -873,10 +931,10 @@ pnpm exec ui-gen-bench eval --serve dist --route /tokens --brief "Tokens list wi
 ## Common Tailwind patterns
 
 ```
-tw:not-disabled:hover:bg-accent
-tw:disabled:opacity-40 tw:cursor-not-allowed
+tw:not-disabled:hover:bg-hover
+tw:disabled:opacity-disabled tw:cursor-not-allowed
 tw:focus-visible:ring-2 tw:ring-primary
 tw:[&_svg]:text-muted-foreground
 ```
 
-The `tw:` prefix always comes **first**, ahead of every variant — `tw:not-disabled:hover:bg-accent`, never `not-disabled:hover:tw-bg-accent`. Tailwind v4 makes the prefix a variant of its own, so it leads the chain and the utility keeps its bare name.
+The `tw:` prefix always comes **first**, ahead of every variant — `tw:not-disabled:hover:bg-hover`, never `not-disabled:hover:tw-bg-hover`. Tailwind v4 makes the prefix a variant of its own, so it leads the chain and the utility keeps its bare name.

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @keboola/design
 
+## 13.2.0
+
+### Minor Changes
+
+- `Button` animates its state changes. `isLoading` crossfades the spinner with a leading or icon-only icon in its place, or grows it in before a bare label. An icon that appears fades in (and widens into place when it is new rather than swapped), and a changed label rolls over while the button's width follows. Nothing animates on first render, and `prefers-reduced-motion` turns it all off.
+
+  A label's text is wrapped in `span[data-slot="button-label"]` once it first changes; until then the markup is unchanged.
+
+- `InlineEdit` is the one click-to-edit field for names and titles: a hover fill and focus ring instead of an underline, a field that fills its row while editing, Save / Cancel that scale with the text and read as text on a wide sized title, opt-in `multiline` wrapping that keeps the buttons on the first line, `Kbd` shortcut tooltips, argo Save / Cancel on every brand, and Enter / Escape / blur that hold while a save is in flight.
+
+- `FacebookButton` block and `Facebook` vendor mark: Meta's Facebook Blue login button, the same in every brand and colour scheme.
+  - `label` picks "Log in with Facebook" (default) or "Continue with Facebook"; `isLoading` swaps the mark for a spinner and disables the button.
+  - `Facebook` is the logo pack's primary logo; `mono` renders the secondary logo (the disc with the "f" cut out).
+
+### Patch Changes
+
+- SplitButton, MultiActionButton and FileDownloadChip keep their leading icon while loading; Button crossfades it with the spinner.
+
+- `SplitButton` takes `onActionsCloseAutoFocus`, run as its actions menu closes. New folder in Transformations, Flows and Workspaces opens Create folder from it, so the Name field keeps its focus instead of losing it to the menu teardown
+
+- `Alert` sets its description 4 px under the title instead of 16 px.
+
+- Depends on `@tanstack/form-core` directly, so the form types in `dist` import it instead of carrying their own copy.
+
+- `FullScreenModal` locks the page's scroll while it is open (`lockBodyScroll`, on by default)
+  - Sets `overflow: hidden` on `<body>` next to the `full-screen-modal-open` class.
+  - Releases both once the last locking modal closes; modals with `lockBodyScroll={false}` don't hold the lock.
+  - Hands `<body>` back the inline `overflow` it had before the first lock.
+
+- `PageHeader.Detail`: while the title is renamed, the hidden badges and actions take no room — the field's last button lines up with the actions above it, and no empty space opens below the field.
+
+- `PageHeader` lets an inline rename take the whole title row: a title holding a textarea grows to fill the row and drops its right padding, an empty badges slot collapses instead of reserving space, the title icon and badges stay centred on the first line when a long title wraps, and the badges and actions step aside while the title is renamed, fading back once it has shrunk.
+
+- Collapsed sidebar labels show after 50ms instead of 300ms.
+
+## 13.1.3
+
+### Patch Changes
+
+- `MarkdownEditor`'s link panel stays inside the viewport, and a nested list shows one marker per item.
+  - The link panel is a `Popover` anchored to the Insert Link button, in both `toolbarMode`s. It opens below the button at its left edge, shifts left to stay 8 px inside the viewport, and opens above the button when there is no room below. It used to hang off the button at a fixed 320 px, so in a narrow container (a reply box in a `Sheet`) it ran past the edge and the container clipped it.
+  - It renders in `document.body`, like the floating toolbar, so it wears the page theme and stacks over a surrounding `Modal` or `Sheet`. It takes the `Popover` surface: argo chrome gives it the larger radius.
+  - An outside click or focus closes it, and focus stays where the click or focus put it. It used to stay open.
+  - A second press of Insert Link closes it like Cancel. The button carries `aria-expanded` and `aria-controls`, and the panel is a dialog named `Insert Link`.
+  - The Label field takes focus, with its text selected, every time the panel opens, including a reopen while it is still animating out.
+  - Unchanged: both fields take clicks, Enter adds the link, Escape closes only the panel and returns focus to the editor (then the floating toolbar, then the dialog), and the editor's selection survives opening the panel and adding the link.
+  - With `saveOnBlur`, focus moving into anything the toolbar portals (the floating toolbar, the link panel, the Block type and Alignment menus) does not count as leaving the editor, in either mode. Opening either menu used to save. `onSave` still fires synchronously on a real blur.
+  - In a nested bullet, numbered or check list, the item that holds the nested list no longer draws a bullet, number or checkbox of its own beside the nested item's. The markdown it exports is unchanged.
+
 ## 13.1.2
 
 ### Patch Changes

package/COMPONENT-API.md

@@ -14,13 +14,13 @@ Source: `src/components/Button/Button.tsx`
 
 > Icons are composed as children, not an `icon` prop. Plus all native `<button>` attributes.
 
-| Prop        | Type                                                                                                                  | Required | Default   | Description                                                                                                         |
-| ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `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`. |
-| `size`      | `"small" \| "medium" \| "large" \| "icon-lg" \| "icon" \| "icon-sm" \| "icon-xs" \| "icon-2xs" \| "icon-3xs" \| null` | no       | `medium`  |                                                                                                                     |
-| `variant`   | `"primary" \| "secondary" \| "kai" \| "danger" \| "invisible" \| "outline" \| "inline" \| null`                       | no       | `primary` |                                                                                                                     |
+| Prop        | Type                                                                                                                  | Required | Default   | Description                                                                                                                 |
+| ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `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`   | Shows a spinner in place of the leading icon, or before the label when there is none. The caller still controls `disabled`. |
+| `size`      | `"small" \| "medium" \| "large" \| "icon-lg" \| "icon" \| "icon-sm" \| "icon-xs" \| "icon-2xs" \| "icon-3xs" \| null` | no       | `medium`  |                                                                                                                             |
+| `variant`   | `"primary" \| "secondary" \| "kai" \| "danger" \| "invisible" \| "outline" \| "inline" \| null`                       | no       | `primary` |                                                                                                                             |
 
 ### `ButtonInline`
 
@@ -524,7 +524,7 @@ Source: `src/components/ThemeProvider/ThemeProvider.tsx`
 | Prop              | Type                                                                                                                                                                                                                                                                                                            | Required | Default | Description                                                                                                                                                             |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `brandId`         | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Controlled active brand id. When set, the parent owns the value and `setBrand` only notifies via `onBrandIdChange` (it does not mutate internal state).                 |
-| `brands`          | `readonly { id: string; name: string; theme: { colors?: { foreground?: string; background?: string; muted?: string \| undefined; mutedForeground?: string \| undefined; border?: string \| undefined; ... 23 more ...; sidebar?: { ...; } \| undefined; } \| undefined; ... 6 more ...; gradient?: { ...; }...` | no       | `[]`    | Brands this provider knows about; the active brand id resolves against these.                                                                                           |
+| `brands`          | `readonly { id: string; name: string; theme: { colors?: { foreground?: string; background?: string; muted?: string \| undefined; mutedForeground?: string \| undefined; border?: string \| undefined; ... 29 more ...; sidebar?: { ...; } \| undefined; } \| undefined; ... 7 more ...; opacity?: { ...; } ...` | no       | `[]`    | Brands this provider knows about; the active brand id resolves against these.                                                                                           |
 | `defaultBrandId`  | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Initial active brand id for uncontrolled use. Defaults to the design-system sentinel (`DEFAULT_BRAND_ID`) — no brand tokens injected, so the stylesheet defaults apply. |
 | `defaultScheme`   | `ColorScheme`                                                                                                                                                                                                                                                                                                   | no       | —       | Initial scheme when uncontrolled; defaults to `light`.                                                                                                                  |
 | `onBrandIdChange` | `((brandId: string) => void)`                                                                                                                                                                                                                                                                                   | no       | —       | Called with the next id whenever `setBrand` runs — required to persist the choice in controlled mode.                                                                   |

package/dist/{AIKit-BVCWP9Ks.js → AIKit-C5FbKjwa.js}

@@ -1,24 +1,24 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
-import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, Bug, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, History, Hourglass, Info, Key, Layers, LineChart, Link, List, ListChecks, Loader2, Lock, Mail, Maximize2, Minimize2, Minus, Pencil, Play, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Settings, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, X, XCircle, Zap } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, TooltipProvider } from "./utils-p6tjltbX.js";
+import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, Bug, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, History, Hourglass, Info, Key, Layers, LineChart, Link, List, ListChecks, Loader2, Lock, Mail, Maximize2, Minimize2, Minus, Pencil, Play, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Settings, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, X, XCircle, Zap } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-srUgWgwH.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cwnm8WdM.js";
+import { ClipboardButton } from "./ClipboardButton-Urg-kZbh.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CUuAakh3.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
-import { Command } from "./Command-BQPiZCNz.js";
-import { TextInput } from "./TextInput-BWYXbfs4.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
+import { HoverCard } from "./HoverCard-Cy6nhg4u.js";
+import { Command } from "./Command-BuOA3V18.js";
+import { TextInput } from "./TextInput-B5TDDOty.js";
+import { Badge } from "./Badge-Ba3epgcI.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Table as Table$1 } from "./Table-BaVT5Tkn.js";
+import { Kbd, keys } from "./Kbd-Du93F3o4.js";
+import { Table as Table$1 } from "./Table-CgSC-fSo.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
-import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
-import { Kbd, keys } from "./Kbd-J4n1J6i4.js";
+import { DiagramSource } from "./DiagramSource-jTwmmi9g.js";
 import { Progress } from "./internal/components/Progress.js";
 import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
-import { Slot } from "@radix-ui/react-slot";
 import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import TextareaAutosize from "react-textarea-autosize";
@@ -409,7 +409,7 @@ const FileDownloadChip = ({ fileName, filePath, size, isPending = false, onDownl
 	},
 	className: cn("tw:max-w-full tw:justify-start tw:gap-2 tw:font-normal", className),
 	children: [
-		!isPending && /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }),
+		/* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }),
 		/* @__PURE__ */ jsx("span", {
 			className: "tw:truncate",
 			children: fileName
@@ -1963,7 +1963,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							ref: (row) => {
 								rowsRef.current[index] = row;
 							},
-							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-hover tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 							onClick: () => handleOptionToggle(option.id),
 							onKeyDown: (e) => {
 								if (hasCommandModifier(e) || e.repeat) return;
@@ -2009,7 +2009,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							ref: (row) => {
 								rowsRef.current[options.length] = row;
 							},
-							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-hover tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 							onClick: handleCustomRowClick,
 							onKeyDown: handleKeyDown(handleCustomRowKey),
 							onFocus: () => setActiveRow(options.length),
@@ -2185,11 +2185,11 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, variant = "row", clas
 		type: "button",
 		disabled,
 		"data-variant": variant,
-		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:text-left tw:text-sm tw:text-foreground tw:transition-colors", "tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1", "tw:disabled:cursor-not-allowed tw:disabled:opacity-50", variant === "bubble" ? [
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:text-left tw:text-sm tw:text-foreground tw:transition-colors", "tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1", "tw:disabled:cursor-not-allowed tw:disabled:opacity-disabled", variant === "bubble" ? [
 			"tw:w-fit tw:max-w-[min(85%,40rem)] tw:rounded-xl tw:px-3 tw:py-2",
 			"tw:border tw:border-solid tw:border-border tw:bg-card",
-			"tw:not-disabled:hover:bg-muted tw:focus-visible:bg-muted"
-		] : "tw:rounded-lg tw:px-3 tw:py-2 tw:font-medium tw:not-disabled:hover:bg-accent", className),
+			"tw:not-disabled:hover:bg-hover tw:focus-visible:bg-hover"
+		] : "tw:rounded-lg tw:px-3 tw:py-2 tw:font-medium tw:not-disabled:hover:bg-hover", className),
 		onClick,
 		children: [icon ?? /* @__PURE__ */ jsx(Sparkles, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }), /* @__PURE__ */ jsx("div", {
 			className: "tw:whitespace-normal tw:text-left",
@@ -2325,7 +2325,7 @@ const ToolCallApproval = ({ toolName, title, status, onApprove, onReject, childr
 //#region src/blocks/AIKit/ToolCall/ToolCallChip.tsx
 const chipClasses = cva(["tw:inline-flex tw:items-center tw:gap-1.5 tw:rounded-md tw:border tw:border-solid", "tw:border-border tw:bg-muted tw:px-2 tw:py-1 tw:text-xs tw:text-foreground"], {
 	variants: { interactive: {
-		true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-accent",
+		true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-hover",
 		false: ""
 	} },
 	defaultVariants: { interactive: false }
@@ -2529,4 +2529,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, FileDownloadChip, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName };
 
-//# sourceMappingURL=AIKit-BVCWP9Ks.js.map
+//# sourceMappingURL=AIKit-C5FbKjwa.js.map