paris 0.23.0 → 0.24.0

package/src/stories/field/Field.tsx

@@ -1,145 +0,0 @@
-import { clsx } from 'clsx';
-import type React from 'react';
-import type { ComponentPropsWithoutRef, FC, PropsWithChildren } from 'react';
-import styles from '../input/Input.module.scss';
-import type { TextProps } from '../text';
-import { Text } from '../text';
-
-export type FieldProps = {
-    /**
-     * The ID of the child input.
-     */
-    htmlFor?: string;
-    /**
-     * A label for the field. Can be visually hidden using the `hideLabel` prop.
-     */
-    label?: React.ReactNode;
-    /**
-     * Visually hide the label (while keeping it accessible to screen readers).
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * A description of the field. Can be visually hidden using the `hideDescription` prop.
-     */
-    description?: React.ReactNode;
-    /**
-     * Visually hide the description while keeping it accessible to screen readers.
-     * @default false
-     */
-    hideDescription?: boolean;
-    /**
-     * Disables the field, disallowing user interaction.
-     */
-    disabled?: boolean;
-    /**
-     * Position of the description relative to the children/input.
-     * @default 'bottom'
-     */
-    descriptionPosition?: 'top' | 'bottom';
-    overrides?: {
-        container?: ComponentPropsWithoutRef<'div'>;
-        label?: TextProps<'label'>;
-        description?: TextProps<'p'>;
-        labelContainer?: ComponentPropsWithoutRef<'div'>;
-    };
-};
-
-/**
- * A Field component wraps a form input component with an accessible label and description.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Field } from 'paris/field';
- * ```
- * @constructor
- */
-export const Field: FC<PropsWithChildren<FieldProps>> = ({
-    htmlFor,
-    disabled,
-    descriptionPosition = 'bottom',
-    children,
-    // className,
-    ...props
-}) => {
-    const label =
-        typeof props.label === 'string' ? (
-            <Text
-                {...props.overrides?.label}
-                as="label"
-                kind="paragraphSmall"
-                htmlFor={htmlFor}
-                className={clsx(styles.label, { [styles.hidden]: props.hideLabel })}
-            >
-                {props.label}
-            </Text>
-        ) : (
-            <label htmlFor={htmlFor} className={clsx(styles.label, { [styles.hidden]: props.hideLabel })}>
-                {props.label}
-            </label>
-        );
-
-    const description =
-        typeof props.description === 'string' ? (
-            <Text
-                id={`${htmlFor}-description`}
-                {...props.overrides?.description}
-                as="p"
-                kind="paragraphXSmall"
-                className={clsx(
-                    styles.description,
-                    { [styles.hidden]: !props.description || props.hideDescription },
-                    props.overrides?.description?.className,
-                )}
-            >
-                {props.description}
-            </Text>
-        ) : (
-            <div
-                id={`${htmlFor}-description`}
-                className={clsx({ [styles.hidden]: !props.description || props.hideDescription })}
-            >
-                {props.description}
-            </div>
-        );
-
-    return (
-        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
-        // The container is only made clickable for usability purposes.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        <div
-            {...props.overrides?.container}
-            className={clsx(
-                props.overrides?.container?.className,
-                styles.container,
-                // className,
-            )}
-            onClick={(e) => {
-                if (typeof window !== 'undefined' && htmlFor) {
-                    const input = document.getElementById(htmlFor);
-                    if (input && !disabled && !input.contains(e.target as Node)) {
-                        if (input.tagName === 'BUTTON') input.click();
-                        else input.focus();
-                    }
-                }
-            }}
-        >
-            {descriptionPosition === 'top' ? (
-                <div
-                    {...props.overrides?.labelContainer}
-                    className={clsx(styles.labelContainer, props.overrides?.labelContainer?.className)}
-                >
-                    {label}
-                    {description}
-                </div>
-            ) : (
-                label
-            )}
-            {children}
-            {descriptionPosition === 'bottom' ? description : <></>}
-        </div>
-    );
-};

