@wordpress/components 39.0.0 → 40.1.0

package/build-module/form-token-field/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/index.tsx", "../../../style-runtime/src/index.ts", "../../src/form-token-field/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { isShallowEqual } from '@wordpress/is-shallow-equal';\nimport deprecated from '@wordpress/deprecated';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport Token from './token';\nimport TokenInput from './token-input';\nimport SuggestionsList from './suggestions-list';\nimport { Flex, FlexItem } from '../flex';\nimport styles from './style.module.scss';\nimport { StyledHelp, StyledLabel } from '../base-control/styles/base-control-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst identity = value => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.\n */\nexport function FormTokenField(props) {\n  const {\n    autoCapitalize,\n    autoComplete,\n    maxLength,\n    placeholder,\n    label = __('Add item'),\n    className,\n    suggestions = [],\n    maxSuggestions = 100,\n    value = [],\n    displayTransform = identity,\n    saveTransform = token => token.trim(),\n    onChange = () => {},\n    onInputChange = () => {},\n    onFocus = undefined,\n    isBorderless = false,\n    disabled = false,\n    tokenizeOnSpace = false,\n    messages = {\n      added: __('Item added.'),\n      removed: __('Item removed.'),\n      remove: __('Remove item'),\n      __experimentalInvalid: __('Invalid item')\n    },\n    __experimentalRenderItem,\n    __experimentalExpandOnFocus = false,\n    __experimentalValidateInput = () => true,\n    __experimentalShowHowTo,\n    __experimentalAutoSelectFirstMatch = false,\n    tokenizeOnBlur = false,\n    help\n  } = props;\n  const defaultHelp = tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.');\n  let computedHelp = help !== undefined ? help : defaultHelp;\n  if (typeof __experimentalShowHowTo === 'boolean') {\n    deprecated('`__experimentalShowHowTo` prop in wp.components.FormTokenField', {\n      since: '7.1',\n      alternative: '`help` prop',\n      hint: 'The `help` prop now defaults to the previous how-to text. Pass an empty string to hide it.'\n    });\n    if (__experimentalShowHowTo === false && help === undefined) {\n      computedHelp = '';\n    }\n  }\n  const instanceId = useInstanceId(FormTokenField);\n\n  // We reset to these initial values again in the onBlur\n  const [incompleteTokenValue, setIncompleteTokenValue] = useState('');\n  const [inputOffsetFromEnd, setInputOffsetFromEnd] = useState(0);\n  const [isActive, setIsActive] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);\n  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = useState(false);\n  const prevSuggestions = usePrevious(suggestions);\n  const prevValue = usePrevious(value);\n  const input = useRef(null);\n  const tokensAndInput = useRef(null);\n  const debouncedSpeak = useDebounce(speak, 500);\n  useEffect(() => {\n    // Make sure to focus the input when the isActive state is true.\n    if (isActive && !hasFocus()) {\n      focus();\n    }\n  }, [isActive]);\n  useEffect(() => {\n    const suggestionsDidUpdate = !isShallowEqual(suggestions, prevSuggestions || []);\n    if (suggestionsDidUpdate || value !== prevValue) {\n      updateSuggestions(suggestionsDidUpdate);\n    }\n\n    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n  }, [suggestions, prevSuggestions, value, prevValue]);\n  useEffect(() => {\n    updateSuggestions();\n  }, [incompleteTokenValue]);\n  useEffect(() => {\n    updateSuggestions();\n  }, [__experimentalAutoSelectFirstMatch]);\n  if (disabled && isActive) {\n    setIsActive(false);\n    setIncompleteTokenValue('');\n  }\n  function focus() {\n    input.current?.focus();\n  }\n  function hasFocus() {\n    return input.current === input.current?.ownerDocument.activeElement;\n  }\n  function onFocusHandler(event) {\n    // If focus is on the input or on the container, set the isActive state to true.\n    if (hasFocus() || event.target === tokensAndInput.current) {\n      setIsActive(true);\n      setIsExpanded(__experimentalExpandOnFocus || isExpanded);\n    } else {\n      /*\n       * Otherwise, focus is on one of the token \"remove\" buttons and we\n       * set the isActive state to false to prevent the input to be\n       * re-focused, see componentDidUpdate().\n       */\n      setIsActive(false);\n    }\n    if ('function' === typeof onFocus) {\n      onFocus(event);\n    }\n  }\n  function onBlur(event) {\n    if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {\n      setIsActive(false);\n      if (tokenizeOnBlur && inputHasValidValue()) {\n        addNewToken(incompleteTokenValue);\n      }\n    } else {\n      // Reset to initial state\n      setIncompleteTokenValue('');\n      setInputOffsetFromEnd(0);\n      setIsActive(false);\n      if (__experimentalExpandOnFocus) {\n        // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when\n        // the user clicks on it (`tokensAndInput` will be the element that caused the blur).\n        const hasFocusWithin = event.relatedTarget === tokensAndInput.current;\n        setIsExpanded(hasFocusWithin);\n      } else {\n        // Else collapse the suggestion list. This will result in the suggestion list closing\n        // after a suggestion has been submitted since that causes a blur.\n        setIsExpanded(false);\n      }\n      setSelectedSuggestionIndex(-1);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function onKeyDown(event) {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'Backspace':\n        preventDefault = handleDeleteKey(deleteTokenBeforeInput);\n        break;\n      case 'Enter':\n        preventDefault = addCurrentToken();\n        break;\n      case 'ArrowLeft':\n        preventDefault = handleLeftArrowKey();\n        break;\n      case 'ArrowUp':\n        preventDefault = handleUpArrowKey();\n        break;\n      case 'ArrowRight':\n        preventDefault = handleRightArrowKey();\n        break;\n      case 'ArrowDown':\n        preventDefault = handleDownArrowKey();\n        break;\n      case 'Delete':\n        preventDefault = handleDeleteKey(deleteTokenAfterInput);\n        break;\n      case 'Space':\n        if (tokenizeOnSpace) {\n          preventDefault = addCurrentToken({\n            preventDefaultOnFailedValidation: false\n          });\n        }\n        break;\n      case 'Escape':\n        preventDefault = handleEscapeKey(event);\n        break;\n      case 'Tab':\n        preventDefault = handleTabKey(event);\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  }\n  function onKeyPress(event) {\n    let preventDefault = false;\n    switch (event.key) {\n      case ',':\n        preventDefault = handleCommaKey();\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  }\n  function onContainerTouched(event) {\n    // Prevent clicking/touching the tokensAndInput container from blurring\n    // the input and adding the current token.\n    if (event.target === tokensAndInput.current && isActive) {\n      event.preventDefault();\n    }\n  }\n  function onTokenClickRemove(event) {\n    deleteToken(event.value);\n    focus();\n  }\n  function onSuggestionHovered(suggestion) {\n    const index = getMatchingSuggestions().indexOf(suggestion);\n    if (index >= 0) {\n      setSelectedSuggestionIndex(index);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function onSuggestionSelected(suggestion) {\n    addNewToken(suggestion);\n  }\n  function onInputChangeHandler(event) {\n    const text = event.value;\n    const separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n    const items = text.split(separator);\n    const tokenValue = items[items.length - 1] || '';\n    if (items.length > 1) {\n      const tokensToProcess = items.slice(0, -1);\n\n      // Pre-check: would any segment be rejected by\n      // `__experimentalValidateInput`? Empties and duplicates of the\n      // current selection are intentional skips, not failures.\n      const willFailValidation = segment => {\n        const transformed = saveTransform(segment);\n        return !!transformed && !valueContainsToken(transformed) && !__experimentalValidateInput(transformed);\n      };\n      const hasFailures = tokensToProcess.some(willFailValidation);\n\n      // When there are failures, also commit the trailing in-progress\n      // segment so the user is left with only the items that need\n      // fixing, instead of mixing the trailing segment with the failed\n      // ones (which would block tokenization on Enter or comma).\n      const addedTokens = addNewTokens(hasFailures ? items : tokensToProcess);\n      if (hasFailures) {\n        // Derive rejected segments from `addedTokens` so this stays\n        // in sync with `addNewTokens`'s filter chain.\n        const rejected = items.filter(token => {\n          const transformed = saveTransform(token);\n          if (!transformed) {\n            return false;\n          }\n          if (addedTokens.has(transformed)) {\n            return false;\n          }\n          if (valueContainsToken(transformed)) {\n            return false;\n          }\n          return !__experimentalValidateInput(transformed);\n        });\n\n        // Reuse the separator the user actually used (the last one\n        // in `text`) so we don't rewrite their input: comma-separated\n        // paste under `tokenizeOnSpace` stays comma-separated, and\n        // typed space under `tokenizeOnSpace` stays a space. Falls\n        // back to the mode-appropriate separator only when no\n        // separator characters are present in `text`.\n        const usedSeparators = text.match(/[ ,\\t]/g);\n        const separatorChar = usedSeparators?.[usedSeparators.length - 1] ?? (tokenizeOnSpace ? ' ' : ',');\n        // Preserve a trailing separator when the input ended with\n        // one, so the user can keep typing past a failed-validation\n        // space without their separator disappearing.\n        const trailing = tokenValue === '' ? separatorChar : '';\n        const remaining = rejected.join(separatorChar) + trailing;\n        setIncompleteTokenValue(remaining);\n        onInputChange(remaining);\n        return;\n      }\n    }\n    setIncompleteTokenValue(tokenValue);\n    onInputChange(tokenValue);\n  }\n  function handleDeleteKey(_deleteToken) {\n    let preventDefault = false;\n    if (hasFocus() && isInputEmpty()) {\n      _deleteToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleLeftArrowKey() {\n    let preventDefault = false;\n    if (isInputEmpty()) {\n      moveInputBeforePreviousToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleRightArrowKey() {\n    let preventDefault = false;\n    if (isInputEmpty()) {\n      moveInputAfterNextToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleUpArrowKey() {\n    setSelectedSuggestionIndex(index => {\n      return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;\n    });\n    setSelectedSuggestionScroll(true);\n    return true; // PreventDefault.\n  }\n  function handleDownArrowKey() {\n    setSelectedSuggestionIndex(index => {\n      return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;\n    });\n    setSelectedSuggestionScroll(true);\n    return true; // PreventDefault.\n  }\n  function collapseSuggestionsList(event) {\n    if (event.target instanceof HTMLInputElement) {\n      setIncompleteTokenValue(event.target.value);\n      setIsExpanded(false);\n      setSelectedSuggestionIndex(-1);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function handleEscapeKey(event) {\n    collapseSuggestionsList(event);\n    return true; // PreventDefault.\n  }\n  function handleTabKey(event) {\n    collapseSuggestionsList(event);\n    return false; // Do not prevent the default behavior.\n  }\n  function handleCommaKey() {\n    if (inputHasValidValue()) {\n      addNewToken(incompleteTokenValue);\n    }\n\n    // Comma is always a separator (typed in onKeyPress, never as input).\n    // Pasted commas go through onInputChangeHandler, which validates.\n    return true;\n  }\n  function moveInputToIndex(index) {\n    setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);\n  }\n  function moveInputBeforePreviousToken() {\n    setInputOffsetFromEnd(prevInputOffsetFromEnd => {\n      return Math.min(prevInputOffsetFromEnd + 1, value.length);\n    });\n  }\n  function moveInputAfterNextToken() {\n    setInputOffsetFromEnd(prevInputOffsetFromEnd => {\n      return Math.max(prevInputOffsetFromEnd - 1, 0);\n    });\n  }\n  function deleteTokenBeforeInput() {\n    const index = getIndexOfInput() - 1;\n    if (index > -1) {\n      deleteToken(value[index]);\n    }\n  }\n  function deleteTokenAfterInput() {\n    const index = getIndexOfInput();\n    if (index < value.length) {\n      deleteToken(value[index]);\n      // Update input offset since it's the offset from the last token.\n      moveInputToIndex(index);\n    }\n  }\n  function addCurrentToken({\n    preventDefaultOnFailedValidation = true\n  } = {}) {\n    let preventDefault = false;\n    const selectedSuggestion = getSelectedSuggestion();\n    if (selectedSuggestion) {\n      addNewToken(selectedSuggestion);\n      preventDefault = true;\n    } else if (inputHasValidValue()) {\n      const passedValidation = addNewToken(incompleteTokenValue);\n      preventDefault = passedValidation || preventDefaultOnFailedValidation;\n    }\n    return preventDefault;\n  }\n  function addNewTokens(tokens) {\n    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)).filter(token => __experimentalValidateInput(token)))];\n    if (tokensToAdd.length > 0) {\n      const newValue = [...value];\n      newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);\n      onChange(newValue);\n    }\n    return new Set(tokensToAdd);\n  }\n\n  /**\n   * Validates and adds `token`. Returns `true` if validation passed,\n   * `false` if it was rejected by `__experimentalValidateInput`. A `true`\n   * return does not guarantee the token was added: `addNewTokens` may\n   * still drop it as a duplicate or after `saveTransform` returns empty.\n   */\n  function addNewToken(token) {\n    if (!__experimentalValidateInput(token)) {\n      speak(messages.__experimentalInvalid, 'assertive');\n      return false;\n    }\n    addNewTokens([token]);\n    speak(messages.added, 'assertive');\n    setIncompleteTokenValue('');\n    setSelectedSuggestionIndex(-1);\n    setSelectedSuggestionScroll(false);\n    setIsExpanded(!__experimentalExpandOnFocus);\n    if (isActive && !tokenizeOnBlur) {\n      focus();\n    }\n    return true;\n  }\n  function deleteToken(token) {\n    const newTokens = value.filter(item => {\n      return getTokenValue(item) !== getTokenValue(token);\n    });\n    onChange(newTokens);\n    speak(messages.removed, 'assertive');\n  }\n  function getTokenValue(token) {\n    if ('object' === typeof token) {\n      return token.value;\n    }\n    return token;\n  }\n  function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) {\n    let match = _saveTransform(searchValue);\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const normalizedValue = _value.map(item => {\n      if (typeof item === 'string') {\n        return item;\n      }\n      return item.value;\n    });\n    if (match.length === 0) {\n      _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));\n    } else {\n      match = match.normalize('NFKC').toLocaleLowerCase();\n      _suggestions.forEach(suggestion => {\n        const index = suggestion.normalize('NFKC').toLocaleLowerCase().indexOf(match);\n        if (normalizedValue.indexOf(suggestion) === -1) {\n          if (index === 0) {\n            startsWithMatch.push(suggestion);\n          } else if (index > 0) {\n            containsMatch.push(suggestion);\n          }\n        }\n      });\n      _suggestions = startsWithMatch.concat(containsMatch);\n    }\n    return _suggestions.slice(0, _maxSuggestions);\n  }\n  function getSelectedSuggestion() {\n    if (selectedSuggestionIndex !== -1) {\n      return getMatchingSuggestions()[selectedSuggestionIndex];\n    }\n    return undefined;\n  }\n  function valueContainsToken(token) {\n    return value.some(item => {\n      return getTokenValue(token) === getTokenValue(item);\n    });\n  }\n  function getIndexOfInput() {\n    return value.length - inputOffsetFromEnd;\n  }\n  function isInputEmpty() {\n    return incompleteTokenValue.length === 0;\n  }\n  function inputHasValidValue() {\n    return saveTransform(incompleteTokenValue).length > 0;\n  }\n  function updateSuggestions(resetSelectedSuggestion = true) {\n    const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n    const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;\n    setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);\n    if (resetSelectedSuggestion) {\n      if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {\n        setSelectedSuggestionIndex(0);\n        setSelectedSuggestionScroll(true);\n      } else {\n        setSelectedSuggestionIndex(-1);\n        setSelectedSuggestionScroll(false);\n      }\n    }\n    if (inputHasMinimumChars) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      debouncedSpeak(message, 'assertive');\n    }\n  }\n  function renderTokensAndInput() {\n    const components = value.map(renderToken);\n    components.splice(getIndexOfInput(), 0, renderInput());\n    return components;\n  }\n  function renderToken(token, index, tokens) {\n    const _value = getTokenValue(token);\n    const status = typeof token !== 'string' ? token.status : undefined;\n    const termPosition = index + 1;\n    const termsCount = tokens.length;\n    return /*#__PURE__*/_jsx(FlexItem, {\n      children: /*#__PURE__*/_jsx(Token, {\n        value: _value,\n        status: status,\n        title: typeof token !== 'string' ? token.title : undefined,\n        displayTransform: displayTransform,\n        onClickRemove: onTokenClickRemove,\n        isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless,\n        onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined,\n        onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined,\n        disabled: 'error' !== status && disabled,\n        messages: messages,\n        termsCount: termsCount,\n        termPosition: termPosition\n      })\n    }, 'token-' + _value);\n  }\n  function renderInput() {\n    const describedById = computedHelp ? `components-form-token-input-${instanceId}__help` : undefined;\n    const inputProps = {\n      instanceId,\n      autoCapitalize,\n      autoComplete,\n      placeholder: value.length === 0 ? placeholder : '',\n      disabled,\n      value: incompleteTokenValue,\n      onBlur,\n      isExpanded,\n      selectedSuggestionIndex,\n      'aria-describedby': describedById\n    };\n    return /*#__PURE__*/_jsx(TokenInput, {\n      ...inputProps,\n      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,\n      ref: input\n    }, \"input\");\n  }\n  const classes = clsx(className, 'components-form-token-field__input-container', {\n    'is-active': isActive,\n    'is-disabled': disabled\n  });\n  let tokenFieldProps = {\n    className: 'components-form-token-field',\n    tabIndex: -1\n  };\n  const matchingSuggestions = getMatchingSuggestions();\n  if (!disabled) {\n    tokenFieldProps = Object.assign({}, tokenFieldProps, {\n      onKeyDown: withIgnoreIMEEvents(onKeyDown),\n      onKeyPress,\n      onFocus: onFocusHandler\n    });\n  }\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ...tokenFieldProps,\n    children: [label && /*#__PURE__*/_jsx(StyledLabel, {\n      htmlFor: `components-form-token-input-${instanceId}`,\n      className: \"components-form-token-field__label\",\n      children: label\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: tokensAndInput,\n      className: classes,\n      tabIndex: -1,\n      onMouseDown: onContainerTouched,\n      onTouchStart: onContainerTouched,\n      children: [/*#__PURE__*/_jsx(Flex, {\n        className: styles['tokens-and-input'],\n        justify: \"flex-start\",\n        align: \"center\",\n        gap: 1,\n        wrap: true,\n        children: renderTokensAndInput()\n      }), isExpanded && /*#__PURE__*/_jsx(SuggestionsList, {\n        instanceId: instanceId,\n        match: saveTransform(incompleteTokenValue),\n        displayTransform: displayTransform,\n        suggestions: matchingSuggestions,\n        selectedIndex: selectedSuggestionIndex,\n        scrollIntoView: selectedSuggestionScroll,\n        onHover: onSuggestionHovered,\n        onSelect: onSuggestionSelected,\n        __experimentalRenderItem: __experimentalRenderItem\n      })]\n    }), computedHelp && /*#__PURE__*/_jsx(StyledHelp, {\n      id: `components-form-token-input-${instanceId}__help`,\n      className: \"components-form-token-field__help\",\n      children: computedHelp\n    })]\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default FormTokenField;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"f9ae5dc19e\", \".df878b202c3b3cb7__tokens-and-input{box-sizing:border-box;padding:7px}.df878b202c3b3cb7__tokens-and-input *,.df878b202c3b3cb7__tokens-and-input :after,.df878b202c3b3cb7__tokens-and-input :before{box-sizing:inherit}\");\n}\nexport default {\"tokens-and-input\":\"df878b202c3b3cb7__tokens-and-input\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { isShallowEqual } from '@wordpress/is-shallow-equal';\nimport deprecated from '@wordpress/deprecated';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport Token from './token';\nimport TokenInput from './token-input';\nimport SuggestionsList from './suggestions-list';\nimport { Flex, FlexItem } from '../flex';\nimport styles from './style.module.scss';\nimport { StyledHelp, StyledLabel } from '../base-control/styles/base-control-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst identity = value => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.\n */\nexport function FormTokenField(props) {\n  const {\n    autoCapitalize,\n    autoComplete,\n    maxLength,\n    placeholder,\n    label = __('Add item'),\n    className,\n    suggestions = [],\n    maxSuggestions = 100,\n    value = [],\n    displayTransform = identity,\n    saveTransform = token => token.trim(),\n    onChange = () => {},\n    onInputChange = () => {},\n    onFocus = undefined,\n    isBorderless = false,\n    disabled = false,\n    tokenizeOnSpace = false,\n    messages = {\n      added: __('Item added.'),\n      removed: __('Item removed.'),\n      remove: __('Remove item'),\n      __experimentalInvalid: __('Invalid item')\n    },\n    __experimentalRenderItem,\n    __experimentalExpandOnFocus = false,\n    __experimentalValidateInput = () => true,\n    __experimentalShowHowTo,\n    __experimentalAutoSelectFirstMatch = false,\n    tokenizeOnBlur = false,\n    help\n  } = props;\n  const defaultHelp = tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.');\n  let computedHelp = help !== undefined ? help : defaultHelp;\n  if (typeof __experimentalShowHowTo === 'boolean') {\n    deprecated('`__experimentalShowHowTo` prop in wp.components.FormTokenField', {\n      since: '7.1',\n      alternative: '`help` prop',\n      hint: 'The `help` prop now defaults to the previous how-to text. Pass an empty string to hide it.'\n    });\n    if (__experimentalShowHowTo === false && help === undefined) {\n      computedHelp = '';\n    }\n  }\n  const instanceId = useInstanceId(FormTokenField);\n\n  // We reset to these initial values again in the onBlur\n  const [incompleteTokenValue, setIncompleteTokenValue] = useState('');\n  const [inputOffsetFromEnd, setInputOffsetFromEnd] = useState(0);\n  const [isActive, setIsActive] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);\n  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = useState(false);\n  const prevSuggestions = usePrevious(suggestions);\n  const prevValue = usePrevious(value);\n  const input = useRef(null);\n  const tokensAndInput = useRef(null);\n  const debouncedSpeak = useDebounce(speak, 500);\n  useEffect(() => {\n    // Make sure to focus the input when the isActive state is true.\n    if (isActive && !hasFocus()) {\n      focus();\n    }\n  }, [isActive]);\n  useEffect(() => {\n    const suggestionsDidUpdate = !isShallowEqual(suggestions, prevSuggestions || []);\n    if (suggestionsDidUpdate || value !== prevValue) {\n      updateSuggestions(suggestionsDidUpdate);\n    }\n\n    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n  }, [suggestions, prevSuggestions, value, prevValue]);\n  useEffect(() => {\n    updateSuggestions();\n  }, [incompleteTokenValue]);\n  useEffect(() => {\n    updateSuggestions();\n  }, [__experimentalAutoSelectFirstMatch]);\n  if (disabled && isActive) {\n    setIsActive(false);\n    setIncompleteTokenValue('');\n  }\n  function focus() {\n    input.current?.focus();\n  }\n  function hasFocus() {\n    return input.current === input.current?.ownerDocument.activeElement;\n  }\n  function onFocusHandler(event) {\n    // If focus is on the input or on the container, set the isActive state to true.\n    if (hasFocus() || event.target === tokensAndInput.current) {\n      setIsActive(true);\n      setIsExpanded(__experimentalExpandOnFocus || isExpanded);\n    } else {\n      /*\n       * Otherwise, focus is on one of the token \"remove\" buttons and we\n       * set the isActive state to false to prevent the input to be\n       * re-focused, see componentDidUpdate().\n       */\n      setIsActive(false);\n    }\n    if ('function' === typeof onFocus) {\n      onFocus(event);\n    }\n  }\n  function onBlur(event) {\n    if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {\n      setIsActive(false);\n      if (tokenizeOnBlur && inputHasValidValue()) {\n        addNewToken(incompleteTokenValue);\n      }\n    } else {\n      // Reset to initial state\n      setIncompleteTokenValue('');\n      setInputOffsetFromEnd(0);\n      setIsActive(false);\n      if (__experimentalExpandOnFocus) {\n        // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when\n        // the user clicks on it (`tokensAndInput` will be the element that caused the blur).\n        const hasFocusWithin = event.relatedTarget === tokensAndInput.current;\n        setIsExpanded(hasFocusWithin);\n      } else {\n        // Else collapse the suggestion list. This will result in the suggestion list closing\n        // after a suggestion has been submitted since that causes a blur.\n        setIsExpanded(false);\n      }\n      setSelectedSuggestionIndex(-1);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function onKeyDown(event) {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'Backspace':\n        preventDefault = handleDeleteKey(deleteTokenBeforeInput);\n        break;\n      case 'Enter':\n        preventDefault = addCurrentToken();\n        break;\n      case 'ArrowLeft':\n        preventDefault = handleLeftArrowKey();\n        break;\n      case 'ArrowUp':\n        preventDefault = handleUpArrowKey();\n        break;\n      case 'ArrowRight':\n        preventDefault = handleRightArrowKey();\n        break;\n      case 'ArrowDown':\n        preventDefault = handleDownArrowKey();\n        break;\n      case 'Delete':\n        preventDefault = handleDeleteKey(deleteTokenAfterInput);\n        break;\n      case 'Space':\n        if (tokenizeOnSpace) {\n          preventDefault = addCurrentToken({\n            preventDefaultOnFailedValidation: false\n          });\n        }\n        break;\n      case 'Escape':\n        preventDefault = handleEscapeKey(event);\n        break;\n      case 'Tab':\n        preventDefault = handleTabKey(event);\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  }\n  function onKeyPress(event) {\n    let preventDefault = false;\n    switch (event.key) {\n      case ',':\n        preventDefault = handleCommaKey();\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  }\n  function onContainerTouched(event) {\n    // Prevent clicking/touching the tokensAndInput container from blurring\n    // the input and adding the current token.\n    if (event.target === tokensAndInput.current && isActive) {\n      event.preventDefault();\n    }\n  }\n  function onTokenClickRemove(event) {\n    deleteToken(event.value);\n    focus();\n  }\n  function onSuggestionHovered(suggestion) {\n    const index = getMatchingSuggestions().indexOf(suggestion);\n    if (index >= 0) {\n      setSelectedSuggestionIndex(index);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function onSuggestionSelected(suggestion) {\n    addNewToken(suggestion);\n  }\n  function onInputChangeHandler(event) {\n    const text = event.value;\n    const separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n    const items = text.split(separator);\n    const tokenValue = items[items.length - 1] || '';\n    if (items.length > 1) {\n      const tokensToProcess = items.slice(0, -1);\n\n      // Pre-check: would any segment be rejected by\n      // `__experimentalValidateInput`? Empties and duplicates of the\n      // current selection are intentional skips, not failures.\n      const willFailValidation = segment => {\n        const transformed = saveTransform(segment);\n        return !!transformed && !valueContainsToken(transformed) && !__experimentalValidateInput(transformed);\n      };\n      const hasFailures = tokensToProcess.some(willFailValidation);\n\n      // When there are failures, also commit the trailing in-progress\n      // segment so the user is left with only the items that need\n      // fixing, instead of mixing the trailing segment with the failed\n      // ones (which would block tokenization on Enter or comma).\n      const addedTokens = addNewTokens(hasFailures ? items : tokensToProcess);\n      if (hasFailures) {\n        // Derive rejected segments from `addedTokens` so this stays\n        // in sync with `addNewTokens`'s filter chain.\n        const rejected = items.filter(token => {\n          const transformed = saveTransform(token);\n          if (!transformed) {\n            return false;\n          }\n          if (addedTokens.has(transformed)) {\n            return false;\n          }\n          if (valueContainsToken(transformed)) {\n            return false;\n          }\n          return !__experimentalValidateInput(transformed);\n        });\n\n        // Reuse the separator the user actually used (the last one\n        // in `text`) so we don't rewrite their input: comma-separated\n        // paste under `tokenizeOnSpace` stays comma-separated, and\n        // typed space under `tokenizeOnSpace` stays a space. Falls\n        // back to the mode-appropriate separator only when no\n        // separator characters are present in `text`.\n        const usedSeparators = text.match(/[ ,\\t]/g);\n        const separatorChar = usedSeparators?.[usedSeparators.length - 1] ?? (tokenizeOnSpace ? ' ' : ',');\n        // Preserve a trailing separator when the input ended with\n        // one, so the user can keep typing past a failed-validation\n        // space without their separator disappearing.\n        const trailing = tokenValue === '' ? separatorChar : '';\n        const remaining = rejected.join(separatorChar) + trailing;\n        setIncompleteTokenValue(remaining);\n        onInputChange(remaining);\n        return;\n      }\n    }\n    setIncompleteTokenValue(tokenValue);\n    onInputChange(tokenValue);\n  }\n  function handleDeleteKey(_deleteToken) {\n    let preventDefault = false;\n    if (hasFocus() && isInputEmpty()) {\n      _deleteToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleLeftArrowKey() {\n    let preventDefault = false;\n    if (isInputEmpty()) {\n      moveInputBeforePreviousToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleRightArrowKey() {\n    let preventDefault = false;\n    if (isInputEmpty()) {\n      moveInputAfterNextToken();\n      preventDefault = true;\n    }\n    return preventDefault;\n  }\n  function handleUpArrowKey() {\n    setSelectedSuggestionIndex(index => {\n      return (index <= 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;\n    });\n    setSelectedSuggestionScroll(true);\n    return true; // PreventDefault.\n  }\n  function handleDownArrowKey() {\n    setSelectedSuggestionIndex(index => {\n      return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;\n    });\n    setSelectedSuggestionScroll(true);\n    return true; // PreventDefault.\n  }\n  function collapseSuggestionsList(event) {\n    if (event.target instanceof HTMLInputElement) {\n      setIncompleteTokenValue(event.target.value);\n      setIsExpanded(false);\n      setSelectedSuggestionIndex(-1);\n      setSelectedSuggestionScroll(false);\n    }\n  }\n  function handleEscapeKey(event) {\n    collapseSuggestionsList(event);\n    return true; // PreventDefault.\n  }\n  function handleTabKey(event) {\n    collapseSuggestionsList(event);\n    return false; // Do not prevent the default behavior.\n  }\n  function handleCommaKey() {\n    if (inputHasValidValue()) {\n      addNewToken(incompleteTokenValue);\n    }\n\n    // Comma is always a separator (typed in onKeyPress, never as input).\n    // Pasted commas go through onInputChangeHandler, which validates.\n    return true;\n  }\n  function moveInputToIndex(index) {\n    setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);\n  }\n  function moveInputBeforePreviousToken() {\n    setInputOffsetFromEnd(prevInputOffsetFromEnd => {\n      return Math.min(prevInputOffsetFromEnd + 1, value.length);\n    });\n  }\n  function moveInputAfterNextToken() {\n    setInputOffsetFromEnd(prevInputOffsetFromEnd => {\n      return Math.max(prevInputOffsetFromEnd - 1, 0);\n    });\n  }\n  function deleteTokenBeforeInput() {\n    const index = getIndexOfInput() - 1;\n    if (index > -1) {\n      deleteToken(value[index]);\n    }\n  }\n  function deleteTokenAfterInput() {\n    const index = getIndexOfInput();\n    if (index < value.length) {\n      deleteToken(value[index]);\n      // Update input offset since it's the offset from the last token.\n      moveInputToIndex(index);\n    }\n  }\n  function addCurrentToken({\n    preventDefaultOnFailedValidation = true\n  } = {}) {\n    let preventDefault = false;\n    const selectedSuggestion = getSelectedSuggestion();\n    if (selectedSuggestion) {\n      addNewToken(selectedSuggestion);\n      preventDefault = true;\n    } else if (inputHasValidValue()) {\n      const passedValidation = addNewToken(incompleteTokenValue);\n      preventDefault = passedValidation || preventDefaultOnFailedValidation;\n    }\n    return preventDefault;\n  }\n  function addNewTokens(tokens) {\n    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)).filter(token => __experimentalValidateInput(token)))];\n    if (tokensToAdd.length > 0) {\n      const newValue = [...value];\n      newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);\n      onChange(newValue);\n    }\n    return new Set(tokensToAdd);\n  }\n\n  /**\n   * Validates and adds `token`. Returns `true` if validation passed,\n   * `false` if it was rejected by `__experimentalValidateInput`. A `true`\n   * return does not guarantee the token was added: `addNewTokens` may\n   * still drop it as a duplicate or after `saveTransform` returns empty.\n   */\n  function addNewToken(token) {\n    if (!__experimentalValidateInput(token)) {\n      speak(messages.__experimentalInvalid, 'assertive');\n      return false;\n    }\n    addNewTokens([token]);\n    speak(messages.added, 'assertive');\n    setIncompleteTokenValue('');\n    setSelectedSuggestionIndex(-1);\n    setSelectedSuggestionScroll(false);\n    setIsExpanded(!__experimentalExpandOnFocus);\n    if (isActive && !tokenizeOnBlur) {\n      focus();\n    }\n    return true;\n  }\n  function deleteToken(token) {\n    const newTokens = value.filter(item => {\n      return getTokenValue(item) !== getTokenValue(token);\n    });\n    onChange(newTokens);\n    speak(messages.removed, 'assertive');\n  }\n  function getTokenValue(token) {\n    if ('object' === typeof token) {\n      return token.value;\n    }\n    return token;\n  }\n  function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) {\n    let match = _saveTransform(searchValue);\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const normalizedValue = _value.map(item => {\n      if (typeof item === 'string') {\n        return item;\n      }\n      return item.value;\n    });\n    if (match.length === 0) {\n      _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));\n    } else {\n      match = match.normalize('NFKC').toLocaleLowerCase();\n      _suggestions.forEach(suggestion => {\n        const index = suggestion.normalize('NFKC').toLocaleLowerCase().indexOf(match);\n        if (normalizedValue.indexOf(suggestion) === -1) {\n          if (index === 0) {\n            startsWithMatch.push(suggestion);\n          } else if (index > 0) {\n            containsMatch.push(suggestion);\n          }\n        }\n      });\n      _suggestions = startsWithMatch.concat(containsMatch);\n    }\n    return _suggestions.slice(0, _maxSuggestions);\n  }\n  function getSelectedSuggestion() {\n    if (selectedSuggestionIndex !== -1) {\n      return getMatchingSuggestions()[selectedSuggestionIndex];\n    }\n    return undefined;\n  }\n  function valueContainsToken(token) {\n    return value.some(item => {\n      return getTokenValue(token) === getTokenValue(item);\n    });\n  }\n  function getIndexOfInput() {\n    return value.length - inputOffsetFromEnd;\n  }\n  function isInputEmpty() {\n    return incompleteTokenValue.length === 0;\n  }\n  function inputHasValidValue() {\n    return saveTransform(incompleteTokenValue).length > 0;\n  }\n  function updateSuggestions(resetSelectedSuggestion = true) {\n    const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n    const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;\n    setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);\n    if (resetSelectedSuggestion) {\n      if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {\n        setSelectedSuggestionIndex(0);\n        setSelectedSuggestionScroll(true);\n      } else {\n        setSelectedSuggestionIndex(-1);\n        setSelectedSuggestionScroll(false);\n      }\n    }\n    if (inputHasMinimumChars) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      debouncedSpeak(message, 'assertive');\n    }\n  }\n  function renderTokensAndInput() {\n    const components = value.map(renderToken);\n    components.splice(getIndexOfInput(), 0, renderInput());\n    return components;\n  }\n  function renderToken(token, index, tokens) {\n    const _value = getTokenValue(token);\n    const status = typeof token !== 'string' ? token.status : undefined;\n    const termPosition = index + 1;\n    const termsCount = tokens.length;\n    return /*#__PURE__*/_jsx(FlexItem, {\n      children: /*#__PURE__*/_jsx(Token, {\n        value: _value,\n        status: status,\n        title: typeof token !== 'string' ? token.title : undefined,\n        displayTransform: displayTransform,\n        onClickRemove: onTokenClickRemove,\n        isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless,\n        onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined,\n        onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined,\n        disabled: 'error' !== status && disabled,\n        messages: messages,\n        termsCount: termsCount,\n        termPosition: termPosition\n      })\n    }, 'token-' + _value);\n  }\n  function renderInput() {\n    const describedById = computedHelp ? `components-form-token-input-${instanceId}__help` : undefined;\n    const inputProps = {\n      instanceId,\n      autoCapitalize,\n      autoComplete,\n      placeholder: value.length === 0 ? placeholder : '',\n      disabled,\n      value: incompleteTokenValue,\n      onBlur,\n      isExpanded,\n      selectedSuggestionIndex,\n      'aria-describedby': describedById\n    };\n    return /*#__PURE__*/_jsx(TokenInput, {\n      ...inputProps,\n      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,\n      ref: input\n    }, \"input\");\n  }\n  const classes = clsx(className, 'components-form-token-field__input-container', {\n    'is-active': isActive,\n    'is-disabled': disabled\n  });\n  let tokenFieldProps = {\n    className: 'components-form-token-field',\n    tabIndex: -1\n  };\n  const matchingSuggestions = getMatchingSuggestions();\n  if (!disabled) {\n    tokenFieldProps = Object.assign({}, tokenFieldProps, {\n      onKeyDown: withIgnoreIMEEvents(onKeyDown),\n      onKeyPress,\n      onFocus: onFocusHandler\n    });\n  }\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ...tokenFieldProps,\n    children: [label && /*#__PURE__*/_jsx(StyledLabel, {\n      htmlFor: `components-form-token-input-${instanceId}`,\n      className: \"components-form-token-field__label\",\n      children: label\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: tokensAndInput,\n      className: classes,\n      tabIndex: -1,\n      onMouseDown: onContainerTouched,\n      onTouchStart: onContainerTouched,\n      children: [/*#__PURE__*/_jsx(Flex, {\n        className: styles['tokens-and-input'],\n        justify: \"flex-start\",\n        align: \"center\",\n        gap: 1,\n        wrap: true,\n        children: renderTokensAndInput()\n      }), isExpanded && /*#__PURE__*/_jsx(SuggestionsList, {\n        instanceId: instanceId,\n        match: saveTransform(incompleteTokenValue),\n        displayTransform: displayTransform,\n        suggestions: matchingSuggestions,\n        selectedIndex: selectedSuggestionIndex,\n        scrollIntoView: selectedSuggestionScroll,\n        onHover: onSuggestionHovered,\n        onSelect: onSuggestionSelected,\n        __experimentalRenderItem: __experimentalRenderItem\n      })]\n    }), computedHelp && /*#__PURE__*/_jsx(StyledHelp, {\n      id: `components-form-token-input-${instanceId}__help`,\n      className: \"components-form-token-field__help\",\n      children: computedHelp\n    })]\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default FormTokenField;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"f9ae5dc19e\", \".df878b202c3b3cb7__tokens-and-input{box-sizing:border-box;padding:7px}.df878b202c3b3cb7__tokens-and-input *,.df878b202c3b3cb7__tokens-and-input :after,.df878b202c3b3cb7__tokens-and-input :before{box-sizing:inherit}\");\n}\nexport default {\"tokens-and-input\":\"df878b202c3b3cb7__tokens-and-input\"};\n"],
+  "mappings": "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",
   "names": ["matchingSuggestions"]
 }

