@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/Approval.js

@@ -0,0 +1,227 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { P as PencilIcon } from "../icons--FqCZEc3.js";
+import { Button } from "./Button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Approval.tsx
+/** Presentation-only frame for a human approval request. */
+function Approval({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"data-slot": "approval",
+		className: cx("approval", className),
+		...props
+	});
+}
+/** Question and optional queue position for an approval request. */
+function ApprovalHeader({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "approval-header",
+		className: cx("approval__header", className),
+		...props
+	});
+}
+/** The request phrased as a human-readable question. */
+function ApprovalQuestion({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "approval-question",
+		className: cx("approval__question", className),
+		...props
+	});
+}
+/** Position of the current request in an app-owned approval queue. */
+function ApprovalCount({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "approval-count",
+		className: cx("approval__count", className),
+		...props
+	});
+}
+/** Bounded, read-only preview of the operation being authorized. */
+function ApprovalPreview({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "approval-preview",
+		className: cx("approval__preview", className),
+		...props
+	});
+}
+/** One labelled value in an approval preview. */
+function ApprovalPreviewRow({ children, className, label, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "approval-preview-row",
+		className: cx("approval__preview-row", className),
+		...props,
+		children: [
+			label !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "approval__preview-key",
+				children: label
+			}) : null,
+			label !== void 0 && children !== void 0 ? " " : null,
+			children
+		]
+	});
+}
+function formatApprovalValue(value) {
+	if (typeof value === "string") return value;
+	return JSON.stringify(value) ?? String(value);
+}
+/** Renders unknown upstream input without changing or normalizing its shape. */
+function ApprovalInputPreview({ input }) {
+	const entries = input && typeof input === "object" && !Array.isArray(input) ? Object.entries(input) : void 0;
+	return /* @__PURE__ */ jsx(ApprovalPreview, { children: entries ? entries.map(([key, value]) => /* @__PURE__ */ jsx(ApprovalPreviewRow, {
+		label: key,
+		children: formatApprovalValue(value)
+	}, key)) : /* @__PURE__ */ jsx(ApprovalPreviewRow, { children: formatApprovalValue(input) }) });
+}
+function getErrorMessage(error) {
+	if (error instanceof Error && error.message.trim()) return error.message;
+	return "The approval could not be submitted. Try again.";
+}
+/**
+* Keyboard-operable approve/deny controls shared by inline and durable adapters.
+* Arrow keys move between approve and deny, `1` returns to approve, and Enter
+* in the reason field submits a denial. Async failures stay visible and are
+* announced politely without coupling this presentation to a transport.
+*/
+function ApprovalDecision({ className, onDecision, onSkip, subject = "this action", ref, ...props }) {
+	const [selected, setSelected] = React.useState("approve");
+	const [reason, setReason] = React.useState("");
+	const [busy, setBusy] = React.useState(false);
+	const [errorMessage, setErrorMessage] = React.useState("");
+	const busyRef = React.useRef(false);
+	const approveRef = React.useRef(null);
+	const reasonRef = React.useRef(null);
+	const reasonId = React.useId();
+	const respond = async (approved) => {
+		if (busyRef.current) return;
+		busyRef.current = true;
+		setBusy(true);
+		setErrorMessage("");
+		const trimmed = reason.trim();
+		try {
+			await onDecision({
+				approved,
+				reason: !approved && trimmed ? trimmed : void 0
+			});
+		} catch (error) {
+			setErrorMessage(getErrorMessage(error));
+		} finally {
+			busyRef.current = false;
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "approval-options",
+		className: cx("approval__options", className),
+		"aria-busy": busy || void 0,
+		onKeyDown: (event) => {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				(selected === "approve" ? reasonRef : approveRef).current?.focus();
+			} else if (event.key === "1" && event.target !== reasonRef.current) approveRef.current?.focus();
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Button, {
+				ref: approveRef,
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				color: "neutral",
+				className: "approval__option",
+				"data-selected": selected === "approve" || void 0,
+				disabled: busy,
+				onClick: () => void respond(true),
+				onFocus: () => setSelected("approve"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "approval__key",
+						children: "1"
+					}),
+					"Yes, approve",
+					/* @__PURE__ */ jsx("span", {
+						className: "approval__arrows",
+						"aria-hidden": "true",
+						children: "↑↓"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "approval__option approval__deny",
+				"data-selected": selected === "deny" || void 0,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "approval__key",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(PencilIcon, { size: 11 })
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "approval__deny-label",
+						htmlFor: reasonId,
+						children: ["No, deny", /* @__PURE__ */ jsxs("span", {
+							className: "sigvelo-visually-hidden",
+							children: [" ", subject]
+						})]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: reasonId,
+						ref: reasonRef,
+						type: "text",
+						className: "approval__reason",
+						placeholder: "Tell the agent what to do differently",
+						value: reason,
+						disabled: busy,
+						onFocus: () => setSelected("deny"),
+						onChange: (event) => {
+							setSelected("deny");
+							setReason(event.currentTarget.value);
+						},
+						onKeyDown: (event) => {
+							if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+								event.preventDefault();
+								respond(false);
+							}
+						}
+					}),
+					onSkip ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "xs",
+						variant: "ghost",
+						color: "neutral",
+						className: "approval__skip",
+						disabled: busy,
+						onClick: onSkip,
+						children: "Skip"
+					}) : null,
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						size: "xs",
+						color: "primary",
+						className: "approval__submit",
+						disabled: busy,
+						onClick: () => void respond(selected === "approve"),
+						children: [busy ? "Submitting…" : selected === "approve" ? "Approve" : "Submit denial", !busy ? /* @__PURE__ */ jsx("kbd", {
+							className: "approval__kbd",
+							children: "⏎"
+						}) : null]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cx("approval__status", !errorMessage && "sigvelo-visually-hidden"),
+				role: "status",
+				"aria-atomic": "true",
+				children: errorMessage || (busy ? "Submitting approval" : "")
+			})
+		]
+	});
+}
+//#endregion
+export { Approval, ApprovalCount, ApprovalDecision, ApprovalHeader, ApprovalInputPreview, ApprovalPreview, ApprovalPreviewRow, ApprovalQuestion, formatApprovalValue };

