@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

package/build/components/global-styles/utils.js

@@ -1,191 +1,224 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  PRESET_METADATA: () => PRESET_METADATA,
+  ROOT_BLOCK_SELECTOR: () => ROOT_BLOCK_SELECTOR,
+  ROOT_CSS_PROPERTIES_SELECTOR: () => ROOT_CSS_PROPERTIES_SELECTOR,
+  STYLE_PATH_TO_CSS_VAR_INFIX: () => STYLE_PATH_TO_CSS_VAR_INFIX,
+  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE: () => STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+  appendToSelector: () => appendToSelector,
+  areGlobalStyleConfigsEqual: () => areGlobalStyleConfigsEqual,
+  getBlockStyleVariationSelector: () => getBlockStyleVariationSelector,
+  getPresetVariableFromValue: () => getPresetVariableFromValue,
+  getResolvedRefValue: () => getResolvedRefValue,
+  getResolvedThemeFilePath: () => getResolvedThemeFilePath,
+  getResolvedValue: () => getResolvedValue,
+  getValueFromVariable: () => getValueFromVariable,
+  scopeFeatureSelectors: () => scopeFeatureSelectors,
+  scopeSelector: () => scopeSelector,
+  useToolsPanelDropdownMenuProps: () => useToolsPanelDropdownMenuProps
 });
