Fix File

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

• File: components.js

• Content:

bindFunction('pointer', 'leave', this.moveEnd.bind(this));
  }
}

const moveConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
  mouseOnly: (value = true) => value
});

class ScrollEngine extends CoordinatesEngine {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "ingKey", 'scrolling');
  }
  scroll(event) {
    if (!this.state._active) this.start(event);
    this.scrollChange(event);
    this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this));
  }
  scrollChange(event) {
    if (event.cancelable) event.preventDefault();
    const state = this.state;
    const values = scrollValues(event);
    state._delta = V.sub(values, state._values);
    V.addTo(state._movement, state._delta);
    this.computeValues(values);
    this.compute(event);
    this.emit();
  }
  scrollEnd() {
    if (!this.state._active) return;
    this.state._active = false;
    this.compute();
    this.emit();
  }
  bind(bindFunction) {
    bindFunction('scroll', '', this.scroll.bind(this));
  }
}

const scrollConfigResolver = coordinatesConfigResolver;

class WheelEngine extends CoordinatesEngine {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "ingKey", 'wheeling');
  }
  wheel(event) {
    if (!this.state._active) this.start(event);
    this.wheelChange(event);
    this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
  }
  wheelChange(event) {
    const state = this.state;
    state._delta = wheelValues(event);
    V.addTo(state._movement, state._delta);
    clampStateInternalMovementToBounds(state);
    this.compute(event);
    this.emit();
  }
  wheelEnd() {
    if (!this.state._active) return;
    this.state._active = false;
    this.compute();
    this.emit();
  }
  bind(bindFunction) {
    bindFunction('wheel', '', this.wheel.bind(this));
  }
}

const wheelConfigResolver = coordinatesConfigResolver;

class HoverEngine extends CoordinatesEngine {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "ingKey", 'hovering');
  }
  enter(event) {
    if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
    this.start(event);
    this.computeValues(pointerValues(event));
    this.compute(event);
    this.emit();
  }
  leave(event) {
    if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
    const state = this.state;
    if (!state._active) return;
    state._active = false;
    const values = pointerValues(event);
    state._movement = state._delta = V.sub(values, state._values);
    this.computeValues(values);
    this.compute(event);
    state.delta = state.movement;
    this.emit();
  }
  bind(bindFunction) {
    bindFunction('pointer', 'enter', this.enter.bind(this));
    bindFunction('pointer', 'leave', this.leave.bind(this));
  }
}

const hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
  mouseOnly: (value = true) => value
});

;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js

class EventStore {
  constructor(ctrl, gestureKey) {
    _defineProperty(this, "_listeners", new Set());
    this._ctrl = ctrl;
    this._gestureKey = gestureKey;
  }
  add(element, device, action, handler, options) {
    const listeners = this._listeners;
    const type = toDomEventType(device, action);
    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
    const eventOptions = _objectSpread2(_objectSpread2({}, _options), options);
    element.addEventListener(type, handler, eventOptions);
    const remove = () => {
      element.removeEventListener(type, handler, eventOptions);
      listeners.delete(remove);
    };
    listeners.add(remove);
    return remove;
  }
  clean() {
    this._listeners.forEach(remove => remove());
    this._listeners.clear();
  }
}

class TimeoutStore {
  constructor() {
    _defineProperty(this, "_timeouts", new Map());
  }
  add(key, callback, ms = 140, ...args) {
    this.remove(key);
    this._timeouts.set(key, window.setTimeout(callback, ms, ...args));
  }
  remove(key) {
    const timeout = this._timeouts.get(key);
    if (timeout) window.clearTimeout(timeout);
  }
  clean() {
    this._timeouts.forEach(timeout => void window.clearTimeout(timeout));
    this._timeouts.clear();
  }
}

class Controller {
  constructor(handlers) {
    _defineProperty(this, "gestures", new Set());
    _defineProperty(this, "_targetEventStore", new EventStore(this));
    _defineProperty(this, "gestureEventStores", {});
    _defineProperty(this, "gestureTimeoutStores", {});
    _defineProperty(this, "handlers", {});
    _defineProperty(this, "config", {});
    _defineProperty(this, "pointerIds", new Set());
    _defineProperty(this, "touchIds", new Set());
    _defineProperty(this, "state", {
      shared: {
        shiftKey: false,
        metaKey: false,
        ctrlKey: false,
        altKey: false
      }
    });
    resolveGestures(this, handlers);
  }
  setEventIds(event) {
    if (isTouch(event)) {
      this.touchIds = new Set(touchIds(event));
      return this.touchIds;
    } else if ('pointerId' in event) {
      if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId);
      return this.pointerIds;
    }
  }
  applyHandlers(handlers, nativeHandlers) {
    this.handlers = handlers;
    this.nativeHandlers = nativeHandlers;
  }
  applyConfig(config, gestureKey) {
    this.config = use_gesture_core_esm_parse(config, gestureKey, this.config);
  }
  clean() {
    this._targetEventStore.clean();
    for (const key of this.gestures) {
      this.gestureEventStores[key].clean();
      this.gestureTimeoutStores[key].clean();
    }
  }
  effect() {
    if (this.config.shared.target) this.bind();
    return () => this._targetEventStore.clean();
  }
  bind(...args) {
    const sharedConfig = this.config.shared;
    const props = {};
    let target;
    if (sharedConfig.target) {
      target = sharedConfig.target();
      if (!target) return;
    }
    if (sharedConfig.enabled) {
      for (const gestureKey of this.gestures) {
        const gestureConfig = this.config[gestureKey];
        const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target);
        if (gestureConfig.enabled) {
          const Engine = actions_fe213e88_esm_EngineMap.get(gestureKey);
          new Engine(this, args, gestureKey).bind(bindFunction);
        }
      }
      const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
      for (const eventKey in this.nativeHandlers) {
        nativeBindFunction(eventKey, '', event => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
          event,
          args
        })), undefined, true);
      }
    }
    for (const handlerProp in props) {
      props[handlerProp] = actions_fe213e88_esm_chain(...props[handlerProp]);
    }
    if (!target) return props;
    for (const handlerProp in props) {
      const {
        device,
        capture,
        passive
      } = parseProp(handlerProp);
      this._targetEventStore.add(target, device, '', props[handlerProp], {
        capture,
        passive
      });
    }
  }
}
function setupGesture(ctrl, gestureKey) {
  ctrl.gestures.add(gestureKey);
  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
  ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
}
function resolveGestures(ctrl, internalHandlers) {
  if (internalHandlers.drag) setupGesture(ctrl, 'drag');
  if (internalHandlers.wheel) setupGesture(ctrl, 'wheel');
  if (internalHandlers.scroll) setupGesture(ctrl, 'scroll');
  if (internalHandlers.move) setupGesture(ctrl, 'move');
  if (internalHandlers.pinch) setupGesture(ctrl, 'pinch');
  if (internalHandlers.hover) setupGesture(ctrl, 'hover');
}
const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => {
  var _options$capture, _options$passive;
  const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture;
  const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive;
  let handlerProp = isNative ? device : toHandlerProp(device, action, capture);
  if (withPassiveOption && passive) handlerProp += 'Passive';
  props[handlerProp] = props[handlerProp] || [];
  props[handlerProp].push(handler);
};

;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js

function useDrag(handler, config) {
  actions_fe213e88_esm_registerAction(actions_fe213e88_esm_dragAction);
  return useRecognizers({
    drag: handler
  }, config || {}, 'drag');
}

function usePinch(handler, config) {
  registerAction(pinchAction);
  return useRecognizers({
    pinch: handler
  }, config || {}, 'pinch');
}

function useWheel(handler, config) {
  registerAction(wheelAction);
  return useRecognizers({
    wheel: handler
  }, config || {}, 'wheel');
}

function useScroll(handler, config) {
  registerAction(scrollAction);
  return useRecognizers({
    scroll: handler
  }, config || {}, 'scroll');
}

function useMove(handler, config) {
  registerAction(moveAction);
  return useRecognizers({
    move: handler
  }, config || {}, 'move');
}

function useHover(handler, config) {
  registerAction(hoverAction);
  return useRecognizers({
    hover: handler
  }, config || {}, 'hover');
}

function useGesture(handlers, config) {
  const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]);
  return hook(handlers, config || {});
}

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Gets a CSS cursor value based on a drag direction.
 *
 * @param dragDirection The drag direction.
 * @return  The CSS cursor value.
 */
function getDragCursor(dragDirection) {
  let dragCursor = 'ns-resize';
  switch (dragDirection) {
    case 'n':
    case 's':
      dragCursor = 'ns-resize';
      break;
    case 'e':
    case 'w':
      dragCursor = 'ew-resize';
      break;
  }
  return dragCursor;
}

/**
 * Custom hook that renders a drag cursor when dragging.
 *
 * @param {boolean} isDragging    The dragging state.
 * @param {string}  dragDirection The drag direction.
 *
 * @return {string} The CSS cursor value.
 */
function useDragCursor(isDragging, dragDirection) {
  const dragCursor = getDragCursor(dragDirection);
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (isDragging) {
      document.documentElement.style.cursor = dragCursor;
    } else {
      // @ts-expect-error
      document.documentElement.style.cursor = null;
    }
  }, [isDragging, dragCursor]);
  return dragCursor;
}
function useDraft(props) {
  const refPreviousValue = (0,external_wp_element_namespaceObject.useRef)(props.value);
  const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({});
  const value = draft.value !== undefined ? draft.value : props.value;

// Determines when to discard the draft value to restore controlled status.
  // To do so, it tracks the previous value and marks the draft value as stale
  // after each render.
  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
    const {
      current: previousValue
    } = refPreviousValue;
    refPreviousValue.current = props.value;
    if (draft.value !== undefined && !draft.isStale) {
      setDraft({
        ...draft,
        isStale: true
      });
    } else if (draft.isStale && props.value !== previousValue) {
      setDraft({});
    }
  }, [props.value, draft]);
  const onChange = (nextValue, extra) => {
    // Mutates the draft value to avoid an extra effect run.
    setDraft(current => Object.assign(current, {
      value: nextValue,
      isStale: false
    }));
    props.onChange(nextValue, extra);
  };
  const onBlur = event => {
    setDraft({});
    props.onBlur?.(event);
  };
  return {
    value,
    onBlur,
    onChange
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const initialStateReducer = state => state;
const initialInputControlState = {
  error: null,
  initialValue: '',
  isDirty: false,
  isDragEnabled: false,
  isDragging: false,
  isPressEnterToChange: false,
  value: ''
};

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const CHANGE = 'CHANGE';
const COMMIT = 'COMMIT';
const CONTROL = 'CONTROL';
const DRAG_END = 'DRAG_END';
const DRAG_START = 'DRAG_START';
const DRAG = 'DRAG';
const INVALIDATE = 'INVALIDATE';
const PRESS_DOWN = 'PRESS_DOWN';
const PRESS_ENTER = 'PRESS_ENTER';
const PRESS_UP = 'PRESS_UP';
const RESET = 'RESET';

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Prepares initialState for the reducer.
 *
 * @param initialState The initial state.
 * @return Prepared initialState for the reducer
 */
function mergeInitialState(initialState = initialInputControlState) {
  const {
    value
  } = initialState;
  return {
    ...initialInputControlState,
    ...initialState,
    initialValue: value
  };
}

/**
 * Creates the base reducer which may be coupled to a specializing reducer.
 * As its final step, for all actions other than CONTROL, the base reducer
 * passes the state and action on through the specializing reducer. The
 * exception for CONTROL actions is because they represent controlled updates
 * from props and no case has yet presented for their specialization.
 *
 * @param composedStateReducers A reducer to specialize state changes.
 * @return The reducer.
 */
function inputControlStateReducer(composedStateReducers) {
  return (state, action) => {
    const nextState = {
      ...state
    };
    switch (action.type) {
      /*
       * Controlled updates
       */
      case CONTROL:
        nextState.value = action.payload.value;
        nextState.isDirty = false;
        nextState._event = undefined;
        // Returns immediately to avoid invoking additional reducers.
        return nextState;

/**
       * Keyboard events
       */
      case PRESS_UP:
        nextState.isDirty = false;
        break;
      case PRESS_DOWN:
        nextState.isDirty = false;
        break;

/**
       * Drag events
       */
      case DRAG_START:
        nextState.isDragging = true;
        break;
      case DRAG_END:
        nextState.isDragging = false;
        break;

/**
       * Input events
       */
      case CHANGE:
        nextState.error = null;
        nextState.value = action.payload.value;
        if (state.isPressEnterToChange) {
          nextState.isDirty = true;
        }
        break;
      case COMMIT:
        nextState.value = action.payload.value;
        nextState.isDirty = false;
        break;
      case RESET:
        nextState.error = null;
        nextState.isDirty = false;
        nextState.value = action.payload.value || state.initialValue;
        break;

/**
       * Validation
       */
      case INVALIDATE:
        nextState.error = action.payload.error;
        break;
    }
    nextState._event = action.payload.event;

/**
     * Send the nextState + action to the composedReducers via
     * this "bridge" mechanism. This allows external stateReducers
     * to hook into actions, and modify state if needed.
     */
    return composedStateReducers(nextState, action);
  };
}

/**
 * A custom hook that connects and external stateReducer with an internal
 * reducer. This hook manages the internal state of InputControl.
 * However, by connecting an external stateReducer function, other
 * components can react to actions as well as modify state before it is
 * applied.
 *
 * This technique uses the "stateReducer" design pattern:
 * https://kentcdodds.com/blog/the-state-reducer-pattern/
 *
 * @param stateReducer    An external state reducer.
 * @param initialState    The initial state for the reducer.
 * @param onChangeHandler A handler for the onChange event.
 * @return State, dispatch, and a collection of actions.
 */
function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {
  const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState));
  const createChangeEvent = type => (nextValue, event) => {
    dispatch({
      type,
      payload: {
        value: nextValue,
        event
      }
    });
  };
  const createKeyEvent = type => event => {
    dispatch({
      type,
      payload: {
        event
      }
    });
  };
  const createDragEvent = type => payload => {
    dispatch({
      type,
      payload
    });
  };

/**
   * Actions for the reducer
   */
  const change = createChangeEvent(CHANGE);
  const invalidate = (error, event) => dispatch({
    type: INVALIDATE,
    payload: {
      error,
      event
    }
  });
  const reset = createChangeEvent(RESET);
  const commit = createChangeEvent(COMMIT);
  const dragStart = createDragEvent(DRAG_START);
  const drag = createDragEvent(DRAG);
  const dragEnd = createDragEvent(DRAG_END);
  const pressUp = createKeyEvent(PRESS_UP);
  const pressDown = createKeyEvent(PRESS_DOWN);
  const pressEnter = createKeyEvent(PRESS_ENTER);
  const currentState = (0,external_wp_element_namespaceObject.useRef)(state);
  const refProps = (0,external_wp_element_namespaceObject.useRef)({
    value: initialState.value,
    onChangeHandler
  });

// Freshens refs to props and state so that subsequent effects have access
  // to their latest values without their changes causing effect runs.
  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
    currentState.current = state;
    refProps.current = {
      value: initialState.value,
      onChangeHandler
    };
  });

// Propagates the latest state through onChange.
  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
    if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
      var _state$value;
      refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
        event: currentState.current._event
      });
    }
  }, [state.value, state.isDirty]);