package/build-module/gradient-picker/index.mjs

@@ -2,10 +2,95 @@
 import { __, sprintf } from "@wordpress/i18n";
 import { useInstanceId } from "@wordpress/compose";
 import { useCallback, useMemo } from "@wordpress/element";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import CustomGradientPicker from "../custom-gradient-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
-import { ColorHeading } from "../color-palette/styles.mjs";
+import { Heading } from "../heading/index.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/color-palette/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a7b05d56c7", ".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}");
+}
+var style_module_default = { "color-heading": "cf6db1948d5273a8__color-heading" };
+
+// packages/components/src/gradient-picker/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var isMultipleOriginObject = (obj) => Array.isArray(obj.gradients) && !("gradient" in obj);
 var isMultipleOriginArray = (arr) => {
@@ -18,6 +103,7 @@ function SingleOrigin({
   onChange,
   value,
   selectedSlug,
+  presentation,
   ...additionalProps
 }) {
   const gradientOptions = useMemo(() => {
@@ -26,7 +112,7 @@ function SingleOrigin({
       name,
       slug
     }, index) => {
-      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;
+      const isSelected = presentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : value === gradient);
       return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
         value: gradient,
         isSelected,
@@ -46,7 +132,7 @@ function SingleOrigin({
         )
       }, slug);
     });
-  }, [gradients, value, onChange, clearGradient, selectedSlug]);
+  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);
   return /* @__PURE__ */ _jsx(CircularOptionPicker.OptionGroup, {
     className,
     options: gradientOptions,
@@ -60,7 +146,8 @@ function MultipleOrigin({
   onChange,
   value,
   selectedSlug,
-  headingLevel
+  headingLevel,
+  presentation
 }) {
   const instanceId = useInstanceId(MultipleOrigin);
   return /* @__PURE__ */ _jsx(VStack, {
@@ -73,7 +160,8 @@ function MultipleOrigin({
       const id = `color-palette-${instanceId}-${index}`;
       return /* @__PURE__ */ _jsxs(VStack, {
         spacing: 2,
-        children: [/* @__PURE__ */ _jsx(ColorHeading, {
+        children: [/* @__PURE__ */ _jsx(Heading, {
+          className: style_module_default["color-heading"],
           level: headingLevel,
           id,
           children: name
@@ -83,6 +171,7 @@ function MultipleOrigin({
           onChange: (gradient, _index, slug) => onChange(gradient, index, slug),
           value,
           selectedSlug,
+          presentation,
           "aria-labelledby": id
         })]
       }, index);
@@ -92,6 +181,7 @@ function MultipleOrigin({
 function Component(props) {
   const {
     asButtons,
+    presentation,
     loop,
     actions,
     headingLevel,
@@ -99,16 +189,20 @@ function Component(props) {
     "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("GradientPicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const options = isMultipleOriginArray(props.gradients) ? /* @__PURE__ */ _jsx(MultipleOrigin, {
     headingLevel,
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   }) : /* @__PURE__ */ _jsx(SingleOrigin, {
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...metaProps,
     ...labelProps,

package/build-module/gradient-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/gradient-picker/index.tsx"],
-  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
-  "mappings": "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",
+  "sources": ["../../src/gradient-picker/index.tsx", "../../../style-runtime/src/index.ts", "../../src/color-palette/style.module.scss"],
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { Heading } from '../heading';\nimport colorPaletteStyles from '../color-palette/style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  presentation,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = presentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : value === gradient);\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel,\n  presentation\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(Heading, {\n          className: colorPaletteStyles['color-heading'],\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          presentation: presentation,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('GradientPicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps,\n    presentation: resolvedPresentation\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps,\n    presentation: resolvedPresentation\n  });\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a7b05d56c7\", \".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}\");\n}\nexport default {\"color-heading\":\"cf6db1948d5273a8__color-heading\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/icon/index.mjs

@@ -26,23 +26,41 @@ function Icon({
       ...additionalProps
     });
   }
-  if (icon && (icon.type === "svg" || icon.type === SVG)) {
-    const appliedProps = {
-      ...icon.props,
-      width: size,
-      height: size,
-      ...additionalProps
-    };
-    return /* @__PURE__ */ _jsx(SVG, {
-      ...appliedProps
-    });
-  }
   if (isValidElement(icon)) {
+    const {
+      style: consumerStyle,
+      ...restProps
+    } = additionalProps;
+    const mergedStyle = icon.props.style || consumerStyle ? {
+      ...icon.props.style,
+      ...consumerStyle
+    } : void 0;
+    const styleProps = mergedStyle ? {
+      style: mergedStyle
+    } : {};
+    if (icon.type === "svg" || icon.type === SVG) {
+      const appliedProps = {
+        ...icon.props,
+        width: size,
+        height: size,
+        ...restProps,
+        // Merge styles so the icon's intrinsic style (e.g. `fill: none` on
+        // stroke-based icons) is preserved unless the consumer overrides
+        // the same property explicitly.
+        ...styleProps
+      };
+      return /* @__PURE__ */ _jsx(SVG, {
+        ...appliedProps
+      });
+    }
     return cloneElement(icon, {
       size,
       width: size,
       height: size,
-      ...additionalProps
+      ...restProps,
+      // Merge styles so the icon's intrinsic style is preserved unless
+      // the consumer overrides the same property explicitly.
+      ...styleProps
     });
   }
   return icon;

package/build-module/icon/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/icon/index.tsx"],
-  "sourcesContent": ["import { cloneElement, createElement, isValidElement } from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\nimport Dashicon from '../dashicon';\n\n/* The sizing props forwarded to an icon element that is not an `SVG` or a `Dashicon`. */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Renders a raw icon without any initial styling or wrappers.\n *\n * ```jsx\n * import { wordpress } from '@wordpress/icons';\n *\n * <Icon icon={ wordpress } />\n * ```\n */\nfunction Icon({\n  icon = null,\n  size = 'string' === typeof icon ? 20 : 24,\n  ...additionalProps\n}) {\n  if ('string' === typeof icon) {\n    return /*#__PURE__*/_jsx(Dashicon, {\n      icon: icon,\n      size: size,\n      ...additionalProps\n    });\n  }\n  if (isValidElement(icon) && Dashicon === icon.type) {\n    return cloneElement(icon, {\n      ...additionalProps\n    });\n  }\n  if ('function' === typeof icon) {\n    return createElement(icon, {\n      size,\n      ...additionalProps\n    });\n  }\n  if (icon && (icon.type === 'svg' || icon.type === SVG)) {\n    const appliedProps = {\n      ...icon.props,\n      width: size,\n      height: size,\n      ...additionalProps\n    };\n    return /*#__PURE__*/_jsx(SVG, {\n      ...appliedProps\n    });\n  }\n  if (isValidElement(icon)) {\n    return cloneElement(icon, {\n      size,\n      width: size,\n      height: size,\n      ...additionalProps\n    });\n  }\n  return icon;\n}\nexport default Icon;"],
-  "mappings": ";AAAA,SAAS,cAAc,eAAe,sBAAsB;AAC5D,SAAS,WAAW;AACpB,OAAO,cAAc;AAGrB,SAAS,OAAO,YAAY;AAU5B,SAAS,KAAK;AAAA,EACZ,OAAO;AAAA,EACP,OAAO,aAAa,OAAO,OAAO,KAAK;AAAA,EACvC,GAAG;AACL,GAAG;AACD,MAAI,aAAa,OAAO,MAAM;AAC5B,WAAoB,qBAAK,UAAU;AAAA,MACjC;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,IAAI,KAAK,aAAa,KAAK,MAAM;AAClD,WAAO,aAAa,MAAM;AAAA,MACxB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,OAAO,MAAM;AAC9B,WAAO,cAAc,MAAM;AAAA,MACzB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,SAAS,KAAK,SAAS,SAAS,KAAK,SAAS,MAAM;AACtD,UAAM,eAAe;AAAA,MACnB,GAAG,KAAK;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG;AAAA,IACL;AACA,WAAoB,qBAAK,KAAK;AAAA,MAC5B,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,IAAI,GAAG;AACxB,WAAO,aAAa,MAAM;AAAA,MACxB;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAO,eAAQ;",
+  "sourcesContent": ["import { cloneElement, createElement, isValidElement } from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\nimport Dashicon from '../dashicon';\n\n/* The sizing props forwarded to an icon element that is not an `SVG` or a `Dashicon`. */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Renders a raw icon without any initial styling or wrappers.\n *\n * ```jsx\n * import { wordpress } from '@wordpress/icons';\n *\n * <Icon icon={ wordpress } />\n * ```\n */\nfunction Icon({\n  icon = null,\n  size = 'string' === typeof icon ? 20 : 24,\n  ...additionalProps\n}) {\n  if ('string' === typeof icon) {\n    return /*#__PURE__*/_jsx(Dashicon, {\n      icon: icon,\n      size: size,\n      ...additionalProps\n    });\n  }\n  if (isValidElement(icon) && Dashicon === icon.type) {\n    return cloneElement(icon, {\n      ...additionalProps\n    });\n  }\n  if ('function' === typeof icon) {\n    return createElement(icon, {\n      size,\n      ...additionalProps\n    });\n  }\n  if (isValidElement(icon)) {\n    const {\n      style: consumerStyle,\n      ...restProps\n    } = additionalProps;\n    const mergedStyle = icon.props.style || consumerStyle ? {\n      ...icon.props.style,\n      ...consumerStyle\n    } : undefined;\n    const styleProps = mergedStyle ? {\n      style: mergedStyle\n    } : {};\n    if (icon.type === 'svg' || icon.type === SVG) {\n      const appliedProps = {\n        ...icon.props,\n        width: size,\n        height: size,\n        ...restProps,\n        // Merge styles so the icon's intrinsic style (e.g. `fill: none` on\n        // stroke-based icons) is preserved unless the consumer overrides\n        // the same property explicitly.\n        ...styleProps\n      };\n      return /*#__PURE__*/_jsx(SVG, {\n        ...appliedProps\n      });\n    }\n    return cloneElement(icon, {\n      size,\n      width: size,\n      height: size,\n      ...restProps,\n      // Merge styles so the icon's intrinsic style is preserved unless\n      // the consumer overrides the same property explicitly.\n      ...styleProps\n    });\n  }\n  return icon;\n}\nexport default Icon;"],
+  "mappings": ";AAAA,SAAS,cAAc,eAAe,sBAAsB;AAC5D,SAAS,WAAW;AACpB,OAAO,cAAc;AAGrB,SAAS,OAAO,YAAY;AAU5B,SAAS,KAAK;AAAA,EACZ,OAAO;AAAA,EACP,OAAO,aAAa,OAAO,OAAO,KAAK;AAAA,EACvC,GAAG;AACL,GAAG;AACD,MAAI,aAAa,OAAO,MAAM;AAC5B,WAAoB,qBAAK,UAAU;AAAA,MACjC;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,IAAI,KAAK,aAAa,KAAK,MAAM;AAClD,WAAO,aAAa,MAAM;AAAA,MACxB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,OAAO,MAAM;AAC9B,WAAO,cAAc,MAAM;AAAA,MACzB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI,eAAe,IAAI,GAAG;AACxB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,cAAc,KAAK,MAAM,SAAS,gBAAgB;AAAA,MACtD,GAAG,KAAK,MAAM;AAAA,MACd,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,aAAa,cAAc;AAAA,MAC/B,OAAO;AAAA,IACT,IAAI,CAAC;AACL,QAAI,KAAK,SAAS,SAAS,KAAK,SAAS,KAAK;AAC5C,YAAM,eAAe;AAAA,QACnB,GAAG,KAAK;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAG;AAAA;AAAA;AAAA;AAAA,QAIH,GAAG;AAAA,MACL;AACA,aAAoB,qBAAK,KAAK;AAAA,QAC5B,GAAG;AAAA,MACL,CAAC;AAAA,IACH;AACA,WAAO,aAAa,MAAM;AAAA,MACxB;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA;AAAA,MAGH,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/input-control/input-field.mjs

@@ -140,6 +140,7 @@ function InputField({
     ...props,
     ...dragProps,
     className: "components-input-control__input",
+    "data-empty-value": value ? void 0 : "",
     disabled,
     dragCursor,
     isDragging,

package/build-module/input-control/input-field.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-field.tsx"],
-  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,YAAY,cAAc;AACnC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,WAAW;AAAA,EAClB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB;AAAA,EACA,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,eAAe,WAAS;AAAA,EACxB,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM;AAAA;AAAA,IAEJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,cAAc;AAAA,IAC5C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,GAAG,QAAQ;AACX,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAiB,OAAO,KAAK;AACnC,QAAM,aAAa,cAAc,YAAY,aAAa;AAC1D,QAAM,eAAe,WAAS;AAC5B,WAAO,KAAK;AAMZ,QAAI,WAAW,CAAC,MAAM,OAAO,SAAS,OAAO;AAC3C,qBAAe,UAAU;AACzB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AACA,QAAM,iBAAiB,WAAS;AAC9B,UAAM,YAAY,MAAM,OAAO;AAC/B,WAAO,WAAW,KAAK;AAAA,EACzB;AACA,QAAM,iBAAiB,WAAS;AAC9B,UAAM,YAAY,MAAM,cAAc;AACtC,QAAI;AACF,iBAAW,SAAS;AACpB,aAAO,WAAW,KAAK;AAAA,IACzB,SAAS,KAAK;AACZ,iBAAW,KAAK,KAAK;AAAA,IACvB;AAAA,EACF;AACA,QAAM,kBAAkB,WAAS;AAC/B,UAAM;AAAA,MACJ;AAAA,IACF,IAAI;AACJ,cAAU,KAAK;AACf,YAAQ,KAAK;AAAA,MACX,KAAK;AACH,gBAAQ,KAAK;AACb;AAAA,MACF,KAAK;AACH,kBAAU,KAAK;AACf;AAAA,MACF,KAAK;AACH,mBAAW,KAAK;AAChB,YAAI,sBAAsB;AACxB,gBAAM,eAAe;AACrB,yBAAe,KAAK;AAAA,QACtB;AACA;AAAA,MACF,KAAK;AACH,YAAI,wBAAwB,SAAS;AACnC,gBAAM,eAAe;AACrB,gBAAM,WAAW,KAAK;AAAA,QACxB;AACA;AAAA,IACJ;AAAA,EACF;AACA,QAAM,mBAAmB,QAAQ,CAAAA,eAAa;AAC5C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAIA;AAQJ,IAAAA,WAAU,QAAQ;AAAA,MAChB,GAAGA,WAAU;AAAA,MACb;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AACA,UAAM,gBAAgB;AAMtB,QAAI,CAAC,UAAU;AACb,gBAAUA,UAAS;AACnB,cAAQA,UAAS;AACjB;AAAA,IACF;AACA,WAAOA,UAAS;AAChB,SAAKA,UAAS;AACd,QAAI,CAAC,YAAY;AACf,kBAAYA,UAAS;AACrB,gBAAUA,UAAS;AAAA,IACrB;AAAA,EACF,GAAG;AAAA,IACD,MAAM,kBAAkB,OAAO,kBAAkB,MAAM,MAAM;AAAA,IAC7D,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AACD,QAAM,YAAY,gBAAgB,iBAAiB,IAAI,CAAC;AACxD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW,oBAAoB,eAAe;AAAA,IAC9C;AAAA,IACA,WAAW;AAAA,IAIX,OAAO,SAAS;AAAA,IAChB;AAAA,EACF,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,UAAU;AAChD,IAAO,sBAAQ;",
+  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    \"data-empty-value\": value ? undefined : '',\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
+  "mappings": "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",
   "names": ["dragProps"]
 }