package/src/stories/icon/ArrowRight.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const ArrowRight: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/Check.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const Check: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/ChevronLeft.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const ChevronLeft: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M5.46875 9.46875L11.4688 3.5C11.75 3.1875 12.2188 3.1875 12.5312 3.5C12.8125 3.78125 12.8125 4.25 12.5312 4.53125L7.03125 10L12.5 15.5C12.8125 15.7812 12.8125 16.25 12.5 16.5312C12.2188 16.8438 11.75 16.8438 11.4688 16.5312L5.46875 10.5312C5.15625 10.25 5.15625 9.78125 5.46875 9.46875Z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/ChevronRight.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const ChevronRight: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M14.5312 9.46875C14.8125 9.78125 14.8125 10.25 14.5312 10.5312L8.53125 16.5312C8.21875 16.8438 7.75 16.8438 7.46875 16.5312C7.15625 16.25 7.15625 15.7812 7.46875 15.5L12.9375 10.0312L7.46875 4.53125C7.15625 4.25 7.15625 3.78125 7.46875 3.5C7.75 3.1875 8.21875 3.1875 8.5 3.5L14.5312 9.46875Z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/Close.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const Close: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M14.7812 6.28125L11.0312 10.0312L14.75 13.75C15.0625 14.0312 15.0625 14.5 14.75 14.7812C14.4688 15.0938 14 15.0938 13.7188 14.7812L9.96875 11.0625L6.25 14.7812C5.96875 15.0938 5.5 15.0938 5.21875 14.7812C4.90625 14.5 4.90625 14.0312 5.21875 13.7188L8.9375 10L5.21875 6.28125C4.90625 6 4.90625 5.53125 5.21875 5.21875C5.5 4.9375 5.96875 4.9375 6.28125 5.21875L10 8.96875L13.7188 5.25C14 4.9375 14.4688 4.9375 14.7812 5.25C15.0625 5.53125 15.0625 6 14.7812 6.28125Z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/Ellipsis.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const Ellipsis: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M13.5 10C13.5 9.1875 14.1562 8.5 15 8.5C15.8125 8.5 16.5 9.1875 16.5 10C16.5 10.8438 15.8125 11.5 15 11.5C14.1562 11.5 13.5 10.8438 13.5 10ZM8.5 10C8.5 9.1875 9.15625 8.5 10 8.5C10.8125 8.5 11.5 9.1875 11.5 10C11.5 10.8438 10.8125 11.5 10 11.5C9.15625 11.5 8.5 10.8438 8.5 10ZM6.5 10C6.5 10.8438 5.8125 11.5 5 11.5C4.15625 11.5 3.5 10.8438 3.5 10C3.5 9.1875 4.15625 8.5 5 8.5C5.8125 8.5 6.5 9.1875 6.5 10Z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/Icon.module.scss

@@ -1,5 +0,0 @@
-.content {
-    background-color: pink;
-    color: white;
-    height: 2rem;
-}

package/src/stories/icon/Icon.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { pvar } from '../theme';
-import type { IconDefinition } from './Icon';
-import { Icon } from './Icon';
-import * as Icons from './index';
-
-const meta: Meta<typeof Icon> = {
-    title: 'Content/Icon',
-    component: Icon,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-const getArgs = (icon: IconDefinition): Story => ({
-    args: {
-        icon,
-        size: 20,
-        style: {
-            color: pvar('new.colors.contentPrimary'),
-        },
-    },
-});
-
-export const Close: Story = getArgs(Icons.Close);
-export const ChevronLeft: Story = getArgs(Icons.ChevronLeft);
-export const ChevronRight: Story = getArgs(Icons.ChevronRight);
-export const Ellipsis: Story = getArgs(Icons.Ellipsis);
-export const NotificationDot: Story = getArgs(Icons.NotificationDot);
-export const Spinner: Story = getArgs(Icons.Spinner);
-export const Check: Story = getArgs(Icons.Check);
-export const ArrowRight: Story = getArgs(Icons.ArrowRight);

package/src/stories/icon/Icon.test.tsx

@@ -1,59 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '../../test/render';
-import { Close } from './Close';
-import { Icon } from './Icon';
-
-describe('Icon', () => {
-    it('renders with the icon prop', () => {
-        render(<Icon icon={Close} size={20} data-testid="icon" />);
-        const el = screen.getByTestId('icon');
-        expect(el).toBeInTheDocument();
-    });
-
-    it('renders as a span by default', () => {
-        render(<Icon icon={Close} size={20} data-testid="icon-span" />);
-        const el = screen.getByTestId('icon-span');
-        expect(el.tagName).toBe('SPAN');
-    });
-
-    it('renders as a different element via the as prop', () => {
-        render(<Icon icon={Close} size={20} as="div" data-testid="icon-div" />);
-        const el = screen.getByTestId('icon-div');
-        expect(el.tagName).toBe('DIV');
-    });
-
-    it('renders the SVG icon inside', () => {
-        render(<Icon icon={Close} size={20} data-testid="icon-svg" />);
-        const el = screen.getByTestId('icon-svg');
-        const svg = el.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-    });
-
-    it('passes size to the icon definition', () => {
-        render(<Icon icon={Close} size={24} data-testid="icon-sized" />);
-        const el = screen.getByTestId('icon-sized');
-        const svg = el.querySelector('svg');
-        expect(svg?.getAttribute('width')).toBe('24');
-        expect(svg?.getAttribute('height')).toBe('24');
-    });
-
-    it('forwards className prop', () => {
-        render(<Icon icon={Close} size={20} className="custom-icon" data-testid="icon-class" />);
-        const el = screen.getByTestId('icon-class');
-        expect(el.className).toContain('custom-icon');
-    });
-
-    it('forwards additional HTML props', () => {
-        render(<Icon icon={Close} size={20} id="my-icon" data-testid="icon-props" />);
-        const el = screen.getByTestId('icon-props');
-        expect(el.id).toBe('my-icon');
-    });
-
-    it('renders correctly with overrides prop', () => {
-        render(<Icon icon={Close} size={16} overrides={{ icon: {} }} data-testid="icon-overrides" />);
-        const el = screen.getByTestId('icon-overrides');
-        const svg = el.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg?.getAttribute('width')).toBe('16');
-    });
-});

