newspack-components 4.7.0 → 4.8.0

package/dist/esm/settings/DateRangeSetting.js

@@ -0,0 +1,304 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["start", "end", "onChange", "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; }
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useEffect, useState } from '@wordpress/element';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SelectControl, TextControl } from '../';
+
+/**
+ * A bound is stored as { type: 'absolute', date } or { type: 'relative', days },
+ * where days is negative for the past and positive for the future. The UI splits
+ * the relative case in two so a publisher never has to type a minus sign.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BOUND_TYPES = [{
+  label: __('Any', 'newspack-plugin'),
+  value: ''
+}, {
+  label: __('Date', 'newspack-plugin'),
+  value: 'absolute'
+}, {
+  label: __('Days ago', 'newspack-plugin'),
+  value: 'past'
+}, {
+  label: __('Days from now', 'newspack-plugin'),
+  value: 'future'
+}];
+
+// Upper magnitude for a relative bound: ~273 years, far inside Date's range,
+// and it keeps the resolved year four digits so the matcher's lexicographic
+// compare stays valid. Import and REST bypass this input, so the matcher still
+// fails closed on larger offsets — this just turns a wild typo into
+// browser-level validation instead of a segment that matches nobody.
+var MAX_RELATIVE_DAYS = 100000;
+
+// Today as YYYY-MM-DD in local time. toISOString() converts to UTC and would give
+// the wrong day for anyone west of Greenwich.
+var today = function today() {
+  var date = new Date();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return "".concat(date.getFullYear(), "-").concat(month, "-").concat(day);
+};
+
+// Zero days is the same day either way, and normalizes to "Days ago".
+var boundTypeOf = function boundTypeOf(bound) {
+  if (!bound || !bound.type) {
+    return '';
+  }
+  if ('absolute' === bound.type) {
+    return 'absolute';
+  }
+  return bound.days > 0 ? 'future' : 'past';
+};
+var boundValueOf = function boundValueOf(bound) {
+  if (!bound) {
+    return '';
+  }
+  return 'absolute' === bound.type ? bound.date || '' : String(Math.abs(bound.days || 0));
+};
+
+// `seed` is set only when the publisher picks a bound type, so a newly chosen
+// bound starts on a usable value instead of being half-filled. It must stay off
+// for edits to the value itself: a date input reports '' both when cleared and
+// transiently while its value is being retyped, and substituting today() there
+// would silently move a saved window out from under the publisher.
+var makeBound = function makeBound(type, rawValue) {
+  var seed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if ('absolute' === type) {
+    var date = rawValue || (seed ? today() : '');
+    // An absolute bound with no date is not a bound: emitted and saved, it
+    // would reach the matcher as a bound it can only reject, silently
+    // shrinking the segment to nobody. The row itself stays open — the
+    // control falls back to the chosen bound type while the bound is absent.
+    return date ? {
+      type: 'absolute',
+      date: date
+    } : undefined;
+  }
+  // A cleared magnitude mirrors a cleared date: no bound at all, not a
+  // zero-day bound — { days: 0 } would quietly move the window's edge to
+  // today and snap the emptied input back to '0' mid-retype. An explicit
+  // '0' is falsy-but-present, so the check is on emptiness, not truthiness.
+  var raw = '' === rawValue && seed ? '0' : rawValue;
+  if ('' === raw) {
+    return undefined;
+  }
+  // Number() rather than parseInt(): a number input accepts scientific
+  // notation, and parseInt( '1e2' ) reads it as 1 instead of 100.
+  var days = Math.abs(Math.trunc(Number(raw)) || 0);
+  return {
+    type: 'relative',
+    days: 'future' === type ? days : -days
+  };
+};
+var DateRangeBound = function DateRangeBound(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId,
+    bound = _ref.bound,
+    _onChange = _ref.onChange;
+  // The bound type is normally derived from the stored value, but a zero-magnitude
+  // relative bound (`days: 0`) is the same day whether the publisher chose "ago" or
+  // "from now" — the sign can't tell them apart. `chosenType` records the direction
+  // to fall back on while the bound stays ambiguous, and starts out `null` — no
+  // direction known yet — since the bound this control receives can arrive
+  // asynchronously (e.g. an existing segment fetched after first mount).
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    chosenType = _useState2[0],
+    setChosenType = _useState2[1];
+  var derivedType = boundTypeOf(bound);
+  var isAmbiguous = 'relative' === (bound === null || bound === void 0 ? void 0 : bound.type) && 0 === bound.days;
+
+  // Keep chosenType in step with any unambiguous bound — freshly chosen by the
+  // publisher in this control, or loaded from storage — so the direction survives
+  // if the value is later cleared down to an ambiguous zero. A bound of '' (no
+  // bound at all, e.g. before an async load resolves) doesn't establish a
+  // direction; only a real, unambiguous one does.
+  useEffect(function () {
+    if ('' !== derivedType && !isAmbiguous) {
+      setChosenType(derivedType);
+    }
+  }, [derivedType, isAmbiguous]);
+
+  // Also fall back while there is no bound at all: a cleared date emits no
+  // bound (see makeBound), and deriving from the absent value would collapse
+  // the row to "Any" mid-edit instead of leaving the empty input for retyping.
+  var type = null !== chosenType && (isAmbiguous || !bound) ? chosenType : derivedType;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "newspack-settings__date-range-bound",
+    children: [/*#__PURE__*/_jsx(SelectControl, {
+      label: label
+      // Without this the select renders at 32px while the sibling input is
+      // 40px, so the two boxes in a row don't match.
+      ,
+      __next40pxDefaultSize: true,
+      value: type,
+      options: BOUND_TYPES,
+      onChange: function onChange(nextType) {
+        setChosenType(nextType);
+        _onChange(nextType ? makeBound(nextType, '', true) : undefined);
+      }
+    }), '' !== type && /*#__PURE__*/_jsx(TextControl, {
+      "data-testid": testId
+      // The visible label sits on the sibling select, so without one here
+      // the input has no accessible name at all. Composed with the row
+      // label so the two bound rows' inputs stay distinguishable — two
+      // bare "Days" spin buttons announce identically.
+      ,
+      label: 'absolute' === type ?
+      // translators: %s: the bound row label (From/To).
+      sprintf(__('%s date', 'newspack-plugin'), label) :
+      // translators: %s: the bound row label (From/To).
+      sprintf(__('%s days', 'newspack-plugin'), label),
+      hideLabelFromVision: true,
+      type: 'absolute' === type ? 'date' : 'number',
+      min: 'absolute' === type ? undefined : 0,
+      max: 'absolute' === type ? undefined : MAX_RELATIVE_DAYS,
+      value: boundValueOf(bound),
+      onChange: function onChange(nextValue) {
+        return _onChange(makeBound(type, nextValue));
+      }
+    })]
+  });
+};
+
+/**
+ * Rolling windows offered as one-click presets. Each is the trailing window
+ * ending today, i.e. `start: -N days`, `end: today` — the same shape the custom
+ * rows produce, so a preset is a shortcut rather than a separate stored format.
+ */
+var PRESET_DAYS = [7, 30, 365];
+var PRESETS = [{
+  label: __('Any', 'newspack-plugin'),
+  value: ''
+}].concat(_toConsumableArray(PRESET_DAYS.map(function (days) {
+  return {
+    label: sprintf(_n('Last %d day', 'Last %d days', days, 'newspack-plugin'), days),
+    value: String(days)
+  };
+})), [{
+  label: __('Custom', 'newspack-plugin'),
+  value: 'custom'
+}]);
+
+/**
+ * Which preset a stored range corresponds to.
+ *
+ * @param {*} start The start bound.
+ * @param {*} end   The end bound.
+ * @return {string} A PRESETS value: '' when unbounded, the day count when the
+ *                  range is exactly one of the presets, otherwise 'custom'.
+ */
+var presetOf = function presetOf(start, end) {
+  if (!start && !end) {
+    return '';
+  }
+  if (start && end && 'relative' === start.type && 'relative' === end.type && 0 === end.days && start.days < 0 && PRESET_DAYS.includes(Math.abs(start.days))) {
+    return String(Math.abs(start.days));
+  }
+  return 'custom';
+};
+var DateRangeSetting = function DateRangeSetting(_ref2) {
+  var start = _ref2.start,
+    end = _ref2.end,
+    onChange = _ref2.onChange,
+    label = _ref2.label,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var derivedPreset = presetOf(start, end);
+  // A range that matches a preset is indistinguishable from the same range built
+  // by hand, and an empty one is indistinguishable from "Custom, nothing filled
+  // in yet" — so a deliberate Custom choice has to be remembered rather than
+  // re-derived. Starts null: nothing chosen yet, so the stored value decides.
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    chosenPreset = _useState4[0],
+    setChosenPreset = _useState4[1];
+
+  // Custom explains any range, so it is never overridden by what the value looks
+  // like. Every other selection stays in step with a range that arrived from
+  // storage or changed elsewhere.
+  useEffect(function () {
+    setChosenPreset(function (chosen) {
+      return 'custom' === chosen ? chosen : derivedPreset;
+    });
+  }, [derivedPreset]);
+  var preset = null === chosenPreset ? derivedPreset : chosenPreset;
+
+  // Both keys are always emitted: the consumer merges the value into the stored
+  // criterion, so omitting one would leave a stale bound behind. An empty range
+  // emits nothing at all, which drops the criterion — an empty `{}` would reach
+  // the matcher as "no bounds to check" and match every reader with a date.
+  var changeRange = function changeRange(nextStart, nextEnd) {
+    return onChange(nextStart || nextEnd ? {
+      start: nextStart,
+      end: nextEnd
+    } : undefined);
+  };
+  var changePreset = function changePreset(next) {
+    setChosenPreset(next);
+    if ('custom' === next) {
+      // Keep the current range so the rows open on what the preset meant.
+      return;
+    }
+    if ('' === next) {
+      onChange(undefined);
+      return;
+    }
+    changeRange({
+      type: 'relative',
+      days: -Number(next)
+    }, {
+      type: 'relative',
+      days: 0
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "newspack-settings__date-range-preset",
+      children: /*#__PURE__*/_jsx(SelectControl
+      // The criterion's own name is the visible heading of the section
+      // this renders into, so a visible label here would just repeat it —
+      // but the heading is a bare span with no label association, so the
+      // consumer-passed name is what keeps several date criteria's preset
+      // selectors distinguishable to a screen reader.
+      , {
+        label: label || __('Date range', 'newspack-plugin'),
+        hideLabelFromVision: true,
+        __next40pxDefaultSize: true,
+        "data-testid": "date-range-preset",
+        value: preset,
+        options: PRESETS,
+        onChange: changePreset
+      })
+    }), 'custom' === preset && /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(DateRangeBound, {
+        label: __('From', 'newspack-plugin'),
+        testId: "date-range-start-value",
+        bound: start,
+        onChange: function onChange(nextStart) {
+          return changeRange(nextStart, end);
+        }
+      }), /*#__PURE__*/_jsx(DateRangeBound, {
+        label: __('To', 'newspack-plugin'),
+        testId: "date-range-end-value",
+        bound: end,
+        onChange: function onChange(nextEnd) {
+          return changeRange(start, nextEnd);
+        }
+      })]
+    })]
+  }));
+};
+export default DateRangeSetting;

