@mcp-b/react-components 0.43.0 → 0.44.0

package/dist/components/agents-sdk/ThinkSidepanel.js

@@ -1,12 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, C as FolderIcon, G as SlackIcon, I as PaperclipIcon, K as SpinnerIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, V as QueueIcon, Z as TerminalIcon, b as EyeIcon, c as BoxIcon, g as DiscordIcon, k as McpIcon, o as ArrowUpRightIcon, q as SquareIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-CVFSeTJn.js";
+import { A as McpIcon, C as FolderIcon, H as QueueIcon, J as SquareIcon, K as SlackIcon, L as PaperclipIcon, Q as TerminalIcon, S as FileIcon, T as InfoIcon, b as EyeIcon, c as BoxIcon, et as WarningIcon, g as DiscordIcon, o as ArrowUpRightIcon, q as SpinnerIcon, r as ArrowLeftIcon, y as EllipsisIcon, z as PencilIcon } from "../../icons-Dw-im7lg.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
-import { Avatar } from "../foundations/Avatar.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { Menu } from "../foundations/Menu.js";
+import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
 import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
@@ -19,8 +18,9 @@ import { ThinkFullApp } from "./ThinkFullApp.js";
 import { Switch } from "../foundations/Switch.js";
 import { ThinkRoutineLibrary } from "./ThinkRoutineLibrary.js";
 import { ActionGuide } from "../general-purpose/ActionGuide.js";
-import { t as SetupChecklistAction } from "../../SetupChecklist-H1JRCIIe.js";
+import { t as SetupChecklistAction } from "../../SetupChecklist-DOp-zqjh.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
+import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkSidepanel.tsx
@@ -57,7 +57,53 @@ function MenuGroupLabel({ hint, label }) {
 		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: hint }) }) })] })]
 	});
 }
