@carbon/react 1.79.0 → 1.80.0

package/lib/components/ContainedList/index.js

@@ -14,7 +14,7 @@ var ContainedList = require('./ContainedList.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
 
 ContainedList["default"].ContainedListItem = ContainedListItem["default"];
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== 'production') {
   deprecateFieldOnObject.deprecateFieldOnObject(ContainedList["default"], 'ContainedListItem', ContainedListItem["default"]);
 }
 

package/lib/components/DataTable/DataTable.d.ts

@@ -201,10 +201,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
     size?: DataTableSize;
-    sortRow?: (cellA: DataTableCell<any>, cellB: DataTableCell<any>, sortRowOptions: {
+    sortRow?: (cellA: any, cellB: any, sortRowOptions: {
         sortDirection: DataTableSortState;
         sortStates: Record<DataTableSortState, DataTableSortState>;
         locale: string;
+        key: string;
+        compare: (a: number | string, b: number | string, locale?: string) => number;
     }) => number;
     stickyHeader?: boolean;
     useStaticWidth?: boolean;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/DatePicker/DatePicker.js

@@ -369,7 +369,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       nextArrow: rightArrowHTML,
       prevArrow: leftArrowHTML,
       onChange: function () {
-        if (savedOnChange && !readOnly) {
+        if (!readOnly) {
           savedOnChange(...arguments);
         }
       },

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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';
 export interface FluidTextAreaSkeletonProps {
     /**

package/lib/components/InlineLoading/InlineLoading.js

@@ -63,9 +63,9 @@ const InlineLoading = _ref => {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
-    if (status === 'inactive' || status === 'active') {
+    if (status === 'active') {
       if (!iconDescription) {
-        iconLabel = status === 'active' ? 'loading' : 'not loading';
+        iconLabel = 'loading';
       }
       return /*#__PURE__*/React__default["default"].createElement(Loading["default"], {
         small: true,
@@ -74,6 +74,14 @@ const InlineLoading = _ref => {
         active: status === 'active'
       });
     }
+    if (status === 'inactive') {
+      if (!iconDescription) {
+        iconLabel = 'not loading';
+      }
+      return /*#__PURE__*/React__default["default"].createElement("title", {
+        className: `${prefix}--inline-loading__inactive-status`
+      }, iconLabel);
+    }
     return undefined;
   };
   const loadingText = description && /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Layer/LayerLevel.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 export declare const levels: readonly ["one", "two", "three"];
 export declare const MIN_LEVEL = 0;
 export declare const MAX_LEVEL: number;

package/lib/components/Menu/Menu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Menu/MenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2023, 2025
  *
  * 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, { ChangeEventHandler, ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import React, { ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
     /**
      * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
@@ -48,7 +48,7 @@ export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'>
     /**
      * Provide an optional function to be called when the selection state changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (checked: boolean) => void;
     /**
      * Controls the state of this option.
      */
@@ -94,7 +94,7 @@ export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>
     /**
      * Provide an optional function to be called when the selection changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (selectedItem: Item) => void;
     /**
      * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
      */

package/lib/components/Menu/MenuItem.js

@@ -343,7 +343,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
   const [selection, setSelection] = useControllableState.useControllableState({
     value: selectedItem,
     onChange,
-    defaultValue: defaultSelectedItem
+    defaultValue: defaultSelectedItem ?? {}
   });
   function handleClick(item, e) {
     setSelection(item);

package/lib/components/Modal/Modal.js

@@ -208,7 +208,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
         const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
+        const primaryFocusElement = containerElement && (containerElement.querySelector(selectorPrimaryFocus) || danger && containerElement.querySelector(`.${prefix}--btn--secondary`));
         if (primaryFocusElement) {
           return primaryFocusElement;
         }

package/lib/components/ModalWrapper/ModalWrapper.d.ts

@@ -36,7 +36,7 @@ interface ModelWrapperState {
     isOpen: boolean;
 }
 export default class ModalWrapper extends React.Component<ModalWrapperProps, ModelWrapperState> {
-    if(__DEV__: any): void;
+    if(isDev: any): void;
     static propTypes: {
         buttonTriggerClassName: PropTypes.Requireable<string>;
         buttonTriggerText: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -26,6 +26,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 let didWarnAboutDeprecation = false;
+process.env.NODE_ENV !== 'production';
 class ModalWrapper extends React__default["default"].Component {
   constructor() {
     super(...arguments);
@@ -61,7 +62,7 @@ class ModalWrapper extends React__default["default"].Component {
       handleSubmit?.(evt);
     });
   }
-  if(__DEV__) {
+  if(isDev) {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;
   }

package/lib/components/Notification/Notification.js

@@ -822,7 +822,7 @@ Callout.propTypes = {
 
 let didWarnAboutDeprecation = false;
 const StaticNotification = props => {
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`StaticNotification` has been renamed to `Callout`.' + 'Run the following codemod to automatically update usages in your' + 'project: `npx @carbon/upgrade migrate refactor-to-callout --write`') : void 0;
     didWarnAboutDeprecation = true;
   }

package/lib/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -75,7 +75,7 @@ const triggerButtonPositionFactors = {
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant__default["default"](false) : void 0;
   }
   const {
@@ -212,7 +212,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   };
   const handleClickOutside = evt => {
-    if (open && (!menuBodyRef.current || !menuBodyRef.current.contains(evt.target))) {
+    if (open && (!menuBodyRef.current || evt.target instanceof Node && !menuBodyRef.current.contains(evt.target))) {
       closeMenu();
     }
   };
@@ -325,7 +325,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.cloneElement(menuBody, {
     'data-floating-menu-direction': direction
   }));
-  return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(ClickListener.ClickListener, {
     onClickOutside: handleClickOutside
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--overflow-menu__wrapper`,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -65,9 +65,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(funct
       closeMenu();
     }
   }
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning.warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
-  }
+  process.env.NODE_ENV !== "production" ? warning.warning(!!closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
   const overflowMenuBtnClasses = cx__default["default"](`${prefix}--overflow-menu-options__btn`, className);
   const overflowMenuItemClasses = cx__default["default"](`${prefix}--overflow-menu-options__option`, {
     [`${prefix}--overflow-menu--divider`]: hasDivider,

package/lib/components/OverflowMenuV2/index.js

@@ -20,7 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 let didWarnAboutDeprecation = false;
 function OverflowMenuV2(props) {
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<OverflowMenuV2>` is deprecated and will be removed in the next major version. Use `<OverflowMenu>` with the `enable-v12-overflowmenu` feature flag instead.') : void 0;
     didWarnAboutDeprecation = true;
   }

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

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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';
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+interface PageHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+interface PageHeaderBreadcrumbBarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+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 subtitle
+     */
+    subtitle?: string;
+    /**
+     * The PageHeaderContent's contextual actions
+     */
+    contextualActions?: React.ReactNode;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+interface PageHeaderHeroImageProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderHeroImage.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderHeroImage
+     */
+    className?: string;
+}
+declare const PageHeaderHeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+interface PageHeaderTabBarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };

package/lib/components/PageHeader/PageHeader.js

@@ -0,0 +1,260 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var layout = require('@carbon/layout');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
+require('../Text/index.js');
+var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
+require('../Tooltip/Tooltip.js');
+var AspectRatio = require('../AspectRatio/AspectRatio.js');
+var Text = require('../Text/Text.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _p, _p2, _p3;
+
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+
+const PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function PageHeader(_ref, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header`]: true
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, other), _p || (_p = /*#__PURE__*/React__default["default"].createElement("p", null, "page header")), children);
+});
+PageHeader.displayName = 'PageHeader';
+
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__breadcrumb-bar`]: true
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, other), _p2 || (_p2 = /*#__PURE__*/React__default["default"].createElement("p", null, "page header breadcrumb bar")), children);
+});
+PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+
+const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderContent(_ref3, ref) {
+  let {
+    className,
+    children,
+    title,
+    subtitle,
+    renderIcon: IconElement,
+    contextualActions,
+    pageActions,
+    ...other
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__content`]: true
+  }, className);
+  const titleRef = React.useRef(null);
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
+    return element.offsetHeight < element.scrollHeight;
+  };
+  React.useLayoutEffect(() => {
+    titleRef.current && isEllipsisActive(titleRef.current);
+  }, [title]);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__title-wrapper`
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__start`
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__title-container`
+  }, IconElement && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__icon`
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default["default"].createElement(DefinitionTooltip.DefinitionTooltip, {
+    definition: title
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${prefix}--page-header__content__title`
+  }, title)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${prefix}--page-header__content__title`
+  }, title)), contextualActions && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__contextual-actions`
+  }, contextualActions)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__end`
+  }, pageActions && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__page-actions`
+  }, pageActions))), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "h3",
+    className: `${prefix}--page-header__content__subtitle`
+  }, subtitle), children && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__content__body`
+  }, children));
+});
+PageHeaderContent.displayName = 'PageHeaderContent';
+PageHeaderContent.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContent.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContent
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Provide an optional icon to render in front of the PageHeaderContent's title.
+   */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * The PageHeaderContent's title
+   */
+  title: PropTypes__default["default"].string.isRequired,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's contextual actions
+   */
+  contextualActions: PropTypes__default["default"].node,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes__default["default"].node
+};
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderHeroImage(_ref4, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref4;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__hero-image`]: true
+  }, className);
+  const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
+  const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
+  return /*#__PURE__*/React__default["default"].createElement(AspectRatio["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other, {
+    ratio: isLg ? '2x1' : '3x2'
+  }), children);
+});
+PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
+PageHeaderHeroImage.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderHeroImage.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderHeroImage
+   */
+  className: PropTypes__default["default"].string
+};
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+
+const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref5, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref5;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__tab-bar`]: true
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, other), _p3 || (_p3 = /*#__PURE__*/React__default["default"].createElement("p", null, "page header tab bar")), children);
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+/**
+ * -------
+ * Exports
+ * -------
+ */
+const Root = PageHeader;
+Root.displayName = 'PageHeader.Root';
+const BreadcrumbBar = PageHeaderBreadcrumbBar;
+BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+const Content = PageHeaderContent;
+Content.displayName = 'PageHeaderContent';
+const HeroImage = PageHeaderHeroImage;
+HeroImage.displayName = 'PageHeaderHeroImage';
+const TabBar = PageHeaderTabBar;
+TabBar.displayName = 'PageHeaderTabBar';
+
+exports.BreadcrumbBar = BreadcrumbBar;
+exports.Content = Content;
+exports.HeroImage = HeroImage;
+exports.PageHeader = PageHeader;
+exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar;
+exports.PageHeaderContent = PageHeaderContent;
+exports.PageHeaderHeroImage = PageHeaderHeroImage;
+exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.Root = Root;
+exports.TabBar = TabBar;

package/lib/components/PageHeader/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/lib/components/PageHeader/index.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PageHeader = require('./PageHeader.js');
+
+
+
+exports.BreadcrumbBar = PageHeader.BreadcrumbBar;
+exports.Content = PageHeader.Content;
+exports.HeroImage = PageHeader.HeroImage;
+exports.PageHeader = PageHeader.PageHeader;
+exports.PageHeaderBreadcrumbBar = PageHeader.PageHeaderBreadcrumbBar;
+exports.PageHeaderContent = PageHeader.PageHeaderContent;
+exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
+exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
+exports.Root = PageHeader.Root;
+exports.TabBar = PageHeader.TabBar;

package/lib/components/PasswordInput/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 ControlledPasswordInput from '../TextInput/ControlledPasswordInput';
 import PasswordInput from '../TextInput/PasswordInput';
 export { ControlledPasswordInput, PasswordInput };