: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
} : 0)("position:relative;display:flex;align-items:stretch;flex-direction:row;&[aria-orientation='vertical']{flex-direction:column;}@media not ( prefers-reduced-motion: reduce ){&.is-animation-enabled::after{transition-property:left,top,width,height;transition-duration:0.2s;transition-timing-function:ease-out;}}&::after{content:'';position:absolute;pointer-events:none;outline:2px solid transparent;outline-offset:-1px;}&:not( [aria-orientation='vertical'] )::after{left:var( --indicator-left );bottom:0;width:var( --indicator-width );height:0;border-bottom:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}&[aria-orientation='vertical']::after{opacity:0;right:0;top:var( --indicator-top );height:var( --indicator-height );border-right:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}" + ( true ? "" : 0));
const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab, true ? {
} : 0)("&{display:inline-flex;align-items:center;position:relative;border-radius:0;height:", space(12), ";background:transparent;border:none;box-shadow:none;cursor:pointer;padding:3px ", space(4), ";margin-left:0;font-weight:500;&[aria-disabled='true']{cursor:default;opacity:0.3;}&:hover{color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){position:relative;box-shadow:none;outline:none;}&::before{content:'';position:absolute;top:", space(3), ";right:", space(3), ";bottom:", space(3), ";left:", space(3), ";pointer-events:none;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";border-radius:2px;opacity:0;@media not ( prefers-reduced-motion ){transition:opacity 0.1s linear;}}&:focus-visible::before{opacity:1;outline:2px solid transparent;}}" + ( true ? "" : 0));
const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel, true ? {
} : 0)("&:focus{box-shadow:none;outline:none;}&:focus-visible{border-radius:2px;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0));
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tab.js
const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab({
const context = useTabsContext();
true ? external_wp_warning_default()('`Tabs.Tab` must be wrapped in a `Tabs` component.') : 0;
const instancedTabId = `${instanceId}-${tabId}`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Tab, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tablist.js
// eslint-disable-next-line no-restricted-imports
function useTrackElementOffset(targetElement, onUpdate) {
const [indicatorPosition, setIndicatorPosition] = (0,external_wp_element_namespaceObject.useState)({
// TODO: replace with useEventCallback or similar when officially available.
const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
updateCallbackRef.current = onUpdate;
const observedElementRef = (0,external_wp_element_namespaceObject.useRef)();
const resizeObserverRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (targetElement === observedElementRef.current) {
observedElementRef.current = targetElement !== null && targetElement !== void 0 ? targetElement : undefined;
function updateIndicator(element) {
// Workaround to prevent unwanted scrollbars, see:
// https://github.com/WordPress/gutenberg/pull/61979
left: Math.max(element.offsetLeft - 1, 0),
top: Math.max(element.offsetTop - 1, 0),
width: parseFloat(getComputedStyle(element).width),
height: parseFloat(getComputedStyle(element).height)
updateCallbackRef.current?.();
// Set up a ResizeObserver.
if (!resizeObserverRef.current) {
resizeObserverRef.current = new ResizeObserver(() => {
if (observedElementRef.current) {
updateIndicator(observedElementRef.current);
updateIndicator(targetElement);
resizeObserver.observe(targetElement);
// Unobserve previous element.
if (observedElementRef.current) {
resizeObserver.unobserve(observedElementRef.current);
return indicatorPosition;
function useOnValueUpdate(value, onUpdate) {
const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value);
// TODO: replace with useEventCallback or similar when officially available.
const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
updateCallbackRef.current = onUpdate;
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (previousValueRef.current !== value) {
updateCallbackRef.current({
previousValue: previousValueRef.current
previousValueRef.current = value;
const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({
const context = useTabsContext();
const selectedId = context?.store.useState('selectedId');
const indicatorPosition = useTrackElementOffset(context?.store.item(selectedId)?.element);
const [animationEnabled, setAnimationEnabled] = (0,external_wp_element_namespaceObject.useState)(false);
useOnValueUpdate(selectedId, ({
}) => previousValue && setAnimationEnabled(true));
true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0;
// When automatic tab selection is on, make sure that the active tab is up
// to date with the selected tab when leaving the tablist. This makes sure
// that the selected tab will receive keyboard focus when tabbing back into
if (selectedId !== activeId) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tab_list_TabList, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabListWrapper, {
onTransitionEnd: event => {
if (event.pseudoElement === '::after') {
setAnimationEnabled(false);
'--indicator-left': `${indicatorPosition.left}px`,
'--indicator-top': `${indicatorPosition.top}px`,
'--indicator-width': `${indicatorPosition.width}px`,
'--indicator-height': `${indicatorPosition.height}px`,
className: dist_clsx(animationEnabled ? 'is-animation-enabled' : '', otherProps.className),
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js
const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(function TabPanel({
const context = useTabsContext();
true ? external_wp_warning_default()('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : 0;
const instancedTabId = `${instanceId}-${tabId}`;
const selectedId = store.useState(state => state.selectedId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_TabPanel, {
// For TabPanel, the id passed here is the id attribute of the DOM
// `tabId` is the id of the tab that controls this panel.
id: `${instancedTabId}-view`,
children: selectedId === instancedTabId && children
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/index.js
// eslint-disable-next-line no-restricted-imports
orientation = 'horizontal',
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Tabs, 'tabs');
const store = useTabStore({
defaultSelectedId: defaultTabId && `${instanceId}-${defaultTabId}`,
setSelectedId: selectedId => {
const strippedDownId = typeof selectedId === 'string' ? selectedId.replace(`${instanceId}-`, '') : selectedId;
onSelect?.(strippedDownId);
selectedId: selectedTabId && `${instanceId}-${selectedTabId}`
const isControlled = selectedTabId !== undefined;
// Keep track of whether tabs have been populated. This is used to prevent
// certain effects from firing too early while tab data and relevant
// variables are undefined during the initial render.
const tabsHavePopulated = (0,external_wp_element_namespaceObject.useRef)(false);
tabsHavePopulated.current = true;
const selectedTab = items.find(item => item.id === selectedId);
const firstEnabledTab = items.find(item => {
// Ariakit internally refers to disabled tabs as `dimmed`.
const initialTab = items.find(item => item.id === `${instanceId}-${defaultTabId}`);
// Handle selecting the initial tab.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Wait for the denoted initial tab to be declared before making a
// selection. This ensures that if a tab is declared lazily it can
// still receive initial selection, as well as ensuring no tab is
// selected if an invalid `defaultTabId` is provided.
if (defaultTabId && !initialTab) {
// If the currently selected tab is missing (i.e. removed from the DOM),
// fall back to the initial tab or the first enabled tab if there is
// one. Otherwise, no tab should be selected.
if (!items.find(item => item.id === selectedId)) {
if (initialTab && !initialTab.dimmed) {
setSelectedId(initialTab?.id);
setSelectedId(firstEnabledTab.id);
} else if (tabsHavePopulated.current) {
}, [firstEnabledTab, initialTab, defaultTabId, isControlled, items, selectedId, setSelectedId]);
// Handle the currently selected tab becoming disabled.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!selectedTab?.dimmed) {
// In controlled mode, we trust that disabling tabs is done
// intentionally, and don't select a new tab automatically.
// If the currently selected tab becomes disabled, fall back to the
// `defaultTabId` if possible. Otherwise select the first
// enabled tab (if there is one).
if (initialTab && !initialTab.dimmed) {
setSelectedId(initialTab.id);
setSelectedId(firstEnabledTab.id);
}, [firstEnabledTab, initialTab, isControlled, selectedTab?.dimmed, setSelectedId]);
// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Once the tabs have populated, if the `selectedTabId` still can't be
// found, clear the selection.
if (tabsHavePopulated.current && !!selectedTabId && !selectedTab) {
}, [isControlled, selectedTab, selectedTabId, setSelectedId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// If there is no active tab, fallback to place focus on the first enabled tab
// so there is always an active element
if (selectedTabId === null && !activeId && firstEnabledTab?.id) {
setActiveId(firstEnabledTab.id);
}, [selectedTabId, activeId, firstEnabledTab?.id, setActiveId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
requestAnimationFrame(() => {
const focusedElement = items?.[0]?.element?.ownerDocument.activeElement;
if (!focusedElement || !items.some(item => focusedElement === item.element)) {
return; // Return early if no tabs are focused.
// If, after ariakit re-computes the active tab, that tab doesn't match
// the currently focused tab, then we force an update to ariakit to avoid
// any mismatches, especially when navigating to previous/next tab with
if (activeId !== focusedElement.id) {
setActiveId(focusedElement.id);
}, [activeId, isControlled, items, setActiveId]);
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
}), [store, instanceId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabsContext.Provider, {
Tabs.TabPanel = tabpanel_TabPanel;
Tabs.Context = TabsContext;
/* harmony default export */ const tabs = (Tabs);
;// CONCATENATED MODULE: external ["wp","privateApis"]
const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/lock-unlock.js
} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/components');
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/private-apis.js
CompositeGroupV2: CompositeGroup,
CompositeItemV2: CompositeItem,
CompositeRowV2: CompositeRow,
useCompositeStoreV2: useCompositeStore,
CustomSelectControl: CustomSelectControl,
__experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
createPrivateSlotFill: createPrivateSlotFill,
ComponentsContext: ComponentsContext,
DropdownMenuV2: dropdown_menu_v2_DropdownMenu,
DropdownMenuGroupV2: DropdownMenuGroup,
DropdownMenuItemV2: DropdownMenuItem,
DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
DropdownMenuRadioItemV2: DropdownMenuRadioItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/index.js