@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/build-module/color-picker/input-with-slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/input-with-slider.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const InputWithSlider = ({\n  min,\n  max,\n  label,\n  abbreviation,\n  onChange,\n  value\n}) => {\n  const onNumberControlChange = newValue => {\n    if (!newValue) {\n      onChange(0);\n      return;\n    }\n    if (typeof newValue === 'string') {\n      onChange(parseInt(newValue, 10));\n      return;\n    }\n    onChange(newValue);\n  };\n  return /*#__PURE__*/_jsxs(HStack, {\n    spacing: 4,\n    children: [/*#__PURE__*/_jsx(NumberControlWrapper, {\n      __next40pxDefaultSize: true,\n      min: min,\n      max: max,\n      label: label,\n      hideLabelFromVision: true,\n      value: value,\n      onChange: onNumberControlChange,\n      prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n        children: /*#__PURE__*/_jsx(Text, {\n          color: COLORS.theme.accent,\n          lineHeight: 1,\n          children: abbreviation\n        })\n      }),\n      spinControls: \"none\"\n    }), /*#__PURE__*/_jsx(RangeControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: label,\n      hideLabelFromVision: true,\n      min: min,\n      max: max,\n      value: value\n      // @ts-expect-error\n      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n      ,\n      onChange: onChange,\n      withInputField: false\n    })]\n  });\n};"],
-  "mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,cAAc,4BAA4B;AACnD,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,wBAAwB,cAAY;AACxC,QAAI,CAAC,UAAU;AACb,eAAS,CAAC;AACV;AAAA,IACF;AACA,QAAI,OAAO,aAAa,UAAU;AAChC,eAAS,SAAS,UAAU,EAAE,CAAC;AAC/B;AAAA,IACF;AACA,aAAS,QAAQ;AAAA,EACnB;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,SAAS;AAAA,IACT,UAAU,CAAc,qBAAK,sBAAsB;AAAA,MACjD,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,QAAqB,qBAAK,2BAA2B;AAAA,QACnD,UAAuB,qBAAK,MAAM;AAAA,UAChC,OAAO,OAAO,MAAM;AAAA,UACpB,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH,CAAC;AAAA,MACD,cAAc;AAAA,IAChB,CAAC,GAAgB,qBAAK,cAAc;AAAA,MAClC,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MAIA;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const InputWithSlider = ({\n  min,\n  max,\n  label,\n  abbreviation,\n  onChange,\n  value\n}) => {\n  const onNumberControlChange = newValue => {\n    if (!newValue) {\n      onChange(0);\n      return;\n    }\n    if (typeof newValue === 'string') {\n      onChange(parseInt(newValue, 10));\n      return;\n    }\n    onChange(newValue);\n  };\n  return /*#__PURE__*/_jsxs(HStack, {\n    spacing: 4,\n    children: [/*#__PURE__*/_jsx(NumberControlWrapper, {\n      __next40pxDefaultSize: true,\n      min: min,\n      max: max,\n      label: label,\n      hideLabelFromVision: true,\n      value: value,\n      onChange: onNumberControlChange,\n      prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n        children: /*#__PURE__*/_jsx(Text, {\n          color: COLORS.theme.accent,\n          lineHeight: 1,\n          children: abbreviation\n        })\n      }),\n      spinControls: \"none\"\n    }), /*#__PURE__*/_jsx(RangeControl, {\n      __next40pxDefaultSize: true,\n      label: label,\n      hideLabelFromVision: true,\n      min: min,\n      max: max,\n      value: value\n      // @ts-expect-error\n      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n      ,\n      onChange: onChange,\n      withInputField: false\n    })]\n  });\n};"],
+  "mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,cAAc,4BAA4B;AACnD,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,wBAAwB,cAAY;AACxC,QAAI,CAAC,UAAU;AACb,eAAS,CAAC;AACV;AAAA,IACF;AACA,QAAI,OAAO,aAAa,UAAU;AAChC,eAAS,SAAS,UAAU,EAAE,CAAC;AAC/B;AAAA,IACF;AACA,aAAS,QAAQ;AAAA,EACnB;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,SAAS;AAAA,IACT,UAAU,CAAc,qBAAK,sBAAsB;AAAA,MACjD,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,QAAqB,qBAAK,2BAA2B;AAAA,QACnD,UAAuB,qBAAK,MAAM;AAAA,UAChC,OAAO,OAAO,MAAM;AAAA,UACpB,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH,CAAC;AAAA,MACD,cAAc;AAAA,IAChB,CAAC,GAAgB,qBAAK,cAAc;AAAA,MAClC,uBAAuB;AAAA,MACvB;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MAIA;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": []
 }

package/build-module/color-picker/legacy-adapter.js

@@ -1,6 +1,6 @@
 // packages/components/src/color-picker/legacy-adapter.tsx
-import ColorPicker from "./component";
-import { useDeprecatedProps } from "./use-deprecated-props";
+import ColorPicker from "./component.js";
+import { useDeprecatedProps } from "./use-deprecated-props.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var LegacyAdapter = (props) => {
   return /* @__PURE__ */ _jsx(ColorPicker, {

package/build-module/color-picker/rgb-input.js

@@ -1,6 +1,6 @@
 // packages/components/src/color-picker/rgb-input.tsx
 import { colord } from "colord";
-import { InputWithSlider } from "./input-with-slider";
+import { InputWithSlider } from "./input-with-slider.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var RgbInput = ({
   color,

package/build-module/color-picker/styles.js

@@ -1,13 +1,13 @@
 // packages/components/src/color-picker/styles.ts
 import _styled from "@emotion/styled/base";
-import NumberControl from "../number-control";
-import InnerSelectControl from "../select-control";
-import InnerRangeControl from "../range-control";
-import { space } from "../utils/space";
-import { boxSizingReset } from "../utils";
-import { Flex } from "../flex";
-import { HStack } from "../h-stack";
-import CONFIG from "../utils/config-values";
+import NumberControl from "../number-control/index.js";
+import InnerSelectControl from "../select-control/index.js";
+import InnerRangeControl from "../range-control/index.js";
+import { space } from "../utils/space.js";
+import { boxSizingReset } from "../utils/index.js";
+import { Flex } from "../flex/index.js";
+import { HStack } from "../h-stack/index.js";
+import CONFIG from "../utils/config-values.js";
 var NumberControlWrapper = /* @__PURE__ */ _styled(NumberControl, process.env.NODE_ENV === "production" ? {
   target: "ez9hsf46"
 } : {

package/build-module/combobox-control/index.js

@@ -5,19 +5,19 @@ import { Component, useState, useMemo, useRef, useEffect } from "@wordpress/elem
 import { useInstanceId } from "@wordpress/compose";
 import { speak } from "@wordpress/a11y";
 import { closeSmall } from "@wordpress/icons";
-import { InputWrapperFlex } from "./styles";
-import TokenInput from "../form-token-field/token-input";
-import SuggestionsList from "../form-token-field/suggestions-list";
-import BaseControl from "../base-control";
-import Button from "../button";
-import { FlexBlock } from "../flex";
-import withFocusOutside from "../higher-order/with-focus-outside";
-import { useControlledValue } from "../utils/hooks";
-import { normalizeTextString } from "../utils/strings";
-import { useDeprecated36pxDefaultSizeProp } from "../utils/use-deprecated-props";
-import { withIgnoreIMEEvents } from "../utils/with-ignore-ime-events";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
-import Spinner from "../spinner";
+import { InputWrapperFlex } from "./styles.js";
+import TokenInput from "../form-token-field/token-input.js";
+import SuggestionsList from "../form-token-field/suggestions-list.js";
+import BaseControl from "../base-control/index.js";
+import Button from "../button/index.js";
+import { FlexBlock } from "../flex/index.js";
+import withFocusOutside from "../higher-order/with-focus-outside/index.js";
+import { useControlledValue } from "../utils/hooks/index.js";
+import { normalizeTextString } from "../utils/strings.js";
+import { useDeprecated36pxDefaultSizeProp } from "../utils/use-deprecated-props.js";
+import { withIgnoreIMEEvents } from "../utils/with-ignore-ime-events.js";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.js";
+import Spinner from "../spinner/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
@@ -33,7 +33,6 @@ var getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) =>
 function ComboboxControl(props) {
   var _currentOption$label;
   const {
-    __nextHasNoMarginBottom = false,
     __next40pxDefaultSize = false,
     value: valueProp,
     label,
@@ -189,8 +188,6 @@ function ComboboxControl(props) {
   return /* @__PURE__ */ _jsx(DetectOutside, {
     onFocusOutside,
     children: /* @__PURE__ */ _jsx(BaseControl, {
-      __nextHasNoMarginBottom,
-      __associatedWPComponentName: "ComboboxControl",
       className: clsx(className, "components-combobox-control"),
       label,
       id: `components-form-token-input-${instanceId}`,

package/build-module/combobox-control/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/combobox-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  var _currentOption$label;\n  const {\n    __nextHasNoMarginBottom = false,\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\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      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\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__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      __nextHasNoMarginBottom: __nextHasNoMarginBottom,\n      __associatedWPComponentName: \"ComboboxControl\",\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  var _currentOption$label;\n  const {\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\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      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\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__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,WAAW,UAAU,SAAS,QAAQ,iBAAiB;AAChE,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAK3B,SAAS,wBAAwB;AACjC,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAC1B,OAAO,sBAAsB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,OAAO,aAAa;AACpB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,gBAAgB,iBAAiB,cAAc,UAAU;AAAA,EAC7D,mBAAmB,OAAO;AACxB,SAAK,MAAM,eAAe,KAAK;AAAA,EACjC;AAAA,EACA,SAAS;AACP,WAAO,KAAK,MAAM;AAAA,EACpB;AACF,CAAC;AACD,IAAM,+BAA+B,CAAC,oBAAoB,wBAAwB,uBAAuB,OAAO,KAAK,oBAAoB,QAAQ,kBAAkB;AAmDnK,SAAS,gBAAgB,OAAO;AAC9B,MAAI;AACJ,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,UAAU,GAAG,gBAAgB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,iCAAiC,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,mBAAmB;AAAA,IAC3C,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,gBAAgB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK;AACnE,QAAM,gBAAgB,uBAAuB,eAAe,WAAW,QAAQ,yBAAyB,SAAS,uBAAuB;AAIxI,QAAM,aAAa,cAAc,iBAAiB,kBAAkB;AACpE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,iBAAiB,IAAI;AAClF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,iBAAiB,OAAO,IAAI;AAClC,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,kBAAkB,CAAC;AACzB,UAAM,gBAAgB,CAAC;AACvB,UAAM,QAAQ,oBAAoB,UAAU;AAC5C,YAAQ,QAAQ,YAAU;AACxB,YAAM,QAAQ,oBAAoB,OAAO,KAAK,EAAE,QAAQ,KAAK;AAC7D,UAAI,UAAU,GAAG;AACf,wBAAgB,KAAK,MAAM;AAAA,MAC7B,WAAW,QAAQ,GAAG;AACpB,sBAAc,KAAK,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AACD,WAAO,gBAAgB,OAAO,aAAa;AAAA,EAC7C,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,QAAM,uBAAuB,2BAAyB;AACpD,QAAI,sBAAsB,UAAU;AAClC;AAAA,IACF;AACA,aAAS,sBAAsB,KAAK;AACpC,UAAM,SAAS,UAAU,WAAW;AACpC,0BAAsB,qBAAqB;AAC3C,kBAAc,EAAE;AAChB,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,wBAAwB,CAAC,SAAS,MAAM;AAC5C,UAAM,QAAQ,6BAA6B,oBAAoB,mBAAmB;AAClF,QAAI,YAAY,QAAQ;AACxB,QAAI,YAAY,GAAG;AACjB,kBAAY,oBAAoB,SAAS;AAAA,IAC3C,WAAW,aAAa,oBAAoB,QAAQ;AAClD,kBAAY;AAAA,IACd;AACA,0BAAsB,oBAAoB,SAAS,CAAC;AACpD,kBAAc,IAAI;AAAA,EACpB;AACA,QAAM,YAAY,oBAAoB,WAAS;AAC7C,QAAI,iBAAiB;AACrB,QAAI,MAAM,kBAAkB;AAC1B;AAAA,IACF;AACA,YAAQ,MAAM,MAAM;AAAA,MAClB,KAAK;AACH,YAAI,oBAAoB;AACtB,+BAAqB,kBAAkB;AACvC,2BAAiB;AAAA,QACnB;AACA;AAAA,MACF,KAAK;AACH,8BAAsB,EAAE;AACxB,yBAAiB;AACjB;AAAA,MACF,KAAK;AACH,8BAAsB,CAAC;AACvB,yBAAiB;AACjB;AAAA,MACF,KAAK;AACH,sBAAc,KAAK;AACnB,8BAAsB,IAAI;AAC1B,yBAAiB;AACjB;AAAA,MACF;AACE;AAAA,IACJ;AACA,QAAI,gBAAgB;AAClB,YAAM,eAAe;AAAA,IACvB;AAAA,EACF,CAAC;AACD,QAAM,SAAS,MAAM;AACnB,qBAAiB,KAAK;AAAA,EACxB;AACA,QAAM,UAAU,MAAM;AACpB,qBAAiB,IAAI;AACrB,QAAI,eAAe;AACjB,oBAAc,IAAI;AAAA,IACpB;AACA,wBAAoB,EAAE;AACtB,kBAAc,EAAE;AAAA,EAClB;AACA,QAAM,UAAU,MAAM;AACpB,kBAAc,IAAI;AAAA,EACpB;AACA,QAAM,iBAAiB,MAAM;AAC3B,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,gBAAgB,WAAS;AAC7B,UAAM,OAAO,MAAM;AACnB,kBAAc,IAAI;AAClB,wBAAoB,IAAI;AACxB,QAAI,eAAe;AACjB,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF;AACA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,IAAI;AACb,mBAAe,SAAS,MAAM;AAAA,EAChC;AAKA,QAAM,6BAA6B,WAAS;AAC1C,UAAM,gBAAgB;AAAA,EACxB;AAGA,YAAU,MAAM;AACd,UAAM,yBAAyB,oBAAoB,SAAS;AAC5D,UAAM,iCAAiC,6BAA6B,oBAAoB,mBAAmB,IAAI;AAC/G,QAAI,0BAA0B,CAAC,gCAAgC;AAE7D,4BAAsB,oBAAoB,CAAC,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,qBAAqB,kBAAkB,CAAC;AAG5C,YAAU,MAAM;AACd,UAAM,yBAAyB,oBAAoB,SAAS;AAC5D,QAAI,YAAY;AACd,YAAM,UAAU,yBAAyB;AAAA;AAAA,QACzC,GAAG,4DAA4D,6DAA6D,oBAAoB,MAAM;AAAA,QAAG,oBAAoB;AAAA,MAAM,IAAI,GAAG,aAAa;AACvM,YAAM,SAAS,QAAQ;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,qBAAqB,UAAU,CAAC;AACpC,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AAMD,SAAoB,qBAAK,eAAe;AAAA,IACtC;AAAA,IACA,UAAuB,qBAAK,aAAa;AAAA,MACvC,WAAW,KAAK,WAAW,6BAA6B;AAAA,MACxD;AAAA,MACA,IAAI,+BAA+B,UAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAuB,sBAAM,OAAO;AAAA,QAClC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,UAAU,CAAc,sBAAM,kBAAkB;AAAA,UAC9C;AAAA,UACA,UAAU,CAAc,qBAAK,WAAW;AAAA,YACtC,UAAuB,qBAAK,YAAY;AAAA,cACtC,WAAW;AAAA,cACX;AAAA,cACA,KAAK;AAAA,cACL;AAAA,cACA,OAAO,aAAa,aAAa;AAAA,cACjC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,yBAAyB,6BAA6B,oBAAoB,mBAAmB;AAAA,cAC7F,UAAU;AAAA,YACZ,CAAC;AAAA,UACH,CAAC,GAAG,aAA0B,qBAAK,SAAS,CAAC,CAAC,GAAG,cAAc,QAAQ,KAAK,KAAK,CAAC,cAA2B,qBAAK,QAAQ;AAAA,YACxH,MAAM;AAAA,YACN,MAAM;AAAA,YACN,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO,GAAG,OAAO;AAAA,UACnB,CAAC,CAAC;AAAA,QACJ,CAAC,GAAG,cAAc,CAAC,aAA0B,qBAAK,iBAAiB;AAAA,UACjE;AAAA,UAKA,OAAO;AAAA,YACL,OAAO;AAAA,YACP,OAAO;AAAA,UACT;AAAA,UACA,kBAAkB,gBAAc,WAAW;AAAA,UAC3C,aAAa;AAAA,UACb,eAAe,6BAA6B,oBAAoB,mBAAmB;AAAA,UACnF,SAAS;AAAA,UACT,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AAEH;AACA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/combobox-control/styles.js

@@ -1,8 +1,8 @@
 // packages/components/src/combobox-control/styles.ts
 import _styled from "@emotion/styled/base";
 import { css } from "@emotion/react";
-import { Flex } from "../flex";
-import { space } from "../utils/space";
+import { Flex } from "../flex/index.js";
+import { space } from "../utils/space.js";
 var deprecatedDefaultSize = ({
   __next40pxDefaultSize
 }) => !__next40pxDefaultSize && /* @__PURE__ */ css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:deprecatedDefaultSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQkkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vZmxleCc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB0eXBlIHsgQ29tYm9ib3hDb250cm9sUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgZGVwcmVjYXRlZERlZmF1bHRTaXplID0gKCB7XG5cdF9fbmV4dDQwcHhEZWZhdWx0U2l6ZSxcbn06IFBpY2s8IENvbWJvYm94Q29udHJvbFByb3BzLCAnX19uZXh0NDBweERlZmF1bHRTaXplJyA+ICkgPT5cblx0ISBfX25leHQ0MHB4RGVmYXVsdFNpemUgJiZcblx0Y3NzYFxuXHRcdGhlaWdodDogMjhweDsgLy8gMzBweCAtIDJweCB2ZXJ0aWNhbCBib3JkZXJzIG9uIHBhcmVudCBjb250YWluZXJcblx0XHRwYWRkaW5nLWxlZnQ6ICR7IHNwYWNlKCAxICkgfTtcblx0XHRwYWRkaW5nLXJpZ2h0OiAkeyBzcGFjZSggMSApIH07XG5cdGA7XG5cbmV4cG9ydCBjb25zdCBJbnB1dFdyYXBwZXJGbGV4ID0gc3R5bGVkKCBGbGV4IClgXG5cdGhlaWdodDogMzhweDsgLy8gNDBweCAtIDJweCB2ZXJ0aWNhbCBib3JkZXJzIG9uIHBhcmVudCBjb250YWluZXJcblx0cGFkZGluZy1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5cdHBhZGRpbmctcmlnaHQ6ICR7IHNwYWNlKCAyICkgfTtcblxuXHQkeyBkZXByZWNhdGVkRGVmYXVsdFNpemUgfVxuYDtcbiJdfQ== */");

package/build-module/composite/group-label.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/group-label.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeGroupLabel2 = forwardRef(function CompositeGroupLabel3(props, ref) {
   var _props$store;

package/build-module/composite/group.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/group.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeGroup2 = forwardRef(function CompositeGroup3(props, ref) {
   var _props$store;

package/build-module/composite/hover.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/hover.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeHover2 = forwardRef(function CompositeHover3(props, ref) {
   var _props$store;

package/build-module/composite/index.js

@@ -2,13 +2,13 @@
 import * as Ariakit from "@ariakit/react";
 import { isRTL } from "@wordpress/i18n";
 import { useMemo, forwardRef } from "@wordpress/element";
-import { CompositeContext } from "./context";
-import { CompositeGroup } from "./group";
-import { CompositeGroupLabel } from "./group-label";
-import { CompositeHover } from "./hover";
-import { CompositeItem } from "./item";
-import { CompositeRow } from "./row";
-import { CompositeTypeahead } from "./typeahead";
+import { CompositeContext } from "./context.js";
+import { CompositeGroup } from "./group.js";
+import { CompositeGroupLabel } from "./group-label.js";
+import { CompositeHover } from "./hover.js";
+import { CompositeItem } from "./item.js";
+import { CompositeRow } from "./row.js";
+import { CompositeTypeahead } from "./typeahead.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Composite2 = Object.assign(forwardRef(function Composite3({
   // Composite store props

package/build-module/composite/item.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/item.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeItem2 = forwardRef(function CompositeItem3(props, ref) {
   var _props$store;

package/build-module/composite/legacy/index.js

@@ -3,7 +3,7 @@ import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
 import { useInstanceId } from "@wordpress/compose";
 import deprecated from "@wordpress/deprecated";
-import { Composite as Current } from "..";
+import { Composite as Current } from "../index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function mapLegacyStatePropsToComponentProps(legacyProps) {
   if (legacyProps.state) {

package/build-module/composite/row.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/row.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeRow2 = forwardRef(function CompositeRow3(props, ref) {
   var _props$store;

package/build-module/composite/typeahead.js

@@ -1,7 +1,7 @@
 // packages/components/src/composite/typeahead.tsx
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "@wordpress/element";
-import { useCompositeContext } from "./context";
+import { useCompositeContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var CompositeTypeahead2 = forwardRef(function CompositeTypeahead3(props, ref) {
   var _props$store;

package/build-module/confirm-dialog/component.js

@@ -1,14 +1,14 @@
 // packages/components/src/confirm-dialog/component.tsx
 import { __ } from "@wordpress/i18n";
 import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
-import Modal from "../modal";
-import { useContextSystem, contextConnect } from "../context";
-import { Flex } from "../flex";
-import Button from "../button";
-import { Text } from "../text";
-import { VStack } from "../v-stack";
-import * as styles from "./styles";
-import { useCx } from "../utils/hooks/use-cx";
+import Modal from "../modal/index.js";
+import { useContextSystem, contextConnect } from "../context/index.js";
+import { Flex } from "../flex/index.js";
+import Button from "../button/index.js";
+import { Text } from "../text/index.js";
+import { VStack } from "../v-stack/index.js";
+import * as styles from "./styles.js";
+import { useCx } from "../utils/hooks/use-cx.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var UnconnectedConfirmDialog = (props, forwardedRef) => {
   const {

package/build-module/confirm-dialog/index.js

@@ -1,5 +1,5 @@
 // packages/components/src/confirm-dialog/index.tsx
-import ConfirmDialog from "./component";
+import ConfirmDialog from "./component.js";
 export {
   ConfirmDialog
 };

package/build-module/context/context-connect.js

@@ -1,8 +1,8 @@
 // packages/components/src/context/context-connect.ts
 import { forwardRef } from "@wordpress/element";
 import warn from "@wordpress/warning";
-import { CONNECT_STATIC_NAMESPACE } from "./constants";
-import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key";
+import { CONNECT_STATIC_NAMESPACE } from "./constants.js";
+import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key.js";
 function contextConnect(Component, namespace) {
   return _contextConnect(Component, namespace, {
     forwardsRef: true

package/build-module/context/context-system-provider.js

@@ -4,7 +4,7 @@ import fastDeepEqual from "fast-deep-equal/es6";
 import { isPlainObject } from "is-plain-object";
 import { createContext, useContext, useRef, useMemo, memo } from "@wordpress/element";
 import warn from "@wordpress/warning";
-import { useUpdateEffect } from "../utils";
+import { useUpdateEffect } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ComponentsContext = createContext(
   /** @type {Record<string, any>} */

package/build-module/context/index.js

@@ -1,8 +1,8 @@
 // packages/components/src/context/index.ts
-import { ContextSystemProvider, useComponentsContext } from "./context-system-provider";
-import { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace } from "./context-connect";
-import { useContextSystem } from "./use-context-system";
-export * from "./wordpress-component";
+import { ContextSystemProvider, useComponentsContext } from "./context-system-provider.js";
+import { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace } from "./context-connect.js";
+import { useContextSystem } from "./use-context-system.js";
+export * from "./wordpress-component.js";
 export {
   ContextSystemProvider,
   contextConnect,

package/build-module/context/use-context-system.js

@@ -1,9 +1,9 @@
 // packages/components/src/context/use-context-system.js
 import warn from "@wordpress/warning";
-import { useComponentsContext } from "./context-system-provider";
-import { getNamespace, getConnectedNamespace } from "./utils";
-import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key";
-import { useCx } from "../utils/hooks/use-cx";
+import { useComponentsContext } from "./context-system-provider.js";
+import { getNamespace, getConnectedNamespace } from "./utils.js";
+import { getStyledClassNameFromKey } from "./get-styled-class-name-from-key.js";
+import { useCx } from "../utils/hooks/use-cx.js";
 function useContextSystem(props, namespace) {
   const contextSystemProps = useComponentsContext();
   if (typeof namespace === "undefined") {

package/build-module/context/utils.js

@@ -1,5 +1,5 @@
 // packages/components/src/context/utils.js
-import { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from "./constants";
+import { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from "./constants.js";
 function getNamespace(componentName) {
   return {
     [COMPONENT_NAMESPACE]: componentName

package/build-module/custom-gradient-picker/gradient-bar/control-points.js

@@ -5,14 +5,14 @@ import { useInstanceId } from "@wordpress/compose";
 import { useEffect, useRef, useState, useMemo } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import { plus } from "@wordpress/icons";
-import Button from "../../button";
-import { HStack } from "../../h-stack";
-import { ColorPicker } from "../../color-picker";
-import { VisuallyHidden } from "../../visually-hidden";
-import { CustomColorPickerDropdown } from "../../color-palette";
-import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from "./utils";
-import { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from "./constants";
-import DropdownContentWrapper from "../../dropdown/dropdown-content-wrapper";
+import Button from "../../button/index.js";
+import { HStack } from "../../h-stack/index.js";
+import { ColorPicker } from "../../color-picker/index.js";
+import { VisuallyHidden } from "../../visually-hidden/index.js";
+import { CustomColorPickerDropdown } from "../../color-palette/index.js";
+import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from "./utils.js";
+import { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from "./constants.js";
+import DropdownContentWrapper from "../../dropdown/dropdown-content-wrapper.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function ControlPointButton({
   isOpen,

package/build-module/custom-gradient-picker/gradient-bar/index.js

@@ -1,9 +1,9 @@
 // packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
 import clsx from "clsx";
 import { useRef, useReducer } from "@wordpress/element";
-import ControlPoints from "./control-points";
-import { getHorizontalRelativeGradientPosition } from "./utils";
-import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from "./constants";
+import ControlPoints from "./control-points.js";
+import { getHorizontalRelativeGradientPosition } from "./utils.js";
+import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from "./constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var customGradientBarReducer = (state, action) => {
   switch (action.type) {

package/build-module/custom-gradient-picker/gradient-bar/utils.js

@@ -1,5 +1,5 @@
 // packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
-import { MINIMUM_DISTANCE_BETWEEN_POINTS } from "./constants";
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from "./constants.js";
 function clampPercent(value) {
   return Math.max(0, Math.min(100, value));
 }

package/build-module/custom-gradient-picker/index.js

@@ -1,14 +1,14 @@
 // packages/components/src/custom-gradient-picker/index.tsx
 import { __ } from "@wordpress/i18n";
-import AnglePickerControl from "../angle-picker-control";
-import CustomGradientBar from "./gradient-bar";
-import { Flex } from "../flex";
-import SelectControl from "../select-control";
-import { VStack } from "../v-stack";
-import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from "./utils";
-import { serializeGradient } from "./serializer";
-import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from "./constants";
-import { AccessoryWrapper, SelectWrapper } from "./styles/custom-gradient-picker-styles";
+import AnglePickerControl from "../angle-picker-control/index.js";
+import CustomGradientBar from "./gradient-bar/index.js";
+import { Flex } from "../flex/index.js";
+import SelectControl from "../select-control/index.js";
+import { VStack } from "../v-stack/index.js";
+import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from "./utils.js";
+import { serializeGradient } from "./serializer.js";
+import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from "./constants.js";
+import { AccessoryWrapper, SelectWrapper } from "./styles/custom-gradient-picker-styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var GradientAnglePicker = ({
   gradientAST,
@@ -65,7 +65,6 @@ var GradientTypePicker = ({
     }
   };
   return /* @__PURE__ */ _jsx(SelectControl, {
-    __nextHasNoMarginBottom: true,
     className: "components-custom-gradient-picker__type-picker",
     label: __("Type"),
     labelPosition: "top",

package/build-module/custom-gradient-picker/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  var _gradientAST$orientat;\n  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    __nextHasNoMarginBottom: true,\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  var _gradientAST$orientat;\n  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js

@@ -1,6 +1,6 @@
 // packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
 import _styled from "@emotion/styled/base";
-import { FlexBlock } from "../../flex";
+import { FlexBlock } from "../../flex/index.js";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }

package/build-module/custom-gradient-picker/utils.js

@@ -2,8 +2,8 @@
 import gradientParser from "gradient-parser";
 import { colord, extend } from "colord";
 import namesPlugin from "colord/plugins/names";
-import { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from "./constants";
-import { serializeGradient } from "./serializer";
+import { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from "./constants.js";
+import { serializeGradient } from "./serializer.js";
 extend([namesPlugin]);
 function getLinearGradientRepresentation(gradientAST) {
   return serializeGradient({

package/build-module/custom-select-control/index.js

@@ -3,11 +3,11 @@ import * as Ariakit from "@ariakit/react";
 import clsx from "clsx";
 import { useInstanceId } from "@wordpress/compose";
 import { __, sprintf } from "@wordpress/i18n";
-import _CustomSelect from "../custom-select-control-v2/custom-select";
-import CustomSelectItem from "../custom-select-control-v2/item";
-import * as Styled from "../custom-select-control-v2/styles";
-import { VisuallyHidden } from "../visually-hidden";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
+import _CustomSelect from "../custom-select-control-v2/custom-select.js";
+import CustomSelectItem from "../custom-select-control-v2/item.js";
+import * as Styled from "../custom-select-control-v2/styles.js";
+import { VisuallyHidden } from "../visually-hidden/index.js";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function useDeprecatedProps({
   __experimentalShowSelectedHint,

package/build-module/custom-select-control-v2/custom-select.js

@@ -2,11 +2,11 @@
 import * as Ariakit from "@ariakit/react";
 import { createContext, useCallback, useMemo } from "@wordpress/element";
 import { __, _n, sprintf } from "@wordpress/i18n";
-import { VisuallyHidden } from "../visually-hidden";
-import * as Styled from "./styles";
-import InputBase from "../input-control/input-base";
-import SelectControlChevronDown from "../select-control/chevron-down";
-import BaseControl from "../base-control";
+import { VisuallyHidden } from "../visually-hidden/index.js";
+import * as Styled from "./styles.js";
+import InputBase from "../input-control/input-base.js";
+import SelectControlChevronDown from "../select-control/chevron-down.js";
+import BaseControl from "../base-control/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var CustomSelectContext = createContext(void 0);
 CustomSelectContext.displayName = "CustomSelectContext";

package/build-module/custom-select-control-v2/index.js

@@ -1,7 +1,7 @@
 // packages/components/src/custom-select-control-v2/index.tsx
 import * as Ariakit from "@ariakit/react";
-import _CustomSelect from "./custom-select";
-import Item from "./item";
+import _CustomSelect from "./custom-select.js";
+import Item from "./item.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CustomSelectControlV2(props) {
   const {