-function OverflowMenu({ companion, follow, identityEmail, onIdentity, onModel, onSignOut, passkeyVault, renderLink }) {
+/** Keep in lockstep with --sigvelo-layout-break-compact / the 56rem @container. */
+function compactBreakPx(el) {
+	const raw = getComputedStyle(el).getPropertyValue("--sigvelo-layout-break-compact").trim();
+	if (raw.endsWith("rem")) return Number.parseFloat(raw) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	const px = Number.parseFloat(raw);
+	return Number.isFinite(px) ? px : 896;
+}
+function useCompactApp() {
+	const ref = React.useRef(null);
+	const [compact, setCompact] = React.useState(true);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const sync = () => {
+			const next = el.getBoundingClientRect().width <= compactBreakPx(el);
+			setCompact((current) => current === next ? current : next);
+		};
+		sync();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(sync);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, compact];
+}
+function WorkspaceLinks({ renderLink, view }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AppTopBar.Link, {
+		label: "Files",
+		"aria-current": view === "files" ? "page" : void 0,
+		"data-pressed": view === "files" ? "" : void 0,
+		render: renderLink({
+			kind: "view",
+			view: "files"
+		}),
+		children: /* @__PURE__ */ jsx(FileIcon, {})
+	}), /* @__PURE__ */ jsx(AppTopBar.Link, {
+		label: "Plugins",
+		"aria-current": view === "plugins" ? "page" : void 0,
+		"data-pressed": view === "plugins" ? "" : void 0,
+		render: renderLink({
+			kind: "view",
+			view: "plugins"
+		}),
+		children: /* @__PURE__ */ jsx(BoxIcon, {})
+	})] });
+}
+function OverflowMenu({ companion, follow, identityEmail, onIdentity, onModel, onSignOut, passkeyVault, renderLink, workbenchInMenu }) {
 	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 		label: "More actions",
 		tooltip: identityEmail ? `Signed in as ${identityEmail}` : void 0,
@@ -71,20 +117,19 @@ function OverflowMenu({ companion, follow, identityEmail, onIdentity, onModel, o
 		align: "end",
 		sideOffset: 4,
 		children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [
-			/* @__PURE__ */ jsxs(Menu.Item, {
+			workbenchInMenu ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu.Item, {
 				render: renderLink({
 					kind: "view",
 					view: "files"
 				}),
 				children: [/* @__PURE__ */ jsx(FileIcon, {}), "Files"]
-			}),
-			/* @__PURE__ */ jsxs(Menu.Item, {
+			}), /* @__PURE__ */ jsxs(Menu.Item, {
 				render: renderLink({
 					kind: "view",
 					view: "plugins"
 				}),
 				children: [/* @__PURE__ */ jsx(BoxIcon, {}), "Plugins"]
-			}),
+			})] }) : null,
 			/* @__PURE__ */ jsxs(Menu.Item, {
 				render: renderLink({
 					kind: "view",
@@ -497,7 +542,9 @@ function employeeMessages({ agentRun, brandName, guideOpen, hasConversation, hos
 function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion, connectingLabel, conversation, follow, identity, live, messages, modelSetup, onDeleteThread, onModel, onSignOut, passkeyVault, plugins, renderLink, schedules, sourceKey, start, status = "ready", thread, threads = EMPTY_THREADS, view, workspace, ...props }) {
 	const [identityOpen, setIdentityOpen] = React.useState(false);
 	const [guideOpen, setGuideOpen] = React.useState(false);
+	const [rootRef, compact] = useCompactApp();
 	if (status !== "ready") return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
 		className: cx("think-sidepanel", className),
 		"data-status": status,
 		...props,
@@ -517,7 +564,12 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 		onModel,
 		onSignOut,
 		passkeyVault,
-		renderLink
+		renderLink,
+		workbenchInMenu: compact
+	});
+	const workspaceLinks = compact || agentRun ? void 0 : /* @__PURE__ */ jsx(WorkspaceLinks, {
+		renderLink,
+		view
 	});
 	const identityDialog = identity ? /* @__PURE__ */ jsx(IdentityDialog, {
 		identity,
@@ -529,7 +581,7 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 		render: renderLink({ kind: "new-thread" }),
 		children: /* @__PURE__ */ jsx(PencilIcon, {})
 	}) : void 0;
-	const chatLeading = newThread || view === "chat" && appBarLeading ? /* @__PURE__ */ jsxs(Fragment, { children: [newThread, view === "chat" ? appBarLeading : null] }) : void 0;
+	const workbenchLeading = view === "files" || view === "plugins" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BackToChat, { renderLink }), appBarLeading] }) : newThread || view === "chat" && appBarLeading ? /* @__PURE__ */ jsxs(Fragment, { children: [newThread, view === "chat" ? appBarLeading : null] }) : void 0;
 	const chatMessages = employeeMessages({
 		agentRun,
 		brandName: brand.name,
@@ -542,6 +594,7 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 		start
 	});
 	if (view === "live") return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
 		className: cx("think-sidepanel", className),
 		"data-view": "live",
 		...props,
@@ -554,6 +607,7 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 		}), identityDialog]
 	});
 	if (view === "schedules") return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
 		className: cx("think-sidepanel", className),
 		"data-view": "schedules",
 		...props,
@@ -563,6 +617,7 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 		}) : schedules ? /* @__PURE__ */ jsx(ThinkRoutineLibrary, {
 			bar: {
 				leading: /* @__PURE__ */ jsx(BackToChat, { renderLink }),
+				actions: workspaceLinks,
 				primary: overflow
 			},
 			routines: schedules.routines,
@@ -596,6 +651,7 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 	});
 	const workbenchView = view === "plugins" ? "plugins" : view === "files" ? "files" : "chat";
 	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
 		className: cx("think-sidepanel", className),
 		"data-view": view,
 		...props,
@@ -623,13 +679,12 @@ function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion,
 						view: "chat"
 					}),
 					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-				}) : chatLeading,
-				compactLeading: !agentRun && (view === "files" || view === "plugins") ? /* @__PURE__ */ jsx(BackToChat, { renderLink }) : void 0,
-				actions: agentRun?.running && agentRun.onCancel ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+				}) : workbenchLeading,
+				actions: agentRun?.running && agentRun.onCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 					label: "Cancel run",
 					onClick: agentRun.onCancel,
 					children: /* @__PURE__ */ jsx(SquareIcon, {})