// Updates the state from props.
  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
    if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
      var _initialState$value;
      dispatch({
        type: CONTROL,
        payload: {
          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''
        }
      });
    }
  }, [initialState.value]);
  return {
    change,
    commit,
    dispatch,
    drag,
    dragEnd,
    dragStart,
    invalidate,
    pressDown,
    pressEnter,
    pressUp,
    reset,
    state
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/with-ignore-ime-events.js
/**
 * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
 *
 * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
 * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
 * which are intended to control the IME and not the application.
 * These events should be ignored by any application logic.
 *
 * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
 *
 * @return A wrapped version of the given event handler that ignores IME events.
 */
function withIgnoreIMEEvents(keydownHandler) {
  return event => {
    const {
      isComposing
    } = 'nativeEvent' in event ? event.nativeEvent : event;
    if (isComposing ||
    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
    // is `isComposing=false`, even though it's technically still part of the composition.
    // These can only be detected by keyCode.
    event.keyCode === 229) {
      return;
    }
    keydownHandler(event);
  };
}

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
     * If isPressEnterToChange is set, this commits the value to
     * the onChange callback.
     */
    if (isDirty || !event.target.validity.valid) {
      wasDirtyOnBlur.current = true;
      handleOnCommit(event);
    }
  };
  const handleOnChange = event => {
    const nextValue = event.target.value;
    change(nextValue, event);
  };
  const handleOnCommit = event => {
    const nextValue = event.currentTarget.value;
    try {
      onValidate(nextValue);
      commit(nextValue, event);
    } catch (err) {
      invalidate(err, event);
    }
  };
  const handleOnKeyDown = event => {
    const {
      key
    } = event;
    onKeyDown(event);
    switch (key) {
      case 'ArrowUp':
        pressUp(event);
        break;
      case 'ArrowDown':
        pressDown(event);
        break;
      case 'Enter':
        pressEnter(event);
        if (isPressEnterToChange) {
          event.preventDefault();
          handleOnCommit(event);
        }
        break;
      case 'Escape':
        if (isPressEnterToChange && isDirty) {
          event.preventDefault();
          reset(valueProp, event);
        }
        break;
    }
  };
  const dragGestureProps = useDrag(dragProps => {
    const {
      distance,
      dragging,
      event,
      target
    } = dragProps;

// The `target` prop always references the `input` element while, by
    // default, the `dragProps.event.target` property would reference the real
    // event target (i.e. any DOM element that the pointer is hovering while
    // dragging). Ensuring that the `target` is always the `input` element
    // allows consumers of `InputControl` (or any higher-level control) to
    // check the input's validity by accessing `event.target.validity.valid`.
    dragProps.event = {
      ...dragProps.event,
      target
    };
    if (!distance) {
      return;
    }
    event.stopPropagation();

/**
     * Quick return if no longer dragging.
     * This prevents unnecessary value calculations.
     */
    if (!dragging) {
      onDragEnd(dragProps);
      dragEnd(dragProps);
      return;
    }
    onDrag(dragProps);
    drag(dragProps);
    if (!isDragging) {
      onDragStart(dragProps);
      dragStart(dragProps);
    }
  }, {
    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
    threshold: dragThreshold,
    enabled: isDragEnabled,
    pointer: {
      capture: false
    }
  });
  const dragProps = isDragEnabled ? dragGestureProps() : {};
  /*
   * Works around the odd UA (e.g. Firefox) that does not focus inputs of
   * type=number when their spinner arrows are pressed.
   */
  let handleOnMouseDown;
  if (type === 'number') {
    handleOnMouseDown = event => {
      props.onMouseDown?.(event);
      if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
        event.currentTarget.focus();
      }
    };
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Input, {
    ...props,
    ...dragProps,
    className: "components-input-control__input",
    disabled: disabled,
    dragCursor: dragCursor,
    isDragging: isDragging,
    id: id,
    onBlur: handleOnBlur,
    onChange: handleOnChange,
    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),
    onMouseDown: handleOnMouseDown,
    ref: ref,
    inputSize: size
    // Fallback to `''` to avoid "uncontrolled to controlled" warning.
    // See https://github.com/WordPress/gutenberg/pull/47250 for details.
    ,
    value: value !== null && value !== void 0 ? value : '',
    type: type
  });
}
const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField);
/* harmony default export */ const input_field = (ForwardedComponent);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-values.js
/* harmony default export */ const font_values = ({
  'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
  'default.fontSize': '13px',
  'helpText.fontSize': '12px',
  mobileTextMinFontSize: '16px'
});

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

/**
 *
 * @param {keyof FONT} value Path of value from `FONT`
 * @return {string} Font rule value
 */
function font(value) {
  var _FONT$value;
  return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/box-sizing.js
function box_sizing_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 boxSizingReset =  true ? {
  name: "kv6lnz",
  styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
} : 0;

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

function base_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/base-control/index.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
 *
 * ```jsx
 * import { BaseControl, useBaseControlProps } from '@wordpress/components';
 *
 * // Render a `BaseControl` for a textarea input
 * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
 * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
 * 	// properly associating it with the `label` and `help` elements.
 * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
 *
 * 	return (
 * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
 * 			<textarea { ...controlProps }>
 * 			  { children }
 * 			</textarea>
 * 		</BaseControl>
 * 	);
 * );
 * ```
 */
const UnconnectedBaseControl = props => {
  const {
    __nextHasNoMarginBottom = false,
    id,
    label,
    hideLabelFromVision = false,
    help,
    className,
    children
  } = useContextSystem(props, 'BaseControl');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control_styles_Wrapper, {
    className: className,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledField, {
      className: "components-base-control__field"
      // TODO: Official deprecation for this should start after all internal usages have been migrated
      ,
      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
      children: [label && id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
        as: "label",
        htmlFor: id,
        children: label
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, {
        className: "components-base-control__label",
        htmlFor: id,
        children: label
      })), label && !id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
        as: "label",
        children: label
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabel, {
        children: label
      })), children]
    }), !!help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, {
      id: id ? id + '__help' : undefined,
      className: "components-base-control__help",
      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
      children: help
    })]
  });
};

/**
 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
 *
 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
 * otherwise use if the `label` prop was passed.
 *
 * @example
 * import { BaseControl } from '@wordpress/components';
 *
 * const MyBaseControl = () => (
 * 	<BaseControl help="This button is already accessibly labeled.">
 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 * 		<Button>Select an author</Button>
 * 	</BaseControl>
 * );
 */
const VisualLabel = ({
  className,
  children,
  ...props
}) => {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledVisualLabel, {
    ...props,
    className: dist_clsx('components-base-control__label', className),
    children: children
  });
};
const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), {
  VisualLabel
});
/* harmony default export */ const base_control = (BaseControl);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * InputControl components let users enter and edit text. This is an experimental component
 * intended to (in time) merge with or replace `TextControl`.
 *
 * ```jsx
 * import { __experimentalInputControl as InputControl } from '@wordpress/components';
 * import { useState } from 'react';
 *
 * const Example = () => {
 *   const [ value, setValue ] = useState( '' );
 *
 *   return (
 *  	<InputControl
 *  		value={ value }
 *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 *  	/>
 *   );
 * };
 * ```
 */
const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl);
/* harmony default export */ const input_control = (InputControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dashicon/index.js

/**
 * @typedef OwnProps
 *
 * @property {import('./types').IconKey} icon        Icon name
 * @property {string}                    [className] Class name
 * @property {number}                    [size]      Size of the icon
 */

/**
 * Internal dependencies
 */

function Dashicon({
  icon,
  className,
  size = 20,
  style = {},
  ...extraProps
}) {
  const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' ');

// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default
  const sizeStyles =
  // using `!=` to catch both 20 and "20"
  // eslint-disable-next-line eqeqeq
  20 != size ? {
    fontSize: `${size}px`,
    width: `${size}px`,
    height: `${size}px`
  } : {};
  const styles = {
    ...sizeStyles,
    ...style
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
    className: iconClass,
    style: styles,
    ...extraProps
  });
}
/* harmony default export */ const dashicon = (Dashicon);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Should show the tooltip if...
  const shouldShowTooltip = !trulyDisabled && (
  // An explicit tooltip is passed or...
  showTooltip && !!label ||
  // There's a shortcut or...
  !!shortcut ||
  // There's a label and...
  !!label &&
  // The children are empty and...
  !children?.length &&
  // The tooltip is not explicitly disabled.
  false !== showTooltip);
  const descriptionId = describedBy ? instanceId : undefined;
  const describedById = additionalProps['aria-describedby'] || descriptionId;
  const commonProps = {
    className: classes,
    'aria-label': additionalProps['aria-label'] || label,
    'aria-describedby': describedById,
    ref
  };
  const elementChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [icon && iconPosition === 'left' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
      icon: icon,
      size: iconSize
    }), text && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
      children: text
    }), children, icon && iconPosition === 'right' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
      icon: icon,
      size: iconSize
    })]
  });
  const element = Tag === 'a' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("a", {
    ...anchorProps,
    ...additionalProps,
    ...disableEventProps,
    ...commonProps,
    children: elementChildren
  }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
    ...buttonProps,
    ...additionalProps,
    ...disableEventProps,
    ...commonProps,
    children: elementChildren
  });

// In order to avoid some React reconciliation issues, we are always rendering
  // the `Tooltip` component even when `shouldShowTooltip` is `false`.
  // In order to make sure that the tooltip doesn't show when it shouldn't,
  // we don't pass the props to the `Tooltip` component.
  const tooltipProps = shouldShowTooltip ? {
    text: children?.length && describedBy ? describedBy : label,
    shortcut,
    placement: tooltipPosition &&
    // Convert legacy `position` values to be used with the new `placement` prop
    positionToPlacement(tooltipPosition)
  } : {};
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
      ...tooltipProps,
      children: element
    }), describedBy && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
        id: descriptionId,
        children: describedBy
      })
    })]
  });
}

/**
 * Lets users take actions and make choices with a single click or tap.
 *
 * ```jsx
 * import { Button } from '@wordpress/components';
 * const Mybutton = () => (
 *   <Button
 *     variant="primary"
 *     onClick={ handleClick }
 *   >
 *     Click here
 *   </Button>
 * );
 * ```
 */
const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton);
/* harmony default export */ const build_module_button = (Button);

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

function number_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/utils/math.js
/**
 * Parses and retrieves a number value.
 *
 * @param {unknown} value The incoming value.
 *
 * @return {number} The parsed number value.
 */
function getNumber(value) {
  const number = Number(value);
  return isNaN(number) ? 0 : number;
}

/**
 * Safely adds 2 values.
 *
 * @param {Array<number|string>} args Values to add together.
 *
 * @return {number} The sum of values.
 */
function add(...args) {
  return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
  (sum, arg) => sum + getNumber(arg), 0);
}

/**
 * Safely subtracts 2 values.
 *
 * @param {Array<number|string>} args Values to subtract together.
 *
 * @return {number} The difference of the values.
 */
function subtract(...args) {
  return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
  (diff, arg, index) => {
    const value = getNumber(arg);
    return index === 0 ? value : diff - value;
  }, 0);
}

/**
 * Determines the decimal position of a number value.
 *
 * @param {number} value The number to evaluate.
 *
 * @return {number} The number of decimal places.
 */
function getPrecision(value) {
  const split = (value + '').split('.');
  return split[1] !== undefined ? split[1].length : 0;
}

/**
 * Clamps a value based on a min/max range.
 *
 * @param {number} value The value.
 * @param {number} min   The minimum range.
 * @param {number} max   The maximum range.
 *
 * @return {number} The clamped value.
 */
function math_clamp(value, min, max) {
  const baseValue = getNumber(value);
  return Math.max(min, Math.min(baseValue, max));
}

/**
 * Clamps a value based on a min/max range with rounding
 *
 * @param {number | string} value The value.
 * @param {number}          min   The minimum range.
 * @param {number}          max   The maximum range.
 * @param {number}          step  A multiplier for the value.
 *
 * @return {number} The rounded and clamped value.
 */
function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) {
  const baseValue = getNumber(value);
  const stepValue = getNumber(step);
  const precision = getPrecision(step);
  const rounded = Math.round(baseValue / stepValue) * stepValue;
  const clampedValue = math_clamp(rounded, min, max);
  return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
}

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

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Gets a collection of available children elements from a React component's children prop.
 *
 * @param children
 *
 * @return An array of available children.
 */
function getValidChildren(children) {
  if (typeof children === 'string') {
    return [children];
  }
  return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child));
}

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

/**
 * Internal dependencies
 */

// Omit `isColumn` because it's not used in HStack.
  const {
    isColumn,
    ...flexProps
  } = useFlex(propsForFlex);
  return flexProps;
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js
/**
 * Internal dependencies
 */

function UnconnectedHStack(props, forwardedRef) {
  const hStackProps = useHStack(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...hStackProps,
    ref: forwardedRef
  });
}

/**
 * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
 *
 * `HStack` can render anything inside.
 *
 * ```jsx
 * import {
 * 	__experimentalHStack as HStack,
 * 	__experimentalText as Text,
 * } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<HStack>
 * 			<Text>Code</Text>
 * 			<Text>is</Text>
 * 			<Text>Poetry</Text>
 * 		</HStack>
 * 	);
 * }
 * ```
 */
const HStack = contextConnect(UnconnectedHStack, 'HStack');
/* harmony default export */ const h_stack_component = (HStack);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
   * "Middleware" function that intercepts updates from InputControl.
   * This allows us to tap into actions to transform the (next) state for
   * InputControl.
   *
   * @return The updated state to apply to InputControl
   */
  const numberControlStateReducer = (state, action) => {
    const nextState = {
      ...state
    };
    const {
      type,
      payload
    } = action;
    const event = payload.event;
    const currentValue = nextState.value;

/**
     * Handles custom UP and DOWN Keyboard events
     */
    if (type === PRESS_UP || type === PRESS_DOWN) {
      nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event);
    }

/**
     * Handles drag to update events
     */
    if (type === DRAG && isDragEnabled) {
      const [x, y] = payload.delta;
      const enableShift = payload.shiftKey && isShiftStepEnabled;
      const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;
      let directionModifier;
      let delta;
      switch (dragDirection) {
        case 'n':
          delta = y;
          directionModifier = -1;
          break;
        case 'e':
          delta = x;
          directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1;
          break;
        case 's':
          delta = y;
          directionModifier = 1;
          break;
        case 'w':
          delta = x;
          directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1;
          break;
      }
      if (delta !== 0) {
        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
        const distance = delta * modifier * directionModifier;
        nextState.value = constrainValue(
        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
        add(currentValue, distance), enableShift ? modifier : undefined);
      }
    }

/**
     * Handles commit (ENTER key press or blur)
     */
    if (type === PRESS_ENTER || type === COMMIT) {
      const applyEmptyValue = required === false && currentValue === '';
      nextState.value = applyEmptyValue ? currentValue :
      // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
      constrainValue(currentValue);
    }
    return nextState;
  };
  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
    // Set event.target to the <input> so that consumers can use
    // e.g. event.target.validity.
    event: {
      ...event,
      target: inputRef.current
    }
  });
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control_styles_Input, {
    autoComplete: autoComplete,
    inputMode: "numeric",
    ...restProps,
    className: classes,
    dragDirection: dragDirection,
    hideHTMLArrows: spinControls !== 'native',
    isDragEnabled: isDragEnabled,
    label: label,
    max: max,
    min: min,
    ref: mergedRef,
    required: required,
    step: step,
    type: typeProp
    // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
    ,
    value: valueProp,
    __unstableStateReducer: (state, action) => {
      var _stateReducerProp;
      const baseState = numberControlStateReducer(state, action);
      return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
    },
    size: size,
    suffix: spinControls === 'custom' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
      children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
        marginBottom: 0,
        marginRight: 2,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {
          spacing: 1,
          children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, {
            className: spinButtonClasses,
            icon: library_plus,
            size: "small",
            label: (0,external_wp_i18n_namespaceObject.__)('Increment'),
            onClick: buildSpinButtonClickHandler('up')
          }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, {
            className: spinButtonClasses,
            icon: library_reset,
            size: "small",
            label: (0,external_wp_i18n_namespaceObject.__)('Decrement'),
            onClick: buildSpinButtonClickHandler('down')
          })]
        })
      })]
    }) : suffix,
    onChange: onChange
  });
}
const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl);
/* harmony default export */ const number_control = (NumberControl);

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

