@mcp-b/react-components 0.20.1 → 0.20.4

package/dist/components/Popover.js

@@ -1,14 +1,11 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { buttonVariants } from "./Button.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/Popover.tsx
 const PopoverAnchorContext = React.createContext(null);
-function setRefs(node, ...refs) {
-	for (const ref of refs) if (typeof ref === "function") ref(node);
-	else if (ref) ref.current = node;
-}
 /**
 * Controls the popover's open state and manages triggers.
 *
@@ -41,10 +38,11 @@ const PopoverRoot = (props) => {
 };
 function PopoverAnchor({ className, ref, ...props }) {
 	const anchorRef = React.useContext(PopoverAnchorContext);
+	const classes = mergeBaseClassName("popover__anchor", className);
 	return /* @__PURE__ */ jsx("div", {
-		ref: (node) => setRefs(node, anchorRef, ref),
+		ref: mergeRefs(anchorRef ?? void 0, ref),
 		"data-slot": "popover-anchor",
-		className: mergeBaseClassName(["popover__anchor"].filter(Boolean).join(" "), className),
+		className: classes,
 		...props
 	});
 }
@@ -72,7 +70,7 @@ const PopoverPortal = (props) => {
 * Optional backdrop that appears behind the popover.
 */
 function PopoverBackdrop({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__backdrop base-ui-backdrop", className);
 	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
 		ref,
 		"data-slot": "popover-backdrop",
@@ -93,7 +91,7 @@ function PopoverBackdrop({ className, ref, ...props }) {
 */
 function PopoverPositioner({ className, anchor, ref, ...props }) {
 	const anchorRef = React.useContext(PopoverAnchorContext);
-	const classes = mergeBaseClassName(["popover__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__positioner base-ui-positioner", className);
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		ref,
 		anchor: anchor ?? anchorRef ?? void 0,
@@ -105,7 +103,7 @@ function PopoverPositioner({ className, anchor, ref, ...props }) {
 * The popup container that holds the popover content.
 */
 function PopoverPopup({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__popup base-ui-popup", className);
 	return /* @__PURE__ */ jsx(Popover$1.Popup, {
 		ref,
 		"data-slot": "popover-content",
@@ -119,7 +117,7 @@ function PopoverPopup({ className, ref, ...props }) {
 * positioner, popup, and this viewport when that behavior is needed.
 */
 function PopoverViewport({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__viewport"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__viewport", className);
 	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
 		ref,
 		"data-slot": "popover-viewport",
@@ -131,7 +129,7 @@ function PopoverHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "popover-header",
-		className: mergeBaseClassName(["popover__header"].filter(Boolean).join(" "), className),
+		className: mergeBaseClassName("popover__header", className),
 		...props
 	});
 }
@@ -139,7 +137,7 @@ function PopoverHeader({ className, ref, ...props }) {
 * Directional arrow pointing to the trigger element.
 */
 function PopoverArrow({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__arrow"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__arrow", className);
 	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
 		ref,
 		"data-slot": "popover-arrow",
@@ -152,7 +150,7 @@ function PopoverArrow({ className, ref, ...props }) {
 * Renders an `<h2>` element.
 */
 function PopoverTitle({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__title"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__title", className);
 	return /* @__PURE__ */ jsx(Popover$1.Title, {
 		ref,
 		"data-slot": "popover-title",
@@ -165,7 +163,7 @@ function PopoverTitle({ className, ref, ...props }) {
 * Renders a `<p>` element.
 */
 function PopoverDescription({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["popover__description"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("popover__description", className);
 	return /* @__PURE__ */ jsx(Popover$1.Description, {
 		ref,
 		"data-slot": "popover-description",

package/dist/components/PreviewCard.js

@@ -33,7 +33,7 @@ const PreviewCardRoot = (props) => {
 * Link element that triggers the preview card on hover.
 */
 function PreviewCardTrigger({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__trigger"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__trigger", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
 		ref,
 		"data-slot": "hover-card-trigger",
@@ -54,7 +54,7 @@ const PreviewCardPortal = (props) => {
 * Optional backdrop behind the preview card.
 */
 function PreviewCardBackdrop({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__backdrop base-ui-backdrop", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Backdrop, {
 		ref,
 		"data-slot": "hover-card-backdrop",
@@ -66,7 +66,7 @@ function PreviewCardBackdrop({ className, ref, ...props }) {
 * Positions the preview card relative to the trigger.
 */
 function PreviewCardPositioner({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__positioner base-ui-positioner", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
 		ref,
 		"data-slot": "hover-card-positioner",
@@ -78,7 +78,7 @@ function PreviewCardPositioner({ className, ref, ...props }) {
 * Container for preview card content.
 */
 function PreviewCardPopup({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__popup base-ui-popup", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
 		ref,
 		"data-slot": "hover-card-content",
@@ -92,7 +92,7 @@ function PreviewCardPopup({ className, ref, ...props }) {
 * the positioner, popup, and this viewport when that behavior is needed.
 */
 function PreviewCardViewport({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__viewport"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__viewport", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Viewport, {
 		ref,
 		"data-slot": "hover-card-viewport",
@@ -104,7 +104,7 @@ function PreviewCardViewport({ className, ref, ...props }) {
 * Decorative arrow pointing to the trigger.
 */
 function PreviewCardArrow({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["preview-card__arrow"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("preview-card__arrow", className);
 	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
 		ref,
 		"data-slot": "hover-card-arrow",

package/dist/components/PricingPage.js

@@ -1,3 +1,4 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { getPlanPrice } from "./Pricing.js";
 import { PricingBillingToggle } from "./PricingBillingToggle.js";
 import { PricingConfirmationDialog } from "./PricingConfirmationDialog.js";
@@ -135,7 +136,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 		return isSubscribed ? getSwitchDirection(plan) : "select";
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: ["pricing-page", className].filter(Boolean).join(" "),
+		className: cx("pricing-page", className),
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "pricing-page__header",

package/dist/components/PricingPlanCard.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { D as InfoIcon, N as MinusIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { D as InfoIcon, N as MinusIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Separator } from "./Separator.js";

package/dist/components/Progress.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
@@ -18,7 +18,7 @@ import { Progress as Progress$1 } from "@base-ui/react/progress";
 * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
 */
 function ProgressRoot({ color = "primary", className, ref, ...props }) {
-	const classes = mergeBaseClassName(["progress", `progress--${color}`].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName(cx("progress", `progress--${color}`), className);
 	return /* @__PURE__ */ jsx(Progress$1.Root, {
 		ref,
 		"data-slot": "progress",
@@ -27,7 +27,7 @@ function ProgressRoot({ color = "primary", className, ref, ...props }) {
 	});
 }
 function ProgressTrack({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["progress__track"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("progress__track", className);
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
 		ref,
 		"data-slot": "progress-track",
@@ -36,7 +36,7 @@ function ProgressTrack({ className, ref, ...props }) {
 	});
 }
 function ProgressIndicator({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["progress__indicator"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("progress__indicator", className);
 	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
 		ref,
 		"data-slot": "progress-indicator",

package/dist/components/PromptInput.js

@@ -1,8 +1,9 @@
 import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
-import { $ as WrenchIcon, C as FolderIcon, J as StopIcon, K as SpinnerIcon, L as PaperclipIcon, M as MicrophoneIcon, P as MonitorIcon, Q as WarningIcon, S as FileIcon, V as PlusIcon, a as ArrowUpIcon, d as ChevronDownIcon, et as XIcon, q as SquareIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { $ as WrenchIcon, C as FolderIcon, J as StopIcon, K as SpinnerIcon, L as PaperclipIcon, M as MicrophoneIcon, P as MonitorIcon, Q as WarningIcon, S as FileIcon, V as PlusIcon, a as ArrowUpIcon, d as ChevronDownIcon, et as XIcon, q as SquareIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
+import { n as clamp, r as formatClock } from "../format-S6uWyoSb.js";
 import { Menu } from "./Menu.js";
 import { Combobox } from "./Combobox.js";
 import { Select } from "./Select.js";
@@ -322,7 +323,7 @@ function PromptInputAttachment({ file, className, ref, ...props }) {
 				})
 			})
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileIcon, { className: "prompt-input__attachment-icon" }), /* @__PURE__ */ jsx("span", {
-			className: "prompt-input__attachment-name",
+			className: "prompt-input__attachment-name sigvelo-truncate",
 			children: name
 		})] }), /* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -384,7 +385,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		const el = innerRef.current;
 		if (!el) return;
 		el.style.height = "auto";
-		const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+		const next = clamp(el.scrollHeight, minHeight, maxHeight);
 		el.style.height = `${next}px`;
 		el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
 	}, [maxHeight, minHeight]);
@@ -539,8 +540,8 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 	const listening = voice.isListening;
 	const label = listening ? "Stop dictation" : error ? "Retry dictation" : "Start dictation";
 	const status = error ? `Dictation failed: ${error}` : listening ? voice.interimTranscript ? "Listening. Speech detected." : "Listening for speech." : isStarting ? "Starting dictation." : "";
-	const level = Math.min(Math.max(voice.audioLevel, 0), 1);
-	const elapsed = formatDictationElapsed(elapsedSeconds);
+	const level = clamp(voice.audioLevel, 0, 1);
+	const elapsed = formatClock(elapsedSeconds);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(PromptInputButton, {
 			ref: buttonRef,
@@ -708,9 +709,6 @@ function PromptInputRecordingWaveform({ active, level }) {
 		children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef })
 	});
 }
-function formatDictationElapsed(totalSeconds) {
-	return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
-}
 function appendDictationTranscript(current, transcript) {
 	if (!current) return transcript;
 	return `${current}${/\s$/u.test(current) ? "" : " "}${transcript}`;
@@ -1124,7 +1122,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 										children: command.label
 									}),
 									command.description ? /* @__PURE__ */ jsx("span", {
-										className: "prompt-input__command-description",
+										className: "prompt-input__command-description sigvelo-truncate",
 										children: command.description
 									}) : null,
 									command.meta ? /* @__PURE__ */ jsx("span", {
@@ -1163,7 +1161,7 @@ function PromptInputReferences({ references, onRemove, className, ref, ...props
 					children: reference.icon
 				}) : null,
 				/* @__PURE__ */ jsx("span", {
-					className: "prompt-input__reference-label",
+					className: "prompt-input__reference-label sigvelo-truncate",
 					children: reference.label
 				}),
 				/* @__PURE__ */ jsx(XIcon, {
@@ -1189,11 +1187,11 @@ function PromptInputContextSelector({ items, value, onValueChange, categoryLabel
 			children: [
 				/* @__PURE__ */ jsx(FolderIcon, { size: 14 }),
 				categoryLabel ? /* @__PURE__ */ jsx("span", {
-					className: "prompt-input__context-category",
+					className: "prompt-input__context-category sigvelo-truncate",
 					children: categoryLabel
 				}) : null,
 				/* @__PURE__ */ jsx("span", {
-					className: "prompt-input__context-value",
+					className: "prompt-input__context-value sigvelo-truncate",
 					children: displayLabel
 				}),
 				/* @__PURE__ */ jsx(ChevronDownIcon, {

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { S as FileIcon, _ as DotIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { S as FileIcon, _ as DotIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";

package/dist/components/RadioGroup.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -31,7 +31,7 @@ function RadioGroupRoot({ orientation = "vertical", className, ref, ...props })
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		ref,
 		"data-slot": "radio-group",
-		className: mergeBaseClassName(["radio-group", `radio-group--${orientation}`].filter(Boolean).join(" "), className),
+		className: mergeBaseClassName(cx("radio-group", `radio-group--${orientation}`), className),
 		...props
 	});
 }
@@ -39,7 +39,7 @@ function RadioGroupRoot({ orientation = "vertical", className, ref, ...props })
 * A single radio button within a RadioGroup.
 */
 function RadioRoot({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["radio"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("radio", className);
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		ref,
 		"data-slot": "radio-group-item",
@@ -51,7 +51,7 @@ function RadioRoot({ className, ref, ...props }) {
 * The visual indicator for a Radio button.
 */
 function RadioIndicator({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["radio__indicator"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("radio__indicator", className);
 	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
 		ref,
 		"data-slot": "radio-group-indicator",

package/dist/components/Reasoning.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { K as SpinnerIcon } from "../icons-DKXiSepE.js";
+import { K as SpinnerIcon } from "../icons-DyOM0EJs.js";
 import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
-import { f as MessageResponse } from "../Message-rZEaaD8Q.js";
+import { f as MessageResponse } from "../Message-DzuteocT.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Reasoning.tsx

package/dist/components/ResizableSidePanel.js

@@ -1,12 +1,10 @@
 import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
+import { n as clamp } from "../format-S6uWyoSb.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ResizableSidePanel.tsx
 const ResizableSidePanelContext = React.createContext(null);
-function clampSize(size, minSize, maxSize) {
-	return Math.min(maxSize, Math.max(minSize, size));
-}
 function panelSizeDelta(physicalDelta, side, direction) {
 	const sideDirection = side === "start" ? 1 : -1;
 	const writingDirection = direction === "ltr" ? 1 : -1;
@@ -17,10 +15,10 @@ function panelSizeDelta(physicalDelta, side, direction) {
 * ownership of panel placement, visibility, compact behavior, and top bars.
 */
 function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, ref, side = "start", style, ...props }) {
-	const [size, setInnerSize] = React.useState(() => clampSize(defaultSize, minSize, maxSize));
+	const [size, setInnerSize] = React.useState(() => clamp(defaultSize, minSize, maxSize));
 	const cleanupResizeRef = React.useRef(null);
 	const setSize = React.useCallback((nextSize) => {
-		const clampedSize = clampSize(nextSize, minSize, maxSize);
+		const clampedSize = clamp(nextSize, minSize, maxSize);
 		setInnerSize(clampedSize);
 		onSizeChange?.(clampedSize);
 	}, [

package/dist/components/ResponsiveSidebarShell.js

@@ -1,8 +1,9 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { G as SidebarIcon } from "../icons-DKXiSepE.js";
+import { G as SidebarIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { t as capitalize } from "../format-S6uWyoSb.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
-import { t as mergeRefs } from "../merge-refs-KlanQB7A.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,7 +39,7 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 		defaultSidebarOpen,
 		onSidebarOpenChange
 	});
-	const toggleLabel = `${sidebarLabel.charAt(0).toUpperCase()}${sidebarLabel.slice(1)}`;
+	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
 	const updateSidebar = React.useCallback((update, restoreFocus) => {
 		update();

package/dist/components/ScrollArea.js

@@ -21,7 +21,7 @@ import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
 */
 function ScrollAreaRoot({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Root, {
 		ref,
 		"data-slot": "scroll-area",
@@ -33,7 +33,7 @@ function ScrollAreaRoot({ className, ref, ...props }) {
 * The scrollable viewport container.
 */
 function ScrollAreaViewport({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area__viewport"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area__viewport", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 		ref,
 		"data-slot": "scroll-area-viewport",
@@ -45,7 +45,7 @@ function ScrollAreaViewport({ className, ref, ...props }) {
 * Content wrapper that keeps Base UI's overflow measurements in sync.
 */
 function ScrollAreaContent({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area__content"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area__content", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Content, {
 		ref,
 		"data-slot": "scroll-area-content",
@@ -57,7 +57,7 @@ function ScrollAreaContent({ className, ref, ...props }) {
 * The scrollbar track, either vertical or horizontal.
 */
 function ScrollAreaScrollbar({ className, orientation = "vertical", ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area__scrollbar"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area__scrollbar", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		ref,
 		"data-slot": "scroll-area-scrollbar",
@@ -70,7 +70,7 @@ function ScrollAreaScrollbar({ className, orientation = "vertical", ref, ...prop
 * The draggable scrollbar thumb indicator.
 */
 function ScrollAreaThumb({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area__thumb"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area__thumb", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 		ref,
 		"data-slot": "scroll-area-thumb",
@@ -82,7 +82,7 @@ function ScrollAreaThumb({ className, ref, ...props }) {
 * Small rectangle at the intersection of scrollbars.
 */
 function ScrollAreaCorner({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["scroll-area__corner"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("scroll-area__corner", className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
 		ref,
 		"data-slot": "scroll-area-corner",

package/dist/components/SearchField.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { W as SearchIcon } from "../icons-DKXiSepE.js";
+import { W as SearchIcon } from "../icons-DyOM0EJs.js";
 import { Field } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SearchField.tsx

package/dist/components/Select.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { a as ArrowUpIcon, n as ArrowDownIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { a as ArrowUpIcon, n as ArrowDownIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -36,7 +36,7 @@ function SelectRoot(props) {
 	});
 }
 function SelectLabel({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__label"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__label", className);
 	return /* @__PURE__ */ jsx(Select$1.Label, {
 		ref,
 		"data-slot": "select-field-label",
@@ -64,7 +64,7 @@ function SelectValue({ placeholder, children, ref, ...props }) {
 	});
 }
 function SelectIcon({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__icon"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__icon", className);
 	return /* @__PURE__ */ jsx(Select$1.Icon, {
 		ref,
 		className: classes,
@@ -73,7 +73,7 @@ function SelectIcon({ className, children, ref, ...props }) {
 	});
 }
 function SelectBackdrop({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__backdrop base-ui-backdrop", className);
 	return /* @__PURE__ */ jsx(Select$1.Backdrop, {
 		ref,
 		className: classes,
@@ -81,7 +81,7 @@ function SelectBackdrop({ className, ref, ...props }) {
 	});
 }
 function SelectPositioner({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__positioner base-ui-positioner", className);
 	return /* @__PURE__ */ jsx(Select$1.Positioner, {
 		ref,
 		className: classes,
@@ -89,7 +89,7 @@ function SelectPositioner({ className, ref, ...props }) {
 	});
 }
 function SelectPopup({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__popup base-ui-popup", className);
 	return /* @__PURE__ */ jsx(Select$1.Popup, {
 		ref,
 		"data-slot": "select-content",
@@ -98,7 +98,7 @@ function SelectPopup({ className, ref, ...props }) {
 	});
 }
 function SelectList({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__list"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__list", className);
 	return /* @__PURE__ */ jsx(Select$1.List, {
 		ref,
 		"data-slot": "select-viewport",
@@ -107,7 +107,7 @@ function SelectList({ className, ref, ...props }) {
 	});
 }
 function SelectItem({ className, value, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__option"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__option", className);
 	return /* @__PURE__ */ jsx(Select$1.Item, {
 		ref,
 		"data-slot": "select-item",
@@ -117,7 +117,7 @@ function SelectItem({ className, value, ref, ...props }) {
 	});
 }
 function SelectItemText({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__item-text"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__item-text", className);
 	return /* @__PURE__ */ jsx(Select$1.ItemText, {
 		ref,
 		className: classes,
@@ -125,7 +125,7 @@ function SelectItemText({ className, ref, ...props }) {
 	});
 }
 function SelectItemIndicator({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__item-indicator"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__item-indicator", className);
 	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 		ref,
 		"data-slot": "select-item-indicator",
@@ -135,7 +135,7 @@ function SelectItemIndicator({ className, children, ref, ...props }) {
 	});
 }
 function SelectGroup({ label, className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__option-group"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__option-group", className);
 	return /* @__PURE__ */ jsxs(Select$1.Group, {
 		ref,
 		"data-slot": "select-group",
@@ -149,7 +149,7 @@ function SelectGroup({ label, className, children, ref, ...props }) {
 	});
 }
 function SelectGroupLabel({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__group-label"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__group-label", className);
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		ref,
 		"data-slot": "select-label",
@@ -158,7 +158,7 @@ function SelectGroupLabel({ className, ref, ...props }) {
 	});
 }
 function SelectSeparator({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__separator"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__separator", className);
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		ref,
 		"data-slot": "select-separator",
@@ -167,7 +167,7 @@ function SelectSeparator({ className, ref, ...props }) {
 	});
 }
 function SelectScrollUpArrow({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__scroll-button", "select__scroll-button--up"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__scroll-button select__scroll-button--up", className);
 	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
 		ref,
 		"data-slot": "select-scroll-up-button",
@@ -177,7 +177,7 @@ function SelectScrollUpArrow({ className, children, ref, ...props }) {
 	});
 }
 function SelectScrollDownArrow({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["select__scroll-button", "select__scroll-button--down"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("select__scroll-button select__scroll-button--down", className);
 	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
 		ref,
 		"data-slot": "select-scroll-down-button",

package/dist/components/Slider.js

@@ -35,7 +35,7 @@ import { Slider as Slider$1 } from "@base-ui/react/slider";
 * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
 */
 function SliderRoot({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider", className);
 	return /* @__PURE__ */ jsx(Slider$1.Root, {
 		ref,
 		"data-slot": "slider",
@@ -47,7 +47,7 @@ function SliderRoot({ className, ref, ...props }) {
 * The control area for the Slider (handles interactions).
 */
 function SliderControl({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__control"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__control", className);
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		ref,
 		"data-slot": "slider-control",
@@ -59,7 +59,7 @@ function SliderControl({ className, ref, ...props }) {
 * The track container for the Slider.
 */
 function SliderTrack({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__track"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__track", className);
 	return /* @__PURE__ */ jsx(Slider$1.Track, {
 		ref,
 		"data-slot": "slider-track",
@@ -71,7 +71,7 @@ function SliderTrack({ className, ref, ...props }) {
 * The filled indicator showing current value position.
 */
 function SliderIndicator({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__indicator"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__indicator", className);
 	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
 		ref,
 		"data-slot": "slider-range",
@@ -83,7 +83,7 @@ function SliderIndicator({ className, ref, ...props }) {
 * The draggable thumb for the Slider.
 */
 function SliderThumb({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__thumb"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__thumb", className);
 	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
 		ref,
 		"data-slot": "slider-thumb",
@@ -96,7 +96,7 @@ function SliderThumb({ className, ref, ...props }) {
 * Note: This must be used inside a Slider component to access the value context.
 */
 function SliderOutput({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__output"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__output", className);
 	return /* @__PURE__ */ jsx(Slider$1.Value, {
 		ref,
 		"data-slot": "slider-output",
@@ -107,7 +107,7 @@ function SliderOutput({ className, children, ref, ...props }) {
 }
 /** Visible label that participates in Base UI's slider naming relationship. */
 function SliderLabel({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["slider__label"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("slider__label", className);
 	return /* @__PURE__ */ jsx(Slider$1.Label, {
 		ref,
 		"data-slot": "slider-label",