@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

package/build-module/range-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/range-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport { clamp } from '../utils/math';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from './styles/range-control-styles';\nimport { space } from '../utils/space';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Computes the value that `RangeControl` should reset to when pressing\n * the reset button.\n */\nfunction computeResetValue({\n  resetFallbackValue,\n  initialPosition\n}) {\n  if (resetFallbackValue !== undefined) {\n    return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null;\n  }\n  if (initialPosition !== undefined) {\n    return !Number.isNaN(initialPosition) ? initialPosition : null;\n  }\n  return null;\n}\nfunction UnforwardedRangeControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing to internal component\n    afterIcon,\n    allowReset = false,\n    beforeIcon,\n    className,\n    color: colorProp = COLORS.theme.accent,\n    currentInput,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    initialPosition,\n    isShiftStepEnabled = true,\n    label,\n    marks = false,\n    max = 100,\n    min = 0,\n    onBlur = noop,\n    onChange = noop,\n    onFocus = noop,\n    onMouseLeave = noop,\n    onMouseMove = noop,\n    railColor,\n    renderTooltipContent = v => v,\n    resetFallbackValue,\n    __next40pxDefaultSize = false,\n    shiftStep = 10,\n    showTooltip: showTooltipProp,\n    step = 1,\n    trackColor,\n    value: valueProp,\n    withInputField = true,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = props;\n  const [value, setValue] = useControlledRangeValue({\n    min,\n    max,\n    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,\n    initial: initialPosition\n  });\n  const isResetPendent = useRef(false);\n  let hasTooltip = showTooltipProp;\n  let hasInputField = withInputField;\n  if (step === 'any') {\n    // The tooltip and number input field are hidden when the step is \"any\"\n    // because the decimals get too lengthy to fit well.\n    hasTooltip = false;\n    hasInputField = false;\n  }\n  const [showTooltip, setShowTooltip] = useState(hasTooltip);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef();\n  const isCurrentlyFocused = inputRef.current?.matches(':focus');\n  const isThumbFocused = !disabled && isFocused;\n  const isValueReset = value === null;\n  const currentValue = value !== undefined ? value : currentInput;\n  const inputSliderValue = isValueReset ? '' : currentValue;\n  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;\n  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;\n  const fillValueOffset = `${clamp(fillValue, 0, 100)}%`;\n  const classes = clsx('components-range-control', className);\n  const wrapperClasses = clsx('components-range-control__wrapper', !!marks && 'is-marked');\n  const id = useInstanceId(UnforwardedRangeControl, 'inspector-range-control');\n  const describedBy = !!help ? `${id}__help` : undefined;\n  const enableTooltip = hasTooltip !== false && Number.isFinite(value);\n  const handleOnRangeChange = event => {\n    const nextValue = parseFloat(event.target.value);\n    setValue(nextValue);\n    onChange(nextValue);\n  };\n  const handleOnChange = next => {\n    // @ts-expect-error TODO: Investigate if it's problematic for setValue() to\n    // potentially receive a NaN when next is undefined.\n    let nextValue = parseFloat(next);\n    setValue(nextValue);\n\n    /*\n     * Calls onChange only when nextValue is numeric\n     * otherwise may queue a reset for the blur event.\n     */\n    if (!isNaN(nextValue)) {\n      if (nextValue < min || nextValue > max) {\n        nextValue = floatClamp(nextValue, min, max);\n      }\n      onChange(nextValue);\n      isResetPendent.current = false;\n    } else if (allowReset) {\n      isResetPendent.current = true;\n    }\n  };\n  const handleOnInputNumberBlur = () => {\n    if (isResetPendent.current) {\n      handleOnReset();\n      isResetPendent.current = false;\n    }\n  };\n  const handleOnReset = () => {\n    // Reset to `resetFallbackValue` if defined, otherwise set internal value\n    // to `null` \u2014 which, if propagated to the `value` prop, will cause\n    // the value to be reset to the `initialPosition` prop if defined.\n    const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null;\n    setValue(resetValue);\n\n    /**\n     * Previously, this callback would always receive undefined as\n     * an argument. This behavior is unexpected, specifically\n     * when resetFallbackValue is defined.\n     *\n     * The value of undefined is not ideal. Passing it through\n     * to internal <input /> elements would change it from a\n     * controlled component to an uncontrolled component.\n     *\n     * For now, to minimize unexpected regressions, we're going to\n     * preserve the undefined callback argument, except when a\n     * resetFallbackValue is defined.\n     */\n    onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined);\n  };\n  const handleShowTooltip = () => setShowTooltip(true);\n  const handleHideTooltip = () => setShowTooltip(false);\n  const handleOnBlur = event => {\n    onBlur(event);\n    setIsFocused(false);\n    handleHideTooltip();\n  };\n  const handleOnFocus = event => {\n    onFocus(event);\n    setIsFocused(true);\n    handleShowTooltip();\n  };\n  const offsetStyle = {\n    [isRTL() ? 'right' : 'left']: fillValueOffset\n  };\n\n  // Add default size deprecation warning.\n  maybeWarnDeprecated36pxSize({\n    componentName: 'RangeControl',\n    __next40pxDefaultSize,\n    size: undefined,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: `${id}`,\n    help: help,\n    children: /*#__PURE__*/_jsxs(Root, {\n      className: \"components-range-control__root\",\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: [beforeIcon && /*#__PURE__*/_jsx(BeforeIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: beforeIcon\n        })\n      }), /*#__PURE__*/_jsxs(Wrapper, {\n        className: wrapperClasses,\n        color: colorProp,\n        marks: !!marks,\n        children: [/*#__PURE__*/_jsx(InputRange, {\n          ...otherProps,\n          className: \"components-range-control__slider\",\n          describedBy: describedBy,\n          disabled: disabled,\n          id: `${id}`,\n          label: label,\n          max: max,\n          min: min,\n          onBlur: handleOnBlur,\n          onChange: handleOnRangeChange,\n          onFocus: handleOnFocus,\n          onMouseMove: onMouseMove,\n          onMouseLeave: onMouseLeave,\n          ref: useMergeRefs([inputRef, forwardedRef]),\n          step: step,\n          value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined\n        }), /*#__PURE__*/_jsx(RangeRail, {\n          \"aria-hidden\": true,\n          disabled: disabled,\n          marks: marks,\n          max: max,\n          min: min,\n          railColor: railColor,\n          step: step,\n          value: rangeFillValue\n        }), /*#__PURE__*/_jsx(Track, {\n          \"aria-hidden\": true,\n          className: \"components-range-control__track\",\n          disabled: disabled,\n          style: {\n            width: fillValueOffset\n          },\n          trackColor: trackColor\n        }), /*#__PURE__*/_jsx(ThumbWrapper, {\n          className: \"components-range-control__thumb-wrapper\",\n          style: offsetStyle,\n          disabled: disabled,\n          children: /*#__PURE__*/_jsx(Thumb, {\n            \"aria-hidden\": true,\n            isFocused: isThumbFocused,\n            disabled: disabled\n          })\n        }), enableTooltip && /*#__PURE__*/_jsx(SimpleTooltip, {\n          className: \"components-range-control__tooltip\",\n          inputRef: inputRef,\n          tooltipPlacement: \"bottom\",\n          renderTooltipContent: renderTooltipContent,\n          show: isCurrentlyFocused || showTooltip,\n          style: offsetStyle,\n          value: value\n        })]\n      }), afterIcon && /*#__PURE__*/_jsx(AfterIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: afterIcon\n        })\n      }), hasInputField && /*#__PURE__*/_jsx(InputNumber, {\n        \"aria-label\": label,\n        className: \"components-range-control__number\",\n        disabled: disabled,\n        inputMode: \"decimal\",\n        isShiftStepEnabled: isShiftStepEnabled,\n        max: max,\n        min: min,\n        onBlur: handleOnInputNumberBlur,\n        onChange: handleOnChange,\n        shiftStep: shiftStep,\n        size: __next40pxDefaultSize ? '__unstable-large' : 'default',\n        __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),\n        step: step\n        // @ts-expect-error TODO: Investigate if the `null` value is necessary\n        ,\n        value: inputSliderValue,\n        __shouldNotWarnDeprecated36pxSize: true\n      }), allowReset && /*#__PURE__*/_jsx(ActionRightWrapper, {\n        children: /*#__PURE__*/_jsx(Button, {\n          className: \"components-range-control__reset\"\n          // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.\n          ,\n          accessibleWhenDisabled: !disabled\n          // The reset button should be disabled if RangeControl itself is disabled,\n          // or if the current `value` is equal to the value that would be currently\n          // assigned when clicking the button.\n          ,\n          disabled: disabled || value === computeResetValue({\n            resetFallbackValue,\n            initialPosition\n          }),\n          variant: \"secondary\",\n          size: \"small\",\n          onClick: handleOnReset,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n}\n\n/**\n * RangeControls are used to make selections from a range of incremental values.\n *\n * ```jsx\n * import { RangeControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRangeControl = () => {\n *   const [ value, setValue ] = useState();\n *   return (\n *     <RangeControl\n *       __next40pxDefaultSize\n *       help=\"Please select how transparent you would like this.\"\n *       initialPosition={ 50 }\n *       label=\"Opacity\"\n *       max={ 100 }\n *       min={ 0 }\n *       value={ value }\n *       onChange={ setValue }\n *     />\n *   );\n * };\n * ```\n */\nexport const RangeControl = forwardRef(UnforwardedRangeControl);\nexport default RangeControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport { clamp } from '../utils/math';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from './styles/range-control-styles';\nimport { space } from '../utils/space';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Computes the value that `RangeControl` should reset to when pressing\n * the reset button.\n */\nfunction computeResetValue({\n  resetFallbackValue,\n  initialPosition\n}) {\n  if (resetFallbackValue !== undefined) {\n    return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null;\n  }\n  if (initialPosition !== undefined) {\n    return !Number.isNaN(initialPosition) ? initialPosition : null;\n  }\n  return null;\n}\nfunction UnforwardedRangeControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing to internal component\n    afterIcon,\n    allowReset = false,\n    beforeIcon,\n    className,\n    color: colorProp = COLORS.theme.accent,\n    currentInput,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    initialPosition,\n    isShiftStepEnabled = true,\n    label,\n    marks = false,\n    max = 100,\n    min = 0,\n    onBlur = noop,\n    onChange = noop,\n    onFocus = noop,\n    onMouseLeave = noop,\n    onMouseMove = noop,\n    railColor,\n    renderTooltipContent = v => v,\n    resetFallbackValue,\n    __next40pxDefaultSize = false,\n    shiftStep = 10,\n    showTooltip: showTooltipProp,\n    step = 1,\n    trackColor,\n    value: valueProp,\n    withInputField = true,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = props;\n  const [value, setValue] = useControlledRangeValue({\n    min,\n    max,\n    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,\n    initial: initialPosition\n  });\n  const isResetPendent = useRef(false);\n  let hasTooltip = showTooltipProp;\n  let hasInputField = withInputField;\n  if (step === 'any') {\n    // The tooltip and number input field are hidden when the step is \"any\"\n    // because the decimals get too lengthy to fit well.\n    hasTooltip = false;\n    hasInputField = false;\n  }\n  const [showTooltip, setShowTooltip] = useState(hasTooltip);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef();\n  const isCurrentlyFocused = inputRef.current?.matches(':focus');\n  const isThumbFocused = !disabled && isFocused;\n  const isValueReset = value === null;\n  const currentValue = value !== undefined ? value : currentInput;\n  const inputSliderValue = isValueReset ? '' : currentValue;\n  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;\n  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;\n  const fillValueOffset = `${clamp(fillValue, 0, 100)}%`;\n  const classes = clsx('components-range-control', className);\n  const wrapperClasses = clsx('components-range-control__wrapper', !!marks && 'is-marked');\n  const id = useInstanceId(UnforwardedRangeControl, 'inspector-range-control');\n  const describedBy = !!help ? `${id}__help` : undefined;\n  const enableTooltip = hasTooltip !== false && Number.isFinite(value);\n  const handleOnRangeChange = event => {\n    const nextValue = parseFloat(event.target.value);\n    setValue(nextValue);\n    onChange(nextValue);\n  };\n  const handleOnChange = next => {\n    // @ts-expect-error TODO: Investigate if it's problematic for setValue() to\n    // potentially receive a NaN when next is undefined.\n    let nextValue = parseFloat(next);\n    setValue(nextValue);\n\n    /*\n     * Calls onChange only when nextValue is numeric\n     * otherwise may queue a reset for the blur event.\n     */\n    if (!isNaN(nextValue)) {\n      if (nextValue < min || nextValue > max) {\n        nextValue = floatClamp(nextValue, min, max);\n      }\n      onChange(nextValue);\n      isResetPendent.current = false;\n    } else if (allowReset) {\n      isResetPendent.current = true;\n    }\n  };\n  const handleOnInputNumberBlur = () => {\n    if (isResetPendent.current) {\n      handleOnReset();\n      isResetPendent.current = false;\n    }\n  };\n  const handleOnReset = () => {\n    // Reset to `resetFallbackValue` if defined, otherwise set internal value\n    // to `null` \u2014 which, if propagated to the `value` prop, will cause\n    // the value to be reset to the `initialPosition` prop if defined.\n    const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null;\n    setValue(resetValue);\n\n    /**\n     * Previously, this callback would always receive undefined as\n     * an argument. This behavior is unexpected, specifically\n     * when resetFallbackValue is defined.\n     *\n     * The value of undefined is not ideal. Passing it through\n     * to internal <input /> elements would change it from a\n     * controlled component to an uncontrolled component.\n     *\n     * For now, to minimize unexpected regressions, we're going to\n     * preserve the undefined callback argument, except when a\n     * resetFallbackValue is defined.\n     */\n    onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined);\n  };\n  const handleShowTooltip = () => setShowTooltip(true);\n  const handleHideTooltip = () => setShowTooltip(false);\n  const handleOnBlur = event => {\n    onBlur(event);\n    setIsFocused(false);\n    handleHideTooltip();\n  };\n  const handleOnFocus = event => {\n    onFocus(event);\n    setIsFocused(true);\n    handleShowTooltip();\n  };\n  const offsetStyle = {\n    [isRTL() ? 'right' : 'left']: fillValueOffset\n  };\n\n  // Add default size deprecation warning.\n  maybeWarnDeprecated36pxSize({\n    componentName: 'RangeControl',\n    __next40pxDefaultSize,\n    size: undefined,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: `${id}`,\n    help: help,\n    children: /*#__PURE__*/_jsxs(Root, {\n      className: \"components-range-control__root\",\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: [beforeIcon && /*#__PURE__*/_jsx(BeforeIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: beforeIcon\n        })\n      }), /*#__PURE__*/_jsxs(Wrapper, {\n        className: wrapperClasses,\n        color: colorProp,\n        marks: !!marks,\n        children: [/*#__PURE__*/_jsx(InputRange, {\n          ...otherProps,\n          className: \"components-range-control__slider\",\n          describedBy: describedBy,\n          disabled: disabled,\n          id: `${id}`,\n          label: label,\n          max: max,\n          min: min,\n          onBlur: handleOnBlur,\n          onChange: handleOnRangeChange,\n          onFocus: handleOnFocus,\n          onMouseMove: onMouseMove,\n          onMouseLeave: onMouseLeave,\n          ref: useMergeRefs([inputRef, forwardedRef]),\n          step: step,\n          value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined\n        }), /*#__PURE__*/_jsx(RangeRail, {\n          \"aria-hidden\": true,\n          disabled: disabled,\n          marks: marks,\n          max: max,\n          min: min,\n          railColor: railColor,\n          step: step,\n          value: rangeFillValue\n        }), /*#__PURE__*/_jsx(Track, {\n          \"aria-hidden\": true,\n          className: \"components-range-control__track\",\n          disabled: disabled,\n          style: {\n            width: fillValueOffset\n          },\n          trackColor: trackColor\n        }), /*#__PURE__*/_jsx(ThumbWrapper, {\n          className: \"components-range-control__thumb-wrapper\",\n          style: offsetStyle,\n          disabled: disabled,\n          children: /*#__PURE__*/_jsx(Thumb, {\n            \"aria-hidden\": true,\n            isFocused: isThumbFocused,\n            disabled: disabled\n          })\n        }), enableTooltip && /*#__PURE__*/_jsx(SimpleTooltip, {\n          className: \"components-range-control__tooltip\",\n          inputRef: inputRef,\n          tooltipPlacement: \"bottom\",\n          renderTooltipContent: renderTooltipContent,\n          show: isCurrentlyFocused || showTooltip,\n          style: offsetStyle,\n          value: value\n        })]\n      }), afterIcon && /*#__PURE__*/_jsx(AfterIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: afterIcon\n        })\n      }), hasInputField && /*#__PURE__*/_jsx(InputNumber, {\n        \"aria-label\": label,\n        className: \"components-range-control__number\",\n        disabled: disabled,\n        inputMode: \"decimal\",\n        isShiftStepEnabled: isShiftStepEnabled,\n        max: max,\n        min: min,\n        onBlur: handleOnInputNumberBlur,\n        onChange: handleOnChange,\n        shiftStep: shiftStep,\n        size: __next40pxDefaultSize ? '__unstable-large' : 'default',\n        __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),\n        step: step\n        // @ts-expect-error TODO: Investigate if the `null` value is necessary\n        ,\n        value: inputSliderValue,\n        __shouldNotWarnDeprecated36pxSize: true\n      }), allowReset && /*#__PURE__*/_jsx(ActionRightWrapper, {\n        children: /*#__PURE__*/_jsx(Button, {\n          className: \"components-range-control__reset\"\n          // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.\n          ,\n          accessibleWhenDisabled: !disabled\n          // The reset button should be disabled if RangeControl itself is disabled,\n          // or if the current `value` is equal to the value that would be currently\n          // assigned when clicking the button.\n          ,\n          disabled: disabled || value === computeResetValue({\n            resetFallbackValue,\n            initialPosition\n          }),\n          variant: \"secondary\",\n          size: \"small\",\n          onClick: handleOnReset,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n}\n\n/**\n * RangeControls are used to make selections from a range of incremental values.\n *\n * ```jsx\n * import { RangeControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRangeControl = () => {\n *   const [ value, setValue ] = useState();\n *   return (\n *     <RangeControl\n *       __next40pxDefaultSize\n *       help=\"Please select how transparent you would like this.\"\n *       initialPosition={ 50 }\n *       label=\"Opacity\"\n *       max={ 100 }\n *       min={ 0 }\n *       value={ value }\n *       onChange={ setValue }\n *     />\n *   );\n * };\n * ```\n */\nexport const RangeControl = forwardRef(UnforwardedRangeControl);\nRangeControl.displayName = 'RangeControl';\nexport default RangeControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,IAAI,aAAa;AAC1B,SAAS,QAAQ,UAAU,kBAAkB;AAC7C,SAAS,eAAe,oBAAoB;AAK5C,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,SAAS,YAAY,+BAA+B;AACpD,SAAS,aAAa;AACtB,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,SAAS,oBAAoB,kBAAkB,mBAAmB,aAAa,MAAM,OAAO,cAAc,OAAO,eAAe;AAChI,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AAMpB,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAAG;AACD,MAAI,uBAAuB,QAAW;AACpC,WAAO,CAAC,OAAO,MAAM,kBAAkB,IAAI,qBAAqB;AAAA,EAClE;AACA,MAAI,oBAAoB,QAAW;AACjC,WAAO,CAAC,OAAO,MAAM,eAAe,IAAI,kBAAkB;AAAA,EAC5D;AACA,SAAO;AACT;AACA,SAAS,wBAAwB,OAAO,cAAc;AACpD,QAAM;AAAA,IACJ,yBAAyB;AAAA;AAAA,IAEzB;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,OAAO,YAAY,OAAO,MAAM;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,uBAAuB,OAAK;AAAA,IAC5B;AAAA,IACA,wBAAwB;AAAA,IACxB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,wBAAwB;AAAA,IAChD;AAAA,IACA;AAAA,IACA,OAAO,cAAc,QAAQ,cAAc,SAAS,YAAY;AAAA,IAChE,SAAS;AAAA,EACX,CAAC;AACD,QAAM,iBAAiB,OAAO,KAAK;AACnC,MAAI,aAAa;AACjB,MAAI,gBAAgB;AACpB,MAAI,SAAS,OAAO;AAGlB,iBAAa;AACb,oBAAgB;AAAA,EAClB;AACA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,UAAU;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,WAAW,OAAO;AACxB,QAAM,qBAAqB,SAAS,SAAS,QAAQ,QAAQ;AAC7D,QAAM,iBAAiB,CAAC,YAAY;AACpC,QAAM,eAAe,UAAU;AAC/B,QAAM,eAAe,UAAU,SAAY,QAAQ;AACnD,QAAM,mBAAmB,eAAe,KAAK;AAC7C,QAAM,iBAAiB,gBAAgB,MAAM,OAAO,IAAI,MAAM;AAC9D,QAAM,YAAY,eAAe,MAAM,QAAQ,QAAQ,MAAM,OAAO;AACpE,QAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,GAAG,CAAC;AACnD,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAC1D,QAAM,iBAAiB,KAAK,qCAAqC,CAAC,CAAC,SAAS,WAAW;AACvF,QAAM,KAAK,cAAc,yBAAyB,yBAAyB;AAC3E,QAAM,cAAc,CAAC,CAAC,OAAO,GAAG,EAAE,WAAW;AAC7C,QAAM,gBAAgB,eAAe,SAAS,OAAO,SAAS,KAAK;AACnE,QAAM,sBAAsB,WAAS;AACnC,UAAM,YAAY,WAAW,MAAM,OAAO,KAAK;AAC/C,aAAS,SAAS;AAClB,aAAS,SAAS;AAAA,EACpB;AACA,QAAM,iBAAiB,UAAQ;AAG7B,QAAI,YAAY,WAAW,IAAI;AAC/B,aAAS,SAAS;AAMlB,QAAI,CAAC,MAAM,SAAS,GAAG;AACrB,UAAI,YAAY,OAAO,YAAY,KAAK;AACtC,oBAAY,WAAW,WAAW,KAAK,GAAG;AAAA,MAC5C;AACA,eAAS,SAAS;AAClB,qBAAe,UAAU;AAAA,IAC3B,WAAW,YAAY;AACrB,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF;AACA,QAAM,0BAA0B,MAAM;AACpC,QAAI,eAAe,SAAS;AAC1B,oBAAc;AACd,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF;AACA,QAAM,gBAAgB,MAAM;AAI1B,UAAM,aAAa,OAAO,MAAM,kBAAkB,IAAI,OAAO,uBAAuB,QAAQ,uBAAuB,SAAS,qBAAqB;AACjJ,aAAS,UAAU;AAenB,aAAS,eAAe,QAAQ,eAAe,SAAS,aAAa,MAAS;AAAA,EAChF;AACA,QAAM,oBAAoB,MAAM,eAAe,IAAI;AACnD,QAAM,oBAAoB,MAAM,eAAe,KAAK;AACpD,QAAM,eAAe,WAAS;AAC5B,WAAO,KAAK;AACZ,iBAAa,KAAK;AAClB,sBAAkB;AAAA,EACpB;AACA,QAAM,gBAAgB,WAAS;AAC7B,YAAQ,KAAK;AACb,iBAAa,IAAI;AACjB,sBAAkB;AAAA,EACpB;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAM,IAAI,UAAU,MAAM,GAAG;AAAA,EAChC;AAGA,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,IAAI,GAAG,EAAE;AAAA,IACT;AAAA,IACA,UAAuB,sBAAM,MAAM;AAAA,MACjC,WAAW;AAAA,MACX;AAAA,MACA,UAAU,CAAC,cAA2B,qBAAK,mBAAmB;AAAA,QAC5D,UAAuB,qBAAK,MAAM;AAAA,UAChC,MAAM;AAAA,QACR,CAAC;AAAA,MACH,CAAC,GAAgB,sBAAM,SAAS;AAAA,QAC9B,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO,CAAC,CAAC;AAAA,QACT,UAAU,CAAc,qBAAK,YAAY;AAAA,UACvC,GAAG;AAAA,UACH,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,IAAI,GAAG,EAAE;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,KAAK,aAAa,CAAC,UAAU,YAAY,CAAC;AAAA,UAC1C;AAAA,UACA,OAAO,qBAAqB,QAAQ,qBAAqB,SAAS,mBAAmB;AAAA,QACvF,CAAC,GAAgB,qBAAK,WAAW;AAAA,UAC/B,eAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,QACT,CAAC,GAAgB,qBAAK,OAAO;AAAA,UAC3B,eAAe;AAAA,UACf,WAAW;AAAA,UACX;AAAA,UACA,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC,GAAgB,qBAAK,cAAc;AAAA,UAClC,WAAW;AAAA,UACX,OAAO;AAAA,UACP;AAAA,UACA,UAAuB,qBAAK,OAAO;AAAA,YACjC,eAAe;AAAA,YACf,WAAW;AAAA,YACX;AAAA,UACF,CAAC;AAAA,QACH,CAAC,GAAG,iBAA8B,qBAAK,eAAe;AAAA,UACpD,WAAW;AAAA,UACX;AAAA,UACA,kBAAkB;AAAA,UAClB;AAAA,UACA,MAAM,sBAAsB;AAAA,UAC5B,OAAO;AAAA,UACP;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC,GAAG,aAA0B,qBAAK,kBAAkB;AAAA,QACnD,UAAuB,qBAAK,MAAM;AAAA,UAChC,MAAM;AAAA,QACR,CAAC;AAAA,MACH,CAAC,GAAG,iBAA8B,qBAAK,aAAa;AAAA,QAClD,cAAc;AAAA,QACd,WAAW;AAAA,QACX;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,UAAU;AAAA,QACV;AAAA,QACA,MAAM,wBAAwB,qBAAqB;AAAA,QACnD,sBAAsB,wBAAwB,MAAM,EAAE,IAAI,MAAM,EAAE;AAAA,QAClE;AAAA,QAGA,OAAO;AAAA,QACP,mCAAmC;AAAA,MACrC,CAAC,GAAG,cAA2B,qBAAK,oBAAoB;AAAA,QACtD,UAAuB,qBAAK,QAAQ;AAAA,UAClC,WAAW;AAAA,UAGX,wBAAwB,CAAC;AAAA,UAKzB,UAAU,YAAY,UAAU,kBAAkB;AAAA,YAChD;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UACD,SAAS;AAAA,UACT,MAAM;AAAA,UACN,SAAS;AAAA,UACT,UAAU,GAAG,OAAO;AAAA,QACtB,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AA0BO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/resizable-box/index.mjs

@@ -58,6 +58,7 @@ function UnforwardedResizableBox({
   });
 }
 var ResizableBox = forwardRef(UnforwardedResizableBox);
