@wordpress/components 36.0.1 → 37.0.0

package/src/card/test/index.tsx

@@ -14,6 +14,39 @@ import {
 	CardHeader,
 	CardMedia,
 } from '../';
+import { useCx } from '../../utils/hooks/use-cx';
+import * as styles from '../styles';
+
+function EmotionStylePrimer( {
+	styleFragment,
+}: {
+	styleFragment: Parameters< ReturnType< typeof useCx > >[ 0 ];
+} ) {
+	const cx = useCx();
+
+	return <div className={ cx( styleFragment ) } />;
+}
+
+function expectComposedEmotionClassName(
+	element: HTMLElement,
+	styleLabels: string[]
+) {
+	const matchingClassNames = element.className
+		.split( /\s+/ )
+		.filter( ( className ) => className.startsWith( 'css-' ) )
+		.filter( ( className ) =>
+			styleLabels.some( ( styleLabel ) =>
+				className.includes( styleLabel )
+			)
+		);
+
+	expect( matchingClassNames ).toHaveLength( 1 );
+	for ( const styleLabel of styleLabels ) {
+		expect( matchingClassNames[ 0 ] ).toEqual(
+			expect.stringContaining( styleLabel )
+		);
+	}
+}
 
 describe( 'Card', () => {
 	describe( 'Card component', () => {
@@ -57,6 +90,22 @@ describe( 'Card', () => {
 			);
 		} );
 
+		it( 'should remove borders regardless of Emotion insertion order', () => {
+			render(
+				<EmotionStylePrimer styleFragment={ styles.boxShadowless } />
+			);
+			render(
+				<Card data-testid="card-wrapper" isBorderless>
+					Code is Poetry
+				</Card>
+			);
+
+			const card = screen.getByTestId( 'card-wrapper' );
+
+			expectComposedEmotionClassName( card, [ 'Card', 'boxShadowless' ] );
+			expect( window.getComputedStyle( card ).boxShadow ).toBe( 'none' );
+		} );
+
 		it( 'should add rounded border when the isRounded prop is true', () => {
 			render(
 				<Card data-testid="card-rounded" isRounded>
@@ -181,6 +230,30 @@ describe( 'Card', () => {
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
+
+			it( 'should remove borders regardless of Emotion insertion order', () => {
+				expect.hasAssertions();
+
+				render(
+					<EmotionStylePrimer styleFragment={ styles.borderless } />
+				);
+				render(
+					<Card>
+						<CardHeader data-testid="card-header" isBorderless>
+							Header
+						</CardHeader>
+						<CardBody>Body</CardBody>
+					</Card>
+				);
+
+				expectComposedEmotionClassName(
+					screen.getByTestId( 'card-header' ),
+					[ 'Header', 'borderRadius', 'borderColor', 'borderless' ]
+				);
+				expect( screen.getByTestId( 'card-header' ) ).toHaveStyle(
+					'border: none'
+				);
+			} );
 		} );
 
 		describe( 'CardFooter', () => {
@@ -199,6 +272,30 @@ describe( 'Card', () => {
 				);
 				expect( container ).toMatchDiffSnapshot( containerWithFlexEnd );
 			} );
+
+			it( 'should remove borders regardless of Emotion insertion order', () => {
+				expect.hasAssertions();
+
+				render(
+					<EmotionStylePrimer styleFragment={ styles.borderless } />
+				);
+				render(
+					<Card>
+						<CardBody>Body</CardBody>
+						<CardFooter data-testid="card-footer" isBorderless>
+							Footer
+						</CardFooter>
+					</Card>
+				);
+
+				expectComposedEmotionClassName(
+					screen.getByTestId( 'card-footer' ),
+					[ 'Footer', 'borderRadius', 'borderColor', 'borderless' ]
+				);
+				expect( screen.getByTestId( 'card-footer' ) ).toHaveStyle(
+					'border: none'
+				);
+			} );
 		} );
 
 		describe( 'CardBody', () => {

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof CheckboxControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `CheckboxControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`CheckboxControl`](?path=/docs/design-system-components-form-primitives-checkbox--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -13,14 +13,29 @@
+@@ -14,14 +14,29 @@
           <span
             class="components-checkbox-control__input-container"
           >

package/src/circular-option-picker/style.scss

@@ -67,7 +67,6 @@ $color-palette-circle-spacing: 12px;
 	// Sit below the option's color and selected-state UI.
 	z-index: -1;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
-	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 

package/src/color-palette/styles.ts

@@ -12,7 +12,7 @@ import { CONFIG } from '../utils';
 export const ColorHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: 24px;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/color-picker/component.tsx

@@ -247,6 +247,10 @@ const UnconnectedColorPicker = (
 	);
 };
 
+/**
+ * `ColorPicker` lets users select a color from a visual color surface, or by
+ * editing its hex, RGB, or HSL values.
+ */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,
 	'ColorPicker'

package/src/color-picker/hex-input.tsx

@@ -58,7 +58,6 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
-			size="__unstable-large"
 			__unstableStateReducer={ stateReducer }
 			__unstableInputWidth="9em"
 		/>

package/src/color-picker/input-with-slider.tsx

@@ -31,7 +31,6 @@ export const InputWithSlider = ( {
 	return (
 		<HStack spacing={ 4 }>
 			<NumberControlWrapper
-				__next40pxDefaultSize
 				min={ min }
 				max={ max }
 				label={ label }
@@ -48,7 +47,6 @@ export const InputWithSlider = ( {
 				spinControls="none"
 			/>
 			<RangeControl
-				__next40pxDefaultSize
 				label={ label }
 				hideLabelFromVision
 				min={ min }

package/src/color-picker/stories/index.story.tsx

@@ -12,6 +12,11 @@ import { ColorPicker } from '../component';
 const meta: Meta< typeof ColorPicker > = {
 	tags: [ 'manifest' ],
 	component: ColorPicker,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <ColorPicker { ...args } />,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {

package/src/combobox-control/README.md

@@ -34,7 +34,6 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -133,14 +132,6 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   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`
-
 ## Related components
 
 -   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.

package/src/combobox-control/index.tsx

@@ -32,9 +32,7 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 import Spinner from '../spinner';
 
 const noop = () => {};
@@ -94,7 +92,6 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
- * 			__next40pxDefaultSize
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }
@@ -115,7 +112,6 @@ const getIndexOfMatchingSuggestion = (
  */
 function ComboboxControl( props: ComboboxControlProps ) {
 	const {
-		__next40pxDefaultSize = false,
 		value: valueProp,
 		label,
 		options,
@@ -132,7 +128,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		__experimentalRenderItem,
 		expandOnFocus = true,
 		placeholder,
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
@@ -315,12 +311,6 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		}
 	}, [ matchingSuggestions, isExpanded ] );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'ComboboxControl',
-		__next40pxDefaultSize,
-		size: undefined,
-	} );
-
 	// Disable reason: There is no appropriate role which describes the
 	// input container intended accessible usability.
 	// TODO: Refactor click detection to use blur to stop propagation.
@@ -339,9 +329,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 					tabIndex={ -1 }
 					onKeyDown={ onKeyDown }
 				>
-					<InputWrapperFlex
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-					>
+					<InputWrapperFlex>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"

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

@@ -75,7 +75,6 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 	return (
 		<>
 			<ComboboxControl
-				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( ...changeArgs ) => {
@@ -88,7 +87,6 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Country',
 	options: countryOptions,
 	help: 'Help text to describe the control.',

package/src/combobox-control/styles.ts

@@ -1,30 +1,9 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
 import { Flex } from '../flex';
 import { space } from '../utils/space';
-import type { ComboboxControlProps } from './types';
-
-const deprecatedDefaultSize = ( {
-	__next40pxDefaultSize,
-}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
-	! __next40pxDefaultSize &&
-	css`
-		height: 28px; // 30px - 2px vertical borders on parent container
-		padding-left: ${ space( 1 ) };
-		padding-right: ${ space( 1 ) };
-	`;
 
 export const InputWrapperFlex = styled( Flex )`
 	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
-
-	${ deprecatedDefaultSize }
 `;

package/src/combobox-control/test/index.tsx

@@ -58,7 +58,7 @@ const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
 const ComboboxControl = ( props: ComboboxControlProps ) => {
-	return <_ComboboxControl { ...props } __next40pxDefaultSize />;
+	return <_ComboboxControl { ...props } />;
 };
 
 const ControlledComboboxControl = ( {

package/src/combobox-control/types.ts

@@ -37,7 +37,8 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

package/src/confirm-dialog/stories/index.story.tsx

@@ -36,7 +36,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `AlertDialog` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`AlertDialog`](?path=/docs/design-system-components-alertdialog--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/content-editable-control/README.md

@@ -0,0 +1,88 @@
+# ContentEditableControl
+
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
+
+🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project.
+
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-contenteditablecontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+A presentational `contentEditable` form control: a labeled editable element
+rendered with the chrome (`BaseControl` + label) shared by the other form
+controls in the package.
+
+Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control
+is intended for standalone form fields (DataForms, sidebar inputs, etc.).
+It is deliberately **presentational only** and has no `@wordpress/rich-text`
+dependency: the editable behavior (value, formatting, keyboard shortcuts)
+and any focus/selection tracking are owned by the consumer, which wires them
+through the forwarded ref and native event props (see the richtext DataForm
+control in `@wordpress/dataviews` for the canonical assembly).
+
+```jsx
+// The rich-text "assembly" lives in the consumer.
+<ContentEditableControl
+    label="Caption"
+    ref={ mergedRef }
+    onFocus={ onEditableFocus }
+    onBlur={ onEditableBlur }
+/>
+```
+
+## Props
+
+### `className`
+
+ - Type: `string`
+ - Required: No
+
+### `disabled`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Whether the field is non-editable. A disabled field is not
+`contentEditable` (so it is neither focusable nor editable) and exposes
+`aria-disabled` to assistive technology.
+
+### `hideLabelFromVision`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+If true, the label will only be visible to screen readers.
+
+### `help`
+
+ - Type: `ReactNode`
+ - Required: No
+
+Additional description for the control.
+
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+
+### `label`
+
+ - Type: `string`
+ - Required: Yes
+
+Label text for the control.
+
+### `placeholder`
+
+ - Type: `string`
+ - Required: No
+
+Placeholder text shown while the element has no content. Exposed to
+assistive technology via `aria-placeholder` and drawn by the stylesheet
+when the element is empty.
+
+### `required`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Whether the field is required. Exposed to assistive technology via
+`aria-required`.

package/src/content-editable-control/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "ContentEditableControl",
+	"filePath": "./index.tsx"
+}

package/src/content-editable-control/index.tsx

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import { useBaseControlProps } from '../base-control/hooks';
+import type { WordPressComponentProps } from '../context';
+import type { ContentEditableControlProps } from './types';
+import styles from './style.module.scss';
+
+function UnforwardedContentEditableControl(
+	{
+		label,
+		id,
+		className,
+		help,
+		hideLabelFromVision,
+		disabled,
+		required,
+		placeholder,
+		...additionalProps
+	}: WordPressComponentProps< ContentEditableControlProps, 'div', false >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
+	const { baseControlProps, controlProps } = useBaseControlProps( {
+		id,
+		className,
+		help,
+		hideLabelFromVision,
+		label,
+	} );
+
+	return (
+		<BaseControl { ...baseControlProps }>
+			<div
+				className={ styles.editable }
+				role="textbox"
+				aria-multiline
+				aria-label={ label }
+				aria-placeholder={ placeholder || undefined }
+				aria-disabled={ disabled || undefined }
+				aria-required={ required || undefined }
+				ref={ forwardedRef }
+				// A disabled field is not `contentEditable`, which also
+				// removes it from the tab order.
+				contentEditable={ ! disabled }
+				suppressContentEditableWarning
+				{ ...additionalProps }
+				{ ...controlProps }
+			/>
+		</BaseControl>
+	);
+}
+
+/**
+ * A presentational `contentEditable` form control: a labeled editable element
+ * rendered with the chrome (`BaseControl` + label) shared by the other form
+ * controls in the package.
+ *
+ * Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control
+ * is intended for standalone form fields (DataForms, sidebar inputs, etc.).
+ * It is deliberately **presentational only** and has no `@wordpress/rich-text`
+ * dependency: the editable behavior (value, formatting, keyboard shortcuts)
+ * and any focus/selection tracking are owned by the consumer, which wires them
+ * through the forwarded ref and native event props (see the richtext DataForm
+ * control in `@wordpress/dataviews` for the canonical assembly).
+ *
+ * ```jsx
+ * // The rich-text "assembly" lives in the consumer.
+ * <ContentEditableControl
+ *     label="Caption"
+ *     ref={ mergedRef }
+ *     onFocus={ onEditableFocus }
+ *     onBlur={ onEditableBlur }
+ * />
+ * ```
+ */
+export const ContentEditableControl = forwardRef(
+	UnforwardedContentEditableControl
+);
+
+export default ContentEditableControl;

package/src/content-editable-control/stories/index.story.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+/**
+ * Internal dependencies
+ */
+import ContentEditableControl from '..';
+
+const meta: Meta< typeof ContentEditableControl > = {
+	id: 'components-contenteditablecontrol',
+	title: 'Components/Selection & Input/Common/ContentEditableControl',
+	component: ContentEditableControl,
+	tags: [ 'status-private' ],
+	parameters: {
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof ContentEditableControl >;
+
+export const Default: Story = {
+	args: {
+		label: 'Title',
+		placeholder: 'Add a title…',
+	},
+};

package/src/content-editable-control/style.module.scss

@@ -0,0 +1,34 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.editable {
+	width: 100%;
+	background: $components-color-background;
+	color: $components-color-foreground;
+	@include input-control( $components-color-accent );
+	border-color: $components-color-border;
+
+	// `::placeholder` only applies to native form fields, so draw the text
+	// from the `aria-placeholder` attribute while the element has no content.
+	&[aria-placeholder]:empty::before {
+		content: attr(aria-placeholder);
+		color: $components-color-dark-gray-placeholder;
+	}
+
+	min-height: $grid-unit-50;
+
+	// Subtract 1px to account for the border, which isn't included on the element
+	// on newer components like InputControl, SelectControl, etc.
+	// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+	padding: $grid-unit-15;
+
+	// Match the disabled treatment of native form controls (see the
+	// `&:disabled` rules in the textarea/input control styles).
+	&[aria-disabled="true"] {
+		background: $components-color-gray-100;
+		border-color: $components-color-gray-300;
+		color: $components-color-gray-700;
+		cursor: default;
+	}
+}