@hubspot/app-connect-sdk 1.0.0-alpha.1

package/dist/browser/HubSpotAppConnect-BW45gyDs.js

@@ -0,0 +1,489 @@
+import { t as themeClass } from "./theme.css-CJbxi5hC.js";
+import "./assets/src/browser/theme-tokens.generated.css.ts.vanilla-C8Rjb8NH.css";
+import "./assets/src/browser/theme.css.ts.vanilla-D_GBwEeI.css";
+import { createContext, useContext, useEffect, useSyncExternalStore } from "react";
+import { Menu } from "@base-ui/react/menu";
+import "./assets/src/browser/react/components/Button/Button.css.ts.vanilla-Df16gUKx.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./assets/src/browser/react/components/ConnectButton/ConnectButton.css.ts.vanilla-BXXMQqfA.css";
+import "./assets/src/browser/react/components/ShareButton/ShareButton.css.ts.vanilla-CY8SC-0T.css";
+import "./assets/src/browser/react/components/AppConnectHeader/AppConnectHeader.css.ts.vanilla-DpJ0aBGF.css";
+import "./assets/src/browser/react/components/DisconnectedBody/DisconnectedBody.css.ts.vanilla-DLvostZL.css";
+import "./assets/src/browser/react/components/LoadingIndicator/LoadingIndicator.css.ts.vanilla-RVWGi6Ny.css";
+import "./assets/src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.css.ts.vanilla-Boi40eip.css";
+//#region src/browser/react/context.ts
+/**
+* React context that carries the `AppConnectController` from the
+* `HubSpotAppConnect` provider down to consumers of
+* `useHubSpotAppConnect`. `null` indicates the hook is being used
+* outside a provider.
+*/
+const HubSpotAppConnectControllerContext = createContext(null);
+//#endregion
+//#region src/browser/react/hooks.ts
+/**
+* React hook that returns the current `AppConnectState`. Must be
+* called inside a {@link HubSpotAppConnect} provider — throws when
+* no controller is available.
+*
+* The hook subscribes to the controller via `useSyncExternalStore`
+* so React 18+ batched updates and SSR work correctly.
+*/
+function useHubSpotAppConnect() {
+	const controller = useContext(HubSpotAppConnectControllerContext);
+	if (controller == null) throw new Error("useHubSpotAppConnect must be used within HubSpotAppConnect");
+	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getServerSnapshot);
+}
+//#endregion
+//#region src/browser/react/components/Button/Button.css.ts
+var root$1 = "Button_root__16p8kei0";
+var size = {
+	md: "Button_size_md__16p8kei3",
+	lg: "Button_size_lg__16p8kei4"
+};
+var variant = {
+	primary: "Button_variant_primary__16p8kei1",
+	secondary: "Button_variant_secondary__16p8kei2"
+};
+//#endregion
+//#region src/browser/react/components/Button/Button.tsx
+function Button({ children, className, variant: variant$1 = "primary", size: size$1 = "md", type = "button", ...rest }) {
+	const composedClassName = [
+		root$1,
+		variant[variant$1],
+		size[size$1],
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type,
+		className: composedClassName,
+		children
+	});
+}
+//#endregion
+//#region src/browser/react/components/ConnectButton/ConnectButton.css.ts
+var label = "ConnectButton_label__db1gqc2";
+var labelMuted = "ConnectButton_labelMuted__db1gqc3";
+var loadingBackdrop = {
+	primary: "ConnectButton_loadingBackdrop_primary__db1gqc4",
+	secondary: "ConnectButton_loadingBackdrop_secondary__db1gqc5"
+};
+var root = "ConnectButton_root__db1gqc1";
+var spinner = "ConnectButton_spinner__db1gqc6";
+//#endregion
+//#region src/browser/react/components/ConnectButton/ConnectButton.tsx
+function ConnectButton({ variant = "primary", size = "md", className }) {
+	const { status, connectToHubSpot } = useHubSpotAppConnect();
+	const isConnecting = status === "connecting";
+	return /* @__PURE__ */ jsxs(Button, {
+		variant,
+		size,
+		className: [root, className].filter(Boolean).join(" "),
+		"aria-busy": isConnecting,
+		onClick: () => void connectToHubSpot(),
+		disabled: isConnecting,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: isConnecting ? `${label} ${labelMuted}` : label,
+			children: "Connect to HubSpot"
+		}), isConnecting ? /* @__PURE__ */ jsx("span", {
+			className: loadingBackdrop[variant],
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", { className: spinner })
+		}) : null]
+	});
+}
+//#endregion
+//#region src/browser/react/components/icons/ChevronDownIcon.tsx
+function ChevronDownIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 6l4 4 4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+//#endregion
+//#region src/browser/react/components/icons/ExternalLinkIcon.tsx
+function ExternalLinkIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6.5 3.5H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2.5M10 2.5h3.5V6M9 7l5-5",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+//#endregion
+//#region src/browser/react/components/icons/HubSpotDataSourceIcon.tsx
+function HubSpotDataSourceIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.5",
+			y: "2.5",
+			width: "11",
+			height: "11",
+			rx: "1.5",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M5 6h6M5 8.25h6M5 10.5h4",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+//#region src/browser/react/components/icons/LogoutIcon.tsx
+function LogoutIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M6.5 2.5h-3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M10.5 11l3-3-3-3",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M13.5 8h-7",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/browser/react/components/icons/ShareIcon.tsx
+function ShareIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "5",
+				r: "2.75",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "12",
+				r: "2.75",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "19",
+				r: "2.75",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.6 10.5L15.4 6.5M8.6 13.5L15.4 17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/browser/react/components/ShareButton/ShareButton.css.ts
+var styles$4 = {
+	shareButton: "ShareButton_styles_shareButton__os4guj0",
+	shareIcon: "ShareButton_styles_shareIcon__os4guj1"
+};
+//#endregion
+//#region src/browser/react/components/ShareButton/ShareButton.tsx
+async function shareAppConnectPage(options) {
+	const { pageTitle } = options;
+	const url = window.location.href;
+	if (typeof navigator.share === "function") try {
+		await navigator.share({
+			title: pageTitle,
+			text: pageTitle,
+			url
+		});
+		return;
+	} catch (error) {
+		if (error instanceof DOMException && error.name === "AbortError") return;
+	}
+	if (typeof navigator.clipboard?.writeText === "function") await navigator.clipboard.writeText(url);
+}
+function ShareButton({ pageTitle }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: styles$4.shareButton,
+		onClick: () => void shareAppConnectPage({ pageTitle }),
+		children: [/* @__PURE__ */ jsx(ShareIcon, { className: styles$4.shareIcon }), /* @__PURE__ */ jsx("span", { children: "Share" })]
+	});
+}
+//#endregion
+//#region src/browser/react/components/AppConnectHeader/AppConnectHeader.css.ts
+var styles$3 = {
+	header: "AppConnectHeader_styles_header__1jczis90",
+	titleRow: "AppConnectHeader_styles_titleRow__1jczis91",
+	leftStack: "AppConnectHeader_styles_leftStack__1jczis92",
+	contextRow: "AppConnectHeader_styles_contextRow__1jczis93",
+	contextIcon: "AppConnectHeader_styles_contextIcon__1jczis94",
+	contextPrefix: "AppConnectHeader_styles_contextPrefix__1jczis95",
+	contextLink: "AppConnectHeader_styles_contextLink__1jczis96",
+	contextExternalIcon: "AppConnectHeader_styles_contextExternalIcon__1jczis97",
+	titleCluster: "AppConnectHeader_styles_titleCluster__1jczis98",
+	title: "AppConnectHeader_styles_title__1jczis99",
+	userTrigger: "AppConnectHeader_styles_userTrigger__1jczis9a",
+	triggerName: "AppConnectHeader_styles_triggerName__1jczis9b",
+	chevron: "AppConnectHeader_styles_chevron__1jczis9c",
+	avatar: "AppConnectHeader_styles_avatar__1jczis9d",
+	avatarSm: "AppConnectHeader_styles_avatarSm__1jczis9e",
+	avatarLg: "AppConnectHeader_styles_avatarLg__1jczis9f",
+	popup: "AppConnectHeader_styles_popup__1jczis9g",
+	userInfo: "AppConnectHeader_styles_userInfo__1jczis9h",
+	userInfoText: "AppConnectHeader_styles_userInfoText__1jczis9i",
+	userInfoName: "AppConnectHeader_styles_userInfoName__1jczis9j",
+	userInfoEmail: "AppConnectHeader_styles_userInfoEmail__1jczis9k",
+	separator: "AppConnectHeader_styles_separator__1jczis9l",
+	disconnectItem: "AppConnectHeader_styles_disconnectItem__1jczis9m",
+	disconnectIcon: "AppConnectHeader_styles_disconnectIcon__1jczis9n"
+};
+//#endregion
+//#region src/browser/react/components/AppConnectHeader/AppConnectHeader.tsx
+const FAKE_USER = {
+	firstName: "Gabby",
+	lastName: "Martinez",
+	email: "gabby.martinez@acmecorp.com"
+};
+function getUserInitials(user) {
+	return `${user.firstName.charAt(0).toUpperCase()}${user.lastName.charAt(0).toUpperCase()}`;
+}
+function getFullName(user) {
+	return `${user.firstName} ${user.lastName}`;
+}
+function AppConnectHeader({ title }) {
+	const { status } = useHubSpotAppConnect();
+	return /* @__PURE__ */ jsxs("header", {
+		className: styles$3.header,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles$3.titleRow,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: styles$3.leftStack,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: styles$3.titleCluster,
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: styles$3.title,
+						children: title
+					}), /* @__PURE__ */ jsx(ShareButton, { pageTitle: title })]
+				}), status === "connected" ? /* @__PURE__ */ jsx(ViewingHubSpotContextRow, {}) : null]
+			})
+		}), status === "connected" ? /* @__PURE__ */ jsx(UserMenu, {}) : /* @__PURE__ */ jsx(ConnectButton, { variant: "secondary" })]
+	});
+}
+function ViewingHubSpotContextRow() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles$3.contextRow,
+		children: [
+			/* @__PURE__ */ jsx(HubSpotDataSourceIcon, { className: styles$3.contextIcon }),
+			/* @__PURE__ */ jsx("span", {
+				className: styles$3.contextPrefix,
+				children: "Viewing HubSpot data from "
+			}),
+			/* @__PURE__ */ jsxs("a", {
+				className: styles$3.contextLink,
+				href: "#",
+				onClick: (event) => {
+					event.preventDefault();
+				},
+				children: ["Acme Corp · HubSpot", /* @__PURE__ */ jsx(ExternalLinkIcon, { className: styles$3.contextExternalIcon })]
+			})
+		]
+	});
+}
+function UserMenu() {
+	const { disconnectFromHubSpot } = useHubSpotAppConnect();
+	const initials = getUserInitials(FAKE_USER);
+	const fullName = getFullName(FAKE_USER);
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		modal: false,
+		children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
+			className: styles$3.userTrigger,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: `${styles$3.avatar} ${styles$3.avatarSm}`,
+					"aria-hidden": "true",
+					children: initials
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: styles$3.triggerName,
+					children: fullName
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: styles$3.chevron })
+			]
+		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			sideOffset: 8,
+			align: "end",
+			children: /* @__PURE__ */ jsxs(Menu.Popup, {
+				className: styles$3.popup,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: styles$3.userInfo,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `${styles$3.avatar} ${styles$3.avatarLg}`,
+							"aria-hidden": "true",
+							children: initials
+						}), /* @__PURE__ */ jsxs("div", {
+							className: styles$3.userInfoText,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: styles$3.userInfoName,
+								children: fullName
+							}), /* @__PURE__ */ jsx("span", {
+								className: styles$3.userInfoEmail,
+								children: FAKE_USER.email
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(Menu.Separator, { className: styles$3.separator }),
+					/* @__PURE__ */ jsxs(Menu.Item, {
+						className: styles$3.disconnectItem,
+						onClick: () => void disconnectFromHubSpot(),
+						children: [/* @__PURE__ */ jsx(LogoutIcon, { className: styles$3.disconnectIcon }), "Disconnect"]
+					})
+				]
+			})
+		}) })]
+	});
+}
+//#endregion
+//#region src/browser/react/components/DisconnectedBody/DisconnectedBody.css.ts
+var styles$2 = {
+	card: "DisconnectedBody_styles_card__iwasm50",
+	message: "DisconnectedBody_styles_message__iwasm51",
+	errorText: "DisconnectedBody_styles_errorText__iwasm52"
+};
+//#endregion
+//#region src/browser/react/components/DisconnectedBody/DisconnectedBody.tsx
+function DisconnectedBody({ message }) {
+	const { error } = useHubSpotAppConnect();
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles$2.card,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: styles$2.message,
+				children: message
+			}),
+			/* @__PURE__ */ jsx(ConnectButton, { size: "lg" }),
+			error && /* @__PURE__ */ jsxs("p", {
+				className: styles$2.errorText,
+				children: ["Failed to connect to HubSpot. ", error]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/browser/react/components/LoadingIndicator/LoadingIndicator.css.ts
+var styles$1 = {
+	wrapper: "LoadingIndicator_styles_wrapper__y7s26s1",
+	spinner: "LoadingIndicator_styles_spinner__y7s26s2"
+};
+//#endregion
+//#region src/browser/react/components/LoadingIndicator/LoadingIndicator.tsx
+function LoadingIndicator() {
+	return /* @__PURE__ */ jsx("div", {
+		className: styles$1.wrapper,
+		role: "status",
+		"aria-label": "Loading",
+		children: /* @__PURE__ */ jsx("div", { className: styles$1.spinner })
+	});
+}
+//#endregion
+//#region src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.css.ts
+var styles = {
+	shell: "HubSpotAppConnect_styles_shell__h06kd60",
+	content: "HubSpotAppConnect_styles_content__h06kd61",
+	connectedErrorBanner: "HubSpotAppConnect_styles_connectedErrorBanner__h06kd62"
+};
+//#endregion
+//#region src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.tsx
+/**
+* Layout component that exposes `controller` to {@link useHubSpotAppConnect},
+* starts it once on mount, and renders a standard header plus the content
+* slot that matches the current connection status.
+*/
+function HubSpotAppConnect({ title, controller, connected, disconnectedMessage }) {
+	useEffect(() => {
+		controller.start();
+	}, [controller]);
+	useEffect(() => {
+		document.documentElement.classList.add(themeClass);
+		return () => {
+			document.documentElement.classList.remove(themeClass);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(HubSpotAppConnectControllerContext.Provider, {
+		value: controller,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.shell,
+			children: [/* @__PURE__ */ jsx(AppConnectHeader, { title }), /* @__PURE__ */ jsx("div", {
+				className: styles.content,
+				children: /* @__PURE__ */ jsx(HubSpotAppConnectContent, {
+					connected,
+					disconnectedMessage
+				})
+			})]
+		})
+	});
+}
+function HubSpotAppConnectContent({ connected, disconnectedMessage }) {
+	const { status, error } = useHubSpotAppConnect();
+	if (status === "initializing") return /* @__PURE__ */ jsx(LoadingIndicator, {});
+	if (status === "connected") return /* @__PURE__ */ jsxs(Fragment, { children: [error ? /* @__PURE__ */ jsx("div", {
+		className: styles.connectedErrorBanner,
+		role: "alert",
+		children: error
+	}) : null, connected] });
+	return /* @__PURE__ */ jsx(DisconnectedBody, { message: disconnectedMessage });
+}
+//#endregion
+export { useHubSpotAppConnect as n, HubSpotAppConnect as t };
+
+//# sourceMappingURL=HubSpotAppConnect-BW45gyDs.js.map

package/dist/browser/HubSpotAppConnect-BW45gyDs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HubSpotAppConnect-BW45gyDs.js","names":["styles.root","styles.variant","variant","styles.size","size","styles","styles","styles","styles"],"sources":["../../src/browser/react/context.ts","../../src/browser/react/hooks.ts","../../src/browser/react/components/Button/Button.css.ts","../../src/browser/react/components/Button/Button.tsx","../../src/browser/react/components/ConnectButton/ConnectButton.css.ts","../../src/browser/react/components/ConnectButton/ConnectButton.tsx","../../src/browser/react/components/icons/ChevronDownIcon.tsx","../../src/browser/react/components/icons/ExternalLinkIcon.tsx","../../src/browser/react/components/icons/HubSpotDataSourceIcon.tsx","../../src/browser/react/components/icons/LogoutIcon.tsx","../../src/browser/react/components/icons/ShareIcon.tsx","../../src/browser/react/components/ShareButton/ShareButton.css.ts","../../src/browser/react/components/ShareButton/ShareButton.tsx","../../src/browser/react/components/AppConnectHeader/AppConnectHeader.css.ts","../../src/browser/react/components/AppConnectHeader/AppConnectHeader.tsx","../../src/browser/react/components/DisconnectedBody/DisconnectedBody.css.ts","../../src/browser/react/components/DisconnectedBody/DisconnectedBody.tsx","../../src/browser/react/components/LoadingIndicator/LoadingIndicator.css.ts","../../src/browser/react/components/LoadingIndicator/LoadingIndicator.tsx","../../src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.css.ts","../../src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { AppConnectController } from '../types.ts';\n\n/**\n * React context that carries the `AppConnectController` from the\n * `HubSpotAppConnect` provider down to consumers of\n * `useHubSpotAppConnect`. `null` indicates the hook is being used\n * outside a provider.\n */\nexport const HubSpotAppConnectControllerContext =\n  createContext<AppConnectController | null>(null);\n","import { useContext, useSyncExternalStore } from 'react';\n\nimport type { AppConnectState } from '../types.ts';\nimport { HubSpotAppConnectControllerContext } from './context.ts';\n\nexport type UseHubSpotAppConnectResult = AppConnectState;\n\n/**\n * React hook that returns the current `AppConnectState`. Must be\n * called inside a {@link HubSpotAppConnect} provider — throws when\n * no controller is available.\n *\n * The hook subscribes to the controller via `useSyncExternalStore`\n * so React 18+ batched updates and SSR work correctly.\n */\nexport function useHubSpotAppConnect(): UseHubSpotAppConnectResult {\n  const controller = useContext(HubSpotAppConnectControllerContext);\n  if (controller == null) {\n    throw new Error(\n      'useHubSpotAppConnect must be used within HubSpotAppConnect'\n    );\n  }\n  return useSyncExternalStore(\n    controller.subscribe,\n    controller.getSnapshot,\n    controller.getServerSnapshot\n  );\n}\n","import { style, styleVariants } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const root = style({\n  appearance: 'none',\n  WebkitAppearance: 'none',\n  margin: 0,\n  font: 'inherit',\n  fontWeight: 500,\n  lineHeight: 'inherit',\n  textAlign: 'center',\n  cursor: 'pointer',\n  borderWidth: 1,\n  borderStyle: 'solid',\n  borderRadius: themeVars.borderRadius[100],\n  transition:\n    'background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease',\n  selectors: {\n    '&:disabled': {\n      cursor: 'wait',\n      opacity: 0.55,\n    },\n  },\n});\n\nexport const variant = styleVariants({\n  primary: {\n    backgroundColor: themeVars.fill.primary.default,\n    color: themeVars.text.primary.default,\n    borderColor: themeVars.border.primary.default,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.95)',\n      },\n    },\n  },\n  secondary: {\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderColor: themeVars.border.core.default,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: '#f7f7f7',\n      },\n    },\n  },\n});\n\nexport const size = styleVariants({\n  md: {\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n    fontSize: 14,\n  },\n  lg: {\n    padding: `${themeVars.space[300]} ${themeVars.space[500]}`,\n    fontSize: 16,\n  },\n});\n","import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport * as styles from './Button.css.ts';\n\nexport type ButtonVariant = 'primary' | 'secondary';\nexport type ButtonSize = 'md' | 'lg';\n\nexport interface ButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  children: ReactNode;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nexport function Button({\n  children,\n  className,\n  variant = 'primary',\n  size = 'md',\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const composedClassName = [\n    styles.root,\n    styles.variant[variant],\n    styles.size[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <button {...rest} type={type} className={composedClassName}>\n      {children}\n    </button>\n  );\n}\n","import { keyframes, style, styleVariants } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst spin = keyframes({\n  from: { transform: 'rotate(0deg)' },\n  to: { transform: 'rotate(360deg)' },\n});\n\nexport const root = style({\n  position: 'relative',\n});\n\nexport const label = style({\n  position: 'relative',\n  zIndex: 0,\n});\n\nexport const labelMuted = style({\n  opacity: 0.22,\n});\n\nexport const loadingBackdrop = styleVariants({\n  primary: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    zIndex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 36,\n    height: 36,\n    marginLeft: -18,\n    marginTop: -18,\n    borderRadius: '50%',\n    backgroundColor: 'rgba(255, 255, 255, 0.88)',\n    boxShadow: '0 1px 6px rgba(0, 0, 0, 0.14)',\n    pointerEvents: 'none',\n  },\n  secondary: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    zIndex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 36,\n    height: 36,\n    marginLeft: -18,\n    marginTop: -18,\n    borderRadius: '50%',\n    backgroundColor: 'rgba(255, 255, 255, 0.82)',\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.08)',\n    pointerEvents: 'none',\n  },\n});\n\nexport const spinner = style({\n  display: 'block',\n  width: 14,\n  height: 14,\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: themeVars.border.core.subtle.default,\n  borderTopColor: themeVars.fill.primary.default,\n  borderRadius: '50%',\n  animation: `${spin} 0.8s linear infinite`,\n});\n","import { useHubSpotAppConnect } from '../../hooks.ts';\nimport type { ButtonProps } from '../Button/Button.tsx';\nimport { Button } from '../Button/Button.tsx';\nimport {\n  label,\n  labelMuted,\n  loadingBackdrop,\n  root,\n  spinner,\n} from './ConnectButton.css.ts';\n\nexport interface ConnectButtonProps extends Pick<\n  ButtonProps,\n  'variant' | 'size' | 'className'\n> {}\n\nexport function ConnectButton({\n  variant = 'primary',\n  size = 'md',\n  className,\n}: ConnectButtonProps) {\n  const { status, connectToHubSpot } = useHubSpotAppConnect();\n  const isConnecting = status === 'connecting';\n  const composedClassName = [root, className].filter(Boolean).join(' ');\n  const labelClassName = isConnecting ? `${label} ${labelMuted}` : label;\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      className={composedClassName}\n      aria-busy={isConnecting}\n      onClick={() => void connectToHubSpot()}\n      disabled={isConnecting}\n    >\n      <span className={labelClassName}>Connect to HubSpot</span>\n      {isConnecting ? (\n        <span className={loadingBackdrop[variant]} aria-hidden=\"true\">\n          <span className={spinner} />\n        </span>\n      ) : null}\n    </Button>\n  );\n}\n","export interface ChevronDownIconProps {\n  className?: string;\n}\n\nexport function ChevronDownIcon({ className }: ChevronDownIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 6l4 4 4-4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface ExternalLinkIconProps {\n  className?: string;\n}\n\nexport function ExternalLinkIcon({ className }: ExternalLinkIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6.5 3.5H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2.5M10 2.5h3.5V6M9 7l5-5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface HubSpotDataSourceIconProps {\n  className?: string;\n}\n\nexport function HubSpotDataSourceIcon({\n  className,\n}: HubSpotDataSourceIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <rect\n        x=\"2.5\"\n        y=\"2.5\"\n        width=\"11\"\n        height=\"11\"\n        rx=\"1.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n      />\n      <path\n        d=\"M5 6h6M5 8.25h6M5 10.5h4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface LogoutIconProps {\n  className?: string;\n}\n\nexport function LogoutIcon({ className }: LogoutIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6.5 2.5h-3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M10.5 11l3-3-3-3\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M13.5 8h-7\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface ShareIconProps {\n  className?: string;\n}\n\nexport function ShareIcon({ className }: ShareIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"18\" cy=\"5\" r=\"2.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <circle cx=\"6\" cy=\"12\" r=\"2.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <circle\n        cx=\"18\"\n        cy=\"19\"\n        r=\"2.75\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n      />\n      <path\n        d=\"M8.6 10.5L15.4 6.5M8.6 13.5L15.4 17.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst shareBorder = '#cbd6e2';\nconst shareText = '#33475b';\n\nexport const styles = {\n  shareButton: style({\n    flexShrink: 0,\n    appearance: 'none',\n    WebkitAppearance: 'none',\n    margin: 0,\n    fontFamily: 'inherit',\n    fontSize: 14,\n    fontWeight: 500,\n    lineHeight: 1,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: themeVars.space[200],\n    padding: `8px ${themeVars.space[300]}`,\n    color: shareText,\n    backgroundColor: themeVars.fill.surface.default.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: shareBorder,\n    borderRadius: 100,\n    transition:\n      'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: '#f5f8fa',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${themeVars.border.tertiary.default}`,\n        outlineOffset: 2,\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.55,\n      },\n    },\n  }),\n  shareIcon: style({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    display: 'block',\n  }),\n} as const;\n","import { ShareIcon } from '../icons/ShareIcon.tsx';\nimport { styles } from './ShareButton.css.ts';\n\ninterface ShareAppConnectPageOptions {\n  pageTitle: string;\n}\n\nasync function shareAppConnectPage(\n  options: ShareAppConnectPageOptions\n): Promise<void> {\n  const { pageTitle } = options;\n  const url = window.location.href;\n  if (typeof navigator.share === 'function') {\n    try {\n      await navigator.share({ title: pageTitle, text: pageTitle, url });\n      return;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === 'AbortError') {\n        return;\n      }\n    }\n  }\n  if (typeof navigator.clipboard?.writeText === 'function') {\n    await navigator.clipboard.writeText(url);\n  }\n}\n\nexport interface ShareButtonProps {\n  pageTitle: string;\n}\n\nexport function ShareButton({ pageTitle }: ShareButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={styles.shareButton}\n      onClick={() => void shareAppConnectPage({ pageTitle })}\n    >\n      <ShareIcon className={styles.shareIcon} />\n      <span>Share</span>\n    </button>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst avatarOrange = themeVars.fill.brand.default;\nconst avatarTextColor = themeVars.text.primary.default;\n\nexport const styles = {\n  header: style({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: themeVars.space[300],\n    paddingBottom: themeVars.space[300],\n    borderBottomWidth: 1,\n    borderBottomStyle: 'solid',\n    borderBottomColor: themeVars.border.core.subtle.default,\n  }),\n  titleRow: style({\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n  }),\n  leftStack: style({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: themeVars.space[200],\n    minWidth: 0,\n    flex: 1,\n  }),\n  contextRow: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    fontSize: 14,\n    lineHeight: 1.35,\n    color: themeVars.text.core.subtle,\n    minWidth: 0,\n  }),\n  contextIcon: style({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    color: themeVars.text.core.subtle,\n  }),\n  contextPrefix: style({\n    flexShrink: 0,\n  }),\n  contextLink: style({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 4,\n    color: themeVars.fill.brand.default,\n    textDecoration: 'none',\n    fontWeight: 500,\n    selectors: {\n      '&:hover': {\n        textDecoration: 'underline',\n      },\n    },\n  }),\n  contextExternalIcon: style({\n    width: 14,\n    height: 14,\n    flexShrink: 0,\n  }),\n  titleCluster: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    width: 'max-content',\n    maxWidth: '100%',\n    minWidth: 0,\n  }),\n  title: style({\n    flex: '0 1 auto',\n    fontSize: 20,\n    fontWeight: 600,\n    margin: 0,\n    color: themeVars.text.core.default,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  userTrigger: style({\n    appearance: 'none',\n    WebkitAppearance: 'none',\n    margin: 0,\n    font: 'inherit',\n    lineHeight: 1,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    padding: `6px ${themeVars.space[300]} 6px 6px`,\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.default,\n    borderRadius: 999,\n    transition: 'background-color 120ms ease, border-color 120ms ease',\n    selectors: {\n      '&:hover': {\n        backgroundColor: '#f7f7f7',\n      },\n      '&[data-popup-open]': {\n        backgroundColor: '#f7f7f7',\n      },\n    },\n  }),\n  triggerName: style({\n    fontWeight: 500,\n    fontSize: 14,\n  }),\n  chevron: style({\n    width: 14,\n    height: 14,\n    color: themeVars.text.core.subtle,\n    transition: 'transform 150ms ease',\n    selectors: {\n      '[data-popup-open] &': {\n        transform: 'rotate(180deg)',\n      },\n    },\n  }),\n  avatar: style({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: avatarOrange,\n    color: avatarTextColor,\n    fontWeight: 600,\n    flexShrink: 0,\n    borderRadius: '50%',\n    userSelect: 'none',\n  }),\n  avatarSm: style({\n    width: 28,\n    height: 28,\n    fontSize: 11,\n  }),\n  avatarLg: style({\n    width: 40,\n    height: 40,\n    fontSize: 14,\n  }),\n  popup: style({\n    minWidth: 240,\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    borderRadius: themeVars.borderRadius[300],\n    boxShadow:\n      '0 6px 16px rgba(17, 17, 17, 0.08), 0 2px 6px rgba(17, 17, 17, 0.04)',\n    padding: `${themeVars.space[200]} 0`,\n    outline: 'none',\n    transformOrigin: 'top right',\n    opacity: 0,\n    transform: 'scale(0.96)',\n    transition: 'opacity 120ms ease, transform 120ms ease',\n    selectors: {\n      '&[data-starting-style]': {\n        opacity: 0,\n        transform: 'scale(0.96)',\n      },\n      '&[data-open]': {\n        opacity: 1,\n        transform: 'scale(1)',\n      },\n    },\n  }),\n  userInfo: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[300],\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n  }),\n  userInfoText: style({\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  }),\n  userInfoName: style({\n    fontWeight: 600,\n    fontSize: 14,\n    color: themeVars.text.core.default,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n  userInfoEmail: style({\n    fontSize: 13,\n    color: themeVars.text.core.subtle,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n  separator: style({\n    height: 1,\n    margin: `${themeVars.space[200]} 0`,\n    backgroundColor: themeVars.border.core.subtle.default,\n    border: 'none',\n  }),\n  disconnectItem: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n    color: themeVars.text.alert.default,\n    fontSize: 14,\n    fontWeight: 500,\n    cursor: 'pointer',\n    outline: 'none',\n    userSelect: 'none',\n    selectors: {\n      '&[data-highlighted]': {\n        backgroundColor: themeVars.fill.accent.red.subtle.default,\n      },\n    },\n  }),\n  disconnectIcon: style({\n    width: 16,\n    height: 16,\n  }),\n} as const;\n","import { Menu } from '@base-ui/react/menu';\n\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { ConnectButton } from '../ConnectButton/ConnectButton.tsx';\nimport { ChevronDownIcon } from '../icons/ChevronDownIcon.tsx';\nimport { ExternalLinkIcon } from '../icons/ExternalLinkIcon.tsx';\nimport { HubSpotDataSourceIcon } from '../icons/HubSpotDataSourceIcon.tsx';\nimport { LogoutIcon } from '../icons/LogoutIcon.tsx';\nimport { ShareButton } from '../ShareButton/ShareButton.tsx';\nimport { styles } from './AppConnectHeader.css.ts';\n\ninterface FakeUser {\n  firstName: string;\n  lastName: string;\n  email: string;\n}\n\nconst FAKE_USER: FakeUser = {\n  firstName: 'Gabby',\n  lastName: 'Martinez',\n  email: 'gabby.martinez@acmecorp.com',\n};\n\nfunction getUserInitials(user: FakeUser): string {\n  const first = user.firstName.charAt(0).toUpperCase();\n  const last = user.lastName.charAt(0).toUpperCase();\n  return `${first}${last}`;\n}\n\nfunction getFullName(user: FakeUser): string {\n  return `${user.firstName} ${user.lastName}`;\n}\n\ninterface AppConnectHeaderProps {\n  title: string;\n}\n\nexport function AppConnectHeader({ title }: AppConnectHeaderProps) {\n  const { status } = useHubSpotAppConnect();\n  return (\n    <header className={styles.header}>\n      <div className={styles.titleRow}>\n        <div className={styles.leftStack}>\n          <div className={styles.titleCluster}>\n            <h1 className={styles.title}>{title}</h1>\n            <ShareButton pageTitle={title} />\n          </div>\n          {status === 'connected' ? <ViewingHubSpotContextRow /> : null}\n        </div>\n      </div>\n      {status === 'connected' ? (\n        <UserMenu />\n      ) : (\n        <ConnectButton variant=\"secondary\" />\n      )}\n    </header>\n  );\n}\n\nfunction ViewingHubSpotContextRow() {\n  return (\n    <div className={styles.contextRow}>\n      <HubSpotDataSourceIcon className={styles.contextIcon} />\n      <span className={styles.contextPrefix}>Viewing HubSpot data from </span>\n      <a\n        className={styles.contextLink}\n        href=\"#\"\n        onClick={(event) => {\n          event.preventDefault();\n        }}\n      >\n        Acme Corp · HubSpot\n        <ExternalLinkIcon className={styles.contextExternalIcon} />\n      </a>\n    </div>\n  );\n}\n\nfunction UserMenu() {\n  const { disconnectFromHubSpot } = useHubSpotAppConnect();\n  const initials = getUserInitials(FAKE_USER);\n  const fullName = getFullName(FAKE_USER);\n\n  return (\n    <Menu.Root modal={false}>\n      <Menu.Trigger className={styles.userTrigger}>\n        <span\n          className={`${styles.avatar} ${styles.avatarSm}`}\n          aria-hidden=\"true\"\n        >\n          {initials}\n        </span>\n        <span className={styles.triggerName}>{fullName}</span>\n        <ChevronDownIcon className={styles.chevron} />\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner sideOffset={8} align=\"end\">\n          <Menu.Popup className={styles.popup}>\n            <div className={styles.userInfo}>\n              <span\n                className={`${styles.avatar} ${styles.avatarLg}`}\n                aria-hidden=\"true\"\n              >\n                {initials}\n              </span>\n              <div className={styles.userInfoText}>\n                <span className={styles.userInfoName}>{fullName}</span>\n                <span className={styles.userInfoEmail}>{FAKE_USER.email}</span>\n              </div>\n            </div>\n            <Menu.Separator className={styles.separator} />\n            <Menu.Item\n              className={styles.disconnectItem}\n              onClick={() => void disconnectFromHubSpot()}\n            >\n              <LogoutIcon className={styles.disconnectIcon} />\n              Disconnect\n            </Menu.Item>\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const styles = {\n  card: style({\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.default,\n    borderRadius: themeVars.borderRadius[400],\n    padding: themeVars.space[500],\n    textAlign: 'center',\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n  }),\n  message: style({\n    marginTop: 0,\n    marginBottom: themeVars.space[400],\n  }),\n  errorText: style({\n    marginTop: themeVars.space[300],\n    marginBottom: 0,\n    color: themeVars.text.alert.default,\n  }),\n} as const;\n","import type { ReactNode } from 'react';\n\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { ConnectButton } from '../ConnectButton/ConnectButton.tsx';\nimport { styles } from './DisconnectedBody.css.ts';\n\ninterface DisconnectedBodyProps {\n  message: ReactNode;\n}\n\nexport function DisconnectedBody({ message }: DisconnectedBodyProps) {\n  const { error } = useHubSpotAppConnect();\n\n  return (\n    <div className={styles.card}>\n      <p className={styles.message}>{message}</p>\n      <ConnectButton size=\"lg\" />\n      {error && (\n        <p className={styles.errorText}>\n          Failed to connect to HubSpot. {error}\n        </p>\n      )}\n    </div>\n  );\n}\n","import { keyframes, style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst spin = keyframes({\n  from: { transform: 'rotate(0deg)' },\n  to: { transform: 'rotate(360deg)' },\n});\n\nexport const styles = {\n  wrapper: style({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 200,\n    padding: themeVars.space[600],\n  }),\n  spinner: style({\n    width: 40,\n    height: 40,\n    borderWidth: 3,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    borderTopColor: themeVars.fill.primary.default,\n    borderRadius: '50%',\n    animation: `${spin} 0.8s linear infinite`,\n  }),\n} as const;\n","import { styles } from './LoadingIndicator.css.ts';\n\nexport function LoadingIndicator() {\n  return (\n    <div className={styles.wrapper} role=\"status\" aria-label=\"Loading\">\n      <div className={styles.spinner} />\n    </div>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const styles = {\n  shell: style({\n    width: '100%',\n    padding: `${themeVars.space[400]} ${themeVars.space[500]}`,\n  }),\n  content: style({\n    marginTop: themeVars.space[500],\n  }),\n  connectedErrorBanner: style({\n    backgroundColor: themeVars.fill.alert.subtle,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.alert.default,\n    borderRadius: themeVars.borderRadius[300],\n    padding: themeVars.space[300],\n    marginBottom: themeVars.space[300],\n    color: themeVars.text.alert.default,\n  }),\n} as const;\n","import { useEffect, type ReactNode } from 'react';\n\nimport { themeClass } from '../../../theme.css.ts';\nimport type { AppConnectController } from '../../../types.ts';\nimport { HubSpotAppConnectControllerContext } from '../../context.ts';\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { AppConnectHeader } from '../AppConnectHeader/AppConnectHeader.tsx';\nimport { DisconnectedBody } from '../DisconnectedBody/DisconnectedBody.tsx';\nimport { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.tsx';\nimport { styles } from './HubSpotAppConnect.css.ts';\n\n/**\n * Props accepted by {@link HubSpotAppConnect}.\n */\nexport interface HubSpotAppConnectProps {\n  /** Title text rendered in the standard SDK header. */\n  title: string;\n  /** Controller produced by `createAppConnectController`. */\n  controller: AppConnectController;\n  /** Content rendered when the controller is in the `connected` state. */\n  connected: ReactNode;\n  /**\n   * Description text rendered inside the SDK-owned disconnected card,\n   * above the primary \"Connect to HubSpot\" button.\n   */\n  disconnectedMessage: ReactNode;\n}\n\n/**\n * Layout component that exposes `controller` to {@link useHubSpotAppConnect},\n * starts it once on mount, and renders a standard header plus the content\n * slot that matches the current connection status.\n */\nexport function HubSpotAppConnect({\n  title,\n  controller,\n  connected,\n  disconnectedMessage,\n}: HubSpotAppConnectProps) {\n  useEffect(() => {\n    controller.start();\n  }, [controller]);\n  useEffect(() => {\n    document.documentElement.classList.add(themeClass);\n    return () => {\n      document.documentElement.classList.remove(themeClass);\n    };\n  }, []);\n  return (\n    <HubSpotAppConnectControllerContext.Provider value={controller}>\n      <div className={styles.shell}>\n        <AppConnectHeader title={title} />\n        <div className={styles.content}>\n          <HubSpotAppConnectContent\n            connected={connected}\n            disconnectedMessage={disconnectedMessage}\n          />\n        </div>\n      </div>\n    </HubSpotAppConnectControllerContext.Provider>\n  );\n}\n\ninterface HubSpotAppConnectContentProps {\n  connected: ReactNode;\n  disconnectedMessage: ReactNode;\n}\n\nfunction HubSpotAppConnectContent({\n  connected,\n  disconnectedMessage,\n}: HubSpotAppConnectContentProps) {\n  const { status, error } = useHubSpotAppConnect();\n  if (status === 'initializing') {\n    return <LoadingIndicator />;\n  }\n  if (status === 'connected') {\n    return (\n      <>\n        {error ? (\n          <div className={styles.connectedErrorBanner} role=\"alert\">\n            {error}\n          </div>\n        ) : null}\n        {connected}\n      </>\n    );\n  }\n  return <DisconnectedBody message={disconnectedMessage} />;\n}\n"],"mappings":"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"}