@carbon/react 1.114.0-rc.0 → 1.114.0

package/es/components/Card/Card.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { CardProps } from './Card.types';
+import { CardHeader } from './CardHeader';
+import { CardBody } from './CardBody';
+import { CardFooter } from './CardFooter';
+import { CardHeaderMedia } from './CardHeaderMedia';
+import { CardMedia } from './CardMedia';
+import { CardTitle } from './CardTitle';
+import { CardTitleMedia } from './CardTitleMedia';
+import { CardActions } from './CardActions';
+import { CardAction } from './CardAction';
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    HeaderMedia: {
+        ({ children, className, ...rest }: import("./CardHeaderMedia").CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Media: {
+        ({ children, className, ratio, mediaWidth, ...rest }: import("./CardMedia").CardMediaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<import("./CardTitle").CardTitleProps & React.RefAttributes<HTMLDivElement>>;
+    TitleMedia: React.ForwardRefExoticComponent<import("./CardTitleMedia").CardTitleMediaProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: {
+        ({ children, className, overflowMenuLabel, ...rest }: import("./CardActions").CardActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Action: {
+        ({ children, className, ...rest }: import("./CardAction").CardActionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Card as default, CardHeader, CardBody, CardFooter, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, CardActions, CardAction, };
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, } from './Card.types';
+export type { CardHeaderMediaProps } from './CardHeaderMedia';
+export type { CardMediaProps } from './CardMedia';
+export type { CardTitleProps } from './CardTitle';
+export type { CardTitleMediaProps } from './CardTitleMedia';
+export type { CardActionsProps } from './CardActions';
+export type { CardActionProps } from './CardAction';

package/es/components/Card/Card.js

@@ -0,0 +1,148 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { AILabel } from "../AILabel/index.js";
+import { CardContext } from "./CardContext.js";
+import { CardHeader } from "./CardHeader.js";
+import { CardBody } from "./CardBody.js";
+import { CardFooter } from "./CardFooter.js";
+import { CardHeaderMedia } from "./CardHeaderMedia.js";
+import { CardMedia } from "./CardMedia.js";
+import { CardTitle } from "./CardTitle.js";
+import { CardTitleMedia } from "./CardTitleMedia.js";
+import { CardActions } from "./CardActions.js";
+import { CardAction } from "./CardAction.js";
+import React, { forwardRef, isValidElement, useCallback, useMemo } from "react";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Card/Card.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "Card";
+/**
+* Card component - Root container for composable card
+*/
+const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
+	const blockClass = `${usePrefix()}--card`;
+	const hasAILabel = useMemo(() => isValidElement(decorator) && decorator.type === AILabel, [decorator]);
+	const contextValue = useMemo(() => ({
+		clickable,
+		disabled,
+		decorator,
+		horizontal
+	}), [
+		clickable,
+		disabled,
+		decorator,
+		horizontal
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onClick?.(event);
+		}
+		onKeyDown?.(event);
+	}, [
+		clickable,
+		disabled,
+		onClick,
+		onKeyDown
+	]);
+	const handleClick = useCallback((event) => {
+		if (!disabled) onClick?.(event);
+	}, [disabled, onClick]);
+	const cardClasses = cx(blockClass, className, {
+		[`${blockClass}--clickable`]: clickable && !disabled,
+		[`${blockClass}--disabled`]: disabled,
+		[`${blockClass}--${density}`]: density,
+		[`${blockClass}--has-ai-label`]: hasAILabel,
+		[`${blockClass}--horizontal`]: horizontal
+	});
+	const cardProps = {
+		...rest,
+		ref,
+		className: cardClasses,
+		...clickable && {
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			"aria-disabled": disabled
+		}
+	};
+	const { mediaChildren, contentChildren, mediaIsFirst } = useMemo(() => {
+		if (!horizontal) return {
+			mediaChildren: [],
+			contentChildren: [],
+			mediaIsFirst: false
+		};
+		const childArray = React.Children.toArray(children);
+		const isMedia = (child) => React.isValidElement(child) && child.type === CardMedia;
+		return {
+			mediaChildren: childArray.filter(isMedia),
+			contentChildren: childArray.filter((c) => !isMedia(c)),
+			mediaIsFirst: childArray.findIndex(isMedia) < childArray.findIndex((c) => !isMedia(c))
+		};
+	}, [children, horizontal]);
+	let renderedChildren = children;
+	if (horizontal) {
+		const contentWrapper = /* @__PURE__ */ jsx("div", {
+			className: `${blockClass}__content`,
+			children: contentChildren
+		});
+		renderedChildren = mediaIsFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [mediaChildren, contentWrapper] }) : /* @__PURE__ */ jsxs(Fragment, { children: [contentWrapper, mediaChildren] });
+	}
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...cardProps,
+			children: renderedChildren
+		})
+	});
+});
+CardComponent.displayName = componentName;
+/**
+* -------
+* Exports
+* -------
+*/
+const Header = CardHeader;
+Header.displayName = "Card.Header";
+const Body = CardBody;
+Body.displayName = "Card.Body";
+const Footer = CardFooter;
+Footer.displayName = "Card.Footer";
+const HeaderMedia = CardHeaderMedia;
+HeaderMedia.displayName = "Card.HeaderMedia";
+const Media = CardMedia;
+Media.displayName = "Card.Media";
+const Title = CardTitle;
+Title.displayName = "Card.Title";
+const TitleMedia = CardTitleMedia;
+TitleMedia.displayName = "Card.TitleMedia";
+const Actions = CardActions;
+Actions.displayName = "Card.Actions";
+const Action = CardAction;
+Action.displayName = "Card.Action";
+const Card = Object.assign(CardComponent, {
+	Header,
+	Body,
+	Footer,
+	HeaderMedia,
+	Media,
+	Title,
+	TitleMedia,
+	Actions,
+	Action
+});
+//#endregion
+export { Card, Card as default, CardAction, CardActions, CardBody, CardFooter, CardHeader, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia };

