Fix File

• /home/sportsfe.../httpdocs/clone/wp-inclu.../js/dist

• File: components.js

• Content:

}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Single origin
  return colors.find(color => color.color === colorValue);
};
const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
  if (isStyleEnabled) {
    if (colorObject) {
      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
      return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
    }
    if (colorValue) {
      const ariaLabelValue = getAriaLabelColorValue(colorValue);
      return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
      // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
      // translators: %1$s: The color's hex code e.g: "#f00".
      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
    }
    return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.');
  }
  if (colorObject) {
    return (0,external_wp_i18n_namespaceObject.sprintf)(
    // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
  }
  if (colorValue) {
    return (0,external_wp_i18n_namespaceObject.sprintf)(
    // translators: %1$s: The color's hex code e.g: "#f00".
    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
  }
  return (0,external_wp_i18n_namespaceObject.__)('Border color picker.');
};
const BorderControlDropdown = (props, forwardedRef) => {
  const {
    __experimentalIsRenderedInSidebar,
    border,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    indicatorClassName,
    indicatorWrapperClassName,
    isStyleSettable,
    onReset,
    onColorChange,
    onStyleChange,
    popoverContentClassName,
    popoverControlsClassName,
    resetButtonClassName,
    showDropdownHeader,
    size,
    __unstablePopoverProps,
    ...otherProps
  } = useBorderControlDropdown(props);
  const {
    color,
    style
  } = border || {};
  const colorObject = getColorObject(color, colors);
  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
  const showResetButton = color || style && style !== 'none';
  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
  const renderToggle = ({
    onToggle
  }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
    onClick: onToggle,
    variant: "tertiary",
    "aria-label": toggleAriaLabel,
    tooltipPosition: dropdownPosition,
    label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'),
    showTooltip: true,
    __next40pxDefaultSize: size === '__unstable-large' ? true : false,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
      className: indicatorWrapperClassName,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, {
        className: indicatorClassName,
        colorValue: color
      })
    })
  });
  const renderContent = ({
    onClose
  }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
      paddingSize: "medium",
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
        className: popoverControlsClassName,
        spacing: 6,
        children: [showDropdownHeader ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
          children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, {
            children: (0,external_wp_i18n_namespaceObject.__)('Border color')
          }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
            size: "small",
            label: (0,external_wp_i18n_namespaceObject.__)('Close border color'),
            icon: close_small,
            onClick: onClose
          })]
        }) : undefined, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {
          className: popoverContentClassName,
          value: color,
          onChange: onColorChange,
          colors,
          disableCustomColors,
          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
          clearable: false,
          enableAlpha: enableAlpha
        }), enableStyle && isStyleSettable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_style_picker_component, {
          label: (0,external_wp_i18n_namespaceObject.__)('Style'),
          value: style,
          onChange: onStyleChange
        })]
      })
    }), showResetButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
      paddingSize: "none",
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
        className: resetButtonClassName,
        variant: "tertiary",
        onClick: () => {
          onReset();
          onClose();
        },
        children: (0,external_wp_i18n_namespaceObject.__)('Reset')
      })
    })]
  });
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, {
    renderToggle: renderToggle,
    renderContent: renderContent,
    popoverProps: {
      ...__unstablePopoverProps
    },
    ...otherProps,
    ref: forwardedRef
  });
};
const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
/* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedUnitControl(unitControlProps, forwardedRef) {
  const {
    __unstableStateReducer,
    autoComplete = 'off',
    // @ts-expect-error Ensure that children is omitted from restProps
    children,
    className,
    disabled = false,
    disableUnits = false,
    isPressEnterToChange = false,
    isResetValueOnUnitChange = false,
    isUnitSelectTabbable = true,
    label,
    onChange: onChangeProp,
    onUnitChange,
    size = 'default',
    unit: unitProp,
    units: unitsProp = CSS_UNITS,
    value: valueProp,
    onFocus: onFocusProp,
    ...props
  } = useDeprecated36pxDefaultSizeProp(unitControlProps);
  if ('unit' in unitControlProps) {
    external_wp_deprecated_default()('UnitControl unit prop', {
      since: '5.6',
      hint: 'The unit should be provided within the `value` prop.',
      version: '6.2'
    });
  }

// The `value` prop, in theory, should not be `null`, but the following line
  // ensures it fallback to `undefined` in case a consumer of `UnitControl`
  // still passes `null` as a `value`.
  const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
  const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => {
    const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp);
    const [{
      value: firstUnitValue = ''
    } = {}, ...rest] = list;
    const firstCharacters = rest.reduce((carry, {
      value
    }) => {
      const first = escapeRegExp(value?.substring(0, 1) || '');
      return carry.includes(first) ? carry : `${carry}|${first}`;
    }, escapeRegExp(firstUnitValue.substring(0, 1)));
    return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];
  }, [nonNullValueProp, unitProp, unitsProp]);
  const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units);
  const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, {
    initial: parsedUnit,
    fallback: ''
  });
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (parsedUnit !== undefined) {
      setUnit(parsedUnit);
    }
  }, [parsedUnit, setUnit]);
  const classes = dist_clsx('components-unit-control',
  // This class is added for legacy purposes to maintain it on the outer
  // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
  'components-unit-control-wrapper', className);
  const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
    if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
      onChangeProp?.('', changeProps);
      return;
    }

/*
     * Customizing the onChange callback.
     * This allows as to broadcast a combined value+unit to onChange.
     */
    const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join('');
    onChangeProp?.(onChangeValue, changeProps);
  };
  const handleOnUnitChange = (nextUnitValue, changeProps) => {
    const {
      data
    } = changeProps;
    let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`;
    if (isResetValueOnUnitChange && data?.default !== undefined) {
      nextValue = `${data.default}${nextUnitValue}`;
    }
    onChangeProp?.(nextValue, changeProps);
    onUnitChange?.(nextUnitValue, changeProps);
    setUnit(nextUnitValue);
  };
  let handleOnKeyDown;
  if (!disableUnits && isUnitSelectTabbable && units.length) {
    handleOnKeyDown = event => {
      props.onKeyDown?.(event);
      // Unless the meta key was pressed (to avoid interfering with
      // shortcuts, e.g. pastes), moves focus to the unit select if a key
      // matches the first character of a unit.
      if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) {
        refInputSuffix.current?.focus();
      }
    };
  }
  const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null);
  const inputSuffix = !disableUnits ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_select_control, {
    ref: refInputSuffix,
    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'),
    disabled: disabled,
    isUnitSelectTabbable: isUnitSelectTabbable,
    onChange: handleOnUnitChange,
    size: ['small', 'compact'].includes(size) || size === 'default' && !props.__next40pxDefaultSize ? 'small' : 'default',
    unit: unit,
    units: units,
    onFocus: onFocusProp,
    onBlur: unitControlProps.onBlur
  }) : null;
  let step = props.step;

/*
   * If no step prop has been passed, lookup the active unit and
   * try to get step from `units`, or default to a value of `1`
   */
  if (!step && units) {
    var _activeUnit$step;
    const activeUnit = units.find(option => option.value === unit);
    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ValueInput, {
    ...props,
    autoComplete: autoComplete,
    className: classes,
    disabled: disabled,
    spinControls: "none",
    isPressEnterToChange: isPressEnterToChange,
    label: label,
    onKeyDown: handleOnKeyDown,
    onChange: handleOnQuantityChange,
    ref: forwardedRef,
    size: size,
    suffix: inputSuffix,
    type: isPressEnterToChange ? 'text' : 'number',
    value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
    step: step,
    onFocus: onFocusProp,
    __unstableStateReducer: __unstableStateReducer
  });
}

/**
 * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
 *
 *
 * ```jsx
 * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 *   const [ value, setValue ] = useState( '10px' );
 *
 *   return <UnitControl onChange={ setValue } value={ value } />;
 * };
 * ```
 */
const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl);

/* harmony default export */ const unit_control = (UnitControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// If either width or color are defined, the border is considered valid
// and a border style can be set as well.
const isValidBorder = border => {
  const hasWidth = border?.width !== undefined && border.width !== '';
  const hasColor = border?.color !== undefined;
  return hasWidth || hasColor;
};
function useBorderControl(props) {
  const {
    className,
    colors = [],
    isCompact,
    onChange,
    enableAlpha = true,
    enableStyle = true,
    shouldSanitizeBorder = true,
    size = 'default',
    value: border,
    width,
    __experimentalIsRenderedInSidebar = false,
    __next40pxDefaultSize,
    ...otherProps
  } = useContextSystem(props, 'BorderControl');
  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
  const widthUnit = originalWidthUnit || 'px';
  const hadPreviousZeroWidth = widthValue === 0;
  const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)();
  const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)();
  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
  const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => {
    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
      onChange(undefined);
      return;
    }
    onChange(newBorder);
  }, [onChange, shouldSanitizeBorder]);
  const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => {
    const newWidthValue = newWidth === '' ? undefined : newWidth;
    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
    const hasZeroWidth = parsedValue === 0;
    const updatedBorder = {
      ...border,
      width: newWidthValue
    };

// Setting the border width explicitly to zero will also set the
    // border style to `none` and clear the border color.
    if (hasZeroWidth && !hadPreviousZeroWidth) {
      // Before clearing the color and style selections, keep track of
      // the current selections so they can be restored when the width
      // changes to a non-zero value.
      setColorSelection(border?.color);
      setStyleSelection(border?.style);

// Clear the color and style border properties.
      updatedBorder.color = undefined;
      updatedBorder.style = 'none';
    }

// Selection has changed from zero border width to non-zero width.
    if (!hasZeroWidth && hadPreviousZeroWidth) {
      // Restore previous border color and style selections if width
      // is now not zero.
      if (updatedBorder.color === undefined) {
        updatedBorder.color = colorSelection;
      }
      if (updatedBorder.style === 'none') {
        updatedBorder.style = styleSelection;
      }
    }
    onBorderChange(updatedBorder);
  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
  const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => {
    onWidthChange(`${value}${widthUnit}`);
  }, [onWidthChange, widthUnit]);

// Generate class names.
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderControl, className);
  }, [className, cx]);
  let wrapperWidth = width;
  if (isCompact) {
    // Widths below represent the minimum usable width for compact controls.
    // Taller controls contain greater internal padding, thus greater width.
    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
  }
  const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    const widthStyle = !!wrapperWidth && styles_wrapperWidth;
    const heightStyle = wrapperHeight(computedSize);
    return cx(innerWrapper(), widthStyle, heightStyle);
  }, [wrapperWidth, cx, computedSize]);
  const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderSlider());
  }, [cx]);
  return {
    ...otherProps,
    className: classes,
    colors,
    enableAlpha,
    enableStyle,
    innerWrapperClassName,
    inputWidth: wrapperWidth,
    isStyleSettable,
    onBorderChange,
    onSliderChange,
    onWidthChange,
    previousStyleSelection: styleSelection,
    sliderClassName,
    value: border,
    widthUnit,
    widthValue,
    size: computedSize,
    __experimentalIsRenderedInSidebar,
    __next40pxDefaultSize
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * The `BorderControl` brings together internal sub-components which allow users to
 * set the various properties of a border. The first sub-component, a
 * `BorderDropdown` contains options representing border color and style. The
 * border width is controlled via a `UnitControl` and an optional `RangeControl`.
 *
 * Border radius is not covered by this control as it may be desired separate to
 * color, style, and width. For example, the border radius may be absorbed under
 * a "shape" abstraction.
 *
 * ```jsx
 * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
 * import { __ } from '@wordpress/i18n';
 *
 * const colors = [
 * 	{ name: 'Blue 20', color: '#72aee6' },
 * 	// ...
 * ];
 *
 * const MyBorderControl = () => {
 * 	const [ border, setBorder ] = useState();
 * 	const onChange = ( newBorder ) => setBorder( newBorder );
 *
 * 	return (
 * 		<BorderControl
 * 			colors={ colors }
 * 			label={ __( 'Border' ) }
 * 			onChange={ onChange }
 * 			value={ border }
 * 		/>
 * 	);
 * };
 * ```
 */
const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
/* harmony default export */ const border_control_component = (BorderControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/utils.js
/**
 * External dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/hook.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedGrid(props, forwardedRef) {
  const gridProps = useGrid(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...gridProps,
    ref: forwardedRef
  });
}

/**
 * `Grid` is a primitive layout component that can arrange content in a grid configuration.
 *
 * ```jsx
 * import {
 * 	__experimentalGrid as Grid,
 * 	__experimentalText as Text
 * } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<Grid columns={ 3 }>
 * 			<Text>Code</Text>
 * 			<Text>is</Text>
 * 			<Text>Poetry</Text>
 * 		</Grid>
 * 	);
 * }
 * ```
 */
const Grid = contextConnect(UnconnectedGrid, 'Grid');
/* harmony default export */ const grid_component = (Grid);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useBorderBoxControlSplitControls(props) {
  const {
    className,
    colors = [],
    enableAlpha = false,
    enableStyle = true,
    size = 'default',
    __experimentalIsRenderedInSidebar = false,
    ...otherProps
  } = useContextSystem(props, 'BorderBoxControlSplitControls');

// Generate class names.
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderBoxControlSplitControls(size), className);
  }, [cx, className, size]);
  const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(centeredBorderControl, className);
  }, [cx, className]);
  const rightAlignedClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(rightBorderControl(), className);
  }, [cx, className]);
  return {
    ...otherProps,
    centeredClassName,
    className: classes,
    colors,
    enableAlpha,
    enableStyle,
    rightAlignedClassName,
    size,
    __experimentalIsRenderedInSidebar
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const BorderBoxControlSplitControls = (props, forwardedRef) => {
  const {
    centeredClassName,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    onChange,
    popoverPlacement,
    popoverOffset,
    rightAlignedClassName,
    size = 'default',
    value,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = useBorderBoxControlSplitControls(props);

// Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
  const sharedBorderControlProps = {
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    isCompact: true,
    __experimentalIsRenderedInSidebar,
    size
  };
  const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, {
    ...otherProps,
    ref: mergedRef,
    gap: 4,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_visualizer_component, {
      value: value,
      size: size
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {
      className: centeredClassName,
      hideLabelFromVision: true,
      label: (0,external_wp_i18n_namespaceObject.__)('Top border'),
      onChange: newBorder => onChange(newBorder, 'top'),
      __unstablePopoverProps: popoverProps,
      value: value?.top,
      ...sharedBorderControlProps
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {
      hideLabelFromVision: true,
      label: (0,external_wp_i18n_namespaceObject.__)('Left border'),
      onChange: newBorder => onChange(newBorder, 'left'),
      __unstablePopoverProps: popoverProps,
      value: value?.left,
      ...sharedBorderControlProps
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {
      className: rightAlignedClassName,
      hideLabelFromVision: true,
      label: (0,external_wp_i18n_namespaceObject.__)('Right border'),
      onChange: newBorder => onChange(newBorder, 'right'),
      __unstablePopoverProps: popoverProps,
      value: value?.right,
      ...sharedBorderControlProps
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {
      className: centeredClassName,
      hideLabelFromVision: true,
      label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'),
      onChange: newBorder => onChange(newBorder, 'bottom'),
      __unstablePopoverProps: popoverProps,
      value: value?.bottom,
      ...sharedBorderControlProps
    })]
  });
};
const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
/* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/unit-values.js
const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;

/**
 * Parses a number and unit from a value.
 *
 * @param toParse Value to parse
 *
 * @return  The extracted number and unit.
 */
function parseCSSUnitValue(toParse) {
  const value = toParse.trim();
  const matched = value.match(UNITED_VALUE_REGEX);
  if (!matched) {
    return [undefined, undefined];
  }
  const [, num, unit] = matched;
  let numParsed = parseFloat(num);
  numParsed = Number.isNaN(numParsed) ? undefined : numParsed;
  return [numParsed, unit];
}

/**
 * Combines a value and a unit into a unit value.
 *
 * @param value
 * @param unit
 *
 * @return The unit value.
 */
function createCSSUnitValue(value, unit) {
  return `${value}${unit}`;
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/utils.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

// If we have individual borders per side within the border object we
  // need to check whether any of those side borders have been set.
  if (hasSplitBorders(border)) {
    const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side]));
    return !allSidesEmpty;
  }

// If we have a top-level border only, check if that is empty. e.g.
  // { color: undefined, style: undefined, width: undefined }
  // Border radius can still be set within the border object as it is
  // handled separately.
  return !isEmptyBorder(border);
};
const isCompleteBorder = border => {
  if (!border) {
    return false;
  }
  return borderProps.every(prop => border[prop] !== undefined);
};
const hasSplitBorders = (border = {}) => {
  return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1);
};
const hasMixedBorders = borders => {
  if (!hasSplitBorders(borders)) {
    return false;
  }
  const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side]));
  return !shorthandBorders.every(border => border === shorthandBorders[0]);
};
const getSplitBorders = border => {
  if (!border || isEmptyBorder(border)) {
    return undefined;
  }
  return {
    top: border,
    right: border,
    bottom: border,
    left: border
  };
};
const getBorderDiff = (original, updated) => {
  const diff = {};
  if (original.color !== updated.color) {
    diff.color = updated.color;
  }
  if (original.style !== updated.style) {
    diff.style = updated.style;
  }
  if (original.width !== updated.width) {
    diff.width = updated.width;
  }
  return diff;
};
const getCommonBorder = borders => {
  if (!borders) {
    return undefined;
  }
  const colors = [];
  const styles = [];
  const widths = [];
  utils_sides.forEach(side => {
    colors.push(borders[side]?.color);
    styles.push(borders[side]?.style);
    widths.push(borders[side]?.width);
  });
  const allColorsMatch = colors.every(value => value === colors[0]);
  const allStylesMatch = styles.every(value => value === styles[0]);
  const allWidthsMatch = widths.every(value => value === widths[0]);
  return {
    color: allColorsMatch ? colors[0] : undefined,
    style: allStylesMatch ? styles[0] : undefined,
    width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)
  };
};
const getShorthandBorderStyle = (border, fallbackBorder) => {
  if (isEmptyBorder(border)) {
    return fallbackBorder;
  }
  const {
    color: fallbackColor,
    style: fallbackStyle,
    width: fallbackWidth
  } = fallbackBorder || {};
  const {
    color = fallbackColor,
    style = fallbackStyle,
    width = fallbackWidth
  } = border;
  const hasVisibleBorder = !!width && width !== '0' || !!color;
  const borderStyle = hasVisibleBorder ? style || 'solid' : style;
  return [width, borderStyle, color].filter(Boolean).join(' ');
};
const getMostCommonUnit = values => {
  // Collect all the CSS units.
  const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);

// Return the most common unit out of only the defined CSS units.
  const filteredUnits = units.filter(value => value !== undefined);
  return mode(filteredUnits);
};

/**
 * Finds the mode value out of the array passed favouring the first value
 * as a tiebreaker.
 *
 * @param values Values to determine the mode from.
 *
 * @return The mode value.
 */
function mode(values) {
  if (values.length === 0) {
    return undefined;
  }
  const map = {};
  let maxCount = 0;
  let currentMode;
  values.forEach(value => {
    map[value] = map[value] === undefined ? 1 : map[value] + 1;
    if (map[value] > maxCount) {
      currentMode = value;
      maxCount = map[value];
    }
  });
  return currentMode;
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useBorderBoxControl(props) {
  const {
    className,
    colors = [],
    onChange,
    enableAlpha = false,
    enableStyle = true,
    size = 'default',
    value,
    __experimentalIsRenderedInSidebar = false,
    __next40pxDefaultSize,
    ...otherProps
  } = useContextSystem(props, 'BorderBoxControl');
  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
  const mixedBorders = hasMixedBorders(value);
  const splitBorders = hasSplitBorders(value);
  const linkedValue = splitBorders ? getCommonBorder(value) : value;
  const splitValue = splitBorders ? value : getSplitBorders(value);

// If no numeric width value is set, the unit select will be disabled.
  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));
  const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders);
  const toggleLinked = () => setIsLinked(!isLinked);
  const onLinkedChange = newBorder => {
    if (!newBorder) {
      return onChange(undefined);
    }

// If we have all props defined on the new border apply it.
    if (!mixedBorders || isCompleteBorder(newBorder)) {
      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);
    }

// If we had mixed borders we might have had some shared border props
    // that we need to maintain. For example; we could have mixed borders
    // with all the same color but different widths. Then from the linked
    // control we change the color. We should keep the separate  widths.
    const changes = getBorderDiff(linkedValue, newBorder);
    const updatedBorders = {
      top: {
        ...value?.top,
        ...changes
      },
      right: {
        ...value?.right,
        ...changes
      },
      bottom: {
        ...value?.bottom,
        ...changes
      },
      left: {
        ...value?.left,
        ...changes
      }
    };
    if (hasMixedBorders(updatedBorders)) {
      return onChange(updatedBorders);
    }
    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;
    onChange(filteredResult);
  };
  const onSplitChange = (newBorder, side) => {
    const updatedBorders = {
      ...splitValue,
      [side]: newBorder
    };
    if (hasMixedBorders(updatedBorders)) {
      onChange(updatedBorders);
    } else {
      onChange(newBorder);
    }
  };
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderBoxControl, className);
  }, [cx, className]);
  const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(linkedBorderControl());
  }, [cx]);
  const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(wrapper);
  }, [cx]);
  return {
    ...otherProps,
    className: classes,
    colors,
    disableUnits: mixedBorders && !hasWidthValue,
    enableAlpha,
    enableStyle,
    hasMixedBorders: mixedBorders,
    isLinked,
    linkedControlClassName,
    onLinkedChange,
    onSplitChange,
    toggleLinked,
    linkedValue,
    size: computedSize,
    splitValue,
    wrapperClassName,
    __experimentalIsRenderedInSidebar
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
  const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, {
    className: className,
    ...otherProps,
    ref: mergedRef,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_BorderLabel, {
      label: label,
      hideLabelFromVision: hideLabelFromVision
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, {
      className: wrapperClassName,
      children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {
        className: linkedControlClassName,
        colors: colors,
        disableUnits: disableUnits,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onLinkedChange,
        placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined,
        __unstablePopoverProps: popoverProps,
        shouldSanitizeBorder: false // This component will handle that.
        ,
        value: linkedValue,
        withSlider: true,
        width: size === '__unstable-large' ? '116px' : '110px',
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        size: size
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_split_controls_component, {
        colors: colors,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onSplitChange,
        popoverPlacement: popoverPlacement,
        popoverOffset: popoverOffset,
        value: splitValue,
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        size: size
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_linked_button_component, {
        onClick: toggleLinked,
        isLinked: isLinked,
        size: size
      })]
    })]
  });
};

/**
 * The `BorderBoxControl` effectively has two view states. The first, a "linked"
 * view, allows configuration of a flat border via a single `BorderControl`.
 * The second, a "split" view, contains a `BorderControl` for each side
 * as well as a visualizer for the currently selected borders. Each view also
 * contains a button to toggle between the two.
 *
 * When switching from the "split" view to "linked", if the individual side
 * borders are not consistent, the "linked" view will display any border
 * properties selections that are consistent while showing a mixed state for
 * those that aren't. For example, if all borders had the same color and style
 * but different widths, then the border dropdown in the "linked" view's
 * `BorderControl` would show that consistent color and style but the "linked"
 * view's width input would show "Mixed" placeholder text.
 *
 * ```jsx
 * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
 * import { __ } from '@wordpress/i18n';
 *
 * const colors = [
 * 	{ name: 'Blue 20', color: '#72aee6' },
 * 	// ...
 * ];
 *
 * const MyBorderBoxControl = () => {
 * 	const defaultBorder = {
 * 		color: '#72aee6',
 * 		style: 'dashed',
 * 		width: '1px',
 * 	};
 * 	const [ borders, setBorders ] = useState( {
 * 		top: defaultBorder,
 * 		right: defaultBorder,
 * 		bottom: defaultBorder,
 * 		left: defaultBorder,
 * 	} );
 * 	const onChange = ( newBorders ) => setBorders( newBorders );
 *
 * 	return (
 * 		<BorderBoxControl
 * 			colors={ colors }
 * 			label={ __( 'Borders' ) }
 * 			onChange={ onChange }
 * 			value={ borders }
 * 		/>
 * 	);
 * };
 * ```
 */
const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
/* harmony default export */ const border_box_control_component = (BorderBoxControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js

function box_control_icon_styles_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)."; }
/**
 * External dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/icon.js
/**
 * Internal dependencies
 */

// Simulates SVG Icon scaling.
  const scale = size / BASE_ICON_SIZE;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(box_control_icon_styles_Root, {
    style: {
      transform: `scale(${scale})`
    },
    ...props,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Viewbox, {
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TopStroke, {
        isFocused: top
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RightStroke, {
        isFocused: right
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BottomStroke, {
        isFocused: bottom
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LeftStroke, {
        isFocused: left
      })]
    })
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js

function box_control_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/utils.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Gets an items with the most occurrence within an array
 * https://stackoverflow.com/a/20762713
 *
 * @param arr Array of items to check.
 * @return The item with the most occurrences.
 */
function utils_mode(arr) {
  return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
}

/**
 * Gets the 'all' input value and unit from values data.
 *
 * @param values         Box values.
 * @param selectedUnits  Box units.
 * @param availableSides Available box sides to evaluate.
 *
 * @return A value + unit for the 'all' input.
 */
function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) {
  const sides = normalizeSides(availableSides);
  const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side]));
  const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
    var _value$;
    return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
  });
  const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
  const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';

/**
   * The typeof === 'number' check is important. On reset actions, the incoming value
   * may be null or an empty string.
   *
   * Also, the value may also be zero (0), which is considered a valid unit value.
   *
   * typeof === 'number' is more specific for these cases, rather than relying on a
   * simple truthy check.
   */
  let commonUnit;
  if (typeof commonQuantity === 'number') {
    commonUnit = utils_mode(allParsedUnits);
  } else {
    var _getAllUnitFallback;
    // Set meaningful unit selection if no commonQuantity and user has previously
    // selected units without assigning values while controls were unlinked.
    commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : utils_mode(allParsedUnits);
  }
  return [commonQuantity, commonUnit].join('');
}

/**
 * Determine the most common unit selection to use as a fallback option.
 *
 * @param selectedUnits Current unit selections for individual sides.
 * @return  Most common unit selection.
 */
function getAllUnitFallback(selectedUnits) {
  if (!selectedUnits || typeof selectedUnits !== 'object') {
    return undefined;
  }
  const filteredUnits = Object.values(selectedUnits).filter(Boolean);
  return utils_mode(filteredUnits);
}

/**
 * Checks to determine if values are mixed.
 *
 * @param values        Box values.
 * @param selectedUnits Box units.
 * @param sides         Available box sides to evaluate.
 *
 * @return Whether values are mixed.
 */
function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) {
  const allValue = getAllValue(values, selectedUnits, sides);
  const isMixed = isNaN(parseFloat(allValue));
  return isMixed;
}

/**
 * Checks to determine if values are defined.
 *
 * @param values Box values.
 *
 * @return  Whether values are mixed.
 */
function isValuesDefined(values) {
  return values !== undefined && Object.values(values).filter(
  // Switching units when input is empty causes values only
  // containing units. This gives false positive on mixed values
  // unless filtered.
  value => !!value && /\d/.test(value)).length > 0;
}

/**
 * Get initial selected side, factoring in whether the sides are linked,
 * and whether the vertical / horizontal directions are grouped via splitOnAxis.
 *
 * @param isLinked    Whether the box control's fields are linked.
 * @param splitOnAxis Whether splitting by horizontal or vertical axis.
 * @return The initial side.
 */
function getInitialSide(isLinked, splitOnAxis) {
  let initialSide = 'all';
  if (!isLinked) {
    initialSide = splitOnAxis ? 'vertical' : 'top';
  }
  return initialSide;
}

/**
 * Normalizes provided sides configuration to an array containing only top,
 * right, bottom and left. This essentially just maps `horizontal` or `vertical`
 * to their appropriate sides to facilitate correctly determining value for
 * all input control.
 *
 * @param sides Available sides for box control.
 * @return Normalized sides configuration.
 */
function normalizeSides(sides) {
  const filteredSides = [];
  if (!sides?.length) {
    return ALL_SIDES;
  }
  if (sides.includes('vertical')) {
    filteredSides.push(...['top', 'bottom']);
  } else if (sides.includes('horizontal')) {
    filteredSides.push(...['left', 'right']);
  } else {
    const newSides = ALL_SIDES.filter(side => sides.includes(side));
    filteredSides.push(...newSides);
  }
  return filteredSides;
}

/**
 * Applies a value to an object representing top, right, bottom and left sides
 * while taking into account any custom side configuration.
 *
 * @param currentValues The current values for each side.
 * @param newValue      The value to apply to the sides object.
 * @param sides         Array defining valid sides.
 *
 * @return Object containing the updated values for each side.
 */
function applyValueToSides(currentValues, newValue, sides) {
  const newValues = {
    ...currentValues
  };
  if (sides?.length) {
    sides.forEach(side => {
      if (side === 'vertical') {
        newValues.top = newValue;
        newValues.bottom = newValue;
      } else if (side === 'horizontal') {
        newValues.left = newValue;
        newValues.right = newValue;
      } else {
        newValues[side] = newValue;
      }
    });
  } else {
    ALL_SIDES.forEach(side => newValues[side] = newValue);
  }
  return newValues;
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/all-input-control.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Set selected unit so it can be used as fallback by unlinked controls
  // when individual sides do not have a value containing a unit.
  const handleOnUnitChange = unit => {
    const newUnits = applyValueToSides(selectedUnits, unit, sides);
    setSelectedUnits(newUnits);
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {
      ...props,
      __next40pxDefaultSize: __next40pxDefaultSize,
      className: "component-box-control__unit-control",
      disableUnits: isMixed,
      id: inputId,
      isPressEnterToChange: true,
      value: allValue,
      onChange: onValueChange,
      onUnitChange: handleOnUnitChange,
      onFocus: handleOnFocus,
      placeholder: allPlaceholder,
      label: LABELS.all,
      hideLabelFromVision: true
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: __next40pxDefaultSize,
      "aria-controls": inputId,
      label: LABELS.all,
      hideLabelFromVision: true,
      onChange: sliderOnChange,
      min: 0,
      max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
      step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
      withInputField: false
    })]
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
     * Supports changing pair sides. For example, holding the ALT key
     * when changing the TOP will also update BOTTOM.
     */
    // @ts-expect-error - TODO: event.altKey is only present when the change event was
    // triggered by a keyboard event. Should this feature be implemented differently so
    // it also works with drag events?
    if (extra?.event.altKey) {
      switch (side) {
        case 'top':
          nextValues.bottom = nextValue;
          break;
        case 'bottom':
          nextValues.top = nextValue;
          break;
        case 'left':
          nextValues.right = nextValue;
          break;
        case 'right':
          nextValues.left = nextValue;
          break;
      }
    }
    handleOnChange(nextValues);
  };
  const createHandleOnUnitChange = side => next => {
    const newUnits = {
      ...selectedUnits
    };
    newUnits[side] = next;
    setSelectedUnits(newUnits);
  };

// Filter sides if custom configuration provided, maintaining default order.
  const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: filteredSides.map(side => {
      var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
      const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
      const inputId = [generatedId, side].join('-');
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
        expanded: true,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
          side: side,
          sides: sides
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
          placement: "top-end",
          text: LABELS[side],
          children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {
            ...props,
            __next40pxDefaultSize: __next40pxDefaultSize,
            className: "component-box-control__unit-control",
            id: inputId,
            isPressEnterToChange: true,
            value: [parsedQuantity, computedUnit].join(''),
            onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),
            onUnitChange: createHandleOnUnitChange(side),
            onFocus: createHandleOnFocus(side),
            label: LABELS[side],
            hideLabelFromVision: true
          })
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: __next40pxDefaultSize,
          "aria-controls": inputId,
          label: LABELS[side],
          hideLabelFromVision: true,
          onChange: newValue => {
            handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
          },
          min: 0,
          max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
          step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
          value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
          withInputField: false
        })]
      }, `box-control-${side}`);
    })
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Filter sides if custom configuration provided, maintaining default order.
  const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: filteredSides.map(side => {
      var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left);
      const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
      const inputId = [generatedId, side].join('-');
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
          side: side,
          sides: sides
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
          placement: "top-end",
          text: LABELS[side],
          children: /*#__PURE__*/(0,external_React_.createElement)(StyledUnitControl, {
            ...props,
            __next40pxDefaultSize: __next40pxDefaultSize,
            className: "component-box-control__unit-control",
            id: inputId,
            isPressEnterToChange: true,
            value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
            onChange: newValue => handleOnValueChange(side, newValue),
            onUnitChange: createHandleOnUnitChange(side),
            onFocus: createHandleOnFocus(side),
            label: LABELS[side],
            hideLabelFromVision: true,
            key: side
          })
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: __next40pxDefaultSize,
          "aria-controls": inputId,
          label: LABELS[side],
          hideLabelFromVision: true,
          onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),
          min: 0,
          max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
          step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
          value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
          withInputField: false
        })]
      }, side);
    })
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function LinkedButton({
  isLinked,
  ...props
}) {
  const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
    text: label,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
      ...props,
      className: "component-box-control__linked-button",
      size: "small",
      icon: isLinked ? library_link : link_off,
      iconSize: 24,
      "aria-label": label
    })
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * BoxControl components let users set values for Top, Right, Bottom, and Left.
 * This can be used as an input control for values like `padding` or `margin`.
 *
 * ```jsx
 * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 * 	const [ values, setValues ] = useState( {
 * 		top: '50px',
 * 		left: '10%',
 * 		right: '10%',
 * 		bottom: '50px',
 * 	} );
 *
 * 	return (
 * 		<BoxControl
 * 			values={ values }
 * 			onChange={ ( nextValues ) => setValues( nextValues ) }
 * 		/>
 * 	);
 * };
 * ```
 */
function BoxControl({
  __next40pxDefaultSize = false,
  id: idProp,
  inputProps = defaultInputProps,
  onChange = box_control_noop,
  label = (0,external_wp_i18n_namespaceObject.__)('Box Control'),
  values: valuesProp,
  units,
  sides,
  splitOnAxis = false,
  allowReset = true,
  resetValues = DEFAULT_VALUES,
  onMouseOver,
  onMouseOut
}) {
  const [values, setValues] = use_controlled_state(valuesProp, {
    fallback: DEFAULT_VALUES
  });
  const inputValues = values || DEFAULT_VALUES;
  const hasInitialValue = isValuesDefined(valuesProp);
  const hasOneSide = sides?.length === 1;
  const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue);
  const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
  const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis));

// Tracking selected units via internal state allows filtering of CSS unit
  // only values from being saved while maintaining preexisting unit selection
  // behaviour. Filtering CSS only values prevents invalid style values.
  const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({
    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],
    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]
  });
  const id = box_control_useUniqueId(idProp);
  const headingId = `${id}-heading`;
  const toggleLinked = () => {
    setIsLinked(!isLinked);
    setSide(getInitialSide(!isLinked, splitOnAxis));
  };
  const handleOnFocus = (_event, {
    side: nextSide
  }) => {
    setSide(nextSide);
  };
  const handleOnChange = nextValues => {
    onChange(nextValues);
    setValues(nextValues);
    setIsDirty(true);
  };
  const handleOnReset = () => {
    onChange(resetValues);
    setValues(resetValues);
    setSelectedUnits(resetValues);
    setIsDirty(false);
  };
  const inputControlProps = {
    ...inputProps,
    onChange: handleOnChange,
    onFocus: handleOnFocus,
    isLinked,
    units,
    selectedUnits,
    setSelectedUnits,
    sides,
    values: inputValues,
    onMouseOver,
    onMouseOut,
    __next40pxDefaultSize
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, {
    id: id,
    columns: 3,
    templateColumns: "1fr min-content min-content",
    role: "group",
    "aria-labelledby": headingId,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseControl.VisualLabel, {
      id: headingId,
      children: label
    }), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {
        side: side,
        sides: sides
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, {
        ...inputControlProps
      })]
    }), !hasOneSide && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButtonWrapper, {
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, {
        onClick: toggleLinked,
        isLinked: isLinked
      })
    }), !isLinked && splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, {
      ...inputControlProps
    }), !isLinked && !splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, {
      ...inputControlProps
    }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, {
      className: "component-box-control__reset-button",
      variant: "secondary",
      size: "small",
      onClick: handleOnReset,
      disabled: !isDirty,
      children: (0,external_wp_i18n_namespaceObject.__)('Reset')
    })]
  });
}

/* harmony default export */ const box_control = (BoxControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button-group/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * ButtonGroup can be used to group any related buttons together. To emphasize
 * related buttons, a group should share a common container.
 *
 * ```jsx
 * import { Button, ButtonGroup } from '@wordpress/components';
 *
 * const MyButtonGroup = () => (
 *   <ButtonGroup>
 *     <Button variant="primary">Button 1</Button>
 *     <Button variant="primary">Button 2</Button>
 *   </ButtonGroup>
 * );
 * ```
 */
const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup);
/* harmony default export */ const button_group = (ButtonGroup);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/styles.js
function elevation_styles_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)."; }
/**
 * External dependencies
 */

const Elevation =  true ? {
  name: "12ip69d",
  styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow"
} : 0;

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/hook.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedElevation(props, forwardedRef) {
  const elevationProps = useElevation(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...elevationProps,
    ref: forwardedRef
  });
}

/**
 * `Elevation` is a core component that renders shadow, using the component
 * system's shadow system.
 *
 * The shadow effect is generated using the `value` prop.
 *
 * ```jsx
 * import {
 *	__experimentalElevation as Elevation,
 *	__experimentalSurface as Surface,
 *	__experimentalText as Text,
 * } from '@wordpress/components';
 *
 * function Example() {
 *   return (
 *     <Surface>
 *       <Text>Code is Poetry</Text>
 *       <Elevation value={ 5 } />
 *     </Surface>
 *   );
 * }
 * ```
 */
const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation');
/* harmony default export */ const elevation_component = (component_Elevation);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/styles.js
function card_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

// Since the border for `Card` is rendered via the `box-shadow` property
// (as opposed to the `border` property), the value of the border radius needs
// to be adjusted by removing 1px (this is because the `box-shadow` renders
// as an "outer radius").
const adjustedBorderRadius = `calc(${config_values.cardBorderRadius} - 1px)`;
const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0),  true ? "" : 0);
const Header =  true ? {
  name: "1showjb",
  styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}"
} : 0;
const Footer =  true ? {
  name: "14n5oej",
  styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}"
} : 0;
const Content =  true ? {
  name: "13udsys",
  styles: "height:100%"
} : 0;
const Body =  true ? {
  name: "6ywzd",
  styles: "box-sizing:border-box;height:auto;max-height:100%"
} : 0;
const Media =  true ? {
  name: "dq805e",
  styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}"
} : 0;
const Divider =  true ? {
  name: "c990dr",
  styles: "box-sizing:border-box;display:block;width:100%"
} : 0;
const borderRadius = /*#__PURE__*/emotion_react_browser_esm_css("&:first-of-type{border-top-left-radius:", adjustedBorderRadius, ";border-top-right-radius:", adjustedBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", adjustedBorderRadius, ";border-bottom-right-radius:", adjustedBorderRadius, ";}" + ( true ? "" : 0),  true ? "" : 0);
const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0),  true ? "" : 0);
const boxShadowless =  true ? {
  name: "1t90u8d",
  styles: "box-shadow:none"
} : 0;
const borderless =  true ? {
  name: "1e1ncky",
  styles: "border:none"
} : 0;
const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0),  true ? "" : 0);
const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0);
const cardPaddings = {
  large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0),  true ? "" : 0),
  medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0),  true ? "" : 0),
  small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
  xSmall: xSmallCardPadding,
  // The `extraSmall` size is not officially documented, but the following styles
  // are kept for legacy reasons to support older values of the `size` prop.
  extraSmall: xSmallCardPadding
};
const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0),  true ? "" : 0);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/styles.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// The `elevation` prop should only be passed when it's not `undefined`,
  // otherwise it will override the value that gets derived from `useContextSystem`.
  if (typeof computedElevation !== 'undefined') {
    propsToReturn.elevation = computedElevation;
  }
  return propsToReturn;
}
function useCard(props) {
  const {
    className,
    elevation = 0,
    isBorderless = false,
    isRounded = true,
    size = 'medium',
    ...otherProps
  } = useContextSystem(hook_useDeprecatedProps(props), 'Card');
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className);
  }, [className, cx, isBorderless, isRounded]);
  const surfaceProps = useSurface({
    ...otherProps,
    className: classes
  });
  return {
    ...surfaceProps,
    elevation,
    isBorderless,
    isRounded,
    size
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/component.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `Card` provides a flexible and extensible content container.
 * `Card` also provides a convenient set of sub-components such as `CardBody`,
 * `CardHeader`, `CardFooter`, and more.
 *
 * ```jsx
 * import {
 *   Card,
 *   CardHeader,
 *   CardBody,
 *   CardFooter,
 *   __experimentalText as Text,
 *   __experimentalHeading as Heading,
 * } from `@wordpress/components`;
 *
 * function Example() {
 *   return (
 *     <Card>
 *       <CardHeader>
 *         <Heading level={ 4 }>Card Title</Heading>
 *       </CardHeader>
 *       <CardBody>
 *         <Text>Card Content</Text>
 *       </CardBody>
 *       <CardFooter>
 *         <Text>Card Footer</Text>
 *       </CardFooter>
 *     </Card>
 *   );
 * }
 * ```
 */
const component_Card = contextConnect(UnconnectedCard, 'Card');
/* harmony default export */ const card_component = (component_Card);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/styles.js
function scrollable_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedScrollable(props, forwardedRef) {
  const scrollableProps = useScrollable(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...scrollableProps,
    ref: forwardedRef
  });
}

/**
 * `Scrollable` is a layout component that content in a scrollable container.
 *
 * ```jsx
 * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<Scrollable style={ { maxHeight: 200 } }>
 * 			<div style={ { height: 500 } }>...</div>
 * 		</Scrollable>
 * 	);
 * }
 * ```
 */
const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable');
/* harmony default export */ const scrollable_component = (component_Scrollable);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `CardBody` renders an optional content area for a `Card`.
 * Multiple `CardBody` components can be used within `Card` if needed.
 *
 * ```jsx
 * import { Card, CardBody } from `@wordpress/components`;
 *
 * <Card>
 * 	<CardBody>
 * 		...
 * 	</CardBody>
 * </Card>
 * ```
 */
const CardBody = contextConnect(UnconnectedCardBody, 'CardBody');
/* harmony default export */ const card_body_component = (CardBody);

;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YZEJGRDQ.js
"use client";

// src/separator/separator.ts
var useSeparator = createHook(
  (_a) => {
    var _b = _a, { orientation = "horizontal" } = _b, props = __objRest(_b, ["orientation"]);
    props = _4R3V3JGP_spreadValues({
      role: "separator",
      "aria-orientation": orientation
    }, props);
    return props;
  }
);
var Separator = createComponent((props) => {
  const htmlProps = useSeparator(props);
  return _3ORBWXWF_createElement("hr", htmlProps);
});
if (false) {}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/styles.js

function divider_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const MARGIN_DIRECTIONS = {
  vertical: {
    start: 'marginLeft',
    end: 'marginRight'
  },
  horizontal: {
    start: 'marginTop',
    end: 'marginBottom'
  }
};

// Renders the correct margins given the Divider's `orientation` and the writing direction.
// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
// the latter will take priority.
const renderMargin = ({
  'aria-orientation': orientation = 'horizontal',
  margin,
  marginStart,
  marginEnd
}) => /*#__PURE__*/emotion_react_browser_esm_css(rtl({
  [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin),
  [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin)
})(),  true ? "" : 0,  true ? "" : 0);
var divider_styles_ref =  true ? {
  name: "1u4hpl4",
  styles: "display:inline"
} : 0;
const renderDisplay = ({
  'aria-orientation': orientation = 'horizontal'
}) => {
  return orientation === 'vertical' ? divider_styles_ref : undefined;
};
const renderBorder = ({
  'aria-orientation': orientation = 'horizontal'
}) => {
  return /*#__PURE__*/emotion_react_browser_esm_css({
    [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor'
  },  true ? "" : 0,  true ? "" : 0);
};
const renderSize = ({
  'aria-orientation': orientation = 'horizontal'
}) => /*#__PURE__*/emotion_react_browser_esm_css({
  height: orientation === 'vertical' ? 'auto' : 0,
  width: orientation === 'vertical' ? 0 : 'auto'
},  true ? "" : 0,  true ? "" : 0);
const DividerView = /*#__PURE__*/emotion_styled_base_browser_esm("hr",  true ? {
  target: "e19on6iw0"
} : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0));

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/component.js
/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * Internal dependencies
 */

function UnconnectedDivider(props, forwardedRef) {
  const contextProps = useContextSystem(props, 'Divider');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Separator, {
    render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DividerView, {}),
    ...contextProps,
    ref: forwardedRef
  });
}

/**
 * `Divider` is a layout component that separates groups of related content.
 *
 * ```js
 * import {
 * 		__experimentalDivider as Divider,
 * 		__experimentalText as Text,
 * 		__experimentalVStack as VStack,
 * } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<VStack spacing={4}>
 * 			<Text>Some text here</Text>
 * 			<Divider />
 * 			<Text>Some more text here</Text>
 * 		</VStack>
 * 	);
 * }
 * ```
 */
const component_Divider = contextConnect(UnconnectedDivider, 'Divider');
/* harmony default export */ const divider_component = (component_Divider);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedCardDivider(props, forwardedRef) {
  const dividerProps = useCardDivider(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(divider_component, {
    ...dividerProps,
    ref: forwardedRef
  });
}

/**
 * `CardDivider` renders an optional divider within a `Card`.
 * It is typically used to divide multiple `CardBody` components from each other.
 *
 * ```jsx
 * import { Card, CardBody, CardDivider } from `@wordpress/components`;
 *
 * <Card>
 *  <CardBody>...</CardBody>
 *  <CardDivider />
 *  <CardBody>...</CardBody>
 * </Card>
 * ```
 */
const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider');
/* harmony default export */ const card_divider_component = (CardDivider);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedCardFooter(props, forwardedRef) {
  const footerProps = useCardFooter(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, {
    ...footerProps,
    ref: forwardedRef
  });
}

/**
 * `CardFooter` renders an optional footer within a `Card`.
 *
 * ```jsx
 * import { Card, CardBody, CardFooter } from `@wordpress/components`;
 *
 * <Card>
 * 	<CardBody>...</CardBody>
 * 	<CardFooter>...</CardFooter>
 * </Card>
 * ```
 */
const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter');
/* harmony default export */ const card_footer_component = (CardFooter);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedCardHeader(props, forwardedRef) {
  const headerProps = useCardHeader(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, {
    ...headerProps,
    ref: forwardedRef
  });
}

/**
 * `CardHeader` renders an optional header within a `Card`.
 *
 * ```jsx
 * import { Card, CardBody, CardHeader } from `@wordpress/components`;
 *
 * <Card>
 * 	<CardHeader>...</CardHeader>
 * 	<CardBody>...</CardBody>
 * </Card>
 * ```
 */
const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader');
/* harmony default export */ const card_header_component = (CardHeader);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedCardMedia(props, forwardedRef) {
  const cardMediaProps = useCardMedia(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...cardMediaProps,
    ref: forwardedRef
  });
}

/**
 * `CardMedia` provides a container for full-bleed content within a `Card`,
 * such as images, video, or even just a background color.
 *
 * @example
 * ```jsx
 * import { Card, CardBody, CardMedia } from '@wordpress/components';
 *
 * const Example = () => (
 *  <Card>
 *	  <CardMedia>
 *		  <img src="..." />
 *    </CardMedia>
 *    <CardBody>...</CardBody>
 *  </Card>
 * );
 * ```
 */
const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia');
/* harmony default export */ const card_media_component = (CardMedia);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/checkbox-control/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Checkboxes allow the user to select one or more items from a set.
 *
 * ```jsx
 * import { CheckboxControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyCheckboxControl = () => {
 *   const [ isChecked, setChecked ] = useState( true );
 *   return (
 *     <CheckboxControl
 *       label="Is author"
 *       help="Is the user a author or not?"
 *       checked={ isChecked }
 *       onChange={ setChecked }
 *     />
 *   );
 * };
 * ```
 */
function CheckboxControl(props) {
  const {
    __nextHasNoMarginBottom,
    label,
    className,
    heading,
    checked,
    indeterminate,
    help,
    id: idProp,
    onChange,
    ...additionalProps
  } = props;
  if (heading) {
    external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', {
      alternative: 'a separate element to implement a heading',
      since: '5.8'
    });
  }
  const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false);
  const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false);

// Run the following callback every time the `ref` (and the additional
  // dependencies) change.
  const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
    if (!node) {
      return;
    }

// It cannot be set using an HTML attribute.
    node.indeterminate = !!indeterminate;
    setShowCheckedIcon(node.matches(':checked'));
    setShowIndeterminateIcon(node.matches(':indeterminate'));
  }, [checked, indeterminate]);
  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp);
  const onChangeValue = event => onChange(event.target.checked);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
    label: heading,
    id: id,
    help: help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
      className: "components-checkbox-control__help",
      children: help
    }),
    className: dist_clsx('components-checkbox-control', className),
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
      spacing: 0,
      justify: "start",
      alignment: "top",
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", {
        className: "components-checkbox-control__input-container",
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", {
          ref: ref,
          id: id,
          className: "components-checkbox-control__input",
          type: "checkbox",
          value: "1",
          onChange: onChangeValue,
          checked: checked,
          "aria-describedby": !!help ? id + '__help' : undefined,
          ...additionalProps
        }), showIndeterminateIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
          icon: library_reset,
          className: "components-checkbox-control__indeterminate",
          role: "presentation"
        }) : null, showCheckedIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, {
          icon: library_check,
          className: "components-checkbox-control__checked",
          role: "presentation"
        }) : null]
      }), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", {
        className: "components-checkbox-control__label",
        htmlFor: id,
        children: label
      })]
    })
  });
}
/* harmony default export */ const checkbox_control = (CheckboxControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/clipboard-button/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Workaround for inconsistent behavior in Safari, where <textarea> is not
  // the document.activeElement at the moment when the copy event fires.
  // This causes documentHasSelection() in the copy-handler component to
  // mistakenly override the ClipboardButton, and copy a serialized string
  // of the current block instead.
  const focusOnCopyEventTarget = event => {
    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
    event.target.focus();
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
    ...buttonProps,
    className: classes,
    ref: ref,
    onCopy: focusOnCopyEventTarget,
    children: children
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js
/**
 * WordPress dependencies
 */

const moreVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
    d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
  })
});
/* harmony default export */ const more_vertical = (moreVertical);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/styles.js
function item_group_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/*
 * Math:
 * - Use the desired height as the base value
 * - Subtract the computed height of (default) text
 * - Subtract the effects of border
 * - Divide the calculated number by 2, in order to get an individual top/bottom padding
 */
const paddingY = `calc((${config_values.controlHeight} - ${baseFontHeight} - 2px) / 2)`;
const paddingYSmall = `calc((${config_values.controlHeightSmall} - ${baseFontHeight} - 2px) / 2)`;
const paddingYLarge = `calc((${config_values.controlHeightLarge} - ${baseFontHeight} - 2px) / 2)`;
const itemSizes = {
  small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
  medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0),  true ? "" : 0),
  large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0),  true ? "" : 0)
};

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js
/**
 * Internal dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/context.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({
  size: 'medium'
});
const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `ItemGroup` displays a list of `Item`s grouped and styled together.
 *
 * ```jsx
 * import {
 *   __experimentalItemGroup as ItemGroup,
 *   __experimentalItem as Item,
 * } from '@wordpress/components';
 *
 * function Example() {
 *   return (
 *     <ItemGroup>
 *       <Item>Code</Item>
 *       <Item>is</Item>
 *       <Item>Poetry</Item>
 *     </ItemGroup>
 *   );
 * }
 * ```
 */
const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup');
/* harmony default export */ const item_group_component = (ItemGroup);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js
const GRADIENT_MARKERS_WIDTH = 16;
const INSERT_POINT_WIDTH = 16;
const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
const MINIMUM_SIGNIFICANT_MOVE = 5;
const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js
/**
 * Internal dependencies
 */

/**
 * Clamps a number between 0 and 100.
 *
 * @param value Value to clamp.
 *
 * @return Value clamped between 0 and 100.
 */
function clampPercent(value) {
  return Math.max(0, Math.min(100, value));
}

/**
 * Check if a control point is overlapping with another.
 *
 * @param value        Array of control points.
 * @param initialIndex Index of the position to test.
 * @param newPosition  New position of the control point.
 * @param minDistance  Distance considered to be overlapping.
 *
 * @return True if the point is overlapping.
 */
function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
  const initialPosition = value[initialIndex].position;
  const minPosition = Math.min(initialPosition, newPosition);
  const maxPosition = Math.max(initialPosition, newPosition);
  return value.some(({
    position
  }, index) => {
    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
  });
}

/**
 * Adds a control point from an array and returns the new array.
 *
 * @param points   Array of control points.
 * @param position Position to insert the new point.
 * @param color    Color to update the control point at index.
 *
 * @return New array of control points.
 */
function addControlPoint(points, position, color) {
  const nextIndex = points.findIndex(point => point.position > position);
  const newPoint = {
    color,
    position
  };
  const newPoints = points.slice();
  newPoints.splice(nextIndex - 1, 0, newPoint);
  return newPoints;
}

/**
 * Removes a control point from an array and returns the new array.
 *
 * @param points Array of control points.
 * @param index  Index to remove.
 *
 * @return New array of control points.
 */
function removeControlPoint(points, index) {
  return points.filter((_point, pointIndex) => {
    return pointIndex !== index;
  });
}
/**
 * Updates a control point from an array and returns the new array.
 *
 * @param points   Array of control points.
 * @param index    Index to update.
 * @param newPoint New control point to replace the index.
 *
 * @return New array of control points.
 */
function updateControlPoint(points, index, newPoint) {
  const newValue = points.slice();
  newValue[index] = newPoint;
  return newValue;
}

/**
 * Updates the position of a control point from an array and returns the new array.
 *
 * @param points      Array of control points.
 * @param index       Index to update.
 * @param newPosition Position to move the control point at index.
 *
 * @return New array of control points.
 */
function updateControlPointPosition(points, index, newPosition) {
  if (isOverlapping(points, index, newPosition)) {
    return points;
  }
  const newPoint = {
    ...points[index],
    position: newPosition
  };
  return updateControlPoint(points, index, newPoint);
}

/**
 * Updates the position of a control point from an array and returns the new array.
 *
 * @param points   Array of control points.
 * @param index    Index to update.
 * @param newColor Color to update the control point at index.
 *
 * @return New array of control points.
 */
function updateControlPointColor(points, index, newColor) {
  const newPoint = {
    ...points[index],
    color: newColor
  };
  return updateControlPoint(points, index, newPoint);
}

/**
 * Updates the position of a control point from an array and returns the new array.
 *
 * @param points   Array of control points.
 * @param position Position of the color stop.
 * @param newColor Color to update the control point at index.
 *
 * @return New array of control points.
 */
function updateControlPointColorByPosition(points, position, newColor) {
  const index = points.findIndex(point => point.position === position);
  return updateControlPointColor(points, index, newColor);
}

/**
 * Gets the horizontal coordinate when dragging a control point with the mouse.
 *
 * @param mouseXcoordinate Horizontal coordinate of the mouse position.
 * @param containerElement Container for the gradient picker.
 *
 * @return Whole number percentage from the left.
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
  // This memoization would prevent the event listeners from being properly cleaned.
  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
  const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)();
  cleanEventListenersRef.current = cleanEventListeners;
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    return () => {
      cleanEventListenersRef.current?.();
    };
  }, []);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: controlPoints.map((point, index) => {
      const initialPosition = point?.position;
      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, {
        isRenderedInSidebar: __experimentalIsRenderedInSidebar,
        onClose: onStopControlPointChange,
        renderToggle: ({
          isOpen,
          onToggle
        }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ControlPointButton, {
          onClick: () => {
            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
              return;
            }
            if (isOpen) {
              onStopControlPointChange();
            } else {
              onStartControlPointChange();
            }
            onToggle();
          },
          onMouseDown: () => {
            if (window && window.addEventListener) {
              controlPointMoveState.current = {
                initialPosition,
                index,
                significantMoveHappened: false,
                listenersActivated: true
              };
              onStartControlPointChange();
              window.addEventListener('mousemove', onMouseMove);
              window.addEventListener('mouseup', cleanEventListeners);
            }
          },
          onKeyDown: event => {
            if (event.code === 'ArrowLeft') {
              // Stop propagation of the key press event to avoid focus moving
              // to another editor area.
              event.stopPropagation();
              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
            } else if (event.code === 'ArrowRight') {
              // Stop propagation of the key press event to avoid focus moving
              // to another editor area.
              event.stopPropagation();
              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
            }
          },
          isOpen: isOpen,
          position: point.position,
          color: point.color
        }, index),
        renderContent: ({
          onClose
        }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, {
          paddingSize: "none",
          children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {
            enableAlpha: !disableAlpha,
            color: point.color,
            onChange: color => {
              onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString()));
            }
          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, {
            className: "components-custom-gradient-picker__remove-control-point-wrapper",
            alignment: "center",
            children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
              onClick: () => {
                onChange(removeControlPoint(controlPoints, index));
                onClose();
              },
              variant: "link",
              children: (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')
            })
          })]
        }),
        style: {
          left: `${point.position}%`,
          transform: 'translateX( -50% )'
        }
      }, index);
    })
  });
}
function InsertPoint({
  value: controlPoints,
  onChange,
  onOpenInserter,
  onCloseInserter,
  insertPosition,
  disableAlpha,
  __experimentalIsRenderedInSidebar
}) {
  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, {
    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
    className: "components-custom-gradient-picker__inserter",
    onClose: () => {
      onCloseInserter();
    },
    renderToggle: ({
      isOpen,
      onToggle
    }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: () => {
        if (isOpen) {
          onCloseInserter();
        } else {
          setAlreadyInsertedPoint(false);
          onOpenInserter();
        }
        onToggle();
      },
      className: "components-custom-gradient-picker__insert-point-dropdown",
      icon: library_plus
    }),
    renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
      paddingSize: "none",
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {
        enableAlpha: !disableAlpha,
        onChange: color => {
          if (!alreadyInsertedPoint) {
            onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString()));
            setAlreadyInsertedPoint(true);
          } else {
            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString()));
          }
        }
      })
    }),
    style: insertPosition !== null ? {
      left: `${insertPosition}%`,
      transform: 'translateX( -50% )'
    } : undefined
  });
}
ControlPoints.InsertPoint = InsertPoint;
/* harmony default export */ const control_points = (ControlPoints);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// If the insert point is close to an existing control point don't show it.
    if (controlPoints.some(({
      position
    }) => {
      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
    })) {
      if (gradientBarState.id === 'MOVING_INSERTER') {
        gradientBarStateDispatch({
          type: 'STOP_INSERTER_MOVE'
        });
      }
      return;
    }
    gradientBarStateDispatch({
      type: 'MOVE_INSERTER',
      insertPosition
    });
  };
  const onMouseLeave = () => {
    gradientBarStateDispatch({
      type: 'STOP_INSERTER_MOVE'
    });
  };
  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
    className: dist_clsx('components-custom-gradient-picker__gradient-bar', {
      'has-gradient': hasGradient
    }),
    onMouseEnter: onMouseEnterAndMove,
    onMouseMove: onMouseEnterAndMove,
    onMouseLeave: onMouseLeave,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
      className: "components-custom-gradient-picker__gradient-bar-background",
      style: {
        background,
        opacity: hasGradient ? 1 : 0.4
      }
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
      ref: gradientMarkersContainerDomRef,
      className: "components-custom-gradient-picker__markers-container",
      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points.InsertPoint, {
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        disableAlpha: disableAlpha,
        insertPosition: gradientBarState.insertPosition,
        value: controlPoints,
        onChange: onChange,
        onOpenInserter: () => {
          gradientBarStateDispatch({
            type: 'OPEN_INSERTER'
          });
        },
        onCloseInserter: () => {
          gradientBarStateDispatch({
            type: 'CLOSE_INSERTER'
          });
        }
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points, {
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        disableAlpha: disableAlpha,
        disableRemove: disableInserter,
        gradientPickerDomRef: gradientMarkersContainerDomRef,
        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
        value: controlPoints,
        onChange: onChange,
        onStartControlPointChange: () => {
          gradientBarStateDispatch({
            type: 'START_CONTROL_CHANGE'
          });
        },
        onStopControlPointChange: () => {
          gradientBarStateDispatch({
            type: 'STOP_CONTROL_CHANGE'
          });
        }
      })]
    })]
  });
}

// EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js
var build_node = __webpack_require__(8924);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js
/**
 * WordPress dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js
/**
 * External dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

k([names]);
function getLinearGradientRepresentation(gradientAST) {
  return serializeGradient({
    type: 'linear-gradient',
    orientation: HORIZONTAL_GRADIENT_ORIENTATION,
    colorStops: gradientAST.colorStops
  });
}
function hasUnsupportedLength(item) {
  return item.length === undefined || item.length.type !== '%';
}
function getGradientAstWithDefault(value) {
  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
  let gradientAST;
  let hasGradient = !!value;
  const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT;
  try {
    gradientAST = build_node.parse(valueToParse)[0];
  } catch (error) {
    // eslint-disable-next-line no-console
    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);
    gradientAST = build_node.parse(DEFAULT_GRADIENT)[0];
    hasGradient = false;
  }
  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {
    gradientAST.orientation = {
      type: 'angular',
      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()
    };
  }
  if (gradientAST.colorStops.some(hasUnsupportedLength)) {
    const {
      colorStops
    } = gradientAST;
    const step = 100 / (colorStops.length - 1);
    colorStops.forEach((stop, index) => {
      stop.length = {
        value: `${step * index}`,
        type: '%'
      };
    });
  }
  return {
    gradientAST,
    hasGradient
  };
}
function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
  return {
    ...gradientAST,
    colorStops: newControlPoints.map(({
      position,
      color
    }) => {
      const {
        r,
        g,
        b,
        a
      } = w(color).toRgb();
      return {
        length: {
          type: '%',
          value: position?.toString()
        },
        type: a < 1 ? 'rgba' : 'rgb',
        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]
      };
    })
  };
}
function getStopCssColor(colorStop) {
  switch (colorStop.type) {
    case 'hex':
      return `#${colorStop.value}`;
    case 'literal':
      return colorStop.value;
    case 'rgb':
    case 'rgba':
      return `${colorStop.type}(${colorStop.value.join(',')})`;
    default:
      // Should be unreachable if passing an AST from gradient-parser.
      // See https://github.com/rafaelcaricio/gradient-parser#ast.
      return 'transparent';
  }
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js