-				}) : void 0,
+				}), workspaceLinks] }) : workspaceLinks,
 				primary: overflow,
 				views: null
 			},

package/dist/components/agents-sdk/ThinkThreadPicker.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, B as PlusIcon, K as SpinnerIcon, _ as DotIcon, t as ArchiveIcon } from "../../icons-CVFSeTJn.js";
+import { V as PlusIcon, _ as DotIcon, et as WarningIcon, q as SpinnerIcon, t as ArchiveIcon } from "../../icons-Dw-im7lg.js";
 import { Button, buttonVariants } from "../foundations/Button.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
-import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
+import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import { SearchField } from "../foundations/SearchField.js";
 import { AlertDialog } from "../foundations/AlertDialog.js";

package/dist/components/agents-sdk/WorkspaceBrowser.js

@@ -1,5 +1,5 @@
 import { SearchField } from "../foundations/SearchField.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../../FileTree-DMYRdT6R.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../../FileTree-Uu3ZnW1u.js";
 import { WorkspaceHeader } from "./WorkspaceHeader.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/agents-sdk/WorkspaceExplorer.js

@@ -2,7 +2,7 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink } from "../../WorkspaceLink-DtH66bAY.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DWMKxX_u.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BublZXky.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceExplorer.tsx

package/dist/components/agents-sdk/WorkspaceFileView.js

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DWMKxX_u.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BublZXky.js";
 export { WorkspaceFileView };

package/dist/components/agents-sdk/WorkspaceHeader.js

@@ -1,4 +1,4 @@
-import { H as RefreshIcon } from "../../icons-CVFSeTJn.js";
+import { U as RefreshIcon } from "../../icons-Dw-im7lg.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/agents-sdk/WorkspaceMountManager.js

