var targetIsItem = isItem(options.items, event.target);
if (!targetIsItem && currentElement) {
// If target is not a composite item, it may be the composite
// element itself (isSelfTarget) or a tabbable element inside the
// composite widget. This may be triggered by clicking outside the
// composite widget or by tabbing out of it. In either cases we
// want to fire a blur event on the current item.
fireBlurEvent(currentElement, event);
}, [options.unstable_virtual, options.items, currentItem]);
var onKeyDown = Object(external_React_["useCallback"])(function (event) {
var _onKeyDownRef$current, _options$groups;
(_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
if (event.defaultPrevented) return;
if (options.currentId !== null) return;
if (!Object(isSelfTarget["a" /* isSelfTarget */])(event)) return;
var isVertical = options.orientation !== "horizontal";
var isHorizontal = options.orientation !== "vertical";
var isGrid = !!((_options$groups = options.groups) !== null && _options$groups !== void 0 && _options$groups.length);
var item = findFirstEnabledItemInTheLastRow(options.items);
if (item !== null && item !== void 0 && item.id) {
(_options$move = options.move) === null || _options$move === void 0 ? void 0 : _options$move.call(options, item.id);
(_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options);
ArrowUp: (isGrid || isVertical) && up,
ArrowRight: (isGrid || isHorizontal) && options.first,
ArrowDown: (isGrid || isVertical) && options.first,
ArrowLeft: (isGrid || isHorizontal) && options.last,
var action = keyMap[event.key];
}, [options.currentId, options.orientation, options.groups, options.items, options.move, options.last, options.first]);
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
ref: Object(useForkRef["a" /* useForkRef */])(ref, htmlRef),
onFocusCapture: onFocusCapture,
onBlurCapture: onBlurCapture,
onKeyDownCapture: onKeyDownCapture,
onKeyUpCapture: onKeyUpCapture,
"aria-activedescendant": options.unstable_virtual ? (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) || undefined : undefined
useComposeProps: function useComposeProps(options, htmlProps) {
htmlProps = Object(Role["a" /* useRole */])(options, htmlProps, true);
var tabbableHTMLProps = Object(Tabbable["a" /* useTabbable */])(options, htmlProps, true);
if (options.unstable_virtual || options.currentId === null) {
// Composite will only be tabbable by default if the focus is managed
// using aria-activedescendant, which requires DOM focus on the container
// element (the composite)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, htmlProps), {}, {
ref: tabbableHTMLProps.ref
var Composite = Object(createComponent["a" /* createComponent */])({
useCreateElement: function useCreateElement$1(type, props, children) {
false ? undefined : void 0;
return Object(useCreateElement["a" /* useCreateElement */])(type, props, children);
// EXTERNAL MODULE: ./node_modules/reakit/es/Id/Id.js
var Id = __webpack_require__("ym77");
// CONCATENATED MODULE: ./node_modules/reakit/es/Group/Group.js
// Automatically generated
var useGroup = Object(createHook["a" /* createHook */])({
compose: Role["a" /* useRole */],
useProps: function useProps(_, htmlProps) {
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
var Group = Object(createComponent["a" /* createComponent */])({
// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeGroup.js
var useCompositeGroup = Object(createHook["a" /* createHook */])({
compose: [useGroup, Id["a" /* unstable_useId */]],
keys: _keys_6742f591["b" /* a */],
propsAreEqual: function propsAreEqual(prev, next) {
if (!next.id || prev.id !== next.id) {
return useGroup.unstable_propsAreEqual(prev, next);
var prevCurrentId = prev.currentId,
prevMoves = prev.unstable_moves,
prevProps = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(prev, ["currentId", "unstable_moves"]);
var nextCurrentId = next.currentId,
nextMoves = next.unstable_moves,
nextProps = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(next, ["currentId", "unstable_moves"]);
if (prev.items && next.items) {
var prevCurrentItem = findEnabledItemById(prev.items, prevCurrentId);
var nextCurrentItem = findEnabledItemById(next.items, nextCurrentId);
var prevGroupId = prevCurrentItem === null || prevCurrentItem === void 0 ? void 0 : prevCurrentItem.groupId;
var nextGroupId = nextCurrentItem === null || nextCurrentItem === void 0 ? void 0 : nextCurrentItem.groupId;
if (next.id === nextGroupId || next.id === prevGroupId) {
return useGroup.unstable_propsAreEqual(prevProps, nextProps);
useProps: function useProps(options, _ref) {
htmlProps = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(_ref, ["ref"]);
var ref = Object(external_React_["useRef"])(null);
var id = options.id; // We need this to be called before CompositeItems' register
Object(useIsomorphicEffect["a" /* useIsomorphicEffect */])(function () {
var _options$registerGrou;
if (!id) return undefined;
(_options$registerGrou = options.registerGroup) === null || _options$registerGrou === void 0 ? void 0 : _options$registerGrou.call(options, {
var _options$unregisterGr;
(_options$unregisterGr = options.unregisterGroup) === null || _options$unregisterGr === void 0 ? void 0 : _options$unregisterGr.call(options, id);
}, [id, options.registerGroup, options.unregisterGroup]);
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({
ref: Object(useForkRef["a" /* useForkRef */])(ref, htmlRef)
var CompositeGroup = Object(createComponent["a" /* createComponent */])({
useHook: useCompositeGroup
// 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)."; }
var alignment_matrix_control_icon_styles_rootSize = function rootSize() {
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])({
gridTemplateRows: "repeat( 3, calc( ".concat(size - padding * 2, "px / 3))"),
}, true ? "" : undefined);
var alignment_matrix_control_icon_styles_rootPointerEvents = function rootPointerEvents(_ref) {
var disablePointerEvents = _ref.disablePointerEvents;
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])({
pointerEvents: disablePointerEvents ? 'none' : null
}, true ? "" : undefined);
var alignment_matrix_control_icon_styles_Wrapper = styled_base_browser_esm("div", {
styles: "box-sizing:border-box;padding:2px;"
var alignment_matrix_control_icon_styles_Root = styled_base_browser_esm("div", {
})("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", alignment_matrix_control_icon_styles_rootPointerEvents, ";" + ( true ? "" : undefined));
var alignment_matrix_control_icon_styles_pointActive = function pointActive(_ref2) {
var isActive = _ref2.isActive;
var boxShadow = isActive ? "0 0 0 1px currentColor" : null;
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])("box-shadow:", boxShadow, ";color:currentColor;*:hover > &{color:currentColor;}" + ( true ? "" : undefined));
var alignment_matrix_control_icon_styles_Point = styled_base_browser_esm("span", {
})("height:2px;width:2px;", alignment_matrix_control_styles_pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : undefined));
var alignment_matrix_control_icon_styles_Cell = Cell;
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js
function icon_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 icon_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { icon_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 { icon_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function AlignmentMatrixControlIcon(_ref) {
var className = _ref.className,
_ref$disablePointerEv = _ref.disablePointerEvents,
disablePointerEvents = _ref$disablePointerEv === void 0 ? true : _ref$disablePointerEv,
size = _ref$size === void 0 ? BASE_SIZE : _ref$size,
style = _ref$style === void 0 ? {} : _ref$style,
value = _ref$value === void 0 ? 'center' : _ref$value,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "disablePointerEvents", "size", "style", "value"]);
var alignIndex = getAlignmentIndex(value);
var scale = (size / BASE_SIZE).toFixed(2);
var classes = classnames_default()('component-alignment-matrix-control-icon', className);
var styles = icon_objectSpread(icon_objectSpread({}, style), {}, {
transform: "scale(".concat(scale, ")")
return Object(external_wp_element_["createElement"])(alignment_matrix_control_icon_styles_Root, Object(esm_extends["a" /* default */])({}, props, {
disablePointerEvents: disablePointerEvents,
}), ALIGNMENTS.map(function (align, index) {
var isActive = alignIndex === index;
return Object(external_wp_element_["createElement"])(alignment_matrix_control_icon_styles_Cell, {
}, Object(external_wp_element_["createElement"])(alignment_matrix_control_icon_styles_Point, {
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js
var instanceId = Object(external_wp_compose_["useInstanceId"])(AlignmentMatrixControl, 'alignment-matrix-control');
function AlignmentMatrixControl(_ref) {
var className = _ref.className,
label = _ref$label === void 0 ? Object(external_wp_i18n_["__"])('Alignment Matrix Control') : _ref$label,
_ref$defaultValue = _ref.defaultValue,
defaultValue = _ref$defaultValue === void 0 ? 'center center' : _ref$defaultValue,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? external_lodash_["noop"] : _ref$onChange,
width = _ref$width === void 0 ? 92 : _ref$width,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "id", "label", "defaultValue", "value", "onChange", "width"]);
var _useState = Object(external_wp_element_["useState"])(value !== null && value !== void 0 ? value : defaultValue),
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 1),
immutableDefaultValue = _useState2[0];
var baseId = useBaseId(id);
var initialCurrentId = utils_getItemId(baseId, immutableDefaultValue);
var composite = useCompositeState({
currentId: initialCurrentId,
rtl: Object(external_wp_i18n_["isRTL"])()
var handleOnChange = function handleOnChange(nextValue) {
Object(external_wp_element_["useEffect"])(function () {
if (typeof value !== 'undefined') {
composite.setCurrentId(utils_getItemId(baseId, value));
}, [value, composite.setCurrentId]);
var classes = classnames_default()('component-alignment-matrix-control', className);
return Object(external_wp_element_["createElement"])(Composite, Object(esm_extends["a" /* default */])({}, props, composite, {
}), GRID.map(function (cells, index) {
return Object(external_wp_element_["createElement"])(CompositeGroup, Object(esm_extends["a" /* default */])({}, composite, {
}), cells.map(function (cell) {
var cellId = utils_getItemId(baseId, cell);
var isActive = composite.currentId === cellId;
return Object(external_wp_element_["createElement"])(cell_Cell, Object(esm_extends["a" /* default */])({}, composite, {
onFocus: function onFocus() {
return handleOnChange(cell);
tabIndex: isActive ? 0 : -1
AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
// EXTERNAL MODULE: ./node_modules/@wordpress/components/build-module/animate/index.js
var animate = __webpack_require__("L8Kx");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-values.js
/* harmony default export */ var 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
* @param {keyof FONT} value Path of value from `FONT`
* @return {string} Font rule value
return Object(external_lodash_["get"])(font_values, value, '');
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/space.js
* Creates a spacing CSS value (px) based on grid system values.
* @param {number} [value=1] Multiplier against the grid base value (8)
* @return {string} The spacing value (px).
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
if (isNaN(value)) return "".concat(SPACE_GRID_BASE, "px");
return "".concat(SPACE_GRID_BASE * value, "px");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js
var base_control_styles_Wrapper = styled_base_browser_esm("div", {
})("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";" + ( true ? "" : undefined));
var StyledField = styled_base_browser_esm("div", {
})("margin-bottom:", space(1), ";.components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : undefined));
var StyledLabel = styled_base_browser_esm("label", {
})("display:inline-block;margin-bottom:", space(1), ";" + ( true ? "" : undefined));
var StyledHelp = styled_base_browser_esm("p", {
})("margin-top:-", space(1), ";font-size:", font('helpText.fontSize'), ";font-style:normal;color:", colors_color('mediumGray.text'), ";" + ( true ? "" : undefined));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/index.js