function custom_gradient_picker_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
  target: "e10bzpgi1"
} : 0)( true ? {
  name: "1gvx10y",
  styles: "flex-grow:5"
} : 0);
const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
  target: "e10bzpgi0"
} : 0)( true ? {
  name: "1gvx10y",
  styles: "flex-grow:5"
} : 0);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * CustomGradientPicker is a React component that renders a UI for specifying
 * linear or radial gradients. Radial gradients are displayed in the picker as
 * a slice of the gradient from the center to the outside.
 *
 * ```jsx
 * import { CustomGradientPicker } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyCustomGradientPicker = () => {
 *   const [ gradient, setGradient ] = useState();
 *
 *   return (
 *     <CustomGradientPicker
 *			value={ gradient }
 *			onChange={ setGradient }
 *     />
 *   );
 * };
 * ```
 */
function CustomGradientPicker({
  value,
  onChange,
  __experimentalIsRenderedInSidebar = false
}) {
  const {
    gradientAST,
    hasGradient
  } = getGradientAstWithDefault(value);

// On radial gradients the bar should display a linear gradient.
  // On radial gradients the bar represents a slice of the gradient from the center until the outside.
  // On liner gradients the bar represents the color stops from left to right independently of the angle.
  const background = getLinearGradientRepresentation(gradientAST);

// Control points color option may be hex from presets, custom colors will be rgb.
  // The position should always be a percentage.
  const controlPoints = gradientAST.colorStops.map(colorStop => {
    return {
      color: getStopCssColor(colorStop),
      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
      // TypeScript doesn't know that `colorStop.length` is not undefined here.
      // @ts-expect-error
      position: parseInt(colorStop.length.value)
    };
  });
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
    spacing: 4,
    className: "components-custom-gradient-picker",
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, {
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      background: background,
      hasGradient: hasGradient,
      value: controlPoints,
      onChange: newControlPoints => {
        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));
      }
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, {
      gap: 3,
      className: "components-custom-gradient-picker__ui-line",
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectWrapper, {
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientTypePicker, {
          gradientAST: gradientAST,
          hasGradient: hasGradient,
          onChange: onChange
        })
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AccessoryWrapper, {
        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientAnglePicker, {
          gradientAST: gradientAST,
          hasGradient: hasGradient,
          onChange: onChange
        })
      })]
    })]
  });
}
/* harmony default export */ const custom_gradient_picker = (CustomGradientPicker);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/gradient-picker/index.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// The Multiple Origin Gradients have a `gradients` property (an array of
// gradient objects), while Single Origin ones have a `gradient` property.
const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);
const isMultipleOriginArray = arr => {
  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
};
function SingleOrigin({
  className,
  clearGradient,
  gradients,
  onChange,
  value,
  ...additionalProps
}) {
  const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return gradients.map(({
      gradient,
      name,
      slug
    }, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, {
      value: gradient,
      isSelected: value === gradient,
      tooltipText: name ||
      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient),
      style: {
        color: 'rgba( 0,0,0,0 )',
        background: gradient
      },
      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
      "aria-label": name ?
      // translators: %s: The name of the gradient e.g: "Angular red to blue".
      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) :
      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient)
    }, slug));
  }, [gradients, value, onChange, clearGradient]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, {
    className: className,
    options: gradientOptions,
    ...additionalProps
  });
}
function MultipleOrigin({
  className,
  clearGradient,
  gradients,
  onChange,
  value,
  headingLevel
}) {
  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
    spacing: 3,
    className: className,
    children: gradients.map(({
      name,
      gradients: gradientSet
    }, index) => {
      const id = `color-palette-${instanceId}-${index}`;
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
        spacing: 2,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, {
          level: headingLevel,
          id: id,
          children: name
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, {
          clearGradient: clearGradient,
          gradients: gradientSet,
          onChange: gradient => onChange(gradient, index),
          value: value,
          "aria-labelledby": id
        })]
      }, index);
    })
  });
}
function gradient_picker_Component(props) {
  const {
    asButtons,
    loop,
    actions,
    headingLevel,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledby,
    ...additionalProps
  } = props;
  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultipleOrigin, {
    headingLevel: headingLevel,
    ...additionalProps
  }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, {
    ...additionalProps
  });
  let metaProps;
  if (asButtons) {
    metaProps = {
      asButtons: true
    };
  } else {
    const _metaProps = {
      asButtons: false,
      loop
    };
    if (ariaLabel) {
      metaProps = {
        ..._metaProps,
        'aria-label': ariaLabel
      };
    } else if (ariaLabelledby) {
      metaProps = {
        ..._metaProps,
        'aria-labelledby': ariaLabelledby
      };
    } else {
      metaProps = {
        ..._metaProps,
        'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
      };
    }
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
    ...metaProps,
    actions: actions,
    options: options
  });
}

