@wordpress/components 22.0.0 → 22.1.0

package/src/mobile/link-settings/test/edit.native.js

@@ -77,19 +77,19 @@ describe.each( [
 
 		// Act.
 		const block = await waitFor( () =>
-			subject.getByA11yLabel(
+			subject.getByLabelText(
 				type === 'core/image' ? /Image Block/ : /Button Block/
 			)
 		);
 		fireEvent.press( block );
 		fireEvent.press( block );
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
+			await waitFor( () => subject.getByLabelText( 'Open Settings' ) )
 		);
 
 		// Assert.
 		const linkToField = await waitFor( () =>
-			subject.getByA11yLabel(
+			subject.getByLabelText(
 				`Link to, ${
 					type === 'core/image' ? 'None' : 'Search or type URL'
 				}`
@@ -114,7 +114,7 @@ describe.each( [
 
 				// Act.
 				const block = await waitFor( () =>
-					subject.getByA11yLabel(
+					subject.getByLabelText(
 						type === 'core/image' ? /Image Block/ : /Button Block/
 					)
 				);
@@ -122,12 +122,12 @@ describe.each( [
 				fireEvent.press( block );
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -139,15 +139,15 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( /Custom URL/ )
+							subject.getByLabelText( /Custom URL/ )
 						)
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await waitFor( () => subject.getByLabelText( 'Apply' ) );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -167,7 +167,7 @@ describe.each( [
 
 				// Act.
 				const block = await waitFor( () =>
-					subject.getByA11yLabel(
+					subject.getByLabelText(
 						type === 'core/image' ? /Image Block/ : /Button Block/
 					)
 				);
@@ -175,12 +175,12 @@ describe.each( [
 				fireEvent.press( block );
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -192,20 +192,20 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Custom URL. Empty' )
+							subject.getByLabelText( 'Custom URL. Empty' )
 						)
 					);
 				}
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Copy URL from the clipboard, ${ url }`
 						)
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image' ? 'Custom URL' : url
 							}`
@@ -215,15 +215,15 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( `Custom URL, ${ url }` )
+							subject.getByLabelText( `Custom URL, ${ url }` )
 						)
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await waitFor( () => subject.getByLabelText( 'Apply' ) );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -246,7 +246,7 @@ describe.each( [
 
 					// Act.
 					const block = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							type === 'core/image'
 								? /Image Block/
 								: /Button Block/
@@ -256,12 +256,12 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByLabelText( 'Open Settings' )
 						)
 					);
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Link to, ${
 									type === 'core/image'
 										? 'None'
@@ -273,12 +273,12 @@ describe.each( [
 					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel( /Custom URL/ )
+								subject.getByLabelText( /Custom URL/ )
 							)
 						);
 					}
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Copy URL from the clipboard, ${ url }`
 						)
 					);
@@ -313,7 +313,7 @@ describe.each( [
 
 					// Act.
 					const block = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							type === 'core/image'
 								? /Image Block/
 								: /Button Block/
@@ -323,12 +323,12 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByLabelText( 'Open Settings' )
 						)
 					);
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Link to, ${
 									type === 'core/image'
 										? 'None'
@@ -340,13 +340,13 @@ describe.each( [
 					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel( /Custom URL/ )
+								subject.getByLabelText( /Custom URL/ )
 							)
 						);
 					}
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Copy URL from the clipboard, ${ url }`
 							)
 						)
@@ -354,7 +354,7 @@ describe.each( [
 
 					// Assert.
 					const linkToField = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image' ? 'Custom URL' : url
 							}`

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -41,11 +41,11 @@ describe( 'Android', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		fireEvent.press(
-			screen.getByA11yLabel( 'Link to, Search or type URL' )
+			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -58,7 +58,7 @@ describe( 'Android', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -82,7 +82,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -95,7 +95,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );

package/src/navigator/navigator-screen/component.tsx

@@ -75,6 +75,12 @@ function UnconnectedNavigatorScreen(
 		[ className, cx ]
 	);
 
+	const locationRef = useRef( location );
+
+	useEffect( () => {
+		locationRef.current = location;
+	}, [ location ] );
+
 	// Focus restoration
 	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
@@ -87,7 +93,7 @@ function UnconnectedNavigatorScreen(
 			isInitialLocation ||
 			! isMatch ||
 			! wrapperRef.current ||
-			location.hasRestoredFocus
+			locationRef.current.hasRestoredFocus
 		) {
 			return;
 		}
@@ -119,12 +125,11 @@ function UnconnectedNavigatorScreen(
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
-		location.hasRestoredFocus = true;
+		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
-		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );

package/src/notice/README.md

@@ -34,7 +34,8 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 -   **Default** notices have **no background**.
--   **Informational** notices are **blue.**
+-   **Informational** notices are **blue** by default.
+    - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 -   **Success** notices are **green.**
 -   **Warning** notices are **yellow\*\***.\*\*
 -   **Error** notices are **red.**

package/src/notice/style.scss

@@ -3,7 +3,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	background-color: $white;
-	border-left: 4px solid var(--wp-admin-theme-color);
+	border-left: 4px solid $components-color-accent;
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;

package/src/palette-edit/index.js

@@ -229,6 +229,9 @@ function PaletteEditListView( {
 				onChange( newElements.length ? newElements : undefined );
 			}
 		};
+		// Disable reason: adding the missing dependency here would cause breaking changes that will require
+		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );

package/src/panel/style.scss

@@ -91,7 +91,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		border-radius: 0;
 	}
 

package/src/popover/index.tsx

@@ -379,6 +379,17 @@ const UnforwardedPopover = (
 
 	// When any of the possible anchor "sources" change,
 	// recompute the reference element (real or virtual) and its owner document.
+
+	const anchorRefTop = ( anchorRef as PopoverAnchorRefTopBottom | undefined )
+		?.top;
+	const anchorRefBottom = (
+		anchorRef as PopoverAnchorRefTopBottom | undefined
+	 )?.bottom;
+	const anchorRefStartContainer = ( anchorRef as Range | undefined )
+		?.startContainer;
+	const anchorRefCurrent = ( anchorRef as PopoverAnchorRefReference )
+		?.current;
+
 	useLayoutEffect( () => {
 		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
 			anchor,
@@ -401,11 +412,11 @@ const UnforwardedPopover = (
 		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
-		anchorRef as Element | undefined,
-		( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top,
-		( anchorRef as PopoverAnchorRefTopBottom | undefined )?.bottom,
-		( anchorRef as Range | undefined )?.startContainer,
-		( anchorRef as PopoverAnchorRefReference )?.current,
+		anchorRef,
+		anchorRefTop,
+		anchorRefBottom,
+		anchorRefStartContainer,
+		anchorRefCurrent,
 		anchorRect,
 		getAnchorRect,
 		fallbackReferenceElement,
@@ -420,7 +431,7 @@ const UnforwardedPopover = (
 			// Reference and root documents are the same.
 			referenceOwnerDocument === document ||
 			// Reference and floating are in the same document.
-			referenceOwnerDocument === refs?.floating?.current?.ownerDocument ||
+			referenceOwnerDocument === refs.floating.current?.ownerDocument ||
 			// The reference's document has no view (i.e. window)
 			// or frame element (ie. it's not an iframe).
 			! referenceOwnerDocument?.defaultView?.frameElement
@@ -442,7 +453,7 @@ const UnforwardedPopover = (
 		return () => {
 			defaultView.removeEventListener( 'resize', updateFrameOffset );
 		};
-	}, [ referenceOwnerDocument, update ] );
+	}, [ referenceOwnerDocument, update, refs.floating ] );
 
 	const mergedFloatingRef = useMergeRefs( [
 		floating,

package/src/range-control/styles/range-control-styles.ts

@@ -174,7 +174,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: var( --wp-admin-theme-color );
+				background-color: ${ COLORS.ui.theme };
 		  `;
 
 export const ThumbWrapper = styled.span`
@@ -205,7 +205,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: var( --wp-admin-theme-color );
+					background-color: ${ COLORS.ui.theme };
 					opacity: 0.4;
 					border-radius: 50%;
 					height: ${ thumbSize + 8 }px;

package/src/resizable-box/style.scss

@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
@@ -47,7 +47,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	content: "";
 	width: 3px;
 	height: 3px;
-	background: var(--wp-admin-theme-color);
+	background: $components-color-accent;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - 1px);

package/src/scrollable/test/index.tsx

@@ -9,24 +9,28 @@ import { render, screen } from '@testing-library/react';
 import { Scrollable } from '../index';
 
 describe( 'props', () => {
-	beforeEach( () => {
+	test( 'should render correctly', () => {
 		render(
 			<Scrollable data-testid="scrollable">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
-	} );
 
-	test( 'should render correctly', () => {
 		expect( screen.getByTestId( 'scrollable' ) ).toMatchSnapshot();
 	} );
 
 	test( 'should render smoothScroll', () => {
+		render(
+			<Scrollable data-testid="scrollable">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
 		render(
 			<Scrollable smoothScroll data-testid="smooth-scrollable">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
+
 		expect(
 			screen.getByTestId( 'smooth-scrollable' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'scrollable' ) );

package/src/search-control/style.scss

@@ -18,7 +18,7 @@
 
 		&:focus {
 			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&::placeholder {

package/src/snackbar/style.scss

@@ -22,7 +22,7 @@
 	&:focus {
 		box-shadow:
 			0 0 0 1px $white,
-			0 0 0 3px var(--wp-admin-theme-color);
+			0 0 0 3px $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
@@ -64,7 +64,7 @@
 		}
 
 		&:hover {
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 	}
 }

package/src/spacer/test/index.tsx

@@ -9,64 +9,77 @@ import { render, screen } from '@testing-library/react';
 import { Spacer } from '../index';
 
 describe( 'props', () => {
-	beforeEach( () => {
+	test( 'should render correctly', () => {
 		render( <Spacer data-testid="spacer" /> );
-	} );
 
-	test( 'should render correctly', () => {
 		expect( screen.getByTestId( 'spacer' ) ).toMatchSnapshot();
 	} );
 
 	test( 'should render margin', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer margin={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginX', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginX={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginY', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginY={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginTop', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginTop={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginBottom', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginBottom={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginLeft', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginLeft={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginRight', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginRight={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should override margin props from less to more specific', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				margin={ 10 }
@@ -76,63 +89,79 @@ describe( 'props', () => {
 				data-testid="customized-spacer"
 			/>
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render padding', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer padding={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingX', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingX={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingY', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingY={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingTop', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingTop={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingBottom', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer paddingBottom={ 5 } data-testid="customized-spacer" />
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingLeft', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingLeft={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingRight', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingRight={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should override padding props from less to more specific', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				padding={ 10 }
@@ -142,6 +171,7 @@ describe( 'props', () => {
 				data-testid="customized-spacer"
 			/>
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );

package/src/spinner/styles.ts

@@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: var( --wp-admin-theme-color );
+	color: ${ COLORS.ui.theme };
 	overflow: visible;
 `;