-exports.STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = exports.STYLE_PATH_TO_CSS_VAR_INFIX = exports.ROOT_CSS_PROPERTIES_SELECTOR = exports.ROOT_BLOCK_SELECTOR = exports.PRESET_METADATA = void 0;
-exports.appendToSelector = appendToSelector;
-exports.areGlobalStyleConfigsEqual = areGlobalStyleConfigsEqual;
-exports.getBlockStyleVariationSelector = getBlockStyleVariationSelector;
-exports.getPresetVariableFromValue = getPresetVariableFromValue;
-exports.getResolvedRefValue = getResolvedRefValue;
-exports.getResolvedThemeFilePath = getResolvedThemeFilePath;
-exports.getResolvedValue = getResolvedValue;
-exports.getValueFromVariable = getValueFromVariable;
-exports.scopeFeatureSelectors = scopeFeatureSelectors;
-exports.scopeSelector = scopeSelector;
-exports.useToolsPanelDropdownMenuProps = useToolsPanelDropdownMenuProps;
-var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
-var _compose = require("@wordpress/compose");
-var _styleEngine = require("@wordpress/style-engine");
-var _typographyUtils = require("./typography-utils");
-var _object = require("../../utils/object");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/* Supporting data. */
-const ROOT_BLOCK_SELECTOR = exports.ROOT_BLOCK_SELECTOR = 'body';
-const ROOT_CSS_PROPERTIES_SELECTOR = exports.ROOT_CSS_PROPERTIES_SELECTOR = ':root';
-const PRESET_METADATA = exports.PRESET_METADATA = [{
-  path: ['color', 'palette'],
-  valueKey: 'color',
-  cssVarInfix: 'color',
-  classes: [{
-    classSuffix: 'color',
-    propertyName: 'color'
-  }, {
-    classSuffix: 'background-color',
-    propertyName: 'background-color'
-  }, {
-    classSuffix: 'border-color',
-    propertyName: 'border-color'
-  }]
-}, {
-  path: ['color', 'gradients'],
-  valueKey: 'gradient',
-  cssVarInfix: 'gradient',
-  classes: [{
-    classSuffix: 'gradient-background',
-    propertyName: 'background'
-  }]
-}, {
-  path: ['color', 'duotone'],
-  valueKey: 'colors',
-  cssVarInfix: 'duotone',
-  valueFunc: ({
-    slug
-  }) => `url( '#wp-duotone-${slug}' )`,
-  classes: []
-}, {
-  path: ['shadow', 'presets'],
-  valueKey: 'shadow',
-  cssVarInfix: 'shadow',
-  classes: []
-}, {
-  path: ['typography', 'fontSizes'],
-  valueFunc: (preset, settings) => (0, _typographyUtils.getTypographyFontSizeValue)(preset, settings),
-  valueKey: 'size',
-  cssVarInfix: 'font-size',
-  classes: [{
-    classSuffix: 'font-size',
-    propertyName: 'font-size'
-  }]
-}, {
-  path: ['typography', 'fontFamilies'],
-  valueKey: 'fontFamily',
-  cssVarInfix: 'font-family',
-  classes: [{
-    classSuffix: 'font-family',
-    propertyName: 'font-family'
-  }]
-}, {
-  path: ['spacing', 'spacingSizes'],
-  valueKey: 'size',
-  cssVarInfix: 'spacing',
-  classes: []
-}, {
-  path: ['border', 'radiusSizes'],
-  valueKey: 'size',
-  cssVarInfix: 'border-radius',
-  classes: []
-}];
-const STYLE_PATH_TO_CSS_VAR_INFIX = exports.STYLE_PATH_TO_CSS_VAR_INFIX = {
-  'color.background': 'color',
-  'color.text': 'color',
-  'filter.duotone': 'duotone',
-  'elements.link.color.text': 'color',
-  'elements.link.:hover.color.text': 'color',
-  'elements.link.typography.fontFamily': 'font-family',
-  'elements.link.typography.fontSize': 'font-size',
-  'elements.button.color.text': 'color',
-  'elements.button.color.background': 'color',
-  'elements.caption.color.text': 'color',
-  'elements.button.typography.fontFamily': 'font-family',
-  'elements.button.typography.fontSize': 'font-size',
-  'elements.heading.color': 'color',
-  'elements.heading.color.background': 'color',
-  'elements.heading.typography.fontFamily': 'font-family',
-  'elements.heading.gradient': 'gradient',
-  'elements.heading.color.gradient': 'gradient',
-  'elements.h1.color': 'color',
-  'elements.h1.color.background': 'color',
-  'elements.h1.typography.fontFamily': 'font-family',
-  'elements.h1.color.gradient': 'gradient',
-  'elements.h2.color': 'color',
-  'elements.h2.color.background': 'color',
-  'elements.h2.typography.fontFamily': 'font-family',
-  'elements.h2.color.gradient': 'gradient',
-  'elements.h3.color': 'color',
-  'elements.h3.color.background': 'color',
-  'elements.h3.typography.fontFamily': 'font-family',
-  'elements.h3.color.gradient': 'gradient',
-  'elements.h4.color': 'color',
-  'elements.h4.color.background': 'color',
-  'elements.h4.typography.fontFamily': 'font-family',
-  'elements.h4.color.gradient': 'gradient',
-  'elements.h5.color': 'color',
-  'elements.h5.color.background': 'color',
-  'elements.h5.typography.fontFamily': 'font-family',
-  'elements.h5.color.gradient': 'gradient',
-  'elements.h6.color': 'color',
-  'elements.h6.color.background': 'color',
-  'elements.h6.typography.fontFamily': 'font-family',
-  'elements.h6.color.gradient': 'gradient',
-  'color.gradient': 'gradient',
-  shadow: 'shadow',
-  'typography.fontSize': 'font-size',
-  'typography.fontFamily': 'font-family'
+module.exports = __toCommonJS(utils_exports);
+var import_es6 = __toESM(require("fast-deep-equal/es6"));
+var import_compose = require("@wordpress/compose");
+var import_style_engine = require("@wordpress/style-engine");
+var import_typography_utils = require("./typography-utils");
+var import_object = require("../../utils/object");
+const ROOT_BLOCK_SELECTOR = "body";
+const ROOT_CSS_PROPERTIES_SELECTOR = ":root";
+const PRESET_METADATA = [
+  {
+    path: ["color", "palette"],
+    valueKey: "color",
+    cssVarInfix: "color",
+    classes: [
+      { classSuffix: "color", propertyName: "color" },
+      {
+        classSuffix: "background-color",
+        propertyName: "background-color"
+      },
+      {
+        classSuffix: "border-color",
+        propertyName: "border-color"
+      }
+    ]
+  },
+  {
+    path: ["color", "gradients"],
+    valueKey: "gradient",
+    cssVarInfix: "gradient",
+    classes: [
+      {
+        classSuffix: "gradient-background",
+        propertyName: "background"
+      }
+    ]
+  },
+  {
+    path: ["color", "duotone"],
+    valueKey: "colors",
+    cssVarInfix: "duotone",
+    valueFunc: ({ slug }) => `url( '#wp-duotone-${slug}' )`,
+    classes: []
+  },
+  {
+    path: ["shadow", "presets"],
+    valueKey: "shadow",
+    cssVarInfix: "shadow",
+    classes: []
+  },
+  {
+    path: ["typography", "fontSizes"],
+    valueFunc: (preset, settings) => (0, import_typography_utils.getTypographyFontSizeValue)(preset, settings),
+    valueKey: "size",
+    cssVarInfix: "font-size",
+    classes: [{ classSuffix: "font-size", propertyName: "font-size" }]
+  },
+  {
+    path: ["typography", "fontFamilies"],
+    valueKey: "fontFamily",
+    cssVarInfix: "font-family",
+    classes: [
+      { classSuffix: "font-family", propertyName: "font-family" }
+    ]
+  },
+  {
+    path: ["spacing", "spacingSizes"],
+    valueKey: "size",
+    cssVarInfix: "spacing",
+    classes: []
+  },
+  {
+    path: ["border", "radiusSizes"],
+    valueKey: "size",
+    cssVarInfix: "border-radius",
+    classes: []
+  }
+];
+const STYLE_PATH_TO_CSS_VAR_INFIX = {
+  "color.background": "color",
+  "color.text": "color",
+  "filter.duotone": "duotone",
+  "elements.link.color.text": "color",
+  "elements.link.:hover.color.text": "color",
+  "elements.link.typography.fontFamily": "font-family",
+  "elements.link.typography.fontSize": "font-size",
+  "elements.button.color.text": "color",
+  "elements.button.color.background": "color",
+  "elements.caption.color.text": "color",
+  "elements.button.typography.fontFamily": "font-family",
+  "elements.button.typography.fontSize": "font-size",
+  "elements.heading.color": "color",
+  "elements.heading.color.background": "color",
+  "elements.heading.typography.fontFamily": "font-family",
+  "elements.heading.gradient": "gradient",
+  "elements.heading.color.gradient": "gradient",
+  "elements.h1.color": "color",
+  "elements.h1.color.background": "color",
+  "elements.h1.typography.fontFamily": "font-family",
+  "elements.h1.color.gradient": "gradient",
+  "elements.h2.color": "color",
+  "elements.h2.color.background": "color",
+  "elements.h2.typography.fontFamily": "font-family",
+  "elements.h2.color.gradient": "gradient",
+  "elements.h3.color": "color",
+  "elements.h3.color.background": "color",
+  "elements.h3.typography.fontFamily": "font-family",
+  "elements.h3.color.gradient": "gradient",
+  "elements.h4.color": "color",
+  "elements.h4.color.background": "color",
+  "elements.h4.typography.fontFamily": "font-family",
+  "elements.h4.color.gradient": "gradient",
+  "elements.h5.color": "color",
+  "elements.h5.color.background": "color",
+  "elements.h5.typography.fontFamily": "font-family",
+  "elements.h5.color.gradient": "gradient",
+  "elements.h6.color": "color",
+  "elements.h6.color.background": "color",
+  "elements.h6.typography.fontFamily": "font-family",
+  "elements.h6.color.gradient": "gradient",
+  "color.gradient": "gradient",
+  shadow: "shadow",
+  "typography.fontSize": "font-size",
+  "typography.fontFamily": "font-family"
 };
-
-// A static list of block attributes that store global style preset slugs.
-const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = exports.STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
-  'color.background': 'backgroundColor',
-  'color.text': 'textColor',
-  'color.gradient': 'gradient',
-  'typography.fontSize': 'fontSize',
-  'typography.fontFamily': 'fontFamily'
+const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+  "color.background": "backgroundColor",
+  "color.text": "textColor",
+  "color.gradient": "gradient",
+  "typography.fontSize": "fontSize",
+  "typography.fontFamily": "fontFamily"
 };
 function useToolsPanelDropdownMenuProps() {
-  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
+  const isMobile = (0, import_compose.useViewportMatch)("medium", "<");
   return !isMobile ? {
     popoverProps: {
-      placement: 'left-start',
+      placement: "left-start",
       // For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
       offset: 259
     }
   } : {};
 }
 function findInPresetsBy(features, blockName, presetPath, presetProperty, presetValueValue) {
-  // Block presets take priority above root level presets.
-  const orderedPresetsByOrigin = [(0, _object.getValueFromObjectPath)(features, ['blocks', blockName, ...presetPath]), (0, _object.getValueFromObjectPath)(features, presetPath)];
+  const orderedPresetsByOrigin = [
+    (0, import_object.getValueFromObjectPath)(features, [
+      "blocks",
+      blockName,
+      ...presetPath
+    ]),
+    (0, import_object.getValueFromObjectPath)(features, presetPath)
+  ];
   for (const presetByOrigin of orderedPresetsByOrigin) {
     if (presetByOrigin) {
-      // Preset origins ordered by priority.
-      const origins = ['custom', 'theme', 'default'];
+      const origins = ["custom", "theme", "default"];
       for (const origin of origins) {
         const presets = presetByOrigin[origin];
         if (presets) {
-          const presetObject = presets.find(preset => preset[presetProperty] === presetValueValue);
+          const presetObject = presets.find(
+            (preset) => preset[presetProperty] === presetValueValue
+          );
           if (presetObject) {
-            if (presetProperty === 'slug') {
+            if (presetProperty === "slug") {
               return presetObject;
             }
-            // If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
-            const highestPresetObjectWithSameSlug = findInPresetsBy(features, blockName, presetPath, 'slug', presetObject.slug);
+            const highestPresetObjectWithSameSlug = findInPresetsBy(
+              features,
+              blockName,
+              presetPath,
+              "slug",
+              presetObject.slug
+            );
             if (highestPresetObjectWithSameSlug[presetProperty] === presetObject[presetProperty]) {
               return presetObject;
             }
-            return undefined;
+            return void 0;
           }
         }
       }
@@ -197,63 +230,62 @@ function getPresetVariableFromValue(features, blockName, variableStylePath, pres
     return presetPropertyValue;
   }
   const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[variableStylePath];
-  const metadata = PRESET_METADATA.find(data => data.cssVarInfix === cssVarInfix);
+  const metadata = PRESET_METADATA.find(
+    (data) => data.cssVarInfix === cssVarInfix
+  );
   if (!metadata) {
-    // The property doesn't have preset data
-    // so the value should be returned as it is.
     return presetPropertyValue;
   }
-  const {
+  const { valueKey, path } = metadata;
+  const presetObject = findInPresetsBy(
+    features,
+    blockName,
+    path,
     valueKey,
-    path
-  } = metadata;
-  const presetObject = findInPresetsBy(features, blockName, path, valueKey, presetPropertyValue);
+    presetPropertyValue
+  );
   if (!presetObject) {
-    // Value wasn't found in the presets,
-    // so it must be a custom value.
     return presetPropertyValue;
   }
   return `var:preset|${cssVarInfix}|${presetObject.slug}`;
 }
 function getValueFromPresetVariable(features, blockName, variable, [presetType, slug]) {
-  const metadata = PRESET_METADATA.find(data => data.cssVarInfix === presetType);
+  const metadata = PRESET_METADATA.find(
+    (data) => data.cssVarInfix === presetType
+  );
   if (!metadata) {
     return variable;
   }
-  const presetObject = findInPresetsBy(features.settings, blockName, metadata.path, 'slug', slug);
+  const presetObject = findInPresetsBy(
+    features.settings,
+    blockName,
+    metadata.path,
+    "slug",
+    slug
+  );
   if (presetObject) {
-    const {
-      valueKey
-    } = metadata;
+    const { valueKey } = metadata;
     const result = presetObject[valueKey];
     return getValueFromVariable(features, blockName, result);
   }
   return variable;
 }
 function getValueFromCustomVariable(features, blockName, variable, path) {
-  var _getValueFromObjectPa;
-  const result = (_getValueFromObjectPa = (0, _object.getValueFromObjectPath)(features.settings, ['blocks', blockName, 'custom', ...path])) !== null && _getValueFromObjectPa !== void 0 ? _getValueFromObjectPa : (0, _object.getValueFromObjectPath)(features.settings, ['custom', ...path]);
+  const result = (0, import_object.getValueFromObjectPath)(features.settings, [
+    "blocks",
+    blockName,
+    "custom",
+    ...path
+  ]) ?? (0, import_object.getValueFromObjectPath)(features.settings, ["custom", ...path]);
   if (!result) {
     return variable;
   }
-  // A variable may reference another variable so we need recursion until we find the value.
   return getValueFromVariable(features, blockName, result);
 }
-
-/**
- * Attempts to fetch the value of a theme.json CSS variable.
- *
- * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
- * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
- * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
- * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
- */
 function getValueFromVariable(features, blockName, variable) {
-  if (!variable || typeof variable !== 'string') {
-    if (typeof variable?.ref === 'string') {
-      variable = (0, _object.getValueFromObjectPath)(features, variable.ref);
-      // Presence of another ref indicates a reference to another dynamic value.
-      // Pointing to another dynamic value is not supported.
+  if (!variable || typeof variable !== "string") {
+    if (typeof variable?.ref === "string") {
+      variable = (0, import_object.getValueFromObjectPath)(features, variable.ref);
       if (!variable || !!variable?.ref) {
         return variable;
       }
@@ -261,162 +293,87 @@ function getValueFromVariable(features, blockName, variable) {
       return variable;
     }
   }
-  const USER_VALUE_PREFIX = 'var:';
-  const THEME_VALUE_PREFIX = 'var(--wp--';
-  const THEME_VALUE_SUFFIX = ')';
+  const USER_VALUE_PREFIX = "var:";
+  const THEME_VALUE_PREFIX = "var(--wp--";
+  const THEME_VALUE_SUFFIX = ")";
   let parsedVar;
   if (variable.startsWith(USER_VALUE_PREFIX)) {
-    parsedVar = variable.slice(USER_VALUE_PREFIX.length).split('|');
+    parsedVar = variable.slice(USER_VALUE_PREFIX.length).split("|");
   } else if (variable.startsWith(THEME_VALUE_PREFIX) && variable.endsWith(THEME_VALUE_SUFFIX)) {
-    parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split('--');
+    parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split("--");
   } else {
-    // We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
     return variable;
   }
   const [type, ...path] = parsedVar;
-  if (type === 'preset') {
-    return getValueFromPresetVariable(features, blockName, variable, path);
+  if (type === "preset") {
+    return getValueFromPresetVariable(
+      features,
+      blockName,
+      variable,
+      path
+    );
   }
-  if (type === 'custom') {
-    return getValueFromCustomVariable(features, blockName, variable, path);
+  if (type === "custom") {
+    return getValueFromCustomVariable(
+      features,
+      blockName,
+      variable,
+      path
+    );
   }
   return variable;
 }
-
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
 function scopeSelector(scope, selector) {
   if (!scope || !selector) {
     return selector;
   }
-  const scopes = scope.split(',');
-  const selectors = selector.split(',');
+  const scopes = scope.split(",");
+  const selectors = selector.split(",");
   const selectorsScoped = [];
-  scopes.forEach(outer => {
-    selectors.forEach(inner => {
+  scopes.forEach((outer) => {
+    selectors.forEach((inner) => {
       selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
     });
   });
-  return selectorsScoped.join(', ');
+  return selectorsScoped.join(", ");
 }
-
-/**
- * Scopes a collection of selectors for features and subfeatures.
- *
- * @example
- * ```js
- * const scope = '.custom-scope';
- * const selectors = {
- *     color: '.wp-my-block p',
- *     typography: { fontSize: '.wp-my-block caption' },
- * };
- * const result = scopeFeatureSelector( scope, selectors );
- * // result is {
- * //     color: '.custom-scope .wp-my-block p',
- * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },
- * // }
- * ```
- *
- * @param {string} scope     Selector to scope collection of selectors with.
- * @param {Object} selectors Collection of feature selectors e.g.
- *
- * @return {Object|undefined} Scoped collection of feature selectors.
- */
 function scopeFeatureSelectors(scope, selectors) {
   if (!scope || !selectors) {
     return;
   }
   const featureSelectors = {};
   Object.entries(selectors).forEach(([feature, selector]) => {
-    if (typeof selector === 'string') {
+    if (typeof selector === "string") {
       featureSelectors[feature] = scopeSelector(scope, selector);
     }
-    if (typeof selector === 'object') {
+    if (typeof selector === "object") {
       featureSelectors[feature] = {};
-      Object.entries(selector).forEach(([subfeature, subfeatureSelector]) => {
-        featureSelectors[feature][subfeature] = scopeSelector(scope, subfeatureSelector);
-      });
+      Object.entries(selector).forEach(
+        ([subfeature, subfeatureSelector]) => {
+          featureSelectors[feature][subfeature] = scopeSelector(
+            scope,
+            subfeatureSelector
+          );
+        }
+      );
     }
   });
   return featureSelectors;
 }
-
-/**
- * Appends a sub-selector to an existing one.
- *
- * Given the compounded `selector` "h1, h2, h3"
- * and the `toAppend` selector ".some-class" the result will be
- * "h1.some-class, h2.some-class, h3.some-class".
- *
- * @param {string} selector Original selector.
- * @param {string} toAppend Selector to append.
- *
- * @return {string} The new selector.
- */
 function appendToSelector(selector, toAppend) {
-  if (!selector.includes(',')) {
+  if (!selector.includes(",")) {
     return selector + toAppend;
   }
-  const selectors = selector.split(',');
-  const newSelectors = selectors.map(sel => sel + toAppend);
-  return newSelectors.join(',');
+  const selectors = selector.split(",");
+  const newSelectors = selectors.map((sel) => sel + toAppend);
+  return newSelectors.join(",");
 }
-
-/**
- * Compares global style variations according to their styles and settings properties.
- *
- * @example
- * ```js
- * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
- * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
- * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
- * // false
- * ```
- *
- * @param {Object} original  A global styles object.
- * @param {Object} variation A global styles object.
- *
- * @return {boolean} Whether `original` and `variation` match.
- */
 function areGlobalStyleConfigsEqual(original, variation) {
-  if (typeof original !== 'object' || typeof variation !== 'object') {
+  if (typeof original !== "object" || typeof variation !== "object") {
     return original === variation;
   }
-  return (0, _es.default)(original?.styles, variation?.styles) && (0, _es.default)(original?.settings, variation?.settings);
+  return (0, import_es6.default)(original?.styles, variation?.styles) && (0, import_es6.default)(original?.settings, variation?.settings);
 }
-
-/**
- * Generates the selector for a block style variation by creating the
- * appropriate CSS class and adding it to the ancestor portion of the block's
- * selector.
- *
- * For example, take the Button block which has a compound selector:
- * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',
- * the class `.is-style-custom` should be added to the `.wp-block-button`
- * ancestor only.
- *
- * This function will take into account comma separated and complex selectors.
- *
- * @param {string} variation     Name for the variation.
- * @param {string} blockSelector CSS selector for the block.
- *
- * @return {string} CSS selector for the block style variation.
- */
 function getBlockStyleVariationSelector(variation, blockSelector) {
   const variationClass = `.is-style-${variation}`;
   if (!blockSelector) {
@@ -426,82 +383,69 @@ function getBlockStyleVariationSelector(variation, blockSelector) {
   const addVariationClass = (_match, group1, group2) => {
     return group1 + group2 + variationClass;
   };
-  const result = blockSelector.split(',').map(part => part.replace(ancestorRegex, addVariationClass));
-  return result.join(',');
+  const result = blockSelector.split(",").map((part) => part.replace(ancestorRegex, addVariationClass));
+  return result.join(",");
 }
-
-/**
- * Looks up a theme file URI based on a relative path.
- *
- * @param {string}        file          A relative path.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.
- */
 function getResolvedThemeFilePath(file, themeFileURIs) {
   if (!file || !themeFileURIs || !Array.isArray(themeFileURIs)) {
     return file;
   }
-  const uri = themeFileURIs.find(themeFileUri => themeFileUri?.name === file);
+  const uri = themeFileURIs.find(
+    (themeFileUri) => themeFileUri?.name === file
+  );
   if (!uri?.href) {
     return file;
   }
   return uri?.href;
 }
-
-/**
- * Resolves ref values in theme JSON.
- *
- * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
- * @param {Object}        tree      A theme.json object.
- * @return {*} The resolved value or incoming ruleValue.
- */
 function getResolvedRefValue(ruleValue, tree) {
   if (!ruleValue || !tree) {
     return ruleValue;
   }
-
-  /*
-   * Where the rule value is an object with a 'ref' property pointing
-   * to a path, this converts that path into the value at that path.
-   * For example: { "ref": "style.color.background" } => "#fff".
-   */
-  if (typeof ruleValue !== 'string' && ruleValue?.ref) {
-    const resolvedRuleValue = (0, _styleEngine.getCSSValueFromRawStyle)((0, _object.getValueFromObjectPath)(tree, ruleValue.ref));
-
-    /*
-     * Presence of another ref indicates a reference to another dynamic value.
-     * Pointing to another dynamic value is not supported.
-     */
+  if (typeof ruleValue !== "string" && ruleValue?.ref) {
+    const resolvedRuleValue = (0, import_style_engine.getCSSValueFromRawStyle)(
+      (0, import_object.getValueFromObjectPath)(tree, ruleValue.ref)
+    );
     if (resolvedRuleValue?.ref) {
-      return undefined;
+      return void 0;
     }
-    if (resolvedRuleValue === undefined) {
+    if (resolvedRuleValue === void 0) {
       return ruleValue;
     }
     return resolvedRuleValue;
   }
   return ruleValue;
 }
-
-/**
- * Resolves ref and relative path values in theme JSON.
- *
- * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
- * @param {Object}        tree      A theme.json object.
- * @return {*} The resolved value or incoming ruleValue.
- */
 function getResolvedValue(ruleValue, tree) {
   if (!ruleValue || !tree) {
     return ruleValue;
   }
-
-  // Resolve ref values.
   const resolvedValue = getResolvedRefValue(ruleValue, tree);
-
-  // Resolve relative paths.
   if (resolvedValue?.url) {
-    resolvedValue.url = getResolvedThemeFilePath(resolvedValue.url, tree?._links?.['wp:theme-file']);
+    resolvedValue.url = getResolvedThemeFilePath(
+      resolvedValue.url,
+      tree?._links?.["wp:theme-file"]
+    );
   }
   return resolvedValue;
 }
-//# sourceMappingURL=utils.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PRESET_METADATA,
+  ROOT_BLOCK_SELECTOR,
+  ROOT_CSS_PROPERTIES_SELECTOR,
+  STYLE_PATH_TO_CSS_VAR_INFIX,
+  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+  appendToSelector,
+  areGlobalStyleConfigsEqual,
+  getBlockStyleVariationSelector,
+  getPresetVariableFromValue,
+  getResolvedRefValue,
+  getResolvedThemeFilePath,
+  getResolvedValue,
+  getValueFromVariable,
+  scopeFeatureSelectors,
+  scopeSelector,
+  useToolsPanelDropdownMenuProps
+});
+//# sourceMappingURL=utils.js.map