@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/components/AppTopBar.d.ts

@@ -1,5 +1,6 @@
-import { Toolbar, ToolbarButtonProps, ToolbarGroupProps } from "./Toolbar.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "./Toolbar.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/AppTopBar.d.ts
 interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
@@ -7,7 +8,7 @@ interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolb
   "aria-label": string;
 }
 interface AppTopBarGroupProps extends ToolbarGroupProps {}
-interface AppTopBarTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AppTopBarTitleProps extends useRender.ComponentProps<"div"> {}
 interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
   ref?: React.Ref<HTMLButtonElement>;
   /** Accessible name and default tooltip text for the icon-only control. */
@@ -15,6 +16,13 @@ interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
   /** Tooltip text when it should differ from the accessible name. */
   tooltip?: React.ReactNode;
 }
+interface AppTopBarLinkProps extends Omit<ToolbarLinkProps, "aria-label"> {
+  ref?: React.Ref<HTMLAnchorElement>;
+  /** Accessible name and default tooltip text for the icon-only link. */
+  label: string;
+  /** Tooltip text when it should differ from the accessible name. */
+  tooltip?: React.ReactNode;
+}
 interface AppTopBarControlProps extends ToolbarButtonProps {
   ref?: React.Ref<HTMLButtonElement>;
 }
