'use no memo'; // composition props usually invalidate the generated wrapper caches
import type { ReactNode } from 'react';
import { Dialog as BaseDialog } from '@base-ui/react/dialog';
import { clsx } from 'clsx';
import * as styles from '#/components/Dialog/Header.css';
import { Text } from '#/components/Text';
export function Outer({
border = true,
className,
children,
}: {
border?: boolean;
className?: string;
children: ReactNode;
}) {
return <div className={clsx(styles.outer, !border && styles.borderless, className)}>{children}</div>;
}
export function Content({ children }: { children?: ReactNode }) {
return <div className={styles.content}>{children}</div>;
}
export function Slot({ children }: { children?: ReactNode }) {
return <div className={styles.slot}>{children}</div>;
}
/** Dialog heading for the sticky header slot. */
export function TitleText({ children }: { children: ReactNode }) {
return (
<BaseDialog.Title render={<Text size="lg" weight="semiBold" align="center" numberOfLines={1} />}>
{children}
</BaseDialog.Title>
);
}