@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/dialog/ConfirmDialog.svelte

@@ -0,0 +1,157 @@
+<!--
+	Asks before an action that matters, and sees it through.
+
+	From Eregion: the confirm button names the action ("Delete thread", never
+	"OK"), and the cancel button can name the way out ("Keep resolving"). While
+	the action runs, the dialog stays open with the button busy; if it fails, the
+	reason is shown here, not lost. A `blocked` reason keeps the action from
+	being taken and says why.
+-->
+<script lang="ts" module>
+	import { AlertDialog } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { colors, font } from '../../tokens.stylex.js';
+	import Button from '../button/Button.svelte';
+	import { dialog } from './styles.js';
+
+	export type ConfirmDialogProps = {
+		/** Whether it is open. Bindable. */
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Names the action: "Delete thread", "Discard changes". */
+		confirmLabel: string;
+		/** Names the way out. "Cancel" by default. */
+		cancelLabel?: string;
+		/** Shown on the confirm button while the action runs: "Deleting…". */
+		busyLabel?: string;
+		/** `danger` for what destroys or cannot be undone. */
+		tone?: 'default' | 'danger';
+		/** Why the action cannot be taken now. Disables the confirm button. */
+		blocked?: string;
+		/**
+		 * The action. If it returns a promise, the dialog stays open until it
+		 * settles; if it rejects, the error is shown and the dialog stays.
+		 */
+		onconfirm: () => unknown;
+		/** A button that opens the dialog. It receives the props to spread on it. */
+		trigger?: Snippet<[{ props: Record<string, unknown> }]>;
+		/** More content between the description and the buttons. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		content: { maxWidth: '26rem' },
+		note: {
+			margin: 0,
+			marginTop: '0.25rem',
+			fontSize: font.sizeSm,
+			lineHeight: font.leadingSnug
+		},
+		error: { color: colors.danger, userSelect: 'text' },
+		blocked: { color: colors.textMuted }
+	});
+
+	function describe(problem: unknown): string {
+		if (problem instanceof Error) return problem.message;
+		return typeof problem === 'string' ? problem : 'Something went wrong.';
+	}
+</script>
+
+<script lang="ts">
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel,
+		cancelLabel = 'Cancel',
+		busyLabel,
+		tone = 'default',
+		blocked,
+		onconfirm,
+		trigger,
+		children
+	}: ConfirmDialogProps = $props();
+
+	let busy = $state(false);
+	let error = $state<string>();
+
+	async function confirm() {
+		if (busy || blocked) return;
+		error = undefined;
+		const result = onconfirm();
+		if (!(result instanceof Promise)) {
+			open = false;
+			return;
+		}
+		busy = true;
+		try {
+			await result;
+			open = false;
+		} catch (problem) {
+			error = describe(problem);
+		} finally {
+			busy = false;
+		}
+	}
+
+	// A fresh start each time it opens
+	$effect(() => {
+		if (open) error = undefined;
+	});
+</script>
+
+<AlertDialog.Root
+	bind:open={
+		() => open,
+		(next) => {
+			if (!busy) open = next;
+		}
+	}
+>
+	{#if trigger}
+		<AlertDialog.Trigger>
+			{#snippet child({ props })}{@render trigger({ props })}{/snippet}
+		</AlertDialog.Trigger>
+	{/if}
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay {...stylex.attrs(dialog.overlay)} />
+		<AlertDialog.Content
+			data-slot="confirm-dialog"
+			{...stylex.attrs(dialog.content, styles.content)}
+		>
+			<div {...stylex.attrs(dialog.header)}>
+				<AlertDialog.Title level={2} {...stylex.attrs(dialog.title)}>{title}</AlertDialog.Title>
+				{#if description}
+					<AlertDialog.Description {...stylex.attrs(dialog.description)}>
+						{description}
+					</AlertDialog.Description>
+				{/if}
+				{#if error}
+					<p role="alert" {...stylex.attrs(styles.note, styles.error)}>{error}</p>
+				{:else if blocked}
+					<p {...stylex.attrs(styles.note, styles.blocked)}>{blocked}</p>
+				{/if}
+			</div>
+			{#if children}
+				<div {...stylex.attrs(dialog.body)}>{@render children()}</div>
+			{/if}
+			<div {...stylex.attrs(dialog.footer)}>
+				<AlertDialog.Cancel disabled={busy}>
+					{#snippet child({ props })}
+						<Button {...props} variant="ghost">{cancelLabel}</Button>
+					{/snippet}
+				</AlertDialog.Cancel>
+				<Button
+					variant={tone === 'danger' ? 'danger' : 'primary'}
+					loading={busy}
+					disabled={!!blocked}
+					onclick={confirm}
+				>
+					{busy && busyLabel ? busyLabel : confirmLabel}
+				</Button>
+			</div>
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>

package/dist/components/dialog/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+export type ConfirmDialogProps = {
+    /** Whether it is open. Bindable. */
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Names the action: "Delete thread", "Discard changes". */
+    confirmLabel: string;
+    /** Names the way out. "Cancel" by default. */
+    cancelLabel?: string;
+    /** Shown on the confirm button while the action runs: "Deleting…". */
+    busyLabel?: string;
+    /** `danger` for what destroys or cannot be undone. */
+    tone?: 'default' | 'danger';
+    /** Why the action cannot be taken now. Disables the confirm button. */
+    blocked?: string;
+    /**
+     * The action. If it returns a promise, the dialog stays open until it
+     * settles; if it rejects, the error is shown and the dialog stays.
+     */
+    onconfirm: () => unknown;
+    /** A button that opens the dialog. It receives the props to spread on it. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** More content between the description and the buttons. */
+    children?: Snippet;
+};
+declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/dialog/DialogBody.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { dialog } from './styles.js';
+
+	export type DialogBodyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: DialogBodyProps = $props();
+</script>
+
+<div data-slot="dialog-body" {...rest} {...attrs([dialog.body, sx], className)}>
+	{@render children?.()}
+</div>

