newspack-components 4.7.0 → 4.8.0

package/dist/esm/empty-state/header.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies.
+ */
+import { Icon } from '@wordpress/icons';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useEmptyStateContext } from './context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Header = function Header(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    heading = _ref.heading,
+    className = _ref.className;
+  var _useEmptyStateContext = useEmptyStateContext(),
+    size = _useEmptyStateContext.size;
+  var isSmall = size === 'small';
+
+  // Heading level is a document-outline concern, so the size only sets a default.
+  var level = heading !== null && heading !== void 0 ? heading : isSmall ? 3 : 2;
+  var HeadingTag = "h".concat(level);
+
+  // Two stacks so each gap belongs to exactly one of them: the inner one spaces the
+  // icon from the title, the outer one the title from the description.
+  return /*#__PURE__*/_jsxs(Stack, {
+    direction: "column",
+    align: "center",
+    gap: "sm",
+    className: classnames('newspack-empty-state__header', isSmall && 'newspack-empty-state__header--small', className),
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      direction: "column",
+      align: "center",
+      gap: isSmall ? 'md' : 'lg',
+      children: [icon && /*#__PURE__*/_jsx("div", {
+        className: "newspack-empty-state__icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon,
+          size: isSmall ? 24 : 48
+        })
+      }), /*#__PURE__*/_jsx(HeadingTag, {
+        className: "newspack-empty-state__title",
+        children: title
+      })]
+    }), description && /*#__PURE__*/_jsx("p", {
+      className: "newspack-empty-state__description",
+      children: description
+    })]
+  });
+};
+export default Header;

package/dist/esm/empty-state/index.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * EmptyState
+ */
+
+/**
+ * Internal dependencies.
+ */
+import Actions from './actions';
+import Header from './header';
+import Root from './root';
+export var EmptyState = {
+  Root: Root,
+  Header: Header,
+  Actions: Actions
+};
+Object.entries(EmptyState).forEach(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    name = _ref2[0],
+    part = _ref2[1];
+  part.displayName = "EmptyState.".concat(name);
+});
+export default EmptyState;

package/dist/esm/empty-state/index.test.js

