@wordpress/components 30.7.0 → 30.7.2-next.2f1c7c01b.0

package/build-module/utils/breakpoint-values.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/breakpoint-values.js
 var breakpoint_values_default = {
   huge: "1440px",
   wide: "1280px",

package/build-module/utils/breakpoint-values.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/breakpoint-values.js"],
   "sourcesContent": ["export default {\n  huge: '1440px',\n  wide: '1280px',\n  'x-large': '1080px',\n  large: '960px',\n  // admin sidebar auto folds\n  medium: '782px',\n  // Adminbar goes big.\n  small: '600px',\n  mobile: '480px',\n  'zoomed-in': '280px'\n};"],
-  "mappings": "AAAA,IAAO,4BAAQ;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA;AAAA,EAEP,QAAQ;AAAA;AAAA,EAER,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AACf;",
+  "mappings": ";AAAA,IAAO,4BAAQ;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA;AAAA,EAEP,QAAQ;AAAA;AAAA,EAER,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AACf;",
   "names": []
 }

package/build-module/utils/breakpoint.js

@@ -1,5 +1,6 @@
+// packages/components/src/utils/breakpoint.js
 import breakpoints from "./breakpoint-values";
-const breakpoint = (point) => `@media (min-width: ${breakpoints[point]})`;
+var breakpoint = (point) => `@media (min-width: ${breakpoints[point]})`;
 export {
   breakpoint
 };

package/build-module/utils/breakpoint.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/breakpoint.js"],
   "sourcesContent": ["/**\n * Internal dependencies\n */\nimport breakpoints from './breakpoint-values';\n\n/**\n * @param {keyof breakpoints} point\n * @return {string} Media query declaration.\n */\nexport const breakpoint = point => `@media (min-width: ${breakpoints[point]})`;"],
-  "mappings": "AAGA,OAAO,iBAAiB;AAMjB,MAAM,aAAa,WAAS,sBAAsB,YAAY,KAAK,CAAC;",
+  "mappings": ";AAGA,OAAO,iBAAiB;AAMjB,IAAM,aAAa,WAAS,sBAAsB,YAAY,KAAK,CAAC;",
   "names": []
 }

package/build-module/utils/colors-values.js

