@carbon/ibm-products 2.84.0 → 2.85.0

package/lib/components/PageHeader/next/PageHeaderBreadcrumbBar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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, { type ComponentType, type FunctionComponent } from 'react';
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+export interface PageHeaderBreadcrumbBarProps {
+    /**
+     * `true` by default to render BreadcrumbBar bottom border.
+     */
+    border?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderBreadcrumbBar's content actions
+     */
+    contentActions?: React.ReactNode;
+    /**
+     * `true` to set content actions flush against page actions
+     */
+    contentActionsFlush?: boolean;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+    /**
+     * `true` to set page actions flush with page
+     */
+    pageActionsFlush?: boolean;
+}
+export declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/PageHeader/next/PageHeaderBreadcrumbBar.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+var context = require('./context.js');
+
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeaderBreadcrumbBar(_ref, ref) {
+  let {
+    border = true,
+    className,
+    children,
+    renderIcon: IconElement,
+    contentActions,
+    contentActionsFlush,
+    pageActions,
+    pageActionsFlush,
+    ...other
+  } = _ref;
+  const context$1 = context.usePageHeader();
+  const {
+    pageActionsInstance: globalActions,
+    contentActionsClipped
+  } = context$1;
+  const classNames = cx({
+    [`${PageHeaderUtils.blockClass}__breadcrumb-bar`]: true,
+    [`${PageHeaderUtils.blockClass}__breadcrumb-bar-border`]: border,
+    [`${PageHeaderUtils.blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
+  }, className);
+  const contentActionsClasses = cx({
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions`]: !contentActionsFlush,
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
+  });
+  return /*#__PURE__*/React.createElement(context.PageHeaderContext.Provider, {
+    value: {
+      ...context$1,
+      isContentActionsInBreadcrumbBar: true
+    }
+  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__breadcrumb-container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__breadcrumb-wrapper`
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__breadcrumb__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), children), /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__breadcrumb__actions`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentActionsClasses
+  }, contentActions), pageActions))))));
+});
+PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar;

package/lib/components/PageHeader/next/PageHeaderBreadcrumbOverflow.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { BreadcrumbItemProps, BreadcrumbProps } from '@carbon/react';
+export interface PageHeaderBreadcrumbOverflowProps extends BreadcrumbProps {
+    renderOverflowBreadcrumb?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement<BreadcrumbItemProps>;
+}
+export declare const PageHeaderBreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;

package/lib/components/PageHeader/next/PageHeaderBreadcrumbOverflow.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var overflowHandler = require('./overflowHandler.js');
+var settings = require('../../../settings.js');
+var PageHeaderTitleBreadcrumb = require('./PageHeaderTitleBreadcrumb.js');
+
+// This component is a wrapper for the Breadcrumb, and renders breadcrumb items as children
+// including the overflow breadcrumb item. The overflowHandler determines what elements
+// are visible and hidden and passes the hidden elements back to the render prop used
+// to display the overflow breadcrumb
+const PageHeaderBreadcrumbOverflow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    renderOverflowBreadcrumb,
+    className,
+    children,
+    ...other
+  } = _ref;
+  const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = React.useState([]);
+  const fallbackRef = React.useRef(null);
+  const componentRef = ref ?? fallbackRef;
+
+  // Initialize overflow resize handler
+  const carbonPrefix = react.usePrefix();
+  React.useEffect(() => {
+    if (!componentRef) {
+      return;
+    }
+    const breadcrumbList = componentRef?.current.querySelector(`.${carbonPrefix}--breadcrumb`);
+    overflowHandler.createOverflowHandler({
+      container: breadcrumbList,
+      onChange: (_, hidden) => {
+        setHiddenBreadcrumbs(hidden);
+      }
+    });
+    // Don't want ref or carbon prefix in dependency array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const renderChildren = () => {
+    // Only BreadcrumbItems and TitleBreadcrumbs are valid children
+    const filteredBreadcrumbs = React.Children.toArray(children).filter(child => {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        return child.type === react.BreadcrumbItem || child.type === PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;
+      }
+    });
+    // We need to clone the renderProp for the overflow breadcrumb item
+    // to place it before the title breadcrumb according to the design
+    if (filteredBreadcrumbs) {
+      const overflowBreadcrumb = renderOverflowBreadcrumb?.(hiddenBreadcrumbs);
+      // If no overflow breadcrumb provided, return here with the rest of the children
+      if (!overflowBreadcrumb) {
+        return children;
+      }
+      const clonedTitleBreadcrumb = /*#__PURE__*/React.cloneElement(overflowBreadcrumb, {
+        key: 'cloned overflow breadcrumb item',
+        'data-fixed': true,
+        className: cx(`${settings.pkg.prefix}--page-header-breadcrumb-overflow-item`, {
+          [`${settings.pkg.prefix}--page-header-overflow-breadcrumb-item-with-items`]: hiddenBreadcrumbs.length
+        })
+      });
+      const clonedChildren = [...filteredBreadcrumbs];
+      clonedChildren.splice(filteredBreadcrumbs.length - 1, 0, clonedTitleBreadcrumb); // second to last position
+      return clonedChildren;
+    }
+    return children;
+  };
+  return /*#__PURE__*/React.createElement(react.Breadcrumb, _rollupPluginBabelHelpers.extends({
+    className: cx(className, `${settings.pkg.prefix}--page-header-breadcrumb-overflow`),
+    ref: componentRef
+  }, other), renderChildren());
+});
+PageHeaderBreadcrumbOverflow.displayName = 'PageHeaderBreadcrumbOverflow';
+
+exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow;