package/es/components/Card/Card.types.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode } from 'react';
+/**
+ * Base props shared across card components
+ */
+export interface CardBaseProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Card content
+     */
+    children?: ReactNode;
+}
+/**
+ * Props for the Card root component
+ */
+export interface CardProps extends CardBaseProps {
+    /**
+     * Makes the entire card clickable
+     */
+    clickable?: boolean;
+    /**
+     * Click handler for clickable cards
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Keyboard event handler for clickable cards
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Disables the card and all interactive elements
+     */
+    disabled?: boolean;
+    /**
+     * Density variant: productive uses heading-compact-02, expressive uses heading-03
+     */
+    density?: 'productive' | 'expressive';
+    /**
+     * Optional decorator component (typically AILabel from Carbon).
+     * Renders in the top-right corner of the card header with a blue gradient border.
+     */
+    decorator?: ReactNode;
+    /**
+     * When true, the card renders in a horizontal layout: media on the left,
+     * header/body/footer stacked vertically on the right.
+     */
+    horizontal?: boolean;
+}
+/**
+ * Props for CardHeader component
+ */
+export type CardHeaderProps = CardBaseProps;
+/**
+ * Props for CardBody component
+ */
+export type CardBodyProps = CardBaseProps;
+/**
+ * Props for CardFooter component
+ */
+export type CardFooterProps = CardBaseProps;
+/**
+ * Context value for Card
+ */
+export interface CardContextValue {
+    /**
+     * Whether the card is clickable
+     */
+    clickable: boolean;
+    /**
+     * Whether the card is disabled
+     */
+    disabled: boolean;
+    /**
+     * Optional decorator component (typically AILabel) to be rendered by CardHeader
+     */
+    decorator?: ReactNode;
+    /**
+     * Whether the card is in horizontal layout mode
+     */
+    horizontal?: boolean;
+}