@@ -1,9 +1,9 @@
-import { $ as WarningIcon, I as PaperclipIcon, T as InfoIcon, d as CheckIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
+import { L as PaperclipIcon, T as InfoIcon, d as CheckIcon, et as WarningIcon, nt as XIcon } from "../../icons-Dw-im7lg.js";
 import { Button } from "../foundations/Button.js";
 import { Popover } from "../foundations/Popover.js";
-import { Card, CardAction, CardFooter, CardHeader, CardTitle } from "../foundations/Card.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { Card, CardAction, CardFooter, CardHeader, CardTitle } from "../foundations/Card.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceMountManager.tsx

package/dist/components/ai-sdk/Activity.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
 import { useExpansionState } from "./ExpansionState.js";
-import { p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Activity.tsx

package/dist/components/ai-sdk/AgentChatStartScreen.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { tt as XIcon } from "../../icons-CVFSeTJn.js";
+import { nt as XIcon } from "../../icons-Dw-im7lg.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { PromptInputTray } from "./PromptInput.js";

package/dist/components/ai-sdk/Approval.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { R as PencilIcon } from "../../icons-CVFSeTJn.js";
+import { z as PencilIcon } from "../../icons-Dw-im7lg.js";
 import { Button } from "../foundations/Button.js";
-import { Kbd } from "../foundations/Kbd.js";
 import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
+import { Kbd } from "../foundations/Kbd.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Approval.tsx

package/dist/components/ai-sdk/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, K as SpinnerIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
+import { et as WarningIcon, nt as XIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
 import { Button, buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";

package/dist/components/ai-sdk/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { Collapsible } from "../foundations/Collapsible.js";
-import { E as IconProps } from "../../icons-0corjfxR.js";
+import { E as IconProps } from "../../icons-6ZnyZJiR.js";
 import * as React from "react";
 
 //#region src/components/ai-sdk/ChainOfThought.d.ts

package/dist/components/ai-sdk/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { _ as DotIcon, d as CheckIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { K as SpinnerIcon, _ as DotIcon, d as CheckIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/ChainOfThought.tsx

package/dist/components/ai-sdk/Checkpoint.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { s as BookmarkIcon } from "../../icons-CVFSeTJn.js";
+import { s as BookmarkIcon } from "../../icons-Dw-im7lg.js";
 import { Marker, MarkerIcon } from "../foundations/Marker.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/ai-sdk/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as CODE_BLOCK_LANGUAGES, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../../CodeBlock-BjELA-_s.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as CODE_BLOCK_LANGUAGES, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../../CodeBlock-Dl7a3Wqo.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle };

package/dist/components/ai-sdk/ConnectedAppCards.d.ts

@@ -0,0 +1,106 @@
+import { CardProps } from "../foundations/Card.js";
+import * as React from "react";
+
+//#region src/components/ai-sdk/ConnectedAppCards.d.ts
+type ConnectedAppCardState = "pending" | "sent" | "denied";
+type ConnectedAppCardProps = Omit<CardProps, "children" | "hover" | "size" | "title" | "onChange"> & {
+  /** Lifecycle of the draft. Pending can be edited; sent and denied are settled. */state?: ConnectedAppCardState; /** Optional provider mark. The domain's generic icon is used by default. */
+  icon?: React.ReactNode;
+};
+interface EmailMessageDraft {
+  from?: string;
+  to?: string;
+  subject: string;
+  body?: string;
+}
+interface EmailMessageCardProps extends ConnectedAppCardProps, EmailMessageDraft {
+  onChange?: (next: EmailMessageDraft) => void;
+  onDiscard?: () => void | Promise<void>;
+  onReject?: (reason: string) => void | Promise<void>;
+  onSend?: () => void | Promise<void>;
+}
+/**
+ * Email draft or result. Pending cards can be edited and released; send,
+ * discard, and reject-with-reason stay application-owned.
+ */
+declare function EmailMessageCard({
+  body,
+  from,
+  icon,
+  onChange,
+  onDiscard,
+  onReject,
+  onSend,
+  state,
+  subject,
+  to,
+  ref,
+  ...props
+}: EmailMessageCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SlackMessageDraft {
+  workspace?: string;
+  to: string;
+  thread?: string;
+  message: string;
+}
+interface SlackMessageCardProps extends ConnectedAppCardProps, SlackMessageDraft {
+  onChange?: (next: SlackMessageDraft) => void;
+  onDiscard?: () => void | Promise<void>;
+  onReject?: (reason: string) => void | Promise<void>;
+  onSend?: () => void | Promise<void>;
+}
+/** Slack draft or posted message with workspace, destination, and thread fields. */
+declare function SlackMessageCard({
+  icon,
+  message,
+  onChange,
+  onDiscard,
+  onReject,
+  onSend,
+  state,
+  thread,
+  to,
+  workspace,
+  ref,
+  ...props
+}: SlackMessageCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CalendarEventDraft {
+  eventTitle: string;
+  when: string;
+  whenDateTime?: string;
+  location?: string;
+  attendees?: string;
+}
+interface CalendarEventCardProps extends ConnectedAppCardProps, CalendarEventDraft {
+  onChange?: (next: CalendarEventDraft) => void;
+  onDiscard?: () => void | Promise<void>;
+  onReject?: (reason: string) => void | Promise<void>;
+  onSend?: () => void | Promise<void>;
+}
+/**
+ * Calendar draft or settled event. Pass `whenDateTime` for a semantic `time`
+ * element; the application owns locale and timezone formatting.
+ */
+declare function CalendarEventCard({
+  attendees,
+  eventTitle,
+  icon,
+  location,
+  onChange,
+  onDiscard,
+  onReject,
+  onSend,
+  state,
+  when,
+  whenDateTime,
+  ref,
+  ...props
+}: CalendarEventCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { CalendarEventCard, CalendarEventCardProps, CalendarEventDraft, ConnectedAppCardState, EmailMessageCard, EmailMessageCardProps, EmailMessageDraft, SlackMessageCard, SlackMessageCardProps, SlackMessageDraft };