: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const context = useCompositeContext();
store = store || context;
const id = useId(props.id);
const baseElement = store.useState(
(state) => state.baseElement || void 0
const providerValue = (0,external_React_.useMemo)(
() => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
[id, baseElement, ariaSetSize, ariaPosInSet]
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }),
props = _4R3V3JGP_spreadValues({ id }, props);
var CompositeRow = createComponent((props) => {
const htmlProps = useCompositeRow(props);
return _3ORBWXWF_createElement("div", htmlProps);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
function alignment_matrix_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const alignment_matrix_control_icon_styles_rootSize = () => {
return /*#__PURE__*/emotion_react_browser_esm_css({
gridTemplateRows: `repeat( 3, calc( ${size - padding * 2}px / 3))`,
}, true ? "" : 0, true ? "" : 0);
const rootPointerEvents = ({
return /*#__PURE__*/emotion_react_browser_esm_css({
pointerEvents: disablePointerEvents ? 'none' : undefined
}, true ? "" : 0, true ? "" : 0);
const Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
styles: "box-sizing:border-box;padding:2px"
const alignment_matrix_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
} : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0));
const alignment_matrix_control_icon_styles_pointActive = ({
const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0), true ? "" : 0);
const alignment_matrix_control_icon_styles_Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
} : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0));
const alignment_matrix_control_icon_styles_Cell = Cell;
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js
function AlignmentMatrixControlIcon({
disablePointerEvents = true,
const alignIndex = getAlignmentIndex(value);
const scale = (size / BASE_SIZE).toFixed(2);
const classes = dist_clsx('component-alignment-matrix-control-icon', className);
transform: `scale(${scale})`
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Root, {
disablePointerEvents: disablePointerEvents,
children: ALIGNMENTS.map((align, index) => {
const isActive = alignIndex === index;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Cell, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Point, {
/* harmony default export */ const icon = (AlignmentMatrixControlIcon);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
* import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
* const Example = () => {
* const [ alignment, setAlignment ] = useState( 'center center' );
* <AlignmentMatrixControl
* onChange={ setAlignment }
function AlignmentMatrixControl({
label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'),
defaultValue = 'center center',
const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
const compositeStore = useCompositeStore({
defaultActiveId: getItemId(baseId, defaultValue),
activeId: getItemId(baseId, value),
setActiveId: nextActiveId => {
const nextValue = getItemValue(baseId, nextActiveId);
rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
const activeId = compositeStore.useState('activeId');
const classes = dist_clsx('component-alignment-matrix-control', className);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Root, {
children: GRID.map((cells, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRow, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Row, {
children: cells.map(cell => {
const cellId = getItemId(baseId, cell);
const isActive = cellId === activeId;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cell_Cell, {
AlignmentMatrixControl.Icon = icon;
/* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/animate/index.js
* @param type The animation type
function getDefaultOrigin(type) {
return type === 'appear' ? 'top' : 'left';
* @return ClassName that applies the animations
function getAnimateClassName(options) {
if (options.type === 'loading') {
return 'components-animate__loading';
origin = getDefaultOrigin(type)
const [yAxis, xAxis = 'center'] = origin.split(' ');
return dist_clsx('components-animate__appear', {
['is-from-' + xAxis]: xAxis !== 'center',
['is-from-' + yAxis]: yAxis !== 'middle'
if (type === 'slide-in') {
return dist_clsx('components-animate__slide-in', 'is-from-' + origin);
* Simple interface to introduce animations to components.
* import { Animate, Notice } from '@wordpress/components';
* const MyAnimatedNotice = () => (
* <Animate type="slide-in" options={ { origin: 'top' } }>
* { ( { className } ) => (
* <Notice className={ className } status="success">
* <p>Animation finished.</p>
className: getAnimateClassName({
/* harmony default export */ const animate = (Animate);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
const MotionConfigContext = (0,external_React_.createContext)({
transformPagePoint: (p) => p,
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
const MotionContext = (0,external_React_.createContext)({});
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs
const PresenceContext_PresenceContext = (0,external_React_.createContext)(null);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-browser.mjs
const is_browser_isBrowser = typeof document !== "undefined";
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
const useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LazyContext.mjs
const LazyContext = (0,external_React_.createContext)({ strict: false });
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
* Convert camelCase to dash-case properties.
const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
const optimizedAppearDataId = "framerAppearId";
const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs
const MotionGlobalConfig = {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs
this.scheduled = new Set();
if (!this.scheduled.has(process)) {
this.scheduled.add(process);
this.order.push(process);
const index = this.order.indexOf(process);
this.order.splice(index, 1);
this.scheduled.delete(process);
function createRenderStep(runNextFrame) {
* We create and reuse two queues, one to queue jobs for the current frame
* and one for the next. We reuse to avoid triggering GC after x frames.
let thisFrame = new Queue();
let nextFrame = new Queue();
* Track whether we're currently processing jobs in this step. This way
* we can decide whether to schedule new jobs for this frame or next.
let isProcessing = false;
let flushNextFrame = false;
* A set of processes which were marked keepAlive when scheduled.
const toKeepAlive = new WeakSet();
* Schedule a process to run on the next frame.
schedule: (callback, keepAlive = false, immediate = false) => {
const addToCurrentFrame = immediate && isProcessing;
const queue = addToCurrentFrame ? thisFrame : nextFrame;
toKeepAlive.add(callback);
if (queue.add(callback) && addToCurrentFrame && isProcessing) {
// If we're adding it to the currently running queue, update its measured size
numToRun = thisFrame.order.length;
* Cancel the provided callback from running on the next frame.
nextFrame.remove(callback);
toKeepAlive.delete(callback);
* Execute all schedule callbacks.
process: (frameData) => {
* If we're already processing we've probably been triggered by a flushSync
* inside an existing process. Instead of executing, mark flushNextFrame
* as true and ensure we flush the following frame at the end of this one.
[thisFrame, nextFrame] = [nextFrame, thisFrame];
// Clear the next frame queue
numToRun = thisFrame.order.length;
for (let i = 0; i < numToRun; i++) {
const callback = thisFrame.order[i];
if (toKeepAlive.has(callback)) {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs
"resolveKeyframes", // Write/Read/Write/Read
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
let runNextFrame = false;
let useDefaultElapsed = true;