function angle_picker_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/angle-picker-control/angle-circle.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Prevent (drag) mouse events from selecting and accidentally
    // triggering actions from other elements.
    event.preventDefault();
    // Input control needs to lose focus and by preventDefault above, it doesn't.
    event.target?.focus();
    if (angleCircleCenter.current !== undefined && onChange !== undefined) {
      const {
        x: centerX,
        y: centerY
      } = angleCircleCenter.current;
      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
    }
  };
  const {
    startDrag,
    isDragging
  } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({
    onDragStart: event => {
      setAngleCircleCenter();
      changeAngleToPosition(event);
    },
    onDragMove: changeAngleToPosition,
    onDragEnd: changeAngleToPosition
  });
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (isDragging) {
      if (previousCursorValue.current === undefined) {
        previousCursorValue.current = document.body.style.cursor;
      }
      document.body.style.cursor = 'grabbing';
    } else {
      document.body.style.cursor = previousCursorValue.current || '';
      previousCursorValue.current = undefined;
    }
  }, [isDragging]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleRoot, {
    ref: angleCircleRef,
    onMouseDown: startDrag,
    className: "components-angle-picker-control__angle-circle",
    ...props,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicatorWrapper, {
      style: value ? {
        transform: `rotate(${value}deg)`
      } : undefined,
      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
      tabIndex: -1,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicator, {
        className: "components-angle-picker-control__angle-circle-indicator"
      })
    })
  });
}
function getAngle(centerX, centerY, pointX, pointY) {
  const y = pointY - centerY;
  const x = pointX - centerX;
  const angleInRadians = Math.atan2(y, x);
  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
  if (angleInDeg < 0) {
    return 360 + angleInDeg;
  }
  return angleInDeg;
}
/* harmony default export */ const angle_circle = (AngleCircle);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `AnglePickerControl` is a React component to render a UI that allows users to
 * pick an angle. Users can choose an angle in a visual UI with the mouse by
 * dragging an angle indicator inside a circle or by directly inserting the
 * desired angle in a text field.
 *
 * ```jsx
 * import { useState } from '@wordpress/element';
 * import { AnglePickerControl } from '@wordpress/components';
 *
 * function Example() {
 *   const [ angle, setAngle ] = useState( 0 );
 *   return (
 *     <AnglePickerControl
 *       value={ angle }
 *       onChange={ setAngle }
 *     </>
 *   );
 * }
 * ```
 */
const AnglePickerControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedAnglePickerControl);
/* harmony default export */ const angle_picker_control = (AnglePickerControl);

// EXTERNAL MODULE: ./node_modules/remove-accents/index.js
var remove_accents = __webpack_require__(9681);
var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents);
;// CONCATENATED MODULE: external ["wp","richText"]
const external_wp_richText_namespaceObject = window["wp"]["richText"];
;// CONCATENATED MODULE: external ["wp","a11y"]
const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
;// CONCATENATED MODULE: external ["wp","keycodes"]
const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/strings.js
/**
 * External dependencies
 */

/**
 * All unicode characters that we consider "dash-like":
 * - `\u007e`: ~ (tilde)
 * - `\u00ad`:  (soft hyphen)
 * - `\u2053`: ⁓ (swung dash)
 * - `\u207b`: ⁻ (superscript minus)
 * - `\u208b`: ₋ (subscript minus)
 * - `\u2212`: − (minus sign)
 * - `\\p{Pd}`: any other Unicode dash character
 */
const ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu);
const normalizeTextString = value => {
  return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');
};

/**
 * Converts any string to kebab case.
 * Backwards compatible with Lodash's `_.kebabCase()`.
 * Backwards compatible with `_wp_to_kebab_case()`.
 *
 * @see https://lodash.com/docs/4.17.15#kebabCase
 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
 *
 * @param str String to convert.
 * @return Kebab-cased string
 */
function kebabCase(str) {
  var _str$toString;
  let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : '';

// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
  input = input.replace(/['\u2019]/, '');
  return paramCase(input, {
    splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,
    // fooBar => foo-bar, 3Bar => 3-bar
    /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,
    // 3bar => 3-bar
    /([A-Za-z])([0-9])/g,
    // Foo3 => foo-3, foo3 => foo-3
    /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar
    ]
  });
}

/**
 * Escapes the RegExp special characters.
 *
 * @param string Input string.
 *
 * @return Regex-escaped string.
 */
function escapeRegExp(string) {
  return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function filterOptions(search, options = [], maxResults = 10) {
  const filtered = [];
  for (let i = 0; i < options.length; i++) {
    const option = options[i];

// Merge label into keywords.
    let {
      keywords = []
    } = option;
    if ('string' === typeof option.label) {
      keywords = [...keywords, option.label];
    }
    const isMatch = keywords.some(keyword => search.test(remove_accents_default()(keyword)));
    if (!isMatch) {
      continue;
    }
    filtered.push(option);

// Abort early if max reached.
    if (filtered.length === maxResults) {
      break;
    }
  }
  return filtered;
}
function getDefaultUseItems(autocompleter) {
  return filterValue => {
    const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]);
    /*
     * We support both synchronous and asynchronous retrieval of completer options
     * but internally treat all as async so we maintain a single, consistent code path.
     *
     * Because networks can be slow, and the internet is wonderfully unpredictable,
     * we don't want two promises updating the state at once. This ensures that only
     * the most recent promise will act on `optionsData`. This doesn't use the state
     * because `setState` is batched, and so there's no guarantee that setting
     * `activePromise` in the state would result in it actually being in `this.state`
     * before the promise resolves and we check to see if this is the active promise or not.
     */
    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
      const {
        options,
        isDebounced
      } = autocompleter;
      const loadOptions = (0,external_wp_compose_namespaceObject.debounce)(() => {
        const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => {
          if (promise.canceled) {
            return;
          }
          const keyedOptions = optionsData.map((optionData, optionIndex) => ({
            key: `${autocompleter.name}-${optionIndex}`,
            value: optionData,
            label: autocompleter.getOptionLabel(optionData),
            keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [],
            isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false
          }));

// Create a regular expression to filter the options.
          const search = new RegExp('(?:\\b|\\s|^)' + escapeRegExp(filterValue), 'i');
          setItems(filterOptions(search, keyedOptions));
        });
        return promise;
      }, isDebounced ? 250 : 0);
      const promise = loadOptions();
      return () => {
        loadOptions.cancel();
        if (promise) {
          promise.canceled = true;
        }
      };
    }, [filterValue]);
    return [items];
  };
}

;// CONCATENATED MODULE: ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs

/**
 * Provides data to position an inner element of the floating element so that it
 * appears centered to the reference element.
 * This wraps the core `arrow` middleware to allow React refs as the element.
 * @see https://floating-ui.com/docs/arrow
 */
const floating_ui_react_dom_arrow = options => {
  function isRef(value) {
    return {}.hasOwnProperty.call(value, 'current');
  }
  return {
    name: 'arrow',
    options,
    fn(state) {
      const {
        element,
        padding
      } = typeof options === 'function' ? options(state) : options;
      if (element && isRef(element)) {
        if (element.current != null) {
          return floating_ui_dom_arrow({
            element: element.current,
            padding
          }).fn(state);
        }
        return {};
      }
      if (element) {
        return floating_ui_dom_arrow({
          element,
          padding
        }).fn(state);
      }
      return {};
    }
  };
};

var index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;

// Fork of `fast-deep-equal` that only does the comparisons we need and compares
// functions
function deepEqual(a, b) {
  if (a === b) {
    return true;
  }
  if (typeof a !== typeof b) {
    return false;
  }
  if (typeof a === 'function' && a.toString() === b.toString()) {
    return true;
  }
  let length;
  let i;
  let keys;
  if (a && b && typeof a === 'object') {
    if (Array.isArray(a)) {
      length = a.length;
      if (length !== b.length) return false;
      for (i = length; i-- !== 0;) {
        if (!deepEqual(a[i], b[i])) {
          return false;
        }
      }
      return true;
    }
    keys = Object.keys(a);
    length = keys.length;
    if (length !== Object.keys(b).length) {
      return false;
    }
    for (i = length; i-- !== 0;) {
      if (!{}.hasOwnProperty.call(b, keys[i])) {
        return false;
      }
    }
    for (i = length; i-- !== 0;) {
      const key = keys[i];
      if (key === '_owner' && a.$$typeof) {
        continue;
      }
      if (!deepEqual(a[key], b[key])) {
        return false;
      }
    }
    return true;
  }

// biome-ignore lint/suspicious/noSelfCompare: in source
  return a !== a && b !== b;
}

function getDPR(element) {
  if (typeof window === 'undefined') {
    return 1;
  }
  const win = element.ownerDocument.defaultView || window;
  return win.devicePixelRatio || 1;
}

function floating_ui_react_dom_roundByDPR(element, value) {
  const dpr = getDPR(element);
  return Math.round(value * dpr) / dpr;
}

function useLatestRef(value) {
  const ref = external_React_.useRef(value);
  index(() => {
    ref.current = value;
  });
  return ref;
}

/**
 * Provides data to position a floating element.
 * @see https://floating-ui.com/docs/useFloating
 */
function useFloating(options) {
  if (options === void 0) {
    options = {};
  }
  const {
    placement = 'bottom',
    strategy = 'absolute',
    middleware = [],
    platform,
    elements: {
      reference: externalReference,
      floating: externalFloating
    } = {},
    transform = true,
    whileElementsMounted,
    open
  } = options;
  const [data, setData] = external_React_.useState({
    x: 0,
    y: 0,
    strategy,
    placement,
    middlewareData: {},
    isPositioned: false
  });
  const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware);
  if (!deepEqual(latestMiddleware, middleware)) {
    setLatestMiddleware(middleware);
  }
  const [_reference, _setReference] = external_React_.useState(null);
  const [_floating, _setFloating] = external_React_.useState(null);
  const setReference = external_React_.useCallback(node => {
    if (node !== referenceRef.current) {
      referenceRef.current = node;
      _setReference(node);
    }
  }, []);
  const setFloating = external_React_.useCallback(node => {
    if (node !== floatingRef.current) {
      floatingRef.current = node;
      _setFloating(node);
    }
  }, []);
  const referenceEl = externalReference || _reference;
  const floatingEl = externalFloating || _floating;
  const referenceRef = external_React_.useRef(null);
  const floatingRef = external_React_.useRef(null);
  const dataRef = external_React_.useRef(data);
  const hasWhileElementsMounted = whileElementsMounted != null;
  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
  const platformRef = useLatestRef(platform);
  const update = external_React_.useCallback(() => {
    if (!referenceRef.current || !floatingRef.current) {
      return;
    }
    const config = {
      placement,
      strategy,
      middleware: latestMiddleware
    };
    if (platformRef.current) {
      config.platform = platformRef.current;
    }
    floating_ui_dom_computePosition(referenceRef.current, floatingRef.current, config).then(data => {
      const fullData = {
        ...data,
        isPositioned: true
      };
      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
        dataRef.current = fullData;
        external_ReactDOM_namespaceObject.flushSync(() => {
          setData(fullData);
        });
      }
    });
  }, [latestMiddleware, placement, strategy, platformRef]);
  index(() => {
    if (open === false && dataRef.current.isPositioned) {
      dataRef.current.isPositioned = false;
      setData(data => ({
        ...data,
        isPositioned: false
      }));
    }
  }, [open]);
  const isMountedRef = external_React_.useRef(false);
  index(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);

// biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included.
  index(() => {
    if (referenceEl) referenceRef.current = referenceEl;
    if (floatingEl) floatingRef.current = floatingEl;
    if (referenceEl && floatingEl) {
      if (whileElementsMountedRef.current) {
        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
      }
      update();
    }
  }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
  const refs = external_React_.useMemo(() => ({
    reference: referenceRef,
    floating: floatingRef,
    setReference,
    setFloating
  }), [setReference, setFloating]);
  const elements = external_React_.useMemo(() => ({
    reference: referenceEl,
    floating: floatingEl
  }), [referenceEl, floatingEl]);
  const floatingStyles = external_React_.useMemo(() => {
    const initialStyles = {
      position: strategy,
      left: 0,
      top: 0
    };
    if (!elements.floating) {
      return initialStyles;
    }
    const x = floating_ui_react_dom_roundByDPR(elements.floating, data.x);
    const y = floating_ui_react_dom_roundByDPR(elements.floating, data.y);
    if (transform) {
      return {
        ...initialStyles,
        transform: "translate(" + x + "px, " + y + "px)",
        ...(getDPR(elements.floating) >= 1.5 && {
          willChange: 'transform'
        })
      };
    }
    return {
      position: strategy,
      left: x,
      top: y
    };
  }, [strategy, transform, elements.floating, data.x, data.y]);
  return external_React_.useMemo(() => ({
    ...data,
    update,
    refs,
    elements,
    floatingStyles
  }), [data, update, refs, elements, floatingStyles]);
}

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

const close_close = /*#__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 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
  })
});
/* harmony default export */ const library_close = (close_close);

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

/*
 * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.
 * Save scroll top so we can restore it after locking scroll.
 *
 * NOTE: It would be cleaner and possibly safer to find a localized solution such
 * as preventing default on certain touchmove events.
 */
let previousScrollTop = 0;
function setLocked(locked) {
  const scrollingElement = document.scrollingElement || document.body;
  if (locked) {
    previousScrollTop = scrollingElement.scrollTop;
  }
  const methodName = locked ? 'add' : 'remove';
  scrollingElement.classList[methodName]('lockscroll');

// Adding the class to the document element seems to be necessary in iOS.
  document.documentElement.classList[methodName]('lockscroll');
  if (!locked) {
    scrollingElement.scrollTop = previousScrollTop;
  }
}
let lockCounter = 0;

/**
 * ScrollLock is a content-free React component for declaratively preventing
 * scroll bleed from modal UI to the page body. This component applies a
 * `lockscroll` class to the `document.documentElement` and
 * `document.scrollingElement` elements to stop the body from scrolling. When it
 * is present, the lock is applied.
 *
 * ```jsx
 * import { ScrollLock, Button } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyScrollLock = () => {
 *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
 *
 *   const toggleLock = () => {
 *     setIsScrollLocked( ( locked ) => ! locked ) );
 *   };
 *
 *   return (
 *     <div>
 *       <Button variant="secondary" onClick={ toggleLock }>
 *         Toggle scroll lock
 *       </Button>
 *       { isScrollLocked && <ScrollLock /> }
 *       <p>
 *         Scroll locked:
 *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
 *       </p>
 *     </div>
 *   );
 * };
 * ```
 */
function ScrollLock() {
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (lockCounter === 0) {
      setLocked(true);
    }
    ++lockCounter;
    return () => {
      if (lockCounter === 1) {
        setLocked(false);
      }
      --lockCounter;
    };
  }, []);
  return null;
}
/* harmony default export */ const scroll_lock = (ScrollLock);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/use-slot.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * React hook returning the active slot given a name.
 *
 * @param name Slot name.
 * @return Slot object.
 */
const use_slot_useSlot = name => {
  const {
    getSlot,
    subscribe
  } = (0,external_wp_element_namespaceObject.useContext)(context);
  return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name));
};
/* harmony default export */ const use_slot = (use_slot_useSlot);

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

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Whether the argument is a function.
 *
 * @param maybeFunc The argument to check.
 * @return True if the argument is a function, false otherwise.
 */
function isFunction(maybeFunc) {
  return typeof maybeFunc === 'function';
}
class SlotComponent extends external_wp_element_namespaceObject.Component {
  constructor(props) {
    super(props);
    this.isUnmounted = false;
  }
  componentDidMount() {
    const {
      registerSlot
    } = this.props;
    this.isUnmounted = false;
    registerSlot(this.props.name, this);
  }
  componentWillUnmount() {
    const {
      unregisterSlot
    } = this.props;
    this.isUnmounted = true;
    unregisterSlot(this.props.name, this);
  }
  componentDidUpdate(prevProps) {
    const {
      name,
      unregisterSlot,
      registerSlot
    } = this.props;
    if (prevProps.name !== name) {
      unregisterSlot(prevProps.name, this);
      registerSlot(name, this);
    }
  }
  forceUpdate() {
    if (this.isUnmounted) {
      return;
    }
    super.forceUpdate();
  }
  render() {
    var _getFills;
    const {
      children,
      name,
      fillProps = {},
      getFills
    } = this.props;
    const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
      const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
      return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => {
        if (!child || typeof child === 'string') {
          return child;
        }
        let childKey = childIndex;
        if (typeof child === 'object' && 'key' in child && child?.key) {
          childKey = child.key;
        }
        return (0,external_wp_element_namespaceObject.cloneElement)(child, {
          key: childKey
        });
      });
    }).filter(
    // In some cases fills are rendered only when some conditions apply.
    // This ensures that we only use non-empty fills when rendering, i.e.,
    // it allows us to render wrappers only when the fills are actually present.
    element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element));
    return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
      children: isFunction(children) ? children(fills) : fills
    });
  }
}
const Slot = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Consumer, {
  children: ({
    registerSlot,
    unregisterSlot,
    getFills
  }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SlotComponent, {
    ...props,
    registerSlot: registerSlot,
    unregisterSlot: unregisterSlot,
    getFills: getFills
  })
});
/* harmony default export */ const slot = (Slot);

