Handle default props

packages/components/src/elevation/component.tsx

@@ -7,12 +7,28 @@ import {
 	PolymorphicComponentProps,
 } from '../ui/context';
 import type { Props } from './types';
-import { ElevationWrapper } from './styles';
+import { ElevationWrapper, StyleProps } from './styles';
+
+const DEFAULT_PROPS: StyleProps = {
+	isInteractive: false,
+	offset: 0,
+	value: 0,
+	active: null,
+	focus: null,
+	hover: null,
+	borderRadius: 'inherit',
+};
 
 function Elevation( props: PolymorphicComponentProps< Props, 'div', false > ) {
 	const contextProps = useContextSystem( props, 'Elevation' );
 
-	return <ElevationWrapper { ...contextProps } aria-hidden="true" />;
+	return (
+		<ElevationWrapper
+			{ ...DEFAULT_PROPS }
+			{ ...contextProps }
+			aria-hidden="true"
+		/>
+	);
 }
 
 /**

packages/components/src/elevation/styles.ts

@@ -3,20 +3,23 @@
  */
 import styled from '@emotion/styled';
 import { css, CSSObject } from '@emotion/react';
+import type { Required } from 'utility-types';
 
 /**
  * Internal dependencies
  */
 import type { Props } from './types';
 import { CONFIG, reduceMotion } from '../utils';
 
+export type StyleProps = Required< Props >;
+
 const getBoxShadow = ( value: number ) => {
 	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
 	return `0 ${ value }px ${ value * 2 }px 0
 	${ boxShadowColor }`;
 };
 
-const renderBoxShadow = ( { value = 0 }: Props ) =>
+const renderBoxShadow = ( { value }: StyleProps ) =>
 	css( { boxShadow: getBoxShadow( value ) } );
 
 const renderTransition = () =>
@@ -25,44 +28,42 @@ const renderTransition = () =>
 ${ CONFIG.transitionTimingFunction }`,
 	} );
 
-const renderBorderRadius = ( { borderRadius }: Props ) =>
+const renderBorderRadius = ( { borderRadius }: StyleProps ) =>
 	css( { borderRadius } );
 
-const renderOffset = ( { offset = 0 }: Props ) =>
+const renderOffset = ( { offset }: StyleProps ) =>
 	css( { bottom: offset, left: offset, right: offset, top: offset } );
 
 const renderHoverActiveFocus = ( {
 	isInteractive,
 	active,
 	hover,
 	focus,
-	value = 0,
-}: Props ) => {
-	let hoverValue: number | undefined =
-		typeof hover !== 'undefined' ? hover : value * 2;
-	let activeValue: number | undefined =
-		typeof active !== 'undefined' ? active : value / 2;
+	value,
+}: StyleProps ) => {
+	let hoverValue: number | null = hover !== null ? hover : value * 2;
+	let activeValue: number | null = active !== null ? active : value / 2;
 
 	if ( ! isInteractive ) {
-		hoverValue = typeof hover !== 'undefined' ? hover : undefined;
-		activeValue = typeof active !== 'undefined' ? active : undefined;
+		hoverValue = hover;
+		activeValue = active;
 	}
 
 	const cssObj: CSSObject = {};
 
-	if ( typeof hoverValue !== 'undefined' ) {
+	if ( hoverValue !== null ) {
 		cssObj[ '*:hover > &' ] = {
 			boxShadow: getBoxShadow( hoverValue ),
 		};
 	}
 
-	if ( typeof activeValue !== 'undefined' ) {
+	if ( activeValue !== null ) {
 		cssObj[ '*:active > &' ] = {
 			boxShadow: getBoxShadow( activeValue ),
 		};
 	}
 
-	if ( typeof focus !== 'undefined' ) {
+	if ( focus !== null ) {
 		cssObj[ '*focus > &' ] = {
 			boxShadow: getBoxShadow( focus ),
 		};
@@ -71,7 +72,7 @@ const renderHoverActiveFocus = ( {
 	return css( cssObj );
 };
 
-export const ElevationWrapper = styled.div< Props >`
+export const ElevationWrapper = styled.div< StyleProps >`
 	background: transparent;
 	display: block;
 	margin: 0 !important;

packages/components/src/elevation/types.ts

@@ -8,19 +8,19 @@ export type Props = {
 	/**
 	 * Renders the active (interaction) shadow value.
 	 */
-	active?: number;
+	active?: number | null;
 	/**
 	 * Renders the border-radius of the shadow.
 	 */
 	borderRadius?: CSSProperties[ 'borderRadius' ];
 	/**
 	 * Renders the focus (interaction) shadow value.
 	 */
-	focus?: number;
+	focus?: number | null;
 	/**
 	 * Renders the hover (interaction) shadow value.
 	 */
-	hover?: number;
+	hover?: number | null;
 	/**
 	 * Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
 	 */