@wordpress/components 36.0.1 → 37.0.0

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -1,122 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render alignment 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: center;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render spacing 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 5);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 5); --wp-components-flex-justify: space-between;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;

package/src/heading/hook.ts

@@ -16,7 +16,7 @@ export function useHeading(
 		level = 2,
 		color = COLORS.theme.foreground,
 		isBlock = true,
-		weight = CONFIG.fontWeightHeading as React.CSSProperties[ 'fontWeight' ],
+		weight = CONFIG.fontWeightEmphasis as React.CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 

package/src/heading/stories/index.story.tsx

@@ -32,7 +32,7 @@ const meta: Meta< typeof Heading > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Text` from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
+			notes: 'Use [`Text`](?path=/docs/design-system-components-text--docs) from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
 		},
 	},
 };

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -13,7 +13,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <h2
-  class="components-truncate components-text components-heading emotion-0 emotion-1"
+  class="components-truncate emotion-0 components-text components-heading"
   data-wp-c16t="true"
   data-wp-component="Heading"
 >

package/src/icon/stories/index.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof Icon > = {
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
-			notes: 'When rendering SVGs, use `Icon` from `@wordpress/ui` instead.',
+			notes: 'When rendering SVGs, use [`Icon`](?path=/docs/design-system-components-icon--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/input-control/README.md

@@ -17,7 +17,6 @@ const Example = () => {
 
 	return (
 		<InputControl
-			__next40pxDefaultSize
 			value={ value }
 			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
@@ -109,10 +108,3 @@ The current value of the input.
 -   Type: `String`
 -   Required: No
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`

package/src/input-control/index.tsx

@@ -19,8 +19,6 @@ import type { InputControlProps } from './types';
 import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -36,8 +34,10 @@ export function UnforwardedInputControl(
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal components.
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__next36pxDefaultSize: _next36pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -57,7 +57,7 @@ export function UnforwardedInputControl(
 		suffix,
 		value,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
+	} = props;
 
 	const id = useUniqueId( idProp );
 	const classes = clsx( 'components-input-control', className );
@@ -70,17 +70,9 @@ export function UnforwardedInputControl(
 
 	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'InputControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	return (
 		<BaseControl className={ classes } help={ help } id={ id }>
 			<InputBase
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
 				gap={ 3 }
@@ -97,7 +89,6 @@ export function UnforwardedInputControl(
 				<InputField
 					{ ...restProps }
 					{ ...helpProp }
-					__next40pxDefaultSize={ __next40pxDefaultSize }
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
@@ -129,7 +120,6 @@ export function UnforwardedInputControl(
  *
  *   return (
  *  	<InputControl
- * 			__next40pxDefaultSize
  *  		value={ value }
  *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
@@ -138,6 +128,5 @@ export function UnforwardedInputControl(
  * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
-InputControl.displayName = 'InputControl';
 
 export default InputControl;

package/src/input-control/input-base.tsx

@@ -22,7 +22,6 @@ import {
 	contextConnect,
 	useContextSystem,
 } from '../context';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -63,7 +62,6 @@ function InputBase(
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const {
-		__next40pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -77,19 +75,17 @@ function InputBase(
 		size = 'default',
 		suffix,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp(
-		useContextSystem( props, 'InputBase' )
-	);
+	} = useContextSystem( props, 'InputBase' );
 
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { __next40pxDefaultSize, size },
-			InputControlSuffixWrapper: { __next40pxDefaultSize, size },
+			InputControlPrefixWrapper: { size },
+			InputControlSuffixWrapper: { size },
 		};
-	}, [ __next40pxDefaultSize, size ] );
+	}, [ size ] );
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.

package/src/input-control/stories/index.story.tsx

@@ -43,21 +43,20 @@ const meta: Meta< typeof InputControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `InputControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
 export default meta;
 
 const Template: StoryFn< typeof InputControl > = ( args ) => (
-	<InputControl __next40pxDefaultSize { ...args } />
+	<InputControl { ...args } />
 );
 
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
-	__next40pxDefaultSize: true,
 };
 
 export const WithHelpText = Template.bind( {} );
@@ -128,7 +127,6 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 	const [ visible, setVisible ] = useState( false );
 	return (
 		<InputControl
-			__next40pxDefaultSize
 			type={ visible ? 'text' : 'password' }
 			suffix={
 				<InputControlSuffixWrapper variant="control">

package/src/input-control/styles/input-control-styles.tsx

@@ -134,7 +134,6 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
-	__next40pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -177,10 +176,7 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-export const getSizeConfig = ( {
-	inputSize: size,
-	__next40pxDefaultSize,
-}: InputProps ) => {
+export const getSizeConfig = ( { inputSize: size }: InputProps ) => {
 	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
@@ -213,10 +209,6 @@ export const getSizeConfig = ( {
 		},
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		sizes.default = sizes.compact;
-	}
-
 	return sizes[ size as Size ] || sizes.default;
 };
 
@@ -332,12 +324,10 @@ export const LabelWrapper = styled( FlexItem )`
 const prefixSuffixWrapperStyles = ( {
 	variant = 'default',
 	size,
-	__next40pxDefaultSize,
 	isPrefix,
 }: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
 	const { paddingLeft: padding } = getSizeConfig( {
 		inputSize: size,
-		__next40pxDefaultSize,
 	} );
 
 	const paddingProperty = isPrefix

package/src/input-control/test/index.js

@@ -18,13 +18,7 @@ const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
 	const InputControl = ( props ) => {
-		return (
-			<BaseInputControl
-				{ ...props }
-				__next40pxDefaultSize
-				data-testid="input"
-			/>
-		);
+		return <BaseInputControl { ...props } data-testid="input" />;
 	};
 
 	describe( 'Basic rendering', () => {

package/src/input-control/types.ts

@@ -26,27 +26,6 @@ export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
 
 interface BaseProps {
-	/**
-	 * Deprecated. Use `__next40pxDefaultSize` instead.
-	 *
-	 * @default false
-	 * @deprecated
-	 * @ignore
-	 */
-	__next36pxDefaultSize?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.
@@ -73,8 +52,7 @@ export type InputChangeCallback< P = {} > = (
 	extra: { event: SyntheticEvent } & P
 ) => void;
 
-export interface InputFieldProps
-	extends Omit< BaseProps, '__next36pxDefaultSize' > {
+export interface InputFieldProps extends BaseProps {
 	/**
 	 * Determines the drag axis.
 	 *
@@ -208,6 +186,26 @@ export interface InputControlProps
 			| 'paddingInlineStart'
 			| 'paddingInlineEnd'
 		> {
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 * @ignore
+	 */
+	__next36pxDefaultSize?: boolean;
+	/**
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
 
@@ -229,12 +227,6 @@ export type PrefixSuffixWrapperProps = {
 	 * @ignore
 	 */
 	size?: BaseProps[ 'size' ];
-	/**
-	 * Internal prop used to control the padding size of the wrapper.
-	 *
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: BaseProps[ '__next40pxDefaultSize' ];
 	/**
 	 * Adjust the wrapper based on the prefix or suffix content.
 	 *

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-y16wpf-PolymorphicDiv-large-item e19lxcc00"
+-       class="css-17kujwd-medium css-1izz8ne-item components-item"
++       class="css-o0djae-large css-1izz8ne-item components-item"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -68,34 +68,40 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   border-bottom-right-radius: 2px;
 }
 
-.emotion-2 {
+.emotion-1 {
   width: 100%;
   display: block;
 }
 
-.emotion-3 {
+.emotion-2 {
   padding: calc((36px - calc(13px * 1.4) - 2px) / 2) 12px;
+}
+
+.emotion-3 {
   box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
   color: inherit;
+}
+
+.emotion-4 {
   border-radius: 2px;
 }
 
 <div>
   <div
-    class="components-item-group emotion-0 emotion-1"
+    class="emotion-0 components-item-group"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
   >
     <div
-      class="emotion-2"
+      class="emotion-1"
       role="listitem"
     >
       <div
-        class="components-item emotion-3 emotion-1"
+        class="emotion-2 emotion-3 emotion-4 components-item"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +120,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-12ds22-PolymorphicDiv-separated-rounded e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="css-qr0sb5-separated css-1e6snp6-rounded components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +131,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-17kujwd-medium css-1izz8ne-item components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +148,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-z3k5b4-PolymorphicDiv-bordered-rounded e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="css-9rmwob-bordered css-1e6snp6-rounded components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +159,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-17kujwd-medium css-1izz8ne-item components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +176,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-1ragr82-PolymorphicDiv e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/menu/group-label.tsx

@@ -9,6 +9,7 @@ import { forwardRef, useContext } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import { Context } from './context';
 import { Text } from '../text';
+import { CONFIG } from '../utils';
 import type { GroupLabelProps } from './types';
 import * as Styled from './styles';
 
@@ -33,7 +34,7 @@ export const GroupLabel = forwardRef<
 					upperCase
 					variant="muted"
 					size="11px"
-					weight={ 500 }
+					weight={ CONFIG.fontWeightEmphasis }
 					lineHeight="16px"
 				/>
 			}

package/src/menu-group/style.scss

@@ -23,6 +23,6 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	white-space: nowrap;
 }

package/src/menu-item/style.scss

@@ -6,7 +6,7 @@
 .components-menu-item__button,
 .components-menu-item__button.components-button {
 	width: 100%;
-	font-weight: $font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 
 	&[role="menuitemradio"],
 	&[role="menuitemcheckbox"] {

package/src/modal/stories/index.story.tsx

@@ -48,7 +48,7 @@ const meta: Meta< typeof Modal > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Dialog`](?path=/docs/design-system-components-dialog--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
@@ -85,10 +85,7 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 						anim id est laborum.
 					</p>
 
-					<InputControl
-						__next40pxDefaultSize
-						style={ { marginBottom: '20px' } }
-					/>
+					<InputControl style={ { marginBottom: '20px' } } />
 
 					<Button
 						__next40pxDefaultSize

package/src/modal/style.scss

@@ -208,7 +208,7 @@
 
 	.components-modal__header-heading {
 		font-size: $font-size-x-large;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	h1 {