;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/native.js
const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
/* harmony default export */ const esm_browser_native = ({
  randomUUID
});
;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/rng.js
// Unique ID creation requires a high quality random # generator. In the browser we therefore
// require the crypto API and do not support built-in fallback to lower quality random number
// generators (like Math.random()).
let getRandomValues;
const rnds8 = new Uint8Array(16);
function rng() {
  // lazy load so that environments that need to polyfill have a chance to do so
  if (!getRandomValues) {
    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);

if (!getRandomValues) {
      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
    }
  }

return getRandomValues(rnds8);
}
;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/stringify.js

/**
 * Convert array of 16 byte values to UUID string format of the form:
 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
 */

const byteToHex = [];

for (let i = 0; i < 256; ++i) {
  byteToHex.push((i + 0x100).toString(16).slice(1));
}

function unsafeStringify(arr, offset = 0) {
  // Note: Be careful editing this code!  It's been tuned for performance
  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
}

function stringify_stringify(arr, offset = 0) {
  const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID.  If this throws, it's likely due to one
  // of the following:
  // - One or more input array values don't map to a hex octet (leading to
  // "undefined" in the uuid)
  // - Invalid input values for the RFC `version` or `variant` fields

if (!validate(uuid)) {
    throw TypeError('Stringified UUID is invalid');
  }

return uuid;
}

/* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify_stringify)));
;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/v4.js

function v4(options, buf, offset) {
  if (esm_browser_native.randomUUID && !buf && !options) {
    return esm_browser_native.randomUUID();
  }

options = options || {};
  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`

rnds[6] = rnds[6] & 0x0f | 0x40;
  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided

if (buf) {
    offset = offset || 0;

for (let i = 0; i < 16; ++i) {
      buf[offset + i] = rnds[i];
    }

return buf;
  }

return unsafeStringify(rnds);
}

/* harmony default export */ const esm_browser_v4 = (v4);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/style-provider/index.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const uuidCache = new Set();
// Use a weak map so that when the container is detached it's automatically
// dereferenced to avoid memory leak.
const containerCacheMap = new WeakMap();
const memoizedCreateCacheWithContainer = container => {
  if (containerCacheMap.has(container)) {
    return containerCacheMap.get(container);
  }

// Emotion only accepts alphabetical and hyphenated keys so we just
  // strip the numbers from the UUID. It _should_ be fine.
  let key = esm_browser_v4().replace(/[0-9]/g, '');
  while (uuidCache.has(key)) {
    key = esm_browser_v4().replace(/[0-9]/g, '');
  }
  uuidCache.add(key);
  const cache = emotion_cache_browser_esm({
    container,
    key
  });
  containerCacheMap.set(container, cache);
  return cache;
};
function StyleProvider(props) {
  const {
    children,
    document
  } = props;
  if (!document) {
    return null;
  }
  const cache = memoizedCreateCacheWithContainer(document.head);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CacheProvider, {
    value: cache,
    children: children
  });
}
/* harmony default export */ const style_provider = (StyleProvider);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// When using a `Fill`, the `children` will be rendered in the document of the
  // `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
  // to make sure we're referencing the right document/iframe (instead of the
  // context of the `Fill`'s parent).
  const wrappedChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, {
    document: slot.ref.current.ownerDocument,
    children: typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children
  });
  return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current);
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: external ["wp","isShallowEqual"]
const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"];
var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/provider.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function provider_createSlotRegistry() {
  const slots = {};
  const fills = {};
  let listeners = [];
  function registerSlot(name, slot) {
    const previousSlot = slots[name];
    slots[name] = slot;
    triggerListeners();

// Sometimes the fills are registered after the initial render of slot
    // But before the registerSlot call, we need to rerender the slot.
    forceUpdateSlot(name);

// If a new instance of a slot is being mounted while another with the
    // same name exists, force its update _after_ the new slot has been
    // assigned into the instance, such that its own rendering of children
    // will be empty (the new Slot will subsume all fills for this name).
    if (previousSlot) {
      previousSlot.forceUpdate();
    }
  }
  function registerFill(name, instance) {
    fills[name] = [...(fills[name] || []), instance];
    forceUpdateSlot(name);
  }
  function unregisterSlot(name, instance) {
    // If a previous instance of a Slot by this name unmounts, do nothing,
    // as the slot and its fills should only be removed for the current
    // known instance.
    if (slots[name] !== instance) {
      return;
    }
    delete slots[name];
    triggerListeners();
  }
  function unregisterFill(name, instance) {
    var _fills$name$filter;
    fills[name] = (_fills$name$filter = fills[name]?.filter(fill => fill !== instance)) !== null && _fills$name$filter !== void 0 ? _fills$name$filter : [];
    forceUpdateSlot(name);
  }
  function getSlot(name) {
    return slots[name];
  }
  function getFills(name, slotInstance) {
    // Fills should only be returned for the current instance of the slot
    // in which they occupy.
    if (slots[name] !== slotInstance) {
      return [];
    }
    return fills[name];
  }
  function forceUpdateSlot(name) {
    const slot = getSlot(name);
    if (slot) {
      slot.forceUpdate();
    }
  }
  function triggerListeners() {
    listeners.forEach(listener => listener());
  }
  function subscribe(listener) {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  }
  return {
    registerSlot,
    unregisterSlot,
    registerFill,
    unregisterFill,
    getSlot,
    getFills,
    subscribe
  };
}
function provider_SlotFillProvider({
  children
}) {
  const [contextValue] = (0,external_wp_element_namespaceObject.useState)(provider_createSlotRegistry);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, {
    value: contextValue,
    children: children
  });
}
/* harmony default export */ const provider = (provider_SlotFillProvider);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/overlay-middlewares.js
/**
 * External dependencies
 */

// Only HTMLElement instances have the `style` property.
      if (!(firstElementChild instanceof HTMLElement)) {
        return;
      }

// Reduce the height of the popover to the available space.
      Object.assign(firstElementChild.style, {
        width: `${rects.reference.width}px`,
        height: `${rects.reference.height}px`
      });
    }
  })];
}

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

// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Name of slot in which popover should fill.
 *
 * @type {string}
 */

const SLOT_NAME = 'Popover';

// An SVG displaying a triangle facing down, filled with a solid
// color and bordered in such a way to create an arrow-like effect.
// Keeping the SVG's viewbox squared simplify the arrow positioning
// calculations.
const ArrowTriangle = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 100 100",
  className: "components-popover__triangle",
  role: "presentation",
  children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
    className: "components-popover__triangle-bg",
    d: "M 0 0 L 50 50 L 100 0"
  }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
    className: "components-popover__triangle-border",
    d: "M 0 0 L 50 50 L 100 0",
    vectorEffect: "non-scaling-stroke"
  })]
});
const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
const fallbackContainerClassname = 'components-popover__fallback-container';
const getPopoverFallbackContainer = () => {
  let container = document.body.querySelector('.' + fallbackContainerClassname);
  if (!container) {
    container = document.createElement('div');
    container.className = fallbackContainerClassname;
    document.body.append(container);
  }
  return container;
};
const UnforwardedPopover = (props, forwardedRef) => {
  const {
    animate = true,
    headerTitle,
    constrainTabbing,
    onClose,
    children,
    className,
    noArrow = true,
    position,
    placement: placementProp = 'bottom-start',
    offset: offsetProp = 0,
    focusOnMount = 'firstElement',
    anchor,
    expandOnMobile,
    onFocusOutside,
    __unstableSlotName = SLOT_NAME,
    flip = true,
    resize = true,
    shift = false,
    inline = false,
    variant,
    // Deprecated props
    __unstableForcePosition,
    anchorRef,
    anchorRect,
    getAnchorRect,
    isAlternate,
    // Rest
    ...contentProps
  } = useContextSystem(props, 'Popover');
  let computedFlipProp = flip;
  let computedResizeProp = resize;
  if (__unstableForcePosition !== undefined) {
    external_wp_deprecated_default()('`__unstableForcePosition` prop in wp.components.Popover', {
      since: '6.1',
      version: '6.3',
      alternative: '`flip={ false }` and  `resize={ false }`'
    });

// Back-compat, set the `flip` and `resize` props
    // to `false` to replicate `__unstableForcePosition`.
    computedFlipProp = !__unstableForcePosition;
    computedResizeProp = !__unstableForcePosition;
  }
  if (anchorRef !== undefined) {
    external_wp_deprecated_default()('`anchorRef` prop in wp.components.Popover', {
      since: '6.1',
      alternative: '`anchor` prop'
    });
  }
  if (anchorRect !== undefined) {
    external_wp_deprecated_default()('`anchorRect` prop in wp.components.Popover', {
      since: '6.1',
      alternative: '`anchor` prop'
    });
  }
  if (getAnchorRect !== undefined) {
    external_wp_deprecated_default()('`getAnchorRect` prop in wp.components.Popover', {
      since: '6.1',
      alternative: '`anchor` prop'
    });
  }
  const computedVariant = isAlternate ? 'toolbar' : variant;
  if (isAlternate !== undefined) {
    external_wp_deprecated_default()('`isAlternate` prop in wp.components.Popover', {
      since: '6.2',
      alternative: "`variant` prop with the `'toolbar'` value"
    });
  }
  const arrowRef = (0,external_wp_element_namespaceObject.useRef)(null);
  const [fallbackReferenceElement, setFallbackReferenceElement] = (0,external_wp_element_namespaceObject.useState)(null);
  const anchorRefFallback = (0,external_wp_element_namespaceObject.useCallback)(node => {
    setFallbackReferenceElement(node);
  }, []);
  const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
  const isExpanded = expandOnMobile && isMobileViewport;
  const hasArrow = !isExpanded && !noArrow;
  const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
  const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), offset(offsetProp), computedFlipProp && floating_ui_dom_flip(), computedResizeProp && floating_ui_dom_size({
    apply(sizeProps) {
      var _refs$floating$curren;
      const {
        firstElementChild
      } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {};

// Only HTMLElement instances have the `style` property.
      if (!(firstElementChild instanceof HTMLElement)) {
        return;
      }

// Reduce the height of the popover to the available space.
      Object.assign(firstElementChild.style, {
        maxHeight: `${sizeProps.availableHeight}px`,
        overflow: 'auto'
      });
    }
  }), shift && floating_ui_dom_shift({
    crossAxis: true,
    limiter: floating_ui_dom_limitShift(),
    padding: 1 // Necessary to avoid flickering at the edge of the viewport.
  }), floating_ui_react_dom_arrow({
    element: arrowRef
  })];
  const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName;
  const slot = useSlot(slotName);
  let onDialogClose;
  if (onClose || onFocusOutside) {
    onDialogClose = (type, event) => {
      // Ideally the popover should have just a single onClose prop and
      // not three props that potentially do the same thing.
      if (type === 'focus-outside' && onFocusOutside) {
        onFocusOutside(event);
      } else if (onClose) {
        onClose();
      }
    };
  }
  const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({
    constrainTabbing,
    focusOnMount,
    __unstableOnClose: onDialogClose,
    // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
    onClose: onDialogClose
  });
  const {
    // Positioning coordinates
    x,
    y,
    // Object with "regular" refs to both "reference" and "floating"
    refs,
    // Type of CSS position property to use (absolute or fixed)
    strategy,
    update,
    placement: computedPlacement,
    middlewareData: {
      arrow: arrowData
    }
  } = useFloating({
    placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps,
    middleware,
    whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, {
      layoutShift: false,
      animationFrame: true
    })
  });
  const arrowCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
    arrowRef.current = node;
    update();
  }, [update]);

// When any of the possible anchor "sources" change,
  // recompute the reference element (real or virtual) and its owner document.

