@salesforce/webapp-template-app-react-template-b2e-experimental 1.59.2 → 1.60.0

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/search/SearchResultsPanel.tsx

@@ -0,0 +1,197 @@
+/**
+ * SearchResultsPanel Component
+ *
+ * Displays the search results panel with loading, error, and empty states.
+ * Renders a list of SearchResultCard components and pagination controls.
+ *
+ * @param columns - Array of column definitions for displaying result data
+ * @param results - Array of search result records to display
+ * @param columnsLoading - Whether column metadata is currently loading
+ * @param resultsLoading - Whether search results are currently loading
+ * @param columnsError - Error message if column fetch failed
+ * @param resultsError - Error message if results fetch failed
+ * @param currentPageToken - Current pagination token
+ * @param pageSize - Number of results per page
+ * @param onPageChange - Callback when pagination changes; second arg optional: "next" | "prev" | "first" (cursor-stack pagination)
+ * @param onPageSizeChange - Callback when page size changes
+ *
+ * @example
+ * ```tsx
+ * <SearchResultsPanel
+ *   columns={columns}
+ *   results={results}
+ *   columnsLoading={false}
+ *   resultsLoading={false}
+ *   columnsError={null}
+ *   resultsError={null}
+ *   currentPageToken="0"
+ *   pageSize={25}
+ *   onPageChange={(token, direction) => handlePageChange(token, direction)}
+ *   onPageSizeChange={(size) => setPageSize(size)}
+ * />
+ * ```
+ */
+import { useMemo } from "react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Skeleton } from "../ui/skeleton";
+import { AlertCircle } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../ui/select";
+import { Label } from "../ui/label";
+import SearchResultCard from "../SearchResultCard";
+import SearchPagination from "./SearchPagination";
+import type { Column, SearchResultRecord } from "../../types/search/searchResults";
+import { getSafeKey } from "../../utils/recordUtils";
+
+interface SearchResultsPanelProps {
+	/** API name of the object being searched (e.g. for detail page navigation). */
+	objectApiName?: string;
+	columns: Column[];
+	results: SearchResultRecord[];
+	columnsLoading: boolean;
+	resultsLoading: boolean;
+	columnsError: string | null;
+	resultsError: string | null;
+	currentPageToken: string;
+	nextPageToken: string | null;
+	previousPageToken: string | null;
+	hasNextPage?: boolean;
+	hasPreviousPage?: boolean;
+	pageSize: number;
+	sortBy: string;
+	onPageChange: (newPageToken: string, direction?: "next" | "prev" | "first") => void;
+	onPageSizeChange: (newPageSize: number) => void;
+	onSortByChange: (newSortBy: string) => void;
+}
+
+export default function SearchResultsPanel({
+	objectApiName,
+	columns,
+	results,
+	columnsLoading,
+	resultsLoading,
+	columnsError,
+	resultsError,
+	currentPageToken,
+	nextPageToken,
+	previousPageToken,
+	hasNextPage = false,
+	hasPreviousPage = false,
+	pageSize,
+	sortBy,
+	onPageChange,
+	onPageSizeChange,
+	onSortByChange,
+}: SearchResultsPanelProps) {
+	const sortableColumns = useMemo(() => columns.filter(({ sortable }) => sortable), [columns]);
+
+	const validResults = useMemo(
+		() => results.filter((record) => record && record.record && record.record.id),
+		[results],
+	);
+	if (columnsError || resultsError) {
+		return (
+			<Alert variant="destructive" role="alert">
+				<AlertCircle className="h-4 w-4" aria-hidden="true" />
+				<AlertTitle>Error</AlertTitle>
+				<AlertDescription>
+					{columnsError || resultsError || "Failed to load search results"}
+				</AlertDescription>
+			</Alert>
+		);
+	}
+
+	if (resultsLoading || columnsLoading) {
+		return (
+			<div
+				className="space-y-4"
+				role="status"
+				aria-live="polite"
+				aria-label="Loading search results"
+			>
+				<span className="sr-only">Loading search results</span>
+				{[1, 2, 3].map((i) => (
+					<div key={i} className="border rounded-lg p-6" aria-hidden="true">
+						<Skeleton className="h-6 w-3/4 mb-4" />
+						<Skeleton className="h-4 w-full mb-2" />
+						<Skeleton className="h-4 w-2/3" />
+					</div>
+				))}
+			</div>
+		);
+	}
+
+	if (results.length === 0) {
+		return (
+			<div className="text-center py-12" role="status" aria-live="polite">
+				<p className="text-lg mb-2">No results found</p>
+				<p className="text-sm">Try adjusting your search query or filters</p>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{sortableColumns.length > 0 && (
+				<div
+					className="mb-6 flex items-center gap-2 justify-end"
+					role="group"
+					aria-label="Sort options"
+				>
+					<Label htmlFor="sort-by-select" className="text-sm font-normal whitespace-nowrap">
+						Sort by:
+					</Label>
+					<Select value={sortBy || ""} onValueChange={onSortByChange}>
+						<SelectTrigger
+							id="sort-by-select"
+							className="w-[200px]"
+							aria-label="Sort search results by field"
+						>
+							<SelectValue placeholder="Select field..." />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="relevance">Relevance</SelectItem>
+							{sortableColumns.map((column) => (
+								<SelectItem key={column.fieldApiName} value={column.fieldApiName}>
+									{column.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			)}
+
+			<div className="space-y-4 mb-6" role="list" aria-label="Search results list">
+				{validResults.map((record, index) => {
+					const recordId = record.record.id;
+					const safeKey = getSafeKey(recordId, index);
+					return (
+						<div key={safeKey} role="listitem">
+							<SearchResultCard
+								record={record.record}
+								columns={columns}
+								objectApiName={objectApiName}
+							/>
+						</div>
+					);
+				})}
+			</div>
+
+			<SearchPagination
+				currentPageToken={currentPageToken}
+				nextPageToken={nextPageToken}
+				previousPageToken={previousPageToken}
+				hasNextPage={hasNextPage}
+				hasPreviousPage={hasPreviousPage}
+				pageSize={pageSize}
+				onPageChange={onPageChange}
+				onPageSizeChange={onPageSizeChange}
+			/>
+		</>
+	);
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/shared/GlobalSearchInput.tsx

@@ -0,0 +1,114 @@
+/**
+ * GlobalSearchInput Component
+ *
+ * Search input with two actions: Search (navigate to results for query) and
+ * Browse All (navigate to same results UI with all records for the object).
+ */
+import { useState, useCallback, useMemo, useId } from "react";
+import type { KeyboardEvent, ChangeEvent } from "react";
+import { useNavigate } from "react-router";
+import { Card, CardContent } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Search } from "lucide-react";
+import { OBJECT_API_NAMES } from "../../constants";
+import { useObjectInfoBatch } from "../../hooks/useObjectInfoBatch";
+
+const BROWSE_SEGMENT = "browse__all";
+
+const FALLBACK_LABEL_PLURAL = "records";
+
+export function GlobalSearchInput() {
+	const [searchQuery, setSearchQuery] = useState("");
+	const navigate = useNavigate();
+	const inputId = useId();
+	const searchButtonId = useId();
+	const browseButtonId = useId();
+	const inputDescriptionId = `${inputId}-description`;
+	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
+	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? FALLBACK_LABEL_PLURAL;
+
+	const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		setSearchQuery(e.target.value);
+	}, []);
+
+	const handleSearch = useCallback(() => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			navigate(`/global-search/${encodeURIComponent(trimmed)}`);
+		}
+	}, [searchQuery, navigate]);
+
+	const handleBrowseAll = useCallback(() => {
+		navigate(`/global-search/${BROWSE_SEGMENT}`);
+	}, [navigate]);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				handleSearch();
+			}
+		},
+		[handleSearch],
+	);
+
+	const isSearchDisabled = useMemo(() => !searchQuery.trim(), [searchQuery]);
+
+	return (
+		<div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+			<Card className="w-full">
+				<CardContent className="pt-6">
+					<div className="flex flex-col sm:flex-row gap-3">
+						<div className="flex-1 relative">
+							<Search
+								className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-600"
+								aria-hidden="true"
+							/>
+							<Input
+								id={inputId}
+								type="search"
+								placeholder={`Search for ${labelPlural}`}
+								value={searchQuery}
+								onChange={handleInputChange}
+								onKeyDown={handleKeyDown}
+								className="pl-10"
+								aria-label={`Search for ${labelPlural}`}
+								aria-describedby={inputDescriptionId}
+							/>
+							<p id={inputDescriptionId} className="sr-only">
+								Enter your search query and press Enter or click Search. Or click Browse All to see
+								all {labelPlural}.
+							</p>
+						</div>
+
+						<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
+							<Button
+								id={searchButtonId}
+								onClick={handleSearch}
+								disabled={isSearchDisabled}
+								className="w-full sm:w-auto"
+								aria-label="Search"
+								aria-describedby={inputDescriptionId}
+								variant="default"
+							>
+								<Search className="h-4 w-4 mr-2" aria-hidden="true" />
+								Search
+							</Button>
+							<Button
+								id={browseButtonId}
+								variant="outline"
+								onClick={handleBrowseAll}
+								className="w-full sm:w-auto"
+								aria-label={`Browse all ${labelPlural}`}
+								aria-describedby={inputDescriptionId}
+							>
+								Browse All {labelPlural}
+							</Button>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/alert.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+	"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline:
+					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-8",
+				"icon-xs":
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm":
+					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant = "default",
+	size = "default",
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot.Root : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...(props as any)}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Card({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+	return (
+		<div
+			data-slot="card"
+			data-size={size}
+			className={cn(
+				"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn(
+				"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn(
+				"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { XIcon } from "lucide-react";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close data-slot="dialog-close" asChild>
+						<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="dialog-header" className={cn("gap-2 flex flex-col", className)} {...props} />
+	);
+}
+
+function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"bg-muted/50 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-base leading-none font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};