@@ -0,0 +1,299 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import EmptyState from '.';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+describe('EmptyState.Root', function () {
+  it('renders the four-column grid spine', function () {
+    var _render = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx("p", {
+          children: "body"
+        })
+      })),
+      container = _render.container;
+    var grid = container.querySelector('.newspack-empty-state');
+    expect(grid).toHaveClass('newspack-grid');
+    expect(grid).toHaveClass('newspack-grid__columns-4');
+    expect(grid).toHaveClass('newspack-grid--no-margin');
+  });
+
+  // grid/style.scss matches on these attributes, so they are a contract.
+  it('gives the inner stack the data attributes the Grid stylesheet matches on', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx("p", {
+          children: "body"
+        })
+      })),
+      container = _render2.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveAttribute('data-start', '2');
+    expect(stack).toHaveAttribute('data-end', '4');
+  });
+
+  // The width cap hangs off this class, so losing it silently widens the block.
+  it('carries the stack class hook', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx("p", {
+          children: "body"
+        })
+      })),
+      container = _render3.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveClass('newspack-empty-state__stack');
+    expect(stack).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-2xl, 32px)'
+    });
+  });
+
+  // Consumers key `:has()` selectors off this class, so losing it changes their
+  // layout without failing anything.
+  it('merges className onto the grid', function () {
+    var _render4 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        className: "consumer-empty-state",
+        children: /*#__PURE__*/_jsx("p", {
+          children: "body"
+        })
+      })),
+      container = _render4.container;
+    expect(container.querySelector('.newspack-empty-state')).toHaveClass('consumer-empty-state');
+  });
+
+  // Elements, not a bare string: the stack keeps a lone string but drops one sitting
+  // beside an element.
+  it('renders its children', function () {
+    render(/*#__PURE__*/_jsx(EmptyState.Root, {
+      children: /*#__PURE__*/_jsx("p", {
+        children: "body"
+      })
+    }));
+    expect(screen.getByText('body')).toBeInTheDocument();
+  });
+});
+describe('EmptyState.Header', function () {
+  it('renders the title and description in the header', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters",
+          description: "Compose and send."
+        })
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.newspack-empty-state__title')).toHaveTextContent('Get started with newsletters');
+    expect(container.querySelector('.newspack-empty-state__description')).toHaveTextContent('Compose and send.');
+  });
+
+  // Spacing comes from the stacks, so a margin creeping back onto the heading or
+  // paragraph would silently widen every gap.
+  it('spaces the header from its stacks rather than from margins', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters",
+          description: "Compose and send."
+        })
+      })),
+      container = _render6.container;
+    var header = container.querySelector('.newspack-empty-state__header');
+    expect(header).toHaveStyle({
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 'var(--wpds-dimension-gap-sm, 8px)'
+    });
+    expect(header.firstElementChild).toHaveStyle({
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 'var(--wpds-dimension-gap-lg, 16px)'
+    });
+  });
+  it('wraps the icon in the disc', function () {
+    var _render7 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters",
+          icon: /*#__PURE__*/_jsx("svg", {})
+        })
+      })),
+      container = _render7.container;
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toBeInTheDocument();
+  });
+  it('omits the description and the icon when they are not given', function () {
+    var _render8 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters"
+        })
+      })),
+      container = _render8.container;
+    expect(container.querySelector('.newspack-empty-state__description')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon')).not.toBeInTheDocument();
+  });
+  it('renders an h2 and a 48px icon at the default size', function () {
+    var _render9 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters",
+          icon: /*#__PURE__*/_jsx("svg", {})
+        })
+      })),
+      container = _render9.container;
+    expect(screen.getByRole('heading', {
+      level: 2,
+      name: 'Get started with newsletters'
+    })).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__header--small')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '48');
+  });
+  it('drops to an h3, the small modifier and a 24px icon when the root is small', function () {
+    var _render0 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        size: "small",
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "No products match this rule",
+          icon: /*#__PURE__*/_jsx("svg", {})
+        })
+      })),
+      container = _render0.container;
+    expect(container.querySelector('.newspack-empty-state__header--small')).toBeInTheDocument();
+    expect(screen.getByRole('heading', {
+      level: 3,
+      name: 'No products match this rule'
+    })).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '24');
+    expect(container.querySelector('.newspack-empty-state__header').firstElementChild).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-md, 12px)'
+    });
+  });
+  it('lets heading override the level the size implies', function () {
+    render(/*#__PURE__*/_jsx(EmptyState.Root, {
+      size: "small",
+      children: /*#__PURE__*/_jsx(EmptyState.Header, {
+        title: "No products match this rule",
+        heading: 1
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 1,
+      name: 'No products match this rule'
+    })).toBeInTheDocument();
+  });
+  it('carries its own class hook alongside any className', function () {
+    var _render1 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Get started with newsletters",
+          className: "consumer-header"
+        })
+      })),
+      container = _render1.container;
+    var header = container.querySelector('.newspack-empty-state__header');
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveClass('consumer-header');
+  });
+  it('throws outside Root in development', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    try {
+      expect(function () {
+        return render(/*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Orphan"
+        }));
+      }).toThrow('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
+  // Header is the visible half, so a misplaced one blanking an admin screen costs more
+  // than the default size it falls back to.
+  it('falls back to the default size outside Root in production', function () {
+    var previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      var _render10 = render(/*#__PURE__*/_jsx(EmptyState.Header, {
+          title: "Orphan",
+          icon: /*#__PURE__*/_jsx("svg", {})
+        })),
+        container = _render10.container;
+      expect(screen.getByRole('heading', {
+        level: 2,
+        name: 'Orphan'
+      })).toBeInTheDocument();
+      expect(container.querySelector('.newspack-empty-state__header--small')).not.toBeInTheDocument();
+      expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '48');
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+  });
+});
+describe('EmptyState.Actions', function () {
+  it('renders its children in a centred row', function () {
+    var _render11 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsx(EmptyState.Actions, {
+          children: /*#__PURE__*/_jsx("button", {
+            type: "button",
+            children: "Add Newsletter"
+          })
+        })
+      })),
+      container = _render11.container;
+    expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__actions')).toHaveStyle({
+      justifyContent: 'center',
+      gap: 'var(--wpds-dimension-gap-sm, 8px)'
+    });
+    expect(screen.getByRole('button', {
+      name: 'Add Newsletter'
+    })).toBeInTheDocument();
+  });
+  it('stacks into a column while keeping the hook class', function () {
+    var _render12 = render(/*#__PURE__*/_jsx(EmptyState.Root, {
+        children: /*#__PURE__*/_jsxs(EmptyState.Actions, {
+          orientation: "column",
+          children: [/*#__PURE__*/_jsx("button", {
+            type: "button",
+            children: "Set up Audience Management"
+          }), /*#__PURE__*/_jsx("a", {
+            href: "https://example.com",
+            children: "Learn more"
+          })]
+        })
+      })),
+      container = _render12.container;
+    var actions = container.querySelector('.newspack-empty-state__actions');
+    expect(actions).toBeInTheDocument();
+    expect(actions).toHaveStyle({
+      flexDirection: 'column'
+    });
+    // A stack's own default is `stretch`, so without align="center" the buttons
+    // would go full-bleed while flexDirection stayed correct.
+    expect(actions).toHaveStyle({
+      alignItems: 'center'
+    });
+  });
+  it('throws outside Root in development', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    try {
+      expect(function () {
+        return render(/*#__PURE__*/_jsx(EmptyState.Actions, {
+          children: "x"
+        }));
+      }).toThrow('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
+  // Actions reads nothing from context, so the invariant is a development aid. A
+  // stray one must not blank an admin screen in production over a layout hint.
+  it('renders outside Root in production', function () {
+    var previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      var _render13 = render(/*#__PURE__*/_jsx(EmptyState.Actions, {
+          children: "x"
+        })),
+        container = _render13.container;
+      expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+  });
+});

package/dist/esm/empty-state/root.js

@@ -0,0 +1,56 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * WordPress dependencies.
+ */
+import { useMemo } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import Grid from '../grid';
+import { EmptyStateContext } from './context';
+import './style.scss';
+
+// Positions the stack in columns 2 to 4. `data-` attributes because that is the form
+// grid/style.scss standardised on, after prop filtering was found to drop a bare `end`
+// before it reached the DOM. That file carries the full note.
+import { jsx as _jsx } from "react/jsx-runtime";
+var gridColumn = {
+  'data-start': '2',
+  'data-end': '4'
+};
+var Root = function Root(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    className = _ref.className,
+    children = _ref.children;
+  var context = useMemo(function () {
+    return {
+      size: size
+    };
+  }, [size]);
+  return /*#__PURE__*/_jsx(EmptyStateContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Grid, {
+      className: classnames('newspack-empty-state', className),
+      columns: 4,
+      noMargin: true,
+      children: /*#__PURE__*/_jsx(Stack, _objectSpread(_objectSpread({
+        className: "newspack-empty-state__stack",
+        direction: "column",
+        gap: "2xl"
+      }, gridColumn), {}, {
+        children: children
+      }))
+    })
+  });
+};
+export default Root;

