@automattic/vip-design-system 2.18.1 → 2.20.0

package/build/system/theme/index.js

@@ -16,6 +16,7 @@ var _ThemeBuilder = ThemeBuilder(Valet),
   ValetTheme = _ThemeBuilder.ValetTheme,
   getHeadingStyles = _ThemeBuilder.getHeadingStyles;
 var light = ColorBuilder(ValetTheme);
+var supportLabelDefaultTypography = getPropValue('support', 'label-default');
 
 // Dark
 var _ThemeBuilder2 = ThemeBuilder(ValetDark),
@@ -29,12 +30,6 @@ var outline = {
   outlineWidth: '1px',
   boxShadow: "0 0 0 1px " + getPropValue('focus', 'inset') + ", 0 0 0 3px " + getPropValue('focus')
 };
-var fonts = {
-  body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
-  heading: 'inherit',
-  monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
-  serif: 'recoletaregular, Georgia, serif'
-};
 var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
   return {
     // Valet Theme Colors
@@ -175,13 +170,15 @@ var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
 export default {
   outline: outline,
   space: getVariants('space'),
-  fonts: fonts,
+  fonts: {
+    monospace: getPropValue('fontFamily', 'monospace'),
+    "default": getPropValue('fontFamily', 'default')
+  },
   fontSizes: getVariants('fontSize.static'),
   breakpoints: generateBreakpoints(getVariants('breakpoint')),
   fontWeights: {
-    body: getPropValue('fontWeight', 'body'),
-    heading: getPropValue('fontWeight', 'heading'),
     regular: getPropValue('fontWeight', 'regular'),
+    semibold: getPropValue('fontWeight', 'semibold'),
     bold: getPropValue('fontWeight', 'bold'),
     medium: getPropValue('fontWeight', 'medium'),
     light: getPropValue('fontWeight', 'light')
@@ -276,9 +273,13 @@ export default {
       }
     }
   },
+  forms: {
+    label: _extends({}, supportLabelDefaultTypography)
+  },
   buttons: {
-    primary: {
-      fontFamily: 'body',
+    primary: _extends({}, supportLabelDefaultTypography, {
+      // Button label weight: theme `medium` (500).
+      fontWeight: 'medium',
       color: 'button.primary.label.default',
       bg: 'button.primary.background.default',
       border: '1px solid transparent',
@@ -287,7 +288,6 @@ export default {
       minHeight: '38px',
       display: 'inline-flex',
       cursor: 'pointer',
-      fontWeight: 'medium',
       boxShadow: 'none',
       borderRadius: 1,
       '&:hover': {
@@ -326,7 +326,7 @@ export default {
         backgroundColor: 'button.secondary.background.disabled',
         color: 'button.secondary.label.default'
       }
-    },
+    }),
     secondary: {
       variant: 'buttons.primary',
       color: 'button.secondary.label.default',
@@ -490,7 +490,14 @@ export default {
       variant: 'buttons.tertiary'
     }
   },
-  text: getHeadingStyles(),
+  text: _extends({}, getHeadingStyles(), getVariants('body'), {
+    'support-helper-text': getPropValue('support', 'helper-text'),
+    'support-label-xs': getPropValue('support', 'label-xs'),
+    'support-label-small': getPropValue('support', 'label-small'),
+    'support-label-default': getPropValue('support', 'label-default'),
+    'support-label-default-quiet': getPropValue('support', 'label-default-quiet'),
+    'support-label-default-loud': getPropValue('support', 'label-default-loud')
+  }),
   dialog: {
     modal: {
       position: 'fixed',
@@ -569,10 +576,10 @@ export default {
     }
   },
   styles: {
-    root: _extends({
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'body',
+    root: {
+      fontFamily: getPropValue('body', 'default').fontFamily,
+      lineHeight: getPropValue('body', 'default').lineHeight,
+      fontWeight: getPropValue('body', 'default').fontWeight,
       color: 'text',
       backgroundColor: 'backgrounds.primary',
       webkitFontSmoothing: 'antialiased',
@@ -589,11 +596,11 @@ export default {
         display: 'block'
       },
       pre: {
-        fontFamily: 'body'
+        fontFamily: 'default'
       },
       p: {
         color: 'text'
       }
-    }, getHeadingStyles())
+    }
   }
 };

package/docs/SETUP.md

@@ -41,7 +41,7 @@ Run:
 npm run dev
 ```
 
-You can then visit [http://localhost:60006/](http://localhost:60006/) to view.
+You can then visit [http://localhost:6006/](http://localhost:6006/) to view.
 
 ## Updating dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.18.1",
+  "version": "2.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/Badge/Badge.tsx

@@ -27,6 +27,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 			as="span"
 			sx={ {
 				fontSize: 0,
+				letterSpacing: '0.01em',
 				padding: 0, // do we need padding declared twice here?
 				bg: `tag.${ variant }.background`,
 				color: `tag.${ variant }.text`,
@@ -35,7 +36,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 				px: 2,
 				display: 'inline-block',
 				borderRadius: 1,
-				fontWeight: 'heading',
+				fontWeight: 'medium',
 				a: {
 					color: `tag.${ variant }.text`,
 					'&:hover, &:focus, &:active': {

package/src/system/DescriptionList/DescriptionList.tsx

@@ -42,7 +42,6 @@ const TableComponent = ( { list, className, sx, title }: DescriptionListProps )
 			minWidth: 'auto',
 			'> tbody > tr': {
 				'> td, > th': {
-					fontWeight: 'heading',
 					border: 'none',
 					pl: 0,
 					'&:first-of-type': { pl: 0 },

package/src/system/Form/Label.tsx

@@ -13,9 +13,7 @@ import { RequiredLabel } from './RequiredLabel';
 
 export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
-	fontWeight: 'heading',
-	fontSize: 2,
-	lineHeight: 1.5,
+	variant: 'forms.label',
 	color: baseLabelColor,
 };
 

package/src/system/Form/RadioBoxGroup.jsx

@@ -72,7 +72,14 @@ const RadioOption = ( {
 				{ ...restOption }
 			/>
 			<div
-				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
+				sx={ {
+					mb: 0,
+					color: 'input.radio-box.label.primary.default',
+					fontWeight: 'semibold',
+					p: 3,
+					pr: 0,
+					flex: 'auto',
+				} }
 			>
 				<label htmlFor={ forLabel } { ...labelProps }>
 					{ label }
@@ -82,7 +89,11 @@ const RadioOption = ( {
 						sx={ {
 							color: 'input.radio-box.label.secondary.default',
 							mb: 0,
+							mt: 1,
 							fontSize: 1,
+							fontWeight: 'regular',
+							letterSpacing: '0.01em',
+							lineHeight: '140%',
 							display: 'block',
 						} }
 						id={ describedById }

package/src/system/Form/RadioBoxGroup.stories.jsx

@@ -60,7 +60,12 @@ export const Primary = {
 	args: {
 		defaultValue: 'one',
 		options: [
-			{ label: 'One', value: 'one', description: 'This is a description' },
+			{
+				label: 'One',
+				value: 'one',
+				description:
+					'This is a longer description that allows us to see the text wrap and determine if the line height is correct',
+			},
 			{ label: 'Two', value: 'two', description: 'This is a description' },
 			{ label: 'Three', value: 'three', description: 'This is a description' },
 		],

package/src/system/Heading/Heading.stories.tsx

@@ -27,7 +27,16 @@ export const Default: Story = {
 			<Heading variant="h3">Heading Three</Heading>
 			<Heading variant="h4">Heading Four</Heading>
 			<Heading variant="h5">Heading Five</Heading>
-			<Heading variant="h6">Heading Six</Heading>
+
+			<Heading variant="h3" as="h1">
+				Heading One with Heading Three Styles
+			</Heading>
+			<Heading as="p" sx={ { variant: 'text.caps' } }>
+				Paragraph with Caps Styles
+			</Heading>
+			<Heading as="h3" sx={ { variant: 'text.caps' } }>
+				Heading Three with Caps Styles
+			</Heading>
 		</Box>
 	),
 };

package/src/system/Heading/Heading.tsx

@@ -20,10 +20,9 @@ export const Heading = forwardRef< HTMLHeadingElement, HeadingProps >(
 	( { variant = 'h3', sx, className, ...rest }: HeadingProps, ref: Ref< HTMLHeadingElement > ) => (
 		<ThemeHeading
 			as={ variant }
+			variant={ variant }
 			sx={ {
 				color: 'heading',
-				// pass variant prop to sx
-				variant: `text.${ variant.toString() }`,
 				...sx,
 			} }
 			className={ classNames( 'vip-heading-component', className ) }

package/src/system/Nav/styles/variants/menu.ts

@@ -51,8 +51,7 @@ export const menuItemLinkStyles: MixedStyleProp = {
 	borderRadius: 1,
 	color: 'text',
 	display: 'inline-flex',
-	fontSize: '0.875rem',
-	fontWeight: 'body',
+	variant: 'text.default',
 	height: 38,
 	mx: 0,
 	mb: 0,

package/src/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
  */
 import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
 import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
+import { FormAutocompleteMultiselectInlineChip } from './FormAutocompleteMultiselectInlineChip';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
@@ -22,6 +23,14 @@ import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
 
+const escapeHtml = str =>
+	String( str )
+		.replace( /&/g, '&' )
+		.replace( /</g, '&lt;' )
+		.replace( />/g, '&gt;' )
+		.replace( /"/g, '&quot;' )
+		.replace( /'/g, '&#039;' );
+
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
 	backgroundColor: 'layer.2',
@@ -96,7 +105,33 @@ const searchIconStyles = {
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+const inlineChipsContainerStyles = {
+	...defaultStyles,
+	display: 'flex',
+	flexWrap: 'wrap',
+	alignItems: 'center',
+	p: 1,
+	pr: 0,
+	position: 'relative',
+	'& .autocomplete__input': {
+		...defaultStyles[ '& .autocomplete__input' ],
+		lineHeight: '24px',
+		minHeight: '24px',
+	},
+	'&:focus-within': theme => theme.outline,
+	'& .autocomplete__wrapper': {
+		position: 'static',
+		width: '100%',
+		lineHeight: '24px',
+		minHeight: '24px',
+		'& .autocomplete__dropdown-arrow-down': {
+			top: 'unset',
+			bottom: '6px',
+		},
+	},
+};
+
+const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -156,10 +191,12 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			listType = 'button',
 			initialValue = [],
 			allowCustom = false,
+			variant,
 			...props
 		},
 		forwardRef
 	) => {
+		const isInlineChips = variant === 'inline-chips';
 		const OPTION_ACTION = {
 			ADD: 'add',
 			REMOVE: 'remove',
@@ -175,6 +212,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			option: null,
 			index: -1,
 		} );
+		const justSelectedRef = React.useRef( false );
 		let debounceTimeout;
 		forwardRef = forwardRef || React.createRef();
 
@@ -283,11 +321,44 @@ const FormAutocompleteMultiselect = React.forwardRef(
 					data = handleTypeChange( query );
 				}
 				const optionForDisplay = data?.map( option => optionLabel( option ) );
-				populateResults(
-					optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
-				);
+				if ( isInlineChips ) {
+					populateResults( optionForDisplay );
+				} else {
+					populateResults(
+						optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
+					);
+				}
+			},
+			[ autoFilter, isDirty, isInlineChips, onInputChange, options, selectedOptions ]
+		);
+
+		const onValueChangeInlineChips = useCallback(
+			inputValue => {
+				if ( ! inputValue ) {
+					return;
+				}
+				justSelectedRef.current = true;
+				if ( selectedOptions.includes( inputValue ) ) {
+					unselectValue( inputValue, selectedOptions.indexOf( inputValue ) );
+				} else {
+					setCurrentOption( { action: OPTION_ACTION.ADD, option: inputValue } );
+					setSelectedOptions( [ ...selectedOptions, inputValue ] );
+				}
 			},
-			[ autoFilter, isDirty, onInputChange, options, selectedOptions ]
+			[ selectedOptions, unselectValue ]
+		);
+
+		const inlineChipsTemplates = useMemo(
+			() => ( {
+				suggestion: suggestion => {
+					const isSelected = selectedOptions.includes( suggestion );
+					const check = isSelected ? '&#10003;' : '';
+					return `<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;flex-shrink:0">${ check }</span>${ escapeHtml(
+						suggestion
+					) }</span>`;
+				},
+			} ),
+			[ selectedOptions ]
 		);
 
 		useEffect( () => {
@@ -332,7 +403,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				selectedOptions,
 				selectedOptions.map( option => option?.label || option )
 			);
-			resetInputState();
+			if ( isInlineChips && justSelectedRef.current && forwardRef?.current ) {
+				justSelectedRef.current = false;
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: '',
+					menuOpen: true,
+				} );
+			} else {
+				resetInputState();
+			}
 		}, [ selectedOptions ] );
 
 		// Update the select status for screen readers
@@ -340,15 +420,65 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			if ( currentOption.action === OPTION_ACTION.ADD ) {
 				setAddStatus( `${ currentOption.option } added to the list.` );
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
-			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
-				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' )?.focus();
-			} else if ( selectedOptions.length === 0 ) {
-				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' )?.focus();
+			} else if ( currentOption.action === OPTION_ACTION.REMOVE ) {
+				setAddStatus( `${ currentOption.option } removed from the list.` );
+				if ( isInlineChips ) {
+					global.document.querySelector( `#${ forLabel }` )?.focus();
+				} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
+					global.document.querySelector( '.vip-button-component' )?.focus();
+				} else if ( selectedOptions.length === 0 ) {
+					global.document.querySelector( '.autocomplete__input' )?.focus();
+				}
+				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			}
 		}, [ currentOption ] );
 
