@automattic/jetpack-components 5.0.1 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [6.0.0] - 2026-10-26
+### Added
+- AdminPage: Add an ariaLabel prop that names the page region when the header shows breadcrumbs instead of a title. [#54055]
+- AdminPage: Add a page action button that shows only its icon on screens 480px wide or narrower. [#53921]
+- JetpackFooter: Add an entry without the stylesheet, and export the stylesheet on its own, so script-module builds can bundle the footer. [#53971]
+- Support React 19. [#53882]
+
+### Changed
+- TermsOfService: Render with Text from @wordpress/ui. The `variant` prop now takes a @wordpress/ui Text variant, and the legacy Text spacing and `component` props are removed. [#53892]
+- Update package dependencies. [#53951]
+
+### Removed
+- Remove the `NumberControl` component. Use `InputControl` from `@wordpress/ui` instead. [#54046]
+
+### Fixed
+- AdminPage: Stop clearing the shared REST API nonce and root when a page doesn't pass them. [#53397]
+
 ## [5.0.1] - 2026-10-20
 ### Changed
 - Internal updates.
@@ -2019,6 +2036,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[6.0.0]: https://github.com/Automattic/jetpack-components/compare/5.0.1...6.0.0
 [5.0.1]: https://github.com/Automattic/jetpack-components/compare/5.0.0...5.0.1
 [5.0.0]: https://github.com/Automattic/jetpack-components/compare/4.0.4...5.0.0
 [4.0.4]: https://github.com/Automattic/jetpack-components/compare/4.0.3...4.0.4

package/build/components/admin-page/index.d.ts

@@ -10,3 +10,4 @@ import type { FC } from 'react';
  */
 declare const AdminPage: FC<AdminPageProps>;
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.tsx';

package/build/components/admin-page/index.js

@@ -17,10 +17,15 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, globalControls, breadcrumbs, tabs, showBottomBorder = true, unwrapped = false, }) => {
+const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, globalControls, breadcrumbs, ariaLabel, tabs, showBottomBorder = true, unwrapped = false, }) => {
+    // Only set what was passed: the client is shared, so an empty default would wipe what the page set.
     useEffect(() => {
-        restApi.setApiRoot(apiRoot);
-        restApi.setApiNonce(apiNonce);
+        if (apiRoot) {
+            restApi.setApiRoot(apiRoot);
+        }
+        if (apiNonce) {
+            restApi.setApiNonce(apiNonce);
+        }
     }, [apiRoot, apiNonce]);
     // `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
     // shared SCSS mixins (notably `jetpack-admin-page-layout` in
@@ -44,7 +49,7 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
     }, []);
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
     if (showHeader && (title || breadcrumbs)) {
-        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, subTitle: subTitle, actions: globalControls ? (_jsxs(_Fragment, { children: [actions, actions && (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: styles['global-controls-separator'] })), globalControls] })) : (actions), showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, ariaLabel: ariaLabel, subTitle: subTitle, actions: globalControls ? (_jsxs(_Fragment, { children: [actions, actions && (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: styles['global-controls-separator'] })), globalControls] })) : (actions), showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // Legacy path: no title provided, render the classic header.
     return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
@@ -52,3 +57,4 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
                             role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }));
 };
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.js';

package/build/components/admin-page/page-action-button.d.ts