package/dist/esm/empty-state/style.scss

@@ -0,0 +1,51 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-empty-state {
+	&__stack {
+		margin-inline: auto;
+		max-width: var(--wpds-dimension-surface-width-lg, 560px);
+	}
+
+	&__header {
+		text-align: center;
+		text-wrap: balance;
+	}
+
+	&__icon {
+		background-color: var(--wp-admin-theme-color-lighter-10, #{np-colors.$primary-000});
+		border-radius: 100%;
+		display: grid;
+		height: wp-vars.$grid-unit-50 * 2;
+		place-items: center;
+		width: wp-vars.$grid-unit-50 * 2;
+
+		svg {
+			fill: var(--wp-admin-theme-color, #{np-colors.$primary-600});
+		}
+	}
+
+	&__title {
+		@include wp-mixins.heading-x-large();
+		color: var(--wpds-color-foreground-content-neutral, #{wp-colors.$gray-900});
+		margin: 0;
+	}
+
+	&__description {
+		color: var(--wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700});
+		margin: 0;
+	}
+
+	&__header--small {
+		.newspack-empty-state__icon {
+			height: wp-vars.$grid-unit-50;
+			width: wp-vars.$grid-unit-50;
+		}
+
+		.newspack-empty-state__title {
+			@include wp-mixins.heading-large();
+		}
+	}
+}

package/dist/esm/empty-state/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -1,9 +1,7 @@
-export { default as Accordion, AccordionPanel } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
-export { default as Badge } from './badge';
 export { default as Breadcrumbs } from './breadcrumbs';
 export { default as Button } from './button';
 export { default as BoxContrast } from './box-contrast';
@@ -14,12 +12,14 @@ export { default as CardSettingsGroup } from './card-settings-group';
 export { default as CardSortableList } from './card-sortable-list';
 export { default as IntegrationIcon } from './integration-icon';
 export { default as CategoryAutocomplete } from './category-autocomplete';
+export { default as CollapsibleGroup } from './collapsible-group';
 export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as DataViews } from './dataviews';
 export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
+export { default as EmptyState } from './empty-state';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
@@ -42,6 +42,8 @@ export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as Settings } from './settings';
+export { default as StatCard, STAT_CARD_NULL_GLYPH } from './stat-card';
+export { default as StatusIndicator } from './status-indicator';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';
 export { default as StyleCard } from './style-card';

