@react-x11/components 0.3.0 → 0.5.0

package/dist/tabs/index.js

@@ -0,0 +1,1265 @@
+// <Tabs> — one visible panel at a time, switched by a strip of triggers.
+//
+// The API is [Chakra UI's Tabs](https://chakra-ui.com/docs/components/tabs)
+// with its parts spelled flat — `Tabs.Root` is `<Tabs>`, `Tabs.Trigger` is
+// `<TabsTrigger>` — because that is how this package names a composition (see
+// `/timeline` and `/charts`). The vocabulary is Chakra's too: `value` /
+// `defaultValue` / `onValueChange({ value })`, the five variants (`line`,
+// `subtle`, `enclosed`, `outline`, `plain`), `size`, `orientation`,
+// `activationMode`, `fitted`, `justify`, `lazyMount` and `unmountOnExit` — so
+// a snippet copied from Chakra's docs is the same tree with the dots removed.
+// `asChild` is the one part of the surface deliberately absent: it exists to
+// merge props into somebody else's DOM element, and there is no DOM here.
+//
+// `overflow` is the one prop with no counterpart there. A horizontal strip
+// narrower than its tabs keeps the ones that fit and drops the rest into a
+// menu at its end rather than running off its own edge — on by default,
+// because a strip cut off mid-label is nobody's intention. It is the one
+// thing here that has to measure, and `useOverflow` below is where that and
+// its consequences live.
+//
+// The behaviour is core's `<Tabs>` — the widget this one supersedes: a single
+// tab stop with roving focus, arrows that wrap and skip disabled triggers,
+// Home/End, visual arrows in an RTL strip, and `activationMode="manual"` for
+// a panel too expensive to build on every keystroke.
+//
+// It is pure composition of `<box>` and `<text>`, so there is no
+// `registerElement` here and nothing for the reconciler to learn. The line
+// under a `line` strip, the marker on the selected trigger, the chip behind
+// an `enclosed` strip — each is a `<box>`, positioned absolutely where it has
+// to sit on one edge, because borders alone cannot say "this side only" and a
+// box can.
+import React from 'react';
+import { Icon, useDirection, useTheme } from 'react-x11';
+import { interpolate } from 'react-x11/style';
+import { XK_DOWN, XK_END, XK_ESCAPE, XK_HOME, XK_LEFT, XK_RETURN, XK_RIGHT, XK_UP, } from 'react-x11/keysyms';
+import { afterLayout, cancelAfterLayout } from '../internal/timers.js';
+import { useDismissOnWindowBlur } from '../internal/widget.js';
+import { hx } from './hx.js';
+const h = React.createElement;
+// --- geometry ---------------------------------------------------------------
+/** The selected trigger's marker in the `line` variant. */
+const INDICATOR = 2;
+/** The strip's own line in the `line` and `outline` variants. */
+const RULE = 1;
+/** Inside a trigger, between a glyph and the label beside it. */
+const TRIGGER_GAP = 6;
+/** Between a strip and its panel. */
+const PANEL_GAP = 8;
+/** The `enclosed` strip's chip, and an `outline` tab's shoulders — one
+ *  radius, so the two variants agree about how round this notebook is. */
+const CORNER = 6;
+/** The rounding on everything that is a wash rather than a tab: the `subtle`
+ *  fill, the `line` strip's hover, an `enclosed` trigger, a menu row. */
+const WASH_CORNER = 4;
+/** The gap the overflow menu leaves between two rows. Read twice: once to
+ *  lay the sheet out, and once to work out how tall it comes to. */
+const MENU_ROW_GAP = 1;
+/** The overflow menu's sheet: a hairline where it meets the desktop, as the
+ *  other popups out here use, and the inset that makes a row read as a pill
+ *  on the sheet rather than a band across it. */
+const SHEET_BORDER = 1;
+const SHEET_PAD = 4;
+/** A menu row is narrower than a tab is tall — it is a list entry, not a
+ *  target on a strip — so it takes its own padding rather than the size's. */
+const MENU_ROW_PX = 10;
+const MENU_ROW_PY = 7;
+/** So a menu of one short label is still a menu rather than a chip. */
+const MENU_MIN_WIDTH = 140;
+/**
+ * Between two triggers on the strip — none in `outline`, where the tabs meet
+ * shoulder to shoulder. Read twice: once to lay the strip out, and once by
+ * the overflow arithmetic, which has to add up to the same number the strip
+ * did or it will fit one tab too many.
+ */
+function stripGap(variant) {
+    return variant === 'outline' ? 0 : 2;
+}
+// Chakra's proportions, and looser than a first guess would make them: the
+// labels are cap-trimmed, so `py` is the *whole* visible gap over the caps
+// and under the baseline — padding sized for an untrimmed line box reads as
+// cramped once the box is the letters. The type steps off the theme's own
+// `fontSize` rather than a fixed scale, so a theme that sets 16 gets tabs in
+// 16 (the same call `/timeline` makes).
+const SIZES = {
+    sm: { px: 12, py: 8, step: -1 },
+    md: { px: 16, py: 10, step: 0 },
+    lg: { px: 20, py: 12, step: 1 },
+};
+const LookContext = React.createContext(null);
+const StripContext = React.createContext(null);
+function useLook(part) {
+    const look = React.useContext(LookContext);
+    if (!look) {
+        throw new Error(`@react-x11/components: <${part}> has to be inside a <Tabs>. ` +
+            'It reads the selected value, the variant and the size from it.');
+    }
+    return look;
+}
+/**
+ * A colour prop, resolved against the palette — `$token` is normally the
+ * renderer's job, but `interpolate()` is arithmetic over real colours and
+ * runs here, before any of that. Same helper as `/timeline`'s.
+ */
+function resolveColor(value, theme, fallback) {
+    if (!value)
+        return fallback;
+    if (!value.startsWith('$'))
+        return value;
+    const named = theme[value.slice(1)];
+    return typeof named === 'string' ? named : fallback;
+}
+/**
+ * `accent` laid over `ground`, opaquely — a weak wash at low `amount`.
+ * Opaque rather than translucent for the same reason `/timeline` mixes: a
+ * wash sits over the strip's own chrome, and light through it would show the
+ * rule running behind a selected trigger.
+ */
+function over(ground, accent, amount) {
+    const mixed = interpolate(ground, accent, amount);
+    return typeof mixed === 'string' ? mixed : accent;
+}
+/**
+ * A single-line label's box trimmed to its letters — core's `capTrim`, the
+ * rule every core widget label follows (`labelContent` in
+ * `components/theme.js`). A line box is the font's ascent plus descent plus
+ * line gap, and the space over a capital differs from the space under the
+ * baseline by `(ascent - capHeight) - descent` — so a centred untrimmed
+ * label sits visibly low beside the icon centred on its own middle. Trimming
+ * makes the box *be* the letters, and centring centres what can be seen.
+ * Labels only: the icon is a `<canvas>` and panel prose is a paragraph,
+ * and neither wants it.
+ */
+const CAP_TRIM = { textBoxTrim: 'cap-alphabetic' };
+/**
+ * Strings and numbers are only legal inside `<text>`, and a trigger's label
+ * is prose — `<TabsTrigger value="a">Members</TabsTrigger>` is the shortest
+ * thing that works and has to keep working. A primitive child is wrapped; an
+ * element child is left exactly as written, and inherits the same ink.
+ */
+function withText(children, style) {
+    let wrapped = false;
+    const mapped = React.Children.map(children, (child) => {
+        if (typeof child !== 'string' && typeof child !== 'number')
+            return child;
+        wrapped = true;
+        return hx('text', style ? { style } : null, child);
+    });
+    return wrapped ? mapped : children;
+}
+/**
+ * The part's own style, then the caller's — later entries win, which is how
+ * every `style` prop in this renderer resolves precedence.
+ */
+function styled(base, extra) {
+    if (!extra)
+        return [base];
+    return Array.isArray(extra) ? [base, ...extra] : [base, extra];
+}
+/**
+ * The hover fill on a `line` strip — the wash a `subtle` trigger wears, on
+ * the variant whose selected mark is a rule rather than a fill.
+ *
+ * Two things about it are deliberate and neither is obvious.
+ *
+ * **It is the size a `subtle` trigger's fill is** — the label with the same
+ * padding round it — and it keeps that same distance again off the panel
+ * edge, which is what {@link railGap} adds to a `line` trigger's padding to
+ * make room for. The gap is not decoration: the strip's rule runs *under*
+ * its triggers, so a fill over the whole box would take a bite out of that
+ * line for exactly the width of whatever the pointer was on, and one that
+ * merely cleared the rule would read as a block resting on it. Which is also
+ * why it is a box and not a `backgroundColor` — a background fills the box
+ * it is on, and this must not.
+ *
+ * And the hover that raises it is **state**, not a `:hover` block. `:hover`
+ * lights the node under the pointer and its ancestors (react-x11's
+ * `_updateHover`), and this box is the label's *sibling* — so a wash that
+ * styled itself would go out every time the pointer crossed a letter.
+ */
+function hoverWash(look) {
+    const gap = railGap(look);
+    return hx('box', {
+        key: 'wash',
+        style: [
+            {
+                position: 'absolute',
+                top: 0,
+                start: 0,
+                borderRadius: WASH_CORNER,
+                backgroundColor: '$surfaceHover',
+            },
+            look.vertical ? { bottom: 0, end: gap } : { bottom: gap, end: 0 },
+        ],
+    });
+}
+/**
+ * The air a `line` trigger keeps between its wash and the strip's rule, and
+ * therefore the padding it carries beyond the label's own on that one side.
+ * It is the label's padding on the axis the rule crosses, so that the wash's
+ * two distances — text to its edge, its edge to the line — come out the same.
+ *
+ * `0` for every other variant: they have no wash to stand off the rule, and
+ * an `outline` tab's fill is *supposed* to reach it.
+ */
+function railGap(look) {
+    if (look.variant !== 'line')
+        return 0;
+    return look.vertical ? look.px : look.py;
+}
+/**
+ * Everything a stop on the strip looks like, per variant.
+ *
+ * Shared because the strip has two kinds of stop and they have to be
+ * indistinguishable: a `<TabsTrigger>`, and the overflow button, which wears
+ * the selected look whenever the tab that is selected is one of the ones it
+ * is holding. Two copies of this switch would drift on the first variant
+ * anybody touched.
+ *
+ * Each selected state is opaque where it has to cover the strip's rule, and
+ * every ink change is a `$token` so a `theme` prop above still wins.
+ */
+function tabChrome(look, indicator, state) {
+    const { selected, disabled, hovered, grow } = state;
+    const vertical = look.vertical;
+    const variantStyle = [];
+    const hover = {};
+    switch (look.variant) {
+        case 'line':
+        case 'plain':
+            Object.assign(hover, { ':hover': { color: '$text' } });
+            break;
+        case 'subtle':
+            variantStyle.push({ borderRadius: WASH_CORNER });
+            if (selected)
+                variantStyle.push({
+                    backgroundColor: over(look.ground, look.accent, 0.15),
+                });
+            else
+                Object.assign(hover, {
+                    ':hover': { backgroundColor: '$surfaceHover' },
+                    ':active': { backgroundColor: '$surfaceActive' },
+                });
+            break;
+        case 'enclosed':
+            // Every trigger carries the border so selecting one cannot change its
+            // size — only the selected one inks it.
+            variantStyle.push({
+                borderRadius: WASH_CORNER,
+                borderWidth: 1,
+                borderColor: 'transparent',
+            });
+            if (selected)
+                variantStyle.push({
+                    backgroundColor: look.ground,
+                    borderColor: '$border',
+                });
+            else
+                Object.assign(hover, { ':hover': { color: '$text' } });
+            break;
+        case 'outline':
+            if (selected)
+                variantStyle.push({
+                    // The fill is the ground, so the tab and its panel read as one
+                    // surface — and it is what covers the strip's rule underneath.
+                    // Rounded so the fill stays inside the frame's shoulders, but
+                    // deliberately **borderless**: this renderer paints a node's
+                    // border *after* its children (`Node.paint` — children, then
+                    // `_paintBorder`), so a border here could never be opened by a
+                    // child laid over it. The frame below carries the stroke instead.
+                    backgroundColor: look.ground,
+                    borderRadius: CORNER,
+                });
+            else
+                Object.assign(hover, {
+                    ':hover': { backgroundColor: '$surfaceHover' },
+                });
+            break;
+    }
+    // The `line` strip's hover — see {@link hoverWash} for why it is a box and
+    // why `hovered` is state rather than a `:hover` block.
+    const wash = look.variant === 'line' && hovered && !disabled ? hoverWash(look) : null;
+    // The `outline` tab's shape, from two stacked children — a shape the style
+    // vocabulary cannot say in one box. `borderRadius` is one number and
+    // requires a uniform border, so "rounded shoulders, open bottom" is drawn
+    // as: a *frame* (inset-0 box carrying the full rounded border) and, after
+    // it, a *skirt* (a strip of ground over the frame's panel edge, covering
+    // the border and the two corners that would curl toward the panel, and
+    // redrawing the straight side walls over itself). The skirt can cover the
+    // frame only because they are siblings — a node's own border paints over
+    // its children, which is why the frame is not the trigger's border.
+    const outlineShape = look.variant === 'outline' && selected
+        ? [
+            hx('box', {
+                key: 'frame',
+                style: {
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    start: 0,
+                    end: 0,
+                    borderWidth: 1,
+                    borderColor: '$border',
+                    borderRadius: CORNER,
+                },
+            }),
+            hx('box', {
+                key: 'skirt',
+                style: [
+                    {
+                        position: 'absolute',
+                        backgroundColor: look.ground,
+                        borderColor: '$border',
+                    },
+                    vertical
+                        ? {
+                            top: 0,
+                            bottom: 0,
+                            end: 0,
+                            width: CORNER + 1,
+                            borderTopWidth: 1,
+                            borderBottomWidth: 1,
+                        }
+                        : {
+                            start: 0,
+                            end: 0,
+                            bottom: 0,
+                            height: CORNER + 1,
+                            borderStartWidth: 1,
+                            borderEndWidth: 1,
+                        },
+                ],
+            }),
+        ]
+        : null;
+    // The selected marker in the `line` variant: a 2px box riding the panel
+    // edge of the stop, over the strip's 1px rule.
+    const marker = look.variant === 'line'
+        ? hx('box', {
+            style: [
+                {
+                    position: 'absolute',
+                    backgroundColor: selected ? look.accent : 'transparent',
+                    transition: { backgroundColor: 100 },
+                },
+                vertical
+                    ? { top: 0, bottom: 0, end: 0, width: INDICATOR }
+                    : { left: 0, right: 0, bottom: 0, height: INDICATOR },
+            ],
+        })
+        : null;
+    // A `<TabsIndicator>` in the strip is drawn here, by the selected stop,
+    // behind its label. Layout owns its geometry — see the part's own comment.
+    const chip = indicator && selected
+        ? hx('box', {
+            key: 'chip',
+            style: styled({
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                zIndex: -1,
+                borderRadius: WASH_CORNER,
+                backgroundColor: over(look.ground, look.accent, 0.15),
+            }, indicator.style),
+        })
+        : null;
+    const ink = disabled
+        ? '$textMuted'
+        : selected
+            ? look.variant === 'line' || look.variant === 'subtle'
+                ? look.accent
+                : '$text'
+            : '$textMuted';
+    return {
+        style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            ...(grow && { flexGrow: 1 }),
+            gap: TRIGGER_GAP,
+            // Logical rather than left/right, because the one side that differs is
+            // the panel side: a `line` trigger carries the wash's air off the rule
+            // as padding, so the label keeps the same room a `subtle` one gives it
+            // and the wash still has somewhere to stop.
+            paddingTop: look.py,
+            paddingBottom: look.py + (vertical ? 0 : railGap(look)),
+            paddingStart: look.px,
+            paddingEnd: look.px + (vertical ? railGap(look) : 0),
+            fontSize: look.font,
+            color: ink,
+            ...(disabled ? {} : { cursor: 'pointer' }),
+            transition: { backgroundColor: 100, color: 100 },
+            ...Object.assign({}, ...variantStyle),
+            ...(disabled ? {} : hover),
+        },
+        behind: [chip, wash, outlineShape],
+        after: marker,
+    };
+}
+/**
+ * Tabs.
+ *
+ * ```jsx
+ * <Tabs defaultValue="members">
+ *   <TabsList>
+ *     <TabsTrigger value="members">Members</TabsTrigger>
+ *     <TabsTrigger value="projects">Projects</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="members">…</TabsContent>
+ *   <TabsContent value="projects">…</TabsContent>
+ * </Tabs>
+ * ```
+ */
+export function Tabs(props) {
+    // `Theme` is an interface, so it has no implicit index signature — the same
+    // widening `hx.ts` documents for the `theme` prop.
+    const theme = useTheme();
+    const [uncontrolled, setUncontrolled] = React.useState(props.defaultValue);
+    const [focused, setFocused] = React.useState(null);
+    const selected = props.value ?? uncontrolled;
+    const vertical = props.orientation === 'vertical';
+    const variant = props.variant ?? 'line';
+    const size = SIZES[props.size ?? 'md'] ?? SIZES.md;
+    const accent = resolveColor(props.accent, theme, String(theme.accent));
+    const ground = resolveColor(props.ground, theme, String(theme.background));
+    const body = typeof theme.fontSize === 'number' ? theme.fontSize : 14;
+    const { onValueChange } = props;
+    const controlled = props.value !== undefined;
+    // The registry the keyboard walks. A ref rather than state: a trigger
+    // mounting must not re-render the tree, and the walk only happens inside
+    // an event handler, where `current` is always current.
+    const triggers = React.useRef(new Map());
+    // Which values have ever been selected, for `lazyMount`. Written during
+    // render on purpose — adding the current selection is idempotent, and an
+    // effect would run a frame after the panel already needed the answer.
+    const seen = React.useRef(new Set());
+    if (selected !== undefined)
+        seen.current.add(selected);
+    const select = React.useCallback((value) => {
+        if (value === selected)
+            return;
+        if (!controlled)
+            setUncontrolled(value);
+        onValueChange?.({ value });
+    }, [selected, controlled, onValueChange]);
+    const look = React.useMemo(() => ({
+        variant,
+        vertical,
+        manual: props.activationMode === 'manual',
+        fitted: props.fitted ?? false,
+        justify: props.justify,
+        overflow: props.overflow ?? 'menu',
+        accent,
+        ground,
+        text: String(theme.text),
+        font: body + size.step,
+        px: size.px,
+        py: size.py,
+        selected,
+        focused,
+        select,
+        setFocused,
+        triggers: triggers.current,
+        everSelected: (value) => seen.current.has(value),
+        lazyMount: props.lazyMount ?? false,
+        unmountOnExit: props.unmountOnExit ?? false,
+    }), [
+        variant,
+        vertical,
+        props.activationMode,
+        props.fitted,
+        props.justify,
+        props.overflow,
+        props.lazyMount,
+        props.unmountOnExit,
+        accent,
+        ground,
+        theme.text,
+        body,
+        size,
+        selected,
+        focused,
+        select,
+    ]);
+    return h(LookContext.Provider, { value: look }, hx('box', {
+        // The same fill-the-space default core's `<Tabs>` had: a notebook is
+        // usually the main region of whatever pane it is in. `style` wins for
+        // the one that is not.
+        style: styled({
+            flexGrow: 1,
+            minHeight: 0,
+            minWidth: 0,
+            flexDirection: vertical ? 'row' : 'column',
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, props.children));
+}
+/** The strip's tab stop when the focus is on the overflow button rather than
+ *  on a tab. A NUL is not a value any trigger can be given. */
+const MORE = '\u0000more';
+const NONE = [];
+function sameValues(a, b) {
+    return a.length === b.length && a.every((value, i) => b[i] === value);
+}
+/** Every primitive child, joined — see {@link OverflowItem.key}. */
+function labelKey(children) {
+    const parts = [];
+    React.Children.forEach(children, (child) => {
+        parts.push(typeof child === 'string' || typeof child === 'number'
+            ? String(child)
+            : '\u0000');
+    });
+    return parts.join('\u0001');
+}
+/**
+ * Which tabs do not fit, in the order they were written.
+ *
+ * The whole thing runs off what layout actually did, because nothing else
+ * here can answer it: a tab's width is its label in the theme's face at the
+ * size the theme is set to, plus whatever the app hung beside it. So the
+ * strip measures the triggers it has drawn and remembers what each one came
+ * out at, and the tabs in the menu are chosen from those remembered widths —
+ * they are not on the strip to be measured while they are in the menu.
+ *
+ * **Two passes, not one.** A tab whose width is not known yet (a first
+ * render, a tab just added, a label just changed) puts the strip back to
+ * showing everything for one pass, which is what gives it a width; the pass
+ * after that is the one that decides. That costs a frame of a strip
+ * overflowing its own edge — clipped, since the strip clips while the menu
+ * is on — and buys a fixed point: what is hidden is a pure function of the
+ * remembered widths and the room, so the answer does not move unless
+ * something really did.
+ *
+ * **When it re-runs.** After every commit, through `afterLayout` — react-x11
+ * lays out on a frame flush rather than in the commit, so an effect reads the
+ * *previous* pass's geometry. And after every layout this component did not
+ * cause, through the owning window's `onAnchorChange`: the strip getting
+ * narrower is usually the window being resized, which re-lays out without
+ * re-rendering anything and would otherwise leave the menu answering a width
+ * the strip stopped having.
+ */
+function useOverflow(active, items, look, listRef, moreRef) {
+    const widths = React.useRef(new Map());
+    // What `abs` was in when those were taken, so the menu can ask for them
+    // back in the logical pixels a style length speaks.
+    const measured = React.useRef(1);
+    const [hidden, setHidden] = React.useState(NONE);
+    // Read and written straight, beside the state: two `onAnchorChange`
+    // notifications can land in one flush, and the second has to see what the
+    // first decided rather than the render's stale copy.
+    const hiddenRef = React.useRef(hidden);
+    hiddenRef.current = hidden;
+    const measure = () => {
+        const list = listRef.current;
+        const room = list?.contentBox?.().width ?? 0;
+        // Nothing laid out yet, or laid out inside a hidden panel (`display:
+        // 'none'` is out of layout, so the strip is 0 wide there). Answering
+        // "everything overflows" would empty the strip into the menu and flash
+        // it back the moment the panel is shown.
+        if (!list || !(room > 0))
+            return;
+        // `abs` and `contentBox()` are device pixels; a style length is logical.
+        // Everything below is device, so the style numbers convert once, here.
+        const scale = list.scale && list.scale > 0 ? list.scale : 1;
+        measured.current = scale;
+        const gap = stripGap(look.variant) * scale;
+        const drawn = (value) => {
+            const node = look.triggers.get(value)?.node;
+            return node && node.abs.width > 0 ? node : null;
+        };
+        // A `fitted` strip with nothing hidden has already grown its triggers to
+        // fill it, so those widths are the strip shared out rather than what a
+        // tab needs, and writing them down would be writing down the answer to
+        // the wrong question. The exception is the pass that matters: a `fitted`
+        // strip that is *overflowing* had no free space to grow into, so the
+        // widths are honest — and that is exactly the pass the menu appears on.
+        let live = 0;
+        let count = 0;
+        for (const item of items) {
+            const node = drawn(item.value);
+            if (!node)
+                continue;
+            live += node.abs.width;
+            count += 1;
+        }
+        live += Math.max(0, count - 1) * gap;
+        if (!look.fitted || hiddenRef.current.length > 0 || live > room) {
+            for (const item of items) {
+                const node = drawn(item.value);
+                if (!node)
+                    continue;
+                widths.current.set(item.value, {
+                    key: item.key,
+                    width: node.abs.width,
+                    height: node.abs.height,
+                });
+            }
+        }
+        // A tab that has left the strip has no width worth keeping — and this is
+        // the only thing that ever empties the map.
+        const present = new Set(items.map((item) => item.value));
+        for (const value of [...widths.current.keys()]) {
+            if (!present.has(value))
+                widths.current.delete(value);
+        }
+        const known = (item) => {
+            const seen = widths.current.get(item.value);
+            return seen && seen.key === item.key ? seen.width : null;
+        };
+        let natural = Math.max(0, items.length - 1) * gap;
+        let unmeasured = false;
+        for (const item of items) {
+            const width = known(item);
+            if (width === null)
+                unmeasured = true;
+            else
+                natural += width;
+        }
+        // The measuring pass — everything on the strip, nothing decided yet —
+        // is `NONE`, which is also the answer when it all fits.
+        let next = NONE;
+        if (!unmeasured && natural > room) {
+            // The button is measured once it exists; before that it is guessed at
+            // its own padding plus a chevron, and the pass after it mounts
+            // corrects the guess.
+            const more = moreRef.current?.abs.width || (look.px * 2 + look.font) * scale;
+            const budget = room - more - gap;
+            const shown = new Set();
+            let used = 0;
+            const take = (value, width) => {
+                used += width + (shown.size ? gap : 0);
+                shown.add(value);
+            };
+            // Straight down the strip, and the first tab that does not fit ends
+            // it: which tabs are on the strip is a question about room, and
+            // nothing else. The selected tab is not pulled out of the menu to keep
+            // its place — the button wears the selected look instead, so the strip
+            // does not reshuffle itself every time a tab is picked out of it.
+            for (const item of items) {
+                if (shown.has(item.value))
+                    continue;
+                const width = known(item) ?? 0;
+                if (used + width + (shown.size ? gap : 0) > budget)
+                    break;
+                take(item.value, width);
+            }
+            next = items
+                .filter((item) => !shown.has(item.value))
+                .map((item) => item.value);
+        }
+        if (sameValues(next, hiddenRef.current))
+            return;
+        hiddenRef.current = next;
+        setHidden(next);
+    };
+    // Re-read through a ref so the subscriptions below run this render's
+    // closure without being torn down and rebuilt for every one of them.
+    const measureRef = React.useRef(measure);
+    measureRef.current = measure;
+    // Deliberately no dependency array: any commit can move a tab's width.
+    React.useEffect(() => {
+        if (!active)
+            return undefined;
+        const tick = afterLayout(() => measureRef.current());
+        return () => cancelAfterLayout(tick);
+    });
+    React.useEffect(() => {
+        if (!active)
+            return undefined;
+        const root = listRef.current?.root;
+        if (!root?.onAnchorChange)
+            return undefined;
+        return root.onAnchorChange(() => measureRef.current());
+    }, [active, listRef]);
+    // `overflow="clip"` turned on mid-life, or the strip turned vertical: hand
+    // the tabs back rather than leaving them in a menu nothing draws.
+    React.useEffect(() => {
+        if (!active && hiddenRef.current.length > 0) {
+            hiddenRef.current = NONE;
+            setHidden(NONE);
+        }
+    }, [active]);
+    const sizeOf = React.useCallback((value, key) => {
+        const seen = widths.current.get(value);
+        if (!seen || seen.key !== key)
+            return null;
+        const scale = measured.current || 1;
+        return { width: seen.width / scale, height: seen.height / scale };
+    }, []);
+    return { hidden: active ? hidden : NONE, sizeOf };
+}
+/**
+ * The overflow menu's own size, worked out from the measurements the strip
+ * already took rather than left to the popup.
+ *
+ * A `<popup>` can size itself from its content, and that is normally the
+ * right answer — but its placement is then a function of a number nothing
+ * outside it can see, which is a bad thing for the one popup here whose
+ * anchor moves every time the strip re-fits. A menu row is the same content
+ * as the tab it stands for — same label, same face, same gap, same glyph
+ * beside it — laid out with the row's padding instead of the tab's, so the
+ * strip's own measurement answers it exactly.
+ *
+ * `null` when a tab in the menu has not been measured, which is the pass
+ * where nothing is decided anyway; the popup sizes itself for that frame.
+ */
+function menuSheet(look, items, sizeOf) {
+    if (items.length === 0)
+        return null;
+    let content = 0;
+    let rows = 0;
+    for (const item of items) {
+        const size = sizeOf(item.value, item.key);
+        if (!size)
+            return null;
+        content = Math.max(content, size.width - look.px * 2 + MENU_ROW_PX * 2);
+        // …and off the height, the air a `line` trigger keeps under its wash on
+        // top of its padding: a menu row has no rule to stand off.
+        rows += size.height - look.py * 2 - railGap(look) + MENU_ROW_PY * 2;
+    }
+    const frame = (SHEET_PAD + SHEET_BORDER) * 2;
+    return {
+        width: Math.ceil(Math.max(content + frame, MENU_MIN_WIDTH)),
+        height: Math.ceil(rows + (items.length - 1) * MENU_ROW_GAP + frame),
+    };
+}
+/**
+ * The button at the end of a strip that ran out of room, and the menu it
+ * drops.
+ *
+ * **It is a stop on the strip like any other**, drawn from the same
+ * {@link tabChrome} the triggers are — so when the selected tab is one of
+ * the ones it is holding, the button wears the selected look (the accent
+ * marker under a `line` strip, the chip on a `subtle` one) and the menu
+ * marks the row. That is what a tab picked out of the menu does instead of
+ * displacing a tab that fitted: the strip keeps the tabs it has room for,
+ * and the button says the selection is behind it. It also takes the strip's
+ * tab stop while it holds the selection, since the trigger that would
+ * normally have it is not on the strip to hold anything.
+ *
+ * The menu is a `<popup>` anchored to the button and sized from its own
+ * content — override-redirect, grabbing the pointer, dismissed by a press
+ * anywhere else. Which means it never takes the focus, so **the button keeps
+ * the keyboard** and hands the menu its keys, the way `<DatePicker>`'s
+ * trigger does: Down/Up open it and walk it, Enter and Space commit, Escape
+ * shuts it. A press elsewhere in the window blurs the button and that shuts
+ * it too, and `useDismissOnWindowBlur` covers the one case a blur cannot —
+ * the *window* going to the background, which leaves the button focused.
+ */
+function TabsMore(props) {
+    const { items, look, moreRef, sheet } = props;
+    const strip = React.useContext(StripContext);
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+    // -1 is "nothing yet", which is what a menu dropped with the mouse opens
+    // on: a row lit before the pointer or the arrows have said anything is a
+    // row the next Enter would commit by accident.
+    const [active, setActive] = React.useState(-1);
+    // The button wears whatever the tabs beside it wear — including the reason
+    // a `line` strip's fill has to be a box ({@link hoverWash}), which is why
+    // this is tracked rather than declared.
+    const [hovered, setHovered] = React.useState(false);
+    const lit = hovered || open;
+    /** Where the selection is, when it is behind this button. */
+    const chosen = items.findIndex((item) => item.value === look.selected);
+    const holds = chosen >= 0;
+    const close = () => setOpen(false);
+    useDismissOnWindowBlur(moreRef, open, close);
+    // The menu is drawn from the tabs the strip could not fit, and that set
+    // moves under it — a resize while it is open can take one back. Keeping
+    // the cursor in range is cheaper than closing on every re-fit.
+    const at = items.length ? Math.min(active, items.length - 1) : -1;
+    const choose = (value) => {
+        close();
+        look.select(value);
+        // The focus stays here: the tab that was picked is still in this menu,
+        // and this button is the stop on the strip that now stands for it.
+    };
+    const step = (delta) => {
+        const n = items.length;
+        if (n === 0)
+            return -1;
+        // From "nothing yet", Down means the first row and Up means the last —
+        // which is what starting one step outside either end comes to.
+        const from = at < 0 ? (delta > 0 ? -1 : 0) : at;
+        for (let i = 1; i <= n; i++) {
+            const index = (((from + delta * i) % n) + n) % n;
+            if (!items[index]?.disabled)
+                return index;
+        }
+        return at;
+    };
+    const commit = () => {
+        const item = items[at];
+        if (item && !item.disabled)
+            choose(item.value);
+    };
+    const onKeyDown = (ev) => {
+        if (ev.keysym === XK_ESCAPE) {
+            if (!open)
+                return;
+            close();
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+        if (!open) {
+            if (ev.keysym !== XK_DOWN && ev.keysym !== XK_UP)
+                return;
+            // Opened from the keyboard, so it opens on a row: the selected one if
+            // the selection is in here, and otherwise the end the key came from.
+            setActive(holds ? chosen : ev.keysym === XK_UP ? items.length - 1 : 0);
+            setOpen(true);
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+        // An open menu owns the keyboard: the strip's own arrow walk is one
+        // bubble away, and a Down that both moved the menu's cursor and roved
+        // the focus off the button would close the menu it had just moved.
+        if (ev.keysym === XK_DOWN)
+            setActive(step(1));
+        else if (ev.keysym === XK_UP)
+            setActive(step(-1));
+        else if (ev.keysym === XK_RETURN || ev.codepoint === 32)
+            commit();
+        else
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+    };
+    const row = (item, index) => hx('box', {
+        key: item.value,
+        // A menu of tabs is a set of mutually exclusive choices, which is
+        // what this role says — and it is the only place a screen reader
+        // hears about a tab that is not on the strip to carry `role="tab"`.
+        role: 'menuitemradio',
+        'aria-checked': index === chosen,
+        disabled: item.disabled || undefined,
+        onMouseEnter: () => {
+            if (!item.disabled)
+                setActive(index);
+        },
+        onClick: () => {
+            if (!item.disabled)
+                choose(item.value);
+        },
+        style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: TRIGGER_GAP,
+            paddingLeft: MENU_ROW_PX,
+            paddingRight: MENU_ROW_PX,
+            paddingTop: MENU_ROW_PY,
+            paddingBottom: MENU_ROW_PY,
+            borderRadius: WASH_CORNER,
+            fontSize: look.font,
+            color: item.disabled ? '$textMuted' : '$text',
+            ...(item.disabled
+                ? {}
+                : {
+                    cursor: 'pointer',
+                    // The lit row is state rather than a `:hover` block because
+                    // the arrows move it too, and a menu with two lit rows —
+                    // the pointer's and the keyboard's — is worse than one.
+                    ...(index === at && { backgroundColor: '$surfaceHover' }),
+                }),
+        },
+    }, 
+    // The selected row's marker: the strip's own accent bar, turned to
+    // stand along a row instead of under a tab. It is a mark and not a
+    // fill so it cannot be confused with the row the cursor is on — both
+    // can be true of the same row.
+    index === chosen
+        ? hx('box', {
+            key: 'mark',
+            style: {
+                position: 'absolute',
+                start: 0,
+                top: MENU_ROW_PY / 2,
+                bottom: MENU_ROW_PY / 2,
+                width: INDICATOR,
+                borderRadius: INDICATOR / 2,
+                backgroundColor: look.accent,
+            },
+        })
+        : null, withText(item.children, CAP_TRIM));
+    const chrome = tabChrome(look, strip?.indicator ?? null, {
+        selected: holds,
+        disabled: false,
+        hovered: lit,
+        // Never: the button only exists while something is hidden, and a
+        // `fitted` strip has stopped sharing its width out by then.
+        grow: false,
+    });
+    return hx('box', {
+        ref: moreRef,
+        role: 'button',
+        'aria-haspopup': 'menu',
+        'aria-expanded': open,
+        'aria-label': `${items.length} more tab${items.length === 1 ? '' : 's'}`,
+        focusable: true,
+        // The strip is one tab stop. A tab holds it — unless the selected tab
+        // is one of the ones behind this button, and then this holds it.
+        tabIndex: holds ? 0 : -1,
+        // On the press, not the release: a control whose whole purpose is to
+        // be looked at has nothing to gain from waiting out the click.
+        onMouseDown: () => {
+            setActive(-1);
+            setOpen((was) => !was);
+        },
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onFocus: () => look.setFocused(MORE),
+        onBlur: () => {
+            look.setFocused(null);
+            close();
+        },
+        onKeyDown,
+        style: [
+            chrome.style,
+            // An open button reads as engaged in every variant, not only the one
+            // whose wash is a box — and not when it is already wearing the
+            // selected look, which outranks a hover.
+            lit && !holds
+                ? look.variant === 'line'
+                    ? { color: '$text' }
+                    : { color: '$text', backgroundColor: '$surfaceHover' }
+                : {},
+        ],
+        'data-testname': 'tabs-more',
+    }, chrome.behind, h(Icon, { name: 'chevronDown', size: look.font - 4 }), chrome.after, open &&
+        items.length > 0 &&
+        hx('popup', {
+            theme,
+            // Sized here rather than from its own content, so where it lands is
+            // arithmetic this component can see — {@link menuSheet}.
+            ...(sheet ?? {}),
+            anchor: {
+                to: moreRef,
+                placement: 'bottom',
+                // The menu hangs off the end of the strip because the button
+                // does, and `end` mirrors on its own in an RTL subtree.
+                align: 'end',
+            },
+            grab: true,
+            onDismiss: close,
+            // ARGB where the display has it, so the corners the sheet gives up
+            // are the desktop rather than a colour — the same call
+            // `<DatePicker>`'s sheet makes, and the same reason the window
+            // paints nothing itself when it can be seen through.
+            transparent: true,
+            style: {
+                backgroundColor: theme.background,
+                '@supports transparency': { backgroundColor: 'transparent' },
+            },
+        }, hx('box', {
+            role: 'menu',
+            style: {
+                flexGrow: 1,
+                minWidth: MENU_MIN_WIDTH,
+                padding: SHEET_PAD,
+                gap: MENU_ROW_GAP,
+                borderWidth: SHEET_BORDER,
+                borderColor: '$border',
+                backgroundColor: theme.background,
+                '@supports transparency': { borderRadius: theme.radiusPopup },
+            },
+        }, items.map(row))));
+}
+/**
+ * The strip of triggers — a single tab stop, walked with the arrows.
+ *
+ * The arrows are visual, the list is logical: in a mirrored horizontal strip
+ * the *next* trigger is the one to the left, and in either direction the walk
+ * follows where layout actually put each trigger (sorted by position, not by
+ * mount order), wraps at the ends, and skips disabled triggers. Home/End jump
+ * to the ends. In `manual` mode focus moves without selecting, and Enter or
+ * Space commits — those keys are not handled here, because core makes them
+ * the click the trigger's own `onClick` already is.
+ *
+ * A horizontal strip with more tabs than room keeps the ones that fit and
+ * drops the rest into a menu at its end (`overflow`, on the root). The
+ * menu's button is the last stop on the same walk.
+ */
+export function TabsList(props) {
+    const look = useLook('TabsList');
+    const rtl = useDirection() === 'rtl';
+    const { vertical } = look;
+    const listRef = React.useRef(null);
+    const moreRef = React.useRef(null);
+    // A `<TabsIndicator>` written into the strip, Chakra-style, is read here
+    // and handed to the triggers — the selected one draws it. It has to be a
+    // direct child for this to see it; anything else in the strip renders
+    // where it was written.
+    //
+    // The triggers come off the same walk, for the overflow menu: it draws the
+    // children the app wrote on the trigger, so a tab that moves into the menu
+    // keeps its label without the app naming it twice. Anything in the strip
+    // that is *not* a trigger stays on the strip and is not accounted for —
+    // the arithmetic is about tabs.
+    const children = React.Children.toArray(props.children);
+    let indicator = null;
+    const items = [];
+    for (const child of children) {
+        if (!React.isValidElement(child))
+            continue;
+        if (child.type === TabsIndicator) {
+            indicator = child.props;
+        }
+        else if (child.type === TabsTrigger) {
+            const trigger = child.props;
+            items.push({
+                value: trigger.value,
+                disabled: trigger.disabled ?? false,
+                key: labelKey(trigger.children),
+                children: trigger.children,
+            });
+        }
+    }
+    // One tab cannot overflow into a menu that would take more room than it
+    // does, so the machinery does not start until there are two.
+    const { hidden, sizeOf } = useOverflow(look.overflow === 'menu' && !vertical && items.length > 1, items, look, listRef, moreRef);
+    const hiddenSet = hidden.length > 0 ? new Set(hidden) : null;
+    const overflowed = hiddenSet
+        ? items.filter((item) => hiddenSet.has(item.value))
+        : [];
+    const onKeyDown = (ev) => {
+        // Where layout put each trigger is the one ordering that cannot drift
+        // from what the user sees — mount order can, after a remove and re-add.
+        // The overflow button is a stop on the same walk and sorts in with the
+        // rest, which is what puts it at the end without it being told.
+        const stops = [...look.triggers.entries()].map(([value, entry]) => ({
+            value,
+            ...entry,
+        }));
+        if (moreRef.current) {
+            stops.push({ value: MORE, node: moreRef.current, disabled: false });
+        }
+        const entries = stops.sort((a, b) => vertical ? a.node.abs.y - b.node.abs.y : a.node.abs.x - b.node.abs.x);
+        // Visual order back to logical: an RTL strip reads right to left. A
+        // vertical strip never mirrors — Up is Up.
+        const swap = !vertical && rtl;
+        if (swap)
+            entries.reverse();
+        /** The next enabled trigger `delta` steps away, wrapping. */
+        const step = (from, delta) => {
+            const n = entries.length;
+            if (n === 0)
+                return null;
+            for (let i = 1; i <= n; i++) {
+                const entry = entries[(((from + delta * i) % n) + n) % n];
+                if (entry && !entry.disabled)
+                    return entry;
+            }
+            return null;
+        };
+        const goTo = (entry) => {
+            if (!entry)
+                return;
+            entry.node.focus();
+            // The overflow button selects nothing: it is the way to the tabs that
+            // did not fit, not one of them.
+            if (!look.manual && entry.value !== MORE)
+                look.select(entry.value);
+        };
+        const back = vertical ? XK_UP : swap ? XK_RIGHT : XK_LEFT;
+        const forward = vertical ? XK_DOWN : swap ? XK_LEFT : XK_RIGHT;
+        const current = entries.findIndex((entry) => entry.value === (look.focused ?? look.selected));
+        switch (ev.keysym) {
+            case back:
+                goTo(step(current === -1 ? 0 : current, -1));
+                return;
+            case forward:
+                goTo(step(current === -1 ? 0 : current, 1));
+                return;
+            case XK_HOME:
+                goTo(entries.find((entry) => !entry.disabled) ?? null);
+                return;
+            case XK_END:
+                goTo([...entries].reverse().find((entry) => !entry.disabled) ?? null);
+                return;
+            default:
+        }
+    };
+    // What the strip itself draws, per variant. The `line` and `outline` rules
+    // are an absolutely positioned 1px box on the panel edge rather than a
+    // border: borders are all-edges here, and this has to sit on one side.
+    // `zIndex: -1` paints it under the triggers, so a selected `outline`
+    // trigger's opaque fill is what cuts it.
+    const rule = look.variant === 'line' || look.variant === 'outline'
+        ? hx('box', {
+            style: [
+                { position: 'absolute', backgroundColor: '$border', zIndex: -1 },
+                vertical
+                    ? { top: 0, bottom: 0, end: 0, width: RULE }
+                    : { left: 0, right: 0, bottom: 0, height: RULE },
+            ],
+        })
+        : null;
+    const chrome = look.variant === 'enclosed'
+        ? {
+            // Chakra's `bg.muted` chip, mixed from the palette this theme
+            // actually has — opaque, for the reason `over` gives.
+            backgroundColor: over(look.ground, look.text, 0.07),
+            borderRadius: CORNER,
+            padding: 3,
+            gap: 2,
+        }
+        : { gap: stripGap(look.variant) };
+    return h(StripContext.Provider, {
+        value: {
+            indicator,
+            // A `fitted` strip stops growing its tabs while any of them is in
+            // the menu — see {@link TabsStrip}.
+            grow: look.fitted && hidden.length === 0,
+        },
+    }, hx('box', {
+        ref: listRef,
+        role: 'tablist',
+        'aria-orientation': look.vertical ? 'vertical' : 'horizontal',
+        onKeyDown,
+        style: styled({
+            flexShrink: 0,
+            flexDirection: vertical ? 'column' : 'row',
+            alignItems: 'stretch',
+            ...(look.justify && {
+                justifyContent: look.justify === 'start'
+                    ? 'flex-start'
+                    : look.justify === 'end'
+                        ? 'flex-end'
+                        : 'center',
+            }),
+            // A pass that has not decided yet draws every tab at its natural
+            // width, which is wider than the strip by definition — clipped
+            // rather than spilling over the panel for the frame it takes.
+            ...(look.overflow === 'menu' && !vertical
+                ? { overflow: 'hidden' }
+                : {}),
+            ...chrome,
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, rule, hiddenSet
+        ? children.filter((child) => !(React.isValidElement(child) &&
+            child.type === TabsTrigger &&
+            hiddenSet.has(child.props.value)))
+        : children, overflowed.length > 0
+        ? h(TabsMore, {
+            key: 'tabs-more',
+            items: overflowed,
+            look,
+            moreRef,
+            sheet: menuSheet(look, overflowed, sizeOf),
+        })
+        : null));
+}
+/**
+ * One tab. Prose and glyphs alike are legal children — a string is wrapped
+ * in `<text>`, and an `<Icon>` inherits the trigger's ink (its `size` does
+ * not inherit and has to be named).
+ */
+export function TabsTrigger(props) {
+    const look = useLook('TabsTrigger');
+    const strip = React.useContext(StripContext);
+    const indicator = strip?.indicator ?? null;
+    const { value, disabled = false } = props;
+    const selected = look.selected === value;
+    // Tracked rather than declared, because the wash is a box of its own —
+    // {@link hoverWash}.
+    const [hovered, setHovered] = React.useState(false);
+    // Registration is the ref callback: a new closure each render, so React
+    // re-runs it and a `disabled` that changed is re-registered. Order in the
+    // map churns with that, which is why the keyboard sorts by position
+    // instead of trusting it.
+    const register = (node) => {
+        if (node)
+            look.triggers.set(value, { node, disabled });
+        else
+            look.triggers.delete(value);
+    };
+    // Everything it looks like, shared with the overflow button beside it —
+    // {@link tabChrome}.
+    const chrome = tabChrome(look, indicator, {
+        selected,
+        disabled,
+        hovered,
+        grow: strip ? strip.grow : look.fitted,
+    });
+    return hx('box', {
+        role: 'tab',
+        'aria-selected': selected,
+        ref: register,
+        focusable: !disabled,
+        // Roving focus: the selected trigger is the strip's tab stop. With
+        // nothing selected yet every trigger is reachable, which is the lesser
+        // evil — a strip nobody can tab into is worse than two stops.
+        tabIndex: look.selected === undefined ? 0 : selected ? 0 : -1,
+        disabled,
+        onFocus: () => look.setFocused(value),
+        onBlur: () => look.setFocused(null),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onClick: () => !disabled && look.select(value),
+        style: styled(chrome.style, props.style),
+        'data-testname': props['data-testname'],
+    }, chrome.behind, withText(props.children, CAP_TRIM), chrome.after);
+}
+/**
+ * A marker that follows the selected trigger — Chakra's `Tabs.Indicator`,
+ * and like there it is what gives the `plain` variant a look.
+ *
+ * Write it as a direct child of `<TabsList>`. It renders nothing where it
+ * stands: the selected trigger draws it, as a box behind its own label — so
+ * layout owns the geometry and a resize, a font change or an RTL mirror can
+ * never leave the marker where a trigger used to be. What that costs is the
+ * slide: this renderer cannot animate between two mounts, so the marker
+ * moves in one step.
+ */
+export function TabsIndicator(props) {
+    useLook('TabsIndicator');
+    void props;
+    return null;
+}
+/**
+ * One panel. Every panel mounts up front and the unselected ones are
+ * `display: 'none'` — out of layout, still alive, so a form half-filled on
+ * another tab keeps its state. `lazyMount` defers a panel until its first
+ * selection; `unmountOnExit` gives the state up when it hides. Both are on
+ * the root, because they are a policy about the set, not about one panel.
+ */
+export function TabsContent(props) {
+    const look = useLook('TabsContent');
+    const selected = look.selected === props.value;
+    if (!selected) {
+        if (look.unmountOnExit)
+            return null;
+        if (look.lazyMount && !look.everSelected(props.value))
+            return null;
+    }
+    return hx('box', {
+        role: 'tabpanel',
+        // A hidden panel is still mounted (that is the point), but it must not
+        // be read: `display: 'none'` takes it out of layout, and this takes it
+        // out of the accessibility tree.
+        'aria-hidden': selected ? undefined : true,
+        style: styled({
+            display: selected ? 'flex' : 'none',
+            flexDirection: 'column',
+            flexGrow: 1,
+            minHeight: 0,
+            minWidth: 0,
+            // Prose in a panel is body text. Named here because a bare
+            // `<text>`'s default ink is not the palette's — it has to inherit
+            // one, or a dark theme reads it in the light theme's black.
+            color: '$text',
+            ...(look.vertical
+                ? { paddingStart: PANEL_GAP }
+                : { paddingTop: PANEL_GAP }),
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, withText(props.children));
+}
+//# sourceMappingURL=index.js.map