package/es/components/Card/CardAction.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode } from 'react';
+export interface CardActionProps {
+    /**
+     * Provide the contents of the CardAction (typically a Button or IconButton).
+     * Wrapping content in CardAction opts into action-set layout: no footer
+     * padding, automatic top border, and stretch/fixed-width button behavior.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Label shown in the overflow menu when this action is hidden.
+     * If not provided, CardActions will attempt to read it from the
+     * direct child's props (label, iconDescription, or children text).
+     */
+    label?: string;
+}
+/**
+ * CardAction is a wrapper for interactive elements in the card footer.
+ * Its presence signals action-set layout to the footer (no padding, auto
+ * border, stretch behavior).
+ *
+ * Note: do not use CardAction inside a clickable card — clickable cards
+ * should not contain interactive elements (see usage guidelines).
+ */
+export declare const CardAction: {
+    ({ children, className, ...rest }: CardActionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/es/components/Card/CardAction.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import "react";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/CardAction.tsx
+const componentName = "CardAction";
+/**
+* CardAction is a wrapper for interactive elements in the card footer.
+* Its presence signals action-set layout to the footer (no padding, auto
+* border, stretch behavior).
+*
+* Note: do not use CardAction inside a clickable card — clickable cards
+* should not contain interactive elements (see usage guidelines).
+*/
+const CardAction = ({ children, className, ...rest }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx(`${prefix}--card__action`, className),
+		children
+	});
+};
+CardAction.displayName = componentName;
+//#endregion
+export { CardAction };

package/es/components/Card/CardActions.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode } from 'react';
+export interface CardActionsProps {
+    /**
+     * Provide the contents of the CardActions (typically CardAction components).
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Aria label for the overflow menu
+     */
+    overflowMenuLabel?: string;
+}
+/**
+ * CardActions is a container for action buttons in the card header.
+ * Positioned in the top-right corner with 8px gap between actions.
+ * When actions exceed 50% of available header space, overflow menu is shown.
+ */
+export declare const CardActions: {
+    ({ children, className, overflowMenuLabel, ...rest }: CardActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/es/components/Card/CardActions.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { MenuItem } from "../Menu/MenuItem.js";
+import { OverflowMenu } from "../OverflowMenu/next/index.js";
+import React, { Children, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createOverflowHandler } from "@carbon/utilities";
+//#region src/components/Card/CardActions.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "CardActions";
+/**
+* CardActions is a container for action buttons in the card header.
+* Positioned in the top-right corner with 8px gap between actions.
+* When actions exceed 50% of available header space, overflow menu is shown.
+*/
+const CardActions = ({ children, className, overflowMenuLabel = "More actions", ...rest }) => {
+	const blockClass = `${usePrefix()}--card`;
+	const containerRef = useRef(null);
+	const [hiddenItems, setHiddenItems] = useState([]);
+	const classes = cx(`${blockClass}__actions`, className);
+	const actionItems = useMemo(() => {
+		const items = [];
+		Children.forEach(children, (child, index) => {
+			if (React.isValidElement(child)) {
+				const actionProps = child.props;
+				const button = actionProps.children;
+				const buttonProps = React.isValidElement(button) ? button.props : null;
+				const label = actionProps.label ?? buttonProps?.label ?? buttonProps?.iconDescription ?? (typeof buttonProps?.children === "string" ? buttonProps.children : `Action ${index + 1}`);
+				const id = `${label}-${index}`;
+				items.push({
+					id,
+					element: child,
+					label
+				});
+			}
+		});
+		return items;
+	}, [children]);
+	useEffect(() => {
+		if (!containerRef.current || actionItems.length === 0) return;
+		const handler = createOverflowHandler({
+			container: containerRef.current,
+			onChange: (_visible, hidden) => {
+				const hiddenIds = hidden.map((el) => el.dataset.id);
+				setHiddenItems(actionItems.filter((item) => hiddenIds.includes(item.id)));
+			}
+		});
+		return () => handler.disconnect();
+	}, [actionItems]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: classes,
+		...rest,
+		children: [actionItems.map((item) => /* @__PURE__ */ jsx("div", {
+			"data-id": item.id,
+			children: item.element
+		}, item.id)), /* @__PURE__ */ jsx("div", {
+			"data-offset": true,
+			"data-hidden": true,
+			"data-floating-menu-container": true,
+			style: { position: "relative" },
+			children: /* @__PURE__ */ jsx(OverflowMenu, {
+				size: "sm",
+				"aria-label": overflowMenuLabel,
+				children: hiddenItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+					label: item.label || "Action",
+					onClick: () => {
+						const button = item.element.props.children;
+						if (button && React.isValidElement(button)) {
+							const buttonProps = button.props;
+							if (buttonProps.onClick) buttonProps.onClick();
+						}
+					}
+				}, item.id))
+			})
+		})]
+	});
+};
+CardActions.displayName = componentName;
+//#endregion
+export { CardActions };