package/dist/esm/info-button/index.js

@@ -1,61 +1,72 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-var _excluded = ["className"];
+var _excluded = ["description", "className", "triggerLabel", "aria-label"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
- * Info Button
+ * External dependencies.
  */
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies.
  */
-import { Component } from '@wordpress/element';
-import { Tooltip } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
+import { getWpCompatOverlaySlot, Popover, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
  */
 import './style.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-var InfoButton = /*#__PURE__*/function (_Component) {
-  function InfoButton() {
-    _classCallCheck(this, InfoButton);
-    return _callSuper(this, InfoButton, arguments);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Uses `Popover` rather than `Tooltip`: a tooltip never opens from a touch
+ * pointer, and its popup is not exposed to assistive technology.
+ */
+var InfoButton = forwardRef(function InfoButton(_ref, ref) {
+  var description = _ref.description,
+    className = _ref.className,
+    triggerLabel = _ref.triggerLabel,
+    ariaLabel = _ref['aria-label'],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!description) {
+    return null;
   }
-  _inherits(InfoButton, _Component);
-  return _createClass(InfoButton, [{
-    key: "render",
-    value:
-    /**
-     * Render.
-     */
-    function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        otherProps = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, otherProps), {}, {
-        children: /*#__PURE__*/_jsx("span", {
-          className: classnames('newspack-info-button', className),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: info
-          })
-        })
-      }));
-    }
-  }]);
-}(Component);
+  var name = triggerLabel || ariaLabel || __('More information', 'newspack-plugin');
+  return /*#__PURE__*/_jsxs(Popover.Root, {
+    children: [/*#__PURE__*/_jsx(Popover.Trigger, _objectSpread(_objectSpread({
+      ref: ref,
+      openOnHover: true,
+      delay: 200,
+      closeDelay: 200,
+      "aria-label": name,
+      className: classnames('newspack-info-button', className)
+    }, rest), {}, {
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: info,
+        size: 20
+      })
+    })), /*#__PURE__*/_jsxs(Popover.Popup, {
+      variant: "unstyled",
+      className: "newspack-info-button__popup",
+      portal: /*#__PURE__*/_jsx(Popover.Portal, {
+        className: "newspack-info-button__portal",
+        container: getWpCompatOverlaySlot()
+      }),
+      positioner: /*#__PURE__*/_jsx(Popover.Positioner, {
+        className: "newspack-info-button__positioner",
+        side: "top",
+        sideOffset: 4
+      }),
+      children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+        render: /*#__PURE__*/_jsx(Popover.Title, {}),
+        children: name
+      }), /*#__PURE__*/_jsx(Popover.Description, {
+        children: description
+      })]
+    })]
+  });
+});
 export default InfoButton;