// When Floating UI has finished positioning and Framer Motion has finished animating
  // the popover, add the `is-positioned` class to signal that all transitions have finished.
  const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null;
  let content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(motion.div, {
    className: dist_clsx(className, {
      'is-expanded': isExpanded,
      'is-positioned': isPositioned,
      // Use the 'alternate' classname for 'toolbar' variant for back compat.
      [`is-${computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant
    }),
    ...animationProps,
    ...contentProps,
    ref: mergedFloatingRef,
    ...dialogProps,
    tabIndex: -1,
    children: [isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(scroll_lock, {}), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
      className: "components-popover__header",
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
        className: "components-popover__header-title",
        children: headerTitle
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
        className: "components-popover__close",
        icon: library_close,
        onClick: onClose
      })]
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
      className: "components-popover__content",
      children: children
    }), hasArrow && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
      ref: arrowCallbackRef,
      className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '),
      style: {
        left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '',
        top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : ''
      },
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ArrowTriangle, {})
    })]
  });
  const shouldRenderWithinSlot = slot.ref && !inline;
  const hasAnchor = anchorRef || anchorRect || anchor;
  if (shouldRenderWithinSlot) {
    content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, {
      name: slotName,
      children: content
    });
  } else if (!inline) {
    content = (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyleProvider, {
      document: document,
      children: content
    }), getPopoverFallbackContainer());
  }
  if (hasAnchor) {
    return content;
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
      ref: anchorRefFallback
    }), content]
  });
};

/**
 * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
 *
 * ```jsx
 * import { Button, Popover } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyPopover = () => {
 * 	const [ isVisible, setIsVisible ] = useState( false );
 * 	const toggleVisible = () => {
 * 		setIsVisible( ( state ) => ! state );
 * 	};
 *
 * 	return (
 * 		<Button variant="secondary" onClick={ toggleVisible }>
 * 			Toggle Popover!
 * 			{ isVisible && <Popover>Popover is toggled!</Popover> }
 * 		</Button>
 * 	);
 * };
 * ```
 *
 */
const popover_Popover = contextConnect(UnforwardedPopover, 'Popover');
function PopoverSlot({
  name = SLOT_NAME
}, ref) {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Slot, {
    bubblesVirtually: true,
    name: name,
    className: "popover-slot",
    ref: ref
  });
}

// @ts-expect-error For Legacy Reasons
popover_Popover.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot);
// @ts-expect-error For Legacy Reasons
popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider;
/* harmony default export */ const popover = (popover_Popover);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// If the popover is rendered in a different document than
      // the content, we need to duplicate the options list in the
      // content document so that it's available to the screen
      // readers, which check the DOM ID based aria-* attributes.
      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
    }, [contentRef])]);
    useOnClickOutside(popoverRef, reset);
    const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
    function announce(options) {
      if (!debouncedSpeak) {
        return;
      }
      if (!!options.length) {
        if (filterValue) {
          debouncedSpeak((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.', options.length), options.length), 'assertive');
        } else {
          debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
          (0,external_wp_i18n_namespaceObject._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
        }
      } else {
        debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive');
      }
    }
    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
      onChangeOptions(items);
      announce(items);
      // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
      // See https://github.com/WordPress/gutenberg/pull/41820
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [items]);
    if (items.length === 0) {
      return null;
    }
    return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, {
        focusOnMount: false,
        onClose: onReset,
        placement: "top-start",
        className: "components-autocomplete__popover",
        anchor: popoverAnchor,
        ref: popoverRefs,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, {
          items: items,
          onSelect: onSelect,
          selectedIndex: selectedIndex,
          instanceId: instanceId,
          listBoxId: listBoxId,
          className: className
        })
      }), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, {
        items: items,
        onSelect: onSelect,
        selectedIndex: selectedIndex,
        instanceId: instanceId,
        listBoxId: listBoxId,
        className: className,
        Component: visually_hidden_component
      }), contentRef.current.ownerDocument.body)]
    });
  }
  return AutocompleterUI;
}
function useOnClickOutside(ref, handler) {
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    const listener = event => {
      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };
    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);
    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
    // Disable reason: `ref` is a ref object and should not be included in a
    // hook's dependency list.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [handler]);
}

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Reset autocomplete state after insertion rather than before
    // so insertion events don't cause the completion menu to redisplay.
    reset();
  }
  function reset() {
    setSelectedIndex(0);
    setFilteredOptions(EMPTY_FILTERED_OPTIONS);
    setFilterValue('');
    setAutocompleter(null);
    setAutocompleterUI(null);
  }

/**
   * Load options for an autocompleter.
   *
   * @param {Array} options
   */
  function onChangeOptions(options) {
    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);
    setFilteredOptions(options);
  }
  function handleKeyDown(event) {
    backspacing.current = event.key === 'Backspace';
    if (!autocompleter) {
      return;
    }
    if (filteredOptions.length === 0) {
      return;
    }
    if (event.defaultPrevented) {
      return;
    }
    switch (event.key) {
      case 'ArrowUp':
        {
          const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;
          setSelectedIndex(newIndex);
          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
          if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
            (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
          }
          break;
        }
      case 'ArrowDown':
        {
          const newIndex = (selectedIndex + 1) % filteredOptions.length;
          setSelectedIndex(newIndex);
          if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
            (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
          }
          break;
        }
      case 'Escape':
        setAutocompleter(null);
        setAutocompleterUI(null);
        event.preventDefault();
        break;
      case 'Enter':
        select(filteredOptions[selectedIndex]);
        break;
      case 'ArrowLeft':
      case 'ArrowRight':
        reset();
        return;
      default:
        return;
    }

// Any handled key should prevent original behavior. This relies on
    // the early return in the default case.
    event.preventDefault();
  }

// textContent is a primitive (string), memoizing is not strictly necessary
  // but this is a preemptive performance improvement, since the autocompleter
  // is a potential bottleneck for the editor type metric.
  const textContent = (0,external_wp_element_namespaceObject.useMemo)(() => {
    if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) {
      return (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0));
    }
    return '';
  }, [record]);
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (!textContent) {
      if (autocompleter) {
        reset();
      }
      return;
    }

// Find the completer with the highest triggerPrefix index in the
    // textContent.
    const completer = completers.reduce((lastTrigger, currentCompleter) => {
      const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);
      const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;
      return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger;
    }, null);
    if (!completer) {
      if (autocompleter) {
        reset();
      }
      return;
    }
    const {
      allowContext,
      triggerPrefix
    } = completer;
    const triggerIndex = textContent.lastIndexOf(triggerPrefix);
    const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);
    const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
    // This is a final barrier to prevent the effect from completing with
    // an extremely long string, which causes the editor to slow-down
    // significantly. This could happen, for example, if `matchingWhileBackspacing`
    // is true and one of the "words" end up being too long. If that's the case,
    // it will be caught by this guard.
    if (tooDistantFromTrigger) {
      return;
    }
    const mismatch = filteredOptions.length === 0;
    const wordsFromTrigger = textWithoutTrigger.split(/\s/);
    // We need to allow the effect to run when not backspacing and if there
    // was a mismatch. i.e when typing a trigger + the match string or when
    // clicking in an existing trigger word on the page. We do that if we
    // detect that we have one word from trigger in the current textual context.
    //
    // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
    // allow the effect to run. It will run until there's a mismatch.
    const hasOneTriggerWord = wordsFromTrigger.length === 1;
    // This is used to allow the effect to run when backspacing and if
    // "touching" a word that "belongs" to a trigger. We consider a "trigger
    // word" any word up to the limit of 3 from the trigger character.
    // Anything beyond that is ignored if there's a mismatch. This allows
    // us to "escape" a mismatch when backspacing, but still imposing some
    // sane limits.
    //
    // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
    // if the user presses backspace here, it will show the completion popup again.
    const matchingWhileBackspacing = backspacing.current && wordsFromTrigger.length <= 3;
    if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
      if (autocompleter) {
        reset();
      }
      return;
    }
    const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length));
    if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {
      if (autocompleter) {
        reset();
      }
      return;
    }
    if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
      if (autocompleter) {
        reset();
      }
      return;
    }
    if (!/[\u0000-\uFFFF]*$/.test(textWithoutTrigger)) {
      if (autocompleter) {
        reset();
      }
      return;
    }
    const safeTrigger = escapeRegExp(completer.triggerPrefix);
    const text = remove_accents_default()(textContent);
    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\u0000-\uFFFF]*)$`));
    const query = match && match[1];
    setAutocompleter(completer);
    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
    setFilterValue(query === null ? '' : query);
    // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
    // See https://github.com/WordPress/gutenberg/pull/41820
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [textContent]);
  const {
    key: selectedKey = ''
  } = filteredOptions[selectedIndex] || {};
  const {
    className
  } = autocompleter || {};
  const isExpanded = !!autocompleter && filteredOptions.length > 0;
  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;
  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;
  const hasSelection = record.start !== undefined;
  return {
    listBoxId,
    activeId,
    onKeyDown: withIgnoreIMEEvents(handleKeyDown),
    popover: hasSelection && AutocompleterUI && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AutocompleterUI, {
      className: className,
      filterValue: filterValue,
      instanceId: instanceId,
      listBoxId: listBoxId,
      selectedIndex: selectedIndex,
      onChangeOptions: onChangeOptions,
      onSelect: select,
      value: record,
      contentRef: contentRef,
      reset: reset
    })
  };
}
function useLastDifferentValue(value) {
  const history = (0,external_wp_element_namespaceObject.useRef)(new Set());
  history.current.add(value);

// Keep the history size to 2.
  if (history.current.size > 2) {
    history.current.delete(Array.from(history.current)[0]);
  }
  return Array.from(history.current)[0];
}
function useAutocompleteProps(options) {
  const ref = (0,external_wp_element_namespaceObject.useRef)(null);
  const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)();
  const {
    record
  } = options;
  const previousRecord = useLastDifferentValue(record);
  const {
    popover,
    listBoxId,
    activeId,
    onKeyDown
  } = useAutocomplete({
    ...options,
    contentRef: ref
  });
  onKeyDownRef.current = onKeyDown;
  const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
    function _onKeyDown(event) {
      onKeyDownRef.current?.(event);
    }
    element.addEventListener('keydown', _onKeyDown);
    return () => {
      element.removeEventListener('keydown', _onKeyDown);
    };
  }, [])]);

// We only want to show the popover if the user has typed something.
  const didUserInput = record.text !== previousRecord?.text;
  if (!didUserInput) {
    return {
      ref: mergedRefs
    };
  }
  return {
    ref: mergedRefs,
    children: popover,
    'aria-autocomplete': listBoxId ? 'list' : undefined,
    'aria-owns': listBoxId,
    'aria-activedescendant': activeId
  };
}
function Autocomplete({
  children,
  isSelected,
  ...options
}) {
  const {
    popover,
    ...props
  } = useAutocomplete(options);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [children(props), isSelected && popover]
  });
}

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

/**
 * Internal dependencies
 */

/**
 * Generate props for the `BaseControl` and the inner control itself.
 *
 * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.
 *
 * @param props
 */
function useBaseControlProps(props) {
  const {
    help,
    id: preferredId,
    ...restProps
  } = props;
  const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId);
  return {
    baseControlProps: {
      id: uniqueId,
      help,
      ...restProps
    },
    controlProps: {
      id: uniqueId,
      ...(!!help ? {
        'aria-describedby': `${uniqueId}__help`
      } : {})
    }
  };
}

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

const link_link = /*#__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: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"
  })
});
/* harmony default export */ const library_link = (link_link);

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

const linkOff = /*#__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: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z"
  })
});
/* harmony default export */ const link_off = (linkOff);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/styles.js
function border_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/border-box-control/border-box-control-linked-button/hook.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useBorderBoxControlLinkedButton(props) {
  const {
    className,
    size = 'default',
    ...otherProps
  } = useContextSystem(props, 'BorderBoxControlLinkedButton');

// Generate class names.
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderBoxControlLinkedButton(size), className);
  }, [className, cx, size]);
  return {
    ...otherProps,
    className: classes
  };
}

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

/**
 * Internal dependencies
 */

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

/**
 * Internal dependencies
 */

function useBorderBoxControlVisualizer(props) {
  const {
    className,
    value,
    size = 'default',
    ...otherProps
  } = useContextSystem(props, 'BorderBoxControlVisualizer');

// Generate class names.
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderBoxControlVisualizer(value, size), className);
  }, [cx, className, value, size]);
  return {
    ...otherProps,
    className: classes,
    value
  };
}

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

/**
 * Internal dependencies
 */

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

const closeSmall = /*#__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: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
  })
});
/* harmony default export */ const close_small = (closeSmall);

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

const lineSolid = /*#__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 11.25h14v1.5H5z"
  })
});
/* harmony default export */ const line_solid = (lineSolid);

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

const lineDashed = /*#__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, {
    fillRule: "evenodd",
    d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z",
    clipRule: "evenodd"
  })
});
/* harmony default export */ const line_dashed = (lineDashed);

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

const lineDotted = /*#__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, {
    fillRule: "evenodd",
    d: "M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z",
    clipRule: "evenodd"
  })
});
/* harmony default export */ const line_dotted = (lineDotted);

;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs

/**
 * Note: Still used by components generated by old versions of Framer
 *
 * @deprecated
 */
const DeprecatedLayoutGroupContext = (0,external_React_.createContext)(null);

;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/group.mjs
const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
function nodeGroup() {
    const nodes = new Set();
    const subscriptions = new WeakMap();
    const dirtyAll = () => nodes.forEach(notify);
    return {
        add: (node) => {
            nodes.add(node);
            subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
        },
        remove: (node) => {
            nodes.delete(node);
            const unsubscribe = subscriptions.get(node);
            if (unsubscribe) {
                unsubscribe();
                subscriptions.delete(node);
            }
            dirtyAll();
        },
        dirty: dirtyAll,
    };
}

;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs

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

function toggle_group_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/@ariakit/core/esm/radio/radio-store.js
"use client";

// src/radio/radio-store.ts
function createRadioStore(_a = {}) {
  var props = _4R3V3JGP_objRest(_a, []);
  var _a2;
  const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
  const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
  }));
  const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), {
    value: defaultValue(
      props.value,
      syncState == null ? void 0 : syncState.value,
      props.defaultValue,
      null
    )
  });
  const radio = createStore(initialState, composite, props.store);
  return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), radio), {
    setValue: (value) => radio.setState("value", value)
  });
}

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

// src/radio/radio-store.ts

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

// src/radio/radio-context.tsx
var XEV62JUQ_ctx = createStoreContext(
  [CompositeContextProvider],
  [CompositeScopedContextProvider]
);
var useRadioContext = XEV62JUQ_ctx.useContext;
var useRadioScopedContext = XEV62JUQ_ctx.useScopedContext;
var useRadioProviderContext = XEV62JUQ_ctx.useProviderContext;
var RadioContextProvider = XEV62JUQ_ctx.ContextProvider;
var RadioScopedContextProvider = XEV62JUQ_ctx.ScopedContextProvider;

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

// src/radio/radio-group.tsx

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

/**
 * Internal dependencies
 */

const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({});
const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext);
/* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext);

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

/**
 * Internal dependencies
 */

/**
 * Used to determine, via an internal heuristics, whether an `undefined` value
 * received for the `value` prop should be interpreted as the component being
 * used in uncontrolled mode, or as an "empty" value for controlled mode.
 *
 * @param valueProp The received `value`
 */
function useComputeControlledOrUncontrolledValue(valueProp) {
  const isInitialRender = (0,external_wp_element_namespaceObject.useRef)(true);
  const prevValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp);
  const prevIsControlled = (0,external_wp_element_namespaceObject.useRef)(false);
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (isInitialRender.current) {
      isInitialRender.current = false;
    }
  }, []);

// Assume the component is being used in controlled mode on the first re-render
  // that has a different `valueProp` from the previous render.
  const isControlled = prevIsControlled.current || !isInitialRender.current && prevValueProp !== valueProp;
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    prevIsControlled.current = isControlled;
  }, [isControlled]);
  if (isControlled) {
    // When in controlled mode, use `''` instead of `undefined`
    return {
      value: valueProp !== null && valueProp !== void 0 ? valueProp : '',
      defaultValue: undefined
    };
  }

// When in uncontrolled mode, the `value` should be intended as the initial value
  return {
    value: undefined,
    defaultValue: valueProp
  };
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js
/**
 * External dependencies
 */

// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedToggleGroupControlAsRadioGroup({
  children,
  isAdaptiveWidth,
  label,
  onChange: onChangeProp,
  size,
  value: valueProp,
  id: idProp,
  ...otherProps
}, forwardedRef) {
  const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
  const baseId = idProp || generatedId;

// `useRadioStore`'s `setValue` prop can be called with `null`, while
  // the component's `onChange` prop only expects `undefined`
  const wrappedOnChangeProp = onChangeProp ? v => {
    onChangeProp(v !== null && v !== void 0 ? v : undefined);
  } : undefined;
  const radio = useRadioStore({
    defaultValue,
    value,
    setValue: wrappedOnChangeProp
  });
  const selectedValue = radio.useState('value');
  const setValue = radio.setValue;
  const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
    baseId,
    isBlock: !isAdaptiveWidth,
    size,
    value: selectedValue,
    setValue
  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, {
    value: groupContextValue,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, {
      store: radio,
      "aria-label": label,
      render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {}),
      ...otherProps,
      id: baseId,
      ref: forwardedRef,
      children: children
    })
  });
}
const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js
/**
 * WordPress dependencies
 */

/**
 * Simplified and improved implementation of useControlledState.
 *
 * @param props
 * @param props.defaultValue
 * @param props.value
 * @param props.onChange
 * @return The controlled value and the value setter.
 */
function useControlledValue({
  defaultValue,
  onChange,
  value: valueProp
}) {
  const hasValue = typeof valueProp !== 'undefined';
  const initialValue = hasValue ? valueProp : defaultValue;
  const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue);
  const value = hasValue ? valueProp : state;
  let setValue;
  if (hasValue && typeof onChange === 'function') {
    setValue = onChange;
  } else if (!hasValue && typeof onChange === 'function') {
    setValue = nextValue => {
      onChange(nextValue);
      setState(nextValue);
    };
  } else {
    setValue = setState;
  }
  return [value, setValue];
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedToggleGroupControlAsButtonGroup({
  children,
  isAdaptiveWidth,
  label,
  onChange,
  size,
  value: valueProp,
  id: idProp,
  ...otherProps
}, forwardedRef) {
  const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
  const baseId = idProp || generatedId;

// Use a heuristic to understand if the component is being used in controlled
  // or uncontrolled mode, and consequently:
  // - when controlled, convert `undefined` values to `''` (ie. "no value")
  // - use the `value` prop as the `defaultValue` when uncontrolled
  const {
    value,
    defaultValue
  } = useComputeControlledOrUncontrolledValue(valueProp);
  const [selectedValue, setSelectedValue] = useControlledValue({
    defaultValue,
    value,
    onChange
  });
  const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
    baseId,
    value: selectedValue,
    setValue: setSelectedValue,
    isBlock: !isAdaptiveWidth,
    isDeselectable: true,
    size
  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, {
    value: groupContextValue,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
      "aria-label": label,
      ...otherProps,
      ref: forwardedRef,
      role: "group",
      children: children
    })
  });
}
const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);

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

// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * `ToggleGroupControl` is a form component that lets users choose options
 * represented in horizontal segments. To render options for this control use
 * `ToggleGroupControlOption` component.
 *
 * This component is intended for selecting a single persistent value from a set of options,
 * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
 * use a `TabPanel` instead.
 *
 * Only use this control when you know for sure the labels of items inside won't
 * wrap. For items with longer labels, you can consider a `SelectControl` or a
 * `CustomSelectControl` component instead.
 *
 * ```jsx
 * import {
 *   __experimentalToggleGroupControl as ToggleGroupControl,
 *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 * } from '@wordpress/components';
 *
 * function Example() {
 *   return (
 *     <ToggleGroupControl label="my label" value="vertical" isBlock>
 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
 *     </ToggleGroupControl>
 *   );
 * }
 * ```
 */
