@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/build-module/unit-control/utils.mjs

@@ -1,203 +1,201 @@
 // packages/components/src/unit-control/utils.ts
 import { __, _x } from "@wordpress/i18n";
-import { Platform } from "@wordpress/element";
-var isWeb = Platform.OS === "web";
 var allUnits = {
   px: {
     value: "px",
-    label: isWeb ? "px" : __("Pixels (px)"),
+    label: "px",
     a11yLabel: __("Pixels (px)"),
     step: 1
   },
   "%": {
     value: "%",
-    label: isWeb ? "%" : __("Percentage (%)"),
+    label: "%",
     a11yLabel: __("Percent (%)"),
     step: 0.1
   },
   em: {
     value: "em",
-    label: isWeb ? "em" : __("Relative to parent font size (em)"),
+    label: "em",
     a11yLabel: _x("ems", "Relative to parent font size (em)"),
     step: 0.01
   },
   rem: {
     value: "rem",
-    label: isWeb ? "rem" : __("Relative to root font size (rem)"),
+    label: "rem",
     a11yLabel: _x("rems", "Relative to root font size (rem)"),
     step: 0.01
   },
   vw: {
     value: "vw",
-    label: isWeb ? "vw" : __("Viewport width (vw)"),
+    label: "vw",
     a11yLabel: __("Viewport width (vw)"),
     step: 0.1
   },
   vh: {
     value: "vh",
-    label: isWeb ? "vh" : __("Viewport height (vh)"),
+    label: "vh",
     a11yLabel: __("Viewport height (vh)"),
     step: 0.1
   },
   vmin: {
     value: "vmin",
-    label: isWeb ? "vmin" : __("Viewport smallest dimension (vmin)"),
+    label: "vmin",
     a11yLabel: __("Viewport smallest dimension (vmin)"),
     step: 0.1
   },
   vmax: {
     value: "vmax",
-    label: isWeb ? "vmax" : __("Viewport largest dimension (vmax)"),
+    label: "vmax",
     a11yLabel: __("Viewport largest dimension (vmax)"),
     step: 0.1
   },
   ch: {
     value: "ch",
-    label: isWeb ? "ch" : __("Width of the zero (0) character (ch)"),
+    label: "ch",
     a11yLabel: __("Width of the zero (0) character (ch)"),
     step: 0.01
   },
   ex: {
     value: "ex",
-    label: isWeb ? "ex" : __("x-height of the font (ex)"),
+    label: "ex",
     a11yLabel: __("x-height of the font (ex)"),
     step: 0.01
   },
   cm: {
     value: "cm",
-    label: isWeb ? "cm" : __("Centimeters (cm)"),
+    label: "cm",
     a11yLabel: __("Centimeters (cm)"),
     step: 1e-3
   },
   mm: {
     value: "mm",
-    label: isWeb ? "mm" : __("Millimeters (mm)"),
+    label: "mm",
     a11yLabel: __("Millimeters (mm)"),
     step: 0.1
   },
   in: {
     value: "in",
-    label: isWeb ? "in" : __("Inches (in)"),
+    label: "in",
     a11yLabel: __("Inches (in)"),
     step: 1e-3
   },
   pc: {
     value: "pc",
-    label: isWeb ? "pc" : __("Picas (pc)"),
+    label: "pc",
     a11yLabel: __("Picas (pc)"),
     step: 1
   },
   pt: {
     value: "pt",
-    label: isWeb ? "pt" : __("Points (pt)"),
+    label: "pt",
     a11yLabel: __("Points (pt)"),
     step: 1
   },
   svw: {
     value: "svw",
-    label: isWeb ? "svw" : __("Small viewport width (svw)"),
+    label: "svw",
     a11yLabel: __("Small viewport width (svw)"),
     step: 0.1
   },
   svh: {
     value: "svh",
-    label: isWeb ? "svh" : __("Small viewport height (svh)"),
+    label: "svh",
     a11yLabel: __("Small viewport height (svh)"),
     step: 0.1
   },
   svi: {
     value: "svi",
-    label: isWeb ? "svi" : __("Viewport smallest size in the inline direction (svi)"),
+    label: "svi",
     a11yLabel: __("Small viewport width or height (svi)"),
     step: 0.1
   },
   svb: {
     value: "svb",
-    label: isWeb ? "svb" : __("Viewport smallest size in the block direction (svb)"),
+    label: "svb",
     a11yLabel: __("Small viewport width or height (svb)"),
     step: 0.1
   },
   svmin: {
     value: "svmin",
-    label: isWeb ? "svmin" : __("Small viewport smallest dimension (svmin)"),
+    label: "svmin",
     a11yLabel: __("Small viewport smallest dimension (svmin)"),
     step: 0.1
   },
   lvw: {
     value: "lvw",
-    label: isWeb ? "lvw" : __("Large viewport width (lvw)"),
+    label: "lvw",
     a11yLabel: __("Large viewport width (lvw)"),
     step: 0.1
   },
   lvh: {
     value: "lvh",
-    label: isWeb ? "lvh" : __("Large viewport height (lvh)"),
+    label: "lvh",
     a11yLabel: __("Large viewport height (lvh)"),
     step: 0.1
   },
   lvi: {
     value: "lvi",
-    label: isWeb ? "lvi" : __("Large viewport width or height (lvi)"),
+    label: "lvi",
     a11yLabel: __("Large viewport width or height (lvi)"),
     step: 0.1
   },
   lvb: {
     value: "lvb",
-    label: isWeb ? "lvb" : __("Large viewport width or height (lvb)"),
+    label: "lvb",
     a11yLabel: __("Large viewport width or height (lvb)"),
     step: 0.1
   },
   lvmin: {
     value: "lvmin",
-    label: isWeb ? "lvmin" : __("Large viewport smallest dimension (lvmin)"),
+    label: "lvmin",
     a11yLabel: __("Large viewport smallest dimension (lvmin)"),
     step: 0.1
   },
   dvw: {
     value: "dvw",
-    label: isWeb ? "dvw" : __("Dynamic viewport width (dvw)"),
+    label: "dvw",
     a11yLabel: __("Dynamic viewport width (dvw)"),
     step: 0.1
   },
   dvh: {
     value: "dvh",
-    label: isWeb ? "dvh" : __("Dynamic viewport height (dvh)"),
+    label: "dvh",
     a11yLabel: __("Dynamic viewport height (dvh)"),
     step: 0.1
   },
   dvi: {
     value: "dvi",
-    label: isWeb ? "dvi" : __("Dynamic viewport width or height (dvi)"),
+    label: "dvi",
     a11yLabel: __("Dynamic viewport width or height (dvi)"),
     step: 0.1
   },
   dvb: {
     value: "dvb",
-    label: isWeb ? "dvb" : __("Dynamic viewport width or height (dvb)"),
+    label: "dvb",
     a11yLabel: __("Dynamic viewport width or height (dvb)"),
     step: 0.1
   },
   dvmin: {
     value: "dvmin",
-    label: isWeb ? "dvmin" : __("Dynamic viewport smallest dimension (dvmin)"),
+    label: "dvmin",
     a11yLabel: __("Dynamic viewport smallest dimension (dvmin)"),
     step: 0.1
   },
   dvmax: {
     value: "dvmax",
-    label: isWeb ? "dvmax" : __("Dynamic viewport largest dimension (dvmax)"),
+    label: "dvmax",
     a11yLabel: __("Dynamic viewport largest dimension (dvmax)"),
     step: 0.1
   },
   svmax: {
     value: "svmax",
-    label: isWeb ? "svmax" : __("Small viewport largest dimension (svmax)"),
+    label: "svmax",
     a11yLabel: __("Small viewport largest dimension (svmax)"),
     step: 0.1
   },
   lvmax: {
     value: "lvmax",
-    label: isWeb ? "lvmax" : __("Large viewport largest dimension (lvmax)"),
+    label: "lvmax",
     a11yLabel: __("Large viewport largest dimension (lvmax)"),
     step: 0.1
   }

package/build-module/unit-control/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/unit-control/utils.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nconst isWeb = Platform.OS === 'web';\nconst allUnits = {\n  px: {\n    value: 'px',\n    label: isWeb ? 'px' : __('Pixels (px)'),\n    a11yLabel: __('Pixels (px)'),\n    step: 1\n  },\n  '%': {\n    value: '%',\n    label: isWeb ? '%' : __('Percentage (%)'),\n    a11yLabel: __('Percent (%)'),\n    step: 0.1\n  },\n  em: {\n    value: 'em',\n    label: isWeb ? 'em' : __('Relative to parent font size (em)'),\n    a11yLabel: _x('ems', 'Relative to parent font size (em)'),\n    step: 0.01\n  },\n  rem: {\n    value: 'rem',\n    label: isWeb ? 'rem' : __('Relative to root font size (rem)'),\n    a11yLabel: _x('rems', 'Relative to root font size (rem)'),\n    step: 0.01\n  },\n  vw: {\n    value: 'vw',\n    label: isWeb ? 'vw' : __('Viewport width (vw)'),\n    a11yLabel: __('Viewport width (vw)'),\n    step: 0.1\n  },\n  vh: {\n    value: 'vh',\n    label: isWeb ? 'vh' : __('Viewport height (vh)'),\n    a11yLabel: __('Viewport height (vh)'),\n    step: 0.1\n  },\n  vmin: {\n    value: 'vmin',\n    label: isWeb ? 'vmin' : __('Viewport smallest dimension (vmin)'),\n    a11yLabel: __('Viewport smallest dimension (vmin)'),\n    step: 0.1\n  },\n  vmax: {\n    value: 'vmax',\n    label: isWeb ? 'vmax' : __('Viewport largest dimension (vmax)'),\n    a11yLabel: __('Viewport largest dimension (vmax)'),\n    step: 0.1\n  },\n  ch: {\n    value: 'ch',\n    label: isWeb ? 'ch' : __('Width of the zero (0) character (ch)'),\n    a11yLabel: __('Width of the zero (0) character (ch)'),\n    step: 0.01\n  },\n  ex: {\n    value: 'ex',\n    label: isWeb ? 'ex' : __('x-height of the font (ex)'),\n    a11yLabel: __('x-height of the font (ex)'),\n    step: 0.01\n  },\n  cm: {\n    value: 'cm',\n    label: isWeb ? 'cm' : __('Centimeters (cm)'),\n    a11yLabel: __('Centimeters (cm)'),\n    step: 0.001\n  },\n  mm: {\n    value: 'mm',\n    label: isWeb ? 'mm' : __('Millimeters (mm)'),\n    a11yLabel: __('Millimeters (mm)'),\n    step: 0.1\n  },\n  in: {\n    value: 'in',\n    label: isWeb ? 'in' : __('Inches (in)'),\n    a11yLabel: __('Inches (in)'),\n    step: 0.001\n  },\n  pc: {\n    value: 'pc',\n    label: isWeb ? 'pc' : __('Picas (pc)'),\n    a11yLabel: __('Picas (pc)'),\n    step: 1\n  },\n  pt: {\n    value: 'pt',\n    label: isWeb ? 'pt' : __('Points (pt)'),\n    a11yLabel: __('Points (pt)'),\n    step: 1\n  },\n  svw: {\n    value: 'svw',\n    label: isWeb ? 'svw' : __('Small viewport width (svw)'),\n    a11yLabel: __('Small viewport width (svw)'),\n    step: 0.1\n  },\n  svh: {\n    value: 'svh',\n    label: isWeb ? 'svh' : __('Small viewport height (svh)'),\n    a11yLabel: __('Small viewport height (svh)'),\n    step: 0.1\n  },\n  svi: {\n    value: 'svi',\n    label: isWeb ? 'svi' : __('Viewport smallest size in the inline direction (svi)'),\n    a11yLabel: __('Small viewport width or height (svi)'),\n    step: 0.1\n  },\n  svb: {\n    value: 'svb',\n    label: isWeb ? 'svb' : __('Viewport smallest size in the block direction (svb)'),\n    a11yLabel: __('Small viewport width or height (svb)'),\n    step: 0.1\n  },\n  svmin: {\n    value: 'svmin',\n    label: isWeb ? 'svmin' : __('Small viewport smallest dimension (svmin)'),\n    a11yLabel: __('Small viewport smallest dimension (svmin)'),\n    step: 0.1\n  },\n  lvw: {\n    value: 'lvw',\n    label: isWeb ? 'lvw' : __('Large viewport width (lvw)'),\n    a11yLabel: __('Large viewport width (lvw)'),\n    step: 0.1\n  },\n  lvh: {\n    value: 'lvh',\n    label: isWeb ? 'lvh' : __('Large viewport height (lvh)'),\n    a11yLabel: __('Large viewport height (lvh)'),\n    step: 0.1\n  },\n  lvi: {\n    value: 'lvi',\n    label: isWeb ? 'lvi' : __('Large viewport width or height (lvi)'),\n    a11yLabel: __('Large viewport width or height (lvi)'),\n    step: 0.1\n  },\n  lvb: {\n    value: 'lvb',\n    label: isWeb ? 'lvb' : __('Large viewport width or height (lvb)'),\n    a11yLabel: __('Large viewport width or height (lvb)'),\n    step: 0.1\n  },\n  lvmin: {\n    value: 'lvmin',\n    label: isWeb ? 'lvmin' : __('Large viewport smallest dimension (lvmin)'),\n    a11yLabel: __('Large viewport smallest dimension (lvmin)'),\n    step: 0.1\n  },\n  dvw: {\n    value: 'dvw',\n    label: isWeb ? 'dvw' : __('Dynamic viewport width (dvw)'),\n    a11yLabel: __('Dynamic viewport width (dvw)'),\n    step: 0.1\n  },\n  dvh: {\n    value: 'dvh',\n    label: isWeb ? 'dvh' : __('Dynamic viewport height (dvh)'),\n    a11yLabel: __('Dynamic viewport height (dvh)'),\n    step: 0.1\n  },\n  dvi: {\n    value: 'dvi',\n    label: isWeb ? 'dvi' : __('Dynamic viewport width or height (dvi)'),\n    a11yLabel: __('Dynamic viewport width or height (dvi)'),\n    step: 0.1\n  },\n  dvb: {\n    value: 'dvb',\n    label: isWeb ? 'dvb' : __('Dynamic viewport width or height (dvb)'),\n    a11yLabel: __('Dynamic viewport width or height (dvb)'),\n    step: 0.1\n  },\n  dvmin: {\n    value: 'dvmin',\n    label: isWeb ? 'dvmin' : __('Dynamic viewport smallest dimension (dvmin)'),\n    a11yLabel: __('Dynamic viewport smallest dimension (dvmin)'),\n    step: 0.1\n  },\n  dvmax: {\n    value: 'dvmax',\n    label: isWeb ? 'dvmax' : __('Dynamic viewport largest dimension (dvmax)'),\n    a11yLabel: __('Dynamic viewport largest dimension (dvmax)'),\n    step: 0.1\n  },\n  svmax: {\n    value: 'svmax',\n    label: isWeb ? 'svmax' : __('Small viewport largest dimension (svmax)'),\n    a11yLabel: __('Small viewport largest dimension (svmax)'),\n    step: 0.1\n  },\n  lvmax: {\n    value: 'lvmax',\n    label: isWeb ? 'lvmax' : __('Large viewport largest dimension (lvmax)'),\n    a11yLabel: __('Large viewport largest dimension (lvmax)'),\n    step: 0.1\n  }\n};\n\n/**\n * An array of all available CSS length units.\n */\nexport const ALL_CSS_UNITS = Object.values(allUnits);\n\n/**\n * Units of measurements. `a11yLabel` is used by screenreaders.\n */\nexport const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];\nexport const DEFAULT_UNIT = allUnits.px;\n\n/**\n * Handles legacy value + unit handling.\n * This component use to manage both incoming value and units separately.\n *\n * Moving forward, ideally the value should be a string that contains both\n * the value and unit, example: '10px'\n *\n * @param rawValue     The raw value as a string (may or may not contain the unit)\n * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {\n  const initialValue = fallbackUnit ? `${rawValue ?? ''}${fallbackUnit}` : rawValue;\n  return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);\n}\n\n/**\n * Checks if units are defined.\n *\n * @param units List of units.\n * @return Whether the list actually contains any units.\n */\nexport function hasUnits(units) {\n  // Although the `isArray` check shouldn't be necessary (given the signature of\n  // this typed function), it's better to stay on the side of caution, since\n  // this function may be called from un-typed environments.\n  return Array.isArray(units) && !!units.length;\n}\n\n/**\n * Parses a quantity and unit from a raw string value, given a list of allowed\n * units and otherwise falling back to the default unit.\n *\n * @param rawValue     The raw value as a string (may or may not contain the unit)\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {\n  let trimmedValue;\n  let quantityToReturn;\n  if (typeof rawValue !== 'undefined' || rawValue === null) {\n    trimmedValue = `${rawValue}`.trim();\n    const parsedQuantity = parseFloat(trimmedValue);\n    quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;\n  }\n  const unitMatch = trimmedValue?.match(/[\\d.\\-\\+]*\\s*(.*)/);\n  const matchedUnit = unitMatch?.[1]?.toLowerCase();\n  let unitToReturn;\n  if (hasUnits(allowedUnits)) {\n    const match = allowedUnits.find(item => item.value === matchedUnit);\n    unitToReturn = match?.value;\n  } else {\n    unitToReturn = DEFAULT_UNIT.value;\n  }\n  return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Parses quantity and unit from a raw value. Validates parsed value, using fallback\n * value if invalid.\n *\n * @param rawValue         The next value.\n * @param allowedUnits     Units to derive from.\n * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.\n * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The\n * unit can be `undefined` only if the unit parsed from the raw value could not be matched against\n * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of\n * `allowedUnits` is passed empty.\n */\nexport function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);\n\n  // The parsed value from `parseQuantityAndUnitFromRawValue` should now be\n  // either a real number or undefined. If undefined, use the fallback value.\n  const quantityToReturn = parsedQuantity ?? fallbackQuantity;\n\n  // If no unit is parsed from the raw value, or if the fallback unit is not\n  // defined, use the first value from the list of allowed units as fallback.\n  let unitToReturn = parsedUnit || fallbackUnit;\n  if (!unitToReturn && hasUnits(allowedUnits)) {\n    unitToReturn = allowedUnits[0].value;\n  }\n  return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Takes a unit value and finds the matching accessibility label for the\n * unit abbreviation.\n *\n * @param unit Unit value (example: `px`)\n * @return a11y label for the unit abbreviation\n */\nexport function getAccessibleLabelForUnit(unit) {\n  const match = ALL_CSS_UNITS.find(item => item.value === unit);\n  return match?.a11yLabel ? match?.a11yLabel : match?.value;\n}\n\n/**\n * Filters available units based on values defined a list of allowed unit values.\n *\n * @param allowedUnitValues Collection of allowed unit value strings.\n * @param availableUnits    Collection of available unit objects.\n * @return Filtered units.\n */\nexport function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {\n  // Although the `isArray` check shouldn't be necessary (given the signature of\n  // this typed function), it's better to stay on the side of caution, since\n  // this function may be called from un-typed environments.\n  return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];\n}\n\n/**\n * Custom hook to retrieve and consolidate units setting from add_theme_support().\n * TODO: ideally this hook shouldn't be needed\n * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823\n *\n * @param args                An object containing units, settingPath & defaultUnits.\n * @param args.units          Collection of all potentially available units.\n * @param args.availableUnits Collection of unit value strings for filtering available units.\n * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.\n *\n * @return Filtered list of units, with their default values updated following the `defaultValues`\n * argument's property.\n */\nexport const useCustomUnits = ({\n  units = ALL_CSS_UNITS,\n  availableUnits = [],\n  defaultValues\n}) => {\n  const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);\n  if (!defaultValues) {\n    return customUnitsToReturn;\n  }\n  return customUnitsToReturn.map(unit => {\n    const [defaultValue] = defaultValues[unit.value] ? parseQuantityAndUnitFromRawValue(defaultValues[unit.value]) : [];\n    return {\n      ...unit,\n      default: defaultValue\n    };\n  });\n};\n\n/**\n * Get available units with the unit for the currently selected value\n * prepended if it is not available in the list of units.\n *\n * This is useful to ensure that the current value's unit is always\n * accurately displayed in the UI, even if the intention is to hide\n * the availability of that unit.\n *\n * @param rawValue   Selected value to parse.\n * @param legacyUnit Legacy unit value, if rawValue needs it appended.\n * @param units      List of available units.\n *\n * @return A collection of units containing the unit for the current value.\n */\nexport function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {\n  const unitsToReturn = Array.isArray(units) ? [...units] : [];\n  const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);\n  if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {\n    if (allUnits[currentUnit]) {\n      unitsToReturn.unshift(allUnits[currentUnit]);\n    }\n  }\n  return unitsToReturn;\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nconst allUnits = {\n  px: {\n    value: 'px',\n    label: 'px',\n    a11yLabel: __('Pixels (px)'),\n    step: 1\n  },\n  '%': {\n    value: '%',\n    label: '%',\n    a11yLabel: __('Percent (%)'),\n    step: 0.1\n  },\n  em: {\n    value: 'em',\n    label: 'em',\n    a11yLabel: _x('ems', 'Relative to parent font size (em)'),\n    step: 0.01\n  },\n  rem: {\n    value: 'rem',\n    label: 'rem',\n    a11yLabel: _x('rems', 'Relative to root font size (rem)'),\n    step: 0.01\n  },\n  vw: {\n    value: 'vw',\n    label: 'vw',\n    a11yLabel: __('Viewport width (vw)'),\n    step: 0.1\n  },\n  vh: {\n    value: 'vh',\n    label: 'vh',\n    a11yLabel: __('Viewport height (vh)'),\n    step: 0.1\n  },\n  vmin: {\n    value: 'vmin',\n    label: 'vmin',\n    a11yLabel: __('Viewport smallest dimension (vmin)'),\n    step: 0.1\n  },\n  vmax: {\n    value: 'vmax',\n    label: 'vmax',\n    a11yLabel: __('Viewport largest dimension (vmax)'),\n    step: 0.1\n  },\n  ch: {\n    value: 'ch',\n    label: 'ch',\n    a11yLabel: __('Width of the zero (0) character (ch)'),\n    step: 0.01\n  },\n  ex: {\n    value: 'ex',\n    label: 'ex',\n    a11yLabel: __('x-height of the font (ex)'),\n    step: 0.01\n  },\n  cm: {\n    value: 'cm',\n    label: 'cm',\n    a11yLabel: __('Centimeters (cm)'),\n    step: 0.001\n  },\n  mm: {\n    value: 'mm',\n    label: 'mm',\n    a11yLabel: __('Millimeters (mm)'),\n    step: 0.1\n  },\n  in: {\n    value: 'in',\n    label: 'in',\n    a11yLabel: __('Inches (in)'),\n    step: 0.001\n  },\n  pc: {\n    value: 'pc',\n    label: 'pc',\n    a11yLabel: __('Picas (pc)'),\n    step: 1\n  },\n  pt: {\n    value: 'pt',\n    label: 'pt',\n    a11yLabel: __('Points (pt)'),\n    step: 1\n  },\n  svw: {\n    value: 'svw',\n    label: 'svw',\n    a11yLabel: __('Small viewport width (svw)'),\n    step: 0.1\n  },\n  svh: {\n    value: 'svh',\n    label: 'svh',\n    a11yLabel: __('Small viewport height (svh)'),\n    step: 0.1\n  },\n  svi: {\n    value: 'svi',\n    label: 'svi',\n    a11yLabel: __('Small viewport width or height (svi)'),\n    step: 0.1\n  },\n  svb: {\n    value: 'svb',\n    label: 'svb',\n    a11yLabel: __('Small viewport width or height (svb)'),\n    step: 0.1\n  },\n  svmin: {\n    value: 'svmin',\n    label: 'svmin',\n    a11yLabel: __('Small viewport smallest dimension (svmin)'),\n    step: 0.1\n  },\n  lvw: {\n    value: 'lvw',\n    label: 'lvw',\n    a11yLabel: __('Large viewport width (lvw)'),\n    step: 0.1\n  },\n  lvh: {\n    value: 'lvh',\n    label: 'lvh',\n    a11yLabel: __('Large viewport height (lvh)'),\n    step: 0.1\n  },\n  lvi: {\n    value: 'lvi',\n    label: 'lvi',\n    a11yLabel: __('Large viewport width or height (lvi)'),\n    step: 0.1\n  },\n  lvb: {\n    value: 'lvb',\n    label: 'lvb',\n    a11yLabel: __('Large viewport width or height (lvb)'),\n    step: 0.1\n  },\n  lvmin: {\n    value: 'lvmin',\n    label: 'lvmin',\n    a11yLabel: __('Large viewport smallest dimension (lvmin)'),\n    step: 0.1\n  },\n  dvw: {\n    value: 'dvw',\n    label: 'dvw',\n    a11yLabel: __('Dynamic viewport width (dvw)'),\n    step: 0.1\n  },\n  dvh: {\n    value: 'dvh',\n    label: 'dvh',\n    a11yLabel: __('Dynamic viewport height (dvh)'),\n    step: 0.1\n  },\n  dvi: {\n    value: 'dvi',\n    label: 'dvi',\n    a11yLabel: __('Dynamic viewport width or height (dvi)'),\n    step: 0.1\n  },\n  dvb: {\n    value: 'dvb',\n    label: 'dvb',\n    a11yLabel: __('Dynamic viewport width or height (dvb)'),\n    step: 0.1\n  },\n  dvmin: {\n    value: 'dvmin',\n    label: 'dvmin',\n    a11yLabel: __('Dynamic viewport smallest dimension (dvmin)'),\n    step: 0.1\n  },\n  dvmax: {\n    value: 'dvmax',\n    label: 'dvmax',\n    a11yLabel: __('Dynamic viewport largest dimension (dvmax)'),\n    step: 0.1\n  },\n  svmax: {\n    value: 'svmax',\n    label: 'svmax',\n    a11yLabel: __('Small viewport largest dimension (svmax)'),\n    step: 0.1\n  },\n  lvmax: {\n    value: 'lvmax',\n    label: 'lvmax',\n    a11yLabel: __('Large viewport largest dimension (lvmax)'),\n    step: 0.1\n  }\n};\n\n/**\n * An array of all available CSS length units.\n */\nexport const ALL_CSS_UNITS = Object.values(allUnits);\n\n/**\n * Units of measurements. `a11yLabel` is used by screenreaders.\n */\nexport const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];\nexport const DEFAULT_UNIT = allUnits.px;\n\n/**\n * Handles legacy value + unit handling.\n * This component use to manage both incoming value and units separately.\n *\n * Moving forward, ideally the value should be a string that contains both\n * the value and unit, example: '10px'\n *\n * @param rawValue     The raw value as a string (may or may not contain the unit)\n * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {\n  const initialValue = fallbackUnit ? `${rawValue ?? ''}${fallbackUnit}` : rawValue;\n  return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);\n}\n\n/**\n * Checks if units are defined.\n *\n * @param units List of units.\n * @return Whether the list actually contains any units.\n */\nexport function hasUnits(units) {\n  // Although the `isArray` check shouldn't be necessary (given the signature of\n  // this typed function), it's better to stay on the side of caution, since\n  // this function may be called from un-typed environments.\n  return Array.isArray(units) && !!units.length;\n}\n\n/**\n * Parses a quantity and unit from a raw string value, given a list of allowed\n * units and otherwise falling back to the default unit.\n *\n * @param rawValue     The raw value as a string (may or may not contain the unit)\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {\n  let trimmedValue;\n  let quantityToReturn;\n  if (typeof rawValue !== 'undefined' || rawValue === null) {\n    trimmedValue = `${rawValue}`.trim();\n    const parsedQuantity = parseFloat(trimmedValue);\n    quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;\n  }\n  const unitMatch = trimmedValue?.match(/[\\d.\\-\\+]*\\s*(.*)/);\n  const matchedUnit = unitMatch?.[1]?.toLowerCase();\n  let unitToReturn;\n  if (hasUnits(allowedUnits)) {\n    const match = allowedUnits.find(item => item.value === matchedUnit);\n    unitToReturn = match?.value;\n  } else {\n    unitToReturn = DEFAULT_UNIT.value;\n  }\n  return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Parses quantity and unit from a raw value. Validates parsed value, using fallback\n * value if invalid.\n *\n * @param rawValue         The next value.\n * @param allowedUnits     Units to derive from.\n * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.\n * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The\n * unit can be `undefined` only if the unit parsed from the raw value could not be matched against\n * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of\n * `allowedUnits` is passed empty.\n */\nexport function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);\n\n  // The parsed value from `parseQuantityAndUnitFromRawValue` should now be\n  // either a real number or undefined. If undefined, use the fallback value.\n  const quantityToReturn = parsedQuantity ?? fallbackQuantity;\n\n  // If no unit is parsed from the raw value, or if the fallback unit is not\n  // defined, use the first value from the list of allowed units as fallback.\n  let unitToReturn = parsedUnit || fallbackUnit;\n  if (!unitToReturn && hasUnits(allowedUnits)) {\n    unitToReturn = allowedUnits[0].value;\n  }\n  return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Takes a unit value and finds the matching accessibility label for the\n * unit abbreviation.\n *\n * @param unit Unit value (example: `px`)\n * @return a11y label for the unit abbreviation\n */\nexport function getAccessibleLabelForUnit(unit) {\n  const match = ALL_CSS_UNITS.find(item => item.value === unit);\n  return match?.a11yLabel ? match?.a11yLabel : match?.value;\n}\n\n/**\n * Filters available units based on values defined a list of allowed unit values.\n *\n * @param allowedUnitValues Collection of allowed unit value strings.\n * @param availableUnits    Collection of available unit objects.\n * @return Filtered units.\n */\nexport function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {\n  // Although the `isArray` check shouldn't be necessary (given the signature of\n  // this typed function), it's better to stay on the side of caution, since\n  // this function may be called from un-typed environments.\n  return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];\n}\n\n/**\n * Custom hook to retrieve and consolidate units setting from add_theme_support().\n * TODO: ideally this hook shouldn't be needed\n * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823\n *\n * @param args                An object containing units, settingPath & defaultUnits.\n * @param args.units          Collection of all potentially available units.\n * @param args.availableUnits Collection of unit value strings for filtering available units.\n * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.\n *\n * @return Filtered list of units, with their default values updated following the `defaultValues`\n * argument's property.\n */\nexport const useCustomUnits = ({\n  units = ALL_CSS_UNITS,\n  availableUnits = [],\n  defaultValues\n}) => {\n  const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);\n  if (!defaultValues) {\n    return customUnitsToReturn;\n  }\n  return customUnitsToReturn.map(unit => {\n    const [defaultValue] = defaultValues[unit.value] ? parseQuantityAndUnitFromRawValue(defaultValues[unit.value]) : [];\n    return {\n      ...unit,\n      default: defaultValue\n    };\n  });\n};\n\n/**\n * Get available units with the unit for the currently selected value\n * prepended if it is not available in the list of units.\n *\n * This is useful to ensure that the current value's unit is always\n * accurately displayed in the UI, even if the intention is to hide\n * the availability of that unit.\n *\n * @param rawValue   Selected value to parse.\n * @param legacyUnit Legacy unit value, if rawValue needs it appended.\n * @param units      List of available units.\n *\n * @return A collection of units containing the unit for the current value.\n */\nexport function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {\n  const unitsToReturn = Array.isArray(units) ? [...units] : [];\n  const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);\n  if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {\n    if (allUnits[currentUnit]) {\n      unitsToReturn.unshift(allUnits[currentUnit]);\n    }\n  }\n  return unitsToReturn;\n}"],
+  "mappings": "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",
   "names": []
 }

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