package/dist/esm/settings/SettingsSection.js

@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
+
 /**
  * Internal dependencies.
  */
-import { Grid, InfoButton } from '../';
+import Grid from '../grid';
+import InfoButton from '../info-button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var SettingSection = function SettingSection(_ref) {
   var title = _ref.title,
@@ -11,12 +18,18 @@ var SettingSection = function SettingSection(_ref) {
     columns: 1,
     gutter: 8,
     className: "newspack-settings__section",
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      align: "flex-start",
+      gap: "xs",
       className: "newspack-settings__section__title",
       children: [/*#__PURE__*/_jsx("span", {
         children: title
       }), description && /*#__PURE__*/_jsx(InfoButton, {
-        text: description
+        description: description,
+        triggerLabel: typeof title === 'string' ? sprintf(
+        // translators: %s is the name of the setting being explained.
+        __('More information about %s', 'newspack-plugin'), title) : __('More information', 'newspack-plugin')
       })]
     }), /*#__PURE__*/_jsx("div", {
       className: "newspack-settings__section__content",

package/dist/esm/settings/SettingsSection.test.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import SettingsSection from './SettingsSection';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DESCRIPTION = 'Number of articles read in the last 30 day period.';
+describe('SettingsSection', function () {
+  it('reveals the description from the info trigger', function () {
+    render(/*#__PURE__*/_jsx(SettingsSection, {
+      title: "Articles read",
+      description: DESCRIPTION,
+      children: /*#__PURE__*/_jsx("input", {})
+    }));
+    expect(screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', {
+      name: 'More information about Articles read'
+    }));
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+  });
+  it('falls back to a plain trigger name when the title is not a string', function () {
+    render(/*#__PURE__*/_jsx(SettingsSection, {
+      title: /*#__PURE__*/_jsx("em", {
+        children: "Articles read"
+      }),
+      description: DESCRIPTION,
+      children: /*#__PURE__*/_jsx("input", {})
+    }));
+    expect(screen.getByRole('button', {
+      name: 'More information'
+    })).toBeInTheDocument();
+  });
+  it('renders no info trigger without a description', function () {
+    render(/*#__PURE__*/_jsx(SettingsSection, {
+      title: "Articles read",
+      children: /*#__PURE__*/_jsx("input", {})
+    }));
+    expect(screen.getByText('Articles read')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/dist/esm/settings/index.js

@@ -1,9 +1,11 @@
 import SettingsCard from './SettingsCard';
 import SettingsSection from './SettingsSection';
 import MinMaxSetting from './MinMaxSetting';
+import DateRangeSetting from './DateRangeSetting';
 import './style.scss';
 export default {
   SettingsCard: SettingsCard,
   SettingsSection: SettingsSection,
-  MinMaxSetting: MinMaxSetting
+  MinMaxSetting: MinMaxSetting,
+  DateRangeSetting: DateRangeSetting
 };

package/dist/esm/settings/style.scss

@@ -1,3 +1,5 @@
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-settings {
 	&__card {
 		&.newspack-card.newspack-action-card {
@@ -28,17 +30,18 @@
 
 		.newspack-settings__section {
 			&__title {
-				align-items: center;
-				display: flex;
-				margin: 0;
-
 				span {
-					line-height: 24px;
+					line-height: wp-vars.$font-line-height-small;
+				}
+
+				.newspack-info-button {
+					margin-block: calc((#{wp-vars.$font-line-height-small} - #{wp-vars.$button-size-small}) / 2);
 				}
 			}
 			&__content {
 				> div,
-				.newspack-settings__min-max {
+				.newspack-settings__min-max,
+				.newspack-settings__date-range-bound {
 					margin: 0;
 					display: flex;
 					align-items: center;
@@ -49,7 +52,19 @@
 					}
 				}
 				.newspack-autocomplete-tokenfield,
-				.newspack-settings__min-max {
+				.newspack-settings__min-max,
+				.newspack-settings__date-range-bound {
+					width: 100%;
+				}
+				.newspack-settings__date-range-bound {
+					// Overrides the `center` above, which has to be beaten at this
+					// nesting level. The select carries the visible From/To label and
+					// the value input's is hidden, so the two controls differ in
+					// overall height; centering floats the input up against the label,
+					// while bottom-aligning lines the two boxes up with each other.
+					align-items: flex-end;
+				}
+				.newspack-settings__date-range-preset {
 					width: 100%;
 				}
 				.newspack-autocomplete-tokenfield {
@@ -90,6 +105,24 @@
 				margin-top: 16px !important;
 			}
 		}
+		.newspack-settings__date-range-preset + .newspack-settings__date-range-bound {
+			margin-top: 16px !important;
+		}
+		.newspack-settings__date-range-bound {
+			gap: 8px;
+
+			.newspack-select-control {
+				flex: 0 0 auto;
+			}
+
+			.newspack-text-control {
+				flex: 1 1 auto;
+			}
+
+			+ .newspack-settings__date-range-bound {
+				margin-top: 16px !important;
+			}
+		}
 	}
 
 	&__no-border {

package/dist/esm/stat-card/body.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+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 { forwardRef } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useStatCardContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Body = forwardRef(function Body(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  useStatCardContext();
+  return /*#__PURE__*/_jsx(Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "column",
+    gap: "xs",
+    className: classnames('newspack-stat-card__body', className)
+  }, props), {}, {
+    children: children
+  }));
+});
+export default Body;

package/dist/esm/stat-card/constants.js

@@ -0,0 +1,5 @@
+/**
+ * Stands in for a figure that does not exist, rather than a zero that does.
+ * Exported so tables can show the same glyph as the cards above them.
+ */
+export var STAT_CARD_NULL_GLYPH = '—';

package/dist/esm/stat-card/context.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies.
+ */
+import { createContext, useContext, useEffect } from '@wordpress/element';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+
+var ORPHAN_MESSAGE = 'StatCard subcomponents must be rendered inside StatCard.Root.';
+
+// Resolved per call rather than once at module load, so a locale switched after
+// the bundle evaluates still reaches the defaults. A blank override is a missing
+// one: the glyph and the arrow must never be left announcing nothing.
+export var resolveStatCardLabels = function resolveStatCardLabels(labels) {
+  var _labels$notApplicable, _labels$up, _labels$down;
+  return {
+    notApplicable: (labels === null || labels === void 0 || (_labels$notApplicable = labels.notApplicable) === null || _labels$notApplicable === void 0 ? void 0 : _labels$notApplicable.trim()) || _x('Not applicable', 'a statistic with no number to show', 'newspack-plugin'),
+    up: (labels === null || labels === void 0 || (_labels$up = labels.up) === null || _labels$up === void 0 ? void 0 : _labels$up.trim()) || _x('Up', 'a statistic that has increased', 'newspack-plugin'),
+    down: (labels === null || labels === void 0 || (_labels$down = labels.down) === null || _labels$down === void 0 ? void 0 : _labels$down.trim()) || _x('Down', 'a statistic that has decreased', 'newspack-plugin')
+  };
+};
+export var StatCardContext = createContext(null);
+export var useStatCardContext = function useStatCardContext() {
+  var context = useContext(StatCardContext);
+  var isOrphan = !context;
+  useEffect(function () {
+    if (!isOrphan) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(ORPHAN_MESSAGE);
+  }, [isOrphan]);
+  if (!context) {
+    // A loose slot sizes its figure against the wrong container, which is
+    // cosmetic. Nothing above these cards catches an error, so throwing in
+    // production would blank an admin screen over it.
+    if ('production' !== process.env.NODE_ENV) {
+      throw new Error(ORPHAN_MESSAGE);
+    }
+    return {
+      heading: 3,
+      labels: resolveStatCardLabels()
+    };
+  }
+  return context;
+};

package/dist/esm/stat-card/delta.js

@@ -0,0 +1,86 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["direction", "tone", "directionLabel", "label", "className", "children"];
+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 { forwardRef, useEffect } from '@wordpress/element';
+import { VisuallyHidden } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useStatCardContext } from './context';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+var glyphs = {
+  up: '↑',
+  down: '↓'
+};
+var tones = ['positive', 'negative', 'neutral'];
+var Delta = forwardRef(function Delta(_ref, ref) {
+  var direction = _ref.direction,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
+    directionLabel = _ref.directionLabel,
+    label = _ref.label,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStatCardContext = useStatCardContext(),
+    labels = _useStatCardContext.labels;
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV) {
+      return;
+    }
+    if (!glyphs[direction]) {
+      // eslint-disable-next-line no-console
+      console.warn("StatCard.Delta: unknown direction \"".concat(direction, "\". Use one of ").concat(Object.keys(glyphs).join(', '), "."));
+    }
+    if (!tones.includes(tone)) {
+      // eslint-disable-next-line no-console
+      console.warn("StatCard.Delta: unknown tone \"".concat(tone, "\", falling back to neutral. Use one of ").concat(tones.join(', '), "."));
+    }
+  }, [direction, tone]);
+  var directions = {
+    up: labels.up,
+    down: labels.down
+  };
+  var glyph = glyphs[direction];
+  // Trimmed, and `||` not `??`: a blank label is a missing one. The fallback
+  // is keyed on the arrow's own direction, so an unrecognised one goes
+  // unspoken rather than announced as its opposite; words the caller wrote
+  // are honoured either way.
+  var named = label === null || label === void 0 ? void 0 : label.trim();
+  var spoken = (directionLabel === null || directionLabel === void 0 ? void 0 : directionLabel.trim()) || directions[direction];
+  var classes = classnames('newspack-stat-card__delta', 'neutral' !== tone && tones.includes(tone) && "newspack-stat-card__delta--".concat(tone), className);
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    ref: ref,
+    className: classes
+  }, props), {}, {
+    children: named ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("span", {
+        "aria-hidden": "true",
+        children: [glyph, children]
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
+        render: /*#__PURE__*/_jsx("span", {}),
+        children: named
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [glyph && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: glyph
+      }), spoken && /*#__PURE__*/_jsx(VisuallyHidden, {
+        render: /*#__PURE__*/_jsx("span", {}),
+        children: "".concat(spoken, " ")
+      }), children]
+    })
+  }));
+});
+export default Delta;