+		if ( isInlineChips ) {
+			return (
+				<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+					{ label && <SelectLabel /> }
+					<div sx={ inlineChipsContainerStyles }>
+						{ selectedOptions.map( ( option, idx ) => (
+							<FormAutocompleteMultiselectInlineChip
+								key={ option }
+								index={ idx }
+								option={ option }
+								unselectValue={ unselectValue }
+							/>
+						) ) }
+						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+							<Autocomplete
+								id={ forLabel }
+								aria-busy={ loading }
+								showAllValues={ true }
+								ref={ forwardRef }
+								source={ source || suggest }
+								defaultValue={ value }
+								displayMenu={ displayMenu }
+								onConfirm={ onValueChangeInlineChips }
+								tNoResults={ noOptionsMessage }
+								required={ required }
+								dropdownArrow={ dropdownArrow }
+								confirmOnBlur={ false }
+								templates={ inlineChipsTemplates }
+								{ ...props }
+								placeholder={ selectedOptions.length > 0 ? '' : props.placeholder || '' }
+							/>
+						</div>
+						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
+						{ loading && <FormSelectLoading sx={ { right: 7 } } /> }
+					</div>
+					{ hasError && errorMessage && (
+						<Flex sx={ { mt: 2 } }>
+							<Validation isValid={ false } describedId={ forLabel }>
+								{ errorMessage }
+							</Validation>
+						</Flex>
+					) }
+				</div>
+			);
+		}
+
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -435,6 +565,7 @@ FormAutocompleteMultiselect.propTypes = {
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
 	allowCustom: PropTypes.bool,
+	variant: PropTypes.string,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/src/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -134,6 +134,27 @@ export const WithStaticData = {
 	},
 };
 