package/src/stories/icon/Info.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const Info: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
-            fill="currentColor"
-        />
-    </svg>
-));

package/src/stories/icon/NotificationDot.tsx

@@ -1,8 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const NotificationDot: IconDefinition = memo(({ size }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 8 8" fill="none">
-        <circle cx="4" cy="4" r="3.5" fill="#1DEECD" stroke="#8EF7E6" />
-    </svg>
-));

package/src/stories/icon/Spinner.tsx

@@ -1,17 +0,0 @@
-import { memo } from 'react';
-import type { IconDefinition } from './Icon';
-
-export const Spinner: IconDefinition = memo(({ size }) => (
-    <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <style
-            dangerouslySetInnerHTML={{
-                __html: '.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}',
-            }}
-        />
-        <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
-        <path
-            d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-            className="spinner_ajPY"
-        />
-    </svg>
-));

package/src/stories/informationaltooltip/InformationalTooltip.module.scss

@@ -1,23 +0,0 @@
-.tooltip {
-    background-color: var(--pte-new-colors-surfacePrimary);
-    border-radius: var(--pte-new-borders-radius-rounded);
-    box-shadow: var(--pte-new-lighting-deepBelow);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 6px;
-    width: 280px;
-    padding: 12px 14px;
-    color: var(--pte-new-colors-contentTertiary);
-
-    &.medium {
-        width: 240px;
-    }
-}
-
-.heading {
-    color: var(--pte-new-colors-contentSecondary);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { InformationalTooltip } from './InformationalTooltip';
-
-const meta: Meta<typeof InformationalTooltip> = {
-    title: 'Surfaces/InformationalTooltip',
-    component: InformationalTooltip,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof InformationalTooltip>;
-
-const render: Story['render'] = (args) =>
-    createElement(
-        'div',
-        {
-            style: { minHeight: '200px' },
-        },
-        createElement(InformationalTooltip, {
-            ...args,
-        }),
-    );
-
-export const Default: Story = {
-    args: {
-        children:
-            'If you are being paid on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
-        heading: 'Quarterly taxes',
-    },
-    render,
-};
-
-export const Medium: Story = {
-    args: {
-        children: 'This is a medium tooltip with no heading',
-        size: 'medium',
-    },
-    render,
-};
-
-export const CustomTrigger: Story = {
-    args: {
-        children: 'With some text below',
-        heading: 'Another info tooltip',
-        size: 'medium',
-        trigger: <div>This is a custom trigger</div>,
-    },
-    render,
-};
-
-export const CustomAlign: Story = {
-    args: {
-        children: 'With some text below',
-        heading: 'Another info tooltip',
-        size: 'medium',
-        align: 'end',
-        trigger: <div>This tooltip below is set to align = `end`</div>,
-    },
-    render,
-};

package/src/stories/informationaltooltip/InformationalTooltip.test.tsx

@@ -1,178 +0,0 @@
-import { render, screen, waitFor } from '../../test/render';
-import { InformationalTooltip } from './InformationalTooltip';
-
-// Mock pget to return a valid CSS time value for animation duration
-vi.mock('../theme', () => ({
-    pvar: (path: string) => `var(--pte-${path.replace(/\./g, '-')})`,
-    pget: () => '100ms',
-}));
-
-/**
- * Radix Tooltip duplicates content inside a visually-hidden `role="tooltip"` span
- * for screen readers. This helper queries the *visible* tooltip content element,
- * excluding the hidden aria-describedby clone.
- */
-function getVisibleTooltipContent(): HTMLElement | null {
-    const wrapper = document.querySelector('[data-radix-popper-content-wrapper]');
-    if (!wrapper) return null;
-    // The direct child with data-side is the visible tooltip content
-    return wrapper.querySelector(':scope > [data-side]');
-}
-
-describe('InformationalTooltip', () => {
-    it('renders the default trigger icon', () => {
-        render(<InformationalTooltip>Tooltip content</InformationalTooltip>);
-        const trigger = screen.getByRole('button');
-        expect(trigger).toBeInTheDocument();
-    });
-
-    it('renders a custom trigger', () => {
-        render(
-            <InformationalTooltip trigger={<span data-testid="custom-trigger">?</span>}>
-                Tooltip body
-            </InformationalTooltip>,
-        );
-        expect(screen.getByTestId('custom-trigger')).toBeInTheDocument();
-    });
-
-    it('shows tooltip content on hover', async () => {
-        const { user } = render(<InformationalTooltip>Hover content</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.hover(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toBeInTheDocument();
-            expect(tooltip).toHaveTextContent('Hover content');
-        });
-    });
-
-    it('does not show tooltip when closed', () => {
-        render(<InformationalTooltip>Hidden content</InformationalTooltip>);
-        expect(getVisibleTooltipContent()).not.toBeInTheDocument();
-    });
-
-    it('renders with a heading when provided', async () => {
-        const { user } = render(<InformationalTooltip heading="Info Title">Body text</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.hover(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toHaveTextContent('Info Title');
-            expect(tooltip).toHaveTextContent('Body text');
-        });
-    });
-
-    it('does not render heading when heading is null', async () => {
-        const { user } = render(<InformationalTooltip heading={null}>Only body</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.hover(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toHaveTextContent('Only body');
-        });
-
-        const headingEl = getVisibleTooltipContent()?.querySelector('[class*="heading"]');
-        expect(headingEl).toBeNull();
-    });
-
-    it('opens on click by default', async () => {
-        const { user } = render(<InformationalTooltip>Click content</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.click(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toBeInTheDocument();
-            expect(tooltip).toHaveTextContent('Click content');
-        });
-    });
-
-    it('does not open on click when disableClick is true', async () => {
-        const { user } = render(<InformationalTooltip disableClick>No click</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.click(trigger);
-
-        expect(getVisibleTooltipContent()).not.toBeInTheDocument();
-    });
-
-    it('renders open by default when defaultOpen is true', async () => {
-        render(<InformationalTooltip defaultOpen>Default open content</InformationalTooltip>);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toBeInTheDocument();
-            expect(tooltip).toHaveTextContent('Default open content');
-        });
-    });
-
-    it('applies the medium size class', async () => {
-        const { user } = render(<InformationalTooltip size="medium">Medium tip</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.hover(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toHaveClass('medium');
-        });
-    });
-
-    it('applies the large size class by default', async () => {
-        const { user } = render(<InformationalTooltip>Large tip</InformationalTooltip>);
-
-        const trigger = screen.getByRole('button');
-        await user.hover(trigger);
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toHaveClass('large');
-        });
-    });
-
-    it('accepts override props for the tooltip element', async () => {
-        render(
-            <InformationalTooltip
-                defaultOpen
-                overrides={{
-                    tooltip: { 'data-testid': 'overridden-tooltip' } as any,
-                }}
-            >
-                Overridden
-            </InformationalTooltip>,
-        );
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            expect(tooltip).toHaveAttribute('data-testid', 'overridden-tooltip');
-        });
-    });
-
-    it('accepts override props for the heading element', async () => {
-        render(
-            <InformationalTooltip
-                defaultOpen
-                heading="Title"
-                overrides={{
-                    heading: { 'data-testid': 'overridden-heading' },
-                }}
-            >
-                Body
-            </InformationalTooltip>,
-        );
-
-        await waitFor(() => {
-            const tooltip = getVisibleTooltipContent();
-            // Query only direct children to avoid the duplicated aria-describedby copy
-            const heading = tooltip?.querySelector(':scope > [data-testid="overridden-heading"]');
-            expect(heading).toBeInTheDocument();
-        });
-    });
-});