package/es/components/Card/CardBody.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+/**
+ * CardBody component - Body section of the card for free-form content
+ */
+export declare const CardBody: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Card/CardBody.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { forwardRef } from "react";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/CardBody.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "CardBody";
+/**
+* CardBody component - Body section of the card for free-form content
+*/
+const CardBody = forwardRef(({ className, children, ...rest }, ref) => {
+	const bodyClasses = cx(`${usePrefix()}--card__body`, className);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		className: bodyClasses,
+		children
+	});
+});
+CardBody.displayName = componentName;
+//#endregion
+export { CardBody };

package/es/components/Card/CardContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CardContextValue } from './Card.types';
+/**
+ * Context for sharing Card state with child components
+ */
+export declare const CardContext: import("react").Context<CardContextValue | undefined>;
+/**
+ * Hook to access Card context
+ * @returns CardContextValue
+ * @throws Error if used outside of Card component
+ */
+export declare const useCardContext: () => CardContextValue;

package/es/components/Card/CardContext.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createContext, useContext } from "react";
+//#region src/components/Card/CardContext.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Context for sharing Card state with child components
+*/
+const CardContext = createContext(void 0);
+/**
+* Hook to access Card context
+* @returns CardContextValue
+* @throws Error if used outside of Card component
+*/
+const useCardContext = () => {
+	const context = useContext(CardContext);
+	if (!context) throw new Error("Card subcomponents must be used within a Card component");
+	return context;
+};
+//#endregion
+export { CardContext, useCardContext };

package/es/components/Card/CardFooter.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+/**
+ * CardFooter component - Footer section of the card
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Card/CardFooter.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { forwardRef } from "react";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/CardFooter.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "CardFooter";
+/**
+* CardFooter component - Footer section of the card
+*/
+const CardFooter = forwardRef(({ className, children, ...rest }, ref) => {
+	const footerClasses = cx(`${usePrefix()}--card__footer`, className);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		className: footerClasses,
+		children
+	});
+});
+CardFooter.displayName = componentName;
+//#endregion
+export { CardFooter };

package/es/components/Card/CardHeader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+/**
+ * CardHeader — header section of the card.
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Card/CardHeader.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useCardContext } from "./CardContext.js";
+import { forwardRef, useCallback } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Card/CardHeader.tsx
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "CardHeader";
+/**
+* CardHeader — header section of the card.
+*/
+const CardHeader = forwardRef(({ className, children, ...rest }, ref) => {
+	const blockClass = `${usePrefix()}--card`;
+	const context = useCardContext();
+	const handleDecoratorClick = useCallback((e) => e.stopPropagation(), []);
+	const handleDecoratorKeyDown = useCallback((e) => e.stopPropagation(), []);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		className: cx(`${blockClass}__header`, className),
+		children: [children, context.decorator && /* @__PURE__ */ jsx("div", {
+			className: `${blockClass}__decorator`,
+			role: "presentation",
+			onClick: handleDecoratorClick,
+			onKeyDown: handleDecoratorKeyDown,
+			children: context.decorator
+		})]
+	});
+});
+CardHeader.displayName = componentName;
+//#endregion
+export { CardHeader };