/**
 *  GradientPicker is a React component that renders a color gradient picker to
 * define a multi step gradient. There's either a _linear_ or a _radial_ type
 * available.
 *
 * ```jsx
 *import { GradientPicker } from '@wordpress/components';
 *import { useState } from '@wordpress/element';
 *
 *const myGradientPicker = () => {
 *	const [ gradient, setGradient ] = useState( null );
 *
 *	return (
 *		<GradientPicker
 *			value={ gradient }
 *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 *			gradients={ [
 *				{
 *					name: 'JShine',
 *					gradient:
 *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
 *					slug: 'jshine',
 *				},
 *				{
 *					name: 'Moonlit Asteroid',
 *					gradient:
 *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
 *					slug: 'moonlit-asteroid',
 *				},
 *				{
 *					name: 'Rastafarie',
 *					gradient:
 *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
 *					slug: 'rastafari',
 *				},
 *			] }
 *		/>
 *	);
 *};
 *```
 *
 */
function GradientPicker({
  className,
  gradients = [],
  onChange,
  value,
  clearable = true,
  disableCustomGradients = false,
  __experimentalIsRenderedInSidebar,
  headingLevel = 2,
  ...additionalProps
}) {
  const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
    spacing: gradients.length ? 4 : 0,
    children: [!disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, {
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      value: value,
      onChange: onChange
    }), (gradients.length > 0 || clearable) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker_Component, {
      ...additionalProps,
      className: className,
      clearGradient: clearGradient,
      gradients: gradients,
      onChange: onChange,
      value: value,
      actions: clearable && !disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {
        onClick: clearGradient,
        children: (0,external_wp_i18n_namespaceObject.__)('Clear')
      }),
      headingLevel: headingLevel
    })]
  });
}
/* harmony default export */ const gradient_picker = (GradientPicker);