const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');
/* harmony default export */ const toggle_group_control_component = (ToggleGroupControl);

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

// src/radio/radio.ts

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js

function toggle_group_control_option_base_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/toggle-group-control/toggle-group-control-option-base/component.js
/**
 * External dependencies
 */

// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  ButtonContentView: component_ButtonContentView,
  LabelView: component_LabelView
} = toggle_group_control_option_base_styles_namespaceObject;
const REDUCED_MOTION_TRANSITION_CONFIG = {
  duration: 0
};
const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
const WithToolTip = ({
  showTooltip,
  text,
  children
}) => {
  if (showTooltip && text) {
    return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {
      text: text,
      placement: "top",
      children: children
    });
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: children
  });
};
function ToggleGroupControlOptionBase(props, forwardedRef) {
  const shouldReduceMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
  const toggleGroupControlContext = useToggleGroupControlContext();
  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
  const buttonProps = useContextSystem({
    ...props,
    id
  }, 'ToggleGroupControlOptionBase');
  const {
    isBlock = false,
    isDeselectable = false,
    size = 'default'
  } = toggleGroupControlContext;
  const {
    className,
    isIcon = false,
    value,
    children,
    showTooltip = false,
    onFocus: onFocusProp,
    ...otherButtonProps
  } = buttonProps;
  const isPressed = toggleGroupControlContext.value === value;
  const cx = useCx();
  const labelViewClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(isBlock && labelBlock), [cx, isBlock]);
  const itemClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(buttonView({
    isDeselectable,
    isIcon,
    isPressed,
    size
  }), className), [cx, isDeselectable, isIcon, isPressed, size, className]);
  const backdropClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(backdropView), [cx]);
  const buttonOnClick = () => {
    if (isDeselectable && isPressed) {
      toggleGroupControlContext.setValue(undefined);
    } else {
      toggleGroupControlContext.setValue(value);
    }
  };
  const commonProps = {
    ...otherButtonProps,
    className: itemClasses,
    'data-value': value,
    ref: forwardedRef
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component_LabelView, {
    className: labelViewClasses,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, {
      showTooltip: showTooltip,
      text: otherButtonProps['aria-label'],
      children: isDeselectable ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
        ...commonProps,
        onFocus: onFocusProp,
        "aria-pressed": isPressed,
        type: "button",
        onClick: buttonOnClick,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, {
          children: children
        })
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, {
        render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
          type: "button",
          ...commonProps,
          onFocus: event => {
            onFocusProp?.(event);
            if (event.defaultPrevented) {
              return;
            }
            toggleGroupControlContext.setValue(value);
          }
        }),
        value: value,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, {
          children: children
        })
      })
    }), isPressed ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, {
      layout: true,
      layoutRoot: true,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, {
        className: backdropClasses,
        transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
        role: "presentation",
        layoutId: LAYOUT_ID
      })
    }) : null]
  });
}

/**
 * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
 * generic component for any children of `ToggleGroupControl`.
 *
 * @example
 * ```jsx
 * import {
 *   __experimentalToggleGroupControl as ToggleGroupControl,
 *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,
 * } from '@wordpress/components';
 *
 * function Example() {
 *   return (
 *     <ToggleGroupControl label="my label" value="vertical" isBlock>
 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
 *     </ToggleGroupControl>
 *   );
 * }
 * ```
 */
const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');
/* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedToggleGroupControlOptionIcon(props, ref) {
  const {
    icon,
    label,
    ...restProps
  } = props;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, {
    ...restProps,
    isIcon: true,
    "aria-label": label,
    showTooltip: true,
    ref: ref,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
      icon: icon
    })
  });
}

/**
 * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
 * child of `ToggleGroupControl` and displays an icon.
 *
 * ```jsx
 *
 * import {
 *	__experimentalToggleGroupControl as ToggleGroupControl,
 *	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 * from '@wordpress/components';
 * import { formatLowercase, formatUppercase } from '@wordpress/icons';
 *
 * function Example() {
 *	return (
 *		<ToggleGroupControl>
 *			<ToggleGroupControlOptionIcon
 *				value="uppercase"
 *				label="Uppercase"
 *				icon={ formatUppercase }
 *			/>
 *			<ToggleGroupControlOptionIcon
 *				value="lowercase"
 *				label="Lowercase"
 *				icon={ formatLowercase }
 *			/>
 *		</ToggleGroupControl>
 *	);
 * }
 * ```
 */
const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon);
/* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon);

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

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedColorIndicator(props, forwardedRef) {
  const {
    className,
    colorValue,
    ...additionalProps
  } = props;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
    className: dist_clsx('component-color-indicator', className),
    style: {
      background: colorValue
    },
    ref: forwardedRef,
    ...additionalProps
  });
}

/**
 * ColorIndicator is a React component that renders a specific color in a
 * circle. It's often used to summarize a collection of used colors in a child
 * component.
 *
 * ```jsx
 * import { ColorIndicator } from '@wordpress/components';
 *
 * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
 * ```
 */
const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator);
/* harmony default export */ const color_indicator = (ColorIndicator);

;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs
var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}}

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const UnconnectedDropdown = (props, forwardedRef) => {
  const {
    renderContent,
    renderToggle,
    className,
    contentClassName,
    expandOnMobile,
    headerTitle,
    focusOnMount,
    popoverProps,
    onClose,
    onToggle,
    style,
    open,
    defaultOpen,
    // Deprecated props
    position,
    // From context system
    variant
  } = useContextSystem(props, 'Dropdown');
  if (position !== undefined) {
    external_wp_deprecated_default()('`position` prop in wp.components.Dropdown', {
      since: '6.2',
      alternative: '`popoverProps.placement` prop',
      hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'
    });
  }

// Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
  const containerRef = (0,external_wp_element_namespaceObject.useRef)();
  const [isOpen, setIsOpen] = useControlledValue({
    defaultValue: defaultOpen,
    value: open,
    onChange: onToggle
  });

/**
   * Closes the popover when focus leaves it unless the toggle was pressed or
   * focus has moved to a separate dialog. The former is to let the toggle
   * handle closing the popover and the latter is to preserve presence in
   * case a dialog has opened, allowing focus to return when it's dismissed.
   */
  function closeIfFocusOutside() {
    if (!containerRef.current) {
      return;
    }
    const {
      ownerDocument
    } = containerRef.current;
    const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]');
    if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {
      close();
    }
  }
  function close() {
    onClose?.();
    setIsOpen(false);
  }
  const args = {
    isOpen: !!isOpen,
    onToggle: () => setIsOpen(!isOpen),
    onClose: close
  };
  const popoverPropsHaveAnchor = !!popoverProps?.anchor ||
  // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
  // be removed from `Popover` from WordPress 6.3
  !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
    className: className,
    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor])
    // Some UAs focus the closest focusable parent when the toggle is
    // clicked. Making this div focusable ensures such UAs will focus
    // it and `closeIfFocusOutside` can tell if the toggle was clicked.
    ,
    tabIndex: -1,
    style: style,
    children: [renderToggle(args), isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, {
      position: position,
      onClose: close,
      onFocusOutside: closeIfFocusOutside,
      expandOnMobile: expandOnMobile,
      headerTitle: headerTitle,
      focusOnMount: focusOnMount
      // This value is used to ensure that the dropdowns
      // align with the editor header by default.
      ,
      offset: 13,
      anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,
      variant: variant,
      ...popoverProps,
      className: dist_clsx('components-dropdown__content', popoverProps?.className, contentClassName),
      children: renderContent(args)
    })]
  });
};

/**
 * Renders a button that opens a floating content modal when clicked.
 *
 * ```jsx
 * import { Button, Dropdown } from '@wordpress/components';
 *
 * const MyDropdown = () => (
 *   <Dropdown
 *     className="my-container-class-name"
 *     contentClassName="my-dropdown-content-classname"
 *     popoverProps={ { placement: 'bottom-start' } }
 *     renderToggle={ ( { isOpen, onToggle } ) => (
 *       <Button
 *         variant="primary"
 *         onClick={ onToggle }
 *         aria-expanded={ isOpen }
 *       >
 *         Toggle Dropdown!
 *       </Button>
 *     ) }
 *     renderContent={ () => <div>This is the content of the dropdown.</div> }
 *   />
 * );
 * ```
 */
const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown');
/* harmony default export */ const dropdown = (Dropdown);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
  const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {
    marginBottom: 0,
    ...derivedProps,
    ref: forwardedRef
  });
}

/**
 * A convenience wrapper for the `suffix` when you want to apply
 * standard padding in accordance with the size variant.
 *
 * ```jsx
 * import {
 *   __experimentalInputControl as InputControl,
 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 * } from '@wordpress/components';
 *
 * <InputControl
 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
 * />
 * ```
 */
const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
/* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper);

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

// TODO: Resolve need to use &&& to increase specificity
// https://github.com/WordPress/gutenberg/issues/18483

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

/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */

/**
 * Return an SVG icon.
 *
 * @param {IconProps}                                 props icon is the SVG component to render
 *                                                          size is a number specifiying the icon size in pixels
 *                                                          Other props will be passed to wrapped SVG component
 * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
 *
 * @return {JSX.Element}  Icon component
 */
function icon_Icon({
  icon,
  size = 24,
  ...props
}, ref) {
  return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
    width: size,
    height: size,
    ...props,
    ref
  });
}
/* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon));

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

const chevronDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
  viewBox: "0 0 24 24",
  xmlns: "http://www.w3.org/2000/svg",
  children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
    d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
  })
});
/* harmony default export */ const chevron_down = (chevronDown);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Disable reason: A select with an onchange throws a warning.
  if (!options?.length && !children) {
    return null;
  }
  const handleOnChange = event => {
    if (props.multiple) {
      const selectedOptions = Array.from(event.target.options).filter(({
        selected
      }) => selected);
      const newValues = selectedOptions.map(({
        value
      }) => value);
      props.onChange?.(newValues, {
        event
      });
      return;
    }
    props.onChange?.(event.target.value, {
      event
    });
  };
  const classes = dist_clsx('components-select-control', className);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
    help: help,
    id: id,
    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_base, {
      className: classes,
      disabled: disabled,
      hideLabelFromVision: hideLabelFromVision,
      id: id,
      label: label,
      size: size,
      suffix: suffix || !multiple && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}),
      prefix: prefix,
      labelPosition: labelPosition,
      __next40pxDefaultSize: __next40pxDefaultSize,
      children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Select, {
        ...restProps,
        __next40pxDefaultSize: __next40pxDefaultSize,
        "aria-describedby": helpId,
        className: "components-select-control__input",
        disabled: disabled,
        id: id,
        multiple: multiple,
        onChange: handleOnChange,
        ref: ref,
        selectSize: size,
        value: valueProp,
        children: children || options.map((option, index) => {
          const key = option.id || `${option.label}-${option.value}-${index}`;
          return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", {
            value: option.value,
            disabled: option.disabled,
            hidden: option.hidden,
            children: option.label
          }, key);
        })
      })
    })
  });
}

/**
 * `SelectControl` allows users to select from a single or multiple option menu.
 * It functions as a wrapper around the browser's native `<select>` element.
 *
 * ```jsx
 * import { SelectControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MySelectControl = () => {
 *   const [ size, setSize ] = useState( '50%' );
 *
 *   return (
 *     <SelectControl
 *       label="Size"
 *       value={ size }
 *       options={ [
 *         { label: 'Big', value: '100%' },
 *         { label: 'Medium', value: '50%' },
 *         { label: 'Small', value: '25%' },
 *       ] }
 *       onChange={ setSize }
 *     />
 *   );
 * };
 * ```
 */
const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl);
/* harmony default export */ const select_control = (SelectControl);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @template T
 * @typedef Options
 * @property {T}      [initial] Initial value
 * @property {T | ""} fallback  Fallback value
 */

/** @type {Readonly<{ initial: undefined, fallback: '' }>} */
const defaultOptions = {
  initial: undefined,
  /**
   * Defaults to empty string, as that is preferred for usage with
   * <input />, <textarea />, and <select /> form elements.
   */
  fallback: ''
};

/**
 * Custom hooks for "controlled" components to track and consolidate internal
 * state and incoming values. This is useful for components that render
 * `input`, `textarea`, or `select` HTML elements.
 *
 * https://reactjs.org/docs/forms.html#controlled-components
 *
 * At first, a component using useControlledState receives an initial prop
 * value, which is used as initial internal state.
 *
 * This internal state can be maintained and updated without
 * relying on new incoming prop values.
 *
 * Unlike the basic useState hook, useControlledState's state can
 * be updated if a new incoming prop value is changed.
 *
 * @template T
 *
 * @param {T | undefined} currentState             The current value.
 * @param {Options<T>}    [options=defaultOptions] Additional options for the hook.
 *
 * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
 */
function use_controlled_state_useControlledState(currentState, options = defaultOptions) {
  const {
    initial,
    fallback
  } = {
    ...defaultOptions,
    ...options
  };
  const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState);
  const hasCurrentState = isValueDefined(currentState);

/*
   * Resets internal state if value every changes from uncontrolled <-> controlled.
   */
  (0,external_wp_element_namespaceObject.useEffect)(() => {
    if (hasCurrentState && internalState) {
      setInternalState(undefined);
    }
  }, [hasCurrentState, internalState]);
  const state = getDefinedValue([currentState, internalState, initial], fallback);

/* eslint-disable jsdoc/no-undefined-types */
  /** @type {(nextState: T) => void} */
  const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => {
    if (!hasCurrentState) {
      setInternalState(nextState);
    }
  }, [hasCurrentState]);
  /* eslint-enable jsdoc/no-undefined-types */

return [state, setState];
}
/* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState);

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

/**
 * Internal dependencies
 */

/**
 * A float supported clamp function for a specific value.
 *
 * @param value The value to clamp.
 * @param min   The minimum value.
 * @param max   The maximum value.
 *
 * @return A (float) number
 */
function floatClamp(value, min, max) {
  if (typeof value !== 'number') {
    return null;
  }
  return parseFloat(`${math_clamp(value, min, max)}`);
}

/**
 * Hook to store a clamped value, derived from props.
 *
 * @param settings
 * @return The controlled value and the value setter.
 */
function useControlledRangeValue(settings) {
  const {
    min,
    max,
    value: valueProp,
    initial
  } = settings;
  const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), {
    initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),
    fallback: null
  });
  const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
    if (nextValue === null) {
      setInternalState(null);
    } else {
      setInternalState(floatClamp(nextValue, min, max));
    }
  }, [min, max, setInternalState]);

// `state` can't be an empty string because we specified a fallback value of
  // `null` in `useControlledState`
  return [state, setState];
}

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

function range_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
 */

// @todo Refactor RangeControl with latest HStack configuration
// @see: packages/components/src/h-stack
const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
  target: "e1epgpqk1"
} : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({
  marginLeft: `${space(4)} !important`
}), ";" + ( true ? "" : 0));
const ActionRightWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span",  true ? {
  target: "e1epgpqk0"
} : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({
  marginLeft: 8
}), ";" + ( true ? "" : 0));

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

/**
 * Internal dependencies
 */

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