+export const InlineChips = {
+	render: props => <DefaultComponent { ...props } width={ 500 } />,
+	args: {
+		label: 'Post Categories',
+		options: [
+			{ value: 'breaking-news', label: 'Breaking News' },
+			{ value: 'world-news', label: 'World News' },
+			{ value: 'us-news', label: 'U.S. News' },
+			{ value: 'climate-environment', label: 'Climate & Environment' },
+			{ value: 'obituaries', label: 'Obituaries' },
+			{ value: 'technology', label: 'Technology' },
+			{ value: 'entertainment', label: 'Entertainment' },
+			{ value: 'real-estate', label: 'Real Estate' },
+		],
+		variant: 'inline-chips',
+		showAllValues: true,
+		placeholder: 'Search categories...',
+		initialValue: [ 'Breaking News' ],
+	},
+};
+
 export const WithDynamicData = {
 	render: () => {
 		const [ selectedValues, setSelectedValues ] = useState( [] );

package/src/system/NewForm/FormAutocompleteMultiselect.test.jsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
@@ -37,3 +37,69 @@ describe( '<FormAutocompleteMultiselect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );
+
+describe( '<FormAutocompleteMultiselect variant="inline-chips" />', () => {
+	it( 'renders the inline-chips variant', async () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+			/>
+		);
+		expect( screen.getByLabelText( 'Categories' ) ).toBeInTheDocument();
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders initial values as inline chips', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_init"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Vanilla' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes a chip when the close button is clicked', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_remove"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		expect( screen.queryByText( 'Chocolate' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+	} );
+
+	it( 'announces removal to screen readers', () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_a11y"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		const statusEl = container.querySelector( '#vip-autocompletemultiselect-status' );
+		expect( statusEl ).toHaveTextContent( 'Chocolate removed from the list.' );
+	} );
+} );

package/src/system/NewForm/FormAutocompleteMultiselectInlineChip.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+
+const FormAutocompleteMultiselectInlineChip = ( {
+	index,
+	option,
+	unselectValue,
+}: {
+	index: number;
+	option: string;
+	unselectValue: ( option: string, index: number ) => void;
+} ) => {
+	return (
+		<span
+			sx={ {
+				display: 'inline-flex',
+				alignItems: 'center',
+				gap: 1,
+				px: 2,
+				py: '2px',
+				m: 1,
+				bg: 'layer.1',
+				borderRadius: 1,
+				fontSize: 1,
+				lineHeight: '16px',
+				whiteSpace: 'nowrap',
+				maxWidth: '100%',
+			} }
+		>
+			<span
+				sx={ {
+					overflow: 'hidden',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+				} }
+			>
+				{ option }
+			</span>
+			<button
+				type="button"
+				aria-label={ `Remove ${ option }` }
+				onClick={ e => {
+					e.preventDefault();
+					e.stopPropagation();
+					unselectValue( option, index );
+				} }
+				sx={ {
+					display: 'inline-flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					p: 0,
+					border: 'none',
+					bg: 'transparent',
+					cursor: 'pointer',
+					color: 'text',
+					lineHeight: 0,
+					'&:hover': {
+						opacity: 0.7,
+					},
+				} }
+			>
+				<MdClose size={ 14 } />
+			</button>
+		</span>
+	);
+};
+
+export { FormAutocompleteMultiselectInlineChip };

package/src/system/Notice/Notice.tsx

@@ -240,7 +240,7 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							as={ headingVariant }
 							sx={ {
 								color: textColor,
-								mb: 0,
+								mb: 1,
 								fontSize: 2,
 								fontWeight: 'bold',
 							} }