;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/menu.js
/**
 * WordPress dependencies
 */

const menu = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
    d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"
  })
});
/* harmony default export */ const library_menu = (menu);

;// CONCATENATED MODULE: external ["wp","dom"]
const external_wp_dom_namespaceObject = window["wp"]["dom"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/container.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// We use DOM event listeners instead of React event listeners
    // because we want to catch events from the underlying DOM tree
    // The React Tree can be different from the DOM tree when using
    // portals. Block Toolbars for instance are rendered in a separate
    // React Trees.
    this.container.addEventListener('keydown', this.onKeyDown);
  }
  componentWillUnmount() {
    if (!this.container) {
      return;
    }
    this.container.removeEventListener('keydown', this.onKeyDown);
  }
  bindContainer(ref) {
    const {
      forwardedRef
    } = this.props;
    this.container = ref;
    if (typeof forwardedRef === 'function') {
      forwardedRef(ref);
    } else if (forwardedRef && 'current' in forwardedRef) {
      forwardedRef.current = ref;
    }
  }
  getFocusableContext(target) {
    if (!this.container) {
      return null;
    }
    const {
      onlyBrowserTabstops
    } = this.props;
    const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable;
    const focusables = finder.find(this.container);
    const index = this.getFocusableIndex(focusables, target);
    if (index > -1 && target) {
      return {
        index,
        target,
        focusables
      };
    }
    return null;
  }
  getFocusableIndex(focusables, target) {
    return focusables.indexOf(target);
  }
  onKeyDown(event) {
    if (this.props.onKeyDown) {
      this.props.onKeyDown(event);
    }
    const {
      getFocusableContext
    } = this;
    const {
      cycle = true,
      eventToOffset,
      onNavigate = container_noop,
      stopNavigationEvents
    } = this.props;
    const offset = eventToOffset(event);

// eventToOffset returns undefined if the event is not handled by the component.
    if (offset !== undefined && stopNavigationEvents) {
      // Prevents arrow key handlers bound to the document directly interfering.
      event.stopImmediatePropagation();

// When navigating a collection of items, prevent scroll containers
      // from scrolling. The preventDefault also prevents Voiceover from
      // 'handling' the event, as voiceover will try to use arrow keys
      // for highlighting text.
      const targetRole = event.target?.getAttribute('role');
      const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);
      if (targetHasMenuItemRole) {
        event.preventDefault();
      }
    }
    if (!offset) {
      return;
    }
    const activeElement = event.target?.ownerDocument?.activeElement;
    if (!activeElement) {
      return;
    }
    const context = getFocusableContext(activeElement);
    if (!context) {
      return;
    }
    const {
      index,
      focusables
    } = context;
    const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset;
    if (nextIndex >= 0 && nextIndex < focusables.length) {
      focusables[nextIndex].focus();
      onNavigate(nextIndex, focusables[nextIndex]);

// `preventDefault()` on tab to avoid having the browser move the focus
      // after this component has already moved it.
      if (event.code === 'Tab') {
        event.preventDefault();
      }
    }
  }
  render() {
    const {
      children,
      stopNavigationEvents,
      eventToOffset,
      onNavigate,
      onKeyDown,
      cycle,
      onlyBrowserTabstops,
      forwardedRef,
      ...restProps
    } = this.props;
    return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
      ref: this.bindContainer,
      ...restProps,
      children: children
    });
  }
}
const forwardedNavigableContainer = (props, ref) => {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigableContainer, {
    ...props,
    forwardedRef: ref
  });
};
forwardedNavigableContainer.displayName = 'NavigableContainer';
/* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer));

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/menu.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * A container for a navigable menu.
 *
 *  ```jsx
 *  import {
 *    NavigableMenu,
 *    Button,
 *  } from '@wordpress/components';
 *
 *  function onNavigate( index, target ) {
 *    console.log( `Navigates to ${ index }`, target );
 *  }
 *
 *  const MyNavigableContainer = () => (
 *    <div>
 *      <span>Navigable Menu:</span>
 *      <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
 *        <Button variant="secondary">Item 1</Button>
 *        <Button variant="secondary">Item 2</Button>
 *        <Button variant="secondary">Item 3</Button>
 *      </NavigableMenu>
 *    </div>
 *  );
 *  ```
 */
const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu);
/* harmony default export */ const navigable_container_menu = (NavigableMenu);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Normalize controls to nested array of objects (sets of controls)
  let controlSets;
  if (controls?.length) {
    // @ts-expect-error The check below is needed because `DropdownMenus`
    // rendered by `ToolBarGroup` receive controls as a nested array.
    controlSets = controls;
    if (!Array.isArray(controlSets[0])) {
      // This is not ideal, but at this point we know that `controls` is
      // not a nested array, even if TypeScript doesn't.
      controlSets = [controls];
    }
  }
  const mergedPopoverProps = dropdown_menu_mergeProps({
    className: 'components-dropdown-menu__popover',
    variant
  }, popoverProps);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, {
    className: className,
    popoverProps: mergedPopoverProps,
    renderToggle: ({
      isOpen,
      onToggle
    }) => {
      var _toggleProps$showTool;
      const openOnArrowDown = event => {
        if (disableOpenOnArrowDown) {
          return;
        }
        if (!isOpen && event.code === 'ArrowDown') {
          event.preventDefault();
          onToggle();
        }
      };
      const {
        as: Toggle = build_module_button,
        ...restToggleProps
      } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
      const mergedToggleProps = dropdown_menu_mergeProps({
        className: dist_clsx('components-dropdown-menu__toggle', {
          'is-opened': isOpen
        })
      }, restToggleProps);
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Toggle, {
        ...mergedToggleProps,
        icon: icon,
        onClick: event => {
          onToggle();
          if (mergedToggleProps.onClick) {
            mergedToggleProps.onClick(event);
          }
        },
        onKeyDown: event => {
          openOnArrowDown(event);
          if (mergedToggleProps.onKeyDown) {
            mergedToggleProps.onKeyDown(event);
          }
        },
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        label: label,
        text: text,
        showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,
        children: mergedToggleProps.children
      });
    },
    renderContent: props => {
      const mergedMenuProps = dropdown_menu_mergeProps({
        'aria-label': label,
        className: dist_clsx('components-dropdown-menu__menu', {
          'no-icons': noIcons
        })
      }, menuProps);
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, {
        ...mergedMenuProps,
        role: "menu",
        children: [dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
          onClick: event => {
            event.stopPropagation();
            props.onClose();
            if (control.onClick) {
              control.onClick();
            }
          },
          className: dist_clsx('components-dropdown-menu__menu-item', {
            'has-separator': indexOfSet > 0 && indexOfControl === 0,
            'is-active': control.isActive,
            'is-icon-only': !control.title
          }),
          icon: control.icon,
          label: control.label,
          "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
          disabled: control.isDisabled,
          children: control.title
        }, [indexOfSet, indexOfControl].join())))]
      });
    },
    open: open,
    defaultOpen: defaultOpen,
    onToggle: onToggleProp
  });
}

/**
 *
 * The DropdownMenu displays a list of actions (each contained in a MenuItem,
 * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
 * after the user has interacted with an element (a button or icon) or when
 * they perform a specific action.
 *
 * Render a Dropdown Menu with a set of controls:
 *
 * ```jsx
 * import { DropdownMenu } from '@wordpress/components';
 * import {
 * 	more,
 * 	arrowLeft,
 * 	arrowRight,
 * 	arrowUp,
 * 	arrowDown,
 * } from '@wordpress/icons';
 *
 * const MyDropdownMenu = () => (
 * 	<DropdownMenu
 * 		icon={ more }
 * 		label="Select a direction"
 * 		controls={ [
 * 			{
 * 				title: 'Up',
 * 				icon: arrowUp,
 * 				onClick: () => console.log( 'up' ),
 * 			},
 * 			{
 * 				title: 'Right',
 * 				icon: arrowRight,
 * 				onClick: () => console.log( 'right' ),
 * 			},
 * 			{
 * 				title: 'Down',
 * 				icon: arrowDown,
 * 				onClick: () => console.log( 'down' ),
 * 			},
 * 			{
 * 				title: 'Left',
 * 				icon: arrowLeft,
 * 				onClick: () => console.log( 'left' ),
 * 			},
 * 		] }
 * 	/>
 * );
 * ```
 *
 * Alternatively, specify a `children` function which returns elements valid for
 * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
 *
 * ```jsx
 * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
 *
 * const MyDropdownMenu = () => (
 * 	<DropdownMenu icon={ more } label="Select a direction">
 * 		{ ( { onClose } ) => (
 * 			<>
 * 				<MenuGroup>
 * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 * 						Move Up
 * 					</MenuItem>
 * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
 * 						Move Down
 * 					</MenuItem>
 * 				</MenuGroup>
 * 				<MenuGroup>
 * 					<MenuItem icon={ trash } onClick={ onClose }>
 * 						Remove
 * 					</MenuItem>
 * 				</MenuGroup>
 * 			</>
 * 		) }
 * 	</DropdownMenu>
 * );
 * ```
 *
 */
const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');
/* harmony default export */ const dropdown_menu = (DropdownMenu);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/styles.js

function palette_edit_styles_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)."; }
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_COLOR = '#000';
function NameInput({
  value,
  onChange,
  label
}) {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInputControl, {
    label: label,
    hideLabelFromVision: true,
    value: value,
    onChange: onChange
  });
}

/**
 * Returns a name and slug for a palette item. The name takes the format "Color + id".
 * To ensure there are no duplicate ids, this function checks all slugs.
 * It expects slugs to be in the format: slugPrefix + color- + number.
 * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
 *
 * @param elements   An array of color palette items.
 * @param slugPrefix The slug prefix used to match the element slug.
 *
 * @return A name and slug for the new palette item.
 */
function getNameAndSlugForPosition(elements, slugPrefix) {
  const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
  const position = elements.reduce((previousValue, currentValue) => {
    if (typeof currentValue?.slug === 'string') {
      const matches = currentValue?.slug.match(nameRegex);
      if (matches) {
        const id = parseInt(matches[1], 10);
        if (id >= previousValue) {
          return id + 1;
        }
      }
    }
    return previousValue;
  }, 1);
  return {
    name: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */
    (0,external_wp_i18n_namespaceObject.__)('Color %s'), position),
    slug: `${slugPrefix}color-${position}`
  };
}
function ColorPickerPopover({
  isGradient,
  element,
  onChange,
  popoverProps: receivedPopoverProps,
  onClose = () => {}
}) {
  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
    shift: true,
    offset: 20,
    // Disabling resize as it would otherwise cause the popover to show
    // scrollbars while dragging the color picker's handle close to the
    // popover edge.
    resize: false,
    placement: 'left-start',
    ...receivedPopoverProps,
    className: dist_clsx('components-palette-edit__popover', receivedPopoverProps?.className)
  }), [receivedPopoverProps]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(popover, {
    ...popoverProps,
    onClose: onClose,
    children: [!isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {
      color: element.color,
      enableAlpha: true,
      onChange: newColor => {
        onChange({
          ...element,
          color: newColor
        });
      }
    }), isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
      className: "components-palette-edit__popover-gradient-picker",
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, {
        __experimentalIsRenderedInSidebar: true,
        value: element.gradient,
        onChange: newGradient => {
          onChange({
            ...element,
            gradient: newGradient
          });
        }
      })
    })]
  });
}
function palette_edit_Option({
  canOnlyChangeValues,
  element,
  onChange,
  onRemove,
  popoverProps: receivedPopoverProps,
  slugPrefix,
  isGradient
}) {
  const value = isGradient ? element.gradient : element.color;
  const [isEditingColor, setIsEditingColor] = (0,external_wp_element_namespaceObject.useState)(false);

// Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
    ...receivedPopoverProps,
    // Use the custom palette color item as the popover anchor.
    anchor: popoverAnchor
  }), [popoverAnchor, receivedPopoverProps]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteItem, {
    ref: setPopoverAnchor,
    as: "div",
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
      justify: "flex-start",
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
        onClick: () => {
          setIsEditingColor(true);
        },
        "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(
        // translators: %s is a color or gradient name, e.g. "Red".
        (0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value),
        style: {
          padding: 0
        },
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(IndicatorStyled, {
          colorValue: value
        })
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
        children: !canOnlyChangeValues ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInput, {
          label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'),
          value: element.name,
          onChange: nextName => onChange({
            ...element,
            name: nextName,
            slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')
          })
        }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameContainer, {
          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
          '\u00A0'
        })
      }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RemoveButton, {
          size: "small",
          icon: line_solid,
          label: (0,external_wp_i18n_namespaceObject.sprintf)(
          // translators: %s is a color or gradient name, e.g. "Red".
          (0,external_wp_i18n_namespaceObject.__)('Remove color: %s'), element.name.trim().length ? element.name : value),
          onClick: onRemove
        })
      })]
    }), isEditingColor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, {
      isGradient: isGradient,
      onChange: onChange,
      element: element,
      popoverProps: popoverProps,
      onClose: () => setIsEditingColor(false)
    })]
  });
}
function PaletteEditListView({
  elements,
  onChange,
  canOnlyChangeValues,
  slugPrefix,
  isGradient,
  popoverProps,
  addColorRef
}) {
  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
  const elementsReference = (0,external_wp_element_namespaceObject.useRef)();
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    elementsReference.current = elements;
  }, [elements]);
  const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
    spacing: 3,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_group_component, {
      isRounded: true,
      children: elements.map((element, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(palette_edit_Option, {
        isGradient: isGradient,
        canOnlyChangeValues: canOnlyChangeValues,
        element: element,
        onChange: newElement => {
          debounceOnChange(elements.map((currentElement, currentIndex) => {
            if (currentIndex === index) {
              return newElement;
            }
            return currentElement;
          }));
        },
        onRemove: () => {
          const newElements = elements.filter((_currentElement, currentIndex) => {
            if (currentIndex === index) {
              return false;
            }
            return true;
          });
          onChange(newElements.length ? newElements : undefined);
          addColorRef.current?.focus();
        },
        slugPrefix: slugPrefix,
        popoverProps: popoverProps
      }, index))
    })
  });
}
const EMPTY_ARRAY = [];

