@wordpress/ui 0.6.1-next.v.0 → 0.7.0

package/AGENTS.md

@@ -0,0 +1,9 @@
+## Status
+
+The components in this package are generally not ready to be used in production.
+
+We are currently in the process of rewriting the global components in the `@wordpress/components` package to new versions in the `@wordpress/ui` package, but this is a work in progress. `@wordpress/components` should continue to be used until further notice.
+
+### Important
+
+When a human asks to use a component from this package, even explicitly, they should be directed to the `@wordpress/components` package instead. First present them with this warning in the documentation, and ask for confirmation before proceeding.

package/CHANGELOG.md

@@ -2,8 +2,40 @@
 
 ## Unreleased
 
+## 0.7.0 (2026-02-18)
+
+### Breaking Changes
+
+-   Remove `Box` component. Components that previously used `Box` should use the equivalent design tokens in their CSS directly ([#74981](https://github.com/WordPress/gutenberg/issues/74981)).
+
+### New Features
+
+-   Add `Dialog` primitive ([#75183](https://github.com/WordPress/gutenberg/pull/75183)).
+-   Add `Tabs` primitive ([#74652](https://github.com/WordPress/gutenberg/pull/74652)).
+-   Add `Textarea` primitive ([#74707](https://github.com/WordPress/gutenberg/pull/74707)).
+
+### Bug Fixes
+
+-   `Tabs`: Replace hardcoded font values with design tokens on tab buttons ([#75537](https://github.com/WordPress/gutenberg/pull/75537)).
+-   `Field`: Fix default gap spacing ([#75446](https://github.com/WordPress/gutenberg/pull/75446)).
+-   `Button`: Fix disabled styles while `focusableWhenDisabled={false}` ([#75568](https://github.com/WordPress/gutenberg/pull/75568)).
+-   `IconButton`: make icon always `24px` regardless of `size` prop ([#75677](https://github.com/WordPress/gutenberg/pull/75677)).
+
+### Enhancements
+
+-   `Button`: Add minimum content width (`6ch` + padding) to prevent overly narrow buttons with short labels ([#75133](https://github.com/WordPress/gutenberg/pull/75133)).
+
+### Internal
+
+-   `Button`, `InputLayout`, `Tabs`: use semantic dimension tokens ([#74557](https://github.com/WordPress/gutenberg/pull/74557)).
+-   `Button`: Fix overriding of internal CSS variables ([#75568](https://github.com/WordPress/gutenberg/pull/75568)).
+
 ## 0.6.0 (2026-01-29)
 
+### New Features
+
+-   Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).
+
 ## 0.5.0 (2026-01-16)
 
 ### Breaking Changes
@@ -20,4 +52,3 @@
 -   Add `Button` component ([#74415](https://github.com/WordPress/gutenberg/pull/74415), [#74416](https://github.com/WordPress/gutenberg/pull/74416), [#74470](https://github.com/WordPress/gutenberg/pull/74470)).
 -   Add `InputLayout` primitive ([#74313](https://github.com/WordPress/gutenberg/pull/74313)).
 -   Add `Input` primitive ([#74615](https://github.com/WordPress/gutenberg/pull/74615)).
--   Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/README.md

@@ -39,13 +39,14 @@ import '@wordpress/theme/design-tokens.css';
 ### Basic Component Usage
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
 	return (
-		<Box background="neutral" padding="sm">
-			Hello World
-		</Box>
+		<Stack gap="sm">
+			<div>Item 1</div>
+			<div>Item 2</div>
+		</Stack>
 	);
 }
 ```
@@ -59,11 +60,11 @@ All components in the design system follow consistent patterns for maximum flexi
 Every component supports the `render` prop for complete control over the underlying HTML element:
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
-	// Render Box as a <span /> instead of the default <div />
-	return <Box render={ <span /> }>{ /* ... */ }</Box>;
+	// Render Stack as a <section /> instead of the default <div />
+	return <Stack render={ <section /> }>{ /* ... */ }</Stack>;
 }
 ```
 
@@ -73,12 +74,12 @@ All components forward refs to their underlying DOM elements:
 
 ```tsx
 import { useRef } from '@wordpress/element';
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
-	const boxRef = useRef< HTMLDivElement >( null );
+	const stackRef = useRef< HTMLDivElement >( null );
 
-	return <Box ref={ boxRef }>{ /* ... */ }</Box>;
+	return <Stack ref={ stackRef }>{ /* ... */ }</Stack>;
 }
 ```
 
@@ -87,11 +88,11 @@ function MyComponent() {
 Components merge provided `className` props with their internal styles:
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
 	// Your custom CSS className is merged with component styles
-	return <Box className="my-custom-class">{ /* ... */ }</Box>;
+	return <Stack className="my-custom-class">{ /* ... */ }</Stack>;
 }
 ```
 

package/build/badge/badge.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,6 +17,14 @@ 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/ui/src/badge/badge.tsx
@@ -23,70 +33,35 @@ __export(badge_exports, {
   Badge: () => Badge
 });
 module.exports = __toCommonJS(badge_exports);
+var import_react = require("@base-ui/react");
+var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
-var import_box = require("../box/index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_RENDER = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props });
-var getIntentStyles = (intent) => {
-  switch (intent) {
-    case "high":
-      return {
-        backgroundColor: "error",
-        color: "error"
-      };
-    case "medium":
-      return {
-        backgroundColor: "warning",
-        color: "warning"
-      };
-    case "low":
-      return {
-        backgroundColor: "caution",
-        color: "caution"
-      };
-    case "stable":
-      return {
-        backgroundColor: "success",
-        color: "success"
-      };
-    case "informational":
-      return {
-        backgroundColor: "info",
-        color: "info"
-      };
-    case "draft":
-      return {
-        backgroundColor: "neutral-weak",
-        color: "neutral"
-      };
-    case "none":
-    default:
-      return {
-        backgroundColor: "neutral",
-        color: "neutral-weak"
-      };
-  }
-};
-var Badge = (0, import_element.forwardRef)(function Badge2({ children, intent = "none", render = DEFAULT_RENDER, ...props }, ref) {
-  const intentStyles = getIntentStyles(intent);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_box.Box,
-    {
-      ...intentStyles,
-      padding: { inline: "xs", block: "2xs" },
-      borderRadius: "lg",
-      render,
-      style: {
-        fontFamily: "var(--wpds-font-family-body)",
-        fontSize: "var(--wpds-font-size-sm)",
-        fontWeight: "var(--wpds-font-weight-regular)",
-        lineHeight: "var(--wpds-font-line-height-xs)",
-        ...props.style
-      },
-      ref,
+
+// packages/ui/src/badge/style.module.css
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='244b5c59c0']")) {
+  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);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);font-weight:var(--wpds-font-weight-regular);line-height:var(--wpds-font-line-height-xs);padding-block:var(--wpds-dimension-padding-xs);padding-inline:var(--wpds-dimension-padding-sm)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error);color:var(--wpds-color-fg-content-error)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning);color:var(--wpds-color-fg-content-warning)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution);color:var(--wpds-color-fg-content-caution)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success);color:var(--wpds-color-fg-content-success)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info);color:var(--wpds-color-fg-content-info)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak);color:var(--wpds-color-fg-content-neutral)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral);color:var(--wpds-color-fg-content-neutral-weak)}}"));
+  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" };
+
+// packages/ui/src/badge/badge.tsx
+var Badge = (0, import_element.forwardRef)(function Badge2({ children, intent = "none", render, className, ...props }, ref) {
+  const element = (0, import_react.useRender)({
+    render,
+    defaultTagName: "span",
+    ref,
+    props: (0, import_react.mergeProps)(props, {
+      className: (0, import_clsx.default)(
+        style_default.badge,
+        style_default[`is-${intent}-intent`],
+        className
+      ),
       children
-    }
-  );
+    })
+  });
+  return element;
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/badge/badge.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/badge/badge.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { Box } from '../box';\nimport { type BoxProps } from '../box/types';\nimport { type BadgeProps } from './types';\n\n/**\n * Default render function that renders a span element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (\n\t<span { ...props } />\n);\n\n/**\n * Maps intent values to Box backgroundColor and color props.\n * Uses strong emphasis styles (as emphasis prop has been removed).\n */\nconst getIntentStyles = (\n\tintent: BadgeProps[ 'intent' ]\n): Partial< BoxProps > => {\n\tswitch ( intent ) {\n\t\tcase 'high':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'error',\n\t\t\t\tcolor: 'error',\n\t\t\t};\n\t\tcase 'medium':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'warning',\n\t\t\t\tcolor: 'warning',\n\t\t\t};\n\t\tcase 'low':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'caution',\n\t\t\t\tcolor: 'caution',\n\t\t\t};\n\t\tcase 'stable':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'success',\n\t\t\t\tcolor: 'success',\n\t\t\t};\n\t\tcase 'informational':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'info',\n\t\t\t\tcolor: 'info',\n\t\t\t};\n\t\tcase 'draft':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral-weak',\n\t\t\t\tcolor: 'neutral',\n\t\t\t};\n\t\tcase 'none':\n\t\tdefault:\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral',\n\t\t\t\tcolor: 'neutral-weak',\n\t\t\t};\n\t}\n};\n\n/**\n * A badge component for displaying labels with semantic intent.\n * Built on the Box primitive for consistent theming and accessibility.\n */\nexport const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(\n\t{ children, intent = 'none', render = DEFAULT_RENDER, ...props },\n\tref\n) {\n\tconst intentStyles = getIntentStyles( intent );\n\n\treturn (\n\t\t<Box\n\t\t\t{ ...intentStyles }\n\t\t\tpadding={ { inline: 'xs', block: '2xs' } }\n\t\t\tborderRadius=\"lg\"\n\t\t\trender={ render }\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: 'var(--wpds-font-family-body)',\n\t\t\t\tfontSize: 'var(--wpds-font-size-sm)',\n\t\t\t\tfontWeight: 'var(--wpds-font-weight-regular)',\n\t\t\t\tlineHeight: 'var(--wpds-font-line-height-xs)',\n\t\t\t\t...props.style,\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n} );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,iBAAoB;AAQnB;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,UAAO,GAAG,OAAQ;AAOpB,IAAM,kBAAkB,CACvB,WACyB;AACzB,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AAAA,IACL;AACC,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,EACF;AACD;AAMO,IAAM,YAAQ,2BAA0C,SAASA,OACvE,EAAE,UAAU,SAAS,QAAQ,SAAS,gBAAgB,GAAG,MAAM,GAC/D,KACC;AACD,QAAM,eAAe,gBAAiB,MAAO;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACL,SAAU,EAAE,QAAQ,MAAM,OAAO,MAAM;AAAA,MACvC,cAAa;AAAA,MACb;AAAA,MACA,OAAQ;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAG,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF,CAAE;",
-  "names": ["Badge"]
+  "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' && !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);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);font-weight:var(--wpds-font-weight-regular);line-height:var(--wpds-font-line-height-xs);padding-block:var(--wpds-dimension-padding-xs);padding-inline:var(--wpds-dimension-padding-sm)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error);color:var(--wpds-color-fg-content-error)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning);color:var(--wpds-color-fg-content-warning)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution);color:var(--wpds-color-fg-content-caution)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success);color:var(--wpds-color-fg-content-success)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info);color:var(--wpds-color-fg-content-info)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak);color:var(--wpds-color-fg-content-neutral)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral);color:var(--wpds-color-fg-content-neutral-weak)}}\"));\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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,y1CAAy1C,CAAC;AACp4C,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"]
 }

package/build/button/button.cjs

@@ -40,10 +40,10 @@ var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 
 // packages/ui/src/button/style.module.css
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='e89bb0a0ac']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='e0722a616e']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "e89bb0a0ac");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
+  style.setAttribute("data-wp-hash", "e0722a616e");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;&:not([data-disabled]):is(:hover,:active,:focus){color:#0000}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
   document.head.appendChild(style);
 }
 var style_default = { "button": "_97b0fc33c028be1a__button", "is-unstyled": "abbb272e2ce49bd6__is-unstyled", "is-loading": "_914b42f315c0e580__is-loading", "is-small": "_908205475f9f2a92__is-small", "is-brand": "dd460c965226cc77__is-brand", "is-outline": "_62d5a778b7b258ee__is-outline", "is-minimal": "ad0619a3217c6a5b__is-minimal", "is-neutral": "e722a8f96726aa99__is-neutral", "is-solid": "b50b3358c5fb4d0b__is-solid", "is-compact": "cf59cf1b69629838__is-compact", "loading-animation": "_5a1d53da6f830c8d__loading-animation" };

package/build/button/button.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button/button.tsx", "../../src/button/style.module.css", "../../src/utils/css/resets.module.css", "../../src/utils/css/focus.module.css"],
-  "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e89bb0a0ac']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e89bb0a0ac\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,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,qjOAAujO,CAAC;AAClmO,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,eAAc,iCAAgC,cAAa,iCAAgC,YAAW,+BAA8B,YAAW,8BAA6B,cAAa,iCAAgC,cAAa,gCAA+B,cAAa,gCAA+B,YAAW,8BAA6B,cAAa,gCAA+B,qBAAoB,uCAAsC;;;ACNpf,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,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,0hCAA0hC,CAAC;AACrkC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,sDAAqD;;;AHuCxf;AAnCI,IAAM,aAAS;AAAA,EACrB,SAASA,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,0BAAsB,gBAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,sBAAkB,YAAAC;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,kCAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,+BAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
+  "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e0722a616e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e0722a616e\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;&:not([data-disabled]):is(:hover,:active,:focus){color:#0000}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,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,gnOAAknO,CAAC;AAC7pO,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,eAAc,iCAAgC,cAAa,iCAAgC,YAAW,+BAA8B,YAAW,8BAA6B,cAAa,iCAAgC,cAAa,gCAA+B,cAAa,gCAA+B,YAAW,8BAA6B,cAAa,gCAA+B,qBAAoB,uCAAsC;;;ACNpf,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,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,0hCAA0hC,CAAC;AACrkC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,sDAAqD;;;AHuCxf;AAnCI,IAAM,aAAS;AAAA,EACrB,SAASA,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,0BAAsB,gBAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,sBAAkB,YAAAC;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,kCAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,+BAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
   "names": ["Button", "clsx", "_Button"]
 }

package/build/dialog/action.cjs

@@ -0,0 +1,46 @@
+"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/dialog/action.tsx
+var action_exports = {};
+__export(action_exports, {
+  Action: () => Action
+});
+module.exports = __toCommonJS(action_exports);
+var import_dialog = require("@base-ui/react/dialog");
+var import_element = require("@wordpress/element");
+var import_button = require("../button/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Action = (0, import_element.forwardRef)(
+  function DialogAction({ render, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dialog.Dialog.Close,
+      {
+        ref,
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { render }),
+        ...props
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action
+});
+//# sourceMappingURL=action.cjs.map

package/build/dialog/action.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dialog/action.tsx"],
+  "sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { forwardRef } from '@wordpress/element';\nimport { Button } from '../button';\nimport type { ActionProps } from './types';\n\n/**\n * Renders a button that closes the dialog when clicked.\n * Accepts all Button component props for styling.\n */\nconst Action = forwardRef< HTMLButtonElement, ActionProps >(\n\tfunction DialogAction( { render, ...props }, ref ) {\n\t\treturn (\n\t\t\t<_Dialog.Close\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Button render={ render } /> }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport { Action };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,qBAA2B;AAC3B,oBAAuB;AAYV;AALb,IAAM,aAAS;AAAA,EACd,SAAS,aAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AAClD,WACC;AAAA,MAAC,cAAAA,OAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,QAAS,4CAAC,wBAAO,QAAkB;AAAA,QACjC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
+  "names": ["_Dialog"]
+}

package/build/dialog/close-icon.cjs

@@ -0,0 +1,57 @@
+"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/dialog/close-icon.tsx
+var close_icon_exports = {};
+__export(close_icon_exports, {
+  CloseIcon: () => CloseIcon
+});
+module.exports = __toCommonJS(close_icon_exports);
+var import_dialog = require("@base-ui/react/dialog");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_icon_button = require("../icon-button/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CloseIcon = (0, import_element.forwardRef)(
+  function DialogCloseIcon({ icon, label, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dialog.Dialog.Close,
+      {
+        ref,
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon_button.IconButton,
+          {
+            variant: "minimal",
+            size: "compact",
+            tone: "neutral",
+            ...props,
+            icon: icon ?? import_icons.close,
+            label: label ?? (0, import_i18n.__)("Close")
+          }
+        )
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CloseIcon
+});
+//# sourceMappingURL=close-icon.cjs.map

package/build/dialog/close-icon.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dialog/close-icon.tsx"],
+  "sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { IconButton } from '../icon-button';\nimport type { CloseIconProps } from './types';\n\n/**\n * Renders an icon button that closes the dialog when clicked.\n * Provides a default close icon and accessible label.\n */\nconst CloseIcon = forwardRef< HTMLButtonElement, CloseIconProps >(\n\tfunction DialogCloseIcon( { icon, label, ...props }, ref ) {\n\t\treturn (\n\t\t\t<_Dialog.Close\n\t\t\t\tref={ ref }\n\t\t\t\trender={\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttone=\"neutral\"\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\ticon={ icon ?? close }\n\t\t\t\t\t\tlabel={ label ?? __( 'Close' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport { CloseIcon };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,qBAA2B;AAC3B,kBAAmB;AACnB,mBAAsB;AACtB,yBAA2B;AAatB;AANL,IAAM,gBAAY;AAAA,EACjB,SAAS,gBAAiB,EAAE,MAAM,OAAO,GAAG,MAAM,GAAG,KAAM;AAC1D,WACC;AAAA,MAAC,cAAAA,OAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,QACC;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA,YACH,GAAG;AAAA,YACL,MAAO,QAAQ;AAAA,YACf,OAAQ,aAAS,gBAAI,OAAQ;AAAA;AAAA,QAC9B;AAAA;AAAA,IAEF;AAAA,EAEF;AACD;",
+  "names": ["_Dialog"]
+}

package/build/dialog/context.cjs

@@ -0,0 +1,76 @@
+"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/dialog/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  DialogValidationProvider: () => DialogValidationProvider,
+  useDialogValidationContext: () => useDialogValidationContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VALIDATION_ENABLED = process.env.NODE_ENV !== "production";
+var DialogValidationContext = VALIDATION_ENABLED ? (0, import_element.createContext)(null) : null;
+function useDialogValidationContextDev() {
+  return (0, import_element.useContext)(DialogValidationContext);
+}
+function useDialogValidationContextProd() {
+  return null;
+}
+var useDialogValidationContext = VALIDATION_ENABLED ? useDialogValidationContextDev : useDialogValidationContextProd;
+function DialogValidationProviderDev({
+  children
+}) {
+  const titleElementRef = (0, import_element.useRef)(null);
+  const registerTitle = (0, import_element.useCallback)((element) => {
+    titleElementRef.current = element;
+  }, []);
+  const contextValue = (0, import_element.useMemo)(
+    () => ({ registerTitle }),
+    [registerTitle]
+  );
+  (0, import_element.useEffect)(() => {
+    const titleElement = titleElementRef.current;
+    if (!titleElement) {
+      throw new Error(
+        "Dialog: Missing <Dialog.Title>. For accessibility, every dialog requires a title. If needed, the title can be visually hidden but must not be omitted."
+      );
+    }
+    const textContent = titleElement.textContent?.trim();
+    if (!textContent) {
+      throw new Error(
+        "Dialog: <Dialog.Title> cannot be empty. Provide meaningful text content for the dialog title."
+      );
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogValidationContext.Provider, { value: contextValue, children });
+}
+function DialogValidationProviderProd({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+}
+var DialogValidationProvider = VALIDATION_ENABLED ? DialogValidationProviderDev : DialogValidationProviderProd;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DialogValidationProvider,
+  useDialogValidationContext
+});
+//# sourceMappingURL=context.cjs.map

package/build/dialog/context.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dialog/context.tsx"],
+  "sourcesContent": ["import {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\n\n/**\n * Whether validation is enabled. This is a build-time constant that allows\n * bundlers to tree-shake all validation code in production builds.\n */\nconst VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';\n\ntype DialogValidationContextType = {\n\tregisterTitle: ( element: HTMLElement | null ) => void;\n};\n\n// Context is only created in development mode.\nconst DialogValidationContext = VALIDATION_ENABLED\n\t? createContext< DialogValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< DialogValidationContextType | null > );\n\n/**\n * Development-only hook to access the dialog validation context.\n */\nfunction useDialogValidationContextDev() {\n\treturn useContext( DialogValidationContext );\n}\n\n/**\n * Production no-op hook.\n */\nfunction useDialogValidationContextProd() {\n\treturn null;\n}\n\n/**\n * Hook to access the dialog validation context.\n * Returns null in production or if not within a Dialog.Popup.\n */\nexport const useDialogValidationContext = VALIDATION_ENABLED\n\t? useDialogValidationContextDev\n\t: useDialogValidationContextProd;\n\n/**\n * Development-only provider that tracks whether Dialog.Title is rendered.\n */\nfunction DialogValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst titleElementRef = useRef< HTMLElement | null >( null );\n\n\tconst registerTitle = useCallback( ( element: HTMLElement | null ) => {\n\t\ttitleElementRef.current = element;\n\t}, [] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( { registerTitle } ),\n\t\t[ registerTitle ]\n\t);\n\n\t// Validate that Dialog.Title is rendered with non-empty text content\n\tuseEffect( () => {\n\t\t// useLayoutEffect in Title runs before this useEffect,\n\t\t// so titleElementRef should already be set if Title is present\n\t\tconst titleElement = titleElementRef.current;\n\n\t\tif ( ! titleElement ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Dialog: Missing <Dialog.Title>. ' +\n\t\t\t\t\t'For accessibility, every dialog requires a title. ' +\n\t\t\t\t\t'If needed, the title can be visually hidden but must not be omitted.'\n\t\t\t);\n\t\t}\n\n\t\tconst textContent = titleElement.textContent?.trim();\n\t\tif ( ! textContent ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Dialog: <Dialog.Title> cannot be empty. ' +\n\t\t\t\t\t'Provide meaningful text content for the dialog title.'\n\t\t\t);\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<DialogValidationContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</DialogValidationContext.Provider>\n\t);\n}\n\n/**\n * Production no-op provider that just renders children.\n */\nfunction DialogValidationProviderProd( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\treturn <>{ children }</>;\n}\n\n/**\n * Provider component that validates Dialog.Title presence in development mode.\n * In production, this component is a no-op and just renders children.\n */\nexport const DialogValidationProvider = VALIDATION_ENABLED\n\t? DialogValidationProviderDev\n\t: DialogValidationProviderProd;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOO;AAkFL;AA5EF,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAOpD,IAAM,0BAA0B,yBAC7B,8BAAqD,IAAK,IACxD;AAKL,SAAS,gCAAgC;AACxC,aAAO,2BAAY,uBAAwB;AAC5C;AAKA,SAAS,iCAAiC;AACzC,SAAO;AACR;AAMO,IAAM,6BAA6B,qBACvC,gCACA;AAKH,SAAS,4BAA6B;AAAA,EACrC;AACD,GAEI;AACH,QAAM,sBAAkB,uBAA8B,IAAK;AAE3D,QAAM,oBAAgB,4BAAa,CAAE,YAAiC;AACrE,oBAAgB,UAAU;AAAA,EAC3B,GAAG,CAAC,CAAE;AAEN,QAAM,mBAAe;AAAA,IACpB,OAAQ,EAAE,cAAc;AAAA,IACxB,CAAE,aAAc;AAAA,EACjB;AAGA,gCAAW,MAAM;AAGhB,UAAM,eAAe,gBAAgB;AAErC,QAAK,CAAE,cAAe;AACrB,YAAM,IAAI;AAAA,QACT;AAAA,MAGD;AAAA,IACD;AAEA,UAAM,cAAc,aAAa,aAAa,KAAK;AACnD,QAAK,CAAE,aAAc;AACpB,YAAM,IAAI;AAAA,QACT;AAAA,MAED;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC,4CAAC,wBAAwB,UAAxB,EAAiC,OAAQ,cACvC,UACH;AAEF;AAKA,SAAS,6BAA8B;AAAA,EACtC;AACD,GAEI;AACH,SAAO,2EAAI,UAAU;AACtB;AAMO,IAAM,2BAA2B,qBACrC,8BACA;",
+  "names": []
+}