Highlight

Plain text, not nodes: the component splits this string to wrap the matches, so anything with markup in it would be torn apart. That is why the type narrows here and why formatting inside the highlighted text is not possible.

Composes with the classes `Box` computes instead of replacing them.

Passed on to the `mark` around every match. It tints the matches only — the rest of the text keeps the colour it inherits.

The element wrapping the whole run of text; the matches themselves are always `mark`.

What to mark. Matching is case-insensitive and lands anywhere, including inside a word, so a short term marks more than you expect. Regex characters are escaped, which makes a raw search box safe to pipe in here; empty strings are dropped, and an empty array marks nothing.

Takes family, size, weight and line height from the parent instead of the `Text` defaults. For text that must sit inside a heading or a button without breaking its type.

Clamps the text to this many lines with an ellipsis. Beats `truncate`, and only applies above zero. Needs a width to work against: inside a flex child, that usually means `miw={0}`.

Animates the element in when it first scrolls into view. `true` takes the catalogue entrance; an object tunes it — `preset`, `distance`, `spring`, `duration`, `once`, `amount`, `rootMargin` and `index` for a stagger. It lives here rather than on each surface so that `Card`, `Paper`, `GradientBorder`, `Section` and anything else built on `Box` inherit one implementation. Without it `Box` stays a server component; with it the root swaps for a client shell and the children keep rendering on the server. The entrance is a CSS transition, not a JavaScript animation: it is the only motion in the catalogue that fires WHILE the user scrolls, and the compositor should own it.

Cuts the text to a single line with an ellipsis. Ignored when `lines` is set, which does the same thing over several lines. The full text stays in the DOM, so it is still read aloud.