: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
// when a `cloneElement()` is involved.
if (rendered !== undefined) {
finalComponentProps.children = rendered;
finalComponentProps.className = classes;
return finalComponentProps;
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-connect.js
* Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
* within the Context system under a specified namespace.
* @param Component The component to register into the Context system.
* @param namespace The namespace to register the component under.
* @return The connected WordPressComponent
function contextConnect(Component, namespace) {
return _contextConnect(Component, namespace, {
* "Connects" (or registers) a component within the Context system under a specified namespace.
* Does not forward a ref.
* @param Component The component to register into the Context system.
* @param namespace The namespace to register the component under.
* @return The connected WordPressComponent
function contextConnectWithoutRef(Component, namespace) {
return _contextConnect(Component, namespace);
// This is an (experimental) evolution of the initial connect() HOC.
// The hope is that we can improve render performance by removing functional
function _contextConnect(Component, namespace, options) {
const WrappedComponent = options?.forwardsRef ? (0,external_wp_element_namespaceObject.forwardRef)(Component) : Component;
if (typeof namespace === 'undefined') {
true ? external_wp_warning_default()('contextConnect: Please provide a namespace') : 0;
// @ts-expect-error internal property
let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace];
* Consolidate (merge) namespaces before attaching it to the WrappedComponent.
if (Array.isArray(namespace)) {
mergedNamespace = [...mergedNamespace, ...namespace];
if (typeof namespace === 'string') {
mergedNamespace = [...mergedNamespace, namespace];
// @ts-expect-error We can't rely on inferred types here because of the
// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
return Object.assign(WrappedComponent, {
[CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
selector: `.${getStyledClassNameFromKey(namespace)}`
* Attempts to retrieve the connected namespace from a component.
* @param Component The component to retrieve a namespace from.
* @return The connected namespaces.
function getConnectNamespace(Component) {
// @ts-ignore internal property
if (Component[CONNECT_STATIC_NAMESPACE]) {
// @ts-ignore internal property
namespaces = Component[CONNECT_STATIC_NAMESPACE];
if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) {
namespaces = Component.type[CONNECT_STATIC_NAMESPACE];
* Checks to see if a component is connected within the Context system.
* @param Component The component to retrieve a namespace from.
* @param match The namespace to check.
function hasConnectNamespace(Component, match) {
if (typeof match === 'string') {
return getConnectNamespace(Component).includes(match);
if (Array.isArray(match)) {
return match.some(result => getConnectNamespace(Component).includes(result));
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js
clip: 'rect(1px, 1px, 1px, 1px)',
WebkitClipPath: 'inset( 50% )',
clipPath: 'inset( 50% )',
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
function extends_extends() {
extends_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
return extends_extends.apply(this, arguments);
;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
function emotion_memoize_esm_memoize(fn) {
var cache = Object.create(null);
if (cache[arg] === undefined) cache[arg] = fn(arg);
;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
var isPropValid = /* #__PURE__ */emotion_memoize_esm_memoize(function (prop) {
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
&& prop.charCodeAt(1) === 110
&& prop.charCodeAt(2) < 91;
;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
var testOmitPropsOnStringTag = isPropValid;
var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
return typeof tag === 'string' && // 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
var optionsShouldForwardProp = options.shouldForwardProp;
shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
} : optionsShouldForwardProp;
if (typeof shouldForwardProp !== 'function' && isReal) {
shouldForwardProp = tag.__emotion_forwardProp;
return shouldForwardProp;
var emotion_styled_base_browser_esm_ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var emotion_styled_base_browser_esm_Insertion = function Insertion(_ref) {
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag);
var rules = emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback(function () {
return emotion_utils_browser_esm_insertStyles(cache, serialized, isStringTag);
var createStyled = function createStyled(tag, options) {
var isReal = tag.__emotion_real === tag;
var baseTag = isReal && tag.__emotion_base || tag;
if (options !== undefined) {
identifierName = options.label;
targetClassName = options.target;
var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
var shouldUseAs = !defaultShouldForwardProp('as');
var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
if (identifierName !== undefined) {
styles.push("label:" + identifierName + ";");
if (args[0] == null || args[0].raw === undefined) {
styles.push.apply(styles, args);
styles.push(args[i], args[0][i]);
} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
var Styled = emotion_element_6a883da9_browser_esm_withEmotionCache(function (props, cache, ref) {
var FinalTag = shouldUseAs && props.as || baseTag;
var classInterpolations = [];
if (props.theme == null) {
mergedProps[key] = props[key];
mergedProps.theme = (0,external_React_.useContext)(emotion_element_6a883da9_browser_esm_ThemeContext);
if (typeof props.className === 'string') {
className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className);
} else if (props.className != null) {
className = props.className + " ";
var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
className += cache.key + "-" + serialized.name;
if (targetClassName !== undefined) {
className += " " + targetClassName;
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
for (var _key in props) {
if (shouldUseAs && _key === 'as') continue;
finalShouldForwardProp(_key)) {
newProps[_key] = props[_key];
newProps.className = className;
return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Insertion, {
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/(0,external_React_.createElement)(FinalTag, newProps));
Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
Styled.defaultProps = tag.defaultProps;
Styled.__emotion_real = Styled;
Styled.__emotion_base = baseTag;
Styled.__emotion_styles = styles;
Styled.__emotion_forwardProp = shouldForwardProp;
Object.defineProperty(Styled, 'toString', {
value: function value() {
if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string
return "." + targetClassName;
Styled.withComponent = function (nextTag, nextOptions) {
return createStyled(nextTag, extends_extends({}, options, nextOptions, {
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
})).apply(void 0, styles);
/* harmony default export */ const emotion_styled_base_browser_esm = (createStyled);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/view/component.js
const PolymorphicDiv = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
function UnforwardedView({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PolymorphicDiv, {
* `View` is a core component that renders everything in the library.
* It is the principle component in the entire library.
* import { View } from `@wordpress/components`;
const View = Object.assign((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedView), {
selector: '.components-view'
/* harmony default export */ const component = (View);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/component.js
function UnconnectedVisuallyHidden(props, forwardedRef) {
} = useContextSystem(props, 'VisuallyHidden');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {
* `VisuallyHidden` is a component used to render text intended to be visually
* hidden, but will show for alternate devices, for example a screen reader.
* import { VisuallyHidden } from `@wordpress/components`;
* <label>Code is Poetry</label>
const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden');
/* harmony default export */ const visually_hidden_component = (component_VisuallyHidden);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js
const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']];
// Stored as map as i18n __() only accepts strings (not variables)
const ALIGNMENT_LABEL = {
'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'),
'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'),
'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'),
'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'),
'center center': (0,external_wp_i18n_namespaceObject.__)('Center'),
center: (0,external_wp_i18n_namespaceObject.__)('Center'),
'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'),
'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'),
'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'),
'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right')
// Transforms GRID into a flat Array of values.
const ALIGNMENTS = GRID.flat();
* Normalizes and transforms an incoming value to better match the alignment values
* @param value An alignment value to parse.
* @return The parsed value.
function normalize(value) {
const normalized = value === 'center' ? 'center center' : value;
// Strictly speaking, this could be `string | null | undefined`,
// but will be validated shortly, so we're typecasting to an
// `AlignmentMatrixControlValue` to keep TypeScript happy.
const transformed = normalized?.replace('-', ' ');
return ALIGNMENTS.includes(transformed) ? transformed : undefined;