@wordpress/components 32.0.2-next.v.0 → 32.1.0

package/build/utils/element-rect.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/element-rect.ts"],
-  "sourcesContent": ["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useEvent, useResizeObserver } from '@wordpress/compose';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n  element: undefined,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0\n};\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(element) {\n  var _offsetParent$getBoun, _offsetParent$scrollL, _offsetParent$scrollT;\n  // Position and dimension values computed with `getBoundingClientRect` have\n  // subpixel precision, but are affected by distortions since they represent\n  // the \"real\" measures, or in other words, the actual final values as rendered\n  // by the browser.\n  const rect = element.getBoundingClientRect();\n  if (rect.width === 0 || rect.height === 0) {\n    return;\n  }\n  const offsetParent = element.offsetParent;\n  const offsetParentRect = (_offsetParent$getBoun = offsetParent?.getBoundingClientRect()) !== null && _offsetParent$getBoun !== void 0 ? _offsetParent$getBoun : NULL_ELEMENT_OFFSET_RECT;\n  const offsetParentScrollX = (_offsetParent$scrollL = offsetParent?.scrollLeft) !== null && _offsetParent$scrollL !== void 0 ? _offsetParent$scrollL : 0;\n  const offsetParentScrollY = (_offsetParent$scrollT = offsetParent?.scrollTop) !== null && _offsetParent$scrollT !== void 0 ? _offsetParent$scrollT : 0;\n\n  // Computed widths and heights have subpixel precision, and are not affected\n  // by distortions.\n  const computedWidth = parseFloat(getComputedStyle(element).width);\n  const computedHeight = parseFloat(getComputedStyle(element).height);\n\n  // We can obtain the current scale factor for the element by comparing \"computed\"\n  // dimensions with the \"real\" ones.\n  const scaleX = computedWidth / rect.width;\n  const scaleY = computedHeight / rect.height;\n  return {\n    element,\n    // To obtain the adjusted values for the position:\n    // 1. Compute the element's position relative to the offset parent.\n    // 2. Correct for the scale factor.\n    // 3. Adjust for the scroll position of the offset parent.\n    top: (rect.top - offsetParentRect?.top) * scaleY + offsetParentScrollY,\n    right: (offsetParentRect?.right - rect.right) * scaleX - offsetParentScrollX,\n    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY - offsetParentScrollY,\n    left: (rect.left - offsetParentRect?.left) * scaleX + offsetParentScrollX,\n    // Computed dimensions don't need any adjustments.\n    width: computedWidth,\n    height: computedHeight\n  };\n}\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * When no element is provided (`null` or `undefined`), the hook will return\n * a \"null\" rect, in which all values are `0` and `element` is `undefined`.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(targetElement, deps = []) {\n  const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);\n  const intervalRef = useRef();\n  const measure = useEvent(() => {\n    // Check that the targetElement is still attached to the DOM, in case\n    // it was removed since the last `measure` call.\n    if (targetElement && targetElement.isConnected) {\n      const elementOffsetRect = getElementOffsetRect(targetElement);\n      if (elementOffsetRect) {\n        setIndicatorPosition(elementOffsetRect);\n        clearInterval(intervalRef.current);\n        return true;\n      }\n    } else {\n      clearInterval(intervalRef.current);\n    }\n    return false;\n  });\n  const setElement = useResizeObserver(() => {\n    if (!measure()) {\n      requestAnimationFrame(() => {\n        if (!measure()) {\n          intervalRef.current = setInterval(measure, POLL_RATE);\n        }\n      });\n    }\n  });\n  useLayoutEffect(() => {\n    setElement(targetElement);\n    if (!targetElement) {\n      setIndicatorPosition(NULL_ELEMENT_OFFSET_RECT);\n    }\n  }, [setElement, targetElement]);\n\n  // Escape hatch to force a remeasurement when something else changes rather\n  // than the target elements' ref or size (for example, the target element\n  // can change its position within the tablist).\n  useLayoutEffect(() => {\n    measure();\n    // `measure` is a stable function, so it's safe to omit it from the deps array.\n    // deps can't be statically analyzed by ESLint\n  }, deps);\n  return indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAAkD;AAClD,qBAA4C;AASrC,IAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAeO,SAAS,qBAAqB,SAAS;AAC5C,MAAI,uBAAuB,uBAAuB;AAKlD,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,MAAI,KAAK,UAAU,KAAK,KAAK,WAAW,GAAG;AACzC;AAAA,EACF;AACA,QAAM,eAAe,QAAQ;AAC7B,QAAM,oBAAoB,wBAAwB,cAAc,sBAAsB,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB;AAChK,QAAM,uBAAuB,wBAAwB,cAAc,gBAAgB,QAAQ,0BAA0B,SAAS,wBAAwB;AACtJ,QAAM,uBAAuB,wBAAwB,cAAc,eAAe,QAAQ,0BAA0B,SAAS,wBAAwB;AAIrJ,QAAM,gBAAgB,WAAW,iBAAiB,OAAO,EAAE,KAAK;AAChE,QAAM,iBAAiB,WAAW,iBAAiB,OAAO,EAAE,MAAM;AAIlE,QAAM,SAAS,gBAAgB,KAAK;AACpC,QAAM,SAAS,iBAAiB,KAAK;AACrC,SAAO;AAAA,IACL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,KAAK,MAAM,kBAAkB,OAAO,SAAS;AAAA,IACnD,QAAQ,kBAAkB,QAAQ,KAAK,SAAS,SAAS;AAAA,IACzD,SAAS,kBAAkB,SAAS,KAAK,UAAU,SAAS;AAAA,IAC5D,OAAO,KAAK,OAAO,kBAAkB,QAAQ,SAAS;AAAA;AAAA,IAEtD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AACA,IAAM,YAAY;AAcX,SAAS,0BAA0B,eAAe,OAAO,CAAC,GAAG;AAClE,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,yBAAS,wBAAwB;AACnF,QAAM,kBAAc,uBAAO;AAC3B,QAAM,cAAU,yBAAS,MAAM;AAG7B,QAAI,iBAAiB,cAAc,aAAa;AAC9C,YAAM,oBAAoB,qBAAqB,aAAa;AAC5D,UAAI,mBAAmB;AACrB,6BAAqB,iBAAiB;AACtC,sBAAc,YAAY,OAAO;AACjC,eAAO;AAAA,MACT;AAAA,IACF,OAAO;AACL,oBAAc,YAAY,OAAO;AAAA,IACnC;AACA,WAAO;AAAA,EACT,CAAC;AACD,QAAM,iBAAa,kCAAkB,MAAM;AACzC,QAAI,CAAC,QAAQ,GAAG;AACd,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,GAAG;AACd,sBAAY,UAAU,YAAY,SAAS,SAAS;AAAA,QACtD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,sCAAgB,MAAM;AACpB,eAAW,aAAa;AACxB,QAAI,CAAC,eAAe;AAClB,2BAAqB,wBAAwB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,CAAC;AAK9B,sCAAgB,MAAM;AACpB,YAAQ;AAAA,EAGV,GAAG,IAAI;AACP,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useEvent, useResizeObserver } from '@wordpress/compose';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n  element: undefined,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0\n};\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(element) {\n  // Position and dimension values computed with `getBoundingClientRect` have\n  // subpixel precision, but are affected by distortions since they represent\n  // the \"real\" measures, or in other words, the actual final values as rendered\n  // by the browser.\n  const rect = element.getBoundingClientRect();\n  if (rect.width === 0 || rect.height === 0) {\n    return;\n  }\n  const offsetParent = element.offsetParent;\n  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;\n  const offsetParentScrollX = offsetParent?.scrollLeft ?? 0;\n  const offsetParentScrollY = offsetParent?.scrollTop ?? 0;\n\n  // Computed widths and heights have subpixel precision, and are not affected\n  // by distortions.\n  const computedWidth = parseFloat(getComputedStyle(element).width);\n  const computedHeight = parseFloat(getComputedStyle(element).height);\n\n  // We can obtain the current scale factor for the element by comparing \"computed\"\n  // dimensions with the \"real\" ones.\n  const scaleX = computedWidth / rect.width;\n  const scaleY = computedHeight / rect.height;\n  return {\n    element,\n    // To obtain the adjusted values for the position:\n    // 1. Compute the element's position relative to the offset parent.\n    // 2. Correct for the scale factor.\n    // 3. Adjust for the scroll position of the offset parent.\n    top: (rect.top - offsetParentRect?.top) * scaleY + offsetParentScrollY,\n    right: (offsetParentRect?.right - rect.right) * scaleX - offsetParentScrollX,\n    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY - offsetParentScrollY,\n    left: (rect.left - offsetParentRect?.left) * scaleX + offsetParentScrollX,\n    // Computed dimensions don't need any adjustments.\n    width: computedWidth,\n    height: computedHeight\n  };\n}\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * When no element is provided (`null` or `undefined`), the hook will return\n * a \"null\" rect, in which all values are `0` and `element` is `undefined`.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(targetElement, deps = []) {\n  const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);\n  const intervalRef = useRef();\n  const measure = useEvent(() => {\n    // Check that the targetElement is still attached to the DOM, in case\n    // it was removed since the last `measure` call.\n    if (targetElement && targetElement.isConnected) {\n      const elementOffsetRect = getElementOffsetRect(targetElement);\n      if (elementOffsetRect) {\n        setIndicatorPosition(elementOffsetRect);\n        clearInterval(intervalRef.current);\n        return true;\n      }\n    } else {\n      clearInterval(intervalRef.current);\n    }\n    return false;\n  });\n  const setElement = useResizeObserver(() => {\n    if (!measure()) {\n      requestAnimationFrame(() => {\n        if (!measure()) {\n          intervalRef.current = setInterval(measure, POLL_RATE);\n        }\n      });\n    }\n  });\n  useLayoutEffect(() => {\n    setElement(targetElement);\n    if (!targetElement) {\n      setIndicatorPosition(NULL_ELEMENT_OFFSET_RECT);\n    }\n  }, [setElement, targetElement]);\n\n  // Escape hatch to force a remeasurement when something else changes rather\n  // than the target elements' ref or size (for example, the target element\n  // can change its position within the tablist).\n  useLayoutEffect(() => {\n    measure();\n    // `measure` is a stable function, so it's safe to omit it from the deps array.\n    // deps can't be statically analyzed by ESLint\n  }, deps);\n  return indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAAkD;AAClD,qBAA4C;AASrC,IAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAeO,SAAS,qBAAqB,SAAS;AAK5C,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,MAAI,KAAK,UAAU,KAAK,KAAK,WAAW,GAAG;AACzC;AAAA,EACF;AACA,QAAM,eAAe,QAAQ;AAC7B,QAAM,mBAAmB,cAAc,sBAAsB,KAAK;AAClE,QAAM,sBAAsB,cAAc,cAAc;AACxD,QAAM,sBAAsB,cAAc,aAAa;AAIvD,QAAM,gBAAgB,WAAW,iBAAiB,OAAO,EAAE,KAAK;AAChE,QAAM,iBAAiB,WAAW,iBAAiB,OAAO,EAAE,MAAM;AAIlE,QAAM,SAAS,gBAAgB,KAAK;AACpC,QAAM,SAAS,iBAAiB,KAAK;AACrC,SAAO;AAAA,IACL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,KAAK,MAAM,kBAAkB,OAAO,SAAS;AAAA,IACnD,QAAQ,kBAAkB,QAAQ,KAAK,SAAS,SAAS;AAAA,IACzD,SAAS,kBAAkB,SAAS,KAAK,UAAU,SAAS;AAAA,IAC5D,OAAO,KAAK,OAAO,kBAAkB,QAAQ,SAAS;AAAA;AAAA,IAEtD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AACA,IAAM,YAAY;AAcX,SAAS,0BAA0B,eAAe,OAAO,CAAC,GAAG;AAClE,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,yBAAS,wBAAwB;AACnF,QAAM,kBAAc,uBAAO;AAC3B,QAAM,cAAU,yBAAS,MAAM;AAG7B,QAAI,iBAAiB,cAAc,aAAa;AAC9C,YAAM,oBAAoB,qBAAqB,aAAa;AAC5D,UAAI,mBAAmB;AACrB,6BAAqB,iBAAiB;AACtC,sBAAc,YAAY,OAAO;AACjC,eAAO;AAAA,MACT;AAAA,IACF,OAAO;AACL,oBAAc,YAAY,OAAO;AAAA,IACnC;AACA,WAAO;AAAA,EACT,CAAC;AACD,QAAM,iBAAa,kCAAkB,MAAM;AACzC,QAAI,CAAC,QAAQ,GAAG;AACd,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,GAAG;AACd,sBAAY,UAAU,YAAY,SAAS,SAAS;AAAA,QACtD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,sCAAgB,MAAM;AACpB,eAAW,aAAa;AACxB,QAAI,CAAC,eAAe;AAClB,2BAAqB,wBAAwB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,CAAC;AAK9B,sCAAgB,MAAM;AACpB,YAAQ;AAAA,EAGV,GAAG,IAAI;AACP,SAAO;AACT;",
   "names": []
 }