@@ -25,21 +25,21 @@ var THEME = {
   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))`,
   /** Used when placing text on the accent color. */
-  accentInverted: `var(--wp-components-color-accent-inverted, ${white})`,
-  background: `var(--wp-components-color-background, ${white})`,
-  foreground: `var(--wp-components-color-foreground, ${GRAY[900]})`,
+  accentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,
+  background: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,
+  foreground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
   /** Used when placing text on the foreground color. */
-  foregroundInverted: `var(--wp-components-color-foreground-inverted, ${white})`,
+  foregroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,
   gray: {
     /** @deprecated Use `COLORS.theme.foreground` instead. */
-    900: `var(--wp-components-color-foreground, ${GRAY[900]})`,
-    800: `var(--wp-components-color-gray-800, ${GRAY[800]})`,
-    700: `var(--wp-components-color-gray-700, ${GRAY[700]})`,
-    600: `var(--wp-components-color-gray-600, ${GRAY[600]})`,
-    400: `var(--wp-components-color-gray-400, ${GRAY[400]})`,
-    300: `var(--wp-components-color-gray-300, ${GRAY[300]})`,
-    200: `var(--wp-components-color-gray-200, ${GRAY[200]})`,
-    100: `var(--wp-components-color-gray-100, ${GRAY[100]})`
+    900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+    800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+    700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,
+    600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+    400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+    300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+    200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+    100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`
   }
 };
 var UI = {

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

@@ -1,7 +1,7 @@
 {
   "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,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;",
+  "sourcesContent": ["/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of\n   theme-variables.scss and the package's single mapping to the design system.\n   The rule guards against bare `--wpds-*` references, which the build can't\n   inject fallbacks into for Emotion/JS files; here every reference carries an\n   explicit fallback, so that concern doesn't apply.\n\n   IMPORTANT: because this file's source contains `--wpds-` text, the\n   design-system fallback build plugin claims it (it matches any file whose\n   source includes `--wpds-`, comments included) and, in doing so, displaces\n   the Emotion transform for this file. That is harmless ONLY because this file\n   holds plain value constants and no Emotion `css`/styled component selectors.\n   Do not add any here: a co-located component selector would silently fail to\n   compile and break the build, with no lint signal (see #79245). Keep this\n   file selector-free — define styles elsewhere and consume these constants. */\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Should match packages/components/src/utils/theme-variables.scss.\n//\n// Mirrors the Sass structure: each non-accent value resolves through a design\n// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values\n// match what the design-system fallback plugin injects into the Sass version,\n// so JS behaves consistently with the Sass variables. Keep both the token\n// references and the fallbacks in sync with the Sass version.\nconst THEME = {\n\taccent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n\taccentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n\taccentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n\t/** Used when placing text on the accent color. */\n\taccentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,\n\n\tbackground: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,\n\n\tforeground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t/** Used when placing text on the foreground color. */\n\tforegroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\n\tgray: {\n\t\t/** @deprecated Use `COLORS.theme.foreground` instead. */\n\t\t900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,\n\t\t600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\t},\n};\n\n/* eslint-enable @wordpress/no-ds-tokens */\n\nconst UI = {\n\tbackground: THEME.background,\n\tbackgroundDisabled: THEME.gray[ 100 ],\n\tborder: THEME.gray[ 600 ],\n\tborderHover: THEME.gray[ 700 ],\n\tborderFocus: THEME.accent,\n\tborderDisabled: THEME.gray[ 400 ],\n\ttextDisabled: THEME.gray[ 600 ],\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,\n\tlightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t *\n\t * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n\t */\n\tgray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n\t/**\n\t * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n\t */\n\twhite,\n\talert: ALERT,\n\t/**\n\t * Theme-ready variables with fallbacks.\n\t *\n\t * Prefer semantic aliases in `COLORS.ui` when applicable.\n\t */\n\ttheme: THEME,\n\t/**\n\t * Semantic aliases (prefer these over raw variables when applicable).\n\t */\n\tui: UI,\n} );\n\nexport default COLORS;\n"],
+  "mappings": ";AAeA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACZ,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;AACN;AAGA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACR;AASA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB;AAAA,EAEhB,YAAY;AAAA,EAEZ,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA,EAEpB,MAAM;AAAA;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACN;AACD;AAIA,IAAM,KAAK;AAAA,EACV,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAM,GAAI;AAAA,EACpC,QAAQ,MAAM,KAAM,GAAI;AAAA,EACxB,aAAa,MAAM,KAAM,GAAI;AAAA,EAC7B,aAAa,MAAM;AAAA,EACnB,gBAAgB,MAAM,KAAM,GAAI;AAAA,EAChC,cAAc,MAAM,KAAM,GAAI;AAAA;AAAA,EAG9B,qBAAqB,sBAAuB,MAAM,UAAW;AAAA,EAC7D,sBAAsB,sBAAuB,MAAM,UAAW;AAC/D;AAEO,IAAM,SAAS,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAIN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACL,CAAE;AAEF,IAAO,wBAAQ;",
   "names": []
 }

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

@@ -60,8 +60,8 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   surfaceBackgroundTertiaryColor: COLORS.white,
   surfaceColor: COLORS.white,
   // Modal exit animation: `use-modal-exit-animation` parses this for the
-  // `animationend` timeout race; keep the numeric duration equal to
-  // `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
+  // `animationend` timeout race; keep the numeric duration equal to the WPDS
+  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.
   transitionDuration: "200ms",
   transitionDurationFast: "160ms",
   transitionDurationFaster: "120ms",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/config-values.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\n\nconst CONTROL_PROPS = {\n\t// These values should be shared with TextControl.\n\tcontrolPaddingX: 12,\n\tcontrolPaddingXSmall: 8,\n\tcontrolPaddingXLarge: 12 * 1.3334, // TODO: Deprecate\n\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `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\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusXSmall: '1px',\n\tradiusSmall: '2px',\n\tradiusMedium: '4px',\n\tradiusLarge: '8px',\n\tradiusFull: '9999px',\n\tradiusRound: '50%',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.4',\n\tfontWeight: 'normal',\n\tfontWeightMedium: '499', // ensures fallback to 400 (instead of 600)\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\televationXSmall: `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\televationSmall: `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\televationMedium: `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\televationLarge: `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\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\t// Modal exit animation: `use-modal-exit-animation` parses this for the\n\t// `animationend` timeout race; keep the numeric duration equal to\n\t// `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AAEvB,IAAM,iBAAiB;AAEvB,IAAM,gBAAgB;AAAA;AAAA,EAErB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAE3B,uBAAuB,eAAgB,OAAO,MAAM,MAAO;AAAA,EAC3D,eAAe;AAAA,EACf,qBAAqB,SAAU,cAAe;AAAA,EAC9C,oBAAoB,SAAU,cAAe;AAAA,EAC7C,oBAAoB,SAAU,cAAe;AAAA,EAC7C,qBAAqB,SAAU,cAAe;AAC/C;AAIA,IAAO,wBAAQ,OAAO,OAAQ,CAAC,GAAG,eAAe;AAAA,EAChD,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,EAClB,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;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AAClC,CAAE;",
+  "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  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\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;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
   "names": []
 }

package/build-module/utils/dropdown-motion.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/dropdown-motion.ts"],
-  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css\n// Values should stay in sync with --wpds-motion-* design tokens.\n\nexport const DROPDOWN_MOTION = Object.freeze( {\n\tSLIDE_DISTANCE: 4,\n\tSLIDE_DURATION: 200,\n\tSLIDE_EASING: {\n\t\tfunction: 'cubic-bezier',\n\t\targs: [ 0.25, 0, 0, 1 ] as const,\n\t},\n\tFADE_DURATION: 100,\n\tFADE_EASING: {\n\t\tfunction: 'linear',\n\t},\n} );\n\nconst convertEasingToString = ( easing: {\n\tfunction: string;\n\targs?: readonly [ number, number, number, number ];\n} ) => {\n\tif ( easing.args?.length ) {\n\t\treturn `${ easing.function }(${ easing.args.join( ',' ) })`;\n\t}\n\treturn easing.function;\n};\n\n// Note: --wpds-* tokens can't be used here directly because the build-time\n// fallback injection is not compatible with Emotion. This file is consumed\n// by Menu's Emotion styles.\nexport const DROPDOWN_MOTION_CSS = Object.freeze( {\n\tSLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,\n\tSLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,\n\tSLIDE_EASING: convertEasingToString( DROPDOWN_MOTION.SLIDE_EASING ),\n\tFADE_DURATION: `${ DROPDOWN_MOTION.FADE_DURATION }ms`,\n\tFADE_EASING: convertEasingToString( DROPDOWN_MOTION.FADE_EASING ),\n} );\n"],
-  "mappings": ";AAIO,IAAM,kBAAkB,OAAO,OAAQ;AAAA,EAC7C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACb,UAAU;AAAA,IACV,MAAM,CAAE,MAAM,GAAG,GAAG,CAAE;AAAA,EACvB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACZ,UAAU;AAAA,EACX;AACD,CAAE;AAEF,IAAM,wBAAwB,CAAE,WAGzB;AACN,MAAK,OAAO,MAAM,QAAS;AAC1B,WAAO,GAAI,OAAO,QAAS,IAAK,OAAO,KAAK,KAAM,GAAI,CAAE;AAAA,EACzD;AACA,SAAO,OAAO;AACf;AAKO,IAAM,sBAAsB,OAAO,OAAQ;AAAA,EACjD,gBAAgB,GAAI,gBAAgB,cAAe;AAAA,EACnD,gBAAgB,GAAI,gBAAgB,cAAe;AAAA,EACnD,cAAc,sBAAuB,gBAAgB,YAAa;AAAA,EAClE,eAAe,GAAI,gBAAgB,aAAc;AAAA,EACjD,aAAa,sBAAuB,gBAAgB,WAAY;AACjE,CAAE;",
+  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css\n// Values should stay in sync with the WPDS motion design tokens.\n\nexport const DROPDOWN_MOTION = Object.freeze({\n  SLIDE_DISTANCE: 4,\n  SLIDE_DURATION: 200,\n  SLIDE_EASING: {\n    function: 'cubic-bezier',\n    args: [0.25, 0, 0, 1]\n  },\n  FADE_DURATION: 100,\n  FADE_EASING: {\n    function: 'linear'\n  }\n});\nconst convertEasingToString = easing => {\n  if (easing.args?.length) {\n    return `${easing.function}(${easing.args.join(',')})`;\n  }\n  return easing.function;\n};\n\n// Note: WPDS design tokens can't be referenced here directly. The build-time\n// fallback injection is incompatible with Emotion, and even mentioning a token's\n// full CSS custom property name in this file makes the esbuild fallback plugin\n// claim it and break the Emotion transform. This file is consumed by Menu's\n// Emotion styles.\nexport const DROPDOWN_MOTION_CSS = Object.freeze({\n  SLIDE_DISTANCE: `${DROPDOWN_MOTION.SLIDE_DISTANCE}px`,\n  SLIDE_DURATION: `${DROPDOWN_MOTION.SLIDE_DURATION}ms`,\n  SLIDE_EASING: convertEasingToString(DROPDOWN_MOTION.SLIDE_EASING),\n  FADE_DURATION: `${DROPDOWN_MOTION.FADE_DURATION}ms`,\n  FADE_EASING: convertEasingToString(DROPDOWN_MOTION.FADE_EASING)\n});"],
+  "mappings": ";AAIO,IAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACX,UAAU;AAAA,EACZ;AACF,CAAC;AACD,IAAM,wBAAwB,YAAU;AACtC,MAAI,OAAO,MAAM,QAAQ;AACvB,WAAO,GAAG,OAAO,QAAQ,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC;AAAA,EACpD;AACA,SAAO,OAAO;AAChB;AAOO,IAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,cAAc,sBAAsB,gBAAgB,YAAY;AAAA,EAChE,eAAe,GAAG,gBAAgB,aAAa;AAAA,EAC/C,aAAa,sBAAsB,gBAAgB,WAAW;AAChE,CAAC;",
   "names": []
 }

package/build-module/utils/strings.mjs.map

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