@@ -33,11 +41,10 @@ declare function AppTopBarLeading({
 }: AppTopBarGroupProps): React.JSX.Element;
 declare function AppTopBarTitle({
   className,
+  render,
   ref,
   ...props
-}: AppTopBarTitleProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: AppTopBarTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function AppTopBarTrailing({
   className,
   ...props
@@ -55,12 +62,21 @@ declare function AppTopBarButton({
   tooltip,
   ...props
 }: AppTopBarButtonProps): React.JSX.Element;
+declare function AppTopBarLink({
+  children,
+  className,
+  label,
+  render,
+  tooltip,
+  ...props
+}: AppTopBarLinkProps): React.JSX.Element;
 /**
  * Composable application top bar with stable leading, title, and trailing
  * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
  * behavior; their fixed slots do not resize when state icons change. Render an
  * existing behavior-rich button through `Control` to retain those toolbar
- * semantics without rebuilding the control.
+ * semantics without rebuilding the control. Use `Link` for navigation so an
+ * `href` or router-provided link keeps native link semantics.
  */
 declare const AppTopBar: {
   Root: typeof AppTopBarRoot;
@@ -69,6 +85,7 @@ declare const AppTopBar: {
   Trailing: typeof AppTopBarTrailing;
   Control: typeof AppTopBarControl;
   Button: typeof AppTopBarButton;
+  Link: typeof AppTopBarLink;
 };
 //#endregion
-export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarRootProps, AppTopBarTitleProps };
+export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarLinkProps, AppTopBarRootProps, AppTopBarTitleProps };

package/dist/components/AppTopBar.js

@@ -1,9 +1,10 @@
-import { n as mergeBaseClassName, t as cx } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Toolbar } from "./Toolbar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/AppTopBar.tsx
 /**
 * Stable application-level toolbar with composable leading, title, and trailing
@@ -22,11 +23,16 @@ function AppTopBarLeading({ className, ...props }) {
 		...props
 	});
 }
-function AppTopBarTitle({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function AppTopBarTitle({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		className: cx("app-top-bar__title", className),
-		...props
+		props: {
+			...props,
+			"data-slot": "app-top-bar-title",
+			className: cx("app-top-bar__title", className)
+		}
 	});
 }
 function AppTopBarTrailing({ className, ...props }) {
@@ -50,7 +56,8 @@ function AppTopBarButton({ children, className, disabled, label, render, tooltip
 				type: "button",
 				variant: "ghost",
 				color: "neutral",
-				size: "icon-sm",
+				size: "sm",
+				iconOnly: true,
 				disabled
 			}),
 			disabled,
@@ -63,12 +70,28 @@ function AppTopBarButton({ children, className, disabled, label, render, tooltip
 		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
 	}) })] });
 }
+function AppTopBarLink({ children, className, label, render, tooltip = label, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render: /* @__PURE__ */ jsx(Toolbar.Link, {
+			className: mergeBaseClassName("app-top-bar__button", className),
+			"aria-label": label,
+			render,
+			...props
+		}),
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "bottom",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
+	}) })] });
+}
 /**
 * Composable application top bar with stable leading, title, and trailing
 * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
 * behavior; their fixed slots do not resize when state icons change. Render an
 * existing behavior-rich button through `Control` to retain those toolbar
-* semantics without rebuilding the control.
+* semantics without rebuilding the control. Use `Link` for navigation so an
+* `href` or router-provided link keeps native link semantics.
 */
 const AppTopBar = {
 	Root: AppTopBarRoot,
@@ -76,7 +99,8 @@ const AppTopBar = {
 	Title: AppTopBarTitle,
 	Trailing: AppTopBarTrailing,
 	Control: AppTopBarControl,
-	Button: AppTopBarButton
+	Button: AppTopBarButton,
+	Link: AppTopBarLink
 };
 //#endregion
 export { AppTopBar };

package/dist/components/Approval.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { P as PencilIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { R as PencilIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -192,7 +192,7 @@ function ApprovalDecision({ className, onDecision, onSkip, subject = "this actio
 					}),
 					onSkip ? /* @__PURE__ */ jsx(Button, {
 						type: "button",
-						size: "xs",
+						size: "sm",
 						variant: "ghost",
 						color: "neutral",
 						className: "approval__skip",
@@ -202,7 +202,7 @@ function ApprovalDecision({ className, onDecision, onSkip, subject = "this actio
 					}) : null,
 					/* @__PURE__ */ jsxs(Button, {
 						type: "button",
-						size: "xs",
+						size: "sm",
 						color: "primary",
 						className: "approval__submit",
 						disabled: busy,

package/dist/components/Artifact.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 
 //#region src/components/Artifact.d.ts

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { X as XIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import "react";
@@ -81,7 +81,8 @@ function ArtifactAction({ className, label, tooltip, icon, children, ...props })
 	const accessibleLabel = label ?? tooltip;
 	const button = /* @__PURE__ */ jsxs(Button, {
 		variant: "ghost",
-		size: "icon",
+		size: "sm",
+		iconOnly: true,
 		"aria-label": accessibleLabel,
 		className: cx("artifact__action", className),
 		...props,
@@ -96,7 +97,8 @@ function ArtifactAction({ className, label, tooltip, icon, children, ...props })
 function ArtifactClose({ className, label = "Close", children, ...props }) {
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
-		size: "icon",
+		size: "sm",
+		iconOnly: true,
 		"aria-label": label,
 		className: cx("artifact__close", className),
 		...props,

package/dist/components/Autocomplete.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";

package/dist/components/Avatar.d.ts

@@ -6,7 +6,7 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
  * Props for the Avatar.Root component.
  */
 interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Root> {
-  size?: "default" | "sm" | "lg";
+  size?: "sm" | "md" | "lg";
 }
 /**
  * Props for the Avatar.Image component.

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
@@ -16,7 +16,7 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 *
 * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
 */
-function AvatarRoot({ className, size = "default", ref, ...props }) {
+function AvatarRoot({ className, size = "md", ref, ...props }) {
 	const classes = mergeBaseClassName(["avatar"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		ref,

package/dist/components/Badge.js

@@ -43,6 +43,7 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
 	mergedProps.ref = mergeRefs(childProps.ref, badgeProps.ref);
 	mergedProps["data-slot"] = "badge";
 	mergedProps["data-variant"] = badgeProps["data-variant"];
+	mergedProps["data-size"] = badgeProps["data-size"];
 	return mergedProps;
 }
 /**
@@ -71,12 +72,14 @@ function Badge({ variant = "normal", color, size = "md", className, render, chil
 		className: classes,
 		"data-slot": "badge",
 		"data-variant": badgeVariant,
+		"data-size": size,
 		children
 	}));
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "badge",
 		"data-variant": badgeVariant,
+		"data-size": size,
 		className: classes,
 		...props,
 		children

package/dist/components/BrowserLiveView.js

@@ -1,7 +1,8 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { T as MaximizeIcon, V as SpinnerIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, O as MaximizeIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Dialog } from "./Dialog.js";
+import { TransitionSurface } from "./TransitionSurface.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -41,7 +42,15 @@ function EndedState({ title, detail }) {
 */
 function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, ...props }) {
 	const [expired, setExpired] = React.useState(() => receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
-	const [frameState, setFrameState] = React.useState("loading");
+	const [reportedFrameState, setReportedFrameState] = React.useState(() => ({
+		url: source.url,
+		value: "loading"
+	}));
+	if (reportedFrameState.url !== source.url) setReportedFrameState({
+		url: source.url,
+		value: "loading"
+	});
+	const frameState = reportedFrameState.url === source.url ? reportedFrameState.value : "loading";
 	React.useEffect(() => {
 		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
@@ -57,14 +66,15 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		source.targetId,
 		source.url
 	]);
-	React.useEffect(() => {
-		setFrameState("loading");
-	}, [source.url]);
 	React.useEffect(() => {
 		if (frameState !== "loading") return;
-		const timer = setTimeout(() => setFrameState("failed"), FRAME_LOAD_TIMEOUT_MS);
+		const url = source.url;
+		const timer = setTimeout(() => setReportedFrameState({
+			url,
+			value: "failed"
+		}), FRAME_LOAD_TIMEOUT_MS);
 		return () => clearTimeout(timer);
-	}, [frameState]);
+	}, [frameState, source.url]);
 	const failed = frameState === "failed";
 	const live = !expired && !failed;
 	const frameTitle = pageTitle ? `Live browser view — ${pageTitle}` : "Live browser view";
@@ -83,9 +93,12 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 			src: source.url,
 			title: frameTitle,
 			allow: "clipboard-read; clipboard-write",
-			onLoad: () => setFrameState("ready")
-		}),
-		frameState === "loading" ? /* @__PURE__ */ jsxs("div", {
+			onLoad: () => setReportedFrameState({
+				url: source.url,
+				value: "ready"
+			})
+		}, source.url),
+		frameState === "loading" ? /* @__PURE__ */ jsxs(TransitionSurface, {
 			className: "browser-live-view__state",
 			role: "status",
 			children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-live-view__state-spinner" }), "Connecting live view…"]
@@ -98,10 +111,12 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		...props,
 		className: cx("browser-live-view", className),
 		"data-expired": expired || failed || void 0,
+		"data-frame-state": frameState,
 		children: [view, /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			color: "neutral",
-			size: "icon-xs",
+			size: "sm",
+			iconOnly: true,
 			className: "browser-live-view__expand",
 			"aria-label": "Expand browser view",
 			children: /* @__PURE__ */ jsx(MaximizeIcon, {})

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { F as PlayIcon, N as PauseIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { L as PauseIcon, z as PlayIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Slider } from "./Slider.js";
 import * as React from "react";
@@ -154,7 +154,8 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					color: "neutral",
-					size: "icon-sm",
+					size: "sm",
+					iconOnly: true,
 					className: "browser-replay__toggle",
 					"aria-label": isPlaying ? "Pause replay" : "Play replay",
 					disabled,

package/dist/components/BrowserRunPanel.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { V as SpinnerIcon, X as XIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon, G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Tabs } from "./Tabs.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
@@ -76,11 +76,11 @@ function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error,
 			...props
 		}),
 		children: [
-			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx(Tabs.List, {
+			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsxs(Tabs.List, {
 				className: "browser-run-panel__tabs",
 				"aria-label": "Open browser pages",
 				activateOnFocus: true,
-				children: targets.map((candidate) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+				children: [targets.map((candidate) => /* @__PURE__ */ jsxs(Tabs.Tab, {
 					value: candidate.targetId,
 					className: "browser-run-panel__tab",
 					render: /* @__PURE__ */ jsx(Button, {
@@ -97,7 +97,7 @@ function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error,
 						className: "browser-run-panel__tab-title",
 						children: targetLabel(candidate)
 					})]
-				}, candidate.targetId))
+				}, candidate.targetId)), /* @__PURE__ */ jsx(Tabs.Indicator, {})]
 			}) }) : null,
 			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
 				className: "browser-run-panel__address-bar",

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-FX_hpqxm.js";
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-DLGzHsjc.js";
 export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -1,13 +1,13 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/Button.tsx
-function buttonVariants({ variant = "normal", color = "primary", size = "md", className } = {}) {
+function buttonVariants({ variant = "normal", color = "primary", size = "sm", className } = {}) {
 	return [
 		"button",
 		`button--${variant ?? "normal"}`,
 		`button--${color ?? "primary"}`,
-		`button--${size ?? "md"}`,
+		`button--${size ?? "sm"}`,
 		className
 	].filter(Boolean).join(" ");
 }
@@ -24,21 +24,24 @@ function buttonVariants({ variant = "normal", color = "primary", size = "md", cl
 * <Button color="primary">Save changes</Button>
 * <Button color="destructive">Delete account</Button>
 * <Button variant="outline">Cancel</Button>
-* <Button variant="ghost" size="icon"><SearchIcon /></Button>
+* <Button variant="ghost" size="sm" iconOnly aria-label="Search"><SearchIcon /></Button>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
 */
-function Button({ variant = "normal", color = "primary", size = "md", className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, nativeButton, ref, ...props }) {
+	const classes = mergeBaseClassName(buttonVariants({
+		variant,
+		color,
+		size
+	}), className);
+	const resolvedNativeButton = nativeButton ?? props.render == null;
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
 		"data-slot": "button",
-		className: mergeBaseClassName(buttonVariants({
-			variant,
-			color,
-			size
-		}), className),
-		nativeButton: nativeButton ?? props.render == null,
+		"data-icon-only": iconOnly ? "" : void 0,
+		className: classes,
+		nativeButton: resolvedNativeButton,
 		...props
 	});
 }

package/dist/components/Card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/Card.d.ts
 /**
@@ -14,8 +15,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: "default" | "sm";
 }
 interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardTitleProps extends useRender.ComponentProps<"div"> {}
+interface CardDescriptionProps extends useRender.ComponentProps<"div"> {}
 interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -53,18 +54,16 @@ declare function CardHeader({
 }): React.JSX.Element;
 declare function CardTitle({
   className,
+  render,
   ref,
   ...props
-}: CardTitleProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardDescription({
   className,
+  render,
   ref,
   ...props
-}: CardDescriptionProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: CardDescriptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardAction({
   className,
   ref,

package/dist/components/Card.js

@@ -1,5 +1,6 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
 /**
 * A container component that provides consistent styling and elevation.
@@ -38,20 +39,28 @@ function CardHeader({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function CardTitle({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardTitle({ className = "", render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-title",
-		className: ["card__title", className].filter(Boolean).join(" "),
-		...props
+		props: {
+			...props,
+			"data-slot": "card-title",
+			className: ["card__title", className].filter(Boolean).join(" ")
+		}
 	});
 }
-function CardDescription({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardDescription({ className = "", render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-description",
-		className: ["card__description", className].filter(Boolean).join(" "),
-		...props
+		props: {
+			...props,
+			"data-slot": "card-description",
+			className: ["card__description", className].filter(Boolean).join(" ")
+		}
 	});
 }
 function CardAction({ className = "", ref, ...props }) {

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { C as IconProps } from "../icons-DpUqY8Mp.js";
+import { E as IconProps } from "../icons-CYXmvKlJ.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { V as SpinnerIcon, m as DotIcon, s as CheckIcon, u as ChevronRightIcon } from "../icons--FqCZEc3.js";
+import { G as SpinnerIcon, f as ChevronRightIcon, g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { V as SpinnerIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-BNrZlY_Y.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-Cqw_qrUG.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx
@@ -16,9 +16,6 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 		onPointerLeave?.(event);
 		delete event.currentTarget.dataset.pointerActive;
 	};
-	const handleButtonPointerMove = (event) => {
-		setPointerPosition(event.currentTarget, event, "chatgpt-sign-in-button");
-	};
 	return /* @__PURE__ */ jsx("main", {
 		ref,
 		className: cx("chatgpt-sign-in", className),
@@ -42,12 +39,12 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 				type: "button",
 				variant: "normal",
 				color: error ? "destructive" : "primary",
-				size: "lg",
+				size: "sm",
 				className: "chatgpt-sign-in__button",
 				"data-busy": busy ? "true" : void 0,
 				disabled: busy,
 				onClick: onSignIn,
-				onPointerMove: handleButtonPointerMove,
+				onPointerMove: handleSignInButtonPointerMove,
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "chatgpt-sign-in__button-icon",
 					children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 16 }) : /* @__PURE__ */ jsx(ModelSelectorLogo, {
@@ -62,6 +59,9 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 		})
 	});
 }
+function handleSignInButtonPointerMove(event) {
+	setPointerPosition(event.currentTarget, event, "chatgpt-sign-in-button");
+}
 function setPointerPosition(element, event, name) {
 	const rect = element.getBoundingClientRect();
 	if (rect.width === 0 || rect.height === 0) return;

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
-import { s as CheckIcon } from "../icons--FqCZEc3.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";

package/dist/components/CheckboxGroup.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";

package/dist/components/Checkpoint.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { a as BookmarkIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { o as BookmarkIcon } from "../icons-CQJ-aMnI.js";
 import { Marker, MarkerIcon } from "./Marker.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/CodeBlock.d.ts

@@ -1,2 +1,2 @@
-import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-Dnpr88ZQ.js";
+import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-gV4kZeCI.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockActionsProps, CodeBlockContainer, CodeBlockContainerProps, CodeBlockContent, CodeBlockContentProps, CodeBlockCopyButton, CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockFilenameProps, CodeBlockHeader, CodeBlockHeaderProps, type CodeBlockLanguage, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorItemProps, CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, CodeBlockLanguageSelectorValueProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps, TokenizedCode, highlightCode };