package/dist/components/dialog/DialogBody.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type DialogBodyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const DialogBody: import("svelte").Component<DialogBodyProps, {}, "">;
+type DialogBody = ReturnType<typeof DialogBody>;
+export default DialogBody;

package/dist/components/dialog/DialogContent.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import { Dialog } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Button from '../button/Button.svelte';
+	import { dialog } from './styles.js';
+
+	export type DialogContentProps = Omit<Dialog.ContentProps, 'children' | 'child'> & {
+		/** How wide it may grow: 24, 32 or 44rem. */
+		size?: 'sm' | 'md' | 'lg';
+		/** Opens as a sheet along one edge of the window, the full height of it. */
+		side?: 'start' | 'end';
+		/** Accessible name of the close button in the corner. `null` leaves it out. */
+		closeLabel?: string | null;
+		sx?: Sx;
+		/** A Dialog.Header, a Dialog.Body and a Dialog.Footer. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		size = 'md',
+		side,
+		closeLabel = 'Close',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: DialogContentProps = $props();
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay data-slot="dialog-overlay" {...stylex.attrs(dialog.overlay)} />
+	<Dialog.Content
+		data-slot="dialog-content"
+		{...rest}
+		{...attrs([dialog.content, side ? [dialog.sheet, dialog[side]] : dialog[size], sx], className)}
+	>
+		{@render children?.()}
+		{#if closeLabel}
+			<span {...stylex.attrs(dialog.close)}>
+				<Dialog.Close>
+					{#snippet child({ props })}
+						<Button {...props} variant="ghost" size="sm" iconOnly aria-label={closeLabel}>
+							<Glyph name="close" />
+						</Button>
+					{/snippet}
+				</Dialog.Close>
+			</span>
+		{/if}
+	</Dialog.Content>
+</Dialog.Portal>

package/dist/components/dialog/DialogContent.svelte.d.ts

@@ -0,0 +1,17 @@
+import { Dialog } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type DialogContentProps = Omit<Dialog.ContentProps, 'children' | 'child'> & {
+    /** How wide it may grow: 24, 32 or 44rem. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Opens as a sheet along one edge of the window, the full height of it. */
+    side?: 'start' | 'end';
+    /** Accessible name of the close button in the corner. `null` leaves it out. */
+    closeLabel?: string | null;
+    sx?: Sx;
+    /** A Dialog.Header, a Dialog.Body and a Dialog.Footer. */
+    children?: Snippet;
+};
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/components/dialog/DialogDescription.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import { Dialog } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { dialog } from './styles.js';
+
+	export type DialogDescriptionProps = Omit<Dialog.DescriptionProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: DialogDescriptionProps = $props();
+</script>
+
+<Dialog.Description
+	data-slot="dialog-description"
+	{...rest}
+	{...attrs([dialog.description, sx], className)}
+>
+	{@render children?.()}
+</Dialog.Description>

package/dist/components/dialog/DialogDescription.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Dialog } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type DialogDescriptionProps = Omit<Dialog.DescriptionProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const DialogDescription: import("svelte").Component<DialogDescriptionProps, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/components/dialog/DialogFooter.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { dialog } from './styles.js';
+
+	export type DialogFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: DialogFooterProps = $props();
+</script>
+
+<div data-slot="dialog-footer" {...rest} {...attrs([dialog.footer, sx], className)}>
+	{@render children?.()}
+</div>

package/dist/components/dialog/DialogFooter.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type DialogFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const DialogFooter: import("svelte").Component<DialogFooterProps, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/components/dialog/DialogHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { dialog } from './styles.js';
+
+	export type DialogHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: DialogHeaderProps = $props();
+</script>
+
+<div data-slot="dialog-header" {...rest} {...attrs([dialog.header, sx], className)}>
+	{@render children?.()}
+</div>