package/lib/components/PageHeader/next/PageHeaderContent.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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, { type ComponentType, type FunctionComponent } from 'react';
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+export interface PageHeaderContentProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContent.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContent
+     */
+    className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderContent's title
+     */
+    title: string;
+    /**
+     * The PageHeaderContent's contextual actions
+     */
+    contextualActions?: React.ReactNode;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+export declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/PageHeader/next/PageHeaderContent.js

@@ -0,0 +1,131 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../_virtual/index.js');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+var context = require('./context.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
+
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+
+const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderContent(_ref, ref) {
+  let {
+    className,
+    children,
+    title,
+    renderIcon: IconElement,
+    contextualActions,
+    pageActions,
+    ...other
+  } = _ref;
+  const contentRef = React.useRef(null);
+  const componentRef = ref ?? contentRef;
+  const {
+    setRefs,
+    setPageActionsInstance
+  } = context.usePageHeader();
+  const classNames = cx({
+    [`${PageHeaderUtils.blockClass}__content`]: true
+  }, className);
+  const titleRef = React.useRef(null);
+  React.useEffect(() => {
+    if (componentRef?.current) {
+      setRefs(prev => ({
+        ...prev,
+        contentRef: componentRef,
+        titleRef
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    if (pageActions) {
+      setPageActionsInstance(pageActions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageActions]);
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
+    return element.offsetHeight < element.scrollHeight;
+  };
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    titleRef.current && isEllipsisActive(titleRef.current);
+  }, [title]);
+  return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({
+    as: "div",
+    className: classNames,
+    ref: componentRef
+  }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__content__title-wrapper`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__content__start`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__content__title-container`
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__content__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+    definition: title
+  }, /*#__PURE__*/React.createElement(react.unstable_Text, {
+    ref: titleRef,
+    as: react.Heading,
+    className: `${PageHeaderUtils.blockClass}__content__title`
+  }, title)) : /*#__PURE__*/React.createElement(react.unstable_Text, {
+    ref: titleRef,
+    as: react.Heading,
+    className: `${PageHeaderUtils.blockClass}__content__title`
+  }, title)), contextualActions && /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__content__contextual-actions`
+  }, contextualActions)), pageActions), children)));
+});
+PageHeaderContent.displayName = 'PageHeaderContent';
+PageHeaderContent.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContent.
+   */
+  children: index.default.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContent
+   */
+  className: index.default.string,
+  /**
+   * The PageHeaderContent's contextual actions
+   */
+  contextualActions: index.default.node,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: index.default.node,
+  /**
+   * Provide an optional icon to render in front of the PageHeaderContent's title.
+   */
+  renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: index.default.string,
+  /**
+   * The PageHeaderContent's title
+   */
+  title: index.default.string.isRequired
+};
+
+exports.PageHeaderContent = PageHeaderContent;

package/lib/components/PageHeader/next/PageHeaderContentPageActions.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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';
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+export interface PageHeaderContentPageActionsProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentPageActions.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentPageActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    menuButtonLabel?: string;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    actions?: React.ReactNode;
+}
+export declare const PageHeaderContentPageActions: {
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The PageHeaderContent's page actions
+         */
+        actions: any;
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: any;
+    };
+};