+ResizableBox.displayName = "ResizableBox";
 var resizable_box_default = ResizableBox;
 export {
   ResizableBox,

package/build-module/resizable-box/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/resizable-box/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { Resizable } from 're-resizable';\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\nconst HANDLE_CLASSES = {\n  top: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),\n  right: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),\n  bottom: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),\n  left: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),\n  topLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),\n  topRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),\n  bottomRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),\n  bottomLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n  width: undefined,\n  height: undefined,\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nconst HANDLE_STYLES = {\n  top: HANDLE_STYLES_OVERRIDES,\n  right: HANDLE_STYLES_OVERRIDES,\n  bottom: HANDLE_STYLES_OVERRIDES,\n  left: HANDLE_STYLES_OVERRIDES,\n  topLeft: HANDLE_STYLES_OVERRIDES,\n  topRight: HANDLE_STYLES_OVERRIDES,\n  bottomRight: HANDLE_STYLES_OVERRIDES,\n  bottomLeft: HANDLE_STYLES_OVERRIDES\n};\nfunction UnforwardedResizableBox({\n  className,\n  children,\n  showHandle = true,\n  __experimentalShowTooltip: showTooltip = false,\n  __experimentalTooltipProps: tooltipProps = {},\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsxs(Resizable, {\n    className: clsx('components-resizable-box__container', showHandle && 'has-show-handle', className)\n    // Add a focusable element within the drag handle. Unfortunately,\n    // `re-resizable` does not make them properly focusable by default,\n    // causing focus to move the the block wrapper which triggers block\n    // drag.\n    ,\n    handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/_jsx(\"div\", {\n      tabIndex: -1\n    }, key)])),\n    handleClasses: HANDLE_CLASSES,\n    handleStyles: HANDLE_STYLES,\n    ref: ref,\n    ...props,\n    children: [children, showTooltip && /*#__PURE__*/_jsx(ResizeTooltip, {\n      ...tooltipProps\n    })]\n  });\n}\nexport const ResizableBox = forwardRef(UnforwardedResizableBox);\nexport default ResizableBox;"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAK3B,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAI1B,OAAO,mBAAmB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,2BAA2B;AACjC,IAAM,iBAAiB;AAAA,EACrB,KAAK,KAAK,mBAAmB,wBAAwB,sCAAsC;AAAA,EAC3F,OAAO,KAAK,mBAAmB,wBAAwB,wCAAwC;AAAA,EAC/F,QAAQ,KAAK,mBAAmB,wBAAwB,yCAAyC;AAAA,EACjG,MAAM,KAAK,mBAAmB,wBAAwB,uCAAuC;AAAA,EAC7F,SAAS,KAAK,mBAAmB,0BAA0B,wCAAwC,uCAAuC;AAAA,EAC1I,UAAU,KAAK,mBAAmB,0BAA0B,wCAAwC,wCAAwC;AAAA,EAC5I,aAAa,KAAK,mBAAmB,0BAA0B,2CAA2C,wCAAwC;AAAA,EAClJ,YAAY,KAAK,mBAAmB,0BAA0B,2CAA2C,uCAAuC;AAClJ;AAGA,IAAM,0BAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AACA,IAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AACd;AACA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,2BAA2B,cAAc;AAAA,EACzC,4BAA4B,eAAe,CAAC;AAAA,EAC5C,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,sBAAM,WAAW;AAAA,IACnC,WAAW,KAAK,uCAAuC,cAAc,mBAAmB,SAAS;AAAA,IAMjG,iBAAiB,OAAO,YAAY,OAAO,KAAK,cAAc,EAAE,IAAI,SAAO,CAAC,KAAkB,qBAAK,OAAO;AAAA,MACxG,UAAU;AAAA,IACZ,GAAG,GAAG,CAAC,CAAC,CAAC;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAC,UAAU,eAA4B,qBAAK,eAAe;AAAA,MACnE,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { Resizable } from 're-resizable';\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\nconst HANDLE_CLASSES = {\n  top: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),\n  right: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),\n  bottom: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),\n  left: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),\n  topLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),\n  topRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),\n  bottomRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),\n  bottomLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n  width: undefined,\n  height: undefined,\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nconst HANDLE_STYLES = {\n  top: HANDLE_STYLES_OVERRIDES,\n  right: HANDLE_STYLES_OVERRIDES,\n  bottom: HANDLE_STYLES_OVERRIDES,\n  left: HANDLE_STYLES_OVERRIDES,\n  topLeft: HANDLE_STYLES_OVERRIDES,\n  topRight: HANDLE_STYLES_OVERRIDES,\n  bottomRight: HANDLE_STYLES_OVERRIDES,\n  bottomLeft: HANDLE_STYLES_OVERRIDES\n};\nfunction UnforwardedResizableBox({\n  className,\n  children,\n  showHandle = true,\n  __experimentalShowTooltip: showTooltip = false,\n  __experimentalTooltipProps: tooltipProps = {},\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsxs(Resizable, {\n    className: clsx('components-resizable-box__container', showHandle && 'has-show-handle', className)\n    // Add a focusable element within the drag handle. Unfortunately,\n    // `re-resizable` does not make them properly focusable by default,\n    // causing focus to move the the block wrapper which triggers block\n    // drag.\n    ,\n    handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/_jsx(\"div\", {\n      tabIndex: -1\n    }, key)])),\n    handleClasses: HANDLE_CLASSES,\n    handleStyles: HANDLE_STYLES,\n    ref: ref,\n    ...props,\n    children: [children, showTooltip && /*#__PURE__*/_jsx(ResizeTooltip, {\n      ...tooltipProps\n    })]\n  });\n}\nexport const ResizableBox = forwardRef(UnforwardedResizableBox);\nResizableBox.displayName = 'ResizableBox';\nexport default ResizableBox;"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAK3B,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAI1B,OAAO,mBAAmB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,2BAA2B;AACjC,IAAM,iBAAiB;AAAA,EACrB,KAAK,KAAK,mBAAmB,wBAAwB,sCAAsC;AAAA,EAC3F,OAAO,KAAK,mBAAmB,wBAAwB,wCAAwC;AAAA,EAC/F,QAAQ,KAAK,mBAAmB,wBAAwB,yCAAyC;AAAA,EACjG,MAAM,KAAK,mBAAmB,wBAAwB,uCAAuC;AAAA,EAC7F,SAAS,KAAK,mBAAmB,0BAA0B,wCAAwC,uCAAuC;AAAA,EAC1I,UAAU,KAAK,mBAAmB,0BAA0B,wCAAwC,wCAAwC;AAAA,EAC5I,aAAa,KAAK,mBAAmB,0BAA0B,2CAA2C,wCAAwC;AAAA,EAClJ,YAAY,KAAK,mBAAmB,0BAA0B,2CAA2C,uCAAuC;AAClJ;AAGA,IAAM,0BAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AACA,IAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AACd;AACA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,2BAA2B,cAAc;AAAA,EACzC,4BAA4B,eAAe,CAAC;AAAA,EAC5C,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,sBAAM,WAAW;AAAA,IACnC,WAAW,KAAK,uCAAuC,cAAc,mBAAmB,SAAS;AAAA,IAMjG,iBAAiB,OAAO,YAAY,OAAO,KAAK,cAAc,EAAE,IAAI,SAAO,CAAC,KAAkB,qBAAK,OAAO;AAAA,MACxG,UAAU;AAAA,IACZ,GAAG,GAAG,CAAC,CAAC,CAAC;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAC,UAAU,eAA4B,qBAAK,eAAe;AAAA,MACnE,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/search-control/index.mjs

@@ -87,6 +87,7 @@ function UnforwardedSearchControl({
   });
 }
 var SearchControl = forwardRef(UnforwardedSearchControl);
+SearchControl.displayName = "SearchControl";
 var search_control_default = SearchControl;
 export {
   SearchControl,

package/build-module/search-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/search-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { InputControlPrefixWrapper } from '../input-control/input-prefix-wrapper';\nimport { InputControlSuffixWrapper } from '../input-control/input-suffix-wrapper';\nimport { StyledInputControl, StyledIcon } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction SuffixItem({\n  searchRef,\n  value,\n  onChange,\n  onClose\n}) {\n  if (!onClose && !value) {\n    return null;\n  }\n  if (onClose) {\n    deprecated('`onClose` prop in wp.components.SearchControl', {\n      since: '6.8'\n    });\n  }\n  const onReset = () => {\n    onChange('');\n    searchRef.current?.focus();\n  };\n  return /*#__PURE__*/_jsx(InputControlSuffixWrapper, {\n    variant: \"control\",\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"small\",\n      icon: closeSmall,\n      label: onClose ? __('Close search') : __('Reset search'),\n      onClick: onClose !== null && onClose !== void 0 ? onClose : onReset\n    })\n  });\n}\nfunction UnforwardedSearchControl({\n  __nextHasNoMarginBottom: _,\n  // Prevent passing to internal component\n  className,\n  onChange,\n  value,\n  label = __('Search'),\n  placeholder = __('Search'),\n  hideLabelFromVision = true,\n  onClose,\n  size = 'default',\n  ...restProps\n}, forwardedRef) {\n  // @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n  // Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n  const {\n    disabled,\n    ...filteredRestProps\n  } = restProps;\n  const searchRef = useRef(null);\n  const instanceId = useInstanceId(SearchControl, 'components-search-control');\n  return /*#__PURE__*/_jsx(StyledInputControl, {\n    __next40pxDefaultSize: true,\n    id: instanceId,\n    hideLabelFromVision: hideLabelFromVision,\n    label: label,\n    ref: useMergeRefs([searchRef, forwardedRef]),\n    type: \"search\",\n    size: size,\n    className: clsx('components-search-control', className),\n    onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),\n    autoComplete: \"off\",\n    placeholder: placeholder,\n    value: value !== null && value !== void 0 ? value : '',\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      variant: \"icon\",\n      children: /*#__PURE__*/_jsx(StyledIcon, {\n        icon: search,\n        fill: \"currentColor\"\n      })\n    }),\n    suffix: /*#__PURE__*/_jsx(SuffixItem, {\n      searchRef: searchRef,\n      value: value,\n      onChange: onChange,\n      onClose: onClose\n    }),\n    ...filteredRestProps\n  });\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef(UnforwardedSearchControl);\nexport default SearchControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,eAAe,oBAAoB;AAC5C,SAAS,UAAU;AACnB,SAAS,QAAQ,kBAAkB;AACnC,SAAS,YAAY,cAAc;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB,kBAAkB;AAC/C,SAAS,OAAO,YAAY;AAC5B,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,MAAI,CAAC,WAAW,CAAC,OAAO;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS;AACX,eAAW,iDAAiD;AAAA,MAC1D,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,QAAM,UAAU,MAAM;AACpB,aAAS,EAAE;AACX,cAAU,SAAS,MAAM;AAAA,EAC3B;AACA,SAAoB,qBAAK,2BAA2B;AAAA,IAClD,SAAS;AAAA,IACT,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO,UAAU,GAAG,cAAc,IAAI,GAAG,cAAc;AAAA,MACvD,SAAS,YAAY,QAAQ,YAAY,SAAS,UAAU;AAAA,IAC9D,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,yBAAyB;AAAA,EAChC,yBAAyB;AAAA;AAAA,EAEzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,GAAG,QAAQ;AAAA,EACnB,cAAc,GAAG,QAAQ;AAAA,EACzB,sBAAsB;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAG,cAAc;AAGf,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,OAAO,IAAI;AAC7B,QAAM,aAAa,cAAc,eAAe,2BAA2B;AAC3E,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,uBAAuB;AAAA,IACvB,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,aAAa,CAAC,WAAW,YAAY,CAAC;AAAA,IAC3C,MAAM;AAAA,IACN;AAAA,IACA,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAU,eAAa,SAAS,cAAc,QAAQ,cAAc,SAAS,YAAY,EAAE;AAAA,IAC3F,cAAc;AAAA,IACd;AAAA,IACA,OAAO,UAAU,QAAQ,UAAU,SAAS,QAAQ;AAAA,IACpD,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,SAAS;AAAA,MACT,UAAuB,qBAAK,YAAY;AAAA,QACtC,MAAM;AAAA,QACN,MAAM;AAAA,MACR,CAAC;AAAA,IACH,CAAC;AAAA,IACD,QAAqB,qBAAK,YAAY;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,GAAG;AAAA,EACL,CAAC;AACH;AAqBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { InputControlPrefixWrapper } from '../input-control/input-prefix-wrapper';\nimport { InputControlSuffixWrapper } from '../input-control/input-suffix-wrapper';\nimport { StyledInputControl, StyledIcon } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction SuffixItem({\n  searchRef,\n  value,\n  onChange,\n  onClose\n}) {\n  if (!onClose && !value) {\n    return null;\n  }\n  if (onClose) {\n    deprecated('`onClose` prop in wp.components.SearchControl', {\n      since: '6.8'\n    });\n  }\n  const onReset = () => {\n    onChange('');\n    searchRef.current?.focus();\n  };\n  return /*#__PURE__*/_jsx(InputControlSuffixWrapper, {\n    variant: \"control\",\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"small\",\n      icon: closeSmall,\n      label: onClose ? __('Close search') : __('Reset search'),\n      onClick: onClose !== null && onClose !== void 0 ? onClose : onReset\n    })\n  });\n}\nfunction UnforwardedSearchControl({\n  __nextHasNoMarginBottom: _,\n  // Prevent passing to internal component\n  className,\n  onChange,\n  value,\n  label = __('Search'),\n  placeholder = __('Search'),\n  hideLabelFromVision = true,\n  onClose,\n  size = 'default',\n  ...restProps\n}, forwardedRef) {\n  // @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n  // Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n  const {\n    disabled,\n    ...filteredRestProps\n  } = restProps;\n  const searchRef = useRef(null);\n  const instanceId = useInstanceId(SearchControl, 'components-search-control');\n  return /*#__PURE__*/_jsx(StyledInputControl, {\n    __next40pxDefaultSize: true,\n    id: instanceId,\n    hideLabelFromVision: hideLabelFromVision,\n    label: label,\n    ref: useMergeRefs([searchRef, forwardedRef]),\n    type: \"search\",\n    size: size,\n    className: clsx('components-search-control', className),\n    onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),\n    autoComplete: \"off\",\n    placeholder: placeholder,\n    value: value !== null && value !== void 0 ? value : '',\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      variant: \"icon\",\n      children: /*#__PURE__*/_jsx(StyledIcon, {\n        icon: search,\n        fill: \"currentColor\"\n      })\n    }),\n    suffix: /*#__PURE__*/_jsx(SuffixItem, {\n      searchRef: searchRef,\n      value: value,\n      onChange: onChange,\n      onClose: onClose\n    }),\n    ...filteredRestProps\n  });\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef(UnforwardedSearchControl);\nSearchControl.displayName = 'SearchControl';\nexport default SearchControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,eAAe,oBAAoB;AAC5C,SAAS,UAAU;AACnB,SAAS,QAAQ,kBAAkB;AACnC,SAAS,YAAY,cAAc;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB,kBAAkB;AAC/C,SAAS,OAAO,YAAY;AAC5B,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,MAAI,CAAC,WAAW,CAAC,OAAO;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS;AACX,eAAW,iDAAiD;AAAA,MAC1D,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,QAAM,UAAU,MAAM;AACpB,aAAS,EAAE;AACX,cAAU,SAAS,MAAM;AAAA,EAC3B;AACA,SAAoB,qBAAK,2BAA2B;AAAA,IAClD,SAAS;AAAA,IACT,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO,UAAU,GAAG,cAAc,IAAI,GAAG,cAAc;AAAA,MACvD,SAAS,YAAY,QAAQ,YAAY,SAAS,UAAU;AAAA,IAC9D,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,yBAAyB;AAAA,EAChC,yBAAyB;AAAA;AAAA,EAEzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,GAAG,QAAQ;AAAA,EACnB,cAAc,GAAG,QAAQ;AAAA,EACzB,sBAAsB;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAG,cAAc;AAGf,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,OAAO,IAAI;AAC7B,QAAM,aAAa,cAAc,eAAe,2BAA2B;AAC3E,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,uBAAuB;AAAA,IACvB,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,aAAa,CAAC,WAAW,YAAY,CAAC;AAAA,IAC3C,MAAM;AAAA,IACN;AAAA,IACA,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAU,eAAa,SAAS,cAAc,QAAQ,cAAc,SAAS,YAAY,EAAE;AAAA,IAC3F,cAAc;AAAA,IACd;AAAA,IACA,OAAO,UAAU,QAAQ,UAAU,SAAS,QAAQ;AAAA,IACpD,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,SAAS;AAAA,MACT,UAAuB,qBAAK,YAAY;AAAA,QACtC,MAAM;AAAA,QACN,MAAM;AAAA,MACR,CAAC;AAAA,IACH,CAAC;AAAA,IACD,QAAqB,qBAAK,YAAY;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,GAAG;AAAA,EACL,CAAC;AACH;AAqBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": []
 }

package/build-module/select-control/index.mjs

@@ -121,6 +121,7 @@ function UnforwardedSelectControl(props, ref) {
   });
 }
 var SelectControl = forwardRef(UnforwardedSelectControl);
+SelectControl.displayName = "SelectControl";
 var select_control_default = SelectControl;
 export {
   SelectControl,

package/build-module/select-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/select-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } from './styles/select-control-styles';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(SelectControl);\n  const id = `inspector-select-control-${instanceId}`;\n  return idProp || id;\n}\nfunction SelectOptions({\n  options\n}) {\n  return options.map(({\n    id,\n    label,\n    value,\n    ...optionProps\n  }, index) => {\n    const key = id || `${label}-${value}-${index}`;\n    return /*#__PURE__*/_jsx(\"option\", {\n      value: value,\n      ...optionProps,\n      children: label\n    }, key);\n  });\n}\nfunction UnforwardedSelectControl(props, ref) {\n  const {\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision,\n    id: idProp,\n    label,\n    multiple = false,\n    onChange,\n    options = [],\n    size = 'default',\n    value: valueProp,\n    labelPosition = 'top',\n    children,\n    prefix,\n    suffix,\n    variant = 'default',\n    __next40pxDefaultSize = false,\n    __nextHasNoMarginBottom: _,\n    // Prevent passing to internal component\n    __shouldNotWarnDeprecated36pxSize,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const helpId = help ? `${id}__help` : undefined;\n  if (!options?.length && !children) {\n    return null;\n  }\n  const handleOnChange = event => {\n    if (props.multiple) {\n      const selectedOptions = Array.from(event.target.options).filter(({\n        selected\n      }) => selected);\n      const newValues = selectedOptions.map(({\n        value\n      }) => value);\n      props.onChange?.(newValues, {\n        event\n      });\n      return;\n    }\n    props.onChange?.(event.target.value, {\n      event\n    });\n  };\n  const classes = clsx('components-select-control', className);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'SelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    help: help,\n    id: id,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledInputBase, {\n      disabled: disabled,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      isBorderless: variant === 'minimal',\n      label: label,\n      size: size,\n      suffix: suffix || !multiple && /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n      prefix: prefix,\n      labelPosition: labelPosition,\n      __unstableInputWidth: variant === 'minimal' ? 'auto' : undefined,\n      variant: variant,\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: /*#__PURE__*/_jsx(Select, {\n        ...restProps,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        \"aria-describedby\": helpId,\n        className: \"components-select-control__input\",\n        disabled: disabled,\n        id: id,\n        multiple: multiple,\n        onChange: handleOnChange,\n        ref: ref,\n        selectSize: size,\n        value: valueProp,\n        variant: variant,\n        children: children || /*#__PURE__*/_jsx(SelectOptions, {\n          options: options\n        })\n      })\n    })\n  });\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       __next40pxDefaultSize\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef(UnforwardedSelectControl);\nexport default SelectControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } from './styles/select-control-styles';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(SelectControl);\n  const id = `inspector-select-control-${instanceId}`;\n  return idProp || id;\n}\nfunction SelectOptions({\n  options\n}) {\n  return options.map(({\n    id,\n    label,\n    value,\n    ...optionProps\n  }, index) => {\n    const key = id || `${label}-${value}-${index}`;\n    return /*#__PURE__*/_jsx(\"option\", {\n      value: value,\n      ...optionProps,\n      children: label\n    }, key);\n  });\n}\nfunction UnforwardedSelectControl(props, ref) {\n  const {\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision,\n    id: idProp,\n    label,\n    multiple = false,\n    onChange,\n    options = [],\n    size = 'default',\n    value: valueProp,\n    labelPosition = 'top',\n    children,\n    prefix,\n    suffix,\n    variant = 'default',\n    __next40pxDefaultSize = false,\n    __nextHasNoMarginBottom: _,\n    // Prevent passing to internal component\n    __shouldNotWarnDeprecated36pxSize,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const helpId = help ? `${id}__help` : undefined;\n  if (!options?.length && !children) {\n    return null;\n  }\n  const handleOnChange = event => {\n    if (props.multiple) {\n      const selectedOptions = Array.from(event.target.options).filter(({\n        selected\n      }) => selected);\n      const newValues = selectedOptions.map(({\n        value\n      }) => value);\n      props.onChange?.(newValues, {\n        event\n      });\n      return;\n    }\n    props.onChange?.(event.target.value, {\n      event\n    });\n  };\n  const classes = clsx('components-select-control', className);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'SelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    help: help,\n    id: id,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledInputBase, {\n      disabled: disabled,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      isBorderless: variant === 'minimal',\n      label: label,\n      size: size,\n      suffix: suffix || !multiple && /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n      prefix: prefix,\n      labelPosition: labelPosition,\n      __unstableInputWidth: variant === 'minimal' ? 'auto' : undefined,\n      variant: variant,\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: /*#__PURE__*/_jsx(Select, {\n        ...restProps,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        \"aria-describedby\": helpId,\n        className: \"components-select-control__input\",\n        disabled: disabled,\n        id: id,\n        multiple: multiple,\n        onChange: handleOnChange,\n        ref: ref,\n        selectSize: size,\n        value: valueProp,\n        variant: variant,\n        children: children || /*#__PURE__*/_jsx(SelectOptions, {\n          options: options\n        })\n      })\n    })\n  });\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       __next40pxDefaultSize\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef(UnforwardedSelectControl);\n\n// @ts-expect-error TS says: \"Property 'displayName' does not exist on type ...\"\nSelectControl.displayName = 'SelectControl';\nexport default SelectControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/slot-fill/bubbles-virtually/slot.mjs

@@ -2,7 +2,7 @@
 import { useRef, useLayoutEffect, useContext, forwardRef } from "@wordpress/element";
 import { useMergeRefs } from "@wordpress/compose";
 import { View } from "../../view/index.mjs";
-import SlotFillContext from "./slot-fill-context.mjs";
+import SlotFillContext from "../context.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Slot(props, forwardedRef) {
   const {
@@ -15,17 +15,29 @@ function Slot(props, forwardedRef) {
     ...restProps
   } = props;
   const registry = useContext(SlotFillContext);
+  const instanceRef = useRef({});
   const ref = useRef(null);
   const fillPropsRef = useRef(fillProps);
   useLayoutEffect(() => {
     fillPropsRef.current = fillProps;
   }, [fillProps]);
   useLayoutEffect(() => {
-    registry.registerSlot(name, ref, fillPropsRef.current);
-    return () => registry.unregisterSlot(name, ref);
+    const instance = instanceRef.current;
+    registry.registerSlot(name, {
+      type: "portal",
+      instance,
+      ref,
+      fillProps: fillPropsRef.current
+    });
+    return () => registry.unregisterSlot(name, instance);
   }, [registry, name]);
   useLayoutEffect(() => {
-    registry.updateSlot(name, ref, fillPropsRef.current);
+    registry.updateSlot(name, {
+      type: "portal",
+      instance: instanceRef.current,
+      ref,
+      fillProps: fillPropsRef.current
+    });
   });
   return /* @__PURE__ */ _jsx(View, {
     as,

package/build-module/slot-fill/bubbles-virtually/slot.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/slot-fill/bubbles-virtually/slot.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect, useContext, forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport SlotFillContext from './slot-fill-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Slot(props, forwardedRef) {\n  const {\n    name,\n    fillProps = {},\n    as,\n    // `children` is not allowed. However, if it is passed,\n    // it will be displayed as is, so remove `children`.\n    children,\n    ...restProps\n  } = props;\n  const registry = useContext(SlotFillContext);\n  const ref = useRef(null);\n\n  // We don't want to unregister and register the slot whenever\n  // `fillProps` change, which would cause the fill to be re-mounted. Instead,\n  // we can just update the slot (see hook below).\n  // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973\n  const fillPropsRef = useRef(fillProps);\n  useLayoutEffect(() => {\n    fillPropsRef.current = fillProps;\n  }, [fillProps]);\n  useLayoutEffect(() => {\n    registry.registerSlot(name, ref, fillPropsRef.current);\n    return () => registry.unregisterSlot(name, ref);\n  }, [registry, name]);\n  useLayoutEffect(() => {\n    registry.updateSlot(name, ref, fillPropsRef.current);\n  });\n  return /*#__PURE__*/_jsx(View, {\n    as: as,\n    ref: useMergeRefs([forwardedRef, ref]),\n    ...restProps\n  });\n}\nexport default forwardRef(Slot);"],
-  "mappings": ";AAOA,SAAS,QAAQ,iBAAiB,YAAY,kBAAkB;AAChE,SAAS,oBAAoB;AAK7B,SAAS,YAAY;AACrB,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,SAAS,KAAK,OAAO,cAAc;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA;AAAA;AAAA,IAGA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,MAAM,OAAO,IAAI;AAMvB,QAAM,eAAe,OAAO,SAAS;AACrC,kBAAgB,MAAM;AACpB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,SAAS,CAAC;AACd,kBAAgB,MAAM;AACpB,aAAS,aAAa,MAAM,KAAK,aAAa,OAAO;AACrD,WAAO,MAAM,SAAS,eAAe,MAAM,GAAG;AAAA,EAChD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,kBAAgB,MAAM;AACpB,aAAS,WAAW,MAAM,KAAK,aAAa,OAAO;AAAA,EACrD,CAAC;AACD,SAAoB,qBAAK,MAAM;AAAA,IAC7B;AAAA,IACA,KAAK,aAAa,CAAC,cAAc,GAAG,CAAC;AAAA,IACrC,GAAG;AAAA,EACL,CAAC;AACH;AACA,IAAO,eAAQ,WAAW,IAAI;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect, useContext, forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport SlotFillContext from '../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Slot(props, forwardedRef) {\n  const {\n    name,\n    fillProps = {},\n    as,\n    // `children` is not allowed. However, if it is passed,\n    // it will be displayed as is, so remove `children`.\n    children,\n    ...restProps\n  } = props;\n  const registry = useContext(SlotFillContext);\n  const instanceRef = useRef({});\n  const ref = useRef(null);\n  const fillPropsRef = useRef(fillProps);\n  useLayoutEffect(() => {\n    fillPropsRef.current = fillProps;\n  }, [fillProps]);\n  useLayoutEffect(() => {\n    const instance = instanceRef.current;\n    registry.registerSlot(name, {\n      type: 'portal',\n      instance,\n      ref,\n      fillProps: fillPropsRef.current\n    });\n    return () => registry.unregisterSlot(name, instance);\n  }, [registry, name]);\n  useLayoutEffect(() => {\n    registry.updateSlot(name, {\n      type: 'portal',\n      instance: instanceRef.current,\n      ref,\n      fillProps: fillPropsRef.current\n    });\n  });\n  return /*#__PURE__*/_jsx(View, {\n    as: as,\n    ref: useMergeRefs([forwardedRef, ref]),\n    ...restProps\n  });\n}\nexport default forwardRef(Slot);"],
+  "mappings": ";AAOA,SAAS,QAAQ,iBAAiB,YAAY,kBAAkB;AAChE,SAAS,oBAAoB;AAK7B,SAAS,YAAY;AACrB,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,SAAS,KAAK,OAAO,cAAc;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA;AAAA;AAAA,IAGA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,cAAc,OAAO,CAAC,CAAC;AAC7B,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,eAAe,OAAO,SAAS;AACrC,kBAAgB,MAAM;AACpB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,SAAS,CAAC;AACd,kBAAgB,MAAM;AACpB,UAAM,WAAW,YAAY;AAC7B,aAAS,aAAa,MAAM;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,WAAW,aAAa;AAAA,IAC1B,CAAC;AACD,WAAO,MAAM,SAAS,eAAe,MAAM,QAAQ;AAAA,EACrD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,kBAAgB,MAAM;AACpB,aAAS,WAAW,MAAM;AAAA,MACxB,MAAM;AAAA,MACN,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,WAAW,aAAa;AAAA,IAC1B,CAAC;AAAA,EACH,CAAC;AACD,SAAoB,qBAAK,MAAM;AAAA,IAC7B;AAAA,IACA,KAAK,aAAa,CAAC,cAAc,GAAG,CAAC;AAAA,IACrC,GAAG;AAAA,EACL,CAAC;AACH;AACA,IAAO,eAAQ,WAAW,IAAI;",
   "names": []
 }

package/build-module/slot-fill/bubbles-virtually/use-slot-fills.mjs

@@ -1,10 +1,23 @@
 // packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
-import { useContext } from "@wordpress/element";
-import { useObservableValue } from "@wordpress/compose";
-import SlotFillContext from "./slot-fill-context.mjs";
+import { useContext, useMemo, useSyncExternalStore } from "@wordpress/element";
+import SlotFillContext from "../context.mjs";
+function useObservableValueWithSelector(map, name, selector) {
+  const subscribe = useMemo(() => (listener) => map.subscribe(name, listener), [map, name]);
+  const getValue = () => selector(map.get(name));
+  return useSyncExternalStore(subscribe, getValue, getValue);
+}
+function getLength(array) {
+  return array?.length;
+}
 function useSlotFills(name) {
   const registry = useContext(SlotFillContext);
-  return useObservableValue(registry.fills, name);
+  const length = useObservableValueWithSelector(registry.fills, name, getLength);
+  const fills = useMemo(() => {
+    return length !== void 0 ? Array.from({
+      length
+    }) : void 0;
+  }, [length]);
+  return fills;
 }
 export {
   useSlotFills as default

package/build-module/slot-fill/bubbles-virtually/use-slot-fills.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/slot-fill/bubbles-virtually/use-slot-fills.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { useObservableValue } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nexport default function useSlotFills(name) {\n  const registry = useContext(SlotFillContext);\n  return useObservableValue(registry.fills, name);\n}"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAKnC,OAAO,qBAAqB;AACb,SAAR,aAA8B,MAAM;AACzC,QAAM,WAAW,WAAW,eAAe;AAC3C,SAAO,mBAAmB,SAAS,OAAO,IAAI;AAChD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, useSyncExternalStore } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SlotFillContext from '../context';\nfunction useObservableValueWithSelector(map, name, selector) {\n  const subscribe = useMemo(() => listener => map.subscribe(name, listener), [map, name]);\n  const getValue = () => selector(map.get(name));\n  return useSyncExternalStore(subscribe, getValue, getValue);\n}\nfunction getLength(array) {\n  return array?.length;\n}\nexport default function useSlotFills(name) {\n  const registry = useContext(SlotFillContext);\n  const length = useObservableValueWithSelector(registry.fills, name, getLength);\n  // callers expect an opaque array with length `length`, so create that array\n  const fills = useMemo(() => {\n    return length !== undefined ? Array.from({\n      length\n    }) : undefined;\n  }, [length]);\n  return fills;\n}"],
+  "mappings": ";AAGA,SAAS,YAAY,SAAS,4BAA4B;AAI1D,OAAO,qBAAqB;AAC5B,SAAS,+BAA+B,KAAK,MAAM,UAAU;AAC3D,QAAM,YAAY,QAAQ,MAAM,cAAY,IAAI,UAAU,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,CAAC;AACtF,QAAM,WAAW,MAAM,SAAS,IAAI,IAAI,IAAI,CAAC;AAC7C,SAAO,qBAAqB,WAAW,UAAU,QAAQ;AAC3D;AACA,SAAS,UAAU,OAAO;AACxB,SAAO,OAAO;AAChB;AACe,SAAR,aAA8B,MAAM;AACzC,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,SAAS,+BAA+B,SAAS,OAAO,MAAM,SAAS;AAE7E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,WAAO,WAAW,SAAY,MAAM,KAAK;AAAA,MACvC;AAAA,IACF,CAAC,IAAI;AAAA,EACP,GAAG,CAAC,MAAM,CAAC;AACX,SAAO;AACT;",
   "names": []
 }

package/build-module/slot-fill/bubbles-virtually/use-slot.mjs

@@ -1,12 +1,16 @@
 // packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
 import { useContext } from "@wordpress/element";
 import { useObservableValue } from "@wordpress/compose";
-import SlotFillContext from "./slot-fill-context.mjs";
+import SlotFillContext from "../context.mjs";
 function useSlot(name) {
   const registry = useContext(SlotFillContext);
   const slot = useObservableValue(registry.slots, name);
+  let ref;
+  if (slot && slot.type === "portal") {
+    ref = slot.ref;
+  }
   return {
-    ...slot
+    ref
   };
 }
 export {

package/build-module/slot-fill/bubbles-virtually/use-slot.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/slot-fill/bubbles-virtually/use-slot.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { useObservableValue } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nexport default function useSlot(name) {\n  const registry = useContext(SlotFillContext);\n  const slot = useObservableValue(registry.slots, name);\n  return {\n    ...slot\n  };\n}"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAKnC,OAAO,qBAAqB;AACb,SAAR,QAAyB,MAAM;AACpC,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,OAAO,mBAAmB,SAAS,OAAO,IAAI;AACpD,SAAO;AAAA,IACL,GAAG;AAAA,EACL;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { useObservableValue } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from '../context';\nexport default function useSlot(name) {\n  const registry = useContext(SlotFillContext);\n  const slot = useObservableValue(registry.slots, name);\n  let ref;\n  if (slot && slot.type === 'portal') {\n    ref = slot.ref;\n  }\n  return {\n    ref\n  };\n}"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAKnC,OAAO,qBAAqB;AACb,SAAR,QAAyB,MAAM;AACpC,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,OAAO,mBAAmB,SAAS,OAAO,IAAI;AACpD,MAAI;AACJ,MAAI,QAAQ,KAAK,SAAS,UAAU;AAClC,UAAM,KAAK;AAAA,EACb;AACA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/build-module/slot-fill/context.mjs

@@ -1,25 +1,30 @@
 // packages/components/src/slot-fill/context.ts
 import { observableMap } from "@wordpress/compose";
 import { createContext } from "@wordpress/element";
+import warning from "@wordpress/warning";
 var initialValue = {
   slots: observableMap(),
   fills: observableMap(),
   registerSlot: () => {
+    globalThis.SCRIPT_DEBUG === true ? warning("Components must be wrapped within `SlotFillProvider`. See https://developer.wordpress.org/block-editor/components/slot-fill/") : void 0;
   },
   unregisterSlot: () => {
   },
+  updateSlot: () => {
+  },
   registerFill: () => {
   },
   unregisterFill: () => {
   },
   updateFill: () => {
-  }
+  },
+  // This helps the provider know if it's using the default context value or not.
+  isDefault: true
 };
 var SlotFillContext = createContext(initialValue);
 SlotFillContext.displayName = "SlotFillContext";
 var context_default = SlotFillContext;
 export {
-  SlotFillContext,
   context_default as default
 };
 //# sourceMappingURL=context.mjs.map

package/build-module/slot-fill/context.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/slot-fill/context.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { observableMap } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nconst initialValue = {\n  slots: observableMap(),\n  fills: observableMap(),\n  registerSlot: () => {},\n  unregisterSlot: () => {},\n  registerFill: () => {},\n  unregisterFill: () => {},\n  updateFill: () => {}\n};\nexport const SlotFillContext = createContext(initialValue);\nSlotFillContext.displayName = 'SlotFillContext';\nexport default SlotFillContext;"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAM9B,IAAM,eAAe;AAAA,EACnB,OAAO,cAAc;AAAA,EACrB,OAAO,cAAc;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,YAAY,MAAM;AAAA,EAAC;AACrB;AACO,IAAM,kBAAkB,cAAc,YAAY;AACzD,gBAAgB,cAAc;AAC9B,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { observableMap } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\n\nconst initialValue = {\n  slots: observableMap(),\n  fills: observableMap(),\n  registerSlot: () => {\n    globalThis.SCRIPT_DEBUG === true ? warning('Components must be wrapped within `SlotFillProvider`. ' + 'See https://developer.wordpress.org/block-editor/components/slot-fill/') : void 0;\n  },\n  unregisterSlot: () => {},\n  updateSlot: () => {},\n  registerFill: () => {},\n  unregisterFill: () => {},\n  updateFill: () => {},\n  // This helps the provider know if it's using the default context value or not.\n  isDefault: true\n};\nconst SlotFillContext = createContext(initialValue);\nSlotFillContext.displayName = 'SlotFillContext';\nexport default SlotFillContext;"],
+  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,aAAa;AAMpB,IAAM,eAAe;AAAA,EACnB,OAAO,cAAc;AAAA,EACrB,OAAO,cAAc;AAAA,EACrB,cAAc,MAAM;AAClB,eAAW,iBAAiB,OAAO,QAAQ,8HAAmI,IAAI;AAAA,EACpL;AAAA,EACA,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,YAAY,MAAM;AAAA,EAAC;AAAA;AAAA,EAEnB,WAAW;AACb;AACA,IAAM,kBAAkB,cAAc,YAAY;AAClD,gBAAgB,cAAc;AAC9B,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/slot-fill/fill.mjs

@@ -1,10 +1,14 @@
-// packages/components/src/slot-fill/fill.ts
-import { useContext, useLayoutEffect, useRef } from "@wordpress/element";
+// packages/components/src/slot-fill/fill.tsx
+import { useObservableValue } from "@wordpress/compose";
+import { useContext, useLayoutEffect, useRef, createPortal } from "@wordpress/element";
 import SlotFillContext from "./context.mjs";
+import StyleProvider from "../style-provider/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Fill({
   name,
   children
 }) {
+  var _slot$fillProps;
   const registry = useContext(SlotFillContext);
   const instanceRef = useRef({});
   const childrenRef = useRef(children);
@@ -13,13 +17,34 @@ function Fill({
   }, [children]);
   useLayoutEffect(() => {
     const instance = instanceRef.current;
-    registry.registerFill(name, instance, childrenRef.current);
+    registry.registerFill(name, {
+      instance,
+      children: childrenRef.current
+    });
     return () => registry.unregisterFill(name, instance);
   }, [registry, name]);
   useLayoutEffect(() => {
-    registry.updateFill(name, instanceRef.current, childrenRef.current);
+    registry.updateFill(name, {
+      instance: instanceRef.current,
+      children: childrenRef.current
+    });
   });
-  return null;
+  const slot = useObservableValue(registry.slots, name);
+  if (!slot) {
+    return null;
+  }
+  if (slot.type === "children") {
+    return null;
+  }
+  const portalEl = slot.ref.current;
+  if (!portalEl) {
+    return null;
+  }
+  const wrappedChildren = typeof children === "function" ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children;
+  return createPortal(/* @__PURE__ */ _jsx(StyleProvider, {
+    document: portalEl.ownerDocument,
+    children: wrappedChildren
+  }), portalEl);
 }
 export {
   Fill as default

package/build-module/slot-fill/fill.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/slot-fill/fill.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nexport default function Fill({\n  name,\n  children\n}) {\n  const registry = useContext(SlotFillContext);\n  const instanceRef = useRef({});\n  const childrenRef = useRef(children);\n  useLayoutEffect(() => {\n    childrenRef.current = children;\n  }, [children]);\n  useLayoutEffect(() => {\n    const instance = instanceRef.current;\n    registry.registerFill(name, instance, childrenRef.current);\n    return () => registry.unregisterFill(name, instance);\n  }, [registry, name]);\n  useLayoutEffect(() => {\n    registry.updateFill(name, instanceRef.current, childrenRef.current);\n  });\n  return null;\n}"],
-  "mappings": ";AAGA,SAAS,YAAY,iBAAiB,cAAc;AAKpD,OAAO,qBAAqB;AACb,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AACF,GAAG;AACD,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,cAAc,OAAO,CAAC,CAAC;AAC7B,QAAM,cAAc,OAAO,QAAQ;AACnC,kBAAgB,MAAM;AACpB,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AACb,kBAAgB,MAAM;AACpB,UAAM,WAAW,YAAY;AAC7B,aAAS,aAAa,MAAM,UAAU,YAAY,OAAO;AACzD,WAAO,MAAM,SAAS,eAAe,MAAM,QAAQ;AAAA,EACrD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,kBAAgB,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,SAAS,YAAY,OAAO;AAAA,EACpE,CAAC;AACD,SAAO;AACT;",
+  "sources": ["../../src/slot-fill/fill.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useObservableValue } from '@wordpress/compose';\nimport { useContext, useLayoutEffect, useRef, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport StyleProvider from '../style-provider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function Fill({\n  name,\n  children\n}) {\n  var _slot$fillProps;\n  const registry = useContext(SlotFillContext);\n  const instanceRef = useRef({});\n  const childrenRef = useRef(children);\n  useLayoutEffect(() => {\n    childrenRef.current = children;\n  }, [children]);\n  useLayoutEffect(() => {\n    const instance = instanceRef.current;\n    registry.registerFill(name, {\n      instance,\n      children: childrenRef.current\n    });\n    return () => registry.unregisterFill(name, instance);\n  }, [registry, name]);\n  useLayoutEffect(() => {\n    registry.updateFill(name, {\n      instance: instanceRef.current,\n      children: childrenRef.current\n    });\n  });\n  const slot = useObservableValue(registry.slots, name);\n  if (!slot) {\n    return null;\n  }\n  if (slot.type === 'children') {\n    return null;\n  }\n  const portalEl = slot.ref.current;\n  if (!portalEl) {\n    return null;\n  }\n  const wrappedChildren = typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children;\n\n  // When using a `Fill`, the `children` will be rendered in the document of the\n  // `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n  // to make sure we're referencing the right document/iframe (instead of the\n  // context of the `Fill`'s parent).\n  return createPortal(/*#__PURE__*/_jsx(StyleProvider, {\n    document: portalEl.ownerDocument,\n    children: wrappedChildren\n  }), portalEl);\n}"],
+  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,YAAY,iBAAiB,QAAQ,oBAAoB;AAKlE,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,SAAS,OAAO,YAAY;AACb,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AACF,GAAG;AACD,MAAI;AACJ,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,cAAc,OAAO,CAAC,CAAC;AAC7B,QAAM,cAAc,OAAO,QAAQ;AACnC,kBAAgB,MAAM;AACpB,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AACb,kBAAgB,MAAM;AACpB,UAAM,WAAW,YAAY;AAC7B,aAAS,aAAa,MAAM;AAAA,MAC1B;AAAA,MACA,UAAU,YAAY;AAAA,IACxB,CAAC;AACD,WAAO,MAAM,SAAS,eAAe,MAAM,QAAQ;AAAA,EACrD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,kBAAgB,MAAM;AACpB,aAAS,WAAW,MAAM;AAAA,MACxB,UAAU,YAAY;AAAA,MACtB,UAAU,YAAY;AAAA,IACxB,CAAC;AAAA,EACH,CAAC;AACD,QAAM,OAAO,mBAAmB,SAAS,OAAO,IAAI;AACpD,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,MAAI,KAAK,SAAS,YAAY;AAC5B,WAAO;AAAA,EACT;AACA,QAAM,WAAW,KAAK,IAAI;AAC1B,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,OAAO,aAAa,aAAa,UAAU,kBAAkB,KAAK,eAAe,QAAQ,oBAAoB,SAAS,kBAAkB,CAAC,CAAC,IAAI;AAMtK,SAAO,aAA0B,qBAAK,eAAe;AAAA,IACnD,UAAU,SAAS;AAAA,IACnB,UAAU;AAAA,EACZ,CAAC,GAAG,QAAQ;AACd;",
   "names": []
 }

package/build-module/slot-fill/index.mjs

@@ -1,25 +1,14 @@
 // packages/components/src/slot-fill/index.tsx
 import { forwardRef, useContext } from "@wordpress/element";
-import BaseFill from "./fill.mjs";
+import Fill from "./fill.mjs";
 import BaseSlot from "./slot.mjs";
-import BubblesVirtuallyFill from "./bubbles-virtually/fill.mjs";
 import BubblesVirtuallySlot from "./bubbles-virtually/slot.mjs";
-import BubblesVirtuallySlotFillProvider from "./bubbles-virtually/slot-fill-provider.mjs";
 import SlotFillProvider from "./provider.mjs";
-import SlotFillContext from "./bubbles-virtually/slot-fill-context.mjs";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SlotFillContext from "./context.mjs";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { default as default2 } from "./bubbles-virtually/use-slot.mjs";
 import { default as default3 } from "./bubbles-virtually/use-slot-fills.mjs";
-function Fill(props) {
-  return /* @__PURE__ */ _jsxs(_Fragment, {
-    children: [/* @__PURE__ */ _jsx(BaseFill, {
-      ...props
-    }), /* @__PURE__ */ _jsx(BubblesVirtuallyFill, {
-      ...props
-    })]
-  });
-}
-function UnforwardedSlot(props, ref) {
+var Slot = forwardRef((props, ref) => {
   const {
     bubblesVirtually,
     ...restProps
@@ -33,8 +22,8 @@ function UnforwardedSlot(props, ref) {
   return /* @__PURE__ */ _jsx(BaseSlot, {
     ...restProps
   });
-}
-var Slot = forwardRef(UnforwardedSlot);
+});
+Slot.displayName = "Slot";
 function Provider({
   children,
   passthrough = false
@@ -46,9 +35,7 @@ function Provider({
     });
   }
   return /* @__PURE__ */ _jsx(SlotFillProvider, {
-    children: /* @__PURE__ */ _jsx(BubblesVirtuallySlotFillProvider, {
-      children
-    })
+    children
   });
 }
 Provider.displayName = "SlotFillProvider";
@@ -75,7 +62,6 @@ export {
   Fill,
   Provider,
   Slot,
-  UnforwardedSlot,
   createSlotFill,
   default2 as useSlot,
   default3 as useSlotFills

package/build-module/slot-fill/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/slot-fill/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseFill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallyFill from './bubbles-virtually/fill';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';\nimport SlotFillProvider from './provider';\nimport SlotFillContext from './bubbles-virtually/slot-fill-context';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport { default as useSlot } from './bubbles-virtually/use-slot';\nexport { default as useSlotFills } from './bubbles-virtually/use-slot-fills';\nexport function Fill(props) {\n  // We're adding both Fills here so they can register themselves before\n  // their respective slot has been registered. Only the Fill that has a slot\n  // will render. The other one will return null.\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(BaseFill, {\n      ...props\n    }), /*#__PURE__*/_jsx(BubblesVirtuallyFill, {\n      ...props\n    })]\n  });\n}\nexport function UnforwardedSlot(props, ref) {\n  const {\n    bubblesVirtually,\n    ...restProps\n  } = props;\n  if (bubblesVirtually) {\n    return /*#__PURE__*/_jsx(BubblesVirtuallySlot, {\n      ...restProps,\n      ref: ref\n    });\n  }\n  return /*#__PURE__*/_jsx(BaseSlot, {\n    ...restProps\n  });\n}\nexport const Slot = forwardRef(UnforwardedSlot);\nexport function Provider({\n  children,\n  passthrough = false\n}) {\n  const parent = useContext(SlotFillContext);\n  if (!parent.isDefault && passthrough) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(SlotFillProvider, {\n    children: /*#__PURE__*/_jsx(BubblesVirtuallySlotFillProvider, {\n      children: children\n    })\n  });\n}\nProvider.displayName = 'SlotFillProvider';\nexport function createSlotFill(key) {\n  const baseName = typeof key === 'symbol' ? key.description : key;\n  const FillComponent = props => /*#__PURE__*/_jsx(Fill, {\n    name: key,\n    ...props\n  });\n  FillComponent.displayName = `${baseName}Fill`;\n  const SlotComponent = props => /*#__PURE__*/_jsx(Slot, {\n    name: key,\n    ...props\n  });\n  SlotComponent.displayName = `${baseName}Slot`;\n  /**\n   * @deprecated 6.8.0\n   * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.\n   */\n  SlotComponent.__unstableName = key;\n  return {\n    name: key,\n    Fill: FillComponent,\n    Slot: SlotComponent\n  };\n}"],
-  "mappings": ";AAOA,SAAS,YAAY,kBAAkB;AAKvC,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,0BAA0B;AACjC,OAAO,0BAA0B;AACjC,OAAO,sCAAsC;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,qBAAqB;AAC5B,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAClE,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA+B;AACjC,SAAS,KAAK,OAAO;AAI1B,SAAoB,sBAAM,WAAW;AAAA,IACnC,UAAU,CAAc,qBAAK,UAAU;AAAA,MACrC,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,sBAAsB;AAAA,MAC1C,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,SAAS,gBAAgB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,kBAAkB;AACpB,WAAoB,qBAAK,sBAAsB;AAAA,MAC7C,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,UAAU;AAAA,IACjC,GAAG;AAAA,EACL,CAAC;AACH;AACO,IAAM,OAAO,WAAW,eAAe;AACvC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,GAAG;AACD,QAAM,SAAS,WAAW,eAAe;AACzC,MAAI,CAAC,OAAO,aAAa,aAAa;AACpC,WAAoB,qBAAK,WAAW;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,kBAAkB;AAAA,IACzC,UAAuB,qBAAK,kCAAkC;AAAA,MAC5D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,cAAc;AAChB,SAAS,eAAe,KAAK;AAClC,QAAM,WAAW,OAAO,QAAQ,WAAW,IAAI,cAAc;AAC7D,QAAM,gBAAgB,WAAsB,qBAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AACvC,QAAM,gBAAgB,WAAsB,qBAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AAKvC,gBAAc,iBAAiB;AAC/B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Fill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport SlotFillProvider from './provider';\nimport SlotFillContext from './context';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nexport { default as useSlot } from './bubbles-virtually/use-slot';\nexport { default as useSlotFills } from './bubbles-virtually/use-slot-fills';\nexport { Fill };\nexport const Slot = forwardRef((props, ref) => {\n  const {\n    bubblesVirtually,\n    ...restProps\n  } = props;\n  if (bubblesVirtually) {\n    return /*#__PURE__*/_jsx(BubblesVirtuallySlot, {\n      ...restProps,\n      ref: ref\n    });\n  }\n  return /*#__PURE__*/_jsx(BaseSlot, {\n    ...restProps\n  });\n});\nSlot.displayName = 'Slot';\nexport function Provider({\n  children,\n  passthrough = false\n}) {\n  const parent = useContext(SlotFillContext);\n  if (!parent.isDefault && passthrough) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(SlotFillProvider, {\n    children: children\n  });\n}\nProvider.displayName = 'SlotFillProvider';\nexport function createSlotFill(key) {\n  const baseName = typeof key === 'symbol' ? key.description : key;\n  const FillComponent = props => /*#__PURE__*/_jsx(Fill, {\n    name: key,\n    ...props\n  });\n  FillComponent.displayName = `${baseName}Fill`;\n  const SlotComponent = props => /*#__PURE__*/_jsx(Slot, {\n    name: key,\n    ...props\n  });\n  SlotComponent.displayName = `${baseName}Slot`;\n  /**\n   * @deprecated 6.8.0\n   * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.\n   */\n  SlotComponent.__unstableName = key;\n  return {\n    name: key,\n    Fill: FillComponent,\n    Slot: SlotComponent\n  };\n}"],
+  "mappings": ";AAOA,SAAS,YAAY,kBAAkB;AAKvC,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,0BAA0B;AACjC,OAAO,sBAAsB;AAC7B,OAAO,qBAAqB;AAC5B,SAAS,OAAO,MAAM,YAAY,iBAAiB;AACnD,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA+B;AAEjC,IAAM,OAAO,WAAW,CAAC,OAAO,QAAQ;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,kBAAkB;AACpB,WAAoB,qBAAK,sBAAsB;AAAA,MAC7C,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,UAAU;AAAA,IACjC,GAAG;AAAA,EACL,CAAC;AACH,CAAC;AACD,KAAK,cAAc;AACZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,GAAG;AACD,QAAM,SAAS,WAAW,eAAe;AACzC,MAAI,CAAC,OAAO,aAAa,aAAa;AACpC,WAAoB,qBAAK,WAAW;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,EACF,CAAC;AACH;AACA,SAAS,cAAc;AAChB,SAAS,eAAe,KAAK;AAClC,QAAM,WAAW,OAAO,QAAQ,WAAW,IAAI,cAAc;AAC7D,QAAM,gBAAgB,WAAsB,qBAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AACvC,QAAM,gBAAgB,WAAsB,qBAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AAKvC,gBAAc,iBAAiB;AAC/B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
   "names": ["default"]
 }