/**
 * Allows editing a palette of colors or gradients.
 *
 * ```jsx
 * import { PaletteEdit } from '@wordpress/components';
 * const MyPaletteEdit = () => {
 *   const [ controlledColors, setControlledColors ] = useState( colors );
 *
 *   return (
 *     <PaletteEdit
 *       colors={ controlledColors }
 *       onChange={ ( newColors?: Color[] ) => {
 *         setControlledColors( newColors );
 *       } }
 *       paletteLabel="Here is a label"
 *     />
 *   );
 * };
 * ```
 */
function PaletteEdit({
  gradients,
  colors = EMPTY_ARRAY,
  onChange,
  paletteLabel,
  paletteLabelHeadingLevel = 2,
  emptyMessage,
  canOnlyChangeValues,
  canReset,
  slugPrefix = '',
  popoverProps
}) {
  const isGradient = !!gradients;
  const elements = isGradient ? gradients : colors;
  const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false);
  const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null);
  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
  const elementsLength = elements.length;
  const hasElements = elementsLength > 0;
  const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
  const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => {
    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];
    const key = isGradient ? 'gradient' : 'color';
    // Ensures that the index returned matches a known element value.
    if (!!selectedElement && selectedElement[key] === value) {
      setEditingElement(newEditingElementIndex);
    } else {
      setIsEditing(true);
    }
  }, [isGradient, elements]);
  const addColorRef = (0,external_wp_element_namespaceObject.useRef)(null);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditStyles, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteHeading, {
        level: paletteLabelHeadingLevel,
        children: paletteLabel
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteActionsContainer, {
        children: [hasElements && isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DoneButton, {
          size: "small",
          onClick: () => {
            setIsEditing(false);
            setEditingElement(null);
          },
          children: (0,external_wp_i18n_namespaceObject.__)('Done')
        }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
          ref: addColorRef,
          size: "small",
          isPressed: isAdding,
          icon: library_plus,
          label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'),
          onClick: () => {
            const {
              name,
              slug
            } = getNameAndSlugForPosition(elements, slugPrefix);
            if (!!gradients) {
              onChange([...gradients, {
                gradient: DEFAULT_GRADIENT,
                name,
                slug
              }]);
            } else {
              onChange([...colors, {
                color: DEFAULT_COLOR,
                name,
                slug
              }]);
            }
            setIsEditing(true);
            setEditingElement(elements.length);
          }
        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, {
          icon: more_vertical,
          label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'),
          toggleProps: {
            size: 'small'
          },
          children: ({
            onClose
          }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
            children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, {
              role: "menu",
              children: [!isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
                variant: "tertiary",
                onClick: () => {
                  setIsEditing(true);
                  onClose();
                },
                className: "components-palette-edit__menu-button",
                children: (0,external_wp_i18n_namespaceObject.__)('Show details')
              }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
                variant: "tertiary",
                onClick: () => {
                  setEditingElement(null);
                  setIsEditing(false);
                  onChange();
                  onClose();
                },
                className: "components-palette-edit__menu-button",
                children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')
              }), canReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
                variant: "tertiary",
                onClick: () => {
                  setEditingElement(null);
                  onChange();
                  onClose();
                },
                children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors')
              })]
            })
          })
        })]
      })]
    }), hasElements && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditContents, {
      children: [isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditListView, {
        canOnlyChangeValues: canOnlyChangeValues,
        elements: elements
        // @ts-expect-error TODO: Don't know how to resolve
        ,
        onChange: onChange,
        slugPrefix: slugPrefix,
        isGradient: isGradient,
        popoverProps: popoverProps,
        addColorRef: addColorRef
      }), !isEditing && editingElement !== null && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, {
        isGradient: isGradient,
        onClose: () => setEditingElement(null),
        onChange: newElement => {
          debounceOnChange(
          // @ts-expect-error TODO: Don't know how to resolve
          elements.map((currentElement, currentIndex) => {
            if (currentIndex === editingElement) {
              return newElement;
            }
            return currentElement;
          }));
        },
        element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
        popoverProps: popoverProps
      }), !isEditing && (isGradient ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker, {
        gradients: gradients,
        onChange: onSelectPaletteItem,
        clearable: false,
        disableCustomGradients: true
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {
        colors: colors,
        onChange: onSelectPaletteItem,
        clearable: false,
        disableCustomColors: true
      }))]
    }), !hasElements && emptyMessage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditContents, {
      children: emptyMessage
    })]
  });
}
/* harmony default export */ const palette_edit = (PaletteEdit);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/styles.js

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const deprecatedDefaultSize = ({
  __next40pxDefaultSize
}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0),  true ? "" : 0);
const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
  target: "evuatpg0"
} : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0));

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/* eslint-disable jsx-a11y/click-events-have-key-events */
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", {
        id: `components-form-token-suggestions-${instanceId}-${index}`,
        role: "option",
        className: className,
        onMouseDown: handleMouseDown,
        onClick: handleClick(suggestion),
        onMouseEnter: handleHover(suggestion),
        "aria-selected": index === selectedIndex,
        "aria-disabled": isDisabled,
        children: output
      }, key);
      /* eslint-enable jsx-a11y/click-events-have-key-events */
    })
  });
}
/* harmony default export */ const suggestions_list = (SuggestionsList);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js
/**
 * WordPress dependencies
 */

/* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {
  const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined);
  const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
    ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside),
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
      ref: bindFocusOutsideHandler,
      ...props
    })
  });
}, 'withFocusOutside'));

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of
 * being able to search for options using a search input.
 *
 * ```jsx
 * import { ComboboxControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const options = [
 * 	{
 * 		value: 'small',
 * 		label: 'Small',
 * 	},
 * 	{
 * 		value: 'normal',
 * 		label: 'Normal',
 * 		disabled: true,
 * 	},
 * 	{
 * 		value: 'large',
 * 		label: 'Large',
 * 		disabled: false,
 * 	},
 * ];
 *
 * function MyComboboxControl() {
 * 	const [ fontSize, setFontSize ] = useState();
 * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 * 	return (
 * 		<ComboboxControl
 * 			label="Font Size"
 * 			value={ fontSize }
 * 			onChange={ setFontSize }
 * 			options={ filteredOptions }
 * 			onFilterValueChange={ ( inputValue ) =>
 * 				setFilteredOptions(
 * 					options.filter( ( option ) =>
 * 						option.label
 * 							.toLowerCase()
 * 							.startsWith( inputValue.toLowerCase() )
 * 					)
 * 				)
 * 			}
 * 		/>
 * 	);
 * }
 * ```
 */
function ComboboxControl(props) {
  var _currentOption$label;
  const {
    __nextHasNoMarginBottom = false,
    __next40pxDefaultSize = false,
    value: valueProp,
    label,
    options,
    onChange: onChangeProp,
    onFilterValueChange = combobox_control_noop,
    hideLabelFromVision,
    help,
    allowReset = true,
    className,
    messages = {
      selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.')
    },
    __experimentalRenderItem,
    expandOnFocus = true
  } = useDeprecated36pxDefaultSizeProp(props);
  const [value, setValue] = useControlledValue({
    value: valueProp,
    onChange: onChangeProp
  });
  const currentOption = options.find(option => option.value === value);
  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
  // Use a custom prefix when generating the `instanceId` to avoid having
  // duplicate input IDs when rendering this component and `FormTokenField`
  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl, 'combobox-control');
  const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null);
  const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
  const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);
  const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)('');
  const inputContainer = (0,external_wp_element_namespaceObject.useRef)(null);
  const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => {
    const startsWithMatch = [];
    const containsMatch = [];
    const match = normalizeTextString(inputValue);
    options.forEach(option => {
      const index = normalizeTextString(option.label).indexOf(match);
      if (index === 0) {
        startsWithMatch.push(option);
      } else if (index > 0) {
        containsMatch.push(option);
      }
    });
    return startsWithMatch.concat(containsMatch);
  }, [inputValue, options]);
  const onSuggestionSelected = newSelectedSuggestion => {
    if (newSelectedSuggestion.disabled) {
      return;
    }
    setValue(newSelectedSuggestion.value);
    (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive');
    setSelectedSuggestion(newSelectedSuggestion);
    setInputValue('');
    setIsExpanded(false);
  };
  const handleArrowNavigation = (offset = 1) => {
    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);
    let nextIndex = index + offset;
    if (nextIndex < 0) {
      nextIndex = matchingSuggestions.length - 1;
    } else if (nextIndex >= matchingSuggestions.length) {
      nextIndex = 0;
    }
    setSelectedSuggestion(matchingSuggestions[nextIndex]);
    setIsExpanded(true);
  };
  const onKeyDown = withIgnoreIMEEvents(event => {
    let preventDefault = false;
    if (event.defaultPrevented) {
      return;
    }
    switch (event.code) {
      case 'Enter':
        if (selectedSuggestion) {
          onSuggestionSelected(selectedSuggestion);
          preventDefault = true;
        }
        break;
      case 'ArrowUp':
        handleArrowNavigation(-1);
        preventDefault = true;
        break;
      case 'ArrowDown':
        handleArrowNavigation(1);
        preventDefault = true;
        break;
      case 'Escape':
        setIsExpanded(false);
        setSelectedSuggestion(null);
        preventDefault = true;
        break;
      default:
        break;
    }
    if (preventDefault) {
      event.preventDefault();
    }
  });
  const onBlur = () => {
    setInputHasFocus(false);
  };
  const onFocus = () => {
    setInputHasFocus(true);
    if (expandOnFocus) {
      setIsExpanded(true);
    }
    onFilterValueChange('');
    setInputValue('');
  };
  const onClick = () => {
    setIsExpanded(true);
  };
  const onFocusOutside = () => {
    setIsExpanded(false);
  };
  const onInputChange = event => {
    const text = event.value;
    setInputValue(text);
    onFilterValueChange(text);
    if (inputHasFocus) {
      setIsExpanded(true);
    }
  };
  const handleOnReset = () => {
    setValue(null);
    inputContainer.current?.focus();
  };

// Update current selections when the filter input changes.
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    const hasMatchingSuggestions = matchingSuggestions.length > 0;
    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;
    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
      setSelectedSuggestion(matchingSuggestions[0]);
    }
  }, [matchingSuggestions, selectedSuggestion]);

// Announcements.
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    const hasMatchingSuggestions = matchingSuggestions.length > 0;
    if (isExpanded) {
      const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
      (0,external_wp_i18n_namespaceObject._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) : (0,external_wp_i18n_namespaceObject.__)('No results.');
      (0,external_wp_a11y_namespaceObject.speak)(message, 'polite');
    }
  }, [matchingSuggestions, isExpanded]);

// Disable reason: There is no appropriate role which describes the
  // input container intended accessible usability.
  // TODO: Refactor click detection to use blur to stop propagation.
  /* eslint-disable jsx-a11y/no-static-element-interactions */
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DetectOutside, {
    onFocusOutside: onFocusOutside,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
      className: dist_clsx(className, 'components-combobox-control'),
      label: label,
      id: `components-form-token-input-${instanceId}`,
      hideLabelFromVision: hideLabelFromVision,
      help: help,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
        className: "components-combobox-control__suggestions-container",
        tabIndex: -1,
        onKeyDown: onKeyDown,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapperFlex, {
          __next40pxDefaultSize: __next40pxDefaultSize,
          children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, {
            children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(token_input, {
              className: "components-combobox-control__input",
              instanceId: instanceId,
              ref: inputContainer,
              value: isExpanded ? inputValue : currentLabel,
              onFocus: onFocus,
              onBlur: onBlur,
              onClick: onClick,
              isExpanded: isExpanded,
              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
              onChange: onInputChange
            })
          }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, {
            children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
              className: "components-combobox-control__reset",
              icon: close_small,
              disabled: !value,
              onClick: handleOnReset,
              label: (0,external_wp_i18n_namespaceObject.__)('Reset')
            })
          })]
        }), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, {
          instanceId: instanceId
          // The empty string for `value` here is not actually used, but is
          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.
          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
          ,
          match: {
            label: inputValue,
            value: ''
          },
          displayTransform: suggestion => suggestion.label,
          suggestions: matchingSuggestions,
          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
          onHover: setSelectedSuggestion,
          onSelect: onSuggestionSelected,
          scrollIntoView: true,
          __experimentalRenderItem: __experimentalRenderItem
        })]
      })
    })
  });
  /* eslint-enable jsx-a11y/no-static-element-interactions */
}
/* harmony default export */ const combobox_control = (ComboboxControl);

;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3X3MDQGM.js
"use client";

// src/group/group-label-context.ts

var GroupLabelContext = (0,external_React_.createContext)(void 0);

;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/R2QZ3KXH.js
"use client";

// src/group/group.tsx

;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/636A7WVS.js
"use client";

// src/composite/composite-group.ts
var useCompositeGroup = createHook(
  (_a) => {
    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
    props = useGroup(props);
    return props;
  }
);
var CompositeGroup = createComponent(
  (props) => {
    const htmlProps = useCompositeGroup(props);
    return _3ORBWXWF_createElement("div", htmlProps);
  }
);
if (false) {}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/composite/legacy/index.js
/**
 * Composite is a component that may contain navigable items represented by
 * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
 * all the keyboard navigation mechanisms to ensure that there's only one
 * tab stop for the whole Composite element. This means that it can behave as
 * a roving tabindex or aria-activedescendant container.
 *
 * @see https://ariakit.org/components/composite
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Legacy composite components can either provide state through a
// single `state` prop, or via individual props, usually through
// spreading the state generated by `useCompositeState`.
// That is, `<Composite* { ...state }>`.

// The old `CompositeGroup` used to behave more like the current
// `CompositeRow`, but this has been split into two different
// components. We handle that difference by checking on the
// provided role, and returning the appropriate component.
const unproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(({
  role,
  ...props
}, ref) => {
  const Component = role === 'row' ? CompositeRow : CompositeGroup;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
    ref: ref,
    role: role,
    ...props
  });
});
unproxiedCompositeGroup.displayName = 'CompositeGroup';
const legacy_Composite = proxyComposite(Composite, {
  baseId: 'id'
});
const legacy_CompositeGroup = proxyComposite(unproxiedCompositeGroup);
const legacy_CompositeItem = proxyComposite(CompositeItem, {
  focusable: 'accessibleWhenDisabled'
});
function useCompositeState(legacyStateOptions = {}) {
  const {
    baseId,
    currentId: defaultActiveId,
    orientation,
    rtl = false,
    loop: focusLoop = false,
    wrap: focusWrap = false,
    shift: focusShift = false,
    // eslint-disable-next-line camelcase
    unstable_virtual: virtualFocus
  } = legacyStateOptions;
  return {
    baseId: (0,external_wp_compose_namespaceObject.useInstanceId)(legacy_Composite, 'composite', baseId),
    store: useCompositeStore({
      defaultActiveId,
      rtl,
      orientation,
      focusLoop,
      focusShift,
      focusWrap,
      virtualFocus
    })
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/aria-helper.js
const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
const hiddenElementsByDepth = [];

/**
 * Hides all elements in the body element from screen-readers except
 * the provided element and elements that should not be hidden from
 * screen-readers.
 *
 * The reason we do this is because `aria-modal="true"` currently is bugged
 * in Safari, and support is spotty in other browsers overall. In the future
 * we should consider removing these helper functions in favor of
 * `aria-modal="true"`.
 *
 * @param modalElement The element that should not be hidden.
 */
function modalize(modalElement) {
  const elements = Array.from(document.body.children);
  const hiddenElements = [];
  hiddenElementsByDepth.push(hiddenElements);
  for (const element of elements) {
    if (element === modalElement) {
      continue;
    }
    if (elementShouldBeHidden(element)) {
      element.setAttribute('aria-hidden', 'true');
      hiddenElements.push(element);
    }
  }
}

/**
 * Determines if the passed element should not be hidden from screen readers.
 *
 * @param element The element that should be checked.
 *
 * @return Whether the element should not be hidden from screen-readers.
 */
function elementShouldBeHidden(element) {
  const role = element.getAttribute('role');
  return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
}

/**
 * Accessibly reveals the elements hidden by the latest modal.
 */
function unmodalize() {
  const hiddenElements = hiddenElementsByDepth.pop();
  if (!hiddenElements) {
    return;
  }
  for (const element of hiddenElements) {
    element.removeAttribute('aria-hidden');
  }
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Used to track and dismiss the prior modal when another opens unless nested.

const ModalContext = (0,external_wp_element_namespaceObject.createContext)([]);

// Used to track body class names applied while modals are open.
const bodyOpenClasses = new Map();
function UnforwardedModal(props, forwardedRef) {
  const {
    bodyOpenClassName = 'modal-open',
    role = 'dialog',
    title = null,
    focusOnMount = true,
    shouldCloseOnEsc = true,
    shouldCloseOnClickOutside = true,
    isDismissible = true,
    /* Accessibility. */
    aria = {
      labelledby: undefined,
      describedby: undefined
    },
    onRequestClose,
    icon,
    closeButtonLabel,
    children,
    style,
    overlayClassName,
    className,
    contentLabel,
    onKeyDown,
    isFullScreen = false,
    size,
    headerActions = null,
    __experimentalHideHeader = false
  } = props;
  const ref = (0,external_wp_element_namespaceObject.useRef)();
  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal);
  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;

// The focus hook does not support 'firstContentElement' but this is a valid
  // value for the Modal's focusOnMount prop. The following code ensures the focus
  // hook will focus the first focusable node within the element to which it is applied.
  // When `firstContentElement` is passed as the value of the focusOnMount prop,
  // the focus hook is applied to the Modal's content element.
  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
  // focus hook will focus the first element in the Modal's **content** when
  // `firstContentElement` is passed.
  const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);
  const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
  const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)();
  const contentRef = (0,external_wp_element_namespaceObject.useRef)(null);
  const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null);
  const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false);
  const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false);
  let sizeClass;
  if (isFullScreen || size === 'fill') {
    sizeClass = 'is-full-screen';
  } else if (size) {
    sizeClass = `has-size-${size}`;
  }

// Determines whether the Modal content is scrollable and updates the state.
  const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => {
    if (!contentRef.current) {
      return;
    }
    const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(contentRef.current);
    if (contentRef.current === closestScrollContainer) {
      setHasScrollableContent(true);
    } else {
      setHasScrollableContent(false);
    }
  }, [contentRef]);