@@ -0,0 +1,5 @@
+import { IconButton } from '@wordpress/ui';
+import type { ComponentProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+type PageActionButtonProps = ComponentProps<typeof IconButton>;
+declare const ForwardedPageActionButton: ForwardRefExoticComponent<PageActionButtonProps & RefAttributes<HTMLButtonElement>>;
+export default ForwardedPageActionButton;

package/build/components/admin-page/page-action-button.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { Button, IconButton } from '@wordpress/ui';
+import { forwardRef, useCallback, useRef } from 'react';
+/**
+ * A page action for `AdminPage`'s `actions`: a labelled button, or an icon button on narrow screens.
+ *
+ * The label stays the button's accessible name, and becomes its tooltip when only the icon shows.
+ *
+ * @param props            - Any `Button` prop, passed to whichever button renders, plus the ones below.
+ * @param props.label      - The button's text, or its tooltip when only the icon shows.
+ * @param props.icon       - The icon shown on narrow screens.
+ * @param props.shortcut   - Shown in the icon button's tooltip, so on narrow screens only.
+ * @param props.positioner - Positions the icon button's tooltip, so on narrow screens only.
+ * @param ref              - Forwarded to the rendered button.
+ * @return The button.
+ */
+function PageActionButton({ label, icon, shortcut, positioner, ...buttonProps }, ref) {
+    // On phones, page actions show only their icon so the header's title keeps its room.
+    const isNarrowScreen = useViewportMatch('mobile', '<');
+    // Crossing the breakpoint swaps in a new button: move focus to it if the old one had it.
+    const button = useRef(null);
+    const hadFocus = useRef(false);
+    const keepFocus = useCallback((node) => {
+        const previous = button.current;
+        if (node) {
+            if (hadFocus.current) {
+                node.focus();
+            }
+            hadFocus.current = false;
+        }
+        else {
+            hadFocus.current = previous?.ownerDocument.activeElement === previous;
+        }
+        button.current = node;
+    }, []);
+    const mergedRef = useMergeRefs([ref, keepFocus]);
+    if (isNarrowScreen) {
+        return (_jsx(IconButton, { ref: mergedRef, label: label, icon: icon, shortcut: shortcut, positioner: positioner, ...buttonProps }));
+    }
+    return (_jsx(Button, { ref: mergedRef, ...buttonProps, children: label }));
+}
+const ForwardedPageActionButton = forwardRef(PageActionButton);
+export default ForwardedPageActionButton;

package/build/components/admin-page/types.d.ts

@@ -41,6 +41,10 @@ export type AdminPageProps = {
      * Breadcrumb navigation displayed next to the title in the unified header.
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Accessible name of the page region. Defaults to `title`, so pass it when the header shows `breadcrumbs` instead.
+     */
+    ariaLabel?: string;
     /**
      * Tab navigation displayed below the title/tagline in the unified header.
      */

package/build/components/boost-score-bar/index.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __ } from '@wordpress/i18n';
 import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
 import './style.scss';
+const TIER_FILLS = {
+    good: 'fill-good',
+    medium: 'fill-mediocre',
+    poor: 'fill-bad',
+};
 export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
     if (!active) {
         return null;
@@ -22,13 +28,7 @@ export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevSc
         if (isLoading && !score) {
             return 'fill-loading';
         }
-        if (score > 70) {
-            return 'fill-good';
-        }
-        if (score > 50) {
-            return 'fill-mediocre';
-        }
-        return 'fill-bad';
+        return TIER_FILLS[getScoreTier(score)];
     };
     return (_jsxs("div", { className: clsx('jb-score-bar', `jb-score-bar--${scoreBarType}`), children: [_jsxs("div", { className: "jb-score-bar__label", children: [getIcon(), _jsx("div", { children: scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel })] }), _jsx("div", { className: "jb-score-bar__bounds", children: _jsxs("div", { className: clsx('jb-score-bar__filler', getFillColor()), style: { width: `${score}%` }, children: [isLoading ? (_jsx("div", { className: "jb-score-bar__loading", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 128 128", children: _jsxs("g", { children: [_jsx("path", { d: "M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64", calcMode: "discrete", dur: "1080ms", repeatCount: "indefinite" })] }) }) })) : (_jsx("div", { className: "jb-score-bar__score", children: score })), showPrevScores && !!prevScore && prevScore < score && (_jsxs("div", { className: "jb-score-bar__no_boost_score", style: { left: `min(${prevScoreOffset}%, calc( 100% - var(--clearance-space))` }, children: [prevScore, noBoostScoreTooltip && (_jsx("div", { role: "tooltip", className: "jb-score-bar__no_boost_score_tooltip", children: noBoostScoreTooltip }))] }))] }) })] }));
 };

package/build/components/jetpack-footer/index.d.ts

@@ -1,19 +1,2 @@
 import './style.scss';
-import type { JetpackFooterProps } from './types.ts';
-import type { FC } from 'react';
-declare global {
-    interface Window {
-        JetpackNetworkAdminData?: {
-            sitesUrl: string;
-            settingsUrl: string;
-        };
-    }
-}
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-declare const JetpackFooter: FC<JetpackFooterProps>;
-export default JetpackFooter;
+export { default } from './jetpack-footer.tsx';

package/build/components/jetpack-footer/index.js

@@ -1,40 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
-import { __ } from '@wordpress/i18n';
-import { Stack, Text, Link } from '@wordpress/ui';
-import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.js';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.js';
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-const JetpackFooter = ({ className, menu, ...otherProps }) => {
-    let items = [];
-    if (getScriptData()?.myJetpack?.isAvailable === true &&
-        !isWpcomPlatformSite() &&
-        !window?.JetpackNetworkAdminData) {
-        items = [
-            {
-                label: __('Features', 'jetpack-components'),
-                href: getAdminUrl('admin.php?page=my-jetpack#/features'),
-            },
-            {
-                label: __('Help', 'jetpack-components'),
-                href: getAdminUrl('admin.php?page=my-jetpack#/help'),
-            },
-            ...items,
-        ];
-    }
-    if (menu) {
-        items = [...items, ...menu];
-    }
-    return (_jsxs(Stack, { render: _jsx("footer", {}), className: clsx('jetpack-footer', className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", direction: "row", justify: "flex-start", align: "center", wrap: "wrap", gap: "xl", ...otherProps, children: [_jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [_jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
-                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
-                }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })] }));
-};
-export default JetpackFooter;
+export { default } from './jetpack-footer.js';

package/build/components/jetpack-footer/jetpack-footer.d.ts

@@ -0,0 +1,18 @@
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
+declare global {
+    interface Window {
+        JetpackNetworkAdminData?: {
+            sitesUrl: string;
+            settingsUrl: string;
+        };
+    }
+}
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {ReactNode} JetpackFooter component.
+ */
+declare const JetpackFooter: FC<JetpackFooterProps>;
+export default JetpackFooter;

package/build/components/jetpack-footer/jetpack-footer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
+import { __ } from '@wordpress/i18n';
+import { Stack, Text, Link } from '@wordpress/ui';
+import clsx from 'clsx';
+import getRedirectUrl from '../../tools/jp-redirect/index.js';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {ReactNode} JetpackFooter component.
+ */
+const JetpackFooter = ({ className, menu, ...otherProps }) => {
+    let items = [];
+    if (getScriptData()?.myJetpack?.isAvailable === true &&
+        !isWpcomPlatformSite() &&
+        !window?.JetpackNetworkAdminData) {
+        items = [
+            {
+                label: __('Features', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/features'),
+            },
+            {
+                label: __('Help', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/help'),
+            },
+            ...items,
+        ];
+    }
+    if (menu) {
+        items = [...items, ...menu];
+    }
+    return (_jsxs(Stack, { render: _jsx("footer", {}), className: clsx('jetpack-footer', className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", direction: "row", justify: "flex-start", align: "center", wrap: "wrap", gap: "xl", ...otherProps, children: [_jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [_jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
+                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
+                }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })] }));
+};
+export default JetpackFooter;

package/build/components/terms-of-service/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 // Deep import rather than the package barrel (`../../index.ts`): the barrel
 // pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
 // wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
 // that deep-imports pricing-table (which renders TermsOfService).
 import getRedirectUrl from '../../tools/jp-redirect/index.js';
-import Text from '../text/index.js';
 import './styles.scss';
-const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
+const TermsOfService = ({ className, variant = 'body-lg', multipleButtons, agreeButtonLabel, isTextOnly, }) => {
     const getTOSContent = () => {
         if (isTextOnly) {
             return _jsx(TermsOfServiceTextOnly, {});
@@ -20,7 +19,7 @@ const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOn
         }
         return _jsx(SingleButtonText, { agreeButtonLabel: agreeButtonLabel });
     };
-    return (_jsx(Text, { className: clsx(className, 'terms-of-service'), ...textProps, children: getTOSContent() }));
+    return (_jsx(Text, { variant: variant, render: _jsx("p", {}), className: clsx(className, 'terms-of-service'), children: getTOSContent() }));
 };
 const MultipleButtonsText = ({ multipleButtonsLabels }) => {
     if (Array.isArray(multipleButtonsLabels) && multipleButtonsLabels.length > 1) {

package/build/components/terms-of-service/styles.scss

@@ -1,6 +1,9 @@
-.terms-of-service {
-	font-size: var(--font-body);
+// No specificity, so any consumer class sets the colour without a tie.
+:where(.terms-of-service) {
 	color: var(--jp-black);
+}
+
+.terms-of-service {
 
 	.terms-of-service__link {
 		white-space: nowrap;

package/build/components/terms-of-service/types.d.ts

@@ -1,4 +1,5 @@
-import { TextProps } from '../text/types.ts';
+import type { Text } from '@wordpress/ui';
+import type { ComponentProps } from 'react';
 type MultipleButtonsProps = {
     /**
      * Indicates whether there are multiple buttons present that would imply agreement if clicked.
@@ -29,5 +30,14 @@ type OnlyTextProps = {
     multipleButtons?: undefined;
     agreeButtonLabel?: undefined;
 };
-export type TermsOfServiceProps = Pick<TextProps, 'variant' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'className' | 'component'> & (MultipleButtonsProps | SingleButtonProps | OnlyTextProps);
+export type TermsOfServiceProps = {
+    /**
+     * HTML class.
+     */
+    className?: string;
+    /**
+     * The `@wordpress/ui` Text variant. Defaults to `body-lg`.
+     */
+    variant?: ComponentProps<typeof Text>['variant'];
+} & (MultipleButtonsProps | SingleButtonProps | OnlyTextProps);
 export {};

package/build/index.d.ts

@@ -17,6 +17,7 @@ export { default as PricingCard } from './components/pricing-card/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';
+export { default as PageActionButton } from './components/admin-page/page-action-button.tsx';
 export { default as DecorativeCard } from './components/decorative-card/index.tsx';
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
@@ -26,7 +27,6 @@ export { default as JitmSlot } from './components/jitm-slot/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
-export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/build/index.js

@@ -29,6 +29,7 @@ export { default as PricingCard } from './components/pricing-card/index.js';
 export { default as AdminSection } from './components/admin-section/basic/index.js';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
 export { default as AdminPage } from './components/admin-page/index.js';
+export { default as PageActionButton } from './components/admin-page/page-action-button.js';
 export { default as DecorativeCard } from './components/decorative-card/index.js';
 export { default as Col } from './components/layout/col/index.js';
 export { default as Testimonials } from './components/testimonials/index.js';
@@ -38,7 +39,6 @@ export { default as JitmSlot } from './components/jitm-slot/index.js';
 export * from './components/icons/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
-export { default as NumberControl } from './components/number-control/index.js';
 export { default as QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';

package/components/admin-page/index.tsx

@@ -36,13 +36,19 @@ const AdminPage: FC< AdminPageProps > = ( {
 	actions,
 	globalControls,
 	breadcrumbs,
+	ariaLabel,
 	tabs,
 	showBottomBorder = true,
 	unwrapped = false,
 } ) => {
+	// Only set what was passed: the client is shared, so an empty default would wipe what the page set.
 	useEffect( () => {
-		restApi.setApiRoot( apiRoot );
-		restApi.setApiNonce( apiNonce );
+		if ( apiRoot ) {
+			restApi.setApiRoot( apiRoot );
+		}
+		if ( apiNonce ) {
+			restApi.setApiNonce( apiNonce );
+		}
 	}, [ apiRoot, apiNonce ] );
 
 	// `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
@@ -80,6 +86,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 					visual={ logo || <JetpackLogo showText={ false } height={ 20 } /> }
 					breadcrumbs={ breadcrumbs }
 					title={ title }
+					ariaLabel={ ariaLabel }
 					subTitle={ subTitle }
 					actions={
 						globalControls ? (
@@ -146,3 +153,4 @@ const AdminPage: FC< AdminPageProps > = ( {
 };
 
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.tsx';

package/components/admin-page/page-action-button.tsx

@@ -0,0 +1,69 @@
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { Button, IconButton } from '@wordpress/ui';
+import { forwardRef, useCallback, useRef } from 'react';
+import type { ComponentProps, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from 'react';
+
+type PageActionButtonProps = ComponentProps< typeof IconButton >;
+
+/**
+ * A page action for `AdminPage`'s `actions`: a labelled button, or an icon button on narrow screens.
+ *
+ * The label stays the button's accessible name, and becomes its tooltip when only the icon shows.
+ *
+ * @param props            - Any `Button` prop, passed to whichever button renders, plus the ones below.
+ * @param props.label      - The button's text, or its tooltip when only the icon shows.
+ * @param props.icon       - The icon shown on narrow screens.
+ * @param props.shortcut   - Shown in the icon button's tooltip, so on narrow screens only.
+ * @param props.positioner - Positions the icon button's tooltip, so on narrow screens only.
+ * @param ref              - Forwarded to the rendered button.
+ * @return The button.
+ */
+function PageActionButton(
+	{ label, icon, shortcut, positioner, ...buttonProps }: PageActionButtonProps,
+	ref: ForwardedRef< HTMLButtonElement >
+) {
+	// On phones, page actions show only their icon so the header's title keeps its room.
+	const isNarrowScreen = useViewportMatch( 'mobile', '<' );
+
+	// Crossing the breakpoint swaps in a new button: move focus to it if the old one had it.
+	const button = useRef< HTMLButtonElement | null >( null );
+	const hadFocus = useRef( false );
+	const keepFocus = useCallback( ( node: HTMLButtonElement | null ) => {
+		const previous = button.current;
+		if ( node ) {
+			if ( hadFocus.current ) {
+				node.focus();
+			}
+			hadFocus.current = false;
+		} else {
+			hadFocus.current = previous?.ownerDocument.activeElement === previous;
+		}
+		button.current = node;
+	}, [] );
+	const mergedRef = useMergeRefs( [ ref, keepFocus ] );
+
+	if ( isNarrowScreen ) {
+		return (
+			<IconButton
+				ref={ mergedRef }
+				label={ label }
+				icon={ icon }
+				shortcut={ shortcut }
+				positioner={ positioner }
+				{ ...buttonProps }
+			/>
+		);
+	}
+
+	return (
+		<Button ref={ mergedRef } { ...buttonProps }>
+			{ label }
+		</Button>
+	);
+}
+
+const ForwardedPageActionButton: ForwardRefExoticComponent<
+	PageActionButtonProps & RefAttributes< HTMLButtonElement >
+> = forwardRef( PageActionButton );
+
+export default ForwardedPageActionButton;

package/components/admin-page/types.ts

@@ -51,6 +51,11 @@ export type AdminPageProps = {
 	 */
 	breadcrumbs?: ReactNode;
 
+	/**
+	 * Accessible name of the page region. Defaults to `title`, so pass it when the header shows `breadcrumbs` instead.
+	 */
+	ariaLabel?: string;
+
 	/**
 	 * Tab navigation displayed below the title/tagline in the unified header.
 	 */

package/components/boost-score-bar/index.tsx

@@ -1,11 +1,19 @@
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __ } from '@wordpress/i18n';
 import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
 import type { BoostScoreBarProps } from './types.ts';
+import type { ScoreTier } from '@automattic/jetpack-boost-score-api';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';
 
+const TIER_FILLS: Record< ScoreTier, string > = {
+	good: 'fill-good',
+	medium: 'fill-mediocre',
+	poor: 'fill-bad',
+};
+
 export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 	score,
 	isLoading,
@@ -38,15 +46,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 			return 'fill-loading';
 		}
 
-		if ( score > 70 ) {
-			return 'fill-good';
-		}
-
-		if ( score > 50 ) {
-			return 'fill-mediocre';
-		}
-
-		return 'fill-bad';
+		return TIER_FILLS[ getScoreTier( score ) ];
 	};
 
 	return (

package/components/jetpack-footer/README.md

@@ -29,6 +29,15 @@ const menu = [
 <JetpackFooter menu={ menu } className="my-footer" />
 ```
 
+### Script-module builds
+
+Builds that can't bundle Sass imported from a dependency, such as wp-build script modules, can import the component and its stylesheet separately. Use the two together, since `unstyled` ships no styles:
+
+```js
+import '@automattic/jetpack-components/jetpack-footer/style.scss';
+import JetpackFooter from '@automattic/jetpack-components/jetpack-footer/unstyled';
+```
+
 ## Props
 
 - `className`: String - (default: `jetpack-footer`) the additional class name set on the element.

package/components/jetpack-footer/index.tsx

@@ -1,114 +1,3 @@
-import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
-import { __ } from '@wordpress/i18n';
-import { Stack, Text, Link } from '@wordpress/ui';
-import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.ts';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.tsx';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
-import type { FC } from 'react';
 
-declare global {
-	interface Window {
-		JetpackNetworkAdminData?: {
-			sitesUrl: string;
-			settingsUrl: string;
-		};
-	}
-}
-
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
-	let items: JetpackFooterMenuItem[] = [];
-
-	if (
-		getScriptData()?.myJetpack?.isAvailable === true &&
-		! isWpcomPlatformSite() &&
-		! window?.JetpackNetworkAdminData
-	) {
-		items = [
-			{
-				label: __( 'Features', 'jetpack-components' ),
-				href: getAdminUrl( 'admin.php?page=my-jetpack#/features' ),
-			},
-			{
-				label: __( 'Help', 'jetpack-components' ),
-				href: getAdminUrl( 'admin.php?page=my-jetpack#/help' ),
-			},
-			...items,
-		];
-	}
-
-	if ( menu ) {
-		items = [ ...items, ...menu ];
-	}
-
-	return (
-		<Stack
-			render={ <footer /> }
-			className={ clsx( 'jetpack-footer', className ) }
-			aria-label={ __( 'Jetpack', 'jetpack-components' ) }
-			role="contentinfo"
-			direction="row"
-			justify="flex-start"
-			align="center"
-			wrap="wrap"
-			gap="xl"
-			{ ...otherProps }
-		>
-			<Stack className="jetpack-footer__logo" direction="row" gap="sm" align="center">
-				<JetpackLogo showText={ false } height={ 16 } aria-hidden="true" />
-				<Text variant="body-md">Jetpack</Text>
-			</Stack>
-			<Stack render={ <ul /> } direction="row" gap="lg" wrap="wrap">
-				{ items.map( item => {
-					return (
-						<li key={ item.label }>
-							<Text
-								variant="body-md"
-								className="jetpack-footer__menu-item"
-								render={
-									! item.href ? (
-										<Link
-											render={ <span /> }
-											tabIndex={ 0 }
-											title={ item.title || '' }
-											onClick={ item.onClick || undefined }
-											onKeyDown={ item.onKeyDown || undefined }
-											role="button"
-										/>
-									) : (
-										<Link
-											href={ item.href }
-											title={ item.title || '' }
-											onClick={ item.onClick || undefined }
-											onKeyDown={ item.onKeyDown || undefined }
-										/>
-									)
-								}
-							>
-								{ item.label }
-							</Text>
-						</li>
-					);
-				} ) }
-			</Stack>
-			<a
-				className="jetpack-footer__a8c"
-				href={ getRedirectUrl( 'a8c-about' ) }
-				rel="noopener noreferrer"
-				target="_blank"
-			>
-				<AutomatticBylineLogo height={ 8 } />
-			</a>
-		</Stack>
-	);
-};
-
-export default JetpackFooter;
+export { default } from './jetpack-footer.tsx';

package/components/jetpack-footer/jetpack-footer.tsx

@@ -0,0 +1,113 @@
+import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
+import { __ } from '@wordpress/i18n';
+import { Stack, Text, Link } from '@wordpress/ui';
+import clsx from 'clsx';
+import getRedirectUrl from '../../tools/jp-redirect/index.ts';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
+import type { FC } from 'react';
+
+declare global {
+	interface Window {
+		JetpackNetworkAdminData?: {
+			sitesUrl: string;
+			settingsUrl: string;
+		};
+	}
+}
+
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {ReactNode} JetpackFooter component.
+ */
+const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
+	let items: JetpackFooterMenuItem[] = [];
+
+	if (
+		getScriptData()?.myJetpack?.isAvailable === true &&
+		! isWpcomPlatformSite() &&
+		! window?.JetpackNetworkAdminData
+	) {
+		items = [
+			{
+				label: __( 'Features', 'jetpack-components' ),
+				href: getAdminUrl( 'admin.php?page=my-jetpack#/features' ),
+			},
+			{
+				label: __( 'Help', 'jetpack-components' ),
+				href: getAdminUrl( 'admin.php?page=my-jetpack#/help' ),
+			},
+			...items,
+		];
+	}
+
+	if ( menu ) {
+		items = [ ...items, ...menu ];
+	}
+
+	return (
+		<Stack
+			render={ <footer /> }
+			className={ clsx( 'jetpack-footer', className ) }
+			aria-label={ __( 'Jetpack', 'jetpack-components' ) }
+			role="contentinfo"
+			direction="row"
+			justify="flex-start"
+			align="center"
+			wrap="wrap"
+			gap="xl"
+			{ ...otherProps }
+		>
+			<Stack className="jetpack-footer__logo" direction="row" gap="sm" align="center">
+				<JetpackLogo showText={ false } height={ 16 } aria-hidden="true" />
+				<Text variant="body-md">Jetpack</Text>
+			</Stack>
+			<Stack render={ <ul /> } direction="row" gap="lg" wrap="wrap">
+				{ items.map( item => {
+					return (
+						<li key={ item.label }>
+							<Text
+								variant="body-md"
+								className="jetpack-footer__menu-item"
+								render={
+									! item.href ? (
+										<Link
+											render={ <span /> }
+											tabIndex={ 0 }
+											title={ item.title || '' }
+											onClick={ item.onClick || undefined }
+											onKeyDown={ item.onKeyDown || undefined }
+											role="button"
+										/>
+									) : (
+										<Link
+											href={ item.href }
+											title={ item.title || '' }
+											onClick={ item.onClick || undefined }
+											onKeyDown={ item.onKeyDown || undefined }
+										/>
+									)
+								}
+							>
+								{ item.label }
+							</Text>
+						</li>
+					);
+				} ) }
+			</Stack>
+			<a
+				className="jetpack-footer__a8c"
+				href={ getRedirectUrl( 'a8c-about' ) }
+				rel="noopener noreferrer"
+				target="_blank"
+			>
+				<AutomatticBylineLogo height={ 8 } />
+			</a>
+		</Stack>
+	);
+};
+
+export default JetpackFooter;

package/components/terms-of-service/index.tsx

@@ -1,23 +1,22 @@
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 // Deep import rather than the package barrel (`../../index.ts`): the barrel
 // pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
 // wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
 // that deep-imports pricing-table (which renders TermsOfService).
 import getRedirectUrl from '../../tools/jp-redirect/index.ts';
-import Text from '../text/index.tsx';
 import type { TermsOfServiceProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
 import './styles.scss';
 
 const TermsOfService: FC< TermsOfServiceProps > = ( {
 	className,
+	variant = 'body-lg',
 	multipleButtons,
 	agreeButtonLabel,
 	isTextOnly,
-	...textProps
 } ) => {
 	const getTOSContent = () => {
 		if ( isTextOnly ) {
@@ -30,7 +29,7 @@ const TermsOfService: FC< TermsOfServiceProps > = ( {
 	};
 
 	return (
-		<Text className={ clsx( className, 'terms-of-service' ) } { ...textProps }>
+		<Text variant={ variant } render={ <p /> } className={ clsx( className, 'terms-of-service' ) }>
 			{ getTOSContent() }
 		</Text>
 	);

package/components/terms-of-service/styles.scss

@@ -1,6 +1,9 @@
-.terms-of-service {
-	font-size: var(--font-body);
+// No specificity, so any consumer class sets the colour without a tie.
+:where(.terms-of-service) {
 	color: var(--jp-black);
+}
+
+.terms-of-service {
 
 	.terms-of-service__link {
 		white-space: nowrap;

package/components/terms-of-service/types.ts

@@ -1,4 +1,5 @@
-import { TextProps } from '../text/types.ts';
+import type { Text } from '@wordpress/ui';
+import type { ComponentProps } from 'react';
 
 type MultipleButtonsProps = {
 	/**
@@ -37,24 +38,14 @@ type OnlyTextProps = {
 	agreeButtonLabel?: undefined;
 };
 
-export type TermsOfServiceProps = Pick<
-	TextProps,
-	| 'variant'
-	| 'm'
-	| 'mt'
-	| 'mr'
-	| 'mb'
-	| 'ml'
-	| 'mx'
-	| 'my'
-	| 'p'
-	| 'pt'
-	| 'pr'
-	| 'pb'
-	| 'pl'
-	| 'px'
-	| 'py'
-	| 'className'
-	| 'component'
-> &
-	( MultipleButtonsProps | SingleButtonProps | OnlyTextProps );
+export type TermsOfServiceProps = {
+	/**
+	 * HTML class.
+	 */
+	className?: string;
+
+	/**
+	 * The `@wordpress/ui` Text variant. Defaults to `body-lg`.
+	 */
+	variant?: ComponentProps< typeof Text >[ 'variant' ];
+} & ( MultipleButtonsProps | SingleButtonProps | OnlyTextProps );

package/index.ts

@@ -32,6 +32,7 @@ export { default as PricingCard } from './components/pricing-card/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';
+export { default as PageActionButton } from './components/admin-page/page-action-button.tsx';
 export { default as DecorativeCard } from './components/decorative-card/index.tsx';
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
@@ -41,7 +42,6 @@ export { default as JitmSlot } from './components/jitm-slot/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
-export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "5.0.1",
+	"version": "6.0.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -46,6 +46,11 @@
 			"types": "./build/components/jetpack-footer/index.d.ts",
 			"default": "./build/components/jetpack-footer/index.js"
 		},
+		"./jetpack-footer/style.scss": "./build/components/jetpack-footer/style.scss",
+		"./jetpack-footer/unstyled": {
+			"types": "./build/components/jetpack-footer/jetpack-footer.d.ts",
+			"default": "./build/components/jetpack-footer/jetpack-footer.js"
+		},
 		"./jetpack-logo": {
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
@@ -81,7 +86,7 @@
 	],
 	"dependencies": {
 		"@automattic/jetpack-api": "^2.2.3",
-		"@automattic/jetpack-boost-score-api": "^1.2.3",
+		"@automattic/jetpack-boost-score-api": "^1.3.0",
 		"@automattic/jetpack-script-data": "^0.6.11",
 		"@automattic/number-formatters": "^1.2.12",
 		"@babel/runtime": "^7",
@@ -104,7 +109,7 @@
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.4.1",
+		"social-logos": "^3.4.2",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
@@ -112,27 +117,27 @@
 		"@automattic/jetpack-base-styles": "^1.2.19",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.2",
-		"@storybook/addon-docs": "10.4.6",
-		"@storybook/react": "10.4.6",
+		"@storybook/addon-docs": "10.6.3",
+		"@storybook/react": "10.6.3",
 		"@testing-library/dom": "10.4.2",
 		"@testing-library/react": "16.3.3",
 		"@testing-library/user-event": "14.6.8",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.31",
-		"@types/react-dom": "18.3.7",
+		"@types/react": "19.3.0",
+		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.5.2",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
 		"require-from-string": "2.0.2",
-		"storybook": "10.4.6",
+		"storybook": "10.6.3",
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
 		"webpack": "5.111.1",
 		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	}
 }

package/build/components/number-control/index.d.ts

@@ -1,28 +0,0 @@
-import type { ComponentType, InputHTMLAttributes, ReactNode } from 'react';
-export type NumberControlProps = {
-    /**
-     * Matches common `@wordpress/components` control props without importing their internal types.
-     */
-    label?: ReactNode;
-    help?: ReactNode;
-    className?: string;
-    hideLabelFromVision?: boolean;
-    __nextHasNoMarginBottom?: boolean;
-    /**
-     * TextControl-style signature. (The experimental NumberControl can accept this too.)
-     */
-    onChange: (value: string) => void;
-    value: string | number;
-    __next40pxDefaultSize?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'className' | 'type' | 'children'>;
-/**
- * This uses the experimental NumberControl from the block
- * editor where available, otherwise it falls back to a
- * standard TextControl, limited to numbers.
- * @type {ComponentType<NumberControlProps>}
- *
- * @param {NumberControlProps} props - the NumberControl component props
- * @return {ReactNode} - NumberControl component
- */
-declare const NumberControl: ComponentType<NumberControlProps>;
-export default NumberControl;

package/build/components/number-control/index.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { __experimentalNumberControl as ExperimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-TextControl, } from '@wordpress/components';
-/**
- * This uses the experimental NumberControl from the block
- * editor where available, otherwise it falls back to a
- * standard TextControl, limited to numbers.
- * @type {ComponentType<NumberControlProps>}
- *
- * @param {NumberControlProps} props - the NumberControl component props
- * @return {ReactNode} - NumberControl component
- */
-const NumberControl = ExperimentalNumberControl ||
-    function CustomNumberControl(props) {
-        return (_jsx(TextControl, { type: "number", inputMode: "numeric", ...props, __next40pxDefaultSize: true }));
-    };
-export default NumberControl;

package/components/number-control/index.tsx

@@ -1,45 +0,0 @@
-import {
-	__experimentalNumberControl as ExperimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	TextControl,
-} from '@wordpress/components';
-import type { ComponentType, InputHTMLAttributes, ReactNode } from 'react';
-
-export type NumberControlProps = {
-	/**
-	 * Matches common `@wordpress/components` control props without importing their internal types.
-	 */
-	label?: ReactNode;
-	help?: ReactNode;
-	className?: string;
-	hideLabelFromVision?: boolean;
-	__nextHasNoMarginBottom?: boolean;
-
-	/**
-	 * TextControl-style signature. (The experimental NumberControl can accept this too.)
-	 */
-	onChange: ( value: string ) => void;
-	value: string | number;
-	__next40pxDefaultSize?: boolean;
-} & Omit<
-	InputHTMLAttributes< HTMLInputElement >,
-	'onChange' | 'value' | 'className' | 'type' | 'children'
->;
-
-/**
- * This uses the experimental NumberControl from the block
- * editor where available, otherwise it falls back to a
- * standard TextControl, limited to numbers.
- * @type {ComponentType<NumberControlProps>}
- *
- * @param {NumberControlProps} props - the NumberControl component props
- * @return {ReactNode} - NumberControl component
- */
-const NumberControl: ComponentType< NumberControlProps > =
-	( ExperimentalNumberControl as unknown as ComponentType< NumberControlProps > | undefined ) ||
-	function CustomNumberControl( props: NumberControlProps ) {
-		return (
-			<TextControl type="number" inputMode="numeric" { ...props } __next40pxDefaultSize={ true } />
-		);
-	};
-
-export default NumberControl;