@atmo-dev/kit 0.0.0-stage → 0.0.1

package/dist/components/IconRail.svelte

@@ -0,0 +1,186 @@
+<script lang="ts" module>
+	import type { IconNode } from '@sketchyicons/svelte';
+	import type { ButtonProps } from './Button.svelte';
+	export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+		label: string;
+		icon: IconNode;
+		active?: boolean;
+		primary?: boolean;
+		badge?: boolean | number;
+	};
+</script>
+
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Tooltip } from 'bits-ui';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import Modal from './Modal.svelte';
+	import { cn } from '../utils.js';
+	let {
+		label,
+		items,
+		backed = false,
+		mobile = 'bar',
+		open = $bindable(false),
+		footer,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		label: string;
+		items: readonly IconRailItem[];
+		backed?: boolean;
+		mobile?: 'bar' | 'drawer';
+		open?: boolean;
+		footer?: Snippet<[{ expanded: boolean; close: () => void }]>;
+		ref?: HTMLElement | null;
+	} = $props();
+	const small = new MediaQuery('(max-width: 600px)', false);
+	const close = () => (open = false);
+	let drawerWasOpen = false;
+	$effect(() => {
+		if (mobile !== 'drawer') return;
+		const leavingDrawer = !small.current && drawerWasOpen;
+		drawerWasOpen = small.current && open;
+		if (!small.current) open = false;
+		if (leavingDrawer) {
+			void tick().then(() => {
+				if (!small.current)
+					ref?.querySelector<HTMLElement>('a[href], button:not(:disabled)')?.focus();
+			});
+		}
+	});
+</script>
+
+{#if mobile === 'drawer' && small.current}
+	<Modal
+		bind:open
+		title={label}
+		onCloseAutoFocus={(event) => {
+			if (!small.current) event.preventDefault();
+		}}
+		data-slot="icon-rail-drawer"
+		class="top-0 bottom-0 left-0 flex h-dvh max-h-none w-[min(19rem,calc(100%-2rem))] max-w-none translate-x-0 translate-y-0 flex-col rounded-none border-y-0 border-l-0 px-3 pt-[max(1rem,env(safe-area-inset-top))] pb-[max(1rem,env(safe-area-inset-bottom))] [&>header]:mb-3 [&>header]:px-2 [&>header_h2]:sr-only"
+	>
+		<nav
+			{...rest}
+			bind:this={ref}
+			aria-label={label}
+			data-slot="icon-rail"
+			class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain', className)}
+		>
+			<div class="grid gap-1">
+				{#each items as item (item.label)}
+					<Button
+						href={item.href}
+						disabled={item.disabled}
+						variant="ghost"
+						aria-current={item.active ? 'page' : undefined}
+						data-part="item"
+						onclick={(event) => {
+							close();
+							item.onclick?.(event);
+						}}
+						class={cn(
+							'min-h-11 w-full justify-start gap-3 px-3 py-3 text-sm aria-[current=page]:bg-recess aria-[current=page]:text-action',
+							item.primary && 'mt-3 text-action'
+						)}
+					>
+						<Icon img={item.icon} size={22} />
+						<span class="min-w-0 flex-1 text-left">{item.label}</span>
+						{#if item.badge}
+							<span class="text-xs text-action">
+								{#if typeof item.badge === 'number'}{item.badge}<span class="sr-only"> unread</span>
+								{:else}<span class="sr-only">Unread</span><span aria-hidden="true">•</span>{/if}
+							</span>
+						{/if}
+					</Button>
+				{/each}
+			</div>
+			{#if footer}<div class="mt-auto pt-6">{@render footer({ expanded: true, close })}</div>{/if}
+		</nav>
+	</Modal>
+{:else}
+	<Tooltip.Provider delayDuration={350} ignoreNonKeyboardFocus>
+		<nav
+			{...rest}
+			bind:this={ref}
+			aria-label={label}
+			data-slot="icon-rail"
+			data-backed={backed}
+			class={cn(
+				'fixed top-[var(--atmo-nav-top,0px)] bottom-0 left-0 z-40 flex w-18 flex-col items-center bg-transparent pt-6 pb-5 [@media(max-width:600px)]:top-auto [@media(max-width:600px)]:right-0 [@media(max-width:600px)]:h-[calc(62px+env(safe-area-inset-bottom))] [@media(max-width:600px)]:w-full [@media(max-width:600px)]:flex-row [@media(max-width:600px)]:justify-around [@media(max-width:600px)]:bg-page [@media(max-width:600px)]:px-2 [@media(max-width:600px)]:pt-1.5 [@media(max-width:600px)]:pb-[calc(6px+env(safe-area-inset-bottom))]',
+				mobile === 'drawer' && '[@media(max-width:600px)]:hidden',
+				className
+			)}
+		>
+			<div
+				class="flex flex-col items-center gap-3 [@media(max-width:600px)]:min-w-0 [@media(max-width:600px)]:flex-1 [@media(max-width:600px)]:flex-row [@media(max-width:600px)]:justify-around [@media(max-width:600px)]:gap-0"
+			>
+				{#each items as item (item.label)}
+					<Tooltip.Root disabled={item.disabled ?? false}
+						><Tooltip.Trigger onclick={item.onclick}
+							>{#snippet child({ props })}
+								<Button
+									{...props}
+									href={item.href}
+									disabled={item.disabled}
+									variant="ghost"
+									size="icon"
+									aria-label={`${item.label}${item.badge ? (typeof item.badge === 'number' ? `, ${item.badge} unread` : ', unread') : ''}`}
+									aria-current={item.active ? 'page' : undefined}
+									data-part="item"
+									class={cn(
+										'relative size-11 rounded-(--atmo-radius-button) text-muted hover:bg-recess/55 aria-[current=page]:text-action [@media(max-width:600px)]:size-10',
+										item.primary &&
+											'mt-2 text-action hover:text-action [@media(max-width:600px)]:mt-0',
+										backed && 'bg-recess/45 hover:bg-recess/75'
+									)}
+								>
+									<Icon img={item.icon} size={22} />{#if item.badge}<span
+											class="absolute top-2 right-1.5 size-1.5 rounded-full bg-action"
+											aria-hidden="true"
+										></span>{/if}
+								</Button>
+							{/snippet}</Tooltip.Trigger
+						><Tooltip.Content
+							role="tooltip"
+							side="right"
+							sideOffset={10}
+							collisionPadding={12}
+							class="z-60 max-w-[calc(100vw-2rem)] rounded-lg border border-line bg-field px-2.5 py-1.5 font-sans text-xs text-ink"
+							>{item.label}</Tooltip.Content
+						></Tooltip.Root
+					>
+				{/each}
+			</div>
+			{#if footer}<div
+					class="mt-auto [@media(max-width:600px)]:mt-0 [@media(max-width:600px)]:ml-1"
+				>
+					{@render footer({ expanded: false, close })}
+				</div>{/if}
+		</nav>
+	</Tooltip.Provider>
+{/if}
+
+<style>
+	@keyframes drawer-enter {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	:global([data-slot='icon-rail-drawer'][data-state='open']) {
+		animation: drawer-enter 130ms cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-slot='icon-rail-drawer']) {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/IconRail.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { IconNode } from '@sketchyicons/svelte';
+import type { ButtonProps } from './Button.svelte';
+export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+    label: string;
+    icon: IconNode;
+    active?: boolean;
+    primary?: boolean;
+    badge?: boolean | number;
+};
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    label: string;
+    items: readonly IconRailItem[];
+    backed?: boolean;
+    mobile?: 'bar' | 'drawer';
+    open?: boolean;
+    footer?: Snippet<[{
+        expanded: boolean;
+        close: () => void;
+    }]>;
+    ref?: HTMLElement | null;
+};
+declare const IconRail: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
+type IconRail = ReturnType<typeof IconRail>;
+export default IconRail;

package/dist/components/InlineEditor.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import { Editor, type JSONContent } from '@tiptap/core';
+	import Document from '@tiptap/extension-document';
+	import Paragraph from '@tiptap/extension-paragraph';
+	import Text from '@tiptap/extension-text';
+	import HardBreak from '@tiptap/extension-hard-break';
+	import History from '@tiptap/extension-history';
+	import Placeholder from '@tiptap/extension-placeholder';
+	import Mention from '@tiptap/extension-mention';
+	import type { ActorSearch } from './login/types.js';
+	import { mentionSuggestions } from '../social/mention-suggestions.js';
+	import { editorJsonToBlueskyPost, textToDoc } from '../social/richtext.js';
+	import { cn } from '../utils.js';
+	let {
+		value = $bindable(''),
+		editor = $bindable<Editor | null>(null),
+		label,
+		placeholder = '',
+		singleLine = false,
+		disabled = false,
+		searchActors,
+		onupdate,
+		class: className
+	}: {
+		value?: string;
+		editor?: Editor | null;
+		label: string;
+		placeholder?: string;
+		singleLine?: boolean;
+		disabled?: boolean;
+		searchActors?: ActorSearch;
+		onupdate?: (content: { text: string; json: JSONContent }) => void;
+		class?: string;
+	} = $props();
+	const id = $props.id();
+	let host: HTMLDivElement;
+	let element: HTMLDivElement;
+	onMount(() => {
+		const instance = new Editor({
+			element,
+			extensions: [
+				Document,
+				Paragraph,
+				Text,
+				HardBreak,
+				History,
+				Placeholder.configure({ placeholder }),
+				...(searchActors
+					? [
+							Mention.configure({
+								HTMLAttributes: { class: 'text-action' },
+								suggestion: mentionSuggestions(searchActors, () => host)
+							})
+						]
+					: [])
+			],
+			content: textToDoc(untrack(() => value)),
+			editable: !disabled,
+			editorProps: {
+				attributes: {
+					id,
+					role: searchActors ? 'combobox' : 'textbox',
+					'aria-label': label,
+					...(searchActors
+						? { 'aria-autocomplete': 'list', 'aria-expanded': 'false', 'aria-haspopup': 'listbox' }
+						: { 'aria-multiline': String(!singleLine) }),
+					class:
+						'min-h-[1.5em] outline-none whitespace-pre-wrap break-words [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:before:text-muted [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:h-0'
+				},
+				handleKeyDown: (view, event) =>
+					singleLine &&
+					event.key === 'Enter' &&
+					!event.isComposing &&
+					!view.dom.getAttribute('aria-activedescendant'),
+				transformPastedText: (text) => (singleLine ? text.replace(/[\r\n]+/g, ' ') : text),
+				// Accept plain text only, preserving the editor's deliberately small schema.
+				handlePaste: (_view, event) => {
+					const text = event.clipboardData?.getData('text/plain');
+					if (text === undefined) return false;
+					event.preventDefault();
+					if (singleLine) {
+						const cleaned = text.replace(/[\r\n]+/g, ' ');
+						if (cleaned) instance.commands.insertContent({ type: 'text', text: cleaned });
+					} else instance.commands.insertContent(textToDoc(text).content ?? []);
+					return true;
+				}
+			},
+			onUpdate: ({ editor: current }) => {
+				const json = current.getJSON();
+				value = editorJsonToBlueskyPost(json).text;
+				onupdate?.({ text: value, json });
+			}
+		});
+		editor = instance;
+		return () => {
+			instance.destroy();
+			editor = null;
+		};
+	});
+	$effect(() => {
+		if (editor && editorJsonToBlueskyPost(editor.getJSON()).text !== value)
+			editor.commands.setContent(textToDoc(value), { emitUpdate: false });
+	});
+	$effect(() => {
+		editor?.setEditable(!disabled, false);
+		editor?.view.dom.setAttribute('aria-disabled', String(disabled));
+	});
+</script>
+
+<div
+	bind:this={host}
+	class={cn(
+		'relative min-w-0 rounded-sm focus-within:outline-2 focus-within:outline-offset-4 focus-within:outline-focus',
+		className
+	)}
+	data-slot="inline-editor"
+>
+	<div bind:this={element}></div>
+</div>

package/dist/components/InlineEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Editor, type JSONContent } from '@tiptap/core';
+import type { ActorSearch } from './login/types.js';
+type $$ComponentProps = {
+    value?: string;
+    editor?: Editor | null;
+    label: string;
+    placeholder?: string;
+    singleLine?: boolean;
+    disabled?: boolean;
+    searchActors?: ActorSearch;
+    onupdate?: (content: {
+        text: string;
+        json: JSONContent;
+    }) => void;
+    class?: string;
+};
+declare const InlineEditor: import("svelte").Component<$$ComponentProps, {}, "value" | "editor">;
+type InlineEditor = ReturnType<typeof InlineEditor>;
+export default InlineEditor;

package/dist/components/Input.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	export type InputProps = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+		type?: Exclude<
+			HTMLInputTypeAttribute,
+			'checkbox' | 'radio' | 'file' | 'button' | 'submit' | 'reset' | 'image' | 'range'
+		>;
+		value?: string | number;
+		ref?: HTMLInputElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	let {
+		class: className,
+		value = $bindable<string | number | undefined>(''),
+		type = 'text',
+		ref = $bindable(null),
+		...rest
+	}: InputProps = $props();
+</script>
+
+<input
+	{...rest}
+	{type}
+	bind:value
+	bind:this={ref}
+	data-slot="input"
+	class={cn(control, className)}
+/>

package/dist/components/Input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+export type InputProps = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+    type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file' | 'button' | 'submit' | 'reset' | 'image' | 'range'>;
+    value?: string | number;
+    ref?: HTMLInputElement | null;
+};
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/InsetImage.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		src,
+		alt,
+		ratio = 1,
+		class: className,
+		style,
+		loading = 'lazy',
+		...rest
+	}: Omit<HTMLImgAttributes, 'src' | 'alt'> & {
+		src: string;
+		alt: string;
+		ratio?: number | string;
+	} = $props();
+</script>
+
+<figure
+	class={cn(
+		'relative m-0 aspect-(--ak-image-ratio) overflow-hidden rounded-ui border border-line after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_2px_7px_#0005]',
+		className
+	)}
+	{style}
+	style:--ak-image-ratio={ratio}
+	data-slot="inset-image"
+>
+	<img {...rest} {src} {alt} {loading} class="block size-full object-cover" />
+</figure>

package/dist/components/InsetImage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLImgAttributes, 'src' | 'alt'> & {
+    src: string;
+    alt: string;
+    ratio?: number | string;
+};
+declare const InsetImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type InsetImage = ReturnType<typeof InsetImage>;
+export default InsetImage;

package/dist/components/Label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: HTMLLabelAttributes & { ref?: HTMLLabelElement | null } = $props();
+</script>
+
+<label
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		'inline-flex items-center gap-2.5 text-[.8125rem] leading-normal font-medium text-ink',
+		className
+	)}>{@render children?.()}</label
+>

package/dist/components/Label.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLLabelAttributes & {
+    ref?: HTMLLabelElement | null;
+};
+declare const Label: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/LinkCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	import { safeWebUrl } from '../social/richtext.js';
+	let {
+		href,
+		meta,
+		class: className,
+		...rest
+	}: Omit<HTMLAnchorAttributes, 'href' | 'children'> & {
+		href: string;
+		meta: { title?: string; description?: string; image?: string };
+	} = $props();
+</script>
+
+<a
+	{...rest}
+	href={safeWebUrl(href)}
+	target="_blank"
+	rel="noopener noreferrer"
+	class={cn(
+		'block overflow-hidden rounded-ui border border-line bg-surface text-ink no-underline hover:border-control-line',
+		focus,
+		className
+	)}
+>
+	{#if meta.image && safeWebUrl(meta.image)}<div class="relative">
+			<img
+				src={meta.image}
+				alt=""
+				class="aspect-[1.91/1] w-full object-cover"
+				loading="lazy"
+			/><span
+				class="pointer-events-none absolute inset-0 [box-shadow:inset_0_0_0_1px_var(--ui-shadow),inset_0_2px_5px_var(--ui-shadow)]"
+			></span>
+		</div>{/if}
+	<div class="p-3">
+		<strong class="block text-sm font-medium">{meta.title || href}</strong>
+		{#if meta.description}<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-muted">
+				{meta.description}
+			</p>{/if}
+		<span class="mt-1 block truncate text-[.6875rem] text-muted"
+			>{href.replace(/^https?:\/\//, '')}</span
+		>
+	</div>
+</a>

package/dist/components/LinkCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAnchorAttributes, 'href' | 'children'> & {
+    href: string;
+    meta: {
+        title?: string;
+        description?: string;
+        image?: string;
+    };
+};
+declare const LinkCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkCard = ReturnType<typeof LinkCard>;
+export default LinkCard;

package/dist/components/Modal.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog as Primitive } from 'bits-ui';
+	import Icon from './Icon.svelte';
+	import { X } from '@sketchyicons/svelte';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	import { readTheme, observeTheme } from '../theme.js';
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		dismissible = true,
+		class: className,
+		style,
+		children,
+		onOpenAutoFocus,
+		...rest
+	}: Omit<Primitive.ContentProps, 'children' | 'child' | 'title'> & {
+		open?: boolean;
+		title: string;
+		description?: string;
+		dismissible?: boolean;
+		children?: Snippet;
+	} = $props();
+	let origin = $state<HTMLSpanElement>();
+	let content = $state<HTMLElement | null>(null);
+	let inherited = $state('');
+	$effect(() => {
+		if (!open || !origin) {
+			inherited = '';
+			return;
+		}
+		const element = origin;
+		const sync = () => (inherited = readTheme(element));
+		sync();
+		return observeTheme(element, sync);
+	});
+</script>
+
+<span hidden bind:this={origin} class={cn('atmo-theme', className)} {style}></span>
+<Primitive.Root bind:open>
+	{#if inherited}<Primitive.Portal>
+			<Primitive.Overlay class="fixed inset-0 z-50 bg-black/55" />
+			<Primitive.Content
+				{...rest}
+				bind:ref={content}
+				interactOutsideBehavior={dismissible ? 'close' : 'ignore'}
+				escapeKeydownBehavior={dismissible ? 'close' : 'ignore'}
+				style={[inherited, style].filter(Boolean).join(';')}
+				class={cn(
+					'fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-panel border border-line bg-page p-6 font-sans text-ink outline-none sm:p-7',
+					className
+				)}
+				onOpenAutoFocus={(event) => {
+					onOpenAutoFocus?.(event);
+					if (!event.defaultPrevented) {
+						const target = content?.querySelector<HTMLElement>('[data-autofocus]');
+						if (target) {
+							event.preventDefault();
+							target.focus();
+						}
+					}
+				}}
+			>
+				<header class="mb-6 flex items-start justify-between gap-4">
+					<div class="min-w-0 flex-1">
+						<Primitive.Title>
+							{#snippet child({ props })}<h2
+									{...props}
+									tabindex="-1"
+									class="text-[1.375rem] leading-snug font-medium tracking-tight break-words outline-none"
+								>
+									{title}
+								</h2>{/snippet}
+						</Primitive.Title>{#if description}<Primitive.Description
+								class="mt-2.5 text-[.8125rem] leading-relaxed text-muted"
+								>{description}</Primitive.Description
+							>{/if}
+					</div>
+					<Primitive.Close
+						disabled={!dismissible}
+						aria-label="Close dialog"
+						class={cn(
+							'-mt-1 -mr-2 inline-grid size-9 shrink-0 cursor-pointer place-items-center rounded-ui text-muted hover:bg-recess hover:text-ink disabled:pointer-events-none disabled:opacity-40',
+							focus
+						)}><Icon img={X} size={19} /></Primitive.Close
+					>
+				</header>
+				{@render children?.()}
+			</Primitive.Content>
+		</Primitive.Portal>{/if}
+</Primitive.Root>

package/dist/components/Modal.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { Dialog as Primitive } from 'bits-ui';
+type $$ComponentProps = Omit<Primitive.ContentProps, 'children' | 'child' | 'title'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    dismissible?: boolean;
+    children?: Snippet;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;