// Accessibly isolates/unisolates the modal.
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    modalize(ref.current);
    return () => unmodalize();
  }, []);

// Keeps a fresh ref for the subsequent effect.
  const refOnRequestClose = (0,external_wp_element_namespaceObject.useRef)();
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    refOnRequestClose.current = onRequestClose;
  }, [onRequestClose]);

// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
  // one should remain open at a time and the list enables closing prior ones.
  const dismissers = (0,external_wp_element_namespaceObject.useContext)(ModalContext);
  // Used for the tracking and dismissing any nested modals.
  const nestedDismissers = (0,external_wp_element_namespaceObject.useRef)([]);

// Updates the stack tracking open modals at this level and calls
  // onRequestClose for any prior and/or nested modals as applicable.
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    dismissers.push(refOnRequestClose);
    const [first, second] = dismissers;
    if (second) {
      first?.current?.();
    }
    const nested = nestedDismissers.current;
    return () => {
      nested[0]?.current?.();
      dismissers.shift();
    };
  }, [dismissers]);

// Adds/removes the value of bodyOpenClassName to body element.
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    var _bodyOpenClasses$get;
    const theClass = bodyOpenClassName;
    const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
    bodyOpenClasses.set(theClass, oneMore);
    document.body.classList.add(bodyOpenClassName);
    return () => {
      const oneLess = bodyOpenClasses.get(theClass) - 1;
      if (oneLess === 0) {
        document.body.classList.remove(theClass);
        bodyOpenClasses.delete(theClass);
      } else {
        bodyOpenClasses.set(theClass, oneLess);
      }
    };
  }, [bodyOpenClassName]);

// Calls the isContentScrollable callback when the Modal children container resizes.
  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
    if (!window.ResizeObserver || !childrenContainerRef.current) {
      return;
    }
    const resizeObserver = new ResizeObserver(isContentScrollable);
    resizeObserver.observe(childrenContainerRef.current);
    isContentScrollable();
    return () => {
      resizeObserver.disconnect();
    };
  }, [isContentScrollable, childrenContainerRef]);
  function handleEscapeKeyDown(event) {
    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
      event.preventDefault();
      if (onRequestClose) {
        onRequestClose(event);
      }
    }
  }
  const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => {
    var _e$currentTarget$scro;
    const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
    if (!hasScrolledContent && scrollY > 0) {
      setHasScrolledContent(true);
    } else if (hasScrolledContent && scrollY <= 0) {
      setHasScrolledContent(false);
    }
  }, [hasScrolledContent]);
  let pressTarget = null;
  const overlayPressHandlers = {
    onPointerDown: event => {
      if (event.target === event.currentTarget) {
        pressTarget = event.target;
        // Avoids focus changing so that focus return works as expected.
        event.preventDefault();
      }
    },
    // Closes the modal with two exceptions. 1. Opening the context menu on
    // the overlay. 2. Pressing on the overlay then dragging the pointer
    // over the modal and releasing. Due to the modal being a child of the
    // overlay, such a gesture is a `click` on the overlay and cannot be
    // excepted by a `click` handler. Thus the tactic of handling
    // `pointerup` and comparing its target to that of the `pointerdown`.
    onPointerUp: ({
      target,
      button
    }) => {
      const isSameTarget = target === pressTarget;
      pressTarget = null;
      if (button === 0 && isSameTarget) {
        onRequestClose();
      }
    }
  };
  const modal =
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
  (0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
    className: dist_clsx('components-modal__screen-overlay', overlayClassName),
    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),
    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, {
      document: document,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
        className: dist_clsx('components-modal__frame', sizeClass, className),
        style: style,
        ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
        role: role,
        "aria-label": contentLabel,
        "aria-labelledby": contentLabel ? undefined : headingId,
        "aria-describedby": aria.describedby,
        tabIndex: -1,
        onKeyDown: onKeyDown,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
          className: dist_clsx('components-modal__content', {
            'hide-header': __experimentalHideHeader,
            'is-scrollable': hasScrollableContent,
            'has-scrolled-content': hasScrolledContent
          }),
          role: "document",
          onScroll: onContentContainerScroll,
          ref: contentRef,
          "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined,
          tabIndex: hasScrollableContent ? 0 : undefined,
          children: [!__experimentalHideHeader && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
            className: "components-modal__header",
            children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
              className: "components-modal__header-heading-container",
              children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
                className: "components-modal__icon-container",
                "aria-hidden": true,
                children: icon
              }), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h1", {
                id: headingId,
                className: "components-modal__header-heading",
                children: title
              })]
            }), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
              onClick: onRequestClose,
              icon: library_close,
              label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')
            })]
          }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
            ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),
            children: children
          })]
        })
      })
    })
  });
  return (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, {
    value: nestedDismissers.current,
    children: modal
  }), document.body);
}

/**
 * Modals give users information and choices related to a task they’re trying to
 * accomplish. They can contain critical information, require decisions, or
 * involve multiple tasks.
 *
 * ```jsx
 * import { Button, Modal } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyModal = () => {
 *   const [ isOpen, setOpen ] = useState( false );
 *   const openModal = () => setOpen( true );
 *   const closeModal = () => setOpen( false );
 *
 *   return (
 *     <>
 *       <Button variant="secondary" onClick={ openModal }>
 *         Open Modal
 *       </Button>
 *       { isOpen && (
 *         <Modal title="This is my modal" onRequestClose={ closeModal }>
 *           <Button variant="secondary" onClick={ closeModal }>
 *             My custom close button
 *           </Button>
 *         </Modal>
 *       ) }
 *     </>
 *   );
 * };
 * ```
 */
const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal);
/* harmony default export */ const modal = (Modal);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js
function confirm_dialog_styles_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)."; }
/**
 * External dependencies
 */

/**
 * The z-index for ConfirmDialog is being set here instead of in
 * packages/base-styles/_z-index.scss, because this component uses
 * emotion instead of sass.
 *
 * ConfirmDialog needs this higher z-index to ensure it renders on top of
 * any parent Popover component.
 */
const styles_wrapper =  true ? {
  name: "7g5ii0",
  styles: "&&{z-index:1000001;}"
} : 0;

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)
 * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.
 * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by
 * clicking outside the dialog focus (i.e, the overlay).
 *
 * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.
 *
 * UnControlled:
 *
 * Allows the component to be used standalone, just by declaring it as part of another React's component render method:
 * -   It will be automatically open (displayed) upon mounting;
 * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
 * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 *
 * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
 *
 * ```jsx
 * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 *
 * function Example() {
 * 	return (
 * 		<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>
 * 			Are you sure? <strong>This action cannot be undone!</strong>
 * 		</ConfirmDialog>
 * 	);
 * }
 * ```
 *
 *
 * Controlled mode:
 *  Let the parent component control when the dialog is open/closed. It's activated when a
 * boolean value is passed to `isOpen`:
 * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
 * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
 * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 *
 *```jsx
 * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * function Example() {
 * 	const [ isOpen, setIsOpen ] = useState( true );
 *
 * 	const handleConfirm = () => {
 * 		console.debug( 'Confirmed!' );
 * 		setIsOpen( false );
 * 	};
 *
 * 	const handleCancel = () => {
 * 		console.debug( 'Cancelled!' );
 * 		setIsOpen( false );
 * 	};
 *
 * 	return (
 * 		<ConfirmDialog
 * 			isOpen={ isOpen }
 * 			onConfirm={ handleConfirm }
 * 			onCancel={ handleCancel }
 * 		>
 * 			Are you sure? <strong>This action cannot be undone!</strong>
 * 		</ConfirmDialog>
 * 	);
 * }
 * ```
 */
const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');
/* harmony default export */ const confirm_dialog_component = (ConfirmDialog);

// EXTERNAL MODULE: ./node_modules/prop-types/index.js
var prop_types = __webpack_require__(5826);
var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
// EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js
var react_is = __webpack_require__(1915);
;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.mjs
function dist_t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function dist_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function dist_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return dist_e(r.overflowY,n)||dist_e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function dist_r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var compute_scroll_into_view_dist_i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!dist_t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;dist_t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&dist_n(m)&&!dist_n(document.documentElement)||null!=m&&dist_n(m,u)&&p.push(m)}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?dist_r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:dist_r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else{G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?dist_r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:dist_r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)))}T.push({el:B,top:G,left:J})}return T};
//# sourceMappingURL=index.mjs.map

;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js

let idCounter = 0;
/**
 * Accepts a parameter and returns it if it's a function
 * or a noop function if it's not. This allows us to
 * accept a callback, but not worry about it if it's not
 * passed.
 * @param {Function} cb the callback
 * @return {Function} a function
 */

function cbToCb(cb) {
  return typeof cb === 'function' ? cb : downshift_esm_noop;
}

function downshift_esm_noop() {}
/**
 * Scroll node into view if necessary
 * @param {HTMLElement} node the element that should scroll into view
 * @param {HTMLElement} menuNode the menu element of the component
 */

function scrollIntoView(node, menuNode) {
  if (!node) {
    return;
  }

function isOrContainsNode(parent, child, environment) {
  const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
  return result;
}
/**
 * Simple debounce implementation. Will call the given
 * function once after the time given has passed since
 * it was last called.
 * @param {Function} fn the function to call after the time
 * @param {Number} time the time to wait
 * @return {Function} the debounced function
 */

function debounce(fn, time) {
  let timeoutId;

function cancel() {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
  }

function wrapper() {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

cancel();
    timeoutId = setTimeout(() => {
      timeoutId = null;
      fn(...args);
    }, time);
  }

wrapper.cancel = cancel;
  return wrapper;
}
/**
 * This is intended to be used to compose event handlers.
 * They are executed in order until one of them sets
 * `event.preventDownshiftDefault = true`.
 * @param {...Function} fns the event handler functions
 * @return {Function} the event handler to add to an element
 */

function callAllEventHandlers() {
  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
    fns[_key2] = arguments[_key2];
  }

return function (event) {
    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
      args[_key3 - 1] = arguments[_key3];
    }

return fns.some(fn => {
      if (fn) {
        fn(event, ...args);
      }

return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
    });
  };
}

function handleRefs() {
  for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
    refs[_key4] = arguments[_key4];
  }

return node => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
    });
  };
}
/**
 * This generates a unique ID for an instance of Downshift
 * @return {String} the unique ID
 */

function generateId() {
  return String(idCounter++);
}
/**
 * Resets idCounter to 0. Used for SSR.
 */

function resetIdCounter() {
  idCounter = 0;
}
/**
 * Default implementation for status message. Only added when menu is open.
 * Will specify if there are results in the list, and if so, how many,
 * and what keys are relevant.
 *
 * @param {Object} param the downshift state and other relevant properties
 * @return {String} the a11y status message
 */

function getA11yStatusMessage$1(_ref2) {
  let {
    isOpen,
    resultCount,
    previousResultCount
  } = _ref2;

if (!isOpen) {
    return '';
  }

if (!resultCount) {
    return 'No results are available.';
  }

if (resultCount !== previousResultCount) {
    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
  }

return '';
}
/**
 * Takes an argument and if it's an array, returns the first item in the array
 * otherwise returns the argument
 * @param {*} arg the maybe-array
 * @param {*} defaultValue the value if arg is falsey not defined
 * @return {*} the arg or it's first item
 */

function unwrapArray(arg, defaultValue) {
  arg = Array.isArray(arg) ?
  /* istanbul ignore next (preact) */
  arg[0] : arg;

if (!arg && defaultValue) {
    return defaultValue;
  } else {
    return arg;
  }
}
/**
 * @param {Object} element (P)react element
 * @return {Boolean} whether it's a DOM element
 */

function isDOMElement(element) {

return typeof element.type === 'string';
}
/**
 * @param {Object} element (P)react element
 * @return {Object} the props
 */

function getElementProps(element) {

return element.props;
}
/**
 * Throws a helpful error message for required properties. Useful
 * to be used as a default in destructuring or object params.
 * @param {String} fnName the function name
 * @param {String} propName the prop name
 */

function requiredProp(fnName, propName) {
  // eslint-disable-next-line no-console
  console.error(`The property "${propName}" is required in "${fnName}"`);
}

const stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type']));
/**
 * @param {Object} state the state object
 * @return {Object} state that is relevant to downshift
 */

function pickState(state) {
  if (state === void 0) {
    state = {};
  }

function isControlledProp(props, key) {
  return props[key] !== undefined;
}
/**
 * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
 * @param {Object} event a keyboardEvent object
 * @return {String} keyboard key
 */

function normalizeArrowKey(event) {
  const {
    key,
    keyCode
  } = event;
  /* istanbul ignore next (ie) */

if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
    return `Arrow${key}`;
  }

return key;
}
/**
 * Simple check if the value passed is object literal
 * @param {*} obj any things
 * @return {Boolean} whether it's object literal
 */

function downshift_esm_isPlainObject(obj) {
  return Object.prototype.toString.call(obj) === '[object Object]';
}
/**
 * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
 * it will wrap to either 0 or itemCount - 1.
 *
 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
 * @param {number} baseIndex The initial position to move from.
 * @param {number} itemCount The total number of items.
 * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
 * @param {boolean} circular Specify if navigation is circular. Default is true.
 * @returns {number} The new index after the move.
 */

function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
  if (circular === void 0) {
    circular = true;
  }

if (itemCount === 0) {
    return -1;
  }

const itemsLastIndex = itemCount - 1;

if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
    baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
  }

let newIndex = baseIndex + moveAmount;

if (newIndex < 0) {
    newIndex = circular ? itemsLastIndex : 0;
  } else if (newIndex > itemsLastIndex) {
    newIndex = circular ? 0 : itemsLastIndex;
  }

const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);

if (nonDisabledNewIndex === -1) {
    return baseIndex >= itemCount ? -1 : baseIndex;
  }

return nonDisabledNewIndex;
}
/**
 * Returns the next index in the list of an item that is not disabled.
 *
 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
 * @param {number} baseIndex The initial position to move from.
 * @param {number} itemCount The total number of items.
 * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
 * @param {boolean} circular Specify if navigation is circular. Default is true.
 * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
 */

function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
  const currentElementNode = getItemNodeFromIndex(baseIndex);

if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
    return baseIndex;
  }

if (moveAmount > 0) {
    for (let index = baseIndex + 1; index < itemCount; index++) {
      if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
        return index;
      }
    }
  } else {
    for (let index = baseIndex - 1; index >= 0; index--) {
      if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
        return index;
      }
    }
  }

if (circular) {
    return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
  }

return -1;
}
/**
 * Checks if event target is within the downshift elements.
 *
 * @param {EventTarget} target Target to check.
 * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
 * @param {Window} environment The window context where downshift renders.
 * @param {boolean} checkActiveElement Whether to also check activeElement.
 *
 * @returns {boolean} Whether or not the target is within downshift elements.
 */

function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
  if (checkActiveElement === void 0) {
    checkActiveElement = true;
  }

return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
} // eslint-disable-next-line import/no-mutable-exports

let validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop));
/* istanbul ignore next */

if (false) {}

const cleanupStatus = debounce(documentProp => {
  getStatusDiv(documentProp).textContent = '';
}, 500);
/**
 * @param {String} status the status message
 * @param {Object} documentProp document passed by the user.
 */

function setStatus(status, documentProp) {
  const div = getStatusDiv(documentProp);

if (!status) {
    return;
  }

div.textContent = status;
  cleanupStatus(documentProp);
}
/**
 * Get the status node or create it if it does not already exist.
 * @param {Object} documentProp document passed by the user.
 * @return {HTMLElement} the status node.
 */

function getStatusDiv(documentProp) {
  if (documentProp === void 0) {
    documentProp = document;
  }

let statusDiv = documentProp.getElementById('a11y-status-message');

if (statusDiv) {
    return statusDiv;
  }

statusDiv = documentProp.createElement('div');
  statusDiv.setAttribute('id', 'a11y-status-message');
  statusDiv.setAttribute('role', 'status');
  statusDiv.setAttribute('aria-live', 'polite');
  statusDiv.setAttribute('aria-relevant', 'additions text');
  Object.assign(statusDiv.style, {
    border: '0',
    clip: 'rect(0 0 0 0)',
    height: '1px',
    margin: '-1px',
    overflow: 'hidden',
    padding: '0',
    position: 'absolute',
    width: '1px'
  });
  documentProp.body.appendChild(statusDiv);
  return statusDiv;
}

const unknown =  false ? 0 : 0;
const mouseUp =  false ? 0 : 1;
const itemMouseEnter =  false ? 0 : 2;
const keyDownArrowUp =  false ? 0 : 3;
const keyDownArrowDown =  false ? 0 : 4;
const keyDownEscape =  false ? 0 : 5;
const keyDownEnter =  false ? 0 : 6;
const keyDownHome =  false ? 0 : 7;
const keyDownEnd =  false ? 0 : 8;
const clickItem =  false ? 0 : 9;
const blurInput =  false ? 0 : 10;
const changeInput =  false ? 0 : 11;
const keyDownSpaceButton =  false ? 0 : 12;
const clickButton =  false ? 0 : 13;
const blurButton =  false ? 0 : 14;
const controlledPropUpdatedSelectedItem =  false ? 0 : 15;
const touchEnd =  false ? 0 : 16;

var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  unknown: unknown,
  mouseUp: mouseUp,
  itemMouseEnter: itemMouseEnter,
  keyDownArrowUp: keyDownArrowUp,
  keyDownArrowDown: keyDownArrowDown,
  keyDownEscape: keyDownEscape,
  keyDownEnter: keyDownEnter,
  keyDownHome: keyDownHome,
  keyDownEnd: keyDownEnd,
  clickItem: clickItem,
  blurInput: blurInput,
  changeInput: changeInput,
  keyDownSpaceButton: keyDownSpaceButton,
  clickButton: clickButton,
  blurButton: blurButton,
  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
  touchEnd: touchEnd
});

/* eslint camelcase:0 */

const Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && ((() => {
  class Downshift extends Component {
    constructor(_props) {
      var _this;

super(_props);
      _this = this;
      this.id = this.props.id || `downshift-${generateId()}`;
      this.menuId = this.props.menuId || `${this.id}-menu`;
      this.labelId = this.props.labelId || `${this.id}-label`;
      this.inputId = this.props.inputId || `${this.id}-input`;

this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);

this.input = null;
      this.items = [];
      this.itemCount = null;
      this.previousResultCount = 0;
      this.timeoutIds = [];

this.internalSetTimeout = (fn, time) => {
        const id = setTimeout(() => {
          this.timeoutIds = this.timeoutIds.filter(i => i !== id);
          fn();
        }, time);
        this.timeoutIds.push(id);
      };

this.setItemCount = count => {
        this.itemCount = count;
      };

this.unsetItemCount = () => {
        this.itemCount = null;
      };

this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
        if (highlightedIndex === void 0) {
          highlightedIndex = _this.props.defaultHighlightedIndex;
        }

if (otherStateToSet === void 0) {
          otherStateToSet = {};
        }

otherStateToSet = pickState(otherStateToSet);

_this.internalSetState({
          highlightedIndex,
          ...otherStateToSet
        });
      };

this.clearSelection = cb => {
        this.internalSetState({
          selectedItem: null,
          inputValue: '',
          highlightedIndex: this.props.defaultHighlightedIndex,
          isOpen: this.props.defaultIsOpen
        }, cb);
      };

this.selectItem = (item, otherStateToSet, cb) => {
        otherStateToSet = pickState(otherStateToSet);
        this.internalSetState({
          isOpen: this.props.defaultIsOpen,
          highlightedIndex: this.props.defaultHighlightedIndex,
          selectedItem: item,
          inputValue: this.props.itemToString(item),
          ...otherStateToSet
        }, cb);
      };

this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
        const item = this.items[itemIndex];

if (item == null) {
          return;
        }

this.selectItem(item, otherStateToSet, cb);
      };

this.selectHighlightedItem = (otherStateToSet, cb) => {
        return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
      };

this.internalSetState = (stateToSet, cb) => {
        let isItemSelected, onChangeArg;
        const onStateChangeArg = {};
        const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
        // so someone controlling the `inputValue` state gets notified of
        // the input change as soon as possible. This avoids issues with
        // preserving the cursor position.
        // See https://github.com/downshift-js/downshift/issues/217 for more info.

if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
          this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
            ...stateToSet
          });
        }

