@hanzogui/kitchen-sink 3.0.5

package/src/usecases/ToastCase.tsx

@@ -0,0 +1,46 @@
+import { Toast, ToastProvider, ToastViewport } from '@hanzogui/toast'
+import React from 'react'
+import { Button, YStack } from '@hanzo/gui'
+
+export function ToastCase() {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <ToastProvider>
+      <Button
+        data-testid="button-add-toast"
+        onPress={() => setCount((count) => count + 1)}
+      >
+        Add toast
+      </Button>
+      <YStack maxWidth={700} margin={'auto'}>
+        <Button data-testid="button-before">Focusable before viewport</Button>
+
+        {[...Array(count)].map((_, index) => {
+          const identifier = index + 1
+          return (
+            <Toast key={index} open data-testid={`toast-${identifier}`}>
+              <Toast.Title>Toast {identifier} title</Toast.Title>
+              <Toast.Description>Toast {identifier} description</Toast.Description>
+
+              <Toast.Close aria-label="Close" asChild>
+                <Button
+                  data-testid={`toast-button-${identifier}.1`}
+                >{`Toast button ${identifier}.1`}</Button>
+              </Toast.Close>
+              <Toast.Action altText="Go and perform an action" mt="$2" asChild>
+                <Button
+                  data-testid={`toast-button-${identifier}.2`}
+                >{`Toast button ${identifier}.2`}</Button>
+              </Toast.Action>
+            </Toast>
+          )
+        })}
+
+        <ToastViewport />
+
+        <Button data-testid="button-after">Focusable after viewport</Button>
+      </YStack>
+    </ToastProvider>
+  )
+}

package/src/usecases/ToggleGroupActiveProps.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { SizableText, ToggleGroup, YStack, useToggleGroupItem } from '@hanzo/gui'
+
+// Issue #3485: ToggleGroup active prop passed to children
+// Children of ToggleGroup.Item can access active state via useToggleGroupItem hook
+
+const CustomItem = ({ children }: { children: React.ReactNode }) => {
+  const { active } = useToggleGroupItem()
+  return (
+    <SizableText id={`custom-item-${children}`} data-active={active ? 'true' : 'false'}>
+      {children}
+    </SizableText>
+  )
+}
+
+export function ToggleGroupActiveProps() {
+  const [value, setValue] = React.useState('option1')
+
+  return (
+    <YStack p="$4" gap="$4">
+      <ToggleGroup
+        id="toggle-group"
+        type="single"
+        value={value}
+        onValueChange={(val) => val && setValue(val)}
+        disableDeactivation
+      >
+        <ToggleGroup.Item value="option1" id="item-1">
+          <CustomItem>option1</CustomItem>
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="option2" id="item-2">
+          <CustomItem>option2</CustomItem>
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="option3" id="item-3">
+          <CustomItem>option3</CustomItem>
+        </ToggleGroup.Item>
+      </ToggleGroup>
+    </YStack>
+  )
+}

