@wordpress/ui 0.9.1-next.v.202603102151.0 → 0.10.0

package/CHANGELOG.md

@@ -2,22 +2,63 @@
 
 ## Unreleased
 
-## 0.9.0-next.0 (2026-03-10)
+## 0.10.0 (2026-04-01)
+
+### New Features
+
+-   Add `AlertDialog` primitive ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
+-   Add `InputControl` component ([#76653](https://github.com/WordPress/gutenberg/pull/76653)).
+-   `Dialog`: Expose `initialFocus` and `finalFocus` props on `Dialog.Popup` for custom focus management ([#76860](https://github.com/WordPress/gutenberg/pull/76860)).
+-   `CollapsibleCard`: Add `HeaderDescription` subcomponent for supplementary header content with `aria-describedby` relationship ([#76867](https://github.com/WordPress/gutenberg/pull/76867)).
+
+### Bug Fixes
+
+-   `Card`: Add `overflow: clip` to `Card.Root` to prevent child content from overflowing rounded corners ([#76678](https://github.com/WordPress/gutenberg/pull/76678)).
+-   `CollapsibleCard`: do not animate the focus ring when expanding/collapsing the card ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
+
+### Enhancements
+
+-   `Dialog.Root`: expose `disablePointerDismissal` prop ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
+-   `Dialog.Popup`: Default `initialFocus` now deprioritizes the close icon, focusing the first tabbable content element instead (following WAI-ARIA APG guidance) ([#76910](https://github.com/WordPress/gutenberg/pull/76910)).
+
+### Internal
+
+-   Extract `useDeprioritizedInitialFocus` shared hook for reuse across overlay components ([#76910](https://github.com/WordPress/gutenberg/pull/76910)).
+-   `Tabs`: Add development-mode validation for Tab/Panel count matching ([#75170](https://github.com/WordPress/gutenberg/pull/75170)).
+
+### TypeScript
+
+-   Remove `NoticeIntent` type from package exports ([#76791](https://github.com/WordPress/gutenberg/pull/76791)).
+
+## 0.9.0 (2026-03-18)
 
 ### New Features
 
 -   Add `Text` primitive with predefined typographic variants (`heading-2xl` through `heading-sm`, `body-xl` through `body-sm`) built on design tokens ([#75870](https://github.com/WordPress/gutenberg/pull/75870)).
 -   Add `Card` and `CollapsibleCard` primitives ([#76252](https://github.com/WordPress/gutenberg/pull/76252)).
 -   Add `Link` primitive ([#76013](https://github.com/WordPress/gutenberg/pull/76013)).
+-   Add `Collapsible` primitive ([#76280](https://github.com/WordPress/gutenberg/pull/76280)).
 
 ### Bug Fixes
 
+-   `InputLayout.Slot`: Forward the incoming `className` prop instead of letting it be silently overwritten by the rest spread ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
 -   `VisuallyHidden`: Add `word-break: normal` to prevent text wrapping issues in screen reader content ([#75539](https://github.com/WordPress/gutenberg/pull/75539)).
 
 ### Enhancements
 
+-   `Badge`: Add border, update text color, and apply `neutral-strong` background to `none` intent for better contrast against neutral surfaces ([#76356](https://github.com/WordPress/gutenberg/pull/76356)).
+-   `Dialog`: Use `--wpds-dimension-surface-width-*` design tokens for width constraints ([#76494](https://github.com/WordPress/gutenberg/pull/76494)).
 -   `Notice`: Improve narrow layout by letting description and actions span the icon column when a title is present ([#76202](https://github.com/WordPress/gutenberg/pull/76202)).
 -   `Notice`: Use `Text` component for `Title` and `Description` typography ([#75870](https://github.com/WordPress/gutenberg/pull/75870)).
+-   `Card`: Use `Text` component for `Title` typography ([#76642](https://github.com/WordPress/gutenberg/pull/76642)).
+-   `Card`, `CollapsibleCard`: update padding to match legacy `Card` component ([#76368](https://github.com/WordPress/gutenberg/pull/76368)).
+-   `CollapsibleCard`: move trigger to the header ([#76265](https://github.com/WordPress/gutenberg/pull/76265)).
+-   `CollapsibleCard`: add animations ([#76378](https://github.com/WordPress/gutenberg/pull/76378)).
+-   `CollapsibleCard`: allows the browser page search to find and expand the panel contents via the `hiddenUntilFound` prop. ([#76498](https://github.com/WordPress/gutenberg/pull/76498)).
+
+### Internal
+
+-   Update `@base-ui/react` from 1.2.0 to [1.3.0](https://github.com/mui/base-ui/blob/master/CHANGELOG.md#v130) ([#76603](https://github.com/WordPress/gutenberg/pull/76603)).
 
 ## 0.8.0 (2026-03-04)
 

package/CONTRIBUTING.md

@@ -26,6 +26,37 @@ src/
 -   The folder name should match the primary component name
 -   The `index.ts` file should contain only the public API exports for the component(s)
 
+## Public APIs
+
+The package has a single entrypoint which exports all of the components of the package, and nothing else.
+
+Specifically:
+
+-   Components are implemented as [compound components](#compound-components). Exported components will define their own subcomponents as properties of the top-level export.
+    -   Example: `import { Button } from '@wordpress/ui'; // Button, Button.Icon, etc.`
+-   TypeScript types are not exported. If you need access to a component's prop types, use `React.ComponentProps`.
+    -   Example: `type ButtonProps = React.ComponentProps< typeof Button >;`
+-   Styles are defined in the built JavaScript files and are not loaded separately.
+
+The package follows [semantic versioning](https://semver.org/), and the following are considered to be "the public API" for consideration of backwards-incompatible changes:
+
+-   Component definitions (e.g. removing a component)
+-   Component props (e.g. renaming, removing, or changing a props supported types such that existing usage would break in an update)
+-   CSS properties prefixed with `--wp-ui-` (e.g. changing a CSS property such that it would negatively impact a user's experience)
+
+## Compound Components
+
+This package follows the [compound component approach outlined in the `@wordpress/components` contributing guidelines](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/CONTRIBUTING.md#compound-components).
+
+Some components will use a bare name (e.g. `Button`), while others will have a "root" component with modular children (e.g. `Tooltip.Root`). Use the base component name when it works standalone and any subcomponents are optional enhancements. Only introduce `.Root` when the component is modular and consumers are expected to compose multiple parts.
+
+Why?
+
+-   `.Root` primarily coordinates, and isn't useful on its own
+    -   For example, a `Button` is useful on its own (renders an interactive element), unlike `Tabs.Root`
+-   `.Root` has required subparts, signalling an expectation that it must be composed
+    -   A non-root component can still have _optional_ sub-parts, like a `Button.Icon`
+
 ## CSS Architecture
 
 ### CSS Layers

package/README.md

@@ -96,6 +96,112 @@ function MyComponent() {
 }
 ```
 
+### Controlled and Uncontrolled Modes
+
+Interactive components that manage internal state (such as open/closed, selected value, etc.) follow a consistent prop naming convention that supports both **controlled** and **uncontrolled** usage.
+
+#### Prop naming pattern
+
+For a given state `x`, the convention is:
+
+| Prop | Purpose |
+| --- | --- |
+| `defaultX` | Sets the initial value in **uncontrolled** mode. The component manages subsequent state changes internally. |
+| `x` | Sets the current value in **controlled** mode. The consumer is responsible for updating the value in response to changes. |
+| `onXChange` | Callback invoked when the state changes. Receives the new value as its first argument. Works in both controlled and uncontrolled modes. |
+
+For example, a component with an open/closed state would expose:
+
+-   `defaultOpen` — initial open state (uncontrolled)
+-   `open` — current open state (controlled)
+-   `onOpenChange` — called when the open state changes
+
+And a component with a selectable value would expose:
+
+-   `defaultValue` — initial value (uncontrolled)
+-   `value` — current value (controlled)
+-   `onValueChange` — called when the value changes
+
+#### Uncontrolled usage
+
+In uncontrolled mode, the component manages its own state. Use `defaultX` to set the initial value, and optionally `onXChange` to react to changes:
+
+```tsx
+import { Tabs } from '@wordpress/ui';
+
+function MyTabs() {
+	return (
+		<Tabs.Root
+			defaultValue="tab1"
+			onValueChange={ ( value ) => console.log( value ) }
+		>
+			<Tabs.List>
+				<Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
+			</Tabs.List>
+			<Tabs.Panel value="tab1">Content 1</Tabs.Panel>
+			<Tabs.Panel value="tab2">Content 2</Tabs.Panel>
+		</Tabs.Root>
+	);
+}
+```
+
+#### Controlled usage
+
+In controlled mode, the consumer owns the state and passes it via `x`. State changes are handled through `onXChange`:
+
+```tsx
+import { useState } from '@wordpress/element';
+import { CollapsibleCard } from '@wordpress/ui';
+
+function MyCard() {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<CollapsibleCard.Root open={ isOpen } onOpenChange={ setIsOpen }>
+			<CollapsibleCard.Header>Details</CollapsibleCard.Header>
+			<CollapsibleCard.Content>
+				Collapsible content here.
+			</CollapsibleCard.Content>
+		</CollapsibleCard.Root>
+	);
+}
+```
+
+When both `x` and `defaultX` are provided, `x` takes precedence and the component behaves in controlled mode. When neither is provided, the component uses its own internal default (typically documented via a `@default` JSDoc tag on the `defaultX` prop).
+
+#### Difference from native `onChange`
+
+The `onXChange` callback is distinct from the native DOM `onChange` event handler. Native `onChange` fires a `React.ChangeEvent` tied to a specific DOM element, while `onXChange` provides the new **value** directly — making it simpler to use and consistent across all components, including compound and non-form components.
+
+Components that wrap native form elements may still support native event handlers (like `onChange`, `onInput`) for interoperability, but `onXChange` is the recommended approach within this package.
+
+#### Guidelines for component authors
+
+When designing props for a new component:
+
+-   Always offer both controlled and uncontrolled modes when the component has user-facing state.
+-   Name the uncontrolled prop `defaultX`, the controlled prop `x`, and the callback `onXChange`.
+-   In JSDoc comments, indicate which mode each prop is for and cross-reference the alternative:
+    ```ts
+    /**
+     * Whether the panel is currently open (controlled).
+     *
+     * To render an uncontrolled component, use the `defaultOpen` prop instead.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Event handler called when the open state changes.
+     */
+    onOpenChange?: ( open: boolean ) => void;
+    ```
+-   Provide a `@default` JSDoc tag for the uncontrolled prop when there is a sensible default.
+
 ## 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/alert-dialog/context.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  AlertDialogContext: () => AlertDialogContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+var AlertDialogContext = (0, import_element.createContext)({
+  intent: "default"
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialogContext
+});
+//# sourceMappingURL=context.cjs.map

package/build/alert-dialog/context.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/context.tsx"],
+  "sourcesContent": ["import { createContext } from '@wordpress/element';\nimport type { RootProps } from './types';\n\ntype Intent = NonNullable< RootProps[ 'intent' ] >;\n\ninterface AlertDialogContextValue {\n\tintent: Intent;\n}\n\nconst AlertDialogContext = createContext< AlertDialogContextValue >( {\n\tintent: 'default',\n} );\n\nexport { AlertDialogContext };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAS9B,IAAM,yBAAqB,8BAA0C;AAAA,EACpE,QAAQ;AACT,CAAE;",
+  "names": []
+}

package/build/alert-dialog/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/index.ts
+var alert_dialog_exports = {};
+__export(alert_dialog_exports, {
+  Popup: () => import_popup.Popup,
+  Root: () => import_root.Root,
+  Trigger: () => import_trigger.Trigger
+});
+module.exports = __toCommonJS(alert_dialog_exports);
+var import_root = require("./root.cjs");
+var import_trigger = require("./trigger.cjs");
+var import_popup = require("./popup.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popup,
+  Root,
+  Trigger
+});
+//# sourceMappingURL=index.cjs.map

package/build/alert-dialog/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/index.ts"],
+  "sourcesContent": ["export { Root } from './root';\nexport { Trigger } from './trigger';\nexport { Popup } from './popup';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,qBAAwB;AACxB,mBAAsB;",
+  "names": []
+}

package/build/alert-dialog/popup.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/ui/src/alert-dialog/popup.tsx
+var popup_exports = {};
+__export(popup_exports, {
+  Popup: () => Popup2
+});
+module.exports = __toCommonJS(popup_exports);
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_button = require("../button/index.cjs");
+var Dialog = __toESM(require("../dialog/index.cjs"));
+var import_context = require("./context.cjs");
+
+// packages/ui/src/alert-dialog/style.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='35295c8521']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "35295c8521");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-compositions{._2ddc2fc9155a1dad__irreversible-action{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-error-strong,#cc1818);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-error-strong-active,#b90000);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-error-strong,#f2efef);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-error-strong-active,#f2efef)}}"));
+  document.head.appendChild(style);
+}
+var style_default = { "irreversible-action": "_2ddc2fc9155a1dad__irreversible-action" };
+
+// packages/ui/src/alert-dialog/popup.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Popup2 = (0, import_element.forwardRef)(
+  function AlertDialogPopup({
+    title,
+    children,
+    onConfirm,
+    confirmButtonText = (0, import_i18n.__)("OK"),
+    cancelButtonText = (0, import_i18n.__)("Cancel"),
+    loading
+  }, ref) {
+    const { intent } = (0, import_element.useContext)(import_context.AlertDialogContext);
+    const ConfirmButton = loading !== void 0 ? import_button.Button : Dialog.Action;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Popup, { ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: title }) }),
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Dialog.Action,
+          {
+            variant: "minimal",
+            disabled: loading || void 0,
+            children: cancelButtonText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ConfirmButton,
+          {
+            className: intent === "irreversible" ? style_default["irreversible-action"] : void 0,
+            onClick: onConfirm,
+            loading,
+            children: confirmButtonText
+          }
+        )
+      ] })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popup
+});
+//# sourceMappingURL=popup.cjs.map

package/build/alert-dialog/popup.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/popup.tsx", "../../src/alert-dialog/style.module.css"],
+  "sourcesContent": ["import { forwardRef, useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '../button';\nimport * as Dialog from '../dialog';\nimport { AlertDialogContext } from './context';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst Popup = forwardRef< HTMLDivElement, PopupProps >(\n\tfunction AlertDialogPopup(\n\t\t{\n\t\t\ttitle,\n\t\t\tchildren,\n\t\t\tonConfirm,\n\t\t\tconfirmButtonText = __( 'OK' ),\n\t\t\tcancelButtonText = __( 'Cancel' ),\n\t\t\tloading,\n\t\t},\n\t\tref\n\t) {\n\t\tconst { intent } = useContext( AlertDialogContext );\n\n\t\t// When `loading` is provided, the consumer controls when the dialog\n\t\t// closes (async flow). Use a plain Button so clicking confirm doesn't\n\t\t// auto-close \u2014 the consumer sets `open={false}` after their operation.\n\t\tconst ConfirmButton = loading !== undefined ? Button : Dialog.Action;\n\n\t\treturn (\n\t\t\t<Dialog.Popup ref={ ref }>\n\t\t\t\t<Dialog.Header>\n\t\t\t\t\t<Dialog.Title>{ title }</Dialog.Title>\n\t\t\t\t</Dialog.Header>\n\t\t\t\t{ children }\n\t\t\t\t<Dialog.Footer>\n\t\t\t\t\t<Dialog.Action\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\tdisabled={ loading || undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ cancelButtonText }\n\t\t\t\t\t</Dialog.Action>\n\t\t\t\t\t<ConfirmButton\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tintent === 'irreversible'\n\t\t\t\t\t\t\t\t? styles[ 'irreversible-action' ]\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ onConfirm }\n\t\t\t\t\t\tloading={ loading }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ confirmButtonText }\n\t\t\t\t\t</ConfirmButton>\n\t\t\t\t</Dialog.Footer>\n\t\t\t</Dialog.Popup>\n\t\t);\n\t}\n);\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='35295c8521']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"35295c8521\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-compositions{._2ddc2fc9155a1dad__irreversible-action{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-error-strong,#cc1818);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-error-strong-active,#b90000);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-error-strong,#f2efef);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-error-strong-active,#f2efef)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"irreversible-action\":\"_2ddc2fc9155a1dad__irreversible-action\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,eAAAA;AAAA;AAAA;AAAA,qBAAuC;AACvC,kBAAmB;AACnB,oBAAuB;AACvB,aAAwB;AACxB,qBAAmC;;;ACJnC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ugBAAugB,CAAC;AACljB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,uBAAsB,yCAAwC;;;ADwBzE;AAtBL,IAAMC,aAAQ;AAAA,EACb,SAAS,iBACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAoB,gBAAI,IAAK;AAAA,IAC7B,uBAAmB,gBAAI,QAAS;AAAA,IAChC;AAAA,EACD,GACA,KACC;AACD,UAAM,EAAE,OAAO,QAAI,2BAAY,iCAAmB;AAKlD,UAAM,gBAAgB,YAAY,SAAY,uBAAgB;AAE9D,WACC,6CAAQ,cAAP,EAAa,KACb;AAAA,kDAAQ,eAAP,EACA,sDAAQ,cAAP,EAAe,iBAAO,GACxB;AAAA,MACE;AAAA,MACF,6CAAQ,eAAP,EACA;AAAA;AAAA,UAAQ;AAAA,UAAP;AAAA,YACA,SAAQ;AAAA,YACR,UAAW,WAAW;AAAA,YAEpB;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,iBACR,cAAQ,qBAAsB,IAC9B;AAAA,YAEJ,SAAU;AAAA,YACV;AAAA,YAEE;AAAA;AAAA,QACH;AAAA,SACD;AAAA,OACD;AAAA,EAEF;AACD;",
+  "names": ["Popup", "Popup"]
+}

package/build/alert-dialog/root.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/root.tsx
+var root_exports = {};
+__export(root_exports, {
+  Root: () => Root
+});
+module.exports = __toCommonJS(root_exports);
+var import_alert_dialog = require("@base-ui/react/alert-dialog");
+var import_element = require("@wordpress/element");
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Root({
+  intent = "default",
+  children,
+  open,
+  onOpenChange,
+  defaultOpen
+}) {
+  const contextValue = (0, import_element.useMemo)(() => ({ intent }), [intent]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_alert_dialog.AlertDialog.Root,
+    {
+      open,
+      onOpenChange,
+      defaultOpen,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.AlertDialogContext.Provider, { value: contextValue, children })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Root
+});
+//# sourceMappingURL=root.cjs.map

package/build/alert-dialog/root.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/root.tsx"],
+  "sourcesContent": ["import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport { useMemo } from '@wordpress/element';\nimport { AlertDialogContext } from './context';\nimport type { RootProps } from './types';\n\n/**\n * A dialog that requires a user response to proceed.\n *\n * Use `AlertDialog.Trigger` to render a button that opens the dialog.\n * Use `AlertDialog.Popup` to render the dialog content.\n * The `AlertDialog.Trigger` is optional \u2014 the dialog can also be controlled\n * via `open` / `onOpenChange` props.\n *\n * ## Use cases\n *\n * - **Default intent**: Standard confirmation dialog for reversible actions.\n * - **Irreversible intent**: Confirmation dialog for irreversible actions that\n *   cannot be undone. The confirm button uses error/danger coloring.\n *\n * For use cases outside the standard confirm/cancel pattern, use the lower-level\n * `Dialog` component directly.\n *\n * See the [Destructive Actions guidelines](?path=/docs/design-system-patterns-destructive-actions--docs)\n * for more details on when to use each pattern.\n */\nfunction Root( {\n\tintent = 'default',\n\tchildren,\n\topen,\n\tonOpenChange,\n\tdefaultOpen,\n}: RootProps ) {\n\tconst contextValue = useMemo( () => ( { intent } ), [ intent ] );\n\n\treturn (\n\t\t<_AlertDialog.Root\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t>\n\t\t\t<AlertDialogContext.Provider value={ contextValue }>\n\t\t\t\t{ children }\n\t\t\t</AlertDialogContext.Provider>\n\t\t</_AlertDialog.Root>\n\t);\n}\n\nexport { Root };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,qBAAwB;AACxB,qBAAmC;AAsChC;AAfH,SAAS,KAAM;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAe;AACd,QAAM,mBAAe,wBAAS,OAAQ,EAAE,OAAO,IAAK,CAAE,MAAO,CAAE;AAE/D,SACC;AAAA,IAAC,oBAAAA,YAAa;AAAA,IAAb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,kCAAmB,UAAnB,EAA4B,OAAQ,cAClC,UACH;AAAA;AAAA,EACD;AAEF;",
+  "names": ["_AlertDialog"]
+}

package/build/alert-dialog/trigger.cjs

@@ -0,0 +1,48 @@
+"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/ui/src/alert-dialog/trigger.tsx
+var trigger_exports = {};
+__export(trigger_exports, {
+  Trigger: () => Trigger2
+});
+module.exports = __toCommonJS(trigger_exports);
+var import_element = require("@wordpress/element");
+var Dialog = __toESM(require("../dialog/index.cjs"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Trigger2 = (0, import_element.forwardRef)(
+  function AlertDialogTrigger(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Trigger, { ref, ...props });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Trigger
+});
+//# sourceMappingURL=trigger.cjs.map

package/build/alert-dialog/trigger.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/trigger.tsx"],
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\n\nimport * as Dialog from '../dialog';\nimport type { TriggerProps } from './types';\n\n/**\n * Renders a button that opens the alert dialog when clicked.\n */\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction AlertDialogTrigger( props, ref ) {\n\t\treturn <Dialog.Trigger ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Trigger };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;AAAA,qBAA2B;AAE3B,aAAwB;AAQf;AAFT,IAAMA,eAAU;AAAA,EACf,SAAS,mBAAoB,OAAO,KAAM;AACzC,WAAO,4CAAQ,gBAAP,EAAe,KAAc,GAAG,OAAQ;AAAA,EACjD;AACD;",
+  "names": ["Trigger"]
+}

package/build/alert-dialog/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/alert-dialog/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/types.ts"],
+  "sourcesContent": ["import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport type { ReactNode } from 'react';\n\nimport type { TriggerProps as DialogTriggerProps } from '../dialog/types';\n\nexport interface RootProps\n\textends Pick<\n\t\t_AlertDialog.Root.Props,\n\t\t'open' | 'onOpenChange' | 'defaultOpen'\n\t> {\n\t/**\n\t * The content to be rendered inside the component. Typically includes\n\t * `AlertDialog.Trigger` and `AlertDialog.Popup`.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * The semantic intent of the dialog, which determines its styling.\n\t *\n\t * All intents use `role=\"alertdialog\"`, are always modal, and block\n\t * backdrop click dismissal. Escape key and the cancel/confirm buttons\n\t * still dismiss the dialog.\n\t *\n\t * - `'default'`: Standard confirmation dialog for reversible actions.\n\t * - `'irreversible'`: Confirmation dialog for irreversible actions that\n\t *   cannot be undone. The confirm button uses error/danger coloring.\n\t *\n\t * @default 'default'\n\t */\n\tintent?: 'default' | 'irreversible';\n}\n\nexport type TriggerProps = DialogTriggerProps;\n\nexport interface PopupProps {\n\t/**\n\t * The title displayed in the dialog header. This serves as both the\n\t * visible heading and the accessible label for the dialog.\n\t */\n\ttitle: string;\n\n\t/**\n\t * The message content displayed in the dialog body.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * Callback fired when the user confirms the action.\n\t */\n\tonConfirm: () => void;\n\n\t/**\n\t * Custom text for the confirm button.\n\t *\n\t * @default 'OK'\n\t */\n\tconfirmButtonText?: string;\n\n\t/**\n\t * Custom text for the cancel button.\n\t *\n\t * @default 'Cancel'\n\t */\n\tcancelButtonText?: string;\n\n\t/**\n\t * Whether the confirm action is in a loading state (e.g. an async\n\t * operation is in progress). When `true`, the confirm button shows a\n\t * spinner and the cancel button is disabled.\n\t *\n\t * **Important:** Passing this prop \u2014 even as `false` \u2014 opts into\n\t * manual-close mode: the confirm button will no longer auto-close the\n\t * dialog. The consumer is responsible for setting `open={false}` when\n\t * the operation completes. Omit the prop entirely for the default\n\t * auto-close-on-confirm behavior.\n\t *\n\t * To implement an async confirm flow, use controlled mode\n\t * (`open` / `onOpenChange`) and manage the loading state externally:\n\t * prevent closing in `onOpenChange` while loading, and set\n\t * `open={false}` once the operation completes.\n\t */\n\tloading?: boolean;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/badge/badge.cjs

@@ -38,10 +38,10 @@ var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
 
 // packages/ui/src/badge/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='244b5c59c0']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='a407d6dd3d']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "244b5c59c0");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral,#f8f8f8);color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}}'));
+  style.setAttribute("data-wp-hash", "a407d6dd3d");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#d8d8d8);color:var(--wpds-color-fg-content-neutral,#1e1e1e);padding-block:calc(var(--wpds-dimension-padding-xs, 4px) - var(--wpds-border-width-xs, 1px));padding-inline:calc(var(--wpds-dimension-padding-sm, 8px) - var(--wpds-border-width-xs, 1px))}}'));
   document.head.appendChild(style);
 }
 var style_default = { "badge": "_96e6251aad1a6136__badge", "is-high-intent": "_99f7158cb520f750__is-high-intent", "is-medium-intent": "c20ebef2365bc8b7__is-medium-intent", "is-low-intent": "_365e1626c6202e52__is-low-intent", "is-stable-intent": "_33f8198127ddf4ef__is-stable-intent", "is-informational-intent": "_04c1aca8fc449412__is-informational-intent", "is-draft-intent": "_90726e69d495ec19__is-draft-intent", "is-none-intent": "_898f4a544993bd39__is-none-intent" };

package/build/badge/badge.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/badge/badge.tsx", "../../src/badge/style.module.css"],
-  "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { type BadgeProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A badge component for displaying labels with semantic intent.\n */\nexport const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(\n\t{ children, intent = 'none', render, className, ...props },\n\tref\n) {\n\tconst element = useRender( {\n\t\trender,\n\t\tdefaultTagName: 'span',\n\t\tref,\n\t\tprops: mergeProps< 'span' >( props, {\n\t\t\tclassName: clsx(\n\t\t\t\tstyles.badge,\n\t\t\t\tstyles[ `is-${ intent }-intent` ],\n\t\t\t\tclassName\n\t\t\t),\n\t\t\tchildren,\n\t\t} ),\n\t} );\n\n\treturn element;\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='244b5c59c0']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"244b5c59c0\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral,#f8f8f8);color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"badge\":\"_96e6251aad1a6136__badge\",\"is-high-intent\":\"_99f7158cb520f750__is-high-intent\",\"is-medium-intent\":\"c20ebef2365bc8b7__is-medium-intent\",\"is-low-intent\":\"_365e1626c6202e52__is-low-intent\",\"is-stable-intent\":\"_33f8198127ddf4ef__is-stable-intent\",\"is-informational-intent\":\"_04c1aca8fc449412__is-informational-intent\",\"is-draft-intent\":\"_90726e69d495ec19__is-draft-intent\",\"is-none-intent\":\"_898f4a544993bd39__is-none-intent\"};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,kBAAiB;AACjB,qBAA2B;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8kDAA0lD,CAAC;AACroD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,kBAAiB,qCAAoC,oBAAmB,sCAAqC,iBAAgB,oCAAmC,oBAAmB,uCAAsC,2BAA0B,8CAA6C,mBAAkB,sCAAqC,kBAAiB,oCAAmC;;;ADGvb,IAAM,YAAQ,2BAA2C,SAASA,OACxE,EAAE,UAAU,SAAS,QAAQ,QAAQ,WAAW,GAAG,MAAM,GACzD,KACC;AACD,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAO,yBAAsB,OAAO;AAAA,MACnC,eAAW,YAAAC;AAAA,QACV,cAAO;AAAA,QACP,cAAQ,MAAO,MAAO,SAAU;AAAA,QAChC;AAAA,MACD;AAAA,MACA;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR,CAAE;",
+  "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { type BadgeProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A badge component for displaying labels with semantic intent.\n */\nexport const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(\n\t{ children, intent = 'none', render, className, ...props },\n\tref\n) {\n\tconst element = useRender( {\n\t\trender,\n\t\tdefaultTagName: 'span',\n\t\tref,\n\t\tprops: mergeProps< 'span' >( props, {\n\t\t\tclassName: clsx(\n\t\t\t\tstyles.badge,\n\t\t\t\tstyles[ `is-${ intent }-intent` ],\n\t\t\t\tclassName\n\t\t\t),\n\t\t\tchildren,\n\t\t} ),\n\t} );\n\n\treturn element;\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='a407d6dd3d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a407d6dd3d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#d8d8d8);color:var(--wpds-color-fg-content-neutral,#1e1e1e);padding-block:calc(var(--wpds-dimension-padding-xs, 4px) - var(--wpds-border-width-xs, 1px));padding-inline:calc(var(--wpds-dimension-padding-sm, 8px) - var(--wpds-border-width-xs, 1px))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"badge\":\"_96e6251aad1a6136__badge\",\"is-high-intent\":\"_99f7158cb520f750__is-high-intent\",\"is-medium-intent\":\"c20ebef2365bc8b7__is-medium-intent\",\"is-low-intent\":\"_365e1626c6202e52__is-low-intent\",\"is-stable-intent\":\"_33f8198127ddf4ef__is-stable-intent\",\"is-informational-intent\":\"_04c1aca8fc449412__is-informational-intent\",\"is-draft-intent\":\"_90726e69d495ec19__is-draft-intent\",\"is-none-intent\":\"_898f4a544993bd39__is-none-intent\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,kBAAiB;AACjB,qBAA2B;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,s2DAAk3D,CAAC;AAC75D,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,kBAAiB,qCAAoC,oBAAmB,sCAAqC,iBAAgB,oCAAmC,oBAAmB,uCAAsC,2BAA0B,8CAA6C,mBAAkB,sCAAqC,kBAAiB,oCAAmC;;;ADGvb,IAAM,YAAQ,2BAA2C,SAASA,OACxE,EAAE,UAAU,SAAS,QAAQ,QAAQ,WAAW,GAAG,MAAM,GACzD,KACC;AACD,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAO,yBAAsB,OAAO;AAAA,MACnC,eAAW,YAAAC;AAAA,QACV,cAAO;AAAA,QACP,cAAQ,MAAO,MAAO,SAAU;AAAA,QAChC;AAAA,MACD;AAAA,MACA;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR,CAAE;",
   "names": ["Badge", "clsx"]
 }