@@ -1,5 +1,6 @@
-const white = "#fff";
-const GRAY = {
+// packages/components/src/utils/colors-values.js
+var white = "#fff";
+var GRAY = {
   900: "#1e1e1e",
   800: "#2f2f2f",
   /** Meets 4.6:1 text contrast against white. */
@@ -14,12 +15,12 @@ const GRAY = {
   /** Used for light gray backgrounds. */
   100: "#f0f0f0"
 };
-const ALERT = {
+var ALERT = {
   yellow: "#f0b849",
   red: "#d94f4f",
   green: "#4ab866"
 };
-const THEME = {
+var THEME = {
   accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
   accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
   accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
@@ -41,7 +42,7 @@ const THEME = {
     100: `var(--wp-components-color-gray-100, ${GRAY[100]})`
   }
 };
-const UI = {
+var UI = {
   background: THEME.background,
   backgroundDisabled: THEME.gray[100],
   border: THEME.gray[600],
@@ -53,7 +54,7 @@ const UI = {
   darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
   lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`
 };
-const COLORS = Object.freeze({
+var COLORS = Object.freeze({
   /**
    * The main gray color object.
    *

package/build-module/utils/colors-values.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/colors-values.js"],
   "sourcesContent": ["/**\n * Internal dependencies\n */\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n  900: '#1e1e1e',\n  800: '#2f2f2f',\n  /** Meets 4.6:1 text contrast against white. */\n  700: '#757575',\n  /** Meets 3:1 UI or large text contrast against white. */\n  600: '#949494',\n  400: '#ccc',\n  /** Used for most borders. */\n  300: '#ddd',\n  /** Used sparingly for light borders. */\n  200: '#e0e0e0',\n  /** Used for light gray backgrounds. */\n  100: '#f0f0f0'\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n  yellow: '#f0b849',\n  red: '#d94f4f',\n  green: '#4ab866'\n};\n\n// Should match packages/components/src/utils/theme-variables.scss\nconst THEME = {\n  accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n  accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n  accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n  /** Used when placing text on the accent color. */\n  accentInverted: `var(--wp-components-color-accent-inverted, ${white})`,\n  background: `var(--wp-components-color-background, ${white})`,\n  foreground: `var(--wp-components-color-foreground, ${GRAY[900]})`,\n  /** Used when placing text on the foreground color. */\n  foregroundInverted: `var(--wp-components-color-foreground-inverted, ${white})`,\n  gray: {\n    /** @deprecated Use `COLORS.theme.foreground` instead. */\n    900: `var(--wp-components-color-foreground, ${GRAY[900]})`,\n    800: `var(--wp-components-color-gray-800, ${GRAY[800]})`,\n    700: `var(--wp-components-color-gray-700, ${GRAY[700]})`,\n    600: `var(--wp-components-color-gray-600, ${GRAY[600]})`,\n    400: `var(--wp-components-color-gray-400, ${GRAY[400]})`,\n    300: `var(--wp-components-color-gray-300, ${GRAY[300]})`,\n    200: `var(--wp-components-color-gray-200, ${GRAY[200]})`,\n    100: `var(--wp-components-color-gray-100, ${GRAY[100]})`\n  }\n};\nconst UI = {\n  background: THEME.background,\n  backgroundDisabled: THEME.gray[100],\n  border: THEME.gray[600],\n  borderHover: THEME.gray[700],\n  borderFocus: THEME.accent,\n  borderDisabled: THEME.gray[400],\n  textDisabled: THEME.gray[600],\n  // Matches @wordpress/base-styles\n  darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,\n  lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`\n};\nexport const COLORS = Object.freeze({\n  /**\n   * The main gray color object.\n   *\n   * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n   */\n  gray: GRAY,\n  // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n  /**\n   * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n   */\n  white,\n  alert: ALERT,\n  /**\n   * Theme-ready variables with fallbacks.\n   *\n   * Prefer semantic aliases in `COLORS.ui` when applicable.\n   */\n  theme: THEME,\n  /**\n   * Semantic aliases (prefer these over raw variables when applicable).\n   */\n  ui: UI\n});\nexport default COLORS;"],
-  "mappings": "AAGA,MAAM,QAAQ;AAGd,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACP;AAGA,MAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACT;AAGA,MAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB,8CAA8C,KAAK;AAAA,EACnE,YAAY,yCAAyC,KAAK;AAAA,EAC1D,YAAY,yCAAyC,KAAK,GAAG,CAAC;AAAA;AAAA,EAE9D,oBAAoB,kDAAkD,KAAK;AAAA,EAC3E,MAAM;AAAA;AAAA,IAEJ,KAAK,yCAAyC,KAAK,GAAG,CAAC;AAAA,IACvD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,EACvD;AACF;AACA,MAAM,KAAK;AAAA,EACT,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAK,GAAG;AAAA,EAClC,QAAQ,MAAM,KAAK,GAAG;AAAA,EACtB,aAAa,MAAM,KAAK,GAAG;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,gBAAgB,MAAM,KAAK,GAAG;AAAA,EAC9B,cAAc,MAAM,KAAK,GAAG;AAAA;AAAA,EAE5B,qBAAqB,sBAAsB,MAAM,UAAU;AAAA,EAC3D,sBAAsB,sBAAsB,MAAM,UAAU;AAC9D;AACO,MAAM,SAAS,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMlC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACN,CAAC;AACD,IAAO,wBAAQ;",
+  "mappings": ";AAGA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACP;AAGA,IAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACT;AAGA,IAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB,8CAA8C,KAAK;AAAA,EACnE,YAAY,yCAAyC,KAAK;AAAA,EAC1D,YAAY,yCAAyC,KAAK,GAAG,CAAC;AAAA;AAAA,EAE9D,oBAAoB,kDAAkD,KAAK;AAAA,EAC3E,MAAM;AAAA;AAAA,IAEJ,KAAK,yCAAyC,KAAK,GAAG,CAAC;AAAA,IACvD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,IACrD,KAAK,uCAAuC,KAAK,GAAG,CAAC;AAAA,EACvD;AACF;AACA,IAAM,KAAK;AAAA,EACT,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAK,GAAG;AAAA,EAClC,QAAQ,MAAM,KAAK,GAAG;AAAA,EACtB,aAAa,MAAM,KAAK,GAAG;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,gBAAgB,MAAM,KAAK,GAAG;AAAA,EAC9B,cAAc,MAAM,KAAK,GAAG;AAAA;AAAA,EAE5B,qBAAqB,sBAAsB,MAAM,UAAU;AAAA,EAC3D,sBAAsB,sBAAsB,MAAM,UAAU;AAC9D;AACO,IAAM,SAAS,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMlC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACN,CAAC;AACD,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/utils/colors.js

@@ -1,7 +1,8 @@
+// packages/components/src/utils/colors.js
 import memoize from "memize";
 import { colord, extend } from "colord";
 import namesPlugin from "colord/plugins/names";
-let colorComputationNode;
+var colorComputationNode;
 extend([namesPlugin]);
 function rgba(hexValue = "", alpha = 1) {
   return colord(hexValue).alpha(alpha).toRgbString();
@@ -47,7 +48,7 @@ function _getComputedBackgroundColor(backgroundColor) {
   el.style.background = "";
   return computedColor || "";
 }
-const getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
+var getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
 function getOptimalTextColor(backgroundColor) {
   const background = getComputedBackgroundColor(backgroundColor);
   return colord(background).isLight() ? "#000000" : "#ffffff";

package/build-module/utils/colors.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/colors.js"],
   "sourcesContent": ["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\nextend([namesPlugin]);\n\n/**\n * Generating a CSS compliant rgba() color value.\n *\n * @param {string} hexValue The hex value to convert to rgba().\n * @param {number} alpha    The alpha value for opacity.\n * @return {string} The converted rgba() color value.\n *\n * @example\n * rgba( '#000000', 0.5 )\n * // rgba(0, 0, 0, 0.5)\n */\nexport function rgba(hexValue = '', alpha = 1) {\n  return colord(hexValue).alpha(alpha).toRgbString();\n}\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n  if (!colorComputationNode) {\n    // Create a temporary element for style computation.\n    const el = document.createElement('div');\n    el.setAttribute('data-g2-color-computation-node', '');\n    // Inject for window computed style.\n    document.body.appendChild(el);\n    colorComputationNode = el;\n  }\n  return colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor(value) {\n  if (typeof value !== 'string') {\n    return false;\n  }\n  const test = colord(value);\n  return test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor(backgroundColor) {\n  if (typeof backgroundColor !== 'string') {\n    return '';\n  }\n  if (isColor(backgroundColor)) {\n    return backgroundColor;\n  }\n  if (!backgroundColor.includes('var(')) {\n    return '';\n  }\n  if (typeof document === 'undefined') {\n    return '';\n  }\n\n  // Attempts to gracefully handle CSS variables color values.\n  const el = getColorComputationNode();\n  if (!el) {\n    return '';\n  }\n  el.style.background = backgroundColor;\n  // Grab the style.\n  const computedColor = window?.getComputedStyle(el).background;\n  // Reset.\n  el.style.background = '';\n  return computedColor || '';\n}\nconst getComputedBackgroundColor = memoize(_getComputedBackgroundColor);\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor(backgroundColor) {\n  const background = getComputedBackgroundColor(backgroundColor);\n  return colord(background).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade(backgroundColor) {\n  const result = getOptimalTextColor(backgroundColor);\n  return result === '#000000' ? 'dark' : 'light';\n}"],
-  "mappings": "AAGA,OAAO,aAAa;AACpB,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AAGxB,IAAI;AACJ,OAAO,CAAC,WAAW,CAAC;AAab,SAAS,KAAK,WAAW,IAAI,QAAQ,GAAG;AAC7C,SAAO,OAAO,QAAQ,EAAE,MAAM,KAAK,EAAE,YAAY;AACnD;AAKA,SAAS,0BAA0B;AACjC,MAAI,OAAO,aAAa,aAAa;AACnC;AAAA,EACF;AACA,MAAI,CAAC,sBAAsB;AAEzB,UAAM,KAAK,SAAS,cAAc,KAAK;AACvC,OAAG,aAAa,kCAAkC,EAAE;AAEpD,aAAS,KAAK,YAAY,EAAE;AAC5B,2BAAuB;AAAA,EACzB;AACA,SAAO;AACT;AAOA,SAAS,QAAQ,OAAO;AACtB,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,QAAM,OAAO,OAAO,KAAK;AACzB,SAAO,KAAK,QAAQ;AACtB;AAUA,SAAS,4BAA4B,iBAAiB;AACpD,MAAI,OAAO,oBAAoB,UAAU;AACvC,WAAO;AAAA,EACT;AACA,MAAI,QAAQ,eAAe,GAAG;AAC5B,WAAO;AAAA,EACT;AACA,MAAI,CAAC,gBAAgB,SAAS,MAAM,GAAG;AACrC,WAAO;AAAA,EACT;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AAGA,QAAM,KAAK,wBAAwB;AACnC,MAAI,CAAC,IAAI;AACP,WAAO;AAAA,EACT;AACA,KAAG,MAAM,aAAa;AAEtB,QAAM,gBAAgB,QAAQ,iBAAiB,EAAE,EAAE;AAEnD,KAAG,MAAM,aAAa;AACtB,SAAO,iBAAiB;AAC1B;AACA,MAAM,6BAA6B,QAAQ,2BAA2B;AAS/D,SAAS,oBAAoB,iBAAiB;AACnD,QAAM,aAAa,2BAA2B,eAAe;AAC7D,SAAO,OAAO,UAAU,EAAE,QAAQ,IAAI,YAAY;AACpD;AASO,SAAS,oBAAoB,iBAAiB;AACnD,QAAM,SAAS,oBAAoB,eAAe;AAClD,SAAO,WAAW,YAAY,SAAS;AACzC;",
+  "mappings": ";AAGA,OAAO,aAAa;AACpB,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AAGxB,IAAI;AACJ,OAAO,CAAC,WAAW,CAAC;AAab,SAAS,KAAK,WAAW,IAAI,QAAQ,GAAG;AAC7C,SAAO,OAAO,QAAQ,EAAE,MAAM,KAAK,EAAE,YAAY;AACnD;AAKA,SAAS,0BAA0B;AACjC,MAAI,OAAO,aAAa,aAAa;AACnC;AAAA,EACF;AACA,MAAI,CAAC,sBAAsB;AAEzB,UAAM,KAAK,SAAS,cAAc,KAAK;AACvC,OAAG,aAAa,kCAAkC,EAAE;AAEpD,aAAS,KAAK,YAAY,EAAE;AAC5B,2BAAuB;AAAA,EACzB;AACA,SAAO;AACT;AAOA,SAAS,QAAQ,OAAO;AACtB,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,QAAM,OAAO,OAAO,KAAK;AACzB,SAAO,KAAK,QAAQ;AACtB;AAUA,SAAS,4BAA4B,iBAAiB;AACpD,MAAI,OAAO,oBAAoB,UAAU;AACvC,WAAO;AAAA,EACT;AACA,MAAI,QAAQ,eAAe,GAAG;AAC5B,WAAO;AAAA,EACT;AACA,MAAI,CAAC,gBAAgB,SAAS,MAAM,GAAG;AACrC,WAAO;AAAA,EACT;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AAGA,QAAM,KAAK,wBAAwB;AACnC,MAAI,CAAC,IAAI;AACP,WAAO;AAAA,EACT;AACA,KAAG,MAAM,aAAa;AAEtB,QAAM,gBAAgB,QAAQ,iBAAiB,EAAE,EAAE;AAEnD,KAAG,MAAM,aAAa;AACtB,SAAO,iBAAiB;AAC1B;AACA,IAAM,6BAA6B,QAAQ,2BAA2B;AAS/D,SAAS,oBAAoB,iBAAiB;AACnD,QAAM,aAAa,2BAA2B,eAAe;AAC7D,SAAO,OAAO,UAAU,EAAE,QAAQ,IAAI,YAAY;AACpD;AASO,SAAS,oBAAoB,iBAAiB;AACnD,QAAM,SAAS,oBAAoB,eAAe;AAClD,SAAO,WAAW,YAAY,SAAS;AACzC;",
   "names": []
 }

package/build-module/utils/config-values.js

@@ -1,7 +1,7 @@
-import { space } from "./space";
+// packages/components/src/utils/config-values.js
 import { COLORS } from "./colors-values";
-const CONTROL_HEIGHT = "36px";
-const CONTROL_PROPS = {
+var CONTROL_HEIGHT = "36px";
+var CONTROL_PROPS = {
   // These values should be shared with TextControl.
   controlPaddingX: 12,
   controlPaddingXSmall: 8,
@@ -47,10 +47,6 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   // ensures fallback to 400 (instead of 600)
   fontWeightHeading: "600",
   gridBase: "4px",
-  cardPaddingXSmall: `${space(2)}`,
-  cardPaddingSmall: `${space(4)}`,
-  cardPaddingMedium: `${space(4)} ${space(6)}`,
-  cardPaddingLarge: `${space(6)} ${space(8)}`,
   elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
   elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
   elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,

package/build-module/utils/config-values.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/config-values.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { space } from './space';\nimport { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  spinnerSize: 16,\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightMedium: '499',\n  // ensures fallback to 400 (instead of 600)\n  fontWeightHeading: '600',\n  gridBase: '4px',\n  cardPaddingXSmall: `${space(2)}`,\n  cardPaddingSmall: `${space(4)}`,\n  cardPaddingMedium: `${space(4)} ${space(6)}`,\n  cardPaddingLarge: `${space(6)} ${space(8)}`,\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBackgroundColor: COLORS.white,\n  surfaceBackgroundSubtleColor: '#F3F3F3',\n  surfaceBackgroundTintColor: '#F5F5F5',\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n  surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n  surfaceBackgroundTertiaryColor: COLORS.white,\n  surfaceColor: COLORS.white,\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
-  "mappings": "AAGA,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,OAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,kBAAkB;AAAA;AAAA,EAElB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,mBAAmB,GAAG,MAAM,CAAC,CAAC;AAAA,EAC9B,kBAAkB,GAAG,MAAM,CAAC,CAAC;AAAA,EAC7B,mBAAmB,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAAA,EAC1C,kBAAkB,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAAA,EACzC,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,wBAAwB,OAAO;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,gCAAgC,OAAO;AAAA,EACvC,cAAc,OAAO;AAAA,EACrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  spinnerSize: 16,\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightMedium: '499',\n  // ensures fallback to 400 (instead of 600)\n  fontWeightHeading: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBackgroundColor: COLORS.white,\n  surfaceBackgroundSubtleColor: '#F3F3F3',\n  surfaceBackgroundTintColor: '#F5F5F5',\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n  surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n  surfaceBackgroundTertiaryColor: COLORS.white,\n  surfaceColor: COLORS.white,\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
+  "mappings": ";AAGA,SAAS,cAAc;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,OAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,kBAAkB;AAAA;AAAA,EAElB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,wBAAwB,OAAO;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,gCAAgC,OAAO;AAAA,EACvC,cAAc,OAAO;AAAA,EACrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
   "names": []
 }

package/build-module/utils/deprecated-36px-size.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/deprecated-36px-size.ts
 import deprecated from "@wordpress/deprecated";
 function maybeWarnDeprecated36pxSize({
   componentName,

package/build-module/utils/deprecated-36px-size.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/deprecated-36px-size.ts"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nexport function maybeWarnDeprecated36pxSize({\n  componentName,\n  __next40pxDefaultSize,\n  size,\n  __shouldNotWarnDeprecated36pxSize\n}) {\n  if (__shouldNotWarnDeprecated36pxSize || __next40pxDefaultSize || size !== undefined && size !== 'default') {\n    return;\n  }\n  deprecated(`36px default size for wp.components.${componentName}`, {\n    since: '6.8',\n    version: '7.1',\n    hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.'\n  });\n}"],
-  "mappings": "AAGA,OAAO,gBAAgB;AAChB,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,MAAI,qCAAqC,yBAAyB,SAAS,UAAa,SAAS,WAAW;AAC1G;AAAA,EACF;AACA,aAAW,uCAAuC,aAAa,IAAI;AAAA,IACjE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,EACR,CAAC;AACH;",
+  "mappings": ";AAGA,OAAO,gBAAgB;AAChB,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,MAAI,qCAAqC,yBAAyB,SAAS,UAAa,SAAS,WAAW;AAC1G;AAAA,EACF;AACA,aAAW,uCAAuC,aAAa,IAAI;AAAA,IACjE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,EACR,CAAC;AACH;",
   "names": []
 }

package/build-module/utils/element-rect.js

@@ -1,6 +1,7 @@
+// packages/components/src/utils/element-rect.ts
 import { useLayoutEffect, useRef, useState } from "@wordpress/element";
 import { useEvent, useResizeObserver } from "@wordpress/compose";
-const NULL_ELEMENT_OFFSET_RECT = {
+var NULL_ELEMENT_OFFSET_RECT = {
   element: void 0,
   top: 0,
   right: 0,
@@ -38,7 +39,7 @@ function getElementOffsetRect(element) {
     height: computedHeight
   };
 }
-const POLL_RATE = 100;
+var POLL_RATE = 100;
 function useTrackElementOffsetRect(targetElement, deps = []) {
   const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
   const intervalRef = useRef();

package/build-module/utils/element-rect.js.map

@@ -2,6 +2,6 @@
   "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": "AAIA,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,UAAU,yBAAyB;AASrC,MAAM,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,MAAM,YAAY;AAcX,SAAS,0BAA0B,eAAe,OAAO,CAAC,GAAG;AAClE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,wBAAwB;AACnF,QAAM,cAAc,OAAO;AAC3B,QAAM,UAAU,SAAS,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,aAAa,kBAAkB,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,kBAAgB,MAAM;AACpB,eAAW,aAAa;AACxB,QAAI,CAAC,eAAe;AAClB,2BAAqB,wBAAwB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,CAAC;AAK9B,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EAGV,GAAG,IAAI;AACP,SAAO;AACT;",
+  "mappings": ";AAIA,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,UAAU,yBAAyB;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,IAAI,SAAS,wBAAwB;AACnF,QAAM,cAAc,OAAO;AAC3B,QAAM,UAAU,SAAS,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,aAAa,kBAAkB,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,kBAAgB,MAAM;AACpB,eAAW,aAAa;AACxB,QAAI,CAAC,eAAe;AAClB,2BAAqB,wBAAwB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,CAAC;AAK9B,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EAGV,GAAG,IAAI;AACP,SAAO;AACT;",
   "names": []
 }

package/build-module/utils/font-size.js

@@ -1,6 +1,7 @@
+// packages/components/src/utils/font-size.ts
 import CONFIG from "./config-values";
-const BASE_FONT_SIZE = 13;
-const PRESET_FONT_SIZES = {
+var BASE_FONT_SIZE = 13;
+var PRESET_FONT_SIZES = {
   body: BASE_FONT_SIZE,
   caption: 10,
   footnote: 11,
@@ -8,7 +9,7 @@ const PRESET_FONT_SIZES = {
   subheadline: 12,
   title: 20
 };
-const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap((n) => [n, n.toString()]);
+var HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap((n) => [n, n.toString()]);
 function getFontSize(size = BASE_FONT_SIZE) {
   if (size in PRESET_FONT_SIZES) {
     return getFontSize(PRESET_FONT_SIZES[size]);

package/build-module/utils/font-size.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/font-size.ts"],
   "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\nexport const BASE_FONT_SIZE = 13;\nexport const PRESET_FONT_SIZES = {\n  body: BASE_FONT_SIZE,\n  caption: 10,\n  footnote: 11,\n  largeTitle: 28,\n  subheadline: 12,\n  title: 20\n};\nexport const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);\nexport function getFontSize(size = BASE_FONT_SIZE) {\n  if (size in PRESET_FONT_SIZES) {\n    return getFontSize(PRESET_FONT_SIZES[size]);\n  }\n  if (typeof size !== 'number') {\n    const parsed = parseFloat(size);\n    if (Number.isNaN(parsed)) {\n      return size;\n    }\n    size = parsed;\n  }\n  const ratio = `(${size} / ${BASE_FONT_SIZE})`;\n  return `calc(${ratio} * ${CONFIG.fontSize})`;\n}\nexport function getHeadingFontSize(size = 3) {\n  if (!HEADING_FONT_SIZES.includes(size)) {\n    return getFontSize(size);\n  }\n  const headingSize = `fontSizeH${size}`;\n  return CONFIG[headingSize];\n}"],
-  "mappings": "AAOA,OAAO,YAAY;AACZ,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO;AACT;AACO,MAAM,qBAAqB,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,QAAQ,OAAK,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5E,SAAS,YAAY,OAAO,gBAAgB;AACjD,MAAI,QAAQ,mBAAmB;AAC7B,WAAO,YAAY,kBAAkB,IAAI,CAAC;AAAA,EAC5C;AACA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,WAAW,IAAI;AAC9B,QAAI,OAAO,MAAM,MAAM,GAAG;AACxB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,IAAI,IAAI,MAAM,cAAc;AAC1C,SAAO,QAAQ,KAAK,MAAM,OAAO,QAAQ;AAC3C;AACO,SAAS,mBAAmB,OAAO,GAAG;AAC3C,MAAI,CAAC,mBAAmB,SAAS,IAAI,GAAG;AACtC,WAAO,YAAY,IAAI;AAAA,EACzB;AACA,QAAM,cAAc,YAAY,IAAI;AACpC,SAAO,OAAO,WAAW;AAC3B;",
+  "mappings": ";AAOA,OAAO,YAAY;AACZ,IAAM,iBAAiB;AACvB,IAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO;AACT;AACO,IAAM,qBAAqB,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,QAAQ,OAAK,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5E,SAAS,YAAY,OAAO,gBAAgB;AACjD,MAAI,QAAQ,mBAAmB;AAC7B,WAAO,YAAY,kBAAkB,IAAI,CAAC;AAAA,EAC5C;AACA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,WAAW,IAAI;AAC9B,QAAI,OAAO,MAAM,MAAM,GAAG;AACxB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,IAAI,IAAI,MAAM,cAAc;AAC1C,SAAO,QAAQ,KAAK,MAAM,OAAO,QAAQ;AAC3C;AACO,SAAS,mBAAmB,OAAO,GAAG;AAC3C,MAAI,CAAC,mBAAmB,SAAS,IAAI,GAAG;AACtC,WAAO,YAAY,IAAI;AAAA,EACzB;AACA,QAAM,cAAc,YAAY,IAAI;AACpC,SAAO,OAAO,WAAW;AAC3B;",
   "names": []
 }

package/build-module/utils/font-values.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/font-values.js
 var font_values_default = {
   "default.fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
   "default.fontSize": "13px",

package/build-module/utils/font-values.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/font-values.js"],
   "sourcesContent": ["export default {\n  'default.fontFamily': \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n  'default.fontSize': '13px',\n  'helpText.fontSize': '12px',\n  mobileTextMinFontSize: '16px'\n};"],
-  "mappings": "AAAA,IAAO,sBAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,uBAAuB;AACzB;",
+  "mappings": ";AAAA,IAAO,sBAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,uBAAuB;AACzB;",
   "names": []
 }

package/build-module/utils/font.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/font.js
 import FONT from "./font-values";
 function font(value) {
   var _FONT$value;

package/build-module/utils/font.js.map

@@ -2,6 +2,6 @@
   "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": "AAGA,OAAO,UAAU;AAOV,SAAS,KAAK,OAAO;AAC1B,MAAI;AACJ,UAAQ,cAAc,KAAK,KAAK,OAAO,QAAQ,gBAAgB,SAAS,cAAc;AACxF;",
+  "mappings": ";AAGA,OAAO,UAAU;AAOV,SAAS,KAAK,OAAO;AAC1B,MAAI;AACJ,UAAQ,cAAc,KAAK,KAAK,OAAO,QAAQ,gBAAgB,SAAS,cAAc;AACxF;",
   "names": []
 }

package/build-module/utils/get-node-text.js

@@ -1,4 +1,5 @@
-const getNodeText = (node) => {
+// packages/components/src/utils/get-node-text.ts
+var getNodeText = (node) => {
   if (node === null) {
     return "";
   }

package/build-module/utils/get-node-text.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/get-node-text.ts"],
   "sourcesContent": ["const getNodeText = node => {\n  if (node === null) {\n    return '';\n  }\n  switch (typeof node) {\n    case 'string':\n    case 'number':\n      return node.toString();\n    case 'object':\n      {\n        if (node instanceof Array) {\n          return node.map(getNodeText).join('');\n        }\n        if ('props' in node) {\n          return getNodeText(node.props.children);\n        }\n        return '';\n      }\n    default:\n      return '';\n  }\n};\nexport default getNodeText;"],
-  "mappings": "AAAA,MAAM,cAAc,UAAQ;AAC1B,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,KAAK,SAAS;AAAA,IACvB,KAAK,UACH;AACE,UAAI,gBAAgB,OAAO;AACzB,eAAO,KAAK,IAAI,WAAW,EAAE,KAAK,EAAE;AAAA,MACtC;AACA,UAAI,WAAW,MAAM;AACnB,eAAO,YAAY,KAAK,MAAM,QAAQ;AAAA,MACxC;AACA,aAAO;AAAA,IACT;AAAA,IACF;AACE,aAAO;AAAA,EACX;AACF;AACA,IAAO,wBAAQ;",
+  "mappings": ";AAAA,IAAM,cAAc,UAAQ;AAC1B,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,KAAK,SAAS;AAAA,IACvB,KAAK,UACH;AACE,UAAI,gBAAgB,OAAO;AACzB,eAAO,KAAK,IAAI,WAAW,EAAE,KAAK,EAAE;AAAA,MACtC;AACA,UAAI,WAAW,MAAM;AACnB,eAAO,YAAY,KAAK,MAAM,QAAQ;AAAA,MACxC;AACA,aAAO;AAAA,IACT;AAAA,IACF;AACE,aAAO;AAAA,EACX;AACF;AACA,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/utils/get-valid-children.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/get-valid-children.ts
 import { Children, isValidElement } from "@wordpress/element";
 function getValidChildren(children) {
   if (typeof children === "string") {

package/build-module/utils/get-valid-children.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/get-valid-children.ts"],
   "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(children) {\n  if (typeof children === 'string') {\n    return [children];\n  }\n  return Children.toArray(children).filter(child => isValidElement(child));\n}"],
-  "mappings": "AAOA,SAAS,UAAU,sBAAsB;AASlC,SAAS,iBAAiB,UAAU;AACzC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,CAAC,QAAQ;AAAA,EAClB;AACA,SAAO,SAAS,QAAQ,QAAQ,EAAE,OAAO,WAAS,eAAe,KAAK,CAAC;AACzE;",
+  "mappings": ";AAOA,SAAS,UAAU,sBAAsB;AASlC,SAAS,iBAAiB,UAAU;AACzC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,CAAC,QAAQ;AAAA,EAClB;AACA,SAAO,SAAS,QAAQ,QAAQ,EAAE,OAAO,WAAS,eAAe,KAAK,CAAC;AACzE;",
   "names": []
 }

package/build-module/utils/hooks/index.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/hooks/index.js
 import { default as default2 } from "./use-controlled-state";
 import { default as default3 } from "./use-update-effect";
 import { useControlledValue } from "./use-controlled-value";

package/build-module/utils/hooks/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/index.js"],
   "sourcesContent": ["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';"],
-  "mappings": "AAAA,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,aAAa;",
+  "mappings": ";AAAA,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,aAAa;",
   "names": ["default"]
 }

package/build-module/utils/hooks/use-animated-offset-rect.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/hooks/use-animated-offset-rect.ts
 import { useEvent } from "@wordpress/compose";
 import { useLayoutEffect } from "@wordpress/element";
 import { useOnValueUpdate } from "./use-on-value-update";

package/build-module/utils/hooks/use-animated-offset-rect.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-animated-offset-rect.ts"],
   "sourcesContent": ["/* eslint-disable jsdoc/require-param */\n\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useLayoutEffect } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useOnValueUpdate } from './use-on-value-update';\n\n/**\n * A utility used to animate something in a container component based on the \"offset\n * rect\" (position relative to the container and size) of a subelement. For example,\n * this is useful to render an indicator for the selected option of a component, and\n * to animate it when the selected option changes.\n *\n * Takes in a container element and the up-to-date \"offset rect\" of the target\n * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:\n *\n * - Adds CSS variables with rect information to the container, so that the indicator\n *   can be rendered and animated with them. These are kept up-to-date, enabling CSS\n *   transitions on change.\n * - Sets an attribute (`data-subelement-animated` by default) when the tracked\n *   element changes, so that the target (e.g. the indicator) can be animated to its\n *   new size and position.\n * - Removes the attribute when the animation is done.\n *\n * The need for the attribute is due to the fact that the rect might update in\n * situations other than when the tracked element changes, e.g. the tracked element\n * might be resized. In such cases, there is no need to animate the indicator, and\n * the change in size or position of the indicator needs to be reflected immediately.\n */\nexport function useAnimatedOffsetRect(\n/**\n * The container element.\n */\ncontainer,\n/**\n * The rect of the tracked element.\n */\nrect, {\n  prefix = 'subelement',\n  dataAttribute = `${prefix}-animated`,\n  transitionEndFilter = () => true,\n  roundRect = false\n} = {}) {\n  const setProperties = useEvent(() => {\n    Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--${prefix}-${property}`, String(roundRect ? Math.floor(rect[property]) : rect[property])));\n  });\n  useLayoutEffect(() => {\n    setProperties();\n  }, [rect, setProperties]);\n  useOnValueUpdate(rect.element, ({\n    previousValue\n  }) => {\n    // Only enable the animation when moving from one element to another.\n    if (rect.element && previousValue) {\n      container?.setAttribute(`data-${dataAttribute}`, '');\n    }\n  });\n  useLayoutEffect(() => {\n    function onTransitionEnd(event) {\n      if (transitionEndFilter(event)) {\n        container?.removeAttribute(`data-${dataAttribute}`);\n      }\n    }\n    container?.addEventListener('transitionend', onTransitionEnd);\n    return () => container?.removeEventListener('transitionend', onTransitionEnd);\n  }, [dataAttribute, container, transitionEndFilter]);\n}\n/* eslint-enable jsdoc/require-param */"],
-  "mappings": "AAKA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAKhC,SAAS,wBAAwB;AAwB1B,SAAS,sBAIhB,WAIA,MAAM;AAAA,EACJ,SAAS;AAAA,EACT,gBAAgB,GAAG,MAAM;AAAA,EACzB,sBAAsB,MAAM;AAAA,EAC5B,YAAY;AACd,IAAI,CAAC,GAAG;AACN,QAAM,gBAAgB,SAAS,MAAM;AACnC,WAAO,KAAK,IAAI,EAAE,QAAQ,cAAY,aAAa,aAAa,WAAW,MAAM,YAAY,KAAK,MAAM,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,MAAM,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;AAAA,EAC1L,CAAC;AACD,kBAAgB,MAAM;AACpB,kBAAc;AAAA,EAChB,GAAG,CAAC,MAAM,aAAa,CAAC;AACxB,mBAAiB,KAAK,SAAS,CAAC;AAAA,IAC9B;AAAA,EACF,MAAM;AAEJ,QAAI,KAAK,WAAW,eAAe;AACjC,iBAAW,aAAa,QAAQ,aAAa,IAAI,EAAE;AAAA,IACrD;AAAA,EACF,CAAC;AACD,kBAAgB,MAAM;AACpB,aAAS,gBAAgB,OAAO;AAC9B,UAAI,oBAAoB,KAAK,GAAG;AAC9B,mBAAW,gBAAgB,QAAQ,aAAa,EAAE;AAAA,MACpD;AAAA,IACF;AACA,eAAW,iBAAiB,iBAAiB,eAAe;AAC5D,WAAO,MAAM,WAAW,oBAAoB,iBAAiB,eAAe;AAAA,EAC9E,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AACpD;",
+  "mappings": ";AAKA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAKhC,SAAS,wBAAwB;AAwB1B,SAAS,sBAIhB,WAIA,MAAM;AAAA,EACJ,SAAS;AAAA,EACT,gBAAgB,GAAG,MAAM;AAAA,EACzB,sBAAsB,MAAM;AAAA,EAC5B,YAAY;AACd,IAAI,CAAC,GAAG;AACN,QAAM,gBAAgB,SAAS,MAAM;AACnC,WAAO,KAAK,IAAI,EAAE,QAAQ,cAAY,aAAa,aAAa,WAAW,MAAM,YAAY,KAAK,MAAM,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,MAAM,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;AAAA,EAC1L,CAAC;AACD,kBAAgB,MAAM;AACpB,kBAAc;AAAA,EAChB,GAAG,CAAC,MAAM,aAAa,CAAC;AACxB,mBAAiB,KAAK,SAAS,CAAC;AAAA,IAC9B;AAAA,EACF,MAAM;AAEJ,QAAI,KAAK,WAAW,eAAe;AACjC,iBAAW,aAAa,QAAQ,aAAa,IAAI,EAAE;AAAA,IACrD;AAAA,EACF,CAAC;AACD,kBAAgB,MAAM;AACpB,aAAS,gBAAgB,OAAO;AAC9B,UAAI,oBAAoB,KAAK,GAAG;AAC9B,mBAAW,gBAAgB,QAAQ,aAAa,EAAE;AAAA,MACpD;AAAA,IACF;AACA,eAAW,iBAAiB,iBAAiB,eAAe;AAC5D,WAAO,MAAM,WAAW,oBAAoB,iBAAiB,eAAe;AAAA,EAC9E,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AACpD;",
   "names": []
 }

package/build-module/utils/hooks/use-controlled-state.js

@@ -1,6 +1,7 @@
+// packages/components/src/utils/hooks/use-controlled-state.js
 import { useEffect, useState, useCallback } from "@wordpress/element";
 import { isValueDefined, getDefinedValue } from "../values";
-const defaultOptions = {
+var defaultOptions = {
   initial: void 0,
   /**
    * Defaults to empty string, as that is preferred for usage with

package/build-module/utils/hooks/use-controlled-state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-controlled-state.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { isValueDefined, getDefinedValue } from '../values';\n\n/**\n * @template T\n * @typedef Options\n * @property {T}      [initial] Initial value\n * @property {T | \"\"} fallback  Fallback value\n */\n\n/** @type {Readonly<{ initial: undefined, fallback: '' }>} */\nconst defaultOptions = {\n  initial: undefined,\n  /**\n   * Defaults to empty string, as that is preferred for usage with\n   * <input />, <textarea />, and <select /> form elements.\n   */\n  fallback: ''\n};\n\n/**\n * Custom hooks for \"controlled\" components to track and consolidate internal\n * state and incoming values. This is useful for components that render\n * `input`, `textarea`, or `select` HTML elements.\n *\n * https://reactjs.org/docs/forms.html#controlled-components\n *\n * At first, a component using useControlledState receives an initial prop\n * value, which is used as initial internal state.\n *\n * This internal state can be maintained and updated without\n * relying on new incoming prop values.\n *\n * Unlike the basic useState hook, useControlledState's state can\n * be updated if a new incoming prop value is changed.\n *\n * @template T\n *\n * @param {T | undefined} currentState             The current value.\n * @param {Options<T>}    [options=defaultOptions] Additional options for the hook.\n *\n * @return {[T | \"\", (nextState: T) => void]} The controlled value and the value setter.\n */\nfunction useControlledState(currentState, options = defaultOptions) {\n  const {\n    initial,\n    fallback\n  } = {\n    ...defaultOptions,\n    ...options\n  };\n  const [internalState, setInternalState] = useState(currentState);\n  const hasCurrentState = isValueDefined(currentState);\n\n  /*\n   * Resets internal state if value every changes from uncontrolled <-> controlled.\n   */\n  useEffect(() => {\n    if (hasCurrentState && internalState) {\n      setInternalState(undefined);\n    }\n  }, [hasCurrentState, internalState]);\n  const state = getDefinedValue([currentState, internalState, initial], fallback);\n\n  /* eslint-disable jsdoc/no-undefined-types */\n  /** @type {(nextState: T) => void} */\n  const setState = useCallback(nextState => {\n    if (!hasCurrentState) {\n      setInternalState(nextState);\n    }\n  }, [hasCurrentState]);\n  /* eslint-enable jsdoc/no-undefined-types */\n\n  return [state, setState];\n}\nexport default useControlledState;"],
-  "mappings": "AAGA,SAAS,WAAW,UAAU,mBAAmB;AAKjD,SAAS,gBAAgB,uBAAuB;AAUhD,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,UAAU;AACZ;AAyBA,SAAS,mBAAmB,cAAc,UAAU,gBAAgB;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,kBAAkB,eAAe,YAAY;AAKnD,YAAU,MAAM;AACd,QAAI,mBAAmB,eAAe;AACpC,uBAAiB,MAAS;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,iBAAiB,aAAa,CAAC;AACnC,QAAM,QAAQ,gBAAgB,CAAC,cAAc,eAAe,OAAO,GAAG,QAAQ;AAI9E,QAAM,WAAW,YAAY,eAAa;AACxC,QAAI,CAAC,iBAAiB;AACpB,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAGpB,SAAO,CAAC,OAAO,QAAQ;AACzB;AACA,IAAO,+BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { isValueDefined, getDefinedValue } from '../values';\n\n/**\n * @template T\n * @typedef Options\n * @property {T}      [initial] Initial value\n * @property {T | \"\"} fallback  Fallback value\n */\n\n/** @type {Readonly<{ initial: undefined, fallback: '' }>} */\nconst defaultOptions = {\n  initial: undefined,\n  /**\n   * Defaults to empty string, as that is preferred for usage with\n   * <input />, <textarea />, and <select /> form elements.\n   */\n  fallback: ''\n};\n\n/**\n * Custom hooks for \"controlled\" components to track and consolidate internal\n * state and incoming values. This is useful for components that render\n * `input`, `textarea`, or `select` HTML elements.\n *\n * https://reactjs.org/docs/forms.html#controlled-components\n *\n * At first, a component using useControlledState receives an initial prop\n * value, which is used as initial internal state.\n *\n * This internal state can be maintained and updated without\n * relying on new incoming prop values.\n *\n * Unlike the basic useState hook, useControlledState's state can\n * be updated if a new incoming prop value is changed.\n *\n * @template T\n *\n * @param {T | undefined} currentState             The current value.\n * @param {Options<T>}    [options=defaultOptions] Additional options for the hook.\n *\n * @return {[T | \"\", (nextState: T) => void]} The controlled value and the value setter.\n */\nfunction useControlledState(currentState, options = defaultOptions) {\n  const {\n    initial,\n    fallback\n  } = {\n    ...defaultOptions,\n    ...options\n  };\n  const [internalState, setInternalState] = useState(currentState);\n  const hasCurrentState = isValueDefined(currentState);\n\n  /*\n   * Resets internal state if value every changes from uncontrolled <-> controlled.\n   */\n  useEffect(() => {\n    if (hasCurrentState && internalState) {\n      setInternalState(undefined);\n    }\n  }, [hasCurrentState, internalState]);\n  const state = getDefinedValue([currentState, internalState, initial], fallback);\n\n  /** @type {(nextState: T) => void} */\n  const setState = useCallback(nextState => {\n    if (!hasCurrentState) {\n      setInternalState(nextState);\n    }\n  }, [hasCurrentState]);\n  return [state, setState];\n}\nexport default useControlledState;"],
+  "mappings": ";AAGA,SAAS,WAAW,UAAU,mBAAmB;AAKjD,SAAS,gBAAgB,uBAAuB;AAUhD,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,UAAU;AACZ;AAyBA,SAAS,mBAAmB,cAAc,UAAU,gBAAgB;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,kBAAkB,eAAe,YAAY;AAKnD,YAAU,MAAM;AACd,QAAI,mBAAmB,eAAe;AACpC,uBAAiB,MAAS;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,iBAAiB,aAAa,CAAC;AACnC,QAAM,QAAQ,gBAAgB,CAAC,cAAc,eAAe,OAAO,GAAG,QAAQ;AAG9E,QAAM,WAAW,YAAY,eAAa;AACxC,QAAI,CAAC,iBAAiB;AACpB,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AACpB,SAAO,CAAC,OAAO,QAAQ;AACzB;AACA,IAAO,+BAAQ;",
   "names": []
 }

package/build-module/utils/hooks/use-controlled-value.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/hooks/use-controlled-value.ts
 import { useCallback, useState } from "@wordpress/element";
 function useControlledValue({
   defaultValue,

package/build-module/utils/hooks/use-controlled-value.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-controlled-value.ts"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue({\n  defaultValue,\n  onChange,\n  value: valueProp\n}) {\n  const hasValue = typeof valueProp !== 'undefined';\n  const initialValue = hasValue ? valueProp : defaultValue;\n  const [state, setState] = useState(initialValue);\n  const value = hasValue ? valueProp : state;\n  const uncontrolledSetValue = useCallback((nextValue, ...args) => {\n    setState(nextValue);\n    onChange?.(nextValue, ...args);\n  }, [onChange]);\n  let setValue;\n  if (hasValue && typeof onChange === 'function') {\n    // Controlled mode.\n    setValue = onChange;\n  } else if (!hasValue && typeof onChange === 'function') {\n    // Uncontrolled mode, plus forwarding to the onChange prop.\n    setValue = uncontrolledSetValue;\n  } else {\n    // Uncontrolled mode, only update internal state.\n    setValue = setState;\n  }\n  return [value, setValue];\n}"],
-  "mappings": "AAGA,SAAS,aAAa,gBAAgB;AAU/B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAAG;AACD,QAAM,WAAW,OAAO,cAAc;AACtC,QAAM,eAAe,WAAW,YAAY;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,uBAAuB,YAAY,CAAC,cAAc,SAAS;AAC/D,aAAS,SAAS;AAClB,eAAW,WAAW,GAAG,IAAI;AAAA,EAC/B,GAAG,CAAC,QAAQ,CAAC;AACb,MAAI;AACJ,MAAI,YAAY,OAAO,aAAa,YAAY;AAE9C,eAAW;AAAA,EACb,WAAW,CAAC,YAAY,OAAO,aAAa,YAAY;AAEtD,eAAW;AAAA,EACb,OAAO;AAEL,eAAW;AAAA,EACb;AACA,SAAO,CAAC,OAAO,QAAQ;AACzB;",
+  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AAU/B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAAG;AACD,QAAM,WAAW,OAAO,cAAc;AACtC,QAAM,eAAe,WAAW,YAAY;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,uBAAuB,YAAY,CAAC,cAAc,SAAS;AAC/D,aAAS,SAAS;AAClB,eAAW,WAAW,GAAG,IAAI;AAAA,EAC/B,GAAG,CAAC,QAAQ,CAAC;AACb,MAAI;AACJ,MAAI,YAAY,OAAO,aAAa,YAAY;AAE9C,eAAW;AAAA,EACb,WAAW,CAAC,YAAY,OAAO,aAAa,YAAY;AAEtD,eAAW;AAAA,EACb,OAAO;AAEL,eAAW;AAAA,EACb;AACA,SAAO,CAAC,OAAO,QAAQ;AACzB;",
   "names": []
 }

package/build-module/utils/hooks/use-cx.js

@@ -1,9 +1,10 @@
+// packages/components/src/utils/hooks/use-cx.ts
 import { __unsafe_useEmotionCache as useEmotionCache } from "@emotion/react";
 import { insertStyles } from "@emotion/utils";
 import { cx as innerCx } from "@emotion/css";
 import { useCallback } from "@wordpress/element";
-const isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
-const useCx = () => {
+var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
+var useCx = () => {
   const cache = useEmotionCache();
   const cx = useCallback((...classNames) => {
     if (cache === null) {

package/build-module/utils/hooks/use-cx.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-cx.ts"],
   "sourcesContent": ["/**\n * External dependencies\n */\nimport { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';\nimport { insertStyles } from '@emotion/utils';\n// eslint-disable-next-line no-restricted-imports\n\n// eslint-disable-next-line no-restricted-imports\nimport { cx as innerCx } from '@emotion/css';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nconst isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined');\n\n/**\n * Retrieve a `cx` function that knows how to handle `SerializedStyles`\n * returned by the `@emotion/react` `css` function in addition to what\n * `cx` normally knows how to handle. It also hooks into the Emotion\n * Cache, allowing `css` calls to work inside iframes.\n *\n * ```jsx\n * import { css } from '@emotion/react';\n *\n * const styles = css`\n * \tcolor: red\n * `;\n *\n * function RedText( { className, ...props } ) {\n * \tconst cx = useCx();\n *\n * \tconst classes = cx(styles, className);\n *\n * \treturn <span className={classes} {...props} />;\n * }\n * ```\n */\nexport const useCx = () => {\n  const cache = useEmotionCache();\n  const cx = useCallback((...classNames) => {\n    if (cache === null) {\n      throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context');\n    }\n    return innerCx(...classNames.map(arg => {\n      if (isSerializedStyles(arg)) {\n        insertStyles(cache, arg, false);\n        return `${cache.key}-${arg.name}`;\n      }\n      return arg;\n    }));\n  }, [cache]);\n  return cx;\n};"],
-  "mappings": "AAGA,SAAS,4BAA4B,uBAAuB;AAC5D,SAAS,oBAAoB;AAI7B,SAAS,MAAM,eAAe;AAK9B,SAAS,mBAAmB;AAC5B,MAAM,qBAAqB,OAAK,OAAO,MAAM,eAAe,MAAM,QAAQ,CAAC,QAAQ,QAAQ,EAAE,MAAM,OAAK,OAAO,EAAE,CAAC,MAAM,WAAW;AAwB5H,MAAM,QAAQ,MAAM;AACzB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,KAAK,YAAY,IAAI,eAAe;AACxC,QAAI,UAAU,MAAM;AAClB,YAAM,IAAI,MAAM,2EAA2E;AAAA,IAC7F;AACA,WAAO,QAAQ,GAAG,WAAW,IAAI,SAAO;AACtC,UAAI,mBAAmB,GAAG,GAAG;AAC3B,qBAAa,OAAO,KAAK,KAAK;AAC9B,eAAO,GAAG,MAAM,GAAG,IAAI,IAAI,IAAI;AAAA,MACjC;AACA,aAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AACV,SAAO;AACT;",
+  "mappings": ";AAGA,SAAS,4BAA4B,uBAAuB;AAC5D,SAAS,oBAAoB;AAI7B,SAAS,MAAM,eAAe;AAK9B,SAAS,mBAAmB;AAC5B,IAAM,qBAAqB,OAAK,OAAO,MAAM,eAAe,MAAM,QAAQ,CAAC,QAAQ,QAAQ,EAAE,MAAM,OAAK,OAAO,EAAE,CAAC,MAAM,WAAW;AAwB5H,IAAM,QAAQ,MAAM;AACzB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,KAAK,YAAY,IAAI,eAAe;AACxC,QAAI,UAAU,MAAM;AAClB,YAAM,IAAI,MAAM,2EAA2E;AAAA,IAC7F;AACA,WAAO,QAAQ,GAAG,WAAW,IAAI,SAAO;AACtC,UAAI,mBAAmB,GAAG,GAAG;AAC3B,qBAAa,OAAO,KAAK,KAAK;AAC9B,eAAO,GAAG,MAAM,GAAG,IAAI,IAAI,IAAI;AAAA,MACjC;AACA,aAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AACV,SAAO;AACT;",
   "names": []
 }

package/build-module/utils/hooks/use-on-value-update.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/hooks/use-on-value-update.ts
 import { useEvent } from "@wordpress/compose";
 import { useRef, useLayoutEffect } from "@wordpress/element";
 function useOnValueUpdate(value, onUpdate) {

package/build-module/utils/hooks/use-on-value-update.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-on-value-update.ts"],
   "sourcesContent": ["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Context object for the `onUpdate` callback of `useOnValueUpdate`.\n */\n\n/**\n * Calls the `onUpdate` callback when the `value` changes.\n */\nexport function useOnValueUpdate(\n/**\n * The value to watch for changes.\n */\nvalue,\n/**\n * Callback to fire when the value changes.\n */\nonUpdate) {\n  const previousValueRef = useRef(value);\n  const updateCallbackEvent = useEvent(onUpdate);\n  useLayoutEffect(() => {\n    if (previousValueRef.current !== value) {\n      updateCallbackEvent({\n        previousValue: previousValueRef.current\n      });\n      previousValueRef.current = value;\n    }\n  }, [updateCallbackEvent, value]);\n}\n/* eslint-enable jsdoc/require-param */"],
-  "mappings": "AAIA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,uBAAuB;AASjC,SAAS,iBAIhB,OAIA,UAAU;AACR,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,kBAAgB,MAAM;AACpB,QAAI,iBAAiB,YAAY,OAAO;AACtC,0BAAoB;AAAA,QAClB,eAAe,iBAAiB;AAAA,MAClC,CAAC;AACD,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,qBAAqB,KAAK,CAAC;AACjC;",
+  "mappings": ";AAIA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,uBAAuB;AASjC,SAAS,iBAIhB,OAIA,UAAU;AACR,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,kBAAgB,MAAM;AACpB,QAAI,iBAAiB,YAAY,OAAO;AACtC,0BAAoB;AAAA,QAClB,eAAe,iBAAiB;AAAA,MAClC,CAAC;AACD,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,qBAAqB,KAAK,CAAC;AACjC;",
   "names": []
 }

package/build-module/utils/hooks/use-update-effect.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/hooks/use-update-effect.js
 import { useRef, useEffect } from "@wordpress/element";
 function useUpdateEffect(effect, deps) {
   const mountedRef = useRef(false);

package/build-module/utils/hooks/use-update-effect.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/hooks/use-update-effect.js"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect(effect, deps) {\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    if (mountedRef.current) {\n      return effect();\n    }\n    mountedRef.current = true;\n    return undefined;\n    // 1. This hook needs to pass a dep list that isn't an array literal\n    // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n    // see https://github.com/WordPress/gutenberg/pull/41166\n  }, deps);\n  useEffect(() => () => {\n    mountedRef.current = false;\n  }, []);\n}\nexport default useUpdateEffect;"],
-  "mappings": "AAGA,SAAS,QAAQ,iBAAiB;AAUlC,SAAS,gBAAgB,QAAQ,MAAM;AACrC,QAAM,aAAa,OAAO,KAAK;AAC/B,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,aAAO,OAAO;AAAA,IAChB;AACA,eAAW,UAAU;AACrB,WAAO;AAAA,EAIT,GAAG,IAAI;AACP,YAAU,MAAM,MAAM;AACpB,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,CAAC;AACP;AACA,IAAO,4BAAQ;",
+  "mappings": ";AAGA,SAAS,QAAQ,iBAAiB;AAUlC,SAAS,gBAAgB,QAAQ,MAAM;AACrC,QAAM,aAAa,OAAO,KAAK;AAC/B,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,aAAO,OAAO;AAAA,IAChB;AACA,eAAW,UAAU;AACrB,WAAO;AAAA,EAIT,GAAG,IAAI;AACP,YAAU,MAAM,MAAM;AACpB,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,CAAC;AACP;AACA,IAAO,4BAAQ;",
   "names": []
 }

package/build-module/utils/index.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/index.js
 export * from "./hooks";
 export * from "./style-mixins";
 //# sourceMappingURL=index.js.map

package/build-module/utils/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/index.js"],
   "sourcesContent": ["export * from './hooks';\nexport * from './style-mixins';"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "mappings": ";AAAA,cAAc;AACd,cAAc;",
   "names": []
 }

package/build-module/utils/math.js

@@ -1,3 +1,4 @@
+// packages/components/src/utils/math.js
 function getNumber(value) {
   const number = Number(value);
   return isNaN(number) ? 0 : number;

package/build-module/utils/math.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/utils/math.js"],
   "sourcesContent": ["/**\n * Parses and retrieves a number value.\n *\n * @param {unknown} value The incoming value.\n *\n * @return {number} The parsed number value.\n */\nexport function getNumber(value) {\n  const number = Number(value);\n  return isNaN(number) ? 0 : number;\n}\n\n/**\n * Safely adds 2 values.\n *\n * @param {Array<number|string>} args Values to add together.\n *\n * @return {number} The sum of values.\n */\nexport function add(...args) {\n  return args.reduce(/** @type {(sum:number, arg: number|string) => number} */\n  (sum, arg) => sum + getNumber(arg), 0);\n}\n\n/**\n * Safely subtracts 2 values.\n *\n * @param {Array<number|string>} args Values to subtract together.\n *\n * @return {number} The difference of the values.\n */\nexport function subtract(...args) {\n  return args.reduce(/** @type {(diff:number, arg: number|string, index:number) => number} */\n  (diff, arg, index) => {\n    const value = getNumber(arg);\n    return index === 0 ? value : diff - value;\n  }, 0);\n}\n\n/**\n * Determines the decimal position of a number value.\n *\n * @param {number} value The number to evaluate.\n *\n * @return {number} The number of decimal places.\n */\nfunction getPrecision(value) {\n  const split = (value + '').split('.');\n  return split[1] !== undefined ? split[1].length : 0;\n}\n\n/**\n * Clamps a value based on a min/max range.\n *\n * @param {number|string} value The value.\n * @param {number}        min   The minimum range.\n * @param {number}        max   The maximum range.\n *\n * @return {number} The clamped value.\n */\nexport function clamp(value, min, max) {\n  const baseValue = getNumber(value);\n  return Math.max(min, Math.min(baseValue, max));\n}\n\n/**\n * Rounds a value to the nearest step offset by a minimum.\n *\n * @param {number|string} value The value.\n * @param {number}        min   The minimum range.\n * @param {number}        step  The increment for the value.\n *\n * @return {number} The value as a valid step.\n */\nexport function ensureValidStep(value, min, step) {\n  const baseValue = getNumber(value);\n  const stepValue = getNumber(step);\n  const precision = Math.max(getPrecision(step), getPrecision(min));\n  const realMin = Math.abs(min) === Infinity ? 0 : min;\n  // If the step is not a factor of the minimum then the step must be\n  // offset by the minimum.\n  const tare = realMin % stepValue ? realMin : 0;\n  const rounded = Math.round((baseValue - tare) / stepValue) * stepValue;\n  const fromMin = rounded + tare;\n  return precision ? getNumber(fromMin.toFixed(precision)) : fromMin;\n}"],
-  "mappings": "AAOO,SAAS,UAAU,OAAO;AAC/B,QAAM,SAAS,OAAO,KAAK;AAC3B,SAAO,MAAM,MAAM,IAAI,IAAI;AAC7B;AASO,SAAS,OAAO,MAAM;AAC3B,SAAO,KAAK;AAAA;AAAA,IACZ,CAAC,KAAK,QAAQ,MAAM,UAAU,GAAG;AAAA,IAAG;AAAA,EAAC;AACvC;AASO,SAAS,YAAY,MAAM;AAChC,SAAO,KAAK;AAAA;AAAA,IACZ,CAAC,MAAM,KAAK,UAAU;AACpB,YAAM,QAAQ,UAAU,GAAG;AAC3B,aAAO,UAAU,IAAI,QAAQ,OAAO;AAAA,IACtC;AAAA,IAAG;AAAA,EAAC;AACN;AASA,SAAS,aAAa,OAAO;AAC3B,QAAM,SAAS,QAAQ,IAAI,MAAM,GAAG;AACpC,SAAO,MAAM,CAAC,MAAM,SAAY,MAAM,CAAC,EAAE,SAAS;AACpD;AAWO,SAAS,MAAM,OAAO,KAAK,KAAK;AACrC,QAAM,YAAY,UAAU,KAAK;AACjC,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,WAAW,GAAG,CAAC;AAC/C;AAWO,SAAS,gBAAgB,OAAO,KAAK,MAAM;AAChD,QAAM,YAAY,UAAU,KAAK;AACjC,QAAM,YAAY,UAAU,IAAI;AAChC,QAAM,YAAY,KAAK,IAAI,aAAa,IAAI,GAAG,aAAa,GAAG,CAAC;AAChE,QAAM,UAAU,KAAK,IAAI,GAAG,MAAM,WAAW,IAAI;AAGjD,QAAM,OAAO,UAAU,YAAY,UAAU;AAC7C,QAAM,UAAU,KAAK,OAAO,YAAY,QAAQ,SAAS,IAAI;AAC7D,QAAM,UAAU,UAAU;AAC1B,SAAO,YAAY,UAAU,QAAQ,QAAQ,SAAS,CAAC,IAAI;AAC7D;",
+  "mappings": ";AAOO,SAAS,UAAU,OAAO;AAC/B,QAAM,SAAS,OAAO,KAAK;AAC3B,SAAO,MAAM,MAAM,IAAI,IAAI;AAC7B;AASO,SAAS,OAAO,MAAM;AAC3B,SAAO,KAAK;AAAA;AAAA,IACZ,CAAC,KAAK,QAAQ,MAAM,UAAU,GAAG;AAAA,IAAG;AAAA,EAAC;AACvC;AASO,SAAS,YAAY,MAAM;AAChC,SAAO,KAAK;AAAA;AAAA,IACZ,CAAC,MAAM,KAAK,UAAU;AACpB,YAAM,QAAQ,UAAU,GAAG;AAC3B,aAAO,UAAU,IAAI,QAAQ,OAAO;AAAA,IACtC;AAAA,IAAG;AAAA,EAAC;AACN;AASA,SAAS,aAAa,OAAO;AAC3B,QAAM,SAAS,QAAQ,IAAI,MAAM,GAAG;AACpC,SAAO,MAAM,CAAC,MAAM,SAAY,MAAM,CAAC,EAAE,SAAS;AACpD;AAWO,SAAS,MAAM,OAAO,KAAK,KAAK;AACrC,QAAM,YAAY,UAAU,KAAK;AACjC,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,WAAW,GAAG,CAAC;AAC/C;AAWO,SAAS,gBAAgB,OAAO,KAAK,MAAM;AAChD,QAAM,YAAY,UAAU,KAAK;AACjC,QAAM,YAAY,UAAU,IAAI;AAChC,QAAM,YAAY,KAAK,IAAI,aAAa,IAAI,GAAG,aAAa,GAAG,CAAC;AAChE,QAAM,UAAU,KAAK,IAAI,GAAG,MAAM,WAAW,IAAI;AAGjD,QAAM,OAAO,UAAU,YAAY,UAAU;AAC7C,QAAM,UAAU,KAAK,OAAO,YAAY,QAAQ,SAAS,IAAI;AAC7D,QAAM,UAAU,UAAU;AAC1B,SAAO,YAAY,UAAU,QAAQ,QAAQ,SAAS,CAAC,IAAI;AAC7D;",
   "names": []
 }

package/build-module/utils/rtl.js

@@ -1,9 +1,10 @@
+// packages/components/src/utils/rtl.js
 import { css } from "@emotion/react";
 import { isRTL } from "@wordpress/i18n";
-const LOWER_LEFT_REGEXP = new RegExp(/-left/g);
-const LOWER_RIGHT_REGEXP = new RegExp(/-right/g);
-const UPPER_LEFT_REGEXP = new RegExp(/Left/g);
-const UPPER_RIGHT_REGEXP = new RegExp(/Right/g);
+var LOWER_LEFT_REGEXP = new RegExp(/-left/g);
+var LOWER_RIGHT_REGEXP = new RegExp(/-right/g);
+var UPPER_LEFT_REGEXP = new RegExp(/Left/g);
+var UPPER_RIGHT_REGEXP = new RegExp(/Right/g);
 function getConvertedKey(key) {
   if (key === "left") {
     return "right";
@@ -25,7 +26,7 @@ function getConvertedKey(key) {
   }
   return key;
 }
-const convertLTRToRTL = (ltrStyles = {}) => {
+var convertLTRToRTL = (ltrStyles = {}) => {
   return Object.fromEntries(Object.entries(ltrStyles).map(([key, value]) => [getConvertedKey(key), value]));
 };
 function rtl(ltrStyles = {}, rtlStyles) {