package/src/usecases/ToggleGroupXGroupCase.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import { Button, ToggleGroup, XGroup, YStack, Text } from '@hanzo/gui'
+import { AlignLeft, AlignCenter, AlignRight } from '@hanzogui/lucide-icons-2'
+
+/**
+ * Tests two patterns of combining ToggleGroup + XGroup:
+ *
+ * Pattern A: XGroup.Item wraps ToggleGroup.Item (demo pattern)
+ * - XGroup provides border radius management
+ * - ToggleGroup.Item handles toggle logic
+ * - Radius styles should flow from XGroup.Item to ToggleGroup.Item
+ *
+ * Pattern B: ToggleGroup.Item asChild wraps XGroup.Item (showcase pattern)
+ * - ToggleGroup.Item uses asChild to delegate rendering to XGroup.Item
+ * - XGroup.Item wraps Button which renders the visual element
+ * - Press events must flow from ToggleGroup.Item through XGroup.Item to Button
+ */
+export function ToggleGroupXGroupCase() {
+  const [patternAValue, setPatternAValue] = useState<string>('')
+  const [patternBValue, setPatternBValue] = useState<string>('')
+
+  return (
+    <YStack gap="$8" p="$4">
+      {/* Pattern A: XGroup.Item > ToggleGroup.Item */}
+      <YStack gap="$2">
+        <Text>Pattern A: XGroup.Item wraps ToggleGroup.Item</Text>
+        <Text fontSize="$2" color="$color10">
+          value: {patternAValue || 'none'}
+        </Text>
+        <ToggleGroup
+          type="single"
+          value={patternAValue}
+          onValueChange={setPatternAValue}
+          testID="pattern-a-toggle-group"
+        >
+          <XGroup rounded="$10" testID="pattern-a-xgroup">
+            <XGroup.Item>
+              <ToggleGroup.Item
+                value="left"
+                aria-label="Left"
+                testID="pattern-a-left"
+                borderRadius="$10"
+              >
+                <AlignLeft size={16} />
+              </ToggleGroup.Item>
+            </XGroup.Item>
+            <XGroup.Item>
+              <ToggleGroup.Item
+                value="center"
+                aria-label="Center"
+                testID="pattern-a-center"
+                borderRadius="$10"
+              >
+                <AlignCenter size={16} />
+              </ToggleGroup.Item>
+            </XGroup.Item>
+            <XGroup.Item>
+              <ToggleGroup.Item
+                value="right"
+                aria-label="Right"
+                testID="pattern-a-right"
+                borderRadius="$10"
+              >
+                <AlignRight size={16} />
+              </ToggleGroup.Item>
+            </XGroup.Item>
+          </XGroup>
+        </ToggleGroup>
+      </YStack>
+
+      {/* Pattern B: ToggleGroup.Item asChild > XGroup.Item > Button */}
+      <YStack gap="$2">
+        <Text>Pattern B: ToggleGroup.Item asChild wraps XGroup.Item</Text>
+        <Text fontSize="$2" color="$color10">
+          value: {patternBValue || 'none'}
+        </Text>
+        <ToggleGroup
+          type="single"
+          value={patternBValue}
+          onValueChange={setPatternBValue}
+          testID="pattern-b-toggle-group"
+        >
+          <XGroup rounded="$10" testID="pattern-b-xgroup">
+            <ToggleGroup.Item value="left" aria-label="Left" asChild>
+              <XGroup.Item>
+                <Button testID="pattern-b-left" size="$3" icon={AlignLeft} />
+              </XGroup.Item>
+            </ToggleGroup.Item>
+            <ToggleGroup.Item value="center" aria-label="Center" asChild>
+              <XGroup.Item>
+                <Button testID="pattern-b-center" size="$3" icon={AlignCenter} />
+              </XGroup.Item>
+            </ToggleGroup.Item>
+            <ToggleGroup.Item value="right" aria-label="Right" asChild>
+              <XGroup.Item>
+                <Button testID="pattern-b-right" size="$3" icon={AlignRight} />
+              </XGroup.Item>
+            </ToggleGroup.Item>
+          </XGroup>
+        </ToggleGroup>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/TooltipAnimationCase.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import { Button, Paragraph, Tooltip, YStack, XStack } from '@hanzo/gui'
+
+/**
+ * Test case for validating CSS tooltip animation behavior
+ *
+ * Tests:
+ * 1. Enter animation - y translation and opacity should animate smoothly with intermediate values
+ * 2. Exit animation - should fade out and translate with intermediate values
+ * 3. First show vs subsequent shows - should behave identically
+ * 4. Arrow size validation
+ *
+ * Uses 1000ms animation for reliable intermediate state capture (same as AnimationBehavior tests)
+ */
+export function TooltipAnimationCase() {
+  const [showCount, setShowCount] = useState(0)
+
+  return (
+    <YStack
+      flex={1}
+      gap="$8"
+      p="$4"
+      bg="$background"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <XStack gap="$4">
+        <Paragraph data-testid="show-count">Show count: {showCount}</Paragraph>
+      </XStack>
+
+      {/* Main tooltip for animation testing - uses 1000ms animation for reliable intermediate capture */}
+      <Tooltip
+        placement="bottom"
+        delay={0}
+        restMs={0}
+        onOpenChange={(open) => {
+          if (open) setShowCount((c) => c + 1)
+        }}
+      >
+        <Tooltip.Trigger data-testid="tooltip-trigger">
+          <Button size="$4">Hover for tooltip</Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          data-testid="tooltip-content"
+          enterStyle={{ y: -20, opacity: 0 }}
+          exitStyle={{ y: -20, opacity: 0 }}
+          y={0}
+          opacity={1}
+          transition="lazy"
+          animateOnly={['transform', 'opacity']}
+        >
+          <Tooltip.Arrow data-testid="tooltip-arrow" size="$2" />
+          <Paragraph size="$2">Tooltip content</Paragraph>
+        </Tooltip.Content>
+      </Tooltip>
+
+      {/* Second tooltip to test first vs subsequent shows */}
+      <Tooltip placement="top" delay={0} restMs={0}>
+        <Tooltip.Trigger data-testid="tooltip-trigger-2">
+          <Button size="$4">Second tooltip</Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          data-testid="tooltip-content-2"
+          enterStyle={{ y: 20, opacity: 0 }}
+          exitStyle={{ y: 20, opacity: 0 }}
+          y={0}
+          opacity={1}
+          transition="lazy"
+          animateOnly={['transform', 'opacity']}
+        >
+          <Tooltip.Arrow data-testid="tooltip-arrow-2" size="$2" />
+          <Paragraph size="$2">Second tooltip</Paragraph>
+        </Tooltip.Content>
+      </Tooltip>
+
+      {/* Quick animation tooltip for comparison - 100ms */}
+      <Tooltip placement="right" delay={0} restMs={0}>
+        <Tooltip.Trigger data-testid="tooltip-trigger-quick">
+          <Button size="$4">Quick animation (100ms)</Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          data-testid="tooltip-content-quick"
+          enterStyle={{ x: -20, opacity: 0 }}
+          exitStyle={{ x: -20, opacity: 0 }}
+          x={0}
+          opacity={1}
+          transition="100ms"
+          animateOnly={['transform', 'opacity']}
+        >
+          <Tooltip.Arrow data-testid="tooltip-arrow-quick" size="$3" />
+          <Paragraph size="$2">Quick tooltip</Paragraph>
+        </Tooltip.Content>
+      </Tooltip>
+    </YStack>
+  )
+}

package/src/usecases/TooltipCase.tsx

@@ -0,0 +1,32 @@
+import { Button, Paragraph, Tooltip, TooltipSimple, YStack } from '@hanzo/gui'
+
+export function TooltipCase() {
+  return (
+    <YStack flex={1} gap="$8" p="$4" bg="$background">
+      <TooltipComp />
+
+      <TooltipSimple label="wtf">
+        <Button>simple tool</Button>
+      </TooltipSimple>
+    </YStack>
+  )
+}
+
+function TooltipComp() {
+  return (
+    <Tooltip placement="bottom">
+      <Tooltip.Trigger>
+        <Button>with tooltip</Button>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content
+        enterStyle={{ x: 0, y: -4, opacity: 0, scale: 0.96 }}
+        exitStyle={{ x: 0, y: -4, opacity: 0, scale: 0.96 }}
+        transition="bouncy"
+      >
+        <Tooltip.Arrow />
+        <Paragraph>some tooltip</Paragraph>
+      </Tooltip.Content>
+    </Tooltip>
+  )
+}

package/src/usecases/TooltipGlobalPatternCase.tsx

@@ -0,0 +1,83 @@
+import { Button, Paragraph, Tooltip, TooltipGroup, YStack, XStack } from '@hanzo/gui'
+import { useState } from 'react'
+
+/**
+ * Test case for "global tooltip" pattern: a single scoped tooltip with
+ * triggers in opposite corners.
+ *
+ * Bug: when switching between far-apart triggers, the tooltip animates
+ * across the screen instead of snapping to the new position.
+ */
+export function TooltipGlobalPatternCase() {
+  const [label, setLabel] = useState('')
+
+  return (
+    <YStack flex={1} bg="$background" p="$4" minHeight={600} minWidth={800}>
+      <TooltipGroup delay={{ open: 0, close: 150 }}>
+        <Tooltip scope="global-tip" offset={12} placement="bottom">
+          <YStack flex={1} justifyContent="space-between">
+            <XStack justifyContent="space-between">
+              <Tooltip.Trigger
+                scope="global-tip"
+                asChild
+                onMouseEnter={() => setLabel('Top Left')}
+              >
+                <Button data-testid="trigger-tl" size="$4">
+                  Top Left
+                </Button>
+              </Tooltip.Trigger>
+
+              <Tooltip.Trigger
+                scope="global-tip"
+                asChild
+                onMouseEnter={() => setLabel('Top Right')}
+              >
+                <Button data-testid="trigger-tr" size="$4">
+                  Top Right
+                </Button>
+              </Tooltip.Trigger>
+            </XStack>
+
+            <XStack justifyContent="space-between">
+              <Tooltip.Trigger
+                scope="global-tip"
+                asChild
+                onMouseEnter={() => setLabel('Bottom Left')}
+              >
+                <Button data-testid="trigger-bl" size="$4">
+                  Bottom Left
+                </Button>
+              </Tooltip.Trigger>
+
+              <Tooltip.Trigger
+                scope="global-tip"
+                asChild
+                onMouseEnter={() => setLabel('Bottom Right')}
+              >
+                <Button data-testid="trigger-br" size="$4">
+                  Bottom Right
+                </Button>
+              </Tooltip.Trigger>
+            </XStack>
+          </YStack>
+
+          <Tooltip.Content
+            data-testid="global-tip-content"
+            animatePosition
+            transition="200ms"
+            bg="$background"
+            elevation="$2"
+            rounded="$4"
+            px="$2.5"
+            py="$1"
+            enterStyle={{ y: -4, opacity: 0 }}
+            exitStyle={{ y: -4, opacity: 0 }}
+          >
+            <Tooltip.Arrow />
+            <Paragraph size="$3">{label}</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+      </TooltipGroup>
+    </YStack>
+  )
+}

package/src/usecases/TooltipGroupCase.tsx

@@ -0,0 +1,102 @@
+import {
+  Button,
+  Paragraph,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack,
+  Text,
+} from '@hanzo/gui'
+
+/**
+ * Test case for TooltipGroup behavior
+ *
+ * TooltipGroup should:
+ * 1. Apply delay only to the first tooltip shown
+ * 2. Show subsequent tooltips immediately when hovering between them
+ */
+export function TooltipGroupCase() {
+  return (
+    <YStack flex={1} gap="$6" p="$4" bg="$background">
+      <Text fontWeight="bold">Grouped (1s delay, skip on subsequent):</Text>
+      <TooltipGroup delay={{ open: 1000, close: 200 }} timeoutMs={500}>
+        <XStack gap="$4" justifyContent="center">
+          <Tooltip groupId="1" placement="bottom" restMs={0}>
+            <Tooltip.Trigger data-testid="tooltip-trigger-1">
+              <Button>Group 1</Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content
+              data-testid="tooltip-content-1"
+              enterStyle={{ y: -10, opacity: 0 }}
+              exitStyle={{ y: -10, opacity: 0 }}
+            >
+              <Tooltip.Arrow />
+              <Paragraph size="$2">Tooltip 1</Paragraph>
+            </Tooltip.Content>
+          </Tooltip>
+
+          <Tooltip groupId="2" placement="bottom" restMs={0}>
+            <Tooltip.Trigger data-testid="tooltip-trigger-2">
+              <Button>Group 2</Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content
+              data-testid="tooltip-content-2"
+              enterStyle={{ y: -10, opacity: 0 }}
+              exitStyle={{ y: -10, opacity: 0 }}
+            >
+              <Tooltip.Arrow />
+              <Paragraph size="$2">Tooltip 2</Paragraph>
+            </Tooltip.Content>
+          </Tooltip>
+
+          <Tooltip groupId="3" placement="bottom" restMs={0}>
+            <Tooltip.Trigger data-testid="tooltip-trigger-3">
+              <Button>Group 3</Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content
+              data-testid="tooltip-content-3"
+              enterStyle={{ y: -10, opacity: 0 }}
+              exitStyle={{ y: -10, opacity: 0 }}
+            >
+              <Tooltip.Arrow />
+              <Paragraph size="$2">Tooltip 3</Paragraph>
+            </Tooltip.Content>
+          </Tooltip>
+        </XStack>
+      </TooltipGroup>
+
+      <Text fontWeight="bold" mt="$4">
+        Standalone (1s delay each):
+      </Text>
+      <XStack gap="$4" justifyContent="center">
+        <Tooltip placement="bottom" delay={1000} restMs={0}>
+          <Tooltip.Trigger data-testid="tooltip-trigger-standalone-a">
+            <Button>Standalone A</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content
+            data-testid="tooltip-content-standalone-a"
+            enterStyle={{ y: -10, opacity: 0 }}
+            exitStyle={{ y: -10, opacity: 0 }}
+          >
+            <Tooltip.Arrow />
+            <Paragraph size="$2">Standalone A</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+
+        <Tooltip placement="bottom" delay={1000} restMs={0}>
+          <Tooltip.Trigger data-testid="tooltip-trigger-standalone-b">
+            <Button>Standalone B</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content
+            data-testid="tooltip-content-standalone-b"
+            enterStyle={{ y: -10, opacity: 0 }}
+            exitStyle={{ y: -10, opacity: 0 }}
+          >
+            <Tooltip.Arrow />
+            <Paragraph size="$2">Standalone B</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/TooltipMultiTriggerCase.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback, useRef } from 'react'
+import { Tooltip, TooltipGroup, YStack, SizableText, XStack } from '@hanzo/gui'
+
+// test case: matches production PromoLinksRow on gui.hanzo.ai
+// single scoped tooltip with multiple triggers, animatePosition, TooltipGroup
+// rapidly hovering between them should:
+// 1. keep the arrow centered on the tooltip content (no displacement)
+// 2. close properly when cursor leaves all triggers
+
+type NavId = 'a' | 'b' | 'c'
+const NAV_IDS: NavId[] = ['a', 'b', 'c']
+const LABELS: Record<NavId, string> = {
+  a: 'Takeout — universal RN starter kit',
+  b: 'Bento — Free + paid pre-made UI',
+  c: 'Add Even — Expert React Native developers',
+}
+const SHORT: Record<NavId, string> = { a: 'First', b: 'Second', c: 'Third' }
+
+const tooltipDelay = { open: 0, close: 150 }
+
+export function TooltipMultiTriggerCase() {
+  const [activeId, setActiveId] = useState<NavId | null>(null)
+  const prevIdRef = useRef<NavId | null>(null)
+  const displayId = activeId || prevIdRef.current
+
+  const handleEnter = useCallback(
+    (id: NavId) => {
+      if (id !== activeId) {
+        prevIdRef.current = activeId
+        setActiveId(id)
+      }
+    },
+    [activeId]
+  )
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Tooltip multi-trigger rapid hover test
+      </SizableText>
+
+      <YStack height={80} />
+
+      <TooltipGroup delay={tooltipDelay}>
+        <Tooltip scope="multi-tip" offset={20} placement="bottom">
+          <XStack gap="$6" id="tip-triggers">
+            {NAV_IDS.map((id) => (
+              <Tooltip.Trigger
+                key={id}
+                scope="multi-tip"
+                asChild="except-style"
+                onMouseEnter={() => handleEnter(id)}
+              >
+                <XStack
+                  id={`tip-trigger-${id}`}
+                  px="$6"
+                  py="$3"
+                  bg="$color3"
+                  rounded="$4"
+                  cursor="pointer"
+                  hoverStyle={{ bg: '$color4' }}
+                >
+                  <SizableText>{SHORT[id]}</SizableText>
+                </XStack>
+              </Tooltip.Trigger>
+            ))}
+          </XStack>
+
+          <Tooltip.Content
+            id="tip-content"
+            scope="multi-tip"
+            animatePosition
+            transition="medium"
+            enterStyle={{ y: -4, opacity: 0 }}
+            exitStyle={{ y: -4, opacity: 0 }}
+          >
+            <Tooltip.Arrow scope="multi-tip" id="tip-arrow" />
+            {displayId && (
+              <SizableText id="tip-label" size="$3">
+                {LABELS[displayId || 'a']}
+              </SizableText>
+            )}
+          </Tooltip.Content>
+        </Tooltip>
+      </TooltipGroup>
+    </YStack>
+  )
+}

package/src/usecases/TooltipPositionJumpCase.tsx

@@ -0,0 +1,91 @@
+import {
+  Button,
+  Paragraph,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack,
+  SizableText,
+} from '@hanzo/gui'
+import { useState } from 'react'
+
+/**
+ * Test case for tooltip position jump bug
+ *
+ * CRITICAL: This must match the PromoLinksRow pattern from gui.hanzo.ai:
+ * - Single Tooltip with scope
+ * - Multiple Tooltip.Triggers with same scope
+ * - animatePosition on Tooltip.Content
+ *
+ * The bug: When rapidly moving between triggers, the tooltip JUMPS
+ * to wrong position (often near origin/top-left) before animating back.
+ */
+
+const buttons = [
+  { id: 'takeout', label: 'Takeout — universal RN starter kit' },
+  { id: 'bento', label: 'Bento — Free + paid pre-made UI' },
+  { id: 'hire', label: 'Add Even — Expert React Native developers' },
+]
+
+export function TooltipPositionJumpCase() {
+  const [label, setLabel] = useState('')
+
+  return (
+    <YStack
+      flex={1}
+      gap="$4"
+      p="$4"
+      bg="$background"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <SizableText fontWeight="bold">Tooltip Position Jump Test</SizableText>
+      <SizableText size="$2" color="$gray11" textAlign="center">
+        1. Hover rightmost button, wait for tooltip{'\n'}
+        2. Move mouse QUICKLY left across all buttons{'\n'}
+        3. Watch for tooltip jumping to wrong position
+      </SizableText>
+
+      {/* EXACT pattern from PromoLinksRow - scoped tooltip with animatePosition */}
+      <TooltipGroup delay={{ open: 0, close: 150 }}>
+        <Tooltip scope="promo-tooltip" offset={12} placement="bottom">
+          <XStack gap="$3" mt="$4">
+            {buttons.map((btn) => (
+              <Tooltip.Trigger
+                key={btn.id}
+                scope="promo-tooltip"
+                asChild
+                onMouseEnter={() => setLabel(btn.label)}
+              >
+                <Button data-testid={`tooltip-trigger-${btn.id}`} size="$4">
+                  {btn.id.toUpperCase()}
+                </Button>
+              </Tooltip.Trigger>
+            ))}
+          </XStack>
+
+          <Tooltip.Content
+            data-testid="tooltip-jump-content"
+            animatePosition
+            transition="quick"
+            bg="$background"
+            elevation="$2"
+            rounded="$4"
+            px="$2.5"
+            py="$1"
+            enterStyle={{ y: -4, opacity: 0 }}
+            exitStyle={{ y: -4, opacity: 0 }}
+          >
+            <Tooltip.Arrow />
+            <Paragraph size="$3">{label}</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+      </TooltipGroup>
+
+      <SizableText size="$1" color="$gray9" mt="$8">
+        Tooltip content should animate smoothly between buttons.
+        {'\n'}If it JUMPS to a wrong position first, the bug is present.
+      </SizableText>
+    </YStack>
+  )
+}