@automattic/jetpack-components 1.4.16 → 1.6.0

package/build/components/text/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, useMemo } from 'react';
-import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from "./constants.js";
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
 import styles from './style.module.scss';
 /**
  * Text component.
@@ -50,4 +50,4 @@ export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
  * @return {ReactElement} - JSX.Element
  */
 export const Title = ({ children, size = 'medium', ...componentProps }) => (_jsx(Text, { variant: `title-${size}`, mb: 1, ...componentProps, children: children }));
-export * from "./constants.js";
+export * from './constants.js';

package/build/components/upsell-banner/index.js

@@ -14,8 +14,13 @@ import './style.scss';
  */
 const UpsellBanner = props => {
     const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;
-    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [
+                        _jsxs("div", { className: "upsell-banner--content-info", children: [
+                                _jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
                                         br: _jsx("br", {}),
-                                    }) })] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })] })] }) }));
+                                    }) })
+                            ] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })
+                    ] })
+            ] }) }));
 };
 export default UpsellBanner;

package/build/components/zendesk-chat/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useCallback } from 'react';
-import { chatKey } from "./constants.js";
+import { chatKey } from './constants.js';
 export const ZendeskChat = ({ jwt_token }) => {
     const authenticateUser = useCallback(() => {
         if (typeof window !== 'undefined' && typeof window.zE === 'function') {

package/build/index.js

@@ -12,69 +12,69 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program; if not, see <https://www.gnu.org/licenses/>.
 */
-export { default as JetpackLogo } from "./components/jetpack-logo/index.js";
-export { default as JetpackSearchLogo } from "./components/jetpack-search-logo/index.js";
-export { default as JetpackProtectLogo } from "./components/jetpack-protect-logo/index.js";
-export { default as JetpackVaultPressBackupLogo } from "./components/jetpack-vaultpress-backup-logo/index.js";
-export { default as JetpackVideoPressLogo } from "./components/jetpack-videopress-logo/index.js";
-export { default as getRedirectUrl } from "./tools/jp-redirect/index.js";
-export { default as getProductCheckoutUrl } from "./tools/get-product-checkout-url/index.js";
-export { isFirstMonthTrial } from "./tools/pricing-utils/index.js";
-export { default as AutomatticBylineLogo } from "./components/automattic-byline-logo/index.js";
-export { default as AutomatticIconLogo } from "./components/automattic-icon-logo/index.js";
-export { default as AutomatticForAgenciesLogo } from "./components/automattic-for-agencies-logo/index.js";
-export { default as JetpackFooter } from "./components/jetpack-footer/index.js";
-export { default as Spinner } from "./components/spinner/index.js";
-export { default as Gridicon } from "./components/gridicon/index.js";
-export { default as IconTooltip } from "./components/icon-tooltip/index.js";
-export { default as ActionButton } from "./components/action-button/index.js";
-export { default as PricingCard } from "./components/pricing-card/index.js";
-export { default as NumberSlider } from "./components/number-slider/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 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";
-export { default as Container } from "./components/layout/container/index.js";
-export { default as useBreakpointMatch } from "./components/layout/use-breakpoint-match/index.js";
-export { default as CopyToClipboard } from "./components/copy-to-clipboard/index.js";
-export * from "./components/icons/index.js";
-export { default as SplitButton } from "./components/split-button/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 ToggleControl } from "./components/toggle-control/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";
-export { default as TermsOfService } from "./components/terms-of-service/index.js";
-export { default as Badge } from "./components/badge/index.js";
-export { default as Chip } from "./components/chip/index.js";
-export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from "./components/pricing-table/index.js";
-export { default as BoostScoreBar } from "./components/boost-score-bar/index.js";
-export { default as BoostScoreGraph } from "./components/boost-score-graph/index.js";
-export { default as ProductPrice } from "./components/product-price/index.js";
-export { default as ProductOffer, IconsCard } from "./components/product-offer/index.js";
-export { default as Dialog } from "./components/dialog/index.js";
-export { default as DotPager } from "./components/dot-pager/index.js";
-export { default as DonutMeter } from "./components/donut-meter/index.js";
-export { default as RecordMeterBar } from "./components/record-meter-bar/index.js";
-export { default as ContextualUpgradeTrigger } from "./components/contextual-upgrade-trigger/index.js";
-export { default as Alert } from "./components/alert/index.js";
-export { default as Notice } from "./components/notice/index.js";
-export { default as Popover } from "./components/popover/index.js";
-export { default as Status } from "./components/status/index.js";
-export { default as IndeterminateProgressBar } from "./components/indeterminate-progress-bar/index.js";
-export { default as ActionPopover } from "./components/action-popover/index.js";
-export { default as ZendeskChat } from "./components/zendesk-chat/index.js";
-export { default as ProgressBar } from "./components/progress-bar/index.js";
-export { default as UpsellBanner } from "./components/upsell-banner/index.js";
-export { getUserLocale, cleanLocale } from "./lib/locale/index.js";
-export { default as RadioControl } from "./components/radio-control/index.js";
-export { default as StatCard } from "./components/stat-card/index.js";
-export { default as DiffViewer } from "./components/diff-viewer/index.js";
-export { default as MarkedLines } from "./components/marked-lines/index.js";
-export { default as DetailsViewer } from "./components/details-viewer/index.js";
-export * from "./components/global-notices/index.js";
-export * from "./components/navigator-modal/index.js";
+export { default as JetpackLogo } from './components/jetpack-logo/index.js';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.js';
+export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.js';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.js';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.js';
+export { default as getRedirectUrl } from './tools/jp-redirect/index.js';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.js';
+export { isFirstMonthTrial } from './tools/pricing-utils/index.js';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo/index.js';
+export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
+export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
+export { default as JetpackFooter } from './components/jetpack-footer/index.js';
+export { default as Spinner } from './components/spinner/index.js';
+export { default as Gridicon } from './components/gridicon/index.js';
+export { default as IconTooltip } from './components/icon-tooltip/index.js';
+export { default as ActionButton } from './components/action-button/index.js';
+export { default as PricingCard } from './components/pricing-card/index.js';
+export { default as NumberSlider } from './components/number-slider/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 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';
+export { default as Container } from './components/layout/container/index.js';
+export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
+export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
+export * from './components/icons/index.js';
+export { default as SplitButton } from './components/split-button/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 ToggleControl } from './components/toggle-control/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';
+export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
+export { default as Chip } from './components/chip/index.js';
+export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
+export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
+export { default as BoostScoreGraph } from './components/boost-score-graph/index.js';
+export { default as ProductPrice } from './components/product-price/index.js';
+export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
+export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
+export { default as DonutMeter } from './components/donut-meter/index.js';
+export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';
+export { default as Alert } from './components/alert/index.js';
+export { default as Notice } from './components/notice/index.js';
+export { default as Popover } from './components/popover/index.js';
+export { default as Status } from './components/status/index.js';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
+export { default as ActionPopover } from './components/action-popover/index.js';
+export { default as ZendeskChat } from './components/zendesk-chat/index.js';
+export { default as ProgressBar } from './components/progress-bar/index.js';
+export { default as UpsellBanner } from './components/upsell-banner/index.js';
+export { getUserLocale, cleanLocale } from './lib/locale/index.js';
+export { default as RadioControl } from './components/radio-control/index.js';
+export { default as StatCard } from './components/stat-card/index.js';
+export { default as DiffViewer } from './components/diff-viewer/index.js';
+export { default as MarkedLines } from './components/marked-lines/index.js';
+export { default as DetailsViewer } from './components/details-viewer/index.js';
+export * from './components/global-notices/index.js';
+export * from './components/navigator-modal/index.js';

package/components/admin-page/index.tsx

@@ -1,4 +1,10 @@
 import restApi from '@automattic/jetpack-api';
+import { Page } from '@wordpress/admin-ui';
+import '@wordpress/admin-ui/build-style/style.css';
+import {
+	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
@@ -21,7 +27,7 @@ import type { FC, ReactNode } from 'react';
 const AdminPage: FC< AdminPageProps > = ( {
 	children,
 	className,
-	moduleName = __( 'Jetpack', 'jetpack-components' ),
+	moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */,
 	moduleNameHref,
 	showHeader = true,
 	showFooter = true,
@@ -32,6 +38,13 @@ const AdminPage: FC< AdminPageProps > = ( {
 	apiNonce = '',
 	optionalMenuItems,
 	header,
+	title,
+	subTitle,
+	logo,
+	actions,
+	breadcrumbs,
+	tabs,
+	showBottomBorder = true,
 } ) => {
 	useEffect( () => {
 		restApi.setApiRoot( apiRoot );
@@ -40,6 +53,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 
 	const rootClassName = clsx( styles[ 'admin-page' ], className, {
 		[ styles.background ]: showBackground,
+		[ styles[ 'without-bottom-border' ] ]: tabs || ! showBottomBorder,
 	} );
 
 	const testConnection = useCallback( async () => {
@@ -60,6 +74,57 @@ const AdminPage: FC< AdminPageProps > = ( {
 		}
 	}, [] );
 
+	// Compose the title with logo for the admin-ui Page header.
+	// Note: The inner Heading causes a double h2 wrapping because Page's Header
+	// also wraps title in a Heading. This is a known issue — the inner Heading is
+	// needed until https://github.com/WordPress/gutenberg/pull/75899 fixes
+	// non-string title rendering in admin-ui. Once that lands, remove the Heading
+	// here and pass the plain HStack with a string child.
+	const composedTitle = title ? (
+		<HStack spacing={ 2 } justify="left">
+			{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
+			<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+				{ title }
+			</Heading>
+		</HStack>
+	) : undefined;
+
+	const footer = showFooter && (
+		<Container className={ styles[ 'admin-page-footer' ] } horizontalSpacing={ 5 }>
+			<Col>
+				<JetpackFooter
+					moduleName={ moduleName }
+					moduleNameHref={ moduleNameHref }
+					menu={ optionalMenuItems }
+					useInternalLinks={ useInternalLinks }
+				/>
+			</Col>
+		</Container>
+	);
+
+	// When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
+	if ( showHeader && ( composedTitle || breadcrumbs ) ) {
+		return (
+			<div className={ rootClassName }>
+				<Page
+					ariaLabel={ title }
+					breadcrumbs={ breadcrumbs }
+					title={ composedTitle }
+					subTitle={ subTitle }
+					actions={ actions }
+					showSidebarToggle={ false }
+				>
+					{ tabs }
+					<Container fluid horizontalSpacing={ 0 }>
+						<Col>{ children }</Col>
+					</Container>
+					{ footer }
+				</Page>
+			</div>
+		);
+	}
+
+	// Legacy path: no title provided, render the classic header.
 	return (
 		<div className={ rootClassName }>
 			{ showHeader && (
@@ -85,18 +150,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 			<Container fluid horizontalSpacing={ 0 }>
 				<Col>{ children }</Col>
 			</Container>
-			{ showFooter && (
-				<Container horizontalSpacing={ 5 }>
-					<Col>
-						<JetpackFooter
-							moduleName={ moduleName }
-							moduleNameHref={ moduleNameHref }
-							menu={ optionalMenuItems }
-							useInternalLinks={ useInternalLinks }
-						/>
-					</Col>
-				</Container>
-			) }
+			{ footer }
 		</div>
 	);
 };

package/components/admin-page/style.module.scss

@@ -9,12 +9,39 @@
 		background-color: var(--jp-white);
 	}
 
+	// Remove the admin-ui header border when tabs are present,
+	// or when showBottomBorder is false.
+	// Ideally admin-ui would expose a prop or CSS custom property for this:
+	// https://github.com/WordPress/gutenberg/issues/75428
+	&.without-bottom-border :global(.admin-ui-page__header) {
+		border-bottom: none;
+	}
+
+	// Disable sticky header until we make it work better across all pages.
+	// JETPACK-1386
+	:global(.admin-ui-page__header) {
+		position: relative;
+	}
+
+	// Normalize admin headers: implementation of admin-ui needs to
+	// comprehend old wp-admin floating containers, such as Hello Dolly.
+	:global(.admin-ui-page) {
+		clear: both;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
 
+	// Ensure footer Container padding is included in its max-width,
+	// preventing horizontal scroll when the content area is narrower
+	// than the Container's max-width + padding (JETPACK-1424).
+	.admin-page-footer {
+		box-sizing: border-box;
+	}
+
 	.sandbox-domain-badge {
 		background: #d63638;
 		text-transform: uppercase;
@@ -26,3 +53,9 @@
 		color: #fff;
 	}
 }
+
+// Make Hello Dolly background white for Jetpack admin pages.
+:global(.jetpack-admin-page #dolly) {
+	background-color: #fff;
+}
+

package/components/admin-page/types.ts

@@ -18,10 +18,42 @@ export type AdminPageProps = {
 	showHeader?: boolean;
 
 	/**
-	 * Custom header. Optional
+	 * Custom header. Optional.
+	 * @deprecated Use `title` and `subTitle` props instead for the unified header.
 	 */
 	header?: ReactNode;
 
+	/**
+	 * Product title displayed in the unified header (e.g. "Social", "Backup").
+	 * When provided, renders the admin-ui Page header instead of the legacy header slot.
+	 */
+	title?: string;
+
+	/**
+	 * Optional tagline displayed below the title in the unified header.
+	 */
+	subTitle?: ReactNode;
+
+	/**
+	 * Custom logo element for the unified header. Defaults to JetpackLogo icon.
+	 */
+	logo?: ReactNode;
+
+	/**
+	 * Action elements displayed on the right side of the unified header.
+	 */
+	actions?: ReactNode;
+
+	/**
+	 * Breadcrumb navigation displayed next to the title in the unified header.
+	 */
+	breadcrumbs?: ReactNode;
+
+	/**
+	 * Tab navigation displayed below the title/tagline in the unified header.
+	 */
+	tabs?: ReactNode;
+
 	/**
 	 * Whether or not to display the Footer
 	 */
@@ -71,4 +103,10 @@ export type AdminPageProps = {
 	 * Class name to be applied to the root element of the component.
 	 */
 	className?: string;
+
+	/**
+	 * Show bottom border of the header. Defaults to true.
+	 * Hidden when `tabs` is used.
+	 */
+	showBottomBorder?: boolean;
 };

package/components/icons/style.module.scss

@@ -67,5 +67,9 @@
 			border-radius: 40%;
 		}
 	}
+
+	&.x {
+		fill: var(--color-x);
+	}
 }
 

package/components/jetpack-footer/index.tsx

@@ -33,7 +33,7 @@ const ExternalIcon: FC = () => (
  * @return {ReactNode} JetpackFooter component.
  */
 const JetpackFooter: FC< JetpackFooterProps > = ( {
-	moduleName = __( 'Jetpack', 'jetpack-components' ),
+	moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */,
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.4.16",
+	"version": "1.6.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -34,41 +34,42 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run compile-ts && pnpm run copy-scss",
 		"clean": "rm -rf build/",
-		"compile-ts": "tsc --pretty --project tsconfig.build.json",
+		"compile-ts": "tsgo --pretty --project tsconfig.build.json",
 		"copy-scss": "node ./tools/copy-scss-to-build.mjs",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsgo --noEmit"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.18",
-		"@automattic/jetpack-boost-score-api": "^1.0.31",
-		"@automattic/jetpack-script-data": "^0.6.0",
-		"@automattic/number-formatters": "^1.1.0",
+		"@automattic/jetpack-api": "^1.0.19",
+		"@automattic/jetpack-boost-score-api": "^1.0.33",
+		"@automattic/jetpack-script-data": "^0.6.1",
+		"@automattic/number-formatters": "^1.1.2",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.40.0",
-		"@wordpress/components": "32.2.0",
-		"@wordpress/compose": "7.40.0",
-		"@wordpress/data": "10.40.0",
-		"@wordpress/date": "5.40.0",
-		"@wordpress/element": "6.40.0",
-		"@wordpress/i18n": "6.13.0",
-		"@wordpress/icons": "11.7.0",
-		"@wordpress/notices": "5.40.0",
+		"@wordpress/admin-ui": "1.9.0",
+		"@wordpress/browserslist-config": "6.41.0",
+		"@wordpress/components": "32.3.0",
+		"@wordpress/compose": "7.41.0",
+		"@wordpress/data": "10.41.0",
+		"@wordpress/date": "5.41.0",
+		"@wordpress/element": "6.41.0",
+		"@wordpress/i18n": "6.14.0",
+		"@wordpress/icons": "11.8.0",
+		"@wordpress/notices": "5.41.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.10",
+		"social-logos": "^3.3.11",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.18",
+		"@automattic/jetpack-base-styles": "^1.0.19",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.2.0",
@@ -81,13 +82,13 @@
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"jest": "30.2.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
 		"storybook": "10.2.11",
 		"ts-dedent": "2.2.0",
-		"typescript": "5.9.3",
 		"webpack": "5.105.2",
 		"webpack-cli": "6.0.1"
 	},

package/tools/copy-scss-to-build.mjs

@@ -50,7 +50,7 @@ async function main() {
 		return;
 	}
 
-	for await ( const filePath of fs.glob( '**/*.scss', {
+	for await ( const filePath of fs.glob( '**/*.{scss,css}', {
 		cwd: packageRoot,
 		exclude: Array.from( IGNORED_DIRS, dir => `**/${ dir }/**` ),
 	} ) ) {