fix(ThemeSection): Make "name" prop optional, noissue

src/ThemeSection/getThemeSection.ts

@@ -23,15 +23,15 @@ import {ConfigThemeSection, LocalThemeSection} from '../theme/types';
 
 interface SectionGetterOptions {
 	theme: LocalThemeSection;
-	name: string;
+	name?: string;
 	withBackgroundImage?: boolean;
 }
 
 function getThemeSection({
 	theme,
 	name,
 	withBackgroundImage,
-}: SectionGetterOptions): ConfigThemeSection {
+}: SectionGetterOptions): ConfigThemeSection | undefined {
 	// If the passed in name isn't the name of a section,
 	// we treat it as a "color block"
 	const isThemeSection = Boolean(theme.sections?.[name]);
@@ -68,8 +68,9 @@ function getThemeSection({
 	// and we need to dynamically construct a readable section
 	const background = getColorBlock(name, theme);
 
+	// If this turns out not to be a valid colour, we give up
 	if (!isValidColor(background)) {
-		return localThemeSection;
+		return undefined;
 	}
 
 	const [contrastingText, contrastingShade] = isDark(background)

src/ThemeSection/index.tsx

@@ -13,7 +13,7 @@ interface ThemeSectionProps {
 	 * The key (name) of the theme section, as defined in `baseTheme.sections`,
 	 * or a color block from e.g. `baseTheme.globals.colorBlocks`
 	 */
-	name: ThemeSectionName;
+	name?: ThemeSectionName;
 	/**
 	 * Theme object to use as the base for all nested
 	 * ThemeSections. Usually this prop only needs to be
@@ -34,11 +34,20 @@ function ThemeSection(props: ThemeSectionProps): React.ReactElement {
 
 	const constructLocalTheme = useCallback(
 		(parentTheme = baseTheme): LocalThemeSection => {
+			if (!name && !withBackgroundImage) {
+				return parentTheme;
+			}
+
 			const localThemeSection = getThemeSection({
 				theme: parentTheme,
 				name,
 				withBackgroundImage,
 			});
+
+			if (!localThemeSection) {
+				return parentTheme;
+			}
+
 			const parentThemeSectionName = parentTheme.currentThemeSectionName;
 
 			return {