package/dist/components/Artifact.d.ts

@@ -83,8 +83,7 @@ declare function ArtifactActions({
 }: ArtifactActionsProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ArtifactActionProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className"> {
-  className?: string;
+interface ArtifactActionProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color"> {
   /** Accessible label for the button. */
   label?: string;
   /** Tooltip text shown on hover. Defaults to label. */
@@ -103,8 +102,7 @@ declare function ArtifactAction({
   children,
   ...props
 }: ArtifactActionProps): React.JSX.Element;
-interface ArtifactCloseProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className"> {
-  className?: string;
+interface ArtifactCloseProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color"> {
   /** Accessible label for the close button. */
   label?: string;
   children?: React.ReactNode;

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Y as XIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { X as XIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import "react";
@@ -86,7 +86,7 @@ function ArtifactAction({ className, label, tooltip, icon, children, ...props })
 		className: cx("artifact__action", className),
 		...props,
 		children: [Icon ? /* @__PURE__ */ jsx(Icon, {}) : icon ?? children, accessibleLabel ? /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
+			className: "sigvelo-visually-hidden",
 			children: accessibleLabel
 		}) : null]
 	});

package/dist/components/Autocomplete.d.ts

@@ -6,99 +6,77 @@ declare function Input({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Input>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Input> & {
   ref?: React.Ref<HTMLInputElement>;
 }): React.JSX.Element;
 declare function Trigger({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Trigger>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Trigger> & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 declare function Clear({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Clear>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Clear> & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 declare function Positioner({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Positioner>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Positioner> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function Popup({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Popup>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Popup> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function List({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.List>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.List> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function Item({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Item>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Item> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function Empty({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Empty>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Empty> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function Status({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Status>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Status> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function Group({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Group>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.Group> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function GroupLabel({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.GroupLabel>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Autocomplete$1.GroupLabel> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**

package/dist/components/Autocomplete.js

@@ -1,9 +1,10 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/components/Autocomplete.tsx
-function Input({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__input", className].filter(Boolean).join(" ");
+function Input({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__input"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
 		ref,
 		"data-slot": "autocomplete-input",
@@ -11,8 +12,8 @@ function Input({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Trigger({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__trigger", className].filter(Boolean).join(" ");
+function Trigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Trigger, {
 		ref,
 		"data-slot": "autocomplete-trigger",
@@ -20,8 +21,8 @@ function Trigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Clear({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__clear", className].filter(Boolean).join(" ");
+function Clear({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__clear"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Clear, {
 		ref,
 		"data-slot": "autocomplete-clear",
@@ -29,12 +30,8 @@ function Clear({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Positioner({ className = "", ref, ...props }) {
-	const classes = [
-		"autocomplete__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function Positioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 		ref,
 		"data-slot": "autocomplete-positioner",
@@ -42,12 +39,8 @@ function Positioner({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Popup({ className = "", ref, ...props }) {
-	const classes = [
-		"autocomplete__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function Popup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 		ref,
 		"data-slot": "autocomplete-content",
@@ -55,8 +48,8 @@ function Popup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function List({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__list", className].filter(Boolean).join(" ");
+function List({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__list"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.List, {
 		ref,
 		"data-slot": "autocomplete-list",
@@ -64,8 +57,8 @@ function List({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Item({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__item", className].filter(Boolean).join(" ");
+function Item({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
 		ref,
 		"data-slot": "autocomplete-item",
@@ -73,8 +66,8 @@ function Item({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Empty({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__empty", className].filter(Boolean).join(" ");
+function Empty({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__empty"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Empty, {
 		ref,
 		"data-slot": "autocomplete-empty",
@@ -82,8 +75,8 @@ function Empty({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Status({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__status", className].filter(Boolean).join(" ");
+function Status({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__status"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Status, {
 		ref,
 		"data-slot": "autocomplete-status",
@@ -91,8 +84,8 @@ function Status({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Group({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__group", className].filter(Boolean).join(" ");
+function Group({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.Group, {
 		ref,
 		"data-slot": "autocomplete-group",
@@ -100,8 +93,8 @@ function Group({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function GroupLabel({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__group-label", className].filter(Boolean).join(" ");
+function GroupLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["autocomplete__group-label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Autocomplete$1.GroupLabel, {
 		ref,
 		"data-slot": "autocomplete-group-label",

package/dist/components/Avatar.d.ts

@@ -5,25 +5,17 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 /**
  * Props for the Avatar.Root component.
  */
-interface AvatarRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Root> {
   size?: "default" | "sm" | "lg";
 }
 /**
  * Props for the Avatar.Image component.
  */
-interface AvatarImageProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Image>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Image> {}
 /**
  * Props for the Avatar.Fallback component.
  */
-interface AvatarFallbackProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Fallback>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Fallback> {}
 interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AvatarGroupCountProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {}

package/dist/components/Avatar.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
@@ -15,8 +16,8 @@ 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 }) {
-	const classes = ["avatar", className].filter(Boolean).join(" ");
+function AvatarRoot({ className, size = "default", ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		ref,
 		"data-slot": "avatar",
@@ -28,8 +29,8 @@ function AvatarRoot({ className = "", size = "default", ref, ...props }) {
 /**
 * Displays the avatar image. Renders an `<img>` element.
 */
-function AvatarImage({ className = "", ref, ...props }) {
-	const classes = ["avatar__image", className].filter(Boolean).join(" ");
+function AvatarImage({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar__image"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
 		ref,
 		"data-slot": "avatar-image",
@@ -41,8 +42,8 @@ function AvatarImage({ className = "", ref, ...props }) {
 * Displays when the image fails to load or isn't provided.
 * Typically contains initials or an icon. Renders a `<span>` element.
 */
-function AvatarFallback({ className = "", ref, ...props }) {
-	const classes = ["avatar__fallback", className].filter(Boolean).join(" ");
+function AvatarFallback({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar__fallback"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		ref,
 		"data-slot": "avatar-fallback",
@@ -50,27 +51,27 @@ function AvatarFallback({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AvatarGroup({ className = "", ref, ...props }) {
+function AvatarGroup({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "avatar-group",
-		className: ["avatar-group", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar-group"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AvatarGroupCount({ className = "", ref, ...props }) {
+function AvatarGroupCount({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "avatar-group-count",
-		className: ["avatar-group__count", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar-group__count"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AvatarBadge({ className = "", ref, ...props }) {
+function AvatarBadge({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "avatar-badge",
-		className: ["avatar__badge", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar__badge"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/BrowserLiveView.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, w as MaximizeIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { T as MaximizeIcon, V as SpinnerIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { Badge } from "./Badge.js";

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as PauseIcon, P as PlayIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { F as PlayIcon, N as PauseIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Slider } from "./Slider.js";
 import * as React from "react";