package/dist/components/dialog/DialogHeader.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type DialogHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const DialogHeader: import("svelte").Component<DialogHeaderProps, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/components/dialog/DialogTitle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import { Dialog } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { dialog } from './styles.js';
+
+	export type DialogTitleProps = Omit<Dialog.TitleProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { level = 2, sx, class: className, children, ...rest }: DialogTitleProps = $props();
+</script>
+
+<!-- Names the dialog for assistive technology -->
+<Dialog.Title {level} data-slot="dialog-title" {...rest} {...attrs([dialog.title, sx], className)}>
+	{@render children?.()}
+</Dialog.Title>

package/dist/components/dialog/DialogTitle.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Dialog } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type DialogTitleProps = Omit<Dialog.TitleProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,17 @@
+import { Dialog } from 'bits-ui';
+import Body from './DialogBody.svelte';
+import Content from './DialogContent.svelte';
+import Description from './DialogDescription.svelte';
+import Footer from './DialogFooter.svelte';
+import Header from './DialogHeader.svelte';
+import Title from './DialogTitle.svelte';
+declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<Dialog.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<Dialog.TriggerProps, {}, "ref">;
+export { Root, Trigger, Content, Header, Title, Description, Body, Footer, Close };
+export type { DialogBodyProps } from './DialogBody.svelte';
+export type { DialogContentProps } from './DialogContent.svelte';
+export type { DialogDescriptionProps } from './DialogDescription.svelte';
+export type { DialogFooterProps } from './DialogFooter.svelte';
+export type { DialogHeaderProps } from './DialogHeader.svelte';
+export type { DialogTitleProps } from './DialogTitle.svelte';

package/dist/components/dialog/index.js

@@ -0,0 +1,12 @@
+import { Dialog } from 'bits-ui';
+import Body from './DialogBody.svelte';
+import Content from './DialogContent.svelte';
+import Description from './DialogDescription.svelte';
+import Footer from './DialogFooter.svelte';
+import Header from './DialogHeader.svelte';
+import Title from './DialogTitle.svelte';
+// Behaviour only: bits-ui's own parts
+const Root = Dialog.Root;
+const Trigger = Dialog.Trigger;
+const Close = Dialog.Close;
+export { Root, Trigger, Content, Header, Title, Description, Body, Footer, Close };

package/dist/components/dialog/styles.d.ts

@@ -0,0 +1,120 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const dialog: Readonly<{
+    readonly overlay: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly inset: stylex.StyleXClassNameFor<"inset", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(rgb(20 23 28 / 0.32), rgb(0 0 0 / 0.56))">;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(2px)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+    }>;
+    readonly content: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly insetInline: stylex.StyleXClassNameFor<"insetInline", 0>;
+        readonly top: stylex.StyleXClassNameFor<"top", "50%">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 51>;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly width: stylex.StyleXClassNameFor<"width", "calc(100vw - 2rem)">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "calc(100dvh - 4rem)">;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", "auto">;
+        readonly translate: stylex.StyleXClassNameFor<"translate", "0 -50%">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<string>}, inset 0 1px 0 ${stylex.StyleXVar<string>}, 0 24px 64px -16px rgb(0 0 0 / 0.5)`>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | "1px">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "CanvasText">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+        readonly scale: stylex.StyleXClassNameFor<"scale", 1 | 0.96 | 0.98 | null>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity" | "opacity, scale">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "24rem">;
+    }>;
+    readonly md: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "32rem">;
+    }>;
+    readonly lg: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "44rem">;
+    }>;
+    readonly sheet: Readonly<{
+        readonly top: stylex.StyleXClassNameFor<"top", 0>;
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "min(26rem, calc(100vw - 2rem))">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "none">;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", 0>;
+        readonly translate: stylex.StyleXClassNameFor<"translate", "none">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly scale: stylex.StyleXClassNameFor<"scale", null>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity" | "opacity, translate">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.32, 0.72, 0, 1)">;
+    }>;
+    readonly end: Readonly<{
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "auto">;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
+        readonly translate: stylex.StyleXClassNameFor<"translate", "0 0" | "100% 0" | null>;
+    }>;
+    readonly start: Readonly<{
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "auto">;
+        readonly translate: stylex.StyleXClassNameFor<"translate", "0 0" | "-100% 0" | null>;
+    }>;
+    readonly header: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.375rem">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly paddingTop: stylex.StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "3.5rem">;
+    }>;
+    readonly title: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly description: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly body: Readonly<{
+        readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 0>;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: stylex.StyleXClassNameFor<"overscrollBehavior", "contain">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly scrollbarWidth: stylex.StyleXClassNameFor<"scrollbarWidth", "thin">;
+    }>;
+    readonly footer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-end">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly paddingTop: stylex.StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingBottom: stylex.StyleXClassNameFor<"paddingBottom", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly close: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly top: stylex.StyleXClassNameFor<"top", "0.875rem">;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "0.875rem">;
+    }>;
+}>;