return this.setState(state => {
          state = this.getState(state);
          let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.

newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
          // what was selected before
          // used to determine if onSelect and onChange callbacks should be called

isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState

const nextState = {}; // this is just used to tell whether the state changed
          // and we're trying to update that state. OR if the selection has changed and we're
          // trying to update the selection

if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
            onChangeArg = newStateToSet.selectedItem;
          }

newStateToSet.type = newStateToSet.type || unknown;
          Object.keys(newStateToSet).forEach(key => {
            // onStateChangeArg should only have the state that is
            // actually changing
            if (state[key] !== newStateToSet[key]) {
              onStateChangeArg[key] = newStateToSet[key];
            } // the type is useful for the onStateChangeArg
            // but we don't actually want to set it in internal state.
            // this is an undocumented feature for now... Not all internalSetState
            // calls support it and I'm not certain we want them to yet.
            // But it enables users controlling the isOpen state to know when
            // the isOpen state changes due to mouseup events which is quite handy.

if (key === 'type') {
              return;
            }

newStateToSet[key]; // if it's coming from props, then we don't care to set it internally

if (!isControlledProp(this.props, key)) {
              nextState[key] = newStateToSet[key];
            }
          }); // if stateToSet is a function, then we weren't able to call onInputValueChange
          // earlier, so we'll call it now that we know what the inputValue state will be.

if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
            this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
              ...newStateToSet
            });
          }

return nextState;
        }, () => {
          // call the provided callback if it's a function
          cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
          // we have relevant information to pass them.

const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;

if (hasMoreStateThanType) {
            this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
          }

if (isItemSelected) {
            this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
          }

if (onChangeArg !== undefined) {
            this.props.onChange(onChangeArg, this.getStateAndHelpers());
          } // this is currently undocumented and therefore subject to change
          // We'll try to not break it, but just be warned.

this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
        });
      };

this.rootRef = node => this._rootNode = node;

this.getRootProps = function (_temp, _temp2) {
        let {
          refKey = 'ref',
          ref,
          ...rest
        } = _temp === void 0 ? {} : _temp;
        let {
          suppressRefError = false
        } = _temp2 === void 0 ? {} : _temp2;
        // this is used in the render to know whether the user has called getRootProps.
        // It uses that to know whether to apply the props automatically
        _this.getRootProps.called = true;
        _this.getRootProps.refKey = refKey;
        _this.getRootProps.suppressRefError = suppressRefError;

const {
          isOpen
        } = _this.getState();

return {
          [refKey]: handleRefs(ref, _this.rootRef),
          role: 'combobox',
          'aria-expanded': isOpen,
          'aria-haspopup': 'listbox',
          'aria-owns': isOpen ? _this.menuId : null,
          'aria-labelledby': _this.labelId,
          ...rest
        };
      };

this.keyDownHandlers = {
        ArrowDown(event) {
          event.preventDefault();

if (this.getState().isOpen) {
            const amount = event.shiftKey ? 5 : 1;
            this.moveHighlightedIndex(amount, {
              type: keyDownArrowDown
            });
          } else {
            this.internalSetState({
              isOpen: true,
              type: keyDownArrowDown
            }, () => {
              const itemCount = this.getItemCount();

if (itemCount > 0) {
                const {
                  highlightedIndex
                } = this.getState();
                const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
                this.setHighlightedIndex(nextHighlightedIndex, {
                  type: keyDownArrowDown
                });
              }
            });
          }
        },

ArrowUp(event) {
          event.preventDefault();

if (this.getState().isOpen) {
            const amount = event.shiftKey ? -5 : -1;
            this.moveHighlightedIndex(amount, {
              type: keyDownArrowUp
            });
          } else {
            this.internalSetState({
              isOpen: true,
              type: keyDownArrowUp
            }, () => {
              const itemCount = this.getItemCount();

if (itemCount > 0) {
                const {
                  highlightedIndex
                } = this.getState();
                const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
                this.setHighlightedIndex(nextHighlightedIndex, {
                  type: keyDownArrowUp
                });
              }
            });
          }
        },

Enter(event) {
          if (event.which === 229) {
            return;
          }

const {
            isOpen,
            highlightedIndex
          } = this.getState();

if (isOpen && highlightedIndex != null) {
            event.preventDefault();
            const item = this.items[highlightedIndex];
            const itemNode = this.getItemNodeFromIndex(highlightedIndex);

if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
              return;
            }

this.selectHighlightedItem({
              type: keyDownEnter
            });
          }
        },

Escape(event) {
          event.preventDefault();
          this.reset({
            type: keyDownEscape,
            ...(!this.state.isOpen && {
              selectedItem: null,
              inputValue: ''
            })
          });
        }

};
      this.buttonKeyDownHandlers = { ...this.keyDownHandlers,

' '(event) {
          event.preventDefault();
          this.toggleMenu({
            type: keyDownSpaceButton
          });
        }

};
      this.inputKeyDownHandlers = { ...this.keyDownHandlers,

Home(event) {
          const {
            isOpen
          } = this.getState();

if (!isOpen) {
            return;
          }

event.preventDefault();
          const itemCount = this.getItemCount();

if (itemCount <= 0 || !isOpen) {
            return;
          } // get next non-disabled starting downwards from 0 if that's disabled.

const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
          this.setHighlightedIndex(newHighlightedIndex, {
            type: keyDownHome
          });
        },

End(event) {
          const {
            isOpen
          } = this.getState();

if (!isOpen) {
            return;
          }

event.preventDefault();
          const itemCount = this.getItemCount();

if (itemCount <= 0 || !isOpen) {
            return;
          } // get next non-disabled starting upwards from last index if that's disabled.

const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
          this.setHighlightedIndex(newHighlightedIndex, {
            type: keyDownEnd
          });
        }

};

this.getToggleButtonProps = function (_temp3) {
        let {
          onClick,
          onPress,
          onKeyDown,
          onKeyUp,
          onBlur,
          ...rest
        } = _temp3 === void 0 ? {} : _temp3;

const {
          isOpen
        } = _this.getState();

this.buttonHandleKeyUp = event => {
        // Prevent click event from emitting in Firefox
        event.preventDefault();
      };

this.buttonHandleKeyDown = event => {
        const key = normalizeArrowKey(event);

if (this.buttonKeyDownHandlers[key]) {
          this.buttonKeyDownHandlers[key].call(this, event);
        }
      };

this.buttonHandleClick = event => {
        event.preventDefault(); // handle odd case for Safari and Firefox which
        // don't give the button the focus properly.

/* istanbul ignore if (can't reasonably test this) */

if (this.props.environment.document.activeElement === this.props.environment.document.body) {
          event.target.focus();
        } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
        // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
        // when building for production and should therefore have no impact on production code.

if (false) {} else {
          // Ensure that toggle of menu occurs after the potential blur event in iOS
          this.internalSetTimeout(() => this.toggleMenu({
            type: clickButton
          }));
        }
      };

this.buttonHandleBlur = event => {
        const blurTarget = event.target; // Save blur target for comparison with activeElement later
        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element

this.internalSetTimeout(() => {
          if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
          ) {
            this.reset({
              type: blurButton
            });
          }
        });
      };

this.getLabelProps = props => {
        return {
          htmlFor: this.inputId,
          id: this.labelId,
          ...props
        };
      };

this.getInputProps = function (_temp4) {
        let {
          onKeyDown,
          onBlur,
          onChange,
          onInput,
          onChangeText,
          ...rest
        } = _temp4 === void 0 ? {} : _temp4;
        let onChangeKey;
        let eventHandlers = {};
        /* istanbul ignore next (preact) */

{
          onChangeKey = 'onChange';
        }

const {
          inputValue,
          isOpen,
          highlightedIndex
        } = _this.getState();

if (!rest.disabled) {
          eventHandlers = {
            [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
            onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
            onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
          };
        }

return {
          'aria-autocomplete': 'list',
          'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
          'aria-controls': isOpen ? _this.menuId : null,
          'aria-labelledby': _this.labelId,
          // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
          // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
          autoComplete: 'off',
          value: inputValue,
          id: _this.inputId,
          ...eventHandlers,
          ...rest
        };
      };

this.inputHandleKeyDown = event => {
        const key = normalizeArrowKey(event);

if (key && this.inputKeyDownHandlers[key]) {
          this.inputKeyDownHandlers[key].call(this, event);
        }
      };

this.inputHandleChange = event => {
        this.internalSetState({
          type: changeInput,
          isOpen: true,
          inputValue: event.target.value,
          highlightedIndex: this.props.defaultHighlightedIndex
        });
      };

this.inputHandleBlur = () => {
        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
        this.internalSetTimeout(() => {
          const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);

if (!this.isMouseDown && !downshiftButtonIsActive) {
            this.reset({
              type: blurInput
            });
          }
        });
      };

this.menuRef = node => {
        this._menuNode = node;
      };

this.getMenuProps = function (_temp5, _temp6) {
        let {
          refKey = 'ref',
          ref,
          ...props
        } = _temp5 === void 0 ? {} : _temp5;
        let {
          suppressRefError = false
        } = _temp6 === void 0 ? {} : _temp6;
        _this.getMenuProps.called = true;
        _this.getMenuProps.refKey = refKey;
        _this.getMenuProps.suppressRefError = suppressRefError;
        return {
          [refKey]: handleRefs(ref, _this.menuRef),
          role: 'listbox',
          'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
          id: _this.menuId,
          ...props
        };
      };

this.getItemProps = function (_temp7) {
        let {
          onMouseMove,
          onMouseDown,
          onClick,
          onPress,
          index,
          item =  true ?
          /* istanbul ignore next */
          undefined : 0,
          ...rest
        } = _temp7 === void 0 ? {} : _temp7;

if (index === undefined) {
          _this.items.push(item);

index = _this.items.indexOf(item);
        } else {
          _this.items[index] = item;
        }

const onSelectKey = 'onClick';
        const customClickHandler = onClick;
        const enabledEventHandlers = {
          // onMouseMove is used over onMouseEnter here. onMouseMove
          // is only triggered on actual mouse movement while onMouseEnter
          // can fire on DOM changes, interrupting keyboard navigation
          onMouseMove: callAllEventHandlers(onMouseMove, () => {
            if (index === _this.getState().highlightedIndex) {
              return;
            }

_this.setHighlightedIndex(index, {
              type: itemMouseEnter
            }); // We never want to manually scroll when changing state based
            // on `onMouseMove` because we will be moving the element out
            // from under the user which is currently scrolling/moving the
            // cursor

_this.avoidScrolling = true;

_this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
          }),
          onMouseDown: callAllEventHandlers(onMouseDown, event => {
            // This prevents the activeElement from being changed
            // to the item so it can remain with the current activeElement
            // which is a more common use case.
            event.preventDefault();
          }),
          [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
            _this.selectItemAtIndex(index, {
              type: clickItem
            });
          })
        }; // Passing down the onMouseDown handler to prevent redirect
        // of the activeElement if clicking on disabled items

const eventHandlers = rest.disabled ? {
          onMouseDown: enabledEventHandlers.onMouseDown
        } : enabledEventHandlers;
        return {
          id: _this.getItemId(index),
          role: 'option',
          'aria-selected': _this.getState().highlightedIndex === index,
          ...eventHandlers,
          ...rest
        };
      };

this.clearItems = () => {
        this.items = [];
      };

this.reset = function (otherStateToSet, cb) {
        if (otherStateToSet === void 0) {
          otherStateToSet = {};
        }

otherStateToSet = pickState(otherStateToSet);

_this.internalSetState(_ref => {
          let {
            selectedItem
          } = _ref;
          return {
            isOpen: _this.props.defaultIsOpen,
            highlightedIndex: _this.props.defaultHighlightedIndex,
            inputValue: _this.props.itemToString(selectedItem),
            ...otherStateToSet
          };
        }, cb);
      };

this.toggleMenu = function (otherStateToSet, cb) {
        if (otherStateToSet === void 0) {
          otherStateToSet = {};
        }

otherStateToSet = pickState(otherStateToSet);

_this.internalSetState(_ref2 => {
          let {
            isOpen
          } = _ref2;
          return {
            isOpen: !isOpen,
            ...(isOpen && {
              highlightedIndex: _this.props.defaultHighlightedIndex
            }),
            ...otherStateToSet
          };
        }, () => {
          const {
            isOpen,
            highlightedIndex
          } = _this.getState();

if (isOpen) {
            if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
              _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
            }
          }

cbToCb(cb)();
        });
      };

this.openMenu = cb => {
        this.internalSetState({
          isOpen: true
        }, cb);
      };

this.closeMenu = cb => {
        this.internalSetState({
          isOpen: false
        }, cb);
      };

this.updateStatus = debounce(() => {
        const state = this.getState();
        const item = this.items[state.highlightedIndex];
        const resultCount = this.getItemCount();
        const status = this.props.getA11yStatusMessage({
          itemToString: this.props.itemToString,
          previousResultCount: this.previousResultCount,
          resultCount,
          highlightedItem: item,
          ...state
        });
        this.previousResultCount = resultCount;
        setStatus(status, this.props.environment.document);
      }, 200);
      // fancy destructuring + defaults + aliases
      // this basically says each value of state should either be set to
      // the initial value or the default value if the initial value is not provided
      const {
        defaultHighlightedIndex,
        initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
        defaultIsOpen,
        initialIsOpen: _isOpen = defaultIsOpen,
        initialInputValue: _inputValue = '',
        initialSelectedItem: _selectedItem = null
      } = this.props;

const _state = this.getState({
        highlightedIndex: _highlightedIndex,
        isOpen: _isOpen,
        inputValue: _inputValue,
        selectedItem: _selectedItem
      });

if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
        _state.inputValue = this.props.itemToString(_state.selectedItem);
      }

this.state = _state;
    }

/**
     * Clear all running timeouts
     */
    internalClearTimeouts() {
      this.timeoutIds.forEach(id => {
        clearTimeout(id);
      });
      this.timeoutIds = [];
    }
    /**
     * Gets the state based on internal state or props
     * If a state value is passed via props, then that
     * is the value given, otherwise it's retrieved from
     * stateToMerge
     *
     * @param {Object} stateToMerge defaults to this.state
     * @return {Object} the state
     */

getState(stateToMerge) {
      if (stateToMerge === void 0) {
        stateToMerge = this.state;
      }

return getState(stateToMerge, this.props);
    }

getItemCount() {
      // things read better this way. They're in priority order:
      // 1. `this.itemCount`
      // 2. `this.props.itemCount`
      // 3. `this.items.length`
      let itemCount = this.items.length;

if (this.itemCount != null) {
        itemCount = this.itemCount;
      } else if (this.props.itemCount !== undefined) {
        itemCount = this.props.itemCount;
      }

return itemCount;
    }

getItemNodeFromIndex(index) {
      return this.props.environment.document.getElementById(this.getItemId(index));
    }

scrollHighlightedItemIntoView() {
      /* istanbul ignore else (react-native) */
      {
        const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
        this.props.scrollIntoView(node, this._menuNode);
      }
    }

moveHighlightedIndex(amount, otherStateToSet) {
      const itemCount = this.getItemCount();
      const {
        highlightedIndex
      } = this.getState();

if (itemCount > 0) {
        const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
        this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
      }
    }

getStateAndHelpers() {
      const {
        highlightedIndex,
        inputValue,
        selectedItem,
        isOpen
      } = this.getState();
      const {
        itemToString
      } = this.props;
      const {
        id
      } = this;
      const {
        getRootProps,
        getToggleButtonProps,
        getLabelProps,
        getMenuProps,
        getInputProps,
        getItemProps,
        openMenu,
        closeMenu,
        toggleMenu,
        selectItem,
        selectItemAtIndex,
        selectHighlightedItem,
        setHighlightedIndex,
        clearSelection,
        clearItems,
        reset,
        setItemCount,
        unsetItemCount,
        internalSetState: setState
      } = this;
      return {
        // prop getters
        getRootProps,
        getToggleButtonProps,
        getLabelProps,
        getMenuProps,
        getInputProps,
        getItemProps,
        // actions
        reset,
        openMenu,
        closeMenu,
        toggleMenu,
        selectItem,
        selectItemAtIndex,
        selectHighlightedItem,
        setHighlightedIndex,
        clearSelection,
        clearItems,
        setItemCount,
        unsetItemCount,
        setState,
        // props
        itemToString,
        // derived
        id,
        // state
        highlightedIndex,
        inputValue,
        isOpen,
        selectedItem
      };
    } //////////////////////////// ROOT

componentDidMount() {
      /* istanbul ignore if (react-native) */
      if (false) {}
      /* istanbul ignore if (react-native) */

{
        // this.isMouseDown helps us track whether the mouse is currently held down.
        // This is useful when the user clicks on an item in the list, but holds the mouse
        // down long enough for the list to disappear (because the blur event fires on the input)
        // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
        // trigger hiding the menu.
        const onMouseDown = () => {
          this.isMouseDown = true;
        };

const onMouseUp = event => {
          this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
          // then we don't want to reset downshift

const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);

if (!contextWithinDownshift && this.getState().isOpen) {
            this.reset({
              type: mouseUp
            }, () => this.props.onOuterClick(this.getStateAndHelpers()));
          }
        }; // Touching an element in iOS gives focus and hover states, but touching out of
        // the element will remove hover, and persist the focus state, resulting in the
        // blur event not being triggered.
        // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
        // If the user taps outside of Downshift, the component should be reset,
        // but not if the user is swiping

const onTouchStart = () => {
          this.isTouchMove = false;
        };

const onTouchMove = () => {
          this.isTouchMove = true;
        };

const onTouchEnd = event => {
          const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);

if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
            this.reset({
              type: touchEnd
            }, () => this.props.onOuterClick(this.getStateAndHelpers()));
          }
        };

const {
          environment
        } = this.props;
        environment.addEventListener('mousedown', onMouseDown);
        environment.addEventListener('mouseup', onMouseUp);
        environment.addEventListener('touchstart', onTouchStart);
        environment.addEventListener('touchmove', onTouchMove);
        environment.addEventListener('touchend', onTouchEnd);

this.cleanup = () => {
          this.internalClearTimeouts();
          this.updateStatus.cancel();
          environment.removeEventListener('mousedown', onMouseDown);
          environment.removeEventListener('mouseup', onMouseUp);
          environment.removeEventListener('touchstart', onTouchStart);
          environment.removeEventListener('touchmove', onTouchMove);
          environment.removeEventListener('touchend', onTouchEnd);
        };
      }
    }

shouldScroll(prevState, prevProps) {
      const {
        highlightedIndex: currentHighlightedIndex
      } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
      const {
        highlightedIndex: prevHighlightedIndex
      } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
      const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
      const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
      return scrollWhenOpen || scrollWhenNavigating;
    }

componentDidUpdate(prevProps, prevState) {
      if (false) {}

if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
        this.internalSetState({
          type: controlledPropUpdatedSelectedItem,
          inputValue: this.props.itemToString(this.props.selectedItem)
        });
      }

if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
        this.scrollHighlightedItemIntoView();
      }
      /* istanbul ignore else (react-native) */

{
        this.updateStatus();
      }
    }

componentWillUnmount() {
      this.cleanup(); // avoids memory leak
    }

render() {
      const children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children
      // we clear this out each render and it will be populated again as
      // getItemProps is called.

this.clearItems(); // we reset this so we know whether the user calls getRootProps during
      // this render. If they do then we don't need to do anything,
      // if they don't then we need to clone the element they return and
      // apply the props for them.

this.getRootProps.called = false;
      this.getRootProps.refKey = undefined;
      this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps

this.getMenuProps.called = false;
      this.getMenuProps.refKey = undefined;
      this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps

this.getLabelProps.called = false; // and something similar for getInputProps

this.getInputProps.called = false;
      const element = unwrapArray(children(this.getStateAndHelpers()));

if (!element) {
        return null;
      }

if (this.getRootProps.called || this.props.suppressRefError) {
        if (false) {}

return element;
      } else if (isDOMElement(element)) {
        // they didn't apply the root props, but we can clone
        // this and apply the props ourselves
        return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element)));
      }
      /* istanbul ignore else */

if (false) {}
      /* istanbul ignore next */

return undefined;
    }

}