/**
 * Internal dependencies
 */

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

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/*
     * Calls onChange only when nextValue is numeric
     * otherwise may queue a reset for the blur event.
     */
    if (!isNaN(nextValue)) {
      if (nextValue < min || nextValue > max) {
        nextValue = floatClamp(nextValue, min, max);
      }
      onChange(nextValue);
      isResetPendent.current = false;
    } else if (allowReset) {
      isResetPendent.current = true;
    }
  };
  const handleOnInputNumberBlur = () => {
    if (isResetPendent.current) {
      handleOnReset();
      isResetPendent.current = false;
    }
  };
  const handleOnReset = () => {
    let resetValue = parseFloat(`${resetFallbackValue}`);
    let onChangeResetValue = resetValue;
    if (isNaN(resetValue)) {
      resetValue = null;
      onChangeResetValue = undefined;
    }
    setValue(resetValue);

/**
     * Previously, this callback would always receive undefined as
     * an argument. This behavior is unexpected, specifically
     * when resetFallbackValue is defined.
     *
     * The value of undefined is not ideal. Passing it through
     * to internal <input /> elements would change it from a
     * controlled component to an uncontrolled component.
     *
     * For now, to minimize unexpected regressions, we're going to
     * preserve the undefined callback argument, except when a
     * resetFallbackValue is defined.
     */
    onChange(onChangeResetValue);
  };
  const handleShowTooltip = () => setShowTooltip(true);
  const handleHideTooltip = () => setShowTooltip(false);
  const handleOnBlur = event => {
    onBlur(event);
    setIsFocused(false);
    handleHideTooltip();
  };
  const handleOnFocus = event => {
    onFocus(event);
    setIsFocused(true);
    handleShowTooltip();
  };
  const offsetStyle = {
    [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {
    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
    className: classes,
    label: label,
    hideLabelFromVision: hideLabelFromVision,
    id: `${id}`,
    help: help,
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Root, {
      className: "components-range-control__root",
      __next40pxDefaultSize: __next40pxDefaultSize,
      children: [beforeIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BeforeIconWrapper, {
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
          icon: beforeIcon
        })
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Wrapper, {
        __nextHasNoMarginBottom: __nextHasNoMarginBottom,
        className: wrapperClasses,
        color: colorProp,
        marks: !!marks,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_range, {
          ...otherProps,
          className: "components-range-control__slider",
          describedBy: describedBy,
          disabled: disabled,
          id: `${id}`,
          label: label,
          max: max,
          min: min,
          onBlur: handleOnBlur,
          onChange: handleOnRangeChange,
          onFocus: handleOnFocus,
          onMouseMove: onMouseMove,
          onMouseLeave: onMouseLeave,
          ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]),
          step: step,
          value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RangeRail, {
          "aria-hidden": true,
          disabled: disabled,
          marks: marks,
          max: max,
          min: min,
          railColor: railColor,
          step: step,
          value: rangeFillValue
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Track, {
          "aria-hidden": true,
          className: "components-range-control__track",
          disabled: disabled,
          style: {
            width: fillValueOffset
          },
          trackColor: trackColor
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ThumbWrapper, {
          className: "components-range-control__thumb-wrapper",
          style: offsetStyle,
          disabled: disabled,
          children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Thumb, {
            "aria-hidden": true,
            isFocused: isThumbFocused,
            disabled: disabled
          })
        }), enableTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SimpleTooltip, {
          className: "components-range-control__tooltip",
          inputRef: inputRef,
          tooltipPosition: "bottom",
          renderTooltipContent: renderTooltipContent,
          show: isCurrentlyFocused || showTooltip,
          style: offsetStyle,
          value: value
        })]
      }), afterIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AfterIconWrapper, {
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
          icon: afterIcon
        })
      }), hasInputField && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputNumber, {
        "aria-label": label,
        className: "components-range-control__number",
        disabled: disabled,
        inputMode: "decimal",
        isShiftStepEnabled: isShiftStepEnabled,
        max: max,
        min: min,
        onBlur: handleOnInputNumberBlur,
        onChange: handleOnChange,
        shiftStep: shiftStep,
        size: __next40pxDefaultSize ? '__unstable-large' : 'default',
        __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),
        step: step
        // @ts-expect-error TODO: Investigate if the `null` value is necessary
        ,
        value: inputSliderValue
      }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ActionRightWrapper, {
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
          className: "components-range-control__reset",
          disabled: disabled || value === undefined,
          variant: "secondary",
          size: "small",
          onClick: handleOnReset,
          children: (0,external_wp_i18n_namespaceObject.__)('Reset')
        })
      })]
    })
  });
}

/**
 * RangeControls are used to make selections from a range of incremental values.
 *
 * ```jsx
 * import { RangeControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyRangeControl = () => {
 *   const [ isChecked, setChecked ] = useState( true );
 *   return (
 *     <RangeControl
 *       help="Please select how transparent you would like this."
 *       initialPosition={50}
 *       label="Opacity"
 *       max={100}
 *       min={0}
 *       onChange={() => {}}
 *     />
 *   );
 * };
 * ```
 */
const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl);
/* harmony default export */ const range_control = (RangeControl);

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

// Make the Hue circle picker not go out of the bar.
const interactiveHueStyles = `
.react-colorful__interactive {
	width: calc( 100% - ${space(2)} );
	margin-left: ${space(1)};
}`;
const AuxiliaryColorArtefactWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div",  true ? {
  target: "ez9hsf44"
} : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0));
const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
  target: "ez9hsf43"
} : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0));
const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
  target: "ez9hsf42"
} : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0));
const ColorfulWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div",  true ? {
  target: "ez9hsf41"
} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0));
const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
  target: "ez9hsf40"
} : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0));

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

const copy_copy = /*#__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, {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"
  })
});
/* harmony default export */ const library_copy = (copy_copy);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js
/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// If the internal color is equal to the received color prop, we can use the
  // HSLA values from the local state which, compared to the received color prop,
  // retain more details about the actual H and S values that the user selected,
  // and thus allow for better UX when interacting with the H and S sliders.
  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
  const updateHSLAValue = partialNewValue => {
    const nextOnChangeValue = w({
      ...colorValue,
      ...partialNewValue
    });

// Fire `onChange` only if the resulting color is different from the
    // current one.
    // Otherwise, update the internal HSLA color to cause a re-render.
    if (!color.isEqual(nextOnChangeValue)) {
      onChange(nextOnChangeValue);
    } else {
      setInternalHSLA(prevHSLA => ({
        ...prevHSLA,
        ...partialNewValue
      }));
    }
  };
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {
      min: 0,
      max: 359,
      label: "Hue",
      abbreviation: "H",
      value: colorValue.h,
      onChange: nextH => {
        updateHSLAValue({
          h: nextH
        });
      }
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Saturation",
      abbreviation: "S",
      value: colorValue.s,
      onChange: nextS => {
        updateHSLAValue({
          s: nextS
        });
      }
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Lightness",
      abbreviation: "L",
      value: colorValue.l,
      onChange: nextL => {
        updateHSLAValue({
          l: nextL
        });
      }
    }), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {
      min: 0,
      max: 100,
      label: "Alpha",
      abbreviation: "A",
      value: Math.trunc(100 * colorValue.a),
      onChange: nextA => {
        updateHSLAValue({
          a: nextA / 100
        });
      }
    })]
  });
};

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-input.js
/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.mjs
function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?$?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*$?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},O=function(e){var r=/hsva?$?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*$?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=O,z=function(e){var r=/rgba?$?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*$?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))};
//# sourceMappingURL=index.module.js.map

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

k([names]);
const options = [{
  label: 'RGB',
  value: 'rgb'
}, {
  label: 'HSL',
  value: 'hsl'
}, {
  label: 'Hex',
  value: 'hex'
}];

// `isBorderless` is still experimental and not a public prop for InputControl yet.
const BORDERLESS_SELECT_CONTROL_CONTEXT = {
  InputBase: {
    isBorderless: true
  }
};
const UnconnectedColorPicker = (props, forwardedRef) => {
  const {
    enableAlpha = false,
    color: colorProp,
    onChange,
    defaultValue = '#fff',
    copyFormat,
    ...divProps
  } = useContextSystem(props, 'ColorPicker');

// Use a safe default value for the color and remove the possibility of `undefined`.
  const [color, setColor] = useControlledValue({
    onChange,
    value: colorProp,
    defaultValue
  });
  const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return w(color || '');
  }, [color]);
  const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor);
  const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
    debouncedSetColor(nextValue.toHex());
  }, [debouncedSetColor]);
  const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ColorfulWrapper, {
    ref: forwardedRef,
    ...divProps,
    children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Picker, {
      onChange: handleChange,
      color: safeColordColor,
      enableAlpha: enableAlpha
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactWrapper, {
      children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactHStackHeader, {
        justify: "space-between",
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, {
          value: BORDERLESS_SELECT_CONTROL_CONTEXT,
          children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectControl, {
            __nextHasNoMarginBottom: true,
            options: options,
            value: colorType,
            onChange: nextColorType => setColorType(nextColorType),
            label: (0,external_wp_i18n_namespaceObject.__)('Color format'),
            hideLabelFromVision: true
          })
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorCopyButton, {
          color: safeColordColor,
          colorType: copyFormat || colorType
        })]
      }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInputWrapper, {
        direction: "column",
        gap: 2,
        children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInput, {
          colorType: colorType,
          color: safeColordColor,
          onChange: handleChange,
          enableAlpha: enableAlpha
        })
      })]
    })]
  });
};
const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
/* harmony default export */ const color_picker_component = (ColorPicker);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js
/**
 * Internal dependencies
 */

const LegacyAdapter = props => {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_picker_component, {
    ...use_deprecated_props_useDeprecatedProps(props)
  });
};

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-context.js
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({});

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

const check = /*#__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: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
  })
});
/* harmony default export */ const library_check = (check);

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function OptionGroup({
  className,
  options,
  ...additionalProps
}) {
  const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined;
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
    ...additionalProps,
    role: role,
    className: dist_clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className),
    children: options
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

function DropdownLinkAction({
  buttonProps,
  className,
  dropdownProps,
  linkText
}) {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, {
    className: dist_clsx('components-circular-option-picker__dropdown-link-action', className),
    renderToggle: ({
      isOpen,
      onToggle
    }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: onToggle,
      variant: "link",
      ...buttonProps,
      children: linkText
    }),
    ...dropdownProps
  });
}
function ButtonAction({
  className,
  children,
  ...additionalProps
}) {
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
    className: dist_clsx('components-circular-option-picker__clear', className),
    variant: "tertiary",
    ...additionalProps,
    children: children
  });
}

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
 *
 * ```jsx
 * import { CircularOptionPicker } from '../circular-option-picker';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 * 	const [ currentColor, setCurrentColor ] = useState();
 * 	const colors = [
 * 		{ color: '#f00', name: 'Red' },
 * 		{ color: '#0f0', name: 'Green' },
 * 		{ color: '#00f', name: 'Blue' },
 * 	];
 * 	const colorOptions = (
 * 		<>
 * 			{ colors.map( ( { color, name }, index ) => {
 * 				return (
 * 					<CircularOptionPicker.Option
 * 						key={ `${ color }-${ index }` }
 * 						tooltipText={ name }
 * 						style={ { backgroundColor: color, color } }
 * 						isSelected={ index === currentColor }
 * 						onClick={ () => setCurrentColor( index ) }
 * 						aria-label={ name }
 * 					/>
 * 				);
 * 			} ) }
 * 		</>
 * 	);
 * 	return (
 * 		<CircularOptionPicker
 * 				options={ colorOptions }
 * 				actions={
 * 					<CircularOptionPicker.ButtonAction
 * 						onClick={ () => setCurrentColor( undefined ) }
 * 					>
 * 						{ 'Clear' }
 * 					</CircularOptionPicker.ButtonAction>
 * 				}
 * 			/>
 * 	);
 * };
 * ```
 */

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js
/**
 * Internal dependencies
 */

/* harmony default export */ const build_module_circular_option_picker = (circular_option_picker);

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

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

/**
 * Internal dependencies
 */

function UnconnectedVStack(props, forwardedRef) {
  const vStackProps = useVStack(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...vStackProps,
    ref: forwardedRef
  });
}

/**
 * `VStack` (or Vertical Stack) is a layout component that arranges child
 * elements in a vertical line.
 *
 * `VStack` can render anything inside.
 *
 * ```jsx
 * import {
 * 	__experimentalText as Text,
 * 	__experimentalVStack as VStack,
 * } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<VStack>
 * 			<Text>Code</Text>
 * 			<Text>is</Text>
 * 			<Text>Poetry</Text>
 * 		</VStack>
 * 	);
 * }
 * ```
 */
const VStack = contextConnect(UnconnectedVStack, 'VStack');
/* harmony default export */ const v_stack_component = (VStack);

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

/**
 * Internal dependencies
 */

function UnconnectedTruncate(props, forwardedRef) {
  const truncateProps = useTruncate(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    as: "span",
    ...truncateProps,
    ref: forwardedRef
  });
}

/**
 * `Truncate` is a typography primitive that trims text content.
 * For almost all cases, it is recommended that `Text`, `Heading`, or
 * `Subheading` is used to render text content. However,`Truncate` is
 * available for custom implementations.
 *
 * ```jsx
 * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
 *
 * function Example() {
 * 	return (
 * 		<Truncate>
 * 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
 * 			neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
 * 			mollis mi. Morbi id elementum massa.
 * 		</Truncate>
 * 	);
 * }
 * ```
 */
const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate');
/* harmony default export */ const truncate_component = (component_Truncate);

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

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

/**
 * Internal dependencies
 */

function UnconnectedHeading(props, forwardedRef) {
  const headerProps = useHeading(props);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
    ...headerProps,
    ref: forwardedRef
  });
}

/**
 * `Heading` renders headings and titles using the library's typography system.
 *
 * ```jsx
 * import { __experimentalHeading as Heading } from "@wordpress/components";
 *
 * function Example() {
 *   return <Heading>Code is Poetry</Heading>;
 * }
 * ```
 */
const Heading = contextConnect(UnconnectedHeading, 'Heading');
/* harmony default export */ const heading_component = (Heading);

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

function color_palette_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/dropdown/styles.js

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

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

/**
 * Internal dependencies
 */

function UnconnectedDropdownContentWrapper(props, forwardedRef) {
  const {
    paddingSize = 'small',
    ...derivedProps
  } = useContextSystem(props, 'DropdownContentWrapper');
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownContentWrapperDiv, {
    ...derivedProps,
    paddingSize: paddingSize,
    ref: forwardedRef
  });
}

/**
 * A convenience wrapper for the `renderContent` when you want to apply
 * different padding. (Default is `paddingSize="small"`).
 *
 * ```jsx
 * import {
 *   Dropdown,
 *   __experimentalDropdownContentWrapper as DropdownContentWrapper,
 * } from '@wordpress/components';
 *
 * <Dropdown
 *   renderContent={ () => (
 *     <DropdownContentWrapper paddingSize="medium">
 *       My dropdown content
 *     </DropdownContentWrapper>
 * ) }
 * />
 * ```
 */
const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');
/* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper);

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

k([names, a11y]);
const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
  if (!currentValue) {
    return '';
  }
  const currentValueIsCssVariable = /^var\(/.test(currentValue);
  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex();

// Normalize format of `colors` to simplify the following loop

// translators: shown when the user has picked a custom color (i.e not in the palette of colors).
  return (0,external_wp_i18n_namespaceObject.__)('Custom');
};

// The PaletteObject type has a `colors` property (an array of ColorObject),
// while the ColorObject type has a `color` property (the CSS color value).
const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
const isMultiplePaletteArray = arr => {
  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
};

/**
 * Transform a CSS variable used as background color into the color value itself.
 *
 * @param value   The color value that may be a CSS variable.
 * @param element The element for which to get the computed style.
 * @return The background color value computed from a element.
 */
const normalizeColorValue = (value, element) => {
  const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
  if (!currentValueIsCssVariable || element === null) {
    return value;
  }
  const {
    ownerDocument
  } = element;
  const {
    defaultView
  } = ownerDocument;
  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;
  return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value;
};

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

