@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ContextMenu.d.ts

@@ -9,10 +9,7 @@ interface ContextMenuProps extends React.ComponentPropsWithoutRef<typeof Context
 /**
  * Props for the ContextMenu.Trigger component.
  */
-interface ContextMenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger> {}
 /**
  * Props for the ContextMenu.Portal component.
  */
@@ -20,53 +17,32 @@ interface ContextMenuPortalProps extends React.ComponentPropsWithoutRef<typeof C
 /**
  * Props for the ContextMenu.Positioner component.
  */
-interface ContextMenuPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuPositionerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner> {}
 /**
  * Props for the ContextMenu.Popup component.
  */
-interface ContextMenuPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Popup>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuPopupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Popup> {}
 /**
  * Props for the ContextMenu.Item component.
  */
-interface ContextMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Item>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Item> {
   inset?: boolean;
   variant?: "default" | "destructive";
 }
 /**
  * Props for the ContextMenu.Separator component.
  */
-interface ContextMenuSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Separator>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
-interface ContextMenuGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Group>, "className"> {
-  className?: string;
-}
-interface ContextMenuGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.GroupLabel>, "className"> {
-  className?: string;
+interface ContextMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Separator> {}
+interface ContextMenuGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Group> {}
+interface ContextMenuGroupLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.GroupLabel> {
   inset?: boolean;
 }
-interface ContextMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem>, "className"> {
-  className?: string;
-}
-interface ContextMenuRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup>, "className"> {
-  className?: string;
-}
-interface ContextMenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem>, "className"> {
-  className?: string;
-}
+interface ContextMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem> {}
+interface ContextMenuRadioGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup> {}
+interface ContextMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem> {}
 interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
 interface ContextMenuSubmenuRootProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuRoot> {}
-interface ContextMenuSubmenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuTrigger>, "className"> {
-  className?: string;
+interface ContextMenuSubmenuTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuTrigger> {
   inset?: boolean;
 }
 /**
@@ -143,7 +119,11 @@ declare function ContextMenuCheckboxItem({
 }: ContextMenuCheckboxItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function ContextMenuCheckboxItemIndicator(props: ContextMenu$1.CheckboxItemIndicator.Props): React.JSX.Element;
+declare function ContextMenuCheckboxItemIndicator({
+  children,
+  className,
+  ...props
+}: ContextMenu$1.CheckboxItemIndicator.Props): React.JSX.Element;
 declare function ContextMenuRadioGroup({
   className,
   ref,
@@ -158,7 +138,11 @@ declare function ContextMenuRadioItem({
 }: ContextMenuRadioItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function ContextMenuRadioItemIndicator(props: ContextMenu$1.RadioItemIndicator.Props): React.JSX.Element;
+declare function ContextMenuRadioItemIndicator({
+  children,
+  className,
+  ...props
+}: ContextMenu$1.RadioItemIndicator.Props): React.JSX.Element;
 declare function ContextMenuShortcut({
   className,
   ref,

package/dist/components/ContextMenu.js

@@ -1,4 +1,5 @@
-import { o as CheckIcon, p as DotIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
@@ -33,8 +34,8 @@ const ContextMenuRoot = (props) => {
 /**
 * Interactive area that activates the menu on right-click or long-press.
 */
-function ContextMenuTrigger({ className = "", ref, ...props }) {
-	const classes = ["context-menu__trigger", className].filter(Boolean).join(" ");
+function ContextMenuTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
 		ref,
 		"data-slot": "context-menu-trigger",
@@ -54,12 +55,8 @@ const ContextMenuPortal = (props) => {
 /**
 * Positions the menu at the pointer location.
 */
-function ContextMenuPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"context-menu__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		ref,
 		"data-slot": "context-menu-positioner",
@@ -70,12 +67,8 @@ function ContextMenuPositioner({ className = "", ref, ...props }) {
 /**
 * Container for menu items.
 */
-function ContextMenuPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"context-menu__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 		ref,
 		"data-slot": "context-menu-content",
@@ -86,12 +79,8 @@ function ContextMenuPopup({ className = "", ref, ...props }) {
 /**
 * Interactive menu item.
 */
-function ContextMenuItem({ className = "", inset, variant = "default", ref, ...props }) {
-	const classes = [
-		"context-menu__item",
-		inset && "context-menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuItem({ className, inset, variant = "default", ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__item", inset && "context-menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
 		ref,
 		"data-slot": "context-menu-item",
@@ -104,8 +93,8 @@ function ContextMenuItem({ className = "", inset, variant = "default", ref, ...p
 /**
 * Visual separator between menu sections.
 */
-function ContextMenuSeparator({ className = "", ref, ...props }) {
-	const classes = ["context-menu__separator", className].filter(Boolean).join(" ");
+function ContextMenuSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__separator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		ref,
 		"data-slot": "context-menu-separator",
@@ -113,8 +102,8 @@ function ContextMenuSeparator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuGroup({ className = "", ref, ...props }) {
-	const classes = ["context-menu__group", className].filter(Boolean).join(" ");
+function ContextMenuGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
 		ref,
 		"data-slot": "context-menu-group",
@@ -122,12 +111,8 @@ function ContextMenuGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuGroupLabel({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"context-menu__label",
-		inset && "context-menu__label--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuGroupLabel({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__label", inset && "context-menu__label--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		ref,
 		"data-slot": "context-menu-label",
@@ -136,8 +121,8 @@ function ContextMenuGroupLabel({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuCheckboxItem({ className = "", ref, ...props }) {
-	const classes = ["context-menu__checkbox-item", className].filter(Boolean).join(" ");
+function ContextMenuCheckboxItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__checkbox-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItem, {
 		ref,
 		"data-slot": "context-menu-checkbox-item",
@@ -145,15 +130,16 @@ function ContextMenuCheckboxItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuCheckboxItemIndicator(props) {
+function ContextMenuCheckboxItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
-		className: "context-menu__indicator",
+		className: mergeBaseClassName("context-menu__indicator", className),
+		"data-slot": "context-menu-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-function ContextMenuRadioGroup({ className = "", ref, ...props }) {
-	const classes = ["context-menu__radio-group", className].filter(Boolean).join(" ");
+function ContextMenuRadioGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__radio-group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
 		ref,
 		"data-slot": "context-menu-radio-group",
@@ -161,8 +147,8 @@ function ContextMenuRadioGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItem({ className = "", ref, ...props }) {
-	const classes = ["context-menu__radio-item", className].filter(Boolean).join(" ");
+function ContextMenuRadioItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__radio-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItem, {
 		ref,
 		"data-slot": "context-menu-radio-item",
@@ -170,18 +156,19 @@ function ContextMenuRadioItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItemIndicator(props) {
+function ContextMenuRadioItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
-		className: "context-menu__indicator",
+		className: mergeBaseClassName("context-menu__indicator", className),
+		"data-slot": "context-menu-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
+		children: children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
 	});
 }
-function ContextMenuShortcut({ className = "", ref, ...props }) {
+function ContextMenuShortcut({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "context-menu-shortcut",
-		className: ["context-menu__shortcut", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["context-menu__shortcut"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
@@ -191,12 +178,8 @@ function ContextMenuSubmenuRoot(props) {
 		...props
 	});
 }
-function ContextMenuSubmenuTrigger({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"context-menu__submenu-trigger",
-		inset && "context-menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuSubmenuTrigger({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__submenu-trigger", inset && "context-menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuTrigger, {
 		ref,
 		"data-slot": "context-menu-sub-trigger",

package/dist/components/Conversation.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "../Button-FX_hpqxm.js";
+import { t as Button } from "../Button-DLGzHsjc.js";
 import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
 import * as React from "react";
 import { UIMessage } from "ai";
@@ -97,8 +97,7 @@ declare function ConversationEmptyState({
 }: ConversationEmptyStateProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ConversationScrollButtonProps extends Omit<MessageScrollerButtonProps, "children" | "className"> {
-  className?: string;
+interface ConversationScrollButtonProps extends Omit<MessageScrollerButtonProps, "children"> {
   /** Accessible label for the button. */
   label?: string;
   children?: React.ReactNode;
@@ -126,8 +125,7 @@ declare function ConversationScrollButton({
  *   `### Role\n\n<text>` blocks joined by blank lines.
  */
 declare function messagesToMarkdown(messages: ConversationMessage[], formatMessage?: (message: ConversationMessage, index: number) => string): string;
-interface ConversationDownloadProps extends Omit<React.ComponentProps<typeof Button>, "onClick" | "children" | "className"> {
-  className?: string;
+interface ConversationDownloadProps extends Omit<React.ComponentProps<typeof Button>, "onClick" | "children"> {
   messages: ConversationMessage[];
   /** Filename for the downloaded Markdown file. */
   filename?: string;

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { m as DownloadIcon, t as ArrowDownIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { _ as DownloadIcon, n as ArrowDownIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";
@@ -119,7 +119,7 @@ function ConversationEmptyState({ className, title = "No messages yet", descript
 * Floating button that scrolls the conversation to the latest message.
 * Hidden from view and tab order while the viewport is already at the end.
 */
-function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "icon", label = "Scroll to latest", children, ...props }) {
+function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "sm", label = "Scroll to latest", children, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScrollerButton, {
 		variant,
 		color,
@@ -154,7 +154,7 @@ function messagesToMarkdown(messages, formatMessage = defaultFormatMessage) {
 * Skipped when `messages` is empty. For custom export flows, use
 * {@link messagesToMarkdown} directly.
 */
-function ConversationDownload({ className, messages, filename = "conversation.md", formatMessage, label = "Download conversation", variant = "outline", color = "neutral", size = "icon", children, ref, ...props }) {
+function ConversationDownload({ className, messages, filename = "conversation.md", formatMessage, label = "Download conversation", variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
 	if (messages.length === 0) return null;
 	const handleClick = () => {
 		const markdown = messagesToMarkdown(messages, formatMessage);
@@ -174,6 +174,7 @@ function ConversationDownload({ className, messages, filename = "conversation.md
 		variant,
 		color,
 		size,
+		iconOnly: true,
 		className: cx("conversation__download-button", className),
 		"aria-label": label,
 		onClick: handleClick,

package/dist/components/DescriptionListParts.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DescriptionListParts.tsx

package/dist/components/Dialog.d.ts

@@ -5,29 +5,18 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 interface DialogProps extends Dialog$1.Root.Props {}
 interface DialogTriggerProps extends Dialog$1.Trigger.Props {}
 interface DialogPortalProps extends Dialog$1.Portal.Props {}
-interface DialogBackdropProps extends Omit<Dialog$1.Backdrop.Props, "className"> {
-  className?: string;
-}
-interface DialogViewportProps extends Omit<Dialog$1.Viewport.Props, "className"> {
-  className?: string;
-}
-interface DialogPopupProps extends Omit<Dialog$1.Popup.Props, "className"> {
-  className?: string;
+interface DialogBackdropProps extends Dialog$1.Backdrop.Props {}
+interface DialogViewportProps extends Dialog$1.Viewport.Props {}
+interface DialogPopupProps extends Dialog$1.Popup.Props {
   /**
    * The size of the dialog.
    * @default 'md'
    */
   size?: "sm" | "md" | "lg" | "fullscreen";
 }
-interface DialogTitleProps extends Omit<Dialog$1.Title.Props, "className"> {
-  className?: string;
-}
-interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, "className"> {
-  className?: string;
-}
-interface DialogCloseProps extends Omit<Dialog$1.Close.Props, "className"> {
-  className?: string;
-}
+interface DialogTitleProps extends Dialog$1.Title.Props {}
+interface DialogDescriptionProps extends Dialog$1.Description.Props {}
+interface DialogCloseProps extends Dialog$1.Close.Props {}
 interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**

package/dist/components/Dialog.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
@@ -30,12 +31,8 @@ function DialogTrigger(props) {
 		...props
 	});
 }
-function DialogBackdrop({ className = "", ref, ...props }) {
-	const classes = [
-		"dialog__backdrop",
-		"base-ui-backdrop",
-		className
-	].filter(Boolean).join(" ");
+function DialogBackdrop({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		ref,
 		"data-slot": "dialog-overlay",
@@ -43,8 +40,8 @@ function DialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogViewport({ className = "", ref, ...props }) {
-	const classes = ["dialog__viewport", className].filter(Boolean).join(" ");
+function DialogViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Viewport, {
 		ref,
 		"data-slot": "dialog-viewport",
@@ -52,12 +49,8 @@ function DialogViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogPopup({ size = "md", className = "", ref, ...props }) {
-	const classes = [
-		"dialog__popup",
-		size !== "md" && `dialog__popup--${size}`,
-		className
-	].filter(Boolean).join(" ");
+function DialogPopup({ size = "md", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__popup", size !== "md" && `dialog__popup--${size}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Popup, {
 		ref,
 		"data-slot": "dialog-content",
@@ -65,24 +58,24 @@ function DialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogHeader({ className = "", ref, ...props }) {
+function DialogHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "dialog-header",
-		className: ["dialog__header", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["dialog__header"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function DialogFooter({ className = "", ref, ...props }) {
+function DialogFooter({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "dialog-footer",
-		className: ["dialog__footer", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["dialog__footer"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function DialogTitle({ className = "", ref, ...props }) {
-	const classes = ["dialog__title", className].filter(Boolean).join(" ");
+function DialogTitle({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__title"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		ref,
 		"data-slot": "dialog-title",
@@ -90,8 +83,8 @@ function DialogTitle({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogDescription({ className = "", ref, ...props }) {
-	const classes = ["dialog__description", className].filter(Boolean).join(" ");
+function DialogDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__description"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
 		ref,
 		"data-slot": "dialog-description",
@@ -99,8 +92,8 @@ function DialogDescription({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogClose({ className = "", ref, ...props }) {
-	const classes = ["dialog__close", className].filter(Boolean).join(" ");
+function DialogClose({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["dialog__close"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Close, {
 		ref,
 		"data-slot": "dialog-close",

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { t as CopyButtonProps } from "../copy-button-DtPMgN7e.js";
+import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts

package/dist/components/EnvironmentVariables.js

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { _ as EyeOffIcon, g as EyeIcon } from "../icons-CpfUer49.js";
-import { t as CopyButton } from "../copy-button-Dejn5heL.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { b as EyeOffIcon, y as EyeIcon } from "../icons-CQJ-aMnI.js";
+import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import * as React from "react";
@@ -69,6 +69,7 @@ function EnvironmentVariables({ className, showValues, defaultShowValues = false
 			ref,
 			className: cx("environment-variables", className),
 			...props,
+			"data-recipe": "framed-panel",
 			children
 		})
 	});

package/dist/components/Field.d.ts

@@ -6,38 +6,26 @@ import { Field as Field$1 } from "@base-ui/react/field";
  * Props for the Field.Root component.
  */
 interface FieldRootProps extends React.ComponentPropsWithoutRef<typeof Field$1.Root> {
-  /** Additional CSS class names */
-  className?: string;
   orientation?: "vertical" | "horizontal" | "responsive";
 }
 /**
  * Props for the Field.Label component.
  */
-interface FieldLabelProps extends React.ComponentPropsWithoutRef<typeof Field$1.Label> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface FieldLabelProps extends React.ComponentPropsWithoutRef<typeof Field$1.Label> {}
 /**
  * Props for the Field.Control component.
  */
-interface FieldControlProps extends React.ComponentPropsWithoutRef<typeof Field$1.Control> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface FieldControlProps extends React.ComponentPropsWithoutRef<typeof Field$1.Control> {}
 /**
  * Props for the Field.Description component.
  */
-interface FieldDescriptionProps extends React.ComponentPropsWithoutRef<typeof Field$1.Description> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface FieldDescriptionProps extends React.ComponentPropsWithoutRef<typeof Field$1.Description> {}
 /**
  * Props for the Field.Error component.
  */
-interface FieldErrorProps extends React.ComponentPropsWithoutRef<typeof Field$1.Error> {
-  /** Additional CSS class names */
-  className?: string;
-  errors?: Array<{
+interface FieldErrorProps extends React.ComponentPropsWithoutRef<typeof Field$1.Error> {}
+interface FieldErrorsProps extends React.HTMLAttributes<HTMLDivElement> {
+  errors: Array<{
     message?: string;
   } | string | undefined>;
 }
@@ -160,12 +148,20 @@ declare function FieldDescription({
  */
 declare function FieldError({
   className,
-  errors,
   children,
   ref,
   ...props
 }: FieldErrorProps & {
   ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function FieldErrors({
+  className,
+  errors,
+  children,
+  ref,
+  ...props
+}: FieldErrorsProps & {
+  ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element | null;
 /**
  * Renders custom content based on the field's validity state.
@@ -268,6 +264,7 @@ declare const Field: {
   Control: typeof FieldControl;
   Description: typeof FieldDescription;
   Error: typeof FieldError;
+  Errors: typeof FieldErrors;
   Item: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Validity: React.FC<import("@base-ui/react").FieldValidityProps>;
   Set: typeof FieldSet;
@@ -278,4 +275,4 @@ declare const Field: {
   Separator: typeof FieldSeparator;
 };
 //#endregion
-export { Field, FieldContentProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldGroupProps, FieldLabelProps, FieldLegendProps, FieldRootProps, FieldSeparatorProps, FieldSetProps, FieldTitleProps, FieldValidityProps };
+export { Field, FieldContentProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldErrorsProps, FieldGroupProps, FieldLabelProps, FieldLegendProps, FieldRootProps, FieldSeparatorProps, FieldSetProps, FieldTitleProps, FieldValidityProps };