@wordpress/notices 5.39.1-next.v.202602111440.0 → 5.40.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.40.0 (2026-02-18)
+
 ## 5.39.0 (2026-01-29)
 
 ## 5.38.0 (2026-01-16)

package/README.md

@@ -1,6 +1,6 @@
 # Notices
 
-State management for notices.
+State management and UI components for notices.
 
 ## Installation
 
@@ -20,6 +20,79 @@ For more information about consuming from a data store, refer to [the `@wordpres
 
 For a full list of actions and selectors available in the `core/notices` namespace, refer to the [_Notices Data_ Handbook page](https://github.com/WordPress/gutenberg/tree/HEAD/docs/reference-guides/data/data-core-notices.md).
 
+## Components
+
+The package also exports ready-to-use notice UI components powered by the `core/notices` store.
+
+### `InlineNotices`
+
+Renders notice lists for notices with type `default`:
+
+-   non-dismissible notices in a pinned list.
+-   dismissible notices in a removable list.
+
+`children` are rendered inside the dismissible list.
+
+_Props_
+
+-   `children: ReactNode` (optional): Additional content rendered in the dismissible notice list.
+-   `pinnedNoticesClassName: string` (optional): Extra class name added to the pinned list.
+-   `dismissibleNoticesClassName: string` (optional): Extra class name added to the dismissible list.
+-   `context: string` (optional): Notice context to read and remove notices from. Defaults to `default`.
+
+### `SnackbarNotices`
+
+Renders notices with type `snackbar` using `SnackbarList`.
+
+-   It renders the last three snackbar notices.
+-   Dismiss actions are wired to `removeNotice`.
+
+_Props_
+
+-   `className: string` (optional): Extra class name added to the snackbar list.
+-   `context: string` (optional): Notice context to read and remove notices from. Defaults to `default`.
+
+## Example
+
+```jsx
+import { useDispatch } from '@wordpress/data';
+import {
+	InlineNotices,
+	SnackbarNotices,
+	store as noticesStore,
+} from '@wordpress/notices';
+
+function AppNotices() {
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const noticeContext = 'my-plugin/screen';
+
+	return (
+		<>
+			<button
+				onClick={ () =>
+					createSuccessNotice( 'Saved successfully.', {
+						type: 'snackbar',
+						context: noticeContext,
+					} )
+				}
+			>
+				Create snackbar notice
+			</button>
+
+			<InlineNotices
+				pinnedNoticesClassName="my-plugin-notices__pinned"
+				dismissibleNoticesClassName="my-plugin-notices__dismissible"
+				context={ noticeContext }
+			/>
+			<SnackbarNotices
+				className="my-plugin-notices__snackbar"
+				context={ noticeContext }
+			/>
+		</>
+	);
+}
+```
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

package/build/components/inline-notices/index.cjs

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/notices/src/components/inline-notices/index.tsx
+var inline_notices_exports = {};
+__export(inline_notices_exports, {
+  default: () => InlineNotices
+});
+module.exports = __toCommonJS(inline_notices_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_store = require("../../store/index.cjs");
+
+// packages/notices/src/components/inline-notices/style.scss
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='1cf680fb74']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "1cf680fb74");
+  style.appendChild(document.createTextNode(".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}"));
+  document.head.appendChild(style);
+}
+
+// packages/notices/src/components/inline-notices/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function InlineNotices({
+  children,
+  pinnedNoticesClassName,
+  dismissibleNoticesClassName,
+  context
+}) {
+  const notices = (0, import_data.useSelect)(
+    (select) => select(import_store.store).getNotices(context),
+    [context]
+  );
+  const { removeNotice } = (0, import_data.useDispatch)(import_store.store);
+  const dismissibleNotices = notices.filter(
+    ({ isDismissible, type }) => isDismissible && type === "default"
+  );
+  const nonDismissibleNotices = notices.filter(
+    ({ isDismissible, type }) => !isDismissible && type === "default"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.NoticeList,
+      {
+        notices: nonDismissibleNotices,
+        className: (0, import_clsx.default)(
+          "components-notices__pinned",
+          pinnedNoticesClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.NoticeList,
+      {
+        notices: dismissibleNotices,
+        className: (0, import_clsx.default)(
+          "components-notices__dismissible",
+          dismissibleNoticesClassName
+        ),
+        onRemove: (id) => removeNotice(id, context),
+        children
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/inline-notices/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/inline-notices/index.tsx", "../../../src/components/inline-notices/style.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\nimport './style.scss';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nexport default function InlineNotices( {\n\tchildren,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t) }\n\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</NoticeList>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='1cf680fb74']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"1cf680fb74\");\n\tstyle.appendChild(document.createTextNode(\".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,wBAA2B;AAC3B,kBAAuC;AAKvC,mBAAsC;;;ACftC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8aAA8a,CAAC;AACzd,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuCE;AAnBa,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,cAAU;AAAA,IACf,CAAE,WAAY,OAAQ,aAAAA,KAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,QAAI,yBAAa,aAAAA,KAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAC;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAA;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "names": ["noticesStore", "clsx"]
+}

package/build/components/snackbar-notices/index.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/notices/src/components/snackbar-notices/index.tsx
+var snackbar_notices_exports = {};
+__export(snackbar_notices_exports, {
+  default: () => SnackbarNotices
+});
+module.exports = __toCommonJS(snackbar_notices_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_store = require("../../store/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MAX_VISIBLE_NOTICES = -3;
+function SnackbarNotices({
+  className,
+  context
+}) {
+  const notices = (0, import_data.useSelect)(
+    (select) => select(import_store.store).getNotices(context),
+    [context]
+  );
+  const { removeNotice } = (0, import_data.useDispatch)(import_store.store);
+  const snackbarNotices = notices.filter(({ type }) => type === "snackbar").slice(MAX_VISIBLE_NOTICES);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.SnackbarList,
+    {
+      notices: snackbarNotices,
+      className: (0, import_clsx.default)("components-notices__snackbar", className),
+      onRemove: (id) => removeNotice(id, context)
+    }
+  );
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/snackbar-notices/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/snackbar-notices/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { SnackbarList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\n\n// Last three notices. Slices from the tail end of the list.\nconst MAX_VISIBLE_NOTICES = -3;\n\ntype SnackbarNoticesProps = {\n\tclassName?: string;\n\tcontext?: string;\n};\n\nexport default function SnackbarNotices( {\n\tclassName,\n\tcontext,\n}: SnackbarNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst snackbarNotices = notices\n\t\t.filter( ( { type } ) => type === 'snackbar' )\n\t\t.slice( MAX_VISIBLE_NOTICES );\n\n\treturn (\n\t\t<SnackbarList\n\t\t\tnotices={ snackbarNotices }\n\t\t\tclassName={ clsx( 'components-notices__snackbar', className ) }\n\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA6B;AAC7B,kBAAuC;AAKvC,mBAAsC;AAwBpC;AArBF,IAAM,sBAAsB;AAOb,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,cAAU;AAAA,IACf,CAAE,WAAY,OAAQ,aAAAA,KAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,QAAI,yBAAa,aAAAA,KAAa;AACnD,QAAM,kBAAkB,QACtB,OAAQ,CAAE,EAAE,KAAK,MAAO,SAAS,UAAW,EAC5C,MAAO,mBAAoB;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU;AAAA,MACV,eAAY,YAAAC,SAAM,gCAAgC,SAAU;AAAA,MAC5D,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA;AAAA,EAChD;AAEF;",
+  "names": ["noticesStore", "clsx"]
+}

package/build/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,17 +17,31 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/notices/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  InlineNotices: () => import_inline_notices.default,
+  SnackbarNotices: () => import_snackbar_notices.default,
   store: () => import_store.store
 });
 module.exports = __toCommonJS(index_exports);
 var import_store = require("./store/index.cjs");
+var import_inline_notices = __toESM(require("./components/inline-notices/index.cjs"));
+var import_snackbar_notices = __toESM(require("./components/snackbar-notices/index.cjs"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  InlineNotices,
+  SnackbarNotices,
   store
 });
 //# sourceMappingURL=index.cjs.map

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { store } from './store';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;",
+  "sourcesContent": ["export { store } from './store';\nexport { default as InlineNotices } from './components/inline-notices';\nexport { default as SnackbarNotices } from './components/snackbar-notices';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,4BAAyC;AACzC,8BAA2C;",
   "names": []
 }

package/build-module/components/inline-notices/index.mjs

@@ -0,0 +1,62 @@
+// packages/notices/src/components/inline-notices/index.tsx
+import clsx from "clsx";
+import { NoticeList } from "@wordpress/components";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { store as noticesStore } from "../../store/index.mjs";
+
+// packages/notices/src/components/inline-notices/style.scss
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='1cf680fb74']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "1cf680fb74");
+  style.appendChild(document.createTextNode(".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}"));
+  document.head.appendChild(style);
+}
+
+// packages/notices/src/components/inline-notices/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function InlineNotices({
+  children,
+  pinnedNoticesClassName,
+  dismissibleNoticesClassName,
+  context
+}) {
+  const notices = useSelect(
+    (select) => select(noticesStore).getNotices(context),
+    [context]
+  );
+  const { removeNotice } = useDispatch(noticesStore);
+  const dismissibleNotices = notices.filter(
+    ({ isDismissible, type }) => isDismissible && type === "default"
+  );
+  const nonDismissibleNotices = notices.filter(
+    ({ isDismissible, type }) => !isDismissible && type === "default"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NoticeList,
+      {
+        notices: nonDismissibleNotices,
+        className: clsx(
+          "components-notices__pinned",
+          pinnedNoticesClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NoticeList,
+      {
+        notices: dismissibleNotices,
+        className: clsx(
+          "components-notices__dismissible",
+          dismissibleNoticesClassName
+        ),
+        onRemove: (id) => removeNotice(id, context),
+        children
+      }
+    )
+  ] });
+}
+export {
+  InlineNotices as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/inline-notices/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/inline-notices/index.tsx", "../../../src/components/inline-notices/style.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\nimport './style.scss';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nexport default function InlineNotices( {\n\tchildren,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t) }\n\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</NoticeList>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='1cf680fb74']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"1cf680fb74\");\n\tstyle.appendChild(document.createTextNode(\".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,aAAa,iBAAiB;AAKvC,SAAS,SAAS,oBAAoB;;;ACftC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8aAA8a,CAAC;AACzd,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuCE,mBACC,KADD;AAnBa,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,UAAU;AAAA,IACf,CAAE,WAAY,OAAQ,YAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,IAAI,YAAa,YAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/components/snackbar-notices/index.mjs

@@ -0,0 +1,30 @@
+// packages/notices/src/components/snackbar-notices/index.tsx
+import clsx from "clsx";
+import { SnackbarList } from "@wordpress/components";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { store as noticesStore } from "../../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var MAX_VISIBLE_NOTICES = -3;
+function SnackbarNotices({
+  className,
+  context
+}) {
+  const notices = useSelect(
+    (select) => select(noticesStore).getNotices(context),
+    [context]
+  );
+  const { removeNotice } = useDispatch(noticesStore);
+  const snackbarNotices = notices.filter(({ type }) => type === "snackbar").slice(MAX_VISIBLE_NOTICES);
+  return /* @__PURE__ */ jsx(
+    SnackbarList,
+    {
+      notices: snackbarNotices,
+      className: clsx("components-notices__snackbar", className),
+      onRemove: (id) => removeNotice(id, context)
+    }
+  );
+}
+export {
+  SnackbarNotices as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/snackbar-notices/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/snackbar-notices/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { SnackbarList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\n\n// Last three notices. Slices from the tail end of the list.\nconst MAX_VISIBLE_NOTICES = -3;\n\ntype SnackbarNoticesProps = {\n\tclassName?: string;\n\tcontext?: string;\n};\n\nexport default function SnackbarNotices( {\n\tclassName,\n\tcontext,\n}: SnackbarNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst snackbarNotices = notices\n\t\t.filter( ( { type } ) => type === 'snackbar' )\n\t\t.slice( MAX_VISIBLE_NOTICES );\n\n\treturn (\n\t\t<SnackbarList\n\t\t\tnotices={ snackbarNotices }\n\t\t\tclassName={ clsx( 'components-notices__snackbar', className ) }\n\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,oBAAoB;AAC7B,SAAS,aAAa,iBAAiB;AAKvC,SAAS,SAAS,oBAAoB;AAwBpC;AArBF,IAAM,sBAAsB;AAOb,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,UAAU;AAAA,IACf,CAAE,WAAY,OAAQ,YAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,IAAI,YAAa,YAAa;AACnD,QAAM,kBAAkB,QACtB,OAAQ,CAAE,EAAE,KAAK,MAAO,SAAS,UAAW,EAC5C,MAAO,mBAAoB;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU;AAAA,MACV,WAAY,KAAM,gCAAgC,SAAU;AAAA,MAC5D,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA;AAAA,EAChD;AAEF;",
+  "names": []
+}

package/build-module/index.mjs

@@ -1,6 +1,10 @@
 // packages/notices/src/index.ts
 import { store } from "./store/index.mjs";
+import { default as default2 } from "./components/inline-notices/index.mjs";
+import { default as default3 } from "./components/snackbar-notices/index.mjs";
 export {
+  default2 as InlineNotices,
+  default3 as SnackbarNotices,
   store
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { store } from './store';\n"],
-  "mappings": ";AAAA,SAAS,aAAa;",
-  "names": []
+  "sourcesContent": ["export { store } from './store';\nexport { default as InlineNotices } from './components/inline-notices';\nexport { default as SnackbarNotices } from './components/snackbar-notices';\n"],
+  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAAkC;",
+  "names": ["default"]
 }

package/build-types/components/inline-notices/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+import './style.scss';
+type InlineNoticesProps = {
+    children?: ReactNode;
+    pinnedNoticesClassName?: string;
+    dismissibleNoticesClassName?: string;
+    context?: string;
+};
+export default function InlineNotices({ children, pinnedNoticesClassName, dismissibleNoticesClassName, context, }: InlineNoticesProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/inline-notices/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inline-notices/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EACtC,QAAQ,EACR,sBAAsB,EACtB,2BAA2B,EAC3B,OAAO,GACP,EAAE,kBAAkB,+BAkCpB"}

package/build-types/components/snackbar-notices/index.d.ts

@@ -0,0 +1,7 @@
+type SnackbarNoticesProps = {
+    className?: string;
+    context?: string;
+};
+export default function SnackbarNotices({ className, context, }: SnackbarNoticesProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/snackbar-notices/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/snackbar-notices/index.tsx"],"names":[],"mappings":"AAmBA,KAAK,oBAAoB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,SAAS,EACT,OAAO,GACP,EAAE,oBAAoB,+BAiBtB"}

package/build-types/index.d.ts

@@ -1,2 +1,4 @@
 export { store } from './store';
+export { default as InlineNotices } from './components/inline-notices';
+export { default as SnackbarNotices } from './components/snackbar-notices';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,+BAA+B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.39.1-next.v.202602111440.0+a307a2e35",
+	"version": "5.40.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,8 +43,10 @@
 	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@wordpress/a11y": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/data": "^10.39.1-next.v.202602111440.0+a307a2e35"
+		"@wordpress/a11y": "^4.40.0",
+		"@wordpress/components": "^32.2.0",
+		"@wordpress/data": "^10.40.0",
+		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
 		"deep-freeze": "0.0.1"
@@ -55,5 +57,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e0a2324a9690e55f4101d61113f4bbbf240b55ed"
+	"gitHead": "376124aa10dbc2cc0c81c964ec00b99fcfee5382"
 }

package/src/components/inline-notices/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { NoticeList } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as noticesStore } from '../../store';
+import './style.scss';
+
+type InlineNoticesProps = {
+	children?: ReactNode;
+	pinnedNoticesClassName?: string;
+	dismissibleNoticesClassName?: string;
+	context?: string;
+};
+
+export default function InlineNotices( {
+	children,
+	pinnedNoticesClassName,
+	dismissibleNoticesClassName,
+	context,
+}: InlineNoticesProps ) {
+	const notices = useSelect(
+		( select ) => select( noticesStore ).getNotices( context ),
+		[ context ]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
+	const dismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => isDismissible && type === 'default'
+	);
+	const nonDismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => ! isDismissible && type === 'default'
+	);
+
+	return (
+		<>
+			<NoticeList
+				notices={ nonDismissibleNotices }
+				className={ clsx(
+					'components-notices__pinned',
+					pinnedNoticesClassName
+				) }
+			/>
+			<NoticeList
+				notices={ dismissibleNotices }
+				className={ clsx(
+					'components-notices__dismissible',
+					dismissibleNoticesClassName
+				) }
+				onRemove={ ( id ) => removeNotice( id, context ) }
+			>
+				{ children }
+			</NoticeList>
+		</>
+	);
+}

package/src/components/inline-notices/style.scss

@@ -0,0 +1,21 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+.components-notices__dismissible,
+.components-notices__pinned {
+	color: $gray-900;
+
+	.components-notice {
+		box-sizing: border-box;
+		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
+		padding: 0 $grid-unit-15;
+
+		// Min-height matches the height of a single-line notice with an action button.
+		min-height: $header-height;
+
+		// Margins ensure that the dismiss button aligns to the center of the first line of text.
+		.components-notice__dismiss {
+			margin-top: $grid-unit-15;
+		}
+	}
+}

package/src/components/snackbar-notices/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { SnackbarList } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as noticesStore } from '../../store';
+
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
+type SnackbarNoticesProps = {
+	className?: string;
+	context?: string;
+};
+
+export default function SnackbarNotices( {
+	className,
+	context,
+}: SnackbarNoticesProps ) {
+	const notices = useSelect(
+		( select ) => select( noticesStore ).getNotices( context ),
+		[ context ]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
+
+	return (
+		<SnackbarList
+			notices={ snackbarNotices }
+			className={ clsx( 'components-notices__snackbar', className ) }
+			onRemove={ ( id ) => removeNotice( id, context ) }
+		/>
+	);
+}

package/src/index.ts

@@ -1 +1,3 @@
 export { store } from './store';
+export { default as InlineNotices } from './components/inline-notices';
+export { default as SnackbarNotices } from './components/snackbar-notices';