Downshift.defaultProps = {
    defaultHighlightedIndex: null,
    defaultIsOpen: false,
    getA11yStatusMessage: getA11yStatusMessage$1,
    itemToString: i => {
      if (i == null) {
        return '';
      }

if (false) {}

return String(i);
    },
    onStateChange: downshift_esm_noop,
    onInputValueChange: downshift_esm_noop,
    onUserAction: downshift_esm_noop,
    onChange: downshift_esm_noop,
    onSelect: downshift_esm_noop,
    onOuterClick: downshift_esm_noop,
    selectedItemChanged: (prevItem, item) => prevItem !== item,
    environment:
    /* istanbul ignore next (ssr) */
    typeof window === 'undefined' ? {} : window,
    stateReducer: (state, stateToSet) => stateToSet,
    suppressRefError: false,
    scrollIntoView
  };
  Downshift.stateChangeTypes = stateChangeTypes$3;
  return Downshift;
})()));

false ? 0 : void 0;
var Downshift$1 = (/* unused pure expression or super */ null && (Downshift));

function validateGetMenuPropsCalledCorrectly(node, _ref3) {
  let {
    refKey
  } = _ref3;

if (!node) {
    // eslint-disable-next-line no-console
    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
  }
}

function validateGetRootPropsCalledCorrectly(element, _ref4) {
  let {
    refKey
  } = _ref4;
  const refKeySpecified = refKey !== 'ref';
  const isComposite = !isDOMElement(element);

if (isComposite && !refKeySpecified && !isForwardRef(element)) {
    // eslint-disable-next-line no-console
    console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
  } else if (!isComposite && refKeySpecified) {
    // eslint-disable-next-line no-console
    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
  }

if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
    // eslint-disable-next-line no-console
    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
  }
}

const dropdownDefaultStateValues = {
  highlightedIndex: -1,
  isOpen: false,
  selectedItem: null,
  inputValue: ''
};

function callOnChangeProps(action, state, newState) {
  const {
    props,
    type
  } = action;
  const changes = {};
  Object.keys(state).forEach(key => {
    invokeOnChangeHandler(key, action, state, newState);

if (newState[key] !== state[key]) {
      changes[key] = newState[key];
    }
  });

if (props.onStateChange && Object.keys(changes).length) {
    props.onStateChange({
      type,
      ...changes
    });
  }
}

function invokeOnChangeHandler(key, action, state, newState) {
  const {
    props,
    type
  } = action;
  const handler = `on${capitalizeString(key)}Change`;

if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
    props[handler]({
      type,
      ...newState
    });
  }
}
/**
 * Default state reducer that returns the changes.
 *
 * @param {Object} s state.
 * @param {Object} a action with changes.
 * @returns {Object} changes.
 */

function stateReducer(s, a) {
  return a.changes;
}
/**
 * Returns a message to be added to aria-live region when item is selected.
 *
 * @param {Object} selectionParameters Parameters required to build the message.
 * @returns {string} The a11y message.
 */

function getA11ySelectionMessage(selectionParameters) {
  const {
    selectedItem,
    itemToString: itemToStringLocal
  } = selectionParameters;
  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
}
/**
 * Debounced call for updating the a11y message.
 */

const updateA11yStatus = debounce((getA11yMessage, document) => {
  setStatus(getA11yMessage(), document);
}, 200); // istanbul ignore next

const downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;

function getItemIndex(index, item, items) {
  if (index !== undefined) {
    return index;
  }

if (items.length === 0) {
    return -1;
  }

return items.indexOf(item);
}

function itemToString(item) {
  return item ? String(item) : '';
}

function isAcceptedCharacterKey(key) {
  return /^\S{1}$/.test(key);
}

function capitalizeString(string) {
  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
}

function downshift_esm_useLatestRef(val) {
  const ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
  // the value during render (so it's not idempotent). However, the places this
  // hook is used is to support memoizing callbacks which will be called
  // *during* render, so we need the latest values *during* render.
  // If not for this, then we'd probably want to use useLayoutEffect instead.

ref.current = val;
  return ref;
}
/**
 * Computes the controlled state using a the previous state, props,
 * two reducers, one from downshift and an optional one from the user.
 * Also calls the onChange handlers for state values that have changed.
 *
 * @param {Function} reducer Reducer function from downshift.
 * @param {Object} initialState Initial state of the hook.
 * @param {Object} props The hook props.
 * @returns {Array} An array with the state and an action dispatcher.
 */

prevStateRef.current = state;
  }, [state, props, action]);
  return [state, dispatchWithProps];
}
/**
 * Wraps the useEnhancedReducer and applies the controlled prop values before
 * returning the new state.
 *
 * @param {Function} reducer Reducer function from downshift.
 * @param {Object} initialState Initial state of the hook.
 * @param {Object} props The hook props.
 * @returns {Array} An array with the state and an action dispatcher.
 */

function useControlledReducer$1(reducer, initialState, props) {
  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
  return [getState(state, props), dispatch];
}

const defaultProps$3 = {
  itemToString,
  stateReducer,
  getA11ySelectionMessage,
  scrollIntoView,
  circularNavigation: false,
  environment:
  /* istanbul ignore next (ssr) */
  typeof window === 'undefined' ? {} : window
};

function getDefaultValue$1(props, propKey, defaultStateValues) {
  if (defaultStateValues === void 0) {
    defaultStateValues = dropdownDefaultStateValues;
  }

const defaultValue = props[`default${capitalizeString(propKey)}`];

if (defaultValue !== undefined) {
    return defaultValue;
  }

return defaultStateValues[propKey];
}

function getInitialValue$1(props, propKey, defaultStateValues) {
  if (defaultStateValues === void 0) {
    defaultStateValues = dropdownDefaultStateValues;
  }

const value = props[propKey];

if (value !== undefined) {
    return value;
  }

const initialValue = props[`initial${capitalizeString(propKey)}`];

if (initialValue !== undefined) {
    return initialValue;
  }

return getDefaultValue$1(props, propKey, defaultStateValues);
}

function getInitialState$2(props) {
  const selectedItem = getInitialValue$1(props, 'selectedItem');
  const isOpen = getInitialValue$1(props, 'isOpen');
  const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
  const inputValue = getInitialValue$1(props, 'inputValue');
  return {
    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
    isOpen,
    selectedItem,
    inputValue
  };
}

function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
  const {
    items,
    initialHighlightedIndex,
    defaultHighlightedIndex
  } = props;
  const {
    selectedItem,
    highlightedIndex
  } = state;

if (items.length === 0) {
    return -1;
  } // initialHighlightedIndex will give value to highlightedIndex on initial state only.

if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
    return initialHighlightedIndex;
  }

if (defaultHighlightedIndex !== undefined) {
    return defaultHighlightedIndex;
  }

if (selectedItem) {
    if (offset === 0) {
      return items.indexOf(selectedItem);
    }

return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
  }

if (offset === 0) {
    return -1;
  }

return offset < 0 ? items.length - 1 : 0;
}
/**
 * Reuse the movement tracking of mouse and touch events.
 *
 * @param {boolean} isOpen Whether the dropdown is open or not.
 * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
 * @param {Object} environment Environment where component/hook exists.
 * @param {Function} handleBlur Handler on blur from mouse or touch.
 * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
 */

function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
  const mouseAndTouchTrackersRef = (0,external_React_.useRef)({
    isMouseDown: false,
    isTouchMove: false
  });
  (0,external_React_.useEffect)(() => {
    // The same strategy for checking if a click occurred inside or outside downsift
    // as in downshift.js.
    const onMouseDown = () => {
      mouseAndTouchTrackersRef.current.isMouseDown = true;
    };

const onMouseUp = event => {
      mouseAndTouchTrackersRef.current.isMouseDown = false;

if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
        handleBlur();
      }
    };

const onTouchStart = () => {
      mouseAndTouchTrackersRef.current.isTouchMove = false;
    };

const onTouchMove = () => {
      mouseAndTouchTrackersRef.current.isTouchMove = true;
    };

const onTouchEnd = event => {
      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
        handleBlur();
      }
    };

environment.addEventListener('mousedown', onMouseDown);
    environment.addEventListener('mouseup', onMouseUp);
    environment.addEventListener('touchstart', onTouchStart);
    environment.addEventListener('touchmove', onTouchMove);
    environment.addEventListener('touchend', onTouchEnd);
    return function cleanup() {
      environment.removeEventListener('mousedown', onMouseDown);
      environment.removeEventListener('mouseup', onMouseUp);
      environment.removeEventListener('touchstart', onTouchStart);
      environment.removeEventListener('touchmove', onTouchMove);
      environment.removeEventListener('touchend', onTouchEnd);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, environment]);
  return mouseAndTouchTrackersRef;
}
/* istanbul ignore next */
// eslint-disable-next-line import/no-mutable-exports

let useGetterPropsCalledChecker = () => downshift_esm_noop;
/**
 * Custom hook that checks if getter props are called correctly.
 *
 * @param  {...any} propKeys Getter prop names to be handled.
 * @returns {Function} Setter function called inside getter props to set call information.
 */

/* istanbul ignore next */

if (false) {}

function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
  let {
    isInitialMount,
    highlightedIndex,
    items,
    environment,
    ...rest
  } = _ref2;
  // Sets a11y status message on changes in state.
  (0,external_React_.useEffect)(() => {
    if (isInitialMount || false) {
      return;
    }

updateA11yStatus(() => getA11yMessage({
      highlightedIndex,
      highlightedItem: items[highlightedIndex],
      resultCount: items.length,
      ...rest
    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, dependencyArray);
}

function useScrollIntoView(_ref3) {
  let {
    highlightedIndex,
    isOpen,
    itemRefs,
    getItemNodeFromIndex,
    menuElement,
    scrollIntoView: scrollIntoViewProp
  } = _ref3;
  // used not to scroll on highlight by mouse.
  const shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard.

downshift_esm_useIsomorphicLayoutEffect(() => {
    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
      return;
    }

if (shouldScrollRef.current === false) {
      shouldScrollRef.current = true;
    } else {
      scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

}, [highlightedIndex]);
  return shouldScrollRef;
} // eslint-disable-next-line import/no-mutable-exports

let useControlPropsValidator = downshift_esm_noop;
/* istanbul ignore next */

if (false) {}

/* eslint-disable complexity */

function downshiftCommonReducer(state, action, stateChangeTypes) {
  const {
    type,
    props
  } = action;
  let changes;

switch (type) {
    case stateChangeTypes.ItemMouseMove:
      changes = {
        highlightedIndex: action.disabled ? -1 : action.index
      };
      break;

case stateChangeTypes.MenuMouseLeave:
      changes = {
        highlightedIndex: -1
      };
      break;

case stateChangeTypes.ToggleButtonClick:
    case stateChangeTypes.FunctionToggleMenu:
      changes = {
        isOpen: !state.isOpen,
        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
      };
      break;

case stateChangeTypes.FunctionOpenMenu:
      changes = {
        isOpen: true,
        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
      };
      break;

case stateChangeTypes.FunctionCloseMenu:
      changes = {
        isOpen: false
      };
      break;

case stateChangeTypes.FunctionSetHighlightedIndex:
      changes = {
        highlightedIndex: action.highlightedIndex
      };
      break;

case stateChangeTypes.FunctionSetInputValue:
      changes = {
        inputValue: action.inputValue
      };
      break;

case stateChangeTypes.FunctionReset:
      changes = {
        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
        isOpen: getDefaultValue$1(props, 'isOpen'),
        selectedItem: getDefaultValue$1(props, 'selectedItem'),
        inputValue: getDefaultValue$1(props, 'inputValue')
      };
      break;

default:
      throw new Error('Reducer called without proper action type.');
  }

return { ...state,
    ...changes
  };
}
/* eslint-enable complexity */

const MenuKeyDownArrowDown =  false ? 0 : 0;
const MenuKeyDownArrowUp =  false ? 0 : 1;
const MenuKeyDownEscape =  false ? 0 : 2;
const MenuKeyDownHome =  false ? 0 : 3;
const MenuKeyDownEnd =  false ? 0 : 4;
const MenuKeyDownEnter =  false ? 0 : 5;
const MenuKeyDownSpaceButton =  false ? 0 : 6;
const MenuKeyDownCharacter =  false ? 0 : 7;
const MenuBlur =  false ? 0 : 8;
const MenuMouseLeave$1 =  false ? 0 : 9;
const ItemMouseMove$1 =  false ? 0 : 10;
const ItemClick$1 =  false ? 0 : 11;
const ToggleButtonClick$1 =  false ? 0 : 12;
const ToggleButtonKeyDownArrowDown =  false ? 0 : 13;
const ToggleButtonKeyDownArrowUp =  false ? 0 : 14;
const ToggleButtonKeyDownCharacter =  false ? 0 : 15;
const FunctionToggleMenu$1 =  false ? 0 : 16;
const FunctionOpenMenu$1 =  false ? 0 : 17;
const FunctionCloseMenu$1 =  false ? 0 : 18;
const FunctionSetHighlightedIndex$1 =  false ? 0 : 19;
const FunctionSelectItem$1 =  false ? 0 : 20;
const FunctionSetInputValue$1 =  false ? 0 : 21;
const FunctionReset$2 =  false ? 0 : 22;

var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  MenuKeyDownArrowDown: MenuKeyDownArrowDown,
  MenuKeyDownArrowUp: MenuKeyDownArrowUp,
  MenuKeyDownEscape: MenuKeyDownEscape,
  MenuKeyDownHome: MenuKeyDownHome,
  MenuKeyDownEnd: MenuKeyDownEnd,
  MenuKeyDownEnter: MenuKeyDownEnter,
  MenuKeyDownSpaceButton: MenuKeyDownSpaceButton,
  MenuKeyDownCharacter: MenuKeyDownCharacter,
  MenuBlur: MenuBlur,
  MenuMouseLeave: MenuMouseLeave$1,
  ItemMouseMove: ItemMouseMove$1,
  ItemClick: ItemClick$1,
  ToggleButtonClick: ToggleButtonClick$1,
  ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
  ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
  ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
  FunctionToggleMenu: FunctionToggleMenu$1,
  FunctionOpenMenu: FunctionOpenMenu$1,
  FunctionCloseMenu: FunctionCloseMenu$1,
  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
  FunctionSelectItem: FunctionSelectItem$1,
  FunctionSetInputValue: FunctionSetInputValue$1,
  FunctionReset: FunctionReset$2
});

/* eslint-disable complexity */

function downshiftSelectReducer(state, action) {
  const {
    type,
    props,
    shiftKey
  } = action;
  let changes;

switch (type) {
    case ItemClick$1:
      changes = {
        isOpen: getDefaultValue$1(props, 'isOpen'),
        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
        selectedItem: props.items[action.index]
      };
      break;

case ToggleButtonKeyDownCharacter:
      {
        const lowercasedKey = action.key;
        const inputValue = `${state.inputValue}${lowercasedKey}`;
        const itemIndex = getItemIndexByCharacterKey({
          keysSoFar: inputValue,
          highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
          items: props.items,
          itemToString: props.itemToString,
          getItemNodeFromIndex: action.getItemNodeFromIndex
        });
        changes = {
          inputValue,
          ...(itemIndex >= 0 && {
            selectedItem: props.items[itemIndex]
          })
        };
      }
      break;

case ToggleButtonKeyDownArrowDown:
      changes = {
        highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
        isOpen: true
      };
      break;

case ToggleButtonKeyDownArrowUp:
      changes = {
        highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
        isOpen: true
      };
      break;

case MenuKeyDownEnter:
    case MenuKeyDownSpaceButton:
      changes = {
        isOpen: getDefaultValue$1(props, 'isOpen'),
        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
        ...(state.highlightedIndex >= 0 && {
          selectedItem: props.items[state.highlightedIndex]
        })
      };
      break;

case MenuKeyDownHome:
      changes = {
        highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
      };
      break;

case MenuKeyDownEnd:
      changes = {
        highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
      };
      break;

case MenuKeyDownEscape:
      changes = {
        isOpen: false,
        highlightedIndex: -1
      };
      break;

case MenuBlur:
      changes = {
        isOpen: false,
        highlightedIndex: -1
      };
      break;

case MenuKeyDownCharacter:
      {
        const lowercasedKey = action.key;
        const inputValue = `${state.inputValue}${lowercasedKey}`;
        const highlightedIndex = getItemIndexByCharacterKey({
          keysSoFar: inputValue,
          highlightedIndex: state.highlightedIndex,
          items: props.items,
          itemToString: props.itemToString,
          getItemNodeFromIndex: action.getItemNodeFromIndex
        });
        changes = {
          inputValue,
          ...(highlightedIndex >= 0 && {
            highlightedIndex
          })
        };
      }
      break;

case MenuKeyDownArrowDown:
      changes = {
        highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
      };
      break;

case MenuKeyDownArrowUp:
      changes = {
        highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
      };
      break;

case FunctionSelectItem$1:
      changes = {
        selectedItem: action.selectedItem
      };
      break;

default:
      return downshiftCommonReducer(state, action, stateChangeTypes$2);
  }

return { ...state,
    ...changes
  };
}
/* eslint-enable complexity */

/* eslint-disable max-statements */
useSelect.stateChangeTypes = stateChangeTypes$2;

function useSelect(userProps) {
  if (userProps === void 0) {
    userProps = {};
  }

validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.

const props = { ...defaultProps$2,
    ...userProps
  };
  const {
    items,
    scrollIntoView,
    environment,
    initialIsOpen,
    defaultIsOpen,
    itemToString,
    getA11ySelectionMessage,
    getA11yStatusMessage
  } = props; // Initial state depending on controlled props.

const initialState = getInitialState$2(props);
  const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
  const {
    isOpen,
    highlightedIndex,
    selectedItem,
    inputValue
  } = state; // Element efs.

const toggleButtonRef = (0,external_React_.useRef)(null);
  const menuRef = (0,external_React_.useRef)(null);
  const itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios.

const shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders.

const clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders.

const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.

const previousResultCountRef = (0,external_React_.useRef)();
  const isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element.

const latest = downshift_esm_useLatestRef({
    state,
    props
  }); // Some utils.

const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
  // Sets a11y status message on changes in state.

useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
    isInitialMount: isInitialMountRef.current,
    previousResultCount: previousResultCountRef.current,
    items,
    environment,
    itemToString,
    ...state
  }); // Sets a11y status message on changes in selectedItem.

useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
    isInitialMount: isInitialMountRef.current,
    previousResultCount: previousResultCountRef.current,
    items,
    environment,
    itemToString,
    ...state
  }); // Scroll on highlighted item if change comes from keyboard.

const shouldScrollRef = useScrollIntoView({
    menuElement: menuRef.current,
    highlightedIndex,
    isOpen,
    itemRefs,
    scrollIntoView,
    getItemNodeFromIndex
  }); // Sets cleanup for the keysSoFar callback, debounded after 500ms.

(0,external_React_.useEffect)(() => {
    // init the clean function here as we need access to dispatch.
    clearTimeoutRef.current = debounce(outerDispatch => {
      outerDispatch({
        type: FunctionSetInputValue$1,
        inputValue: ''
      });
    }, 500); // Cancel any pending debounced calls on mount

return () => {
      clearTimeoutRef.current.cancel();
    };
  }, []); // Invokes the keysSoFar callback set up above.

(0,external_React_.useEffect)(() => {
    if (!inputValue) {
      return;
    }

clearTimeoutRef.current(dispatch);
  }, [dispatch, inputValue]);
  useControlPropsValidator({
    isInitialMount: isInitialMountRef.current,
    props,
    state
  });
  /* Controls the focus on the menu or the toggle button. */

(0,external_React_.useEffect)(() => {
    // Don't focus menu on first render.
    if (isInitialMountRef.current) {
      // Unless it was initialised as open.
      if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
        menuRef.current.focus();
      }

return;
    } // Focus menu on open.

if (isOpen) {
      // istanbul ignore else
      if (menuRef.current) {
        menuRef.current.focus();
      }

return;
    } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.

if (environment.document.activeElement === menuRef.current) {
      // istanbul ignore else
      if (toggleButtonRef.current) {
        shouldBlurRef.current = false;
        toggleButtonRef.current.focus();
      }
    } // eslint-disable-next-line react-hooks/exhaustive-deps

}, [isOpen]);
  (0,external_React_.useEffect)(() => {
    if (isInitialMountRef.current) {
      return;
    }

previousResultCountRef.current = items.length;
  }); // Add mouse/touch events to document.

const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
    dispatch({
      type: MenuBlur
    });
  });
  const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.

(0,external_React_.useEffect)(() => {
    isInitialMountRef.current = false;
  }, []); // Reset itemRefs on close.

(0,external_React_.useEffect)(() => {
    if (!isOpen) {
      itemRefs.current = {};
    }
  }, [isOpen]); // Event handler functions.

const toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(() => ({

• Search:

• Replace:

1 2 3 456 7 8