@wordpress/components 34.0.0 → 35.0.1

package/CHANGELOG.md

@@ -2,11 +2,35 @@
 
 ## Unreleased
 
+## 35.0.1 (2026-06-16)
+
+## 35.0.0 (2026-06-10)
+
+### Breaking Changes
+
+-   Revert React back to v18 [#78940](https://github.com/WordPress/gutenberg/pull/78940).
+
+### Documentation
+
+-   Fix documentation typos and grammar ([#78686](https://github.com/WordPress/gutenberg/pull/78686)).
+
+### Enhancements
+
+-   `Tooltip`: Use `--wpds-border-radius-md` for portaled popup surfaces, aligning with menus and popovers ([#78983](https://github.com/WordPress/gutenberg/pull/78983)).
+
+### Bug Fixes
+
+-   `ColorPalette`: Avoid rendering an empty palette when custom colors are disabled and no color presets are available ([#72402](https://github.com/WordPress/gutenberg/pull/72402)).
+
+### Internal
+
+-   `UnitControl`: Remove dead native code branches now that `Platform.OS` is always `'web'` following the React Native removal ([#79031](https://github.com/WordPress/gutenberg/pull/79031)).
+-   Dependency updates ([#77954](https://github.com/WordPress/gutenberg/pull/77954)).
+
 ## 34.0.0 (2026-05-27)
 
 ### Breaking Changes
 
--   Upgrade React to v19 ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
 -   `BoxControl`: Remove deprecated `__experimentalApplyValueToSides` export ([#78528](https://github.com/WordPress/gutenberg/pull/78528)).
 -   `Navigation`: Completely remove deprecated component family ([#78529](https://github.com/WordPress/gutenberg/pull/78529)).
 -   `Notice`: Rework internal DOM structure and class names ([#78231](https://github.com/WordPress/gutenberg/pull/78231)). Consumers relying on those implementation details should update their projects accordingly:

package/build/alignment-matrix-control/cell.cjs

@@ -118,7 +118,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/alignment-matrix-control/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("9251e317a9", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
+  registerStyle("0cdd5d4fc6", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
 }
 var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
 

package/build/alignment-matrix-control/cell.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../../style-runtime/src/index.ts", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"9251e317a9\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"0cdd5d4fc6\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,82CAA82C;AAC34C;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;AFahL,yBAA2C;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,MAAM,6BAAgB,KAAK;AAAA,IAC3B,UAAuB,uCAAAC,MAAM,2BAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,uCAAAF,KAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,eAAW,YAAAG,SAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
 }

package/build/alignment-matrix-control/index.cjs

@@ -122,7 +122,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/alignment-matrix-control/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("9251e317a9", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
+  registerStyle("0cdd5d4fc6", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
 }
 var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
 

package/build/alignment-matrix-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"9251e317a9\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"0cdd5d4fc6\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "mappings": "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",
   "names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
 }

package/build/border-control/border-control-dropdown/component.cjs

@@ -133,8 +133,6 @@ var BorderControlDropdown = (props, forwardedRef) => {
     resetButtonWrapperClassName,
     size,
     __unstablePopoverProps,
-    onToggle: onToggleProp,
-    // Remove from `otherProps` to avoid type errors (native HTML `onToggle` vs `Dropdown` `onToggle`).
     ...otherProps
   } = (0, import_hook.useBorderControlDropdown)(props);
   const {
@@ -163,38 +161,40 @@ var BorderControlDropdown = (props, forwardedRef) => {
       })
     })
   });
-  const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_content_wrapper.default, {
-    paddingSize: "medium",
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
-      className: popoverControlsClassName,
-      spacing: 6,
-      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
-        className: popoverContentClassName,
-        value: color,
-        onChange: onColorChange,
-        colors,
-        disableCustomColors,
-        __experimentalIsRenderedInSidebar,
-        clearable: false,
-        enableAlpha
-      }), enableStyle && isStyleSettable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_control_style_picker.default, {
-        label: (0, import_i18n.__)("Style"),
-        value: style,
-        onChange: onStyleChange
+  const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_content_wrapper.default, {
+      paddingSize: "medium",
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
+        className: popoverControlsClassName,
+        spacing: 6,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
+          className: popoverContentClassName,
+          value: color,
+          onChange: onColorChange,
+          colors,
+          disableCustomColors,
+          __experimentalIsRenderedInSidebar,
+          clearable: false,
+          enableAlpha
+        }), enableStyle && isStyleSettable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_control_style_picker.default, {
+          label: (0, import_i18n.__)("Style"),
+          value: style,
+          onChange: onStyleChange
+        })]
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        className: resetButtonWrapperClassName,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
+          variant: "tertiary",
+          onClick: () => {
+            onReset();
+          },
+          disabled: !enableResetButton,
+          accessibleWhenDisabled: true,
+          __next40pxDefaultSize: true,
+          children: (0, import_i18n.__)("Reset")
+        })
       })]
-    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-      className: resetButtonWrapperClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
-        variant: "tertiary",
-        onClick: () => {
-          onReset();
-        },
-        disabled: !enableResetButton,
-        accessibleWhenDisabled: true,
-        __next40pxDefaultSize: true,
-        children: (0, import_i18n.__)("Reset")
-      })
-    })]
+    })
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.default, {
     renderToggle,

package/build/border-control/border-control-dropdown/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control-dropdown/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n  if (!colorValue || !colors) {\n    return;\n  }\n  if (isMultiplePaletteArray(colors)) {\n    // Multiple origins\n    let matchedColor;\n    colors.some(origin => origin.colors.some(color => {\n      if (color.color === colorValue) {\n        matchedColor = color;\n        return true;\n      }\n      return false;\n    }));\n    return matchedColor;\n  }\n\n  // Single origin\n  return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n  if (isStyleEnabled) {\n    if (colorObject) {\n      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n      return style ? sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'), colorObject.name, ariaLabelValue, style) : sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n    }\n    if (colorValue) {\n      const ariaLabelValue = getAriaLabelColorValue(colorValue);\n      return style ? sprintf(\n      // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'), ariaLabelValue, style) : sprintf(\n      // translators: %s: The color's hex code e.g: \"#f00\".\n      __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n    }\n    return __('Border color and style picker.');\n  }\n  if (colorObject) {\n    return sprintf(\n    // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n  }\n  if (colorValue) {\n    return sprintf(\n    // translators: %s: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n  }\n  return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n  const {\n    __experimentalIsRenderedInSidebar,\n    border,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    indicatorClassName,\n    indicatorWrapperClassName,\n    isStyleSettable,\n    onReset,\n    onColorChange,\n    onStyleChange,\n    popoverContentClassName,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    size,\n    __unstablePopoverProps,\n    onToggle: onToggleProp,\n    // Remove from `otherProps` to avoid type errors (native HTML `onToggle` vs `Dropdown` `onToggle`).\n    ...otherProps\n  } = useBorderControlDropdown(props);\n  const {\n    color,\n    style\n  } = border || {};\n  const colorObject = getColorObject(color, colors);\n  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n  const enableResetButton = color || style && style !== 'none';\n  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n  const renderToggle = ({\n    onToggle\n  }) => /*#__PURE__*/_jsx(Button, {\n    onClick: onToggle,\n    variant: \"tertiary\",\n    \"aria-label\": toggleAriaLabel,\n    tooltipPosition: dropdownPosition,\n    label: __('Border color and style picker'),\n    showTooltip: true,\n    __next40pxDefaultSize: size === '__unstable-large',\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: indicatorWrapperClassName,\n      children: /*#__PURE__*/_jsx(ColorIndicator, {\n        className: indicatorClassName,\n        colorValue: color\n      })\n    })\n  });\n  const renderContent = () => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n    paddingSize: \"medium\",\n    children: [/*#__PURE__*/_jsxs(VStack, {\n      className: popoverControlsClassName,\n      spacing: 6,\n      children: [/*#__PURE__*/_jsx(ColorPalette, {\n        className: popoverContentClassName,\n        value: color,\n        onChange: onColorChange,\n        colors,\n        disableCustomColors,\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        clearable: false,\n        enableAlpha: enableAlpha\n      }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n        label: __('Style'),\n        value: style,\n        onChange: onStyleChange\n      })]\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: resetButtonWrapperClassName,\n      children: /*#__PURE__*/_jsx(Button, {\n        variant: \"tertiary\",\n        onClick: () => {\n          onReset();\n        },\n        disabled: !enableResetButton,\n        accessibleWhenDisabled: true,\n        __next40pxDefaultSize: true,\n        children: __('Reset')\n      })\n    })]\n  });\n  return /*#__PURE__*/_jsx(Dropdown, {\n    renderToggle: renderToggle,\n    renderContent: renderContent,\n    popoverProps: {\n      ...__unstablePopoverProps\n    },\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,kBAA4B;AAK5B,yCAAqC;AACrC,oBAAmB;AACnB,6BAA2B;AAC3B,2BAAyB;AACzB,sBAAqB;AACrB,qBAAuB;AACvB,qBAA+B;AAC/B,kBAAyC;AACzC,sCAAmC;AACnC,mBAAuC;AACvC,yBAA2C;AAC3C,IAAM,yBAAyB,gBAAc;AAE3C,SAAO,WAAW,QAAQ,iBAAiB,IAAI;AACjD;AACA,IAAM,iBAAiB,CAAC,YAAY,WAAW;AAC7C,MAAI,CAAC,cAAc,CAAC,QAAQ;AAC1B;AAAA,EACF;AACA,UAAI,qCAAuB,MAAM,GAAG;AAElC,QAAI;AACJ,WAAO,KAAK,YAAU,OAAO,OAAO,KAAK,WAAS;AAChD,UAAI,MAAM,UAAU,YAAY;AAC9B,uBAAe;AACf,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC,CAAC;AACF,WAAO;AAAA,EACT;AAGA,SAAO,OAAO,KAAK,WAAS,MAAM,UAAU,UAAU;AACxD;AACA,IAAM,qBAAqB,CAAC,YAAY,aAAa,OAAO,mBAAmB;AAC7E,MAAI,gBAAgB;AAClB,QAAI,aAAa;AACf,YAAM,iBAAiB,uBAAuB,YAAY,KAAK;AAC/D,aAAO,YAAQ;AAAA;AAAA,YAEf,gBAAG,iJAAiJ;AAAA,QAAG,YAAY;AAAA,QAAM;AAAA,QAAgB;AAAA,MAAK,QAAI;AAAA;AAAA,YAElM,gBAAG,yGAAyG;AAAA,QAAG,YAAY;AAAA,QAAM;AAAA,MAAc;AAAA,IACjJ;AACA,QAAI,YAAY;AACd,YAAM,iBAAiB,uBAAuB,UAAU;AACxD,aAAO,YAAQ;AAAA;AAAA,YAEf,gBAAG,4HAA4H;AAAA,QAAG;AAAA,QAAgB;AAAA,MAAK,QAAI;AAAA;AAAA,YAE3J,gBAAG,kFAAkF;AAAA,QAAG;AAAA,MAAc;AAAA,IACxG;AACA,eAAO,gBAAG,gCAAgC;AAAA,EAC5C;AACA,MAAI,aAAa;AACf,eAAO;AAAA;AAAA,UAEP,gBAAG,+FAA+F;AAAA,MAAG,YAAY;AAAA,MAAM,uBAAuB,YAAY,KAAK;AAAA,IAAC;AAAA,EAClK;AACA,MAAI,YAAY;AACd,eAAO;AAAA;AAAA,UAEP,gBAAG,wEAAwE;AAAA,MAAG,uBAAuB,UAAU;AAAA,IAAC;AAAA,EAClH;AACA,aAAO,gBAAG,sBAAsB;AAClC;AACA,IAAM,wBAAwB,CAAC,OAAO,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA;AAAA,IAEV,GAAG;AAAA,EACL,QAAI,sCAAyB,KAAK;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,UAAU,CAAC;AACf,QAAM,cAAc,eAAe,OAAO,MAAM;AAChD,QAAM,kBAAkB,mBAAmB,OAAO,aAAa,OAAO,WAAW;AACjF,QAAM,oBAAoB,SAAS,SAAS,UAAU;AACtD,QAAM,mBAAmB,oCAAoC,gBAAgB;AAC7E,QAAM,eAAe,CAAC;AAAA,IACpB;AAAA,EACF,MAAmB,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,IAC9B,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,WAAO,gBAAG,+BAA+B;AAAA,IACzC,aAAa;AAAA,IACb,uBAAuB,SAAS;AAAA,IAChC,UAAuB,uCAAAD,KAAK,QAAQ;AAAA,MAClC,WAAW;AAAA,MACX,UAAuB,uCAAAA,KAAK,uBAAAE,SAAgB;AAAA,QAC1C,WAAW;AAAA,QACX,YAAY;AAAA,MACd,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACD,QAAM,gBAAgB,MAAmB,uCAAAC,MAAM,gCAAAC,SAAwB;AAAA,IACrE,aAAa;AAAA,IACb,UAAU,CAAc,uCAAAD,MAAM,uBAAQ;AAAA,MACpC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,qBAAAK,SAAc;AAAA,QACzC,WAAW;AAAA,QACX,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAG,eAAe,mBAAgC,uCAAAL,KAAK,mCAAAM,SAA0B;AAAA,QAChF,WAAO,gBAAG,OAAO;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,uCAAAN,KAAK,OAAO;AAAA,MAC3B,WAAW;AAAA,MACX,UAAuB,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,QAClC,SAAS;AAAA,QACT,SAAS,MAAM;AACb,kBAAQ;AAAA,QACV;AAAA,QACA,UAAU,CAAC;AAAA,QACX,wBAAwB;AAAA,QACxB,uBAAuB;AAAA,QACvB,cAAU,gBAAG,OAAO;AAAA,MACtB,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACD,SAAoB,uCAAAD,KAAK,gBAAAO,SAAU;AAAA,IACjC;AAAA,IACA;AAAA,IACA,cAAc;AAAA,MACZ,GAAG;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AACA,IAAM,qCAAiC,+BAAe,uBAAuB,uBAAuB;AACpG,IAAO,oBAAQ;",
-  "names": ["_jsx", "Button", "ColorIndicator", "_jsxs", "DropdownContentWrapper", "ColorPalette", "BorderControlStylePicker", "Dropdown"]
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n  if (!colorValue || !colors) {\n    return;\n  }\n  if (isMultiplePaletteArray(colors)) {\n    // Multiple origins\n    let matchedColor;\n    colors.some(origin => origin.colors.some(color => {\n      if (color.color === colorValue) {\n        matchedColor = color;\n        return true;\n      }\n      return false;\n    }));\n    return matchedColor;\n  }\n\n  // Single origin\n  return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n  if (isStyleEnabled) {\n    if (colorObject) {\n      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n      return style ? sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'), colorObject.name, ariaLabelValue, style) : sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n    }\n    if (colorValue) {\n      const ariaLabelValue = getAriaLabelColorValue(colorValue);\n      return style ? sprintf(\n      // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'), ariaLabelValue, style) : sprintf(\n      // translators: %s: The color's hex code e.g: \"#f00\".\n      __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n    }\n    return __('Border color and style picker.');\n  }\n  if (colorObject) {\n    return sprintf(\n    // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n  }\n  if (colorValue) {\n    return sprintf(\n    // translators: %s: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n  }\n  return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n  const {\n    __experimentalIsRenderedInSidebar,\n    border,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    indicatorClassName,\n    indicatorWrapperClassName,\n    isStyleSettable,\n    onReset,\n    onColorChange,\n    onStyleChange,\n    popoverContentClassName,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    size,\n    __unstablePopoverProps,\n    ...otherProps\n  } = useBorderControlDropdown(props);\n  const {\n    color,\n    style\n  } = border || {};\n  const colorObject = getColorObject(color, colors);\n  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n  const enableResetButton = color || style && style !== 'none';\n  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n  const renderToggle = ({\n    onToggle\n  }) => /*#__PURE__*/_jsx(Button, {\n    onClick: onToggle,\n    variant: \"tertiary\",\n    \"aria-label\": toggleAriaLabel,\n    tooltipPosition: dropdownPosition,\n    label: __('Border color and style picker'),\n    showTooltip: true,\n    __next40pxDefaultSize: size === '__unstable-large',\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: indicatorWrapperClassName,\n      children: /*#__PURE__*/_jsx(ColorIndicator, {\n        className: indicatorClassName,\n        colorValue: color\n      })\n    })\n  });\n  const renderContent = () => /*#__PURE__*/_jsx(_Fragment, {\n    children: /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n      paddingSize: \"medium\",\n      children: [/*#__PURE__*/_jsxs(VStack, {\n        className: popoverControlsClassName,\n        spacing: 6,\n        children: [/*#__PURE__*/_jsx(ColorPalette, {\n          className: popoverContentClassName,\n          value: color,\n          onChange: onColorChange,\n          colors,\n          disableCustomColors,\n          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n          clearable: false,\n          enableAlpha: enableAlpha\n        }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n          label: __('Style'),\n          value: style,\n          onChange: onStyleChange\n        })]\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: resetButtonWrapperClassName,\n        children: /*#__PURE__*/_jsx(Button, {\n          variant: \"tertiary\",\n          onClick: () => {\n            onReset();\n          },\n          disabled: !enableResetButton,\n          accessibleWhenDisabled: true,\n          __next40pxDefaultSize: true,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n  return /*#__PURE__*/_jsx(Dropdown, {\n    renderToggle: renderToggle,\n    renderContent: renderContent,\n    popoverProps: {\n      ...__unstablePopoverProps\n    },\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
+  "mappings": "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",
+  "names": ["_jsx", "Button", "ColorIndicator", "_Fragment", "_jsxs", "DropdownContentWrapper", "ColorPalette", "BorderControlStylePicker", "Dropdown"]
 }

package/build/color-palette/index.cjs

@@ -214,6 +214,9 @@ function UnforwardedColorPalette(props, forwardedRef) {
     metaProps,
     labelProps
   } = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
+  if (disableCustomColors && colors.length === 0 && !actions) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
     spacing: 3,
     ref: forwardedRef,

package/build/color-palette/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-palette/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug \u2014 entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = selectedSlug ? slug === selectedSlug : value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug \u2014 entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = selectedSlug ? slug === selectedSlug : value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n\n  // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.\n  if (disableCustomColors && colors.length === 0 && !actions) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
+  "mappings": "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",
   "names": ["namesPlugin", "a11yPlugin", "_jsx", "CircularOptionPicker", "_jsxs", "Dropdown", "DropdownContentWrapper", "clsx"]
 }

package/build/custom-gradient-picker/gradient-bar/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n  switch (action.type) {\n    case 'MOVE_INSERTER':\n      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'MOVING_INSERTER',\n          insertPosition: action.insertPosition\n        };\n      }\n      break;\n    case 'STOP_INSERTER_MOVE':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'OPEN_INSERTER':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'INSERTING_CONTROL_POINT',\n          insertPosition: state.insertPosition\n        };\n      }\n      break;\n    case 'CLOSE_INSERTER':\n      if (state.id === 'INSERTING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'START_CONTROL_CHANGE':\n      if (state.id === 'IDLE') {\n        return {\n          id: 'MOVING_CONTROL_POINT'\n        };\n      }\n      break;\n    case 'STOP_CONTROL_CHANGE':\n      if (state.id === 'MOVING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n  }\n  return state;\n};\nconst customGradientBarReducerInitialState = {\n  id: 'IDLE'\n};\nexport default function CustomGradientBar({\n  background,\n  hasGradient,\n  value: controlPoints,\n  onChange,\n  disableInserter = false,\n  disableAlpha = false,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const gradientMarkersContainerDomRef = useRef(null);\n  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n  const onMouseEnterAndMove = event => {\n    if (!gradientMarkersContainerDomRef.current) {\n      return;\n    }\n    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n    // If the insert point is close to an existing control point don't show it.\n    if (controlPoints.some(({\n      position\n    }) => {\n      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n    })) {\n      if (gradientBarState.id === 'MOVING_INSERTER') {\n        gradientBarStateDispatch({\n          type: 'STOP_INSERTER_MOVE'\n        });\n      }\n      return;\n    }\n    gradientBarStateDispatch({\n      type: 'MOVE_INSERTER',\n      insertPosition\n    });\n  };\n  const onMouseLeave = () => {\n    gradientBarStateDispatch({\n      type: 'STOP_INSERTER_MOVE'\n    });\n  };\n  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx('components-custom-gradient-picker__gradient-bar', {\n      'has-gradient': hasGradient\n    }),\n    onMouseEnter: onMouseEnterAndMove,\n    onMouseMove: onMouseEnterAndMove,\n    onMouseLeave: onMouseLeave,\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: \"components-custom-gradient-picker__gradient-bar-background\",\n      style: {\n        background,\n        opacity: hasGradient ? 1 : 0.4\n      }\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: gradientMarkersContainerDomRef,\n      className: \"components-custom-gradient-picker__markers-container\",\n      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        insertPosition: gradientBarState.insertPosition,\n        value: controlPoints,\n        onChange: onChange,\n        onOpenInserter: () => {\n          gradientBarStateDispatch({\n            type: 'OPEN_INSERTER'\n          });\n        },\n        onCloseInserter: () => {\n          gradientBarStateDispatch({\n            type: 'CLOSE_INSERTER'\n          });\n        }\n      }), /*#__PURE__*/_jsx(ControlPoints, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        disableRemove: disableInserter,\n        gradientPickerDomRef: gradientMarkersContainerDomRef,\n        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n        value: controlPoints,\n        onChange: onChange,\n        onStartControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'START_CONTROL_CHANGE'\n          });\n        },\n        onStopControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'STOP_CONTROL_CHANGE'\n          });\n        }\n      })]\n    })]\n  });\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n  switch (action.type) {\n    case 'MOVE_INSERTER':\n      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'MOVING_INSERTER',\n          insertPosition: action.insertPosition\n        };\n      }\n      break;\n    case 'STOP_INSERTER_MOVE':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'OPEN_INSERTER':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'INSERTING_CONTROL_POINT',\n          insertPosition: state.insertPosition\n        };\n      }\n      break;\n    case 'CLOSE_INSERTER':\n      if (state.id === 'INSERTING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'START_CONTROL_CHANGE':\n      if (state.id === 'IDLE') {\n        return {\n          id: 'MOVING_CONTROL_POINT'\n        };\n      }\n      break;\n    case 'STOP_CONTROL_CHANGE':\n      if (state.id === 'MOVING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n  }\n  return state;\n};\nconst customGradientBarReducerInitialState = {\n  id: 'IDLE'\n};\nexport default function CustomGradientBar({\n  background,\n  hasGradient,\n  value: controlPoints,\n  onChange,\n  disableInserter = false,\n  disableAlpha = false,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const gradientMarkersContainerDomRef = useRef(null);\n  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n  const onMouseEnterAndMove = event => {\n    if (!gradientMarkersContainerDomRef.current) {\n      return;\n    }\n    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n    // If the insert point is close to an existing control point don't show it.\n    if (controlPoints.some(({\n      position\n    }) => {\n      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n    })) {\n      if (gradientBarState.id === 'MOVING_INSERTER') {\n        gradientBarStateDispatch({\n          type: 'STOP_INSERTER_MOVE'\n        });\n      }\n      return;\n    }\n    gradientBarStateDispatch({\n      type: 'MOVE_INSERTER',\n      insertPosition\n    });\n  };\n  const onMouseLeave = () => {\n    gradientBarStateDispatch({\n      type: 'STOP_INSERTER_MOVE'\n    });\n  };\n  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx('components-custom-gradient-picker__gradient-bar', {\n      'has-gradient': hasGradient\n    }),\n    onMouseEnter: onMouseEnterAndMove,\n    onMouseMove: onMouseEnterAndMove,\n    onMouseLeave: onMouseLeave,\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: \"components-custom-gradient-picker__gradient-bar-background\",\n      style: {\n        background,\n        opacity: hasGradient ? 1 : 0.4\n      }\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: gradientMarkersContainerDomRef,\n      className: \"components-custom-gradient-picker__markers-container\",\n      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        insertPosition: gradientBarState.insertPosition,\n        value: controlPoints,\n        onChange: onChange,\n        onOpenInserter: () => {\n          gradientBarStateDispatch({\n            type: 'OPEN_INSERTER'\n          });\n        },\n        onCloseInserter: () => {\n          gradientBarStateDispatch({\n            type: 'CLOSE_INSERTER'\n          });\n        }\n      }), /*#__PURE__*/_jsx(ControlPoints, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        disableRemove: disableInserter,\n        gradientPickerDomRef: gradientMarkersContainerDomRef,\n        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n        value: controlPoints,\n        onChange: onChange,\n        onStartControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'START_CONTROL_CHANGE'\n          });\n        },\n        onStopControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'STOP_CONTROL_CHANGE'\n          });\n        }\n      })]\n    })]\n  });\n}"],
+  "mappings": "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",
   "names": ["_jsxs", "clsx", "_jsx", "ControlPoints"]
 }

package/build/disabled/index.cjs

@@ -52,7 +52,7 @@ function Disabled({
     value: isDisabled,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       // @ts-ignore Reason: inert is a recent HTML attribute
-      inert: isDisabled ? true : void 0,
+      inert: isDisabled ? "true" : void 0,
       className: isDisabled ? cx(import_disabled_styles.disabledStyles, className, "components-disabled") : void 0,
       ...props,
       children

package/build/disabled/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disabled/index.tsx"],
-  "sourcesContent": ["import { disabledStyles } from './styles/disabled-styles';\nimport { useCx } from '../utils';\nimport Context from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  const cx = useCx();\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-ignore Reason: inert is a recent HTML attribute\n      inert: isDisabled ? true : undefined,\n      className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA+B;AAC/B,mBAAsB;AACtB,qBAAoB;AACpB,yBAA4B;AAC5B,IAAM;AAAA,EACJ;AAAA,EACA;AACF,IAAI,eAAAA;AA6CJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAAG;AACD,QAAM,SAAK,oBAAM;AACjB,SAAoB,uCAAAC,KAAK,UAAU;AAAA,IACjC,OAAO;AAAA,IACP,UAAuB,uCAAAA,KAAK,OAAO;AAAA;AAAA,MAEjC,OAAO,aAAa,OAAO;AAAA,MAC3B,WAAW,aAAa,GAAG,uCAAgB,WAAW,qBAAqB,IAAI;AAAA,MAC/E,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU,eAAAD;AACnB,SAAS,WAAW;AACpB,IAAO,mBAAQ;",
+  "sourcesContent": ["import { disabledStyles } from './styles/disabled-styles';\nimport { useCx } from '../utils';\nimport Context from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  const cx = useCx();\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-ignore Reason: inert is a recent HTML attribute\n      inert: isDisabled ? 'true' : undefined,\n      className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA+B;AAC/B,mBAAsB;AACtB,qBAAoB;AACpB,yBAA4B;AAC5B,IAAM;AAAA,EACJ;AAAA,EACA;AACF,IAAI,eAAAA;AA6CJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAAG;AACD,QAAM,SAAK,oBAAM;AACjB,SAAoB,uCAAAC,KAAK,UAAU;AAAA,IACjC,OAAO;AAAA,IACP,UAAuB,uCAAAA,KAAK,OAAO;AAAA;AAAA,MAEjC,OAAO,aAAa,SAAS;AAAA,MAC7B,WAAW,aAAa,GAAG,uCAAgB,WAAW,qBAAqB,IAAI;AAAA,MAC/E,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU,eAAAD;AACnB,SAAS,WAAW;AACpB,IAAO,mBAAQ;",
   "names": ["Context", "_jsx"]
 }

package/build/draggable/index.cjs

@@ -107,7 +107,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/draggable/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("f8d1257e92", "._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:#0000;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}");
+  registerStyle("e7e88c1781", "._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}");
 }
 var style_module_default = { "invisible-drag-image": "_3476c2e530687f96__invisible-drag-image", "clone": "_6f00e51ab7574306__clone", "is-in-compat-slot": "_664ecd37377558df__is-in-compat-slot" };