function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { defineProperty_default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var 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 styled_base_browser_esm_createStyled = function createStyled(tag, options) {
if (options !== undefined) {
identifierName = options.label;
targetClassName = options.target;
shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
return tag.__emotion_forwardProp(propName) && // $FlowFixMe
options.shouldForwardProp(propName);
} : options.shouldForwardProp;
var isReal = tag.__emotion_real === tag;
var baseTag = isReal && tag.__emotion_base || tag;
if (typeof shouldForwardProp !== 'function' && isReal) {
shouldForwardProp = tag.__emotion_forwardProp;
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 = Object(core_browser_esm["d" /* withEmotionCache */])(function (props, context, ref) {
return Object(external_React_["createElement"])(core_browser_esm["a" /* ThemeContext */].Consumer, null, function (theme) {
var finalTag = shouldUseAs && props.as || baseTag;
var classInterpolations = [];
if (props.theme == null) {
mergedProps[key] = props[key];
mergedProps.theme = theme;
if (typeof props.className === 'string') {
className = Object(utils_browser_esm["a" /* getRegisteredStyles */])(context.registered, classInterpolations, props.className);
} else if (props.className != null) {
className = props.className + " ";
var serialized = Object(serialize_browser_esm["a" /* serializeStyles */])(styles.concat(classInterpolations), context.registered, mergedProps);
var rules = Object(utils_browser_esm["b" /* insertStyles */])(context, serialized, typeof finalTag === 'string');
className += context.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;
newProps.ref = ref || props.innerRef;
var ele = Object(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') {
return 'NO_COMPONENT_SELECTOR';
} // $FlowFixMe: coerce undefined to string
return "." + targetClassName;
Styled.withComponent = function (nextTag, nextOptions) {
return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
/* harmony default export */ var styled_base_browser_esm = (styled_base_browser_esm_createStyled);
// EXTERNAL MODULE: ./node_modules/tinycolor2/tinycolor.js
var tinycolor = __webpack_require__("Zss7");
var tinycolor_default = /*#__PURE__*/__webpack_require__.n(tinycolor);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
var esm_defineProperty = __webpack_require__("rePB");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors-values.js
function colors_values_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function colors_values_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { colors_values_ownKeys(Object(source), true).forEach(function (key) { Object(esm_defineProperty["a" /* default */])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { colors_values_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
* TODO: Continue to update values as "G2" design evolves.
* "G2" refers to the movement to advance the interface of the block editor.
* https://github.com/WordPress/gutenberg/issues/18667
// Meets 4.6:1 text contrast against white.
// Meets 3:1 UI or large text contrast against white.
// Used for most borders.
// Use this most of the time for dark items.
// Lightest gray that can be used for AA text contrast.
// Lightest gray that can be used for AA non-text contrast.
placeholder: rgba(G2.gray[900], 0.62)
900: rgba('#000510', 0.9),
800: rgba('#00000a', 0.85),
700: rgba('#06060b', 0.8),
600: rgba('#000913', 0.75),
500: rgba('#0a1829', 0.7),
400: rgba('#0a1829', 0.65),
300: rgba('#0e1c2e', 0.62),
200: rgba('#162435', 0.55),
100: rgba('#223443', 0.5),
backgroundFill: rgba(DARK_GRAY[700], 0.7)
var DARK_OPACITY_LIGHT = {
900: rgba('#304455', 0.45),
800: rgba('#425863', 0.4),
700: rgba('#667886', 0.35),
600: rgba('#7b86a2', 0.3),
500: rgba('#9197a2', 0.25),
400: rgba('#95959c', 0.2),
300: rgba('#829493', 0.15),
200: rgba('#8b8b96', 0.1),
100: rgba('#747474', 0.05)
// Good for "grayed" items and borders.
// Good for "readonly" input fields and special text selection.
placeholder: rgba(BASE.white, 0.65)
var LIGHT_OPACITY_LIGHT = {
900: rgba(BASE.white, 0.5),
800: rgba(BASE.white, 0.45),
700: rgba(BASE.white, 0.4),
600: rgba(BASE.white, 0.35),
500: rgba(BASE.white, 0.3),
400: rgba(BASE.white, 0.25),
300: rgba(BASE.white, 0.2),
200: rgba(BASE.white, 0.15),
100: rgba(BASE.white, 0.1),
backgroundFill: rgba(LIGHT_GRAY[300], 0.8)
// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
theme: "var( --wp-admin-theme-color, ".concat(BLUE.wordpress[700], ")"),
themeDark10: "var( --wp-admin-theme-color-darker-10, ".concat(BLUE.medium.focus, ")")
}; // Namespaced values for raw colors hex codes
backgroundDisabled: LIGHT_GRAY[200],
borderFocus: ADMIN.themeDark10,
borderDisabled: G2.gray[400],
borderLight: G2.gray[200],
textDisabled: DARK_GRAY[150],
var COLORS = colors_values_objectSpread(colors_values_objectSpread({}, BASE), {}, {
darkGray: Object(external_lodash_["merge"])({}, DARK_GRAY, G2.darkGray),
darkOpacity: DARK_OPACITY,
darkOpacityLight: DARK_OPACITY_LIGHT,
mediumGray: G2.mediumGray,
lightGray: Object(external_lodash_["merge"])({}, LIGHT_GRAY, G2.lightGray),
lightGrayLight: LIGHT_OPACITY_LIGHT,
blue: Object(external_lodash_["merge"])({}, BLUE, G2.blue),
/* harmony default export */ var colors_values = (COLORS);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors.js
* Generating a CSS complient rgba() color value.
* @param {string} hexValue The hex value to convert to rgba().
* @param {number} alpha The alpha value for opacity.
* @return {string} The converted rgba() color value.
var hexValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var _tinycolor$toRgb = tinycolor_default()(hexValue).toRgb(),
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
* Retrieves a color from the color palette.
* @param {import('lodash').PropertyPath} value The value to retrieve.
* @return {string} The color (or fallback, if not found).
* color( 'blue.wordpress.700' )
function colors_color(value) {
var fallbackColor = '#000';
return Object(external_lodash_["get"])(COLORS, value, fallbackColor);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/reduce-motion.js
* Allows users to opt-out of animations via OS-level preferences.
* @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
* @return {string} Generated CSS code for the reduced style
function reduceMotion() {
var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transition';
style = 'transition-duration: 0ms;';
style = 'animation-duration: 1ms;';
style = "\n\t\t\t\tanimation-duration: 1ms;\n\t\t\t\ttransition-duration: 0ms;\n\t\t\t";
return "\n\t\t@media ( prefers-reduced-motion: reduce ) {\n\t\t\t".concat(style, ";\n\t\t}\n\t");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js
function _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)."; }
var alignment_matrix_control_styles_ref = true ? {
styles: "border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3,1fr );outline:none;"
var rootBase = function rootBase() {
return alignment_matrix_control_styles_ref;
var alignment_matrix_control_styles_rootSize = function rootSize(_ref2) {
var _ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 92 : _ref2$size;
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])("grid-template-rows:repeat( 3,calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : undefined));
var Root = styled_base_browser_esm("div", {
})(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", alignment_matrix_control_styles_rootSize, ";" + ( true ? "" : undefined));
var Row = styled_base_browser_esm("div", {
styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3,1fr );"
var alignment_matrix_control_styles_pointActive = function pointActive(_ref3) {
var isActive = _ref3.isActive;
var boxShadow = isActive ? "0 0 0 2px ".concat(colors_color('black')) : null;
var pointColor = isActive ? colors_color('black') : colors_color('lightGray.800');
var pointColorHover = isActive ? colors_color('black') : colors_color('blue.medium.focus');
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover > &{color:", pointColorHover, ";}" + ( true ? "" : undefined));
var alignment_matrix_control_styles_pointBase = function pointBase(props) {
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])("background:currentColor;box-sizing:border-box;display:grid;margin:auto;transition:all 120ms linear;", reduceMotion('transition'), " ", alignment_matrix_control_styles_pointActive(props), true ? "" : undefined);
var Point = styled_base_browser_esm("span", {
})("height:6px;width:6px;", alignment_matrix_control_styles_pointBase, true ? "" : undefined);
var Cell = styled_base_browser_esm("span", {
styles: "appearance:none;border:none;box-sizing:border-box;margin:0;display:flex;position:relative;outline:none;align-items:center;justify-content:center;padding:0;"
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js
function cell_Cell(_ref) {
var _ref$isActive = _ref.isActive,
isActive = _ref$isActive === void 0 ? false : _ref$isActive,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["isActive", "value"]);
var tooltipText = ALIGNMENT_LABEL[value];
return Object(external_wp_element_["createElement"])(build_module_tooltip["a" /* default */], {
}, Object(external_wp_element_["createElement"])(CompositeItem["a" /* CompositeItem */], Object(esm_extends["a" /* default */])({
}, props), Object(external_wp_element_["createElement"])(visually_hidden["a" /* default */], null, value), Object(external_wp_element_["createElement"])(Point, {