package/build/utils/font.cjs

@@ -35,8 +35,7 @@ __export(font_exports, {
 module.exports = __toCommonJS(font_exports);
 var import_font_values = __toESM(require("./font-values.cjs"));
 function font(value) {
-  var _FONT$value;
-  return (_FONT$value = import_font_values.default[value]) !== null && _FONT$value !== void 0 ? _FONT$value : "";
+  return import_font_values.default[value] ?? "";
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/utils/font.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/font.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport FONT from './font-values';\n\n/**\n *\n * @param {keyof FONT} value Path of value from `FONT`\n * @return {string} Font rule value\n */\nexport function font(value) {\n  var _FONT$value;\n  return (_FONT$value = FONT[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAiB;AAOV,SAAS,KAAK,OAAO;AAC1B,MAAI;AACJ,UAAQ,cAAc,mBAAAA,QAAK,KAAK,OAAO,QAAQ,gBAAgB,SAAS,cAAc;AACxF;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport FONT from './font-values';\n\n/**\n *\n * @param {keyof FONT} value Path of value from `FONT`\n * @return {string} Font rule value\n */\nexport function font(value) {\n  return FONT[value] ?? '';\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAiB;AAOV,SAAS,KAAK,OAAO;AAC1B,SAAO,mBAAAA,QAAK,KAAK,KAAK;AACxB;",
   "names": ["FONT"]
 }

package/build/utils/strings.cjs

@@ -42,8 +42,7 @@ var normalizeTextString = (value) => {
   return (0, import_remove_accents.default)(value).normalize("NFKC").toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, "-");
 };
 function kebabCase(str) {
-  var _str$toString;
-  let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : "";
+  let input = str?.toString?.() ?? "";
   input = input.replace(/['\u2019]/, "");
   return (0, import_change_case.paramCase)(input, {
     splitRegexp: [

package/build/utils/strings.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/strings.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\n/**\n * All unicode characters that we consider \"dash-like\":\n * - `\\u007e`: ~ (tilde)\n * - `\\u00ad`: \u00AD (soft hyphen)\n * - `\\u2053`: \u2053 (swung dash)\n * - `\\u207b`: \u207B (superscript minus)\n * - `\\u208b`: \u208B (subscript minus)\n * - `\\u2212`: \u2212 (minus sign)\n * - `\\\\p{Pd}`: any other Unicode dash character\n */\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\\u007e\\u00ad\\u2053\\u207b\\u208b\\u2212\\p{Pd}]/gu);\nexport const normalizeTextString = value => {\n  return removeAccents(value).normalize('NFKC').toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase(str) {\n  var _str$toString;\n  let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : '';\n\n  // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n  input = input.replace(/['\\u2019]/, '');\n  return paramCase(input, {\n    splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,\n    // fooBar => foo-bar, 3Bar => 3-bar\n    /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,\n    // 3bar => 3-bar\n    /([A-Za-z])([0-9])/g,\n    // Foo3 => foo-3, foo3 => foo-3\n    /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar\n    ]\n  });\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp(string) {\n  return string.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA0B;AAC1B,yBAA0B;AAY1B,IAAM,8BAA8B,IAAI,OAAO,gDAAgD;AACxF,IAAM,sBAAsB,WAAS;AAC1C,aAAO,sBAAAA,SAAc,KAAK,EAAE,UAAU,MAAM,EAAE,kBAAkB,EAAE,QAAQ,6BAA6B,GAAG;AAC5G;AAaO,SAAS,UAAU,KAAK;AAC7B,MAAI;AACJ,MAAI,SAAS,gBAAgB,KAAK,WAAW,OAAO,QAAQ,kBAAkB,SAAS,gBAAgB;AAGvG,UAAQ,MAAM,QAAQ,aAAa,EAAE;AACrC,aAAO,8BAAU,OAAO;AAAA,IACtB,aAAa;AAAA,MAAC;AAAA;AAAA,MAEd;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AASO,SAAS,aAAa,QAAQ;AACnC,SAAO,OAAO,QAAQ,uBAAuB,MAAM;AACrD;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\n/**\n * All unicode characters that we consider \"dash-like\":\n * - `\\u007e`: ~ (tilde)\n * - `\\u00ad`: \u00AD (soft hyphen)\n * - `\\u2053`: \u2053 (swung dash)\n * - `\\u207b`: \u207B (superscript minus)\n * - `\\u208b`: \u208B (subscript minus)\n * - `\\u2212`: \u2212 (minus sign)\n * - `\\\\p{Pd}`: any other Unicode dash character\n */\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\\u007e\\u00ad\\u2053\\u207b\\u208b\\u2212\\p{Pd}]/gu);\nexport const normalizeTextString = value => {\n  return removeAccents(value).normalize('NFKC').toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase(str) {\n  let input = str?.toString?.() ?? '';\n\n  // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n  input = input.replace(/['\\u2019]/, '');\n  return paramCase(input, {\n    splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,\n    // fooBar => foo-bar, 3Bar => 3-bar\n    /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,\n    // 3bar => 3-bar\n    /([A-Za-z])([0-9])/g,\n    // Foo3 => foo-3, foo3 => foo-3\n    /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar\n    ]\n  });\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp(string) {\n  return string.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA0B;AAC1B,yBAA0B;AAY1B,IAAM,8BAA8B,IAAI,OAAO,gDAAgD;AACxF,IAAM,sBAAsB,WAAS;AAC1C,aAAO,sBAAAA,SAAc,KAAK,EAAE,UAAU,MAAM,EAAE,kBAAkB,EAAE,QAAQ,6BAA6B,GAAG;AAC5G;AAaO,SAAS,UAAU,KAAK;AAC7B,MAAI,QAAQ,KAAK,WAAW,KAAK;AAGjC,UAAQ,MAAM,QAAQ,aAAa,EAAE;AACrC,aAAO,8BAAU,OAAO;AAAA,IACtB,aAAa;AAAA,MAAC;AAAA;AAAA,MAEd;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AASO,SAAS,aAAa,QAAQ;AACnC,SAAO,OAAO,QAAQ,uBAAuB,MAAM;AACrD;",
   "names": ["removeAccents"]
 }

package/build/utils/use-deprecated-props.cjs

@@ -31,7 +31,7 @@ function useDeprecated36pxDefaultSizeProp(props) {
   } = props;
   return {
     ...otherProps,
-    __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize
+    __next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/build/utils/use-deprecated-props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/use-deprecated-props.ts"],
-  "sourcesContent": ["export function useDeprecated36pxDefaultSizeProp(props) {\n  const {\n    __next36pxDefaultSize,\n    __next40pxDefaultSize,\n    ...otherProps\n  } = props;\n  return {\n    ...otherProps,\n    __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,iCAAiC,OAAO;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL,GAAG;AAAA,IACH,uBAAuB,0BAA0B,QAAQ,0BAA0B,SAAS,wBAAwB;AAAA,EACtH;AACF;",
+  "sourcesContent": ["export function useDeprecated36pxDefaultSizeProp(props) {\n  const {\n    __next36pxDefaultSize,\n    __next40pxDefaultSize,\n    ...otherProps\n  } = props;\n  return {\n    ...otherProps,\n    __next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,iCAAiC,OAAO;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL,GAAG;AAAA,IACH,uBAAuB,yBAAyB;AAAA,EAClD;AACF;",
   "names": []
 }

package/build/utils/values.cjs

@@ -35,8 +35,7 @@ function isValueEmpty(value) {
   return !isValueDefined(value) || isEmptyString;
 }
 function getDefinedValue(values = [], fallbackValue) {
-  var _values$find;
-  return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue;
+  return values.find(isValueDefined) ?? fallbackValue;
 }
 var stringToNumber = (value) => {
   return parseFloat(value);

package/build/utils/values.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/values.js"],
-  "sourcesContent": ["/**\n * Determines if a value is null or undefined.\n *\n * @template T\n *\n * @param {T} value The value to check.\n * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.\n */\nexport function isValueDefined(value) {\n  return value !== undefined && value !== null;\n}\n\n/**\n * Determines if a value is empty, null, or undefined.\n *\n * @param {string | number | null | undefined} value The value to check.\n * @return {value is (\"\" | null | undefined)} Whether value is empty.\n */\nexport function isValueEmpty(value) {\n  const isEmptyString = value === '';\n  return !isValueDefined(value) || isEmptyString;\n}\n\n/**\n * Get the first defined/non-null value from an array.\n *\n * @template T\n *\n * @param {Array<T | null | undefined>} values        Values to derive from.\n * @param {T}                           fallbackValue Fallback value if there are no defined values.\n * @return {T} A defined value or the fallback value.\n */\nexport function getDefinedValue(values = [], fallbackValue) {\n  var _values$find;\n  return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue;\n}\n\n/**\n * Converts a string to a number.\n *\n * @param {string} value\n * @return {number} String as a number.\n */\nexport const stringToNumber = value => {\n  return parseFloat(value);\n};\n\n/**\n * Regardless of the input being a string or a number, returns a number.\n *\n * Returns `undefined` in case the string is `undefined` or not a valid numeric value.\n *\n * @param {string | number} value\n * @return {number} The parsed number.\n */\nexport const ensureNumber = value => {\n  return typeof value === 'string' ? stringToNumber(value) : value;\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,eAAe,OAAO;AACpC,SAAO,UAAU,UAAa,UAAU;AAC1C;AAQO,SAAS,aAAa,OAAO;AAClC,QAAM,gBAAgB,UAAU;AAChC,SAAO,CAAC,eAAe,KAAK,KAAK;AACnC;AAWO,SAAS,gBAAgB,SAAS,CAAC,GAAG,eAAe;AAC1D,MAAI;AACJ,UAAQ,eAAe,OAAO,KAAK,cAAc,OAAO,QAAQ,iBAAiB,SAAS,eAAe;AAC3G;AAQO,IAAM,iBAAiB,WAAS;AACrC,SAAO,WAAW,KAAK;AACzB;AAUO,IAAM,eAAe,WAAS;AACnC,SAAO,OAAO,UAAU,WAAW,eAAe,KAAK,IAAI;AAC7D;",
+  "sourcesContent": ["/**\n * Determines if a value is null or undefined.\n *\n * @template T\n *\n * @param {T} value The value to check.\n * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.\n */\nexport function isValueDefined(value) {\n  return value !== undefined && value !== null;\n}\n\n/**\n * Determines if a value is empty, null, or undefined.\n *\n * @param {string | number | null | undefined} value The value to check.\n * @return {value is (\"\" | null | undefined)} Whether value is empty.\n */\nexport function isValueEmpty(value) {\n  const isEmptyString = value === '';\n  return !isValueDefined(value) || isEmptyString;\n}\n\n/**\n * Get the first defined/non-null value from an array.\n *\n * @template T\n *\n * @param {Array<T | null | undefined>} values        Values to derive from.\n * @param {T}                           fallbackValue Fallback value if there are no defined values.\n * @return {T} A defined value or the fallback value.\n */\nexport function getDefinedValue(values = [], fallbackValue) {\n  return values.find(isValueDefined) ?? fallbackValue;\n}\n\n/**\n * Converts a string to a number.\n *\n * @param {string} value\n * @return {number} String as a number.\n */\nexport const stringToNumber = value => {\n  return parseFloat(value);\n};\n\n/**\n * Regardless of the input being a string or a number, returns a number.\n *\n * Returns `undefined` in case the string is `undefined` or not a valid numeric value.\n *\n * @param {string | number} value\n * @return {number} The parsed number.\n */\nexport const ensureNumber = value => {\n  return typeof value === 'string' ? stringToNumber(value) : value;\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,eAAe,OAAO;AACpC,SAAO,UAAU,UAAa,UAAU;AAC1C;AAQO,SAAS,aAAa,OAAO;AAClC,QAAM,gBAAgB,UAAU;AAChC,SAAO,CAAC,eAAe,KAAK,KAAK;AACnC;AAWO,SAAS,gBAAgB,SAAS,CAAC,GAAG,eAAe;AAC1D,SAAO,OAAO,KAAK,cAAc,KAAK;AACxC;AAQO,IAAM,iBAAiB,WAAS;AACrC,SAAO,WAAW,KAAK;AACzB;AAUO,IAAM,eAAe,WAAS;AACnC,SAAO,OAAO,UAAU,WAAW,eAAe,KAAK,IAAI;AAC7D;",
   "names": []
 }

package/build/validated-form-controls/components/combobox-control.cjs

@@ -49,7 +49,7 @@ var UnforwardedValidatedComboboxControl = ({
   (0, import_element.useEffect)(() => {
     const input = validityTargetRef.current?.querySelector('input[role="combobox"]');
     if (input) {
-      input.required = required !== null && required !== void 0 ? required : false;
+      input.required = required ?? false;
     }
   }, [required]);
   return (

package/build/validated-form-controls/components/combobox-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/combobox-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);\nValidatedComboboxControl.displayName = 'ValidatedComboboxControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAA8C;AAK9C,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,uCAAAA,KAAK,4CAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,QAC3C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required ?? false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);\nValidatedComboboxControl.displayName = 'ValidatedComboboxControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAA8C;AAK9C,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,YAAY;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,uCAAAA,KAAK,4CAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,QAC3C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
   "names": ["_jsx", "ComboboxControl"]
 }

package/build/validated-form-controls/components/toggle-control.cjs

@@ -48,7 +48,7 @@ var UnforwardedValidatedToggleControl = ({
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
   (0, import_element.useEffect)(() => {
     if (validityTargetRef.current) {
-      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;
+      validityTargetRef.current.required = required ?? false;
     }
   }, [required]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {

package/build/validated-form-controls/components/toggle-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(ToggleControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);\nValidatedToggleControl.displayName = 'ValidatedToggleControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IAC7F;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required ?? false;\n    }\n  }, [required]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(ToggleControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);\nValidatedToggleControl.displayName = 'ValidatedToggleControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
   "names": ["_jsx", "ToggleControl"]
 }

package/build/validated-form-controls/control-with-error.cjs

@@ -63,18 +63,16 @@ function UnforwardedControlWithError({
     return () => validityTarget?.removeEventListener("invalid", handler);
   }, [getValidityTarget]);
   (0, import_element.useEffect)(() => {
-    var _validityTarget$close;
     const validityTarget = getValidityTarget();
     const suppressNativePopover = (event) => {
-      var _target$form$elements;
       event.preventDefault();
       const target = event.target;
-      const firstErrorInForm = Array.from((_target$form$elements = target.form?.elements) !== null && _target$form$elements !== void 0 ? _target$form$elements : []).find((el) => !el.validity.valid);
+      const firstErrorInForm = Array.from(target.form?.elements ?? []).find((el) => !el.validity.valid);
       if (!target.form || firstErrorInForm === target) {
         target.focus();
       }
     };
-    const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from((_validityTarget$close = validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type="radio"][name="${validityTarget?.name}"]`)) !== null && _validityTarget$close !== void 0 ? _validityTarget$close : []).filter((sibling) => sibling !== validityTarget) : [];
+    const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type="radio"][name="${validityTarget?.name}"]`) ?? []).filter((sibling) => sibling !== validityTarget) : [];
     validityTarget?.addEventListener("invalid", suppressNativePopover);
     radioSibilings.forEach((sibling) => sibling.addEventListener("invalid", suppressNativePopover));
     return () => {
@@ -110,8 +108,7 @@ function UnforwardedControlWithError({
         break;
       }
       case "invalid": {
-        var _customValidity$messa;
-        validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
+        validityTarget?.setCustomValidity(customValidity.message ?? "");
         setErrorMessage(validityTarget?.validationMessage);
         setStatusMessage(void 0);
         break;

package/build/validated-form-controls/control-with-error.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    var _validityTarget$close;\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      var _target$form$elements;\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from((_target$form$elements = target.form?.elements) !== null && _target$form$elements !== void 0 ? _target$form$elements : []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from((_validityTarget$close = validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`)) !== null && _validityTarget$close !== void 0 ? _validityTarget$close : []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          var _customValidity$messa;\n          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const message = () => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: showMessage && message()\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAA8D;AAM9D,gCAAkC;AAClC,yBAAkE;AAClE,SAAS,wBAAwB,OAAO,UAAU,kBAAkB;AAClE,MAAI,YAAY,CAAC,kBAAkB;AACjC,WAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,MACnC,UAAU,CAAC,OAAO,KAAK,QAAI,gBAAG,UAAU,CAAC,GAAG;AAAA,IAC9C,CAAC;AAAA,EACH;AACA,MAAI,CAAC,YAAY,kBAAkB;AACjC,WAAoB,uCAAAD,MAAM,mBAAAC,UAAW;AAAA,MACnC,UAAU,CAAC,OAAO,KAAK,QAAI,gBAAG,UAAU,CAAC,GAAG;AAAA,IAC9C,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAM,6BAA6B;AACnC,IAAM,YAAY;AAWlB,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,cAAc;AACf,QAAM,CAAC,cAAc,eAAe,QAAI,yBAAS;AACjD,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,yBAAS,KAAK;AACpD,QAAM,CAAC,WAAW,YAAY,QAAI,yBAAS,KAAK;AAIhD,gCAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,UAAU,MAAM;AACpB,qBAAe,IAAI;AACnB,sBAAgB,aAAa,4BAA4B,EAAE;AAAA,IAC7D;AACA,oBAAgB,iBAAiB,WAAW,OAAO;AACnD,WAAO,MAAM,gBAAgB,oBAAoB,WAAW,OAAO;AAAA,EACrE,GAAG,CAAC,iBAAiB,CAAC;AAGtB,gCAAU,MAAM;AACd,QAAI;AACJ,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,wBAAwB,WAAS;AACrC,UAAI;AACJ,YAAM,eAAe;AACrB,YAAM,SAAS,MAAM;AACrB,YAAM,mBAAmB,MAAM,MAAM,wBAAwB,OAAO,MAAM,cAAc,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC,EAAE,KAAK,QAAM,CAAC,GAAG,SAAS,KAAK;AAC5L,UAAI,CAAC,OAAO,QAAQ,qBAAqB,QAAQ;AAC/C,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AAKA,UAAM,iBAAiB,gBAAgB,SAAS,WAAW,gBAAgB,OAAO,MAAM,MAAM,wBAAwB,gBAAgB,QAAQ,IAAI,SAAS,EAAE,GAAG,iBAAiB,6BAA6B,gBAAgB,IAAI,IAAI,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC,EAAE,OAAO,aAAW,YAAY,cAAc,IAAI,CAAC;AACrW,oBAAgB,iBAAiB,WAAW,qBAAqB;AACjE,mBAAe,QAAQ,aAAW,QAAQ,iBAAiB,WAAW,qBAAqB,CAAC;AAC5F,WAAO,MAAM;AACX,sBAAgB,oBAAoB,WAAW,qBAAqB;AACpE,qBAAe,QAAQ,aAAW,QAAQ,oBAAoB,WAAW,qBAAqB,CAAC;AAAA,IACjG;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAGtB,gCAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,QAAI,CAAC,gBAAgB,MAAM;AACzB,sBAAgB,kBAAkB,EAAE;AACpC,sBAAgB,gBAAgB,iBAAiB;AACjD,uBAAiB,MAAS;AAC1B;AAAA,IACF;AACA,YAAQ,eAAe,MAAM;AAAA,MAC3B,KAAK,cACH;AACE,wBAAgB,kBAAkB,EAAE;AACpC,wBAAgB,MAAS;AACzB,yBAAiB;AAAA,UACf,MAAM;AAAA,UACN,SAAS,eAAe;AAAA,QAC1B,CAAC;AACD;AAAA,MACF;AAAA,MACF,KAAK,SACH;AACE,wBAAgB,kBAAkB,EAAE;AACpC,wBAAgB,gBAAgB,iBAAiB;AACjD,yBAAiB;AAAA,UACf,MAAM;AAAA,UACN,SAAS,eAAe;AAAA,QAC1B,CAAC;AACD;AAAA,MACF;AAAA,MACF,KAAK,WACH;AACE,YAAI;AACJ,wBAAgB,mBAAmB,wBAAwB,eAAe,aAAa,QAAQ,0BAA0B,SAAS,wBAAwB,EAAE;AAC5J,wBAAgB,gBAAgB,iBAAiB;AACjD,yBAAiB,MAAS;AAC1B;AAAA,MACF;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,CAAC;AAItC,gCAAU,MAAM;AACd,QAAI,CAAC,aAAa,aAAa;AAC7B;AAAA,IACF;AACA,QAAI,gBAAgB,SAAS,cAAc;AAEzC,YAAM,QAAQ,WAAW,MAAM;AAC7B,uBAAe,IAAI;AAAA,MACrB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AACA,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,MAAM,WAAW,CAAC;AAGjD,QAAM,SAAS,WAAS;AACtB,QAAI,WAAW;AACb;AAAA,IACF;AAIA,QAAI,CAAC,MAAM,iBAAiB,CAAC,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;AAC9E,mBAAa,IAAI;AACjB,wBAAkB,GAAG,aAAa,4BAA4B,EAAE;AAAA,IAClE;AAAA,EACF;AACA,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc;AAChB,aAAoB,uCAAAC,KAAK,6CAAmB;AAAA,QAC1C,MAAM;AAAA,QACN,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AACA,QAAI,eAAe,MAAM;AACvB,aAAoB,uCAAAA,KAAK,6CAAmB;AAAA,QAC1C,MAAM,cAAc;AAAA,QACpB,SAAS,cAAc;AAAA,MACzB,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT;AACA,SAAoB,uCAAAF,MAAM,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,UAAU,KAAC,6BAAa,UAAU;AAAA,MAChC,OAAO,wBAAwB,SAAS,MAAM,OAAO,UAAU,gBAAgB;AAAA,MAC/E;AAAA,IACF,CAAC,GAAgB,uCAAAE,KAAK,OAAO;AAAA,MAC3B,aAAa;AAAA,MACb,UAAU,eAAe,QAAQ;AAAA,IACnC,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,uBAAmB,2BAAW,2BAA2B;AACtE,iBAAiB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const message = () => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: showMessage && message()\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build-module/alignment-matrix-control/cell.mjs

@@ -6,128 +6,13 @@ import { VisuallyHidden } from "../visually-hidden/index.mjs";
 import { ALIGNMENT_LABEL } from "./utils.mjs";
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-var css = `/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-.style-module__grid-container__AuKvW {
-  direction: ltr;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  box-sizing: border-box;
-  aspect-ratio: 1;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  outline: none;
-  cursor: pointer;
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "0584b48070");
+  style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor: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}}"));
+  document.head.appendChild(style);
 }
-
-.style-module__grid-row__xCH47 {
-  grid-column: 1/-1;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.style-module__cell__Ovdp9 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  appearance: none;
-  border: none;
-  outline: none;
-}
-
-.style-module__point__N-8S1 {
-  display: block;
-  contain: strict;
-  box-sizing: border-box;
-  width: 6px;
-  aspect-ratio: 1;
-  margin: auto;
-  color: var(--wp-components-color-gray-400, #ccc);
-  /* Use border instead of background color so that the point shows
-  in Windows High Contrast Mode */
-  border: 3px solid currentColor;
-  /* Highlight active item */
-}
-.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  transform: scale(1.6666666667);
-}
-.style-module__point__N-8S1 {
-  /* Hover styles for non-active items */
-}
-.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-.style-module__point__N-8S1 {
-  /* Show an outline only when interacting with keyboard */
-}
-.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {
-  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: 1px;
-}
-@media not (prefers-reduced-motion) {
-  .style-module__point__N-8S1 {
-    transition-property: color, transform;
-    transition-duration: 120ms;
-    transition-timing-function: linear;
-  }
-}`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var style_module_default = {
-  "grid-container": "style-module__grid-container__AuKvW",
-  "grid-row": "style-module__grid-row__xCH47",
-  "cell": "style-module__cell__Ovdp9",
-  "point": "style-module__point__N-8S1"
-};
+var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
 
 // packages/components/src/alignment-matrix-control/cell.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/build-module/alignment-matrix-control/cell.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../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 css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__grid-container__AuKvW {\n  direction: ltr;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  outline: none;\n  cursor: pointer;\n}\n\n.style-module__grid-row__xCH47 {\n  grid-column: 1/-1;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.style-module__cell__Ovdp9 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  border: none;\n  outline: none;\n}\n\n.style-module__point__N-8S1 {\n  display: block;\n  contain: strict;\n  box-sizing: border-box;\n  width: 6px;\n  aspect-ratio: 1;\n  margin: auto;\n  color: var(--wp-components-color-gray-400, #ccc);\n  /* Use border instead of background color so that the point shows\n  in Windows High Contrast Mode */\n  border: 3px solid currentColor;\n  /* Highlight active item */\n}\n.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {\n  color: var(--wp-components-color-foreground, #1e1e1e);\n  transform: scale(1.6666666667);\n}\n.style-module__point__N-8S1 {\n  /* Hover styles for non-active items */\n}\n.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {\n  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n}\n.style-module__point__N-8S1 {\n  /* Show an outline only when interacting with keyboard */\n}\n.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {\n  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  outline-offset: 1px;\n}\n@media not (prefers-reduced-motion) {\n  .style-module__point__N-8S1 {\n    transition-property: color, transform;\n    transition-duration: 120ms;\n    transition-timing-function: linear;\n  }\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"grid-container\": \"style-module__grid-container__AuKvW\",\n  \"grid-row\": \"style-module__grid-row__xCH47\",\n  \"cell\": \"style-module__cell__Ovdp9\",\n  \"point\": \"style-module__point__N-8S1\"\n};"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;;;ACfhC,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,uBAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AACX;;;AD3GA,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,SAAS;AAAA,IAChC,MAAM,gBAAgB,KAAK;AAAA,IAC3B,UAAuB,sBAAM,UAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,qBAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,WAAW,KAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
+  "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}", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor: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\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;;;ACfhC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADWhL,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,SAAS;AAAA,IAChC,MAAM,gBAAgB,KAAK;AAAA,IAC3B,UAAuB,sBAAM,UAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,qBAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,WAAW,KAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": []
 }

package/build-module/alignment-matrix-control/icon.mjs

@@ -18,12 +18,11 @@ function AlignmentMatrixControlIcon({
   value = "center",
   ...props
 }) {
-  var _ref, _ref2;
   return /* @__PURE__ */ _jsx(SVG, {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
-    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
-    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
+    width: size ?? width ?? BASE_SIZE,
+    height: size ?? height ?? BASE_SIZE,
     role: "presentation",
     className: clsx("component-alignment-matrix-control-icon", className),
     style: {

package/build-module/alignment-matrix-control/icon.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/icon.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\nfunction AlignmentMatrixControlIcon({\n  className,\n  disablePointerEvents = true,\n  size,\n  width,\n  height,\n  style = {},\n  value = 'center',\n  ...props\n}) {\n  var _ref, _ref2;\n  return /*#__PURE__*/_jsx(SVG, {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,\n    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,\n    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,\n    role: \"presentation\",\n    className: clsx('component-alignment-matrix-control-icon', className),\n    style: {\n      pointerEvents: disablePointerEvents ? 'none' : undefined,\n      ...style\n    },\n    ...props,\n    children: ALIGNMENTS.map((align, index) => {\n      const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;\n      return /*#__PURE__*/_jsx(Rect, {\n        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        width: dotSize,\n        height: dotSize,\n        fill: \"currentColor\"\n      }, align);\n    })\n  });\n}\nexport default AlignmentMatrixControlIcon;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,MAAM,WAAW;AAK1B,SAAS,YAAY,yBAAyB;AAC9C,SAAS,OAAO,YAAY;AAC5B,IAAM,YAAY;AAClB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB,YAAY,IAAI,kBAAkB;AACxD,IAAM,WAAW;AACjB,IAAM,oBAAoB;AAC1B,SAAS,2BAA2B;AAAA,EAClC;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,MAAI,MAAM;AACV,SAAoB,qBAAK,KAAK;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,IACtC,QAAQ,OAAO,SAAS,QAAQ,SAAS,SAAS,OAAO,WAAW,QAAQ,SAAS,SAAS,OAAO;AAAA,IACrG,SAAS,QAAQ,SAAS,QAAQ,SAAS,SAAS,OAAO,YAAY,QAAQ,UAAU,SAAS,QAAQ;AAAA,IAC1G,MAAM;AAAA,IACN,WAAW,KAAK,2CAA2C,SAAS;AAAA,IACpE,OAAO;AAAA,MACL,eAAe,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,UAAU,WAAW,IAAI,CAAC,OAAO,UAAU;AACzC,YAAM,UAAU,kBAAkB,KAAK,MAAM,QAAQ,oBAAoB;AACzE,aAAoB,qBAAK,MAAM;AAAA,QAC7B,GAAG,eAAe,QAAQ,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QAC5E,GAAG,eAAe,KAAK,MAAM,QAAQ,CAAC,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QACxF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,MACR,GAAG,KAAK;AAAA,IACV,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\nfunction AlignmentMatrixControlIcon({\n  className,\n  disablePointerEvents = true,\n  size,\n  width,\n  height,\n  style = {},\n  value = 'center',\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(SVG, {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,\n    width: size ?? width ?? BASE_SIZE,\n    height: size ?? height ?? BASE_SIZE,\n    role: \"presentation\",\n    className: clsx('component-alignment-matrix-control-icon', className),\n    style: {\n      pointerEvents: disablePointerEvents ? 'none' : undefined,\n      ...style\n    },\n    ...props,\n    children: ALIGNMENTS.map((align, index) => {\n      const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;\n      return /*#__PURE__*/_jsx(Rect, {\n        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        width: dotSize,\n        height: dotSize,\n        fill: \"currentColor\"\n      }, align);\n    })\n  });\n}\nexport default AlignmentMatrixControlIcon;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,MAAM,WAAW;AAK1B,SAAS,YAAY,yBAAyB;AAC9C,SAAS,OAAO,YAAY;AAC5B,IAAM,YAAY;AAClB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB,YAAY,IAAI,kBAAkB;AACxD,IAAM,WAAW;AACjB,IAAM,oBAAoB;AAC1B,SAAS,2BAA2B;AAAA,EAClC;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,KAAK;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,IACtC,OAAO,QAAQ,SAAS;AAAA,IACxB,QAAQ,QAAQ,UAAU;AAAA,IAC1B,MAAM;AAAA,IACN,WAAW,KAAK,2CAA2C,SAAS;AAAA,IACpE,OAAO;AAAA,MACL,eAAe,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,UAAU,WAAW,IAAI,CAAC,OAAO,UAAU;AACzC,YAAM,UAAU,kBAAkB,KAAK,MAAM,QAAQ,oBAAoB;AACzE,aAAoB,qBAAK,MAAM;AAAA,QAC7B,GAAG,eAAe,QAAQ,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QAC5E,GAAG,eAAe,KAAK,MAAM,QAAQ,CAAC,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QACxF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,MACR,GAAG,KAAK;AAAA,IACV,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,eAAQ;",
   "names": []
 }