package/lib/components/PageHeader/next/PageHeaderContentPageActions.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../_virtual/index.js');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+var utilities = require('@carbon/utilities');
+var context = require('./context.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
+
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+
+const PageHeaderContentPageActions = _ref => {
+  let {
+    className,
+    children,
+    menuButtonLabel = 'Actions',
+    actions,
+    ...other
+  } = _ref;
+  const {
+    setRefs,
+    contentActionsClipped,
+    breadcrumbActionsClipped,
+    isContentActionsInBreadcrumbBar: isInBreadcrumbBar
+  } = context.usePageHeader();
+  const classNames = cx(`${PageHeaderUtils.blockClass}__content__page-actions`, {
+    // Revisit this:
+    // May want to only add this class if there are content actions in the breadcrumb bar as well
+    [`${PageHeaderUtils.blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? breadcrumbActionsClipped : contentActionsClipped
+  }, className);
+  const containerRef = React.useRef(null);
+  const offsetRef = React.useRef(null);
+  const [menuButtonVisibility, setMenuButtonVisibility] = React.useState(false);
+  const [hiddenItems, setHiddenItems] = React.useState([]);
+
+  // need to set the grid columns width based on the menu button's width
+  // to avoid overlapping when resizing
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    if (menuButtonVisibility && offsetRef.current) {
+      const width = offsetRef.current.offsetWidth;
+      document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  React.useEffect(() => {
+    if (isInBreadcrumbBar) {
+      setRefs(prev => ({
+        ...prev,
+        breadcrumbActions: containerRef
+      }));
+    } else {
+      setRefs(prev => ({
+        ...prev,
+        contentActions: containerRef
+      }));
+    }
+  }, [isInBreadcrumbBar, setRefs]);
+  React.useEffect(() => {
+    if (!containerRef.current || !Array.isArray(actions)) {
+      return;
+    }
+    utilities.createOverflowHandler({
+      container: containerRef.current,
+      // exclude the hidden menu button from children
+      maxVisibleItems: containerRef.current.children.length - 1,
+      onChange: (visible, hidden) => {
+        setHiddenItems(actions?.slice(visible.length));
+        if (hidden.length > 0) {
+          setMenuButtonVisibility(true);
+        }
+      }
+    });
+  }, [actions]);
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: classNames,
+    ref: containerRef
+  }, other), Array.isArray(actions) && /*#__PURE__*/React.createElement(React.Fragment, null, actions.map(action => /*#__PURE__*/React.createElement("div", {
+    key: action.id
+  }, /*#__PURE__*/React.cloneElement(action.body, {
+    ...action.body.props,
+    onClick: action.onClick
+  }))), /*#__PURE__*/React.createElement("span", {
+    "data-offset": true,
+    "data-hidden": true,
+    ref: offsetRef
+  }, /*#__PURE__*/React.createElement(react.MenuButton, {
+    menuAlignment: "bottom-end",
+    label: menuButtonLabel,
+    size: "md"
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({
+    key: item.id,
+    onClick: item.onClick
+  }, item.menuItem)))))));
+};
+PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
+PageHeaderContentPageActions.propTypes = {
+  /**
+   * The PageHeaderContent's page actions
+   */
+  actions: index.default.oneOfType([index.default.node, index.default.array]),
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentPageActions.
+   */
+  children: index.default.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentPageActions
+   */
+  className: index.default.string,
+  /**
+   * The PageHeaderContent's collapsible Menu button label
+   */
+  menuButtonLabel: index.default.string
+};
+
+exports.PageHeaderContentPageActions = PageHeaderContentPageActions;

package/lib/components/PageHeader/next/PageHeaderContentText.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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';
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+export interface PageHeaderContentTextProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentText.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentText
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's subtitle
+     */
+    subtitle?: string;
+}
+export declare const PageHeaderContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: any;
+    };
+};

package/lib/components/PageHeader/next/PageHeaderContentText.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../_virtual/index.js');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+
+const PageHeaderContentText = _ref => {
+  let {
+    className,
+    children,
+    subtitle,
+    ...other
+  } = _ref;
+  const classNames = cx({
+    [`${PageHeaderUtils.blockClass}__content__body`]: true
+  }, className);
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: classNames
+  }, other), subtitle && /*#__PURE__*/React.createElement(react.unstable_Text, {
+    as: "h3",
+    className: `${PageHeaderUtils.blockClass}__content__subtitle`
+  }, subtitle), children);
+};
+PageHeaderContentText.displayName = 'PageHeaderContentText';
+PageHeaderContentText.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentText.
+   */
+  children: index.default.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentText
+   */
+  className: index.default.string,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: index.default.string
+};
+
+exports.PageHeaderContentText = PageHeaderContentText;