k([names, a11y]);
function SinglePalette({
  className,
  clearColor,
  colors,
  onChange,
  value,
  ...additionalProps
}) {
  const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return colors.map(({
      color,
      name
    }, index) => {
      const colordColor = w(color);
      const isSelected = value === color;
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, {
        isSelected: isSelected,
        selectedIconProps: isSelected ? {
          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
        } : {},
        tooltipText: name ||
        // translators: %s: color hex code e.g: "#f00".
        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color),
        style: {
          backgroundColor: color,
          color
        },
        onClick: isSelected ? clearColor : () => onChange(color, index),
        "aria-label": name ?
        // translators: %s: The name of the color e.g: "vivid red".
        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) :
        // translators: %s: color hex code e.g: "#f00".
        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color)
      }, `${color}-${index}`);
    });
  }, [colors, value, onChange, clearColor]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, {
    className: className,
    options: colorOptions,
    ...additionalProps
  });
}
function MultiplePalettes({
  className,
  clearColor,
  colors,
  onChange,
  value,
  headingLevel
}) {
  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette');
  if (colors.length === 0) {
    return null;
  }
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, {
    spacing: 3,
    className: className,
    children: colors.map(({
      name,
      colors: colorPalette
    }, index) => {
      const id = `${instanceId}-${index}`;
      return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
        spacing: 2,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, {
          id: id,
          level: headingLevel,
          children: name
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, {
          clearColor: clearColor,
          colors: colorPalette,
          onChange: newColor => onChange(newColor, index),
          value: value,
          "aria-labelledby": id
        })]
      }, index);
    })
  });
}
function CustomColorPickerDropdown({
  isRenderedInSidebar,
  popoverProps: receivedPopoverProps,
  ...props
}) {
  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
    shift: true,
    // 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,
    ...(isRenderedInSidebar ? {
      // When in the sidebar: open to the left (stacking),
      // leaving the same gap as the parent popover.
      placement: 'left-start',
      offset: 34
    } : {
      // Default behavior: open below the anchor
      placement: 'bottom',
      offset: 8
    }),
    ...receivedPopoverProps
  }), [isRenderedInSidebar, receivedPopoverProps]);
  return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, {
    contentClassName: "components-color-palette__custom-color-dropdown-content",
    popoverProps: popoverProps,
    ...props
  });
}
function UnforwardedColorPalette(props, forwardedRef) {
  const {
    asButtons,
    loop,
    clearable = true,
    colors = [],
    disableCustomColors = false,
    enableAlpha = false,
    onChange,
    value,
    __experimentalIsRenderedInSidebar = false,
    headingLevel = 2,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledby,
    ...additionalProps
  } = props;
  const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value);
  const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]);
  const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
    setNormalizedColorValue(normalizeColorValue(value, node));
  }, [value]);
  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
  const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
  const renderCustomColorPicker = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {
    paddingSize: "none",
    children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {
      color: normalizedColorValue,
      onChange: color => onChange(color),
      enableAlpha: enableAlpha
    })
  });
  const isHex = value?.startsWith('#');

// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
  const displayValue = value?.replace(/^var$(.+)$$/, '$1');
  const customColorAccessibleLabel = !!displayValue ? (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".
  (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.');
  const paletteCommonProps = {
    clearColor,
    onChange,
    value
  };
  const actions = !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {
    onClick: clearColor,
    children: (0,external_wp_i18n_namespaceObject.__)('Clear')
  });
  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.jsxs)(v_stack_component, {
    spacing: 3,
    ref: forwardedRef,
    ...additionalProps,
    children: [!disableCustomColors && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, {
      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
      renderContent: renderCustomColorPicker,
      renderToggle: ({
        isOpen,
        onToggle
      }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
        className: "components-color-palette__custom-color-wrapper",
        spacing: 0,
        children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
          ref: customColorPaletteCallbackRef,
          className: "components-color-palette__custom-color-button",
          "aria-expanded": isOpen,
          "aria-haspopup": "true",
          onClick: onToggle,
          "aria-label": customColorAccessibleLabel,
          style: {
            background: value
          },
          type: "button"
        }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {
          className: "components-color-palette__custom-color-text-wrapper",
          spacing: 0.5,
          children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, {
            className: "components-color-palette__custom-color-name",
            children: value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected')
          }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, {
            className: dist_clsx('components-color-palette__custom-color-value', {
              'components-color-palette__custom-color-value--is-hex': isHex
            }),
            children: displayValue
          })]
        })]
      })
    }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, {
      ...metaProps,
      actions: actions,
      options: hasMultipleColorOrigins ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiplePalettes, {
        ...paletteCommonProps,
        headingLevel: headingLevel,
        colors: colors,
        value: value
      }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, {
        ...paletteCommonProps,
        colors: colors,
        value: value
      })
    })]
  });
}

/**
 * Allows the user to pick a color from a list of pre-defined color entries.
 *
 * ```jsx
 * import { ColorPalette } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyColorPalette = () => {
 *   const [ color, setColor ] = useState ( '#f00' )
 *   const colors = [
 *     { name: 'red', color: '#f00' },
 *     { name: 'white', color: '#fff' },
 *     { name: 'blue', color: '#00f' },
 *   ];
 *   return (
 *     <ColorPalette
 *       colors={ colors }
 *       value={ color }
 *       onChange={ ( color ) => setColor( color ) }
 *     />
 *   );
 * } );
 * ```
 */
const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette);
/* harmony default export */ const color_palette = (ColorPalette);

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

// Using `selectSize` instead of `size` to avoid a type conflict with the
// `size` HTML attribute of the `select` element.

// TODO: Resolve need to use &&& to increase specificity
// https://github.com/WordPress/gutenberg/issues/18483

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/styles.js
function border_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
 */

/*
 * This style is only applied to the UnitControl wrapper when the border width
 * field should be a set width. Omitting this allows the UnitControl &
 * RangeControl to share the available width in a 40/60 split respectively.
 */
const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0),  true ? "" : 0);
const wrapperHeight = size => {
  return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0),  true ? "" : 0);
};
const borderControlDropdown = /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;", rtl({
  borderRadius: `2px 0 0 2px`
}, {
  borderRadius: `0 2px 2px 0`
})(), " border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";&:focus,&:hover:not( :disabled ){", focusBoxShadow, " border-color:", COLORS.ui.borderFocus, ";z-index:1;position:relative;}}" + ( true ? "" : 0),  true ? "" : 0);
const colorIndicatorBorder = border => {
  const {
    color,
    style
  } = border || {};
  const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined;
  return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0),  true ? "" : 0);
};
const colorIndicatorWrapper = (border, size) => {
  const {
    style
  } = border || {};
  return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0),  true ? "" : 0);
};

// Must equal $color-palette-circle-size from:
// @wordpress/components/src/circular-option-picker/style.scss
const swatchSize = 28;
const swatchGap = 12;
const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;", styles_labelStyles, ";}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0),  true ? "" : 0);
const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
const resetButton = /*#__PURE__*/emotion_react_browser_esm_css("justify-content:center;width:100%;&&{border-top:", config_values.borderWidth, " solid ", COLORS.gray[400], ";border-top-left-radius:0;border-top-right-radius:0;height:40px;}" + ( true ? "" : 0),  true ? "" : 0);
const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({
  marginRight: space(3)
})(), ";" + ( true ? "" : 0),  true ? "" : 0);

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

/**
 * Internal dependencies
 */

const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web';
const allUnits = {
  px: {
    value: 'px',
    label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
    step: 1
  },
  '%': {
    value: '%',
    label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'),
    step: 0.1
  },
  em: {
    value: 'em',
    label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'),
    step: 0.01
  },
  rem: {
    value: 'rem',
    label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'),
    step: 0.01
  },
  vw: {
    value: 'vw',
    label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
    step: 0.1
  },
  vh: {
    value: 'vh',
    label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
    step: 0.1
  },
  vmin: {
    value: 'vmin',
    label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
    step: 0.1
  },
  vmax: {
    value: 'vmax',
    label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
    step: 0.1
  },
  ch: {
    value: 'ch',
    label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
    step: 0.01
  },
  ex: {
    value: 'ex',
    label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
    step: 0.01
  },
  cm: {
    value: 'cm',
    label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
    step: 0.001
  },
  mm: {
    value: 'mm',
    label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
    step: 0.1
  },
  in: {
    value: 'in',
    label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
    step: 0.001
  },
  pc: {
    value: 'pc',
    label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
    step: 1
  },
  pt: {
    value: 'pt',
    label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
    step: 1
  },
  svw: {
    value: 'svw',
    label: isWeb ? 'svw' : (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'),
    step: 0.1
  },
  svh: {
    value: 'svh',
    label: isWeb ? 'svh' : (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'),
    step: 0.1
  },
  svi: {
    value: 'svi',
    label: isWeb ? 'svi' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the inline direction (svi)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svi)'),
    step: 0.1
  },
  svb: {
    value: 'svb',
    label: isWeb ? 'svb' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the block direction (svb)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svb)'),
    step: 0.1
  },
  svmin: {
    value: 'svmin',
    label: isWeb ? 'svmin' : (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'),
    step: 0.1
  },
  lvw: {
    value: 'lvw',
    label: isWeb ? 'lvw' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'),
    step: 0.1
  },
  lvh: {
    value: 'lvh',
    label: isWeb ? 'lvh' : (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'),
    step: 0.1
  },
  lvi: {
    value: 'lvi',
    label: isWeb ? 'lvi' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'),
    step: 0.1
  },
  lvb: {
    value: 'lvb',
    label: isWeb ? 'lvb' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'),
    step: 0.1
  },
  lvmin: {
    value: 'lvmin',
    label: isWeb ? 'lvmin' : (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'),
    step: 0.1
  },
  dvw: {
    value: 'dvw',
    label: isWeb ? 'dvw' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'),
    step: 0.1
  },
  dvh: {
    value: 'dvh',
    label: isWeb ? 'dvh' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'),
    step: 0.1
  },
  dvi: {
    value: 'dvi',
    label: isWeb ? 'dvi' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'),
    step: 0.1
  },
  dvb: {
    value: 'dvb',
    label: isWeb ? 'dvb' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'),
    step: 0.1
  },
  dvmin: {
    value: 'dvmin',
    label: isWeb ? 'dvmin' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'),
    step: 0.1
  },
  dvmax: {
    value: 'dvmax',
    label: isWeb ? 'dvmax' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'),
    step: 0.1
  },
  svmax: {
    value: 'svmax',
    label: isWeb ? 'svmax' : (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'),
    step: 0.1
  },
  lvmax: {
    value: 'lvmax',
    label: isWeb ? 'lvmax' : (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'),
    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'),
    step: 0.1
  }
};

/**
 * An array of all available CSS length units.
 */
const ALL_CSS_UNITS = Object.values(allUnits);

/**
 * Units of measurements. `a11yLabel` is used by screenreaders.
 */
const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];
const DEFAULT_UNIT = allUnits.px;

/**
 * Handles legacy value + unit handling.
 * This component use to manage both incoming value and units separately.
 *
 * Moving forward, ideally the value should be a string that contains both
 * the value and unit, example: '10px'
 *
 * @param rawValue     The raw value as a string (may or may not contain the unit)
 * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
 * @param allowedUnits Units to derive from.
 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
 * from the raw value could not be matched against the list of allowed units.
 */
function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {
  const initialValue = fallbackUnit ? `${rawValue !== null && rawValue !== void 0 ? rawValue : ''}${fallbackUnit}` : rawValue;
  return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);
}

/**
 * Checks if units are defined.
 *
 * @param units List of units.
 * @return Whether the list actually contains any units.
 */
function hasUnits(units) {
  // Although the `isArray` check shouldn't be necessary (given the signature of
  // this typed function), it's better to stay on the side of caution, since
  // this function may be called from un-typed environments.
  return Array.isArray(units) && !!units.length;
}

/**
 * Parses a quantity and unit from a raw string value, given a list of allowed
 * units and otherwise falling back to the default unit.
 *
 * @param rawValue     The raw value as a string (may or may not contain the unit)
 * @param allowedUnits Units to derive from.
 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
 * from the raw value could not be matched against the list of allowed units.
 */
function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {
  let trimmedValue;
  let quantityToReturn;
  if (typeof rawValue !== 'undefined' || rawValue === null) {
    trimmedValue = `${rawValue}`.trim();
    const parsedQuantity = parseFloat(trimmedValue);
    quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;
  }
  const unitMatch = trimmedValue?.match(/[\d.\-\+]*\s*(.*)/);
  const matchedUnit = unitMatch?.[1]?.toLowerCase();
  let unitToReturn;
  if (hasUnits(allowedUnits)) {
    const match = allowedUnits.find(item => item.value === matchedUnit);
    unitToReturn = match?.value;
  } else {
    unitToReturn = DEFAULT_UNIT.value;
  }
  return [quantityToReturn, unitToReturn];
}

/**
 * Parses quantity and unit from a raw value. Validates parsed value, using fallback
 * value if invalid.
 *
 * @param rawValue         The next value.
 * @param allowedUnits     Units to derive from.
 * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
 * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
 * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
 * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
 * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of
 * `allowedUnits` is passed empty.
 */
function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {
  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);

// The parsed value from `parseQuantityAndUnitFromRawValue` should now be
  // either a real number or undefined. If undefined, use the fallback value.
  const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity;

// If no unit is parsed from the raw value, or if the fallback unit is not
  // defined, use the first value from the list of allowed units as fallback.
  let unitToReturn = parsedUnit || fallbackUnit;
  if (!unitToReturn && hasUnits(allowedUnits)) {
    unitToReturn = allowedUnits[0].value;
  }
  return [quantityToReturn, unitToReturn];
}

/**
 * Takes a unit value and finds the matching accessibility label for the
 * unit abbreviation.
 *
 * @param unit Unit value (example: `px`)
 * @return a11y label for the unit abbreviation
 */
function getAccessibleLabelForUnit(unit) {
  const match = ALL_CSS_UNITS.find(item => item.value === unit);
  return match?.a11yLabel ? match?.a11yLabel : match?.value;
}

/**
 * Filters available units based on values defined a list of allowed unit values.
 *
 * @param allowedUnitValues Collection of allowed unit value strings.
 * @param availableUnits    Collection of available unit objects.
 * @return Filtered units.
 */
function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {
  // Although the `isArray` check shouldn't be necessary (given the signature of
  // this typed function), it's better to stay on the side of caution, since
  // this function may be called from un-typed environments.
  return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];
}

/**
 * Custom hook to retrieve and consolidate units setting from add_theme_support().
 * TODO: ideally this hook shouldn't be needed
 * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
 *
 * @param args                An object containing units, settingPath & defaultUnits.
 * @param args.units          Collection of all potentially available units.
 * @param args.availableUnits Collection of unit value strings for filtering available units.
 * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
 *
 * @return Filtered list of units, with their default values updated following the `defaultValues`
 * argument's property.
 */
const useCustomUnits = ({
  units = ALL_CSS_UNITS,
  availableUnits = [],
  defaultValues
}) => {
  const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);
  if (defaultValues) {
    customUnitsToReturn.forEach((unit, i) => {
      if (defaultValues[unit.value]) {
        const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]);
        customUnitsToReturn[i].default = parsedDefaultValue;
      }
    });
  }
  return customUnitsToReturn;
};

/**
 * Get available units with the unit for the currently selected value
 * prepended if it is not available in the list of units.
 *
 * This is useful to ensure that the current value's unit is always
 * accurately displayed in the UI, even if the intention is to hide
 * the availability of that unit.
 *
 * @param rawValue   Selected value to parse.
 * @param legacyUnit Legacy unit value, if rawValue needs it appended.
 * @param units      List of available units.
 *
 * @return A collection of units containing the unit for the current value.
 */
function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {
  const unitsToReturn = Array.isArray(units) ? [...units] : [];
  const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);
  if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {
    if (allUnits[currentUnit]) {
      unitsToReturn.unshift(allUnits[currentUnit]);
    }
  }
  return unitsToReturn;
}

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

/**
 * Internal dependencies
 */

// Generate class names.
  const cx = useCx();
  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderControlDropdown, className);
  }, [className, cx]);
  const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderColorIndicator);
  }, [cx]);
  const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(colorIndicatorWrapper(border, size));
  }, [border, cx, size]);
  const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderControlPopoverControls);
  }, [cx]);
  const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(borderControlPopoverContent);
  }, [cx]);
  const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
    return cx(resetButton);
  }, [cx]);
  return {
    ...otherProps,
    border,
    className: classes,
    colors,
    enableAlpha,
    enableStyle,
    indicatorClassName,
    indicatorWrapperClassName,
    onColorChange,
    onStyleChange,
    onReset,
    popoverContentClassName,
    popoverControlsClassName,
    resetButtonClassName,
    size,
    __experimentalIsRenderedInSidebar
  };

• Search:

• Replace:

1 2 345 6 7 8