@carbon/ibm-products 2.98.0 → 2.99.0

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -7,7 +7,7 @@
 
 import { pkg } from "../../../../../settings.js";
 import { getNodeTextContent } from "../../../../../global/js/utils/getNodeTextContent.js";
-import { useId } from "../../../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../../../global/js/utils/useId.js";
 import { isColumnVisible } from "./common.js";
 import DraggableElement from "../../DraggableElement.js";
 import React from "react";
@@ -27,7 +27,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 const matchedColsById = (col1, col2) => col1 && col2 && col1.id === col2.id;
 const DraggableItemsList = ({ columns, filterString, id, moveElement, onSelectColumn, setAriaRegionText }) => {
 	const draggableClass = `${blockClass}__draggable-item`;
-	const generatedId = useId();
+	const generatedId = useId$1();
 	const visibleCols = columns.filter((colDef) => getNodeTextContent(colDef.Header).trim().length !== 0).filter(Boolean).filter((colDef) => !colDef.isAction).filter((colDef) => colDef.id !== "spacer").filter((colDef) => {
 		return filterString.length === 0 || getNodeTextContent(colDef.Header).toLowerCase().includes(filterString);
 	});

package/es/components/EmptyStates/assets/ErrorIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/ErrorIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const ErrorIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NoDataIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/NoDataIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const NoDataIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NoTagsIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/NoTagsIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const NoTagsIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NotFoundIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/NotFoundIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const NotFoundIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NotificationsIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/NotificationsIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const NotificationsIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import { useId } from "../../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../../global/js/utils/useId.js";
 import React from "react";
 import PropTypes from "prop-types";
 //#region src/components/EmptyStates/assets/UnauthorizedIllustration.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--empty-state`;
 const UnauthorizedIllustration = ({ theme, size, alt, ...rest }) => {
-	const svgId = useId();
+	const svgId = useId$1();
 	return /* @__PURE__ */ React.createElement("svg", {
 		...rest,
 		xmlns: "http://www.w3.org/2000/svg",

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -13,7 +13,7 @@ import { usePresence } from "../../global/js/hooks/usePresence.js";
 import { usePrefersReducedMotion } from "../../global/js/hooks/usePrefersReducedMotion.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import { prepareProps } from "../../global/js/utils/props-helper.js";
-import { useId } from "../../global/js/utils/useId.js";
+import { useId as useId$1 } from "../../global/js/utils/useId.js";
 import { NotificationsEmptyState } from "../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js";
 import { getSupportedLocale } from "../../global/js/utils/getSupportedLocale.js";
 import { timeAgo } from "./utils.js";
@@ -86,7 +86,7 @@ const NotificationsPanel = React.forwardRef(({ className, data, dateTimeLocale,
 	const [allNotifications, setAllNotifications] = useState([]);
 	const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
 	usePrefix();
-	const headingId = useId();
+	const headingId = useId$1();
 	const isClickOnTrigger = useRef(false);
 	const { shouldRender } = usePresence(open, notificationPanelRef, usePrefersReducedMotion() ? "notifications-panel-exit-reduced" : "notifications-panel-fade-out");
 	useEffect(() => {

package/es/components/PageHeader/next/PageHeader.d.ts

@@ -36,6 +36,16 @@ export interface PageHeaderProps {
      * Callback fired when the content actions become clipped
      */
     onContentActionsClipped?: (clipped: boolean) => void;
+    /**
+     * Applies Carbon's full-width grid mode to all internal sub-component grids.
+     * Pass `true` for full width or `'xl'` for full width with the xl padding
+     * override (matching the deprecated PageHeader `fullWidthGrid` behavior).
+     */
+    fullWidthGrid?: boolean | 'xl';
+    /**
+     * Applies Carbon's narrow grid mode to all internal sub-component grids.
+     */
+    narrowGrid?: boolean;
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
 /**

package/es/components/PageHeader/next/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeader.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeader.tsx"],"names":[],"mappings":"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"}

package/es/components/PageHeader/next/PageHeader.js

@@ -32,7 +32,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 * LICENSE file in the root directory of this source tree.
 */
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
-const PageHeader = React.forwardRef(function PageHeader({ className, children, onContentFullyCollapsed, onTitleClipped, onContentActionsClipped, ...other }, ref) {
+const PageHeader = React.forwardRef(function PageHeader({ className, children, onContentFullyCollapsed, onTitleClipped, onContentActionsClipped, fullWidthGrid, narrowGrid, ...other }, ref) {
 	const [refs, setRefs] = useState({});
 	const [pageActionsInstance, setPageActionsInstance] = useState(null);
 	const [disableStickyTabBar, setDisableStickyTabBar] = useState(false);
@@ -41,7 +41,8 @@ const PageHeader = React.forwardRef(function PageHeader({ className, children, o
 	const classNames = (0, import_classnames.default)({
 		[`${blockClass}`]: true,
 		[`${blockClass}__next`]: true,
-		[`${blockClass}--disable-sticky-tab-bar`]: disableStickyTabBar
+		[`${blockClass}--disable-sticky-tab-bar`]: disableStickyTabBar,
+		[`${blockClass}--width--xl`]: fullWidthGrid === "xl"
 	}, className);
 	useResizeObserver(componentRef, () => {
 		if (componentRef?.current) {
@@ -130,7 +131,9 @@ const PageHeader = React.forwardRef(function PageHeader({ className, children, o
 		setPageActionsInstance,
 		observerState,
 		disableStickyTabBar,
-		setDisableStickyTabBar
+		setDisableStickyTabBar,
+		fullWidthGrid,
+		narrowGrid
 	} }, /* @__PURE__ */ React.createElement("div", {
 		className: classNames,
 		ref: componentRef,

package/es/components/PageHeader/next/PageHeaderBreadcrumbBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderBreadcrumbBar.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderBreadcrumbBar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1E,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,WAAW,CAAC;AAEnB;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;;OAGG;IACH,cAAc,CAAC,EACX,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,qGAkFlC,CAAC"}
+{"version":3,"file":"PageHeaderBreadcrumbBar.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderBreadcrumbBar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1E,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,WAAW,CAAC;AAEnB;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;;OAGG;IACH,cAAc,CAAC,EACX,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,qGAyFlC,CAAC"}

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

@@ -21,7 +21,7 @@ import { Column, Grid } from "@carbon/react";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const PageHeaderBreadcrumbBar = React.forwardRef(function PageHeaderBreadcrumbBar({ border = true, className, children, renderIcon: IconElement, contentActions, contentActionsFlush, pageActions, pageActionsFlush, actionsAriaLabel = "Page header actions", ...other }, ref) {
 	const context = usePageHeader();
-	const { pageActionsInstance: globalActions, observerState } = context;
+	const { pageActionsInstance: globalActions, observerState, fullWidthGrid, narrowGrid } = context;
 	const classNames = (0, import_classnames.default)({
 		[`${blockClass}__breadcrumb-bar`]: true,
 		[`${blockClass}__breadcrumb-bar-border`]: border,
@@ -41,14 +41,17 @@ const PageHeaderBreadcrumbBar = React.forwardRef(function PageHeaderBreadcrumbBa
 		className: classNames,
 		ref,
 		...other
-	}, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Column, {
+	}, /* @__PURE__ */ React.createElement(Grid, {
+		fullWidth: !!fullWidthGrid,
+		narrow: narrowGrid
+	}, /* @__PURE__ */ React.createElement(Column, {
 		lg: 16,
 		md: 8,
 		sm: 4
 	}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__breadcrumb-container` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__breadcrumb-wrapper` }, IconElement && /* @__PURE__ */ React.createElement("div", {
 		className: `${blockClass}__breadcrumb__icon`,
 		"aria-hidden": "true"
-	}, /* @__PURE__ */ React.createElement(IconElement, null)), children), /* @__PURE__ */ React.createElement("div", {
+	}, /* @__PURE__ */ React.createElement(IconElement, null)), children), (contentActions || pageActions) && /* @__PURE__ */ React.createElement("div", {
 		className: `${blockClass}__breadcrumb__actions`,
 		role: "toolbar",
 		"aria-label": actionsAriaLabel

package/es/components/PageHeader/next/PageHeaderBreadcrumbPageActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderBreadcrumbPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderBreadcrumbPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAWnC;;;;GAIG;AAEH,MAAM,WAAW,kCAAkC;IACjD;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACnD;;OAEG;IACH,OAAO,EAAE,kCAAkC,EAAE,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EACP,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,kBAAkB,GAClB,eAAe,CAAC;CACrB;AAED,eAAO,MAAM,+BAA+B;kFAOzC,oCAAoC;;;QA4ErC;;WAEG;;;;;;;QASH;;WAEG;;QAUH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAtCJ,CAAC"}
+{"version":3,"file":"PageHeaderBreadcrumbPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderBreadcrumbPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC;;;;GAIG;AAEH,MAAM,WAAW,kCAAkC;IACjD;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACnD;;OAEG;IACH,OAAO,EAAE,kCAAkC,EAAE,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EACP,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,kBAAkB,GAClB,eAAe,CAAC;CACrB;AAED,eAAO,MAAM,+BAA+B;kFAOzC,oCAAoC;;;QAgErC;;WAEG;;;;;;;QASH;;WAEG;;QAUH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAtCJ,CAAC"}

package/es/components/PageHeader/next/PageHeaderBreadcrumbPageActions.js

@@ -10,7 +10,7 @@ import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { blockClass } from "../PageHeaderUtils.js";
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { Button, FeatureFlags, OverflowMenu, OverflowMenuItem } from "@carbon/react";
+import { Button, FeatureFlags, MenuItem, OverflowMenu } from "@carbon/react";
 import { createOverflowHandler } from "@carbon/utilities";
 //#region src/components/PageHeader/next/PageHeaderBreadcrumbPageActions.tsx
 /**
@@ -38,12 +38,6 @@ const PageHeaderBreadcrumbPageActions = ({ actions, className, overflowMenuLabel
 	return /* @__PURE__ */ React.createElement("ul", {
 		ref: containerRef,
 		className: classNames,
-		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "flex-end",
-			inlineSize: "50%"
-		},
 		...other
 	}, actions.map((item) => /* @__PURE__ */ React.createElement("li", {
 		key: item.id,
@@ -59,13 +53,13 @@ const PageHeaderBreadcrumbPageActions = ({ actions, className, overflowMenuLabel
 		"data-offset": true,
 		"data-hidden": true,
 		"data-floating-menu-container": true,
-		style: { position: "relative" }
+		className: `${blockClass}__breadcrumb-page-actions__overflow-item`
 	}, /* @__PURE__ */ React.createElement(FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ React.createElement(OverflowMenu, {
 		size: buttonSize,
 		"aria-label": overflowMenuLabel
-	}, hiddenItems.map((item) => /* @__PURE__ */ React.createElement(OverflowMenuItem, {
+	}, hiddenItems.map((item) => /* @__PURE__ */ React.createElement(MenuItem, {
 		key: item.id,
-		itemText: item.label,
+		label: item.label,
 		onClick: item.onClick
 	}))))));
 };

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

@@ -26,9 +26,10 @@ export interface PageHeaderContentProps {
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**
-     * The PageHeaderContent's title
+     * The PageHeaderContent's title. Accepts a string or ReactNode.
+     * If a string is provided, TruncatedText is used with automatic overflow handling.
      */
-    title: string;
+    title: React.ReactNode;
     /**
      * Specify the element or component used to render the title.
      */

package/es/components/PageHeader/next/PageHeaderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAyB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGxE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,OAAO,CAAC;IACnE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,iBAAiB,+FAuF5B,CAAC"}
+{"version":3,"file":"PageHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAyB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGxE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,OAAO,CAAC;IACnE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,iBAAiB,+FAwG5B,CAAC"}

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

@@ -10,7 +10,7 @@ import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { blockClass } from "../PageHeaderUtils.js";
 import { TruncatedText } from "../../TruncatedText/TruncatedText.js";
 import { usePageHeader } from "./context.js";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useId, useRef } from "react";
 import PropTypes from "prop-types";
 import { Column, Grid, Section } from "@carbon/react";
 //#region src/components/PageHeader/next/PageHeaderContent.tsx
@@ -24,10 +24,11 @@ var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const PageHeaderContent = React.forwardRef(function PageHeaderContent({ className, children, title, titleAs: TitleTag = "h1", titleTruncate, renderIcon: IconElement, contextualActions, pageActions, ...other }, ref) {
 	const contentRef = useRef(null);
 	const componentRef = ref ?? contentRef;
-	const { setRefs, setPageActionsInstance, observerState } = usePageHeader();
+	const { setRefs, setPageActionsInstance, observerState, fullWidthGrid, narrowGrid } = usePageHeader();
 	const classNames = (0, import_classnames.default)({ [`${blockClass}__content`]: true }, className);
 	const titleRef = useRef(null);
 	const titleLines = titleTruncate ?? (contextualActions ? 1 : 2);
+	`${blockClass}${useId()}`;
 	useEffect(() => {
 		if (componentRef?.current) setRefs((prev) => ({
 			...prev,
@@ -44,21 +45,27 @@ const PageHeaderContent = React.forwardRef(function PageHeaderContent({ classNam
 		className: classNames,
 		ref: componentRef,
 		...other
-	}, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Column, {
+	}, /* @__PURE__ */ React.createElement(Grid, {
+		fullWidth: !!fullWidthGrid,
+		narrow: narrowGrid
+	}, /* @__PURE__ */ React.createElement(Column, {
 		lg: 16,
 		md: 8,
 		sm: 4
-	}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__title-wrapper` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__start` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__title-container` }, IconElement && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__icon` }, /* @__PURE__ */ React.createElement(IconElement, null)), /* @__PURE__ */ React.createElement(TitleTag, {
+	}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__title-wrapper` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__start` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__title-container` }, IconElement && /* @__PURE__ */ React.createElement("div", {
+		className: `${blockClass}__content__icon`,
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React.createElement(IconElement, null)), /* @__PURE__ */ React.createElement(TitleTag, {
 		ref: titleRef,
 		className: `${blockClass}__content__title`
-	}, /* @__PURE__ */ React.createElement(TruncatedText, {
+	}, typeof title === "string" ? /* @__PURE__ */ React.createElement(TruncatedText, {
 		id: `${blockClass}__content__title__truncatedText`,
 		className: `${blockClass}__content__title-text`,
 		align: "bottom",
 		value: title,
 		lines: titleLines,
 		type: "tooltip"
-	}))), contextualActions && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__contextual-actions` }, contextualActions)), typeof pageActions === "function" ? pageActions(observerState) : pageActions), children)));
+	}) : /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__content__title-text` }, title))), contextualActions && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content__contextual-actions` }, contextualActions)), typeof pageActions === "function" ? pageActions(observerState) : pageActions), children)));
 });
 PageHeaderContent.displayName = "PageHeaderContent";
 PageHeaderContent.propTypes = {
@@ -83,13 +90,9 @@ PageHeaderContent.propTypes = {
 	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 	/**
-	* The PageHeaderContent's subtitle
-	*/
-	subtitle: PropTypes.string,
-	/**
 	* The PageHeaderContent's title
 	*/
-	title: PropTypes.string.isRequired,
+	title: PropTypes.node.isRequired,
 	/**
 	* Specify the element or component used to render the title.
 	*/

package/es/components/PageHeader/next/PageHeaderContentPageActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderContentPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContentPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,4BAA4B;kEAMtC,iCAAiC;;;QAqHlC;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAnBJ,CAAC"}
+{"version":3,"file":"PageHeaderContentPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContentPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,4BAA4B;kEAMtC,iCAAiC;;;QA0HlC;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAnBJ,CAAC"}

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

@@ -7,6 +7,7 @@
 
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
+import { pkg } from "../../../settings.js";
 import { useIsomorphicEffect } from "../../../global/js/hooks/useIsomorphicEffect.js";
 import { blockClass } from "../PageHeaderUtils.js";
 import { usePageHeader } from "./context.js";
@@ -31,9 +32,9 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 	const [hiddenItems, setHiddenItems] = useState([]);
 	const [hasMounted, setHasMounted] = useState(false);
 	useIsomorphicEffect(() => {
-		if (menuButtonVisibility && offsetRef.current) {
+		if (menuButtonVisibility && offsetRef.current && containerRef.current) {
 			const width = offsetRef.current.offsetWidth;
-			document.documentElement.style.setProperty("--page-header-title-grid-width", `${width}px`);
+			(containerRef.current.closest(`.${blockClass}__next`) ?? containerRef.current).style.setProperty(`--${pkg.prefix}-page-header-title-grid-width`, `${width}px`);
 		}
 	}, [menuButtonVisibility]);
 	useEffect(() => {

package/es/components/PageHeader/next/PageHeaderScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderScrollButton.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderScrollButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAc,MAAM,eAAe,CAAC;AAM5D,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,oGAmEjC,CAAC"}
+{"version":3,"file":"PageHeaderScrollButton.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderScrollButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAc,MAAM,eAAe,CAAC;AAO5D,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,oGA6EjC,CAAC"}

package/es/components/PageHeader/next/PageHeaderScrollButton.js

@@ -7,6 +7,7 @@
 
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
+import pconsole_default from "../../../global/js/utils/pconsole.js";
 import { pkg } from "../../../settings.js";
 import { usePageHeader } from "./context.js";
 import { scrollableAncestor } from "./utils.js";
@@ -22,6 +23,8 @@ import { ChevronUp } from "@carbon/react/icons";
 */
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const PageHeaderScrollButton = React.forwardRef(function PageHeaderExpander({ className, children, label, onClick, collapseText = "Collapse", expandText = "Expand", ...other }, ref) {
+	if (!collapseText) pconsole_default.warn("PageHeaderScrollButton: The `collapseText` prop is the accessible label for the collapse button. Provide a translated string.");
+	if (!expandText) pconsole_default.warn("PageHeaderScrollButton: The `expandText` prop is the accessible label for the expand button. Provide a translated string.");
 	const { refs, observerState } = usePageHeader();
 	const fullyCollapsed = observerState.fullyCollapsed;
 	const handleScroller = (isFullyCollapsed) => {

package/es/components/PageHeader/next/PageHeaderTabBar.js

@@ -21,7 +21,7 @@ import { Column, Grid } from "@carbon/react";
 */
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const PageHeaderTabBar = React.forwardRef(function PageHeaderTabBar({ className, children, tags, scroller, disableStickyTabBar = false, ...other }, ref) {
-	const { setDisableStickyTabBar } = usePageHeader();
+	const { setDisableStickyTabBar, fullWidthGrid, narrowGrid } = usePageHeader();
 	useEffect(() => {
 		setDisableStickyTabBar?.(disableStickyTabBar);
 	}, [disableStickyTabBar, setDisableStickyTabBar]);
@@ -31,7 +31,11 @@ const PageHeaderTabBar = React.forwardRef(function PageHeaderTabBar({ className,
 		className: classNames,
 		ref,
 		...other
-	}, /* @__PURE__ */ React.createElement(Grid, { condensed: true }, /* @__PURE__ */ React.createElement(Column, {
+	}, /* @__PURE__ */ React.createElement(Grid, {
+		condensed: true,
+		fullWidth: !!fullWidthGrid,
+		narrow: narrowGrid
+	}, /* @__PURE__ */ React.createElement(Column, {
 		lg: 16,
 		md: 8,
 		sm: 4
@@ -40,7 +44,11 @@ const PageHeaderTabBar = React.forwardRef(function PageHeaderTabBar({ className,
 		className: classNames,
 		ref,
 		...other
-	}, /* @__PURE__ */ React.createElement(Grid, { condensed: true }, /* @__PURE__ */ React.createElement(Column, {
+	}, /* @__PURE__ */ React.createElement(Grid, {
+		condensed: true,
+		fullWidth: !!fullWidthGrid,
+		narrow: narrowGrid
+	}, /* @__PURE__ */ React.createElement(Column, {
 		lg: 16,
 		md: 8,
 		sm: 4

package/es/components/PageHeader/next/PageHeaderTagOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderTagOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderTagOverflow.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IAEzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAClB,iBAAiB,EAAE,WAAW,EAAE,EAChC,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,EACtD,WAAW,EAAE,OAAO,EACpB,SAAS,CAAC,EAAE,MAAM,KACf,KAAK,CAAC,YAAY,CAAC;IACxB,oBAAoB,CAAC,EAAE,CACrB,iBAAiB,EAAE,WAAW,EAAE,KAC7B,KAAK,CAAC,YAAY,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB,mGA8EhC,CAAC"}
+{"version":3,"file":"PageHeaderTagOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderTagOverflow.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IAEzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAClB,iBAAiB,EAAE,WAAW,EAAE,EAChC,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,EACtD,WAAW,EAAE,OAAO,EACpB,SAAS,CAAC,EAAE,MAAM,KACf,KAAK,CAAC,YAAY,CAAC;IACxB,oBAAoB,CAAC,EAAE,CACrB,iBAAiB,EAAE,WAAW,EAAE,KAC7B,KAAK,CAAC,YAAY,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB,mGAyFhC,CAAC"}

package/es/components/PageHeader/next/PageHeaderTagOverflow.js

@@ -28,13 +28,18 @@ const PageHeaderTagOverflow = React.forwardRef(({ renderOverflowTag, renderPopov
 	const tagsContainerRef = ref || localRef;
 	useEffect(() => {
 		const handleResize = () => {
+			if (openPopover) (tagsContainerRef.current?.querySelector(`#${overflowButtonId}`))?.focus();
 			setOpenPopover(false);
 		};
 		window.addEventListener("resize", handleResize);
 		return () => {
 			window.removeEventListener("resize", handleResize);
 		};
-	}, []);
+	}, [
+		openPopover,
+		overflowButtonId,
+		tagsContainerRef
+	]);
 	const handleOverflowClick = useCallback((event) => {
 		event.stopPropagation();
 		setOpenPopover((prev) => !prev);
@@ -56,7 +61,10 @@ const PageHeaderTagOverflow = React.forwardRef(({ renderOverflowTag, renderPopov
 		"data-fixed": true,
 		"aria-labelledby": overflowButtonId,
 		className: (0, import_classnames.default)(`${pkg.prefix}--page-header--tag-overflow-popover`, { [`${pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length })
-	}, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover, overflowButtonId), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__tags-popover-list` }, renderPopoverContent?.(hiddenTags)))));
+	}, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover, overflowButtonId), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement("ul", {
+		className: `${blockClass}__tags-popover-list`,
+		"aria-label": "Hidden tags"
+	}, renderPopoverContent?.(hiddenTags)))));
 });
 PageHeaderTagOverflow.displayName = "PageHeaderTagOverflow";
 //#endregion

package/es/components/PageHeader/next/context.d.ts

@@ -31,6 +31,8 @@ type PageHeaderContextType = {
     isFunctionalContentActions?: boolean;
     disableStickyTabBar?: boolean;
     setDisableStickyTabBar?: React.Dispatch<React.SetStateAction<boolean>>;
+    fullWidthGrid?: boolean | 'xl';
+    narrowGrid?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType>;
 export declare function usePageHeader(): PageHeaderContextType;

package/es/components/PageHeader/next/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D;;;;GAIG;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IAC9D,mBAAmB,CAAC,EAChB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CACpC,KAAK,CAAC,cAAc,CAClB,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CACxE,CACF,CAAC;IACF,aAAa,EAAE,uBAAuB,CAAC;IACvC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAc5B,CAAC;AAEH,wBAAgB,aAAa,0BAQ5B"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D;;;;GAIG;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IAC9D,mBAAmB,CAAC,EAChB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CACpC,KAAK,CAAC,cAAc,CAClB,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CACxE,CACF,CAAC;IACF,aAAa,EAAE,uBAAuB,CAAC;IACvC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAgB5B,CAAC;AAEH,wBAAgB,aAAa,0BAQ5B"}

package/es/components/PageHeader/next/context.js

@@ -24,7 +24,9 @@ const PageHeaderContext = createContext({
 		contentActionsClipped: false
 	},
 	disableStickyTabBar: false,
-	setDisableStickyTabBar: () => {}
+	setDisableStickyTabBar: () => {},
+	fullWidthGrid: void 0,
+	narrowGrid: void 0
 });
 function usePageHeader() {
 	const context = useContext(PageHeaderContext);

package/es/components/StatusIcon/StatusIcon.d.ts

@@ -5,15 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
-/**
-The `StatusIcon` component follows the Carbon guidelines for status icons with
-some added specifications around illustration usage. For additional usage
-guidelines and documentation please refer to the links above.
-
-_Status icons_ are an important method of communicating severity level
-information to users. The shapes and colors, communicate severity that enable
-users to quickly assess and identify status and respond accordingly.
- */
 type Size = 'sm' | 'md' | 'lg' | 'xl';
 type Theme = 'light' | 'dark';
 type Kind = 'fatal' | 'critical' | 'major-warning' | 'minor-warning' | 'undefined' | 'unknown' | 'normal' | 'info' | 'in-progress' | 'running' | 'pending';
@@ -39,6 +30,17 @@ export interface StatusIconProps extends PropsWithChildren {
      */
     theme: Theme;
 }
+/**
+ * The `StatusIcon` component follows the Carbon guidelines for status icons with
+ * some added specifications around illustration usage. For additional usage
+ * guidelines and documentation please refer to the links above.
+ *
+ * _Status icons_ are an important method of communicating severity level
+ * information to users. The shapes and colors, communicate severity that enable
+ * users to quickly assess and identify status and respond accordingly.
+ *
+ * @deprecated This component is deprecated.
+ */
 export declare const StatusIcon: React.ForwardRefExoticComponent<StatusIconProps & React.RefAttributes<React.ReactSVGElement>>;
 export {};
 //# sourceMappingURL=StatusIcon.d.ts.map

package/es/components/StatusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/components/StatusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAaA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAUf;;;;;;;;GAQG;AAEH,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9B,KAAK,IAAI,GACL,OAAO,GACP,UAAU,GACV,eAAe,GACf,eAAe,GACf,WAAW,GACX,SAAS,GACT,QAAQ,GACR,MAAM,GACN,aAAa,GACb,SAAS,GACT,SAAS,CAAC;AACd,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd;AACD,eAAO,MAAM,UAAU,+FAyLtB,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/components/StatusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AASf,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9B,KAAK,IAAI,GACL,OAAO,GACP,UAAU,GACV,eAAe,GACf,eAAe,GACf,WAAW,GACX,SAAS,GACT,QAAQ,GACR,MAAM,GACN,aAAa,GACb,SAAS,GACT,SAAS,CAAC;AACd,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,+FAyLtB,CAAC"}

package/es/components/StatusIcon/StatusIcon.js

@@ -22,6 +22,17 @@ import { CheckmarkFilled, CheckmarkOutline, ErrorFilled, InProgress, Information
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--status-icon`;
 const componentName = "StatusIcon";
+/**
+* The `StatusIcon` component follows the Carbon guidelines for status icons with
+* some added specifications around illustration usage. For additional usage
+* guidelines and documentation please refer to the links above.
+*
+* _Status icons_ are an important method of communicating severity level
+* information to users. The shapes and colors, communicate severity that enable
+* users to quickly assess and identify status and respond accordingly.
+*
+* @deprecated This component is deprecated.
+*/
 const StatusIcon = forwardRef(({ kind, theme, size, className, iconDescription, ...rest }, ref) => {
 	const forwardedRef = ref;
 	const IconComponent = {
@@ -277,6 +288,11 @@ const StatusIcon = forwardRef(({ kind, theme, size, className, iconDescription,
 	}, /* @__PURE__ */ React.createElement("title", null, iconDescription));
 });
 StatusIcon.displayName = componentName;
+/**@ts-ignore*/
+StatusIcon.deprecated = {
+	level: "warn",
+	details: `Please replace ${componentName} with Icon Indicator from Carbon`
+};
 StatusIcon.propTypes = {
 	/**
 	* Provide an optional class to be applied to the modal root node.