@wordpress/components 36.0.1 → 37.0.0

package/src/validated-form-controls/components/toggle-group-control.tsx

@@ -16,10 +16,7 @@ const UnforwardedValidatedToggleGroupControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof ToggleGroupControl >,
-		'__next40pxDefaultSize'
-	> &
+	}: React.ComponentProps< typeof ToggleGroupControl > &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
@@ -35,11 +32,7 @@ const UnforwardedValidatedToggleGroupControl = (
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
-				<ToggleGroupControl
-					__next40pxDefaultSize
-					ref={ forwardedRef }
-					{ ...restProps }
-				/>
+				<ToggleGroupControl ref={ forwardedRef } { ...restProps } />
 			</ControlWithError>
 			<input
 				className="components-validated-control__error-delegate"

package/src/validated-form-controls/control-with-error.tsx

@@ -310,7 +310,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 				),
 				required,
 			} ) }
-			<div aria-live="polite">{ visibleMessage }</div>
+			{ visibleMessage }
 		</div>
 	);
 }

package/src/validated-form-controls/style.scss

@@ -44,6 +44,13 @@
 		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
+
+	// For ContentEditableControl
+	&:has(input:invalid[data-validity-visible])
+	.components-validated-control__content-editable [role="textbox"] {
+		--wp-components-color-accent: #{$alert-red};
+		border-color: $alert-red;
+	}
 }
 
 .components-validated-control__error-delegate {

package/src/validated-form-controls/test/content-editable-control.tsx

@@ -0,0 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedContentEditableControl } from '../components';
+
+describe( 'ValidatedContentEditableControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedContentEditableControl
+				label="Bio"
+				help="A short bio."
+				value=""
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'textbox', { name: 'Bio' } )
+		).toHaveAccessibleDescription( 'A short bio.' );
+	} );
+
+	// The validity (and its description) lives on the hidden delegate input,
+	// not the editable that assistive technology interacts with. This is the
+	// same pre-existing limitation as the other delegate-based controls,
+	// tracked in #76741.
+	// eslint-disable-next-line jest/no-disabled-tests
+	it.skip( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedContentEditableControl
+					label="Bio"
+					help="A short bio."
+					value=""
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		// The hidden validity delegate is also a textbox, so scope the query
+		// to the accessible name only the labeled editable has.
+		const textbox = screen.getByRole( 'textbox', {
+			name: /^Bio/,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( textbox ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( textbox ).toHaveAccessibleDescription(
+			expect.stringContaining( 'A short bio.' )
+		);
+	} );
+
+	it( 'should move focus to the editable when the delegate is focused', async () => {
+		render(
+			<ValidatedContentEditableControl label="Bio" value="" required />
+		);
+
+		const textbox = screen.getByRole( 'textbox', { name: /^Bio/ } );
+
+		// Constraint validation lands focus on the hidden delegate; the
+		// wrapper forwards it to the editable the user actually interacts
+		// with.
+		screen.getByRole( 'textbox', { name: '' } ).focus();
+
+		await waitFor( () => expect( textbox ).toHaveFocus() );
+	} );
+} );

package/src/view/README.md

@@ -29,9 +29,3 @@ function Example() {
 **Type**: `string`,`E`
 
 Render the component as another React Component or HTML Element.
-
-### css
-
-**Type**: `InterpolatedCSS`
-
-Render custom CSS using the style system.

package/src/view/component.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
@@ -12,14 +7,28 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { PolymorphicElement } from '../utils/polymorphic-element';
 
-const PolymorphicDiv = styled.div``;
+type ViewProps< T extends React.ElementType > = WordPressComponentProps<
+	{},
+	T
+> & {
+	/**
+	 * Legacy Emotion prop accepted as a no-op by `View` so it does not leak to
+	 * the rendered element.
+	 *
+	 * @deprecated This prop no longer has any effect.
+	 * @ignore
+	 */
+	css?: unknown;
+};
 
 function UnforwardedView< T extends React.ElementType = 'div' >(
-	{ as, ...restProps }: WordPressComponentProps< {}, T >,
+	{ css, ...restProps }: ViewProps< T >,
 	ref: React.ForwardedRef< any >
 ) {
-	return <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;
+	void css;
+	return <PolymorphicElement ref={ ref } { ...restProps } />;
 }
 
 /**

package/src/view/test/__snapshots__/index.js.snap

@@ -1,51 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`props should render as another element 1`] = `
+exports[`props should ignore legacy css prop styles (array) 1`] = `
 <div>
   <p
-    class="css-1ragr82-PolymorphicDiv emotion-0"
+    data-testid="custom-css-array-view"
   >
     <span />
   </p>
 </div>
 `;
 
-exports[`props should render correctly 1`] = `
+exports[`props should ignore legacy css prop styles (object) 1`] = `
 <div>
-  <div
-    class="css-1ragr82-PolymorphicDiv emotion-0"
+  <p
+    data-testid="custom-css-object-view"
   >
     <span />
-  </div>
+  </p>
 </div>
 `;
 
-exports[`props should render with custom styles (Array) 1`] = `
+exports[`props should ignore legacy css prop styles (string) 1`] = `
 <div>
   <p
-    class="css-1ragr82-PolymorphicDiv emotion-0"
+    data-testid="custom-css-string-view"
   >
     <span />
   </p>
 </div>
 `;
 
-exports[`props should render with custom styles (object) 1`] = `
+exports[`props should render as a custom component 1`] = `
 <div>
-  <p
-    class="css-1ragr82-PolymorphicDiv emotion-0"
+  <section
+    class="custom-class"
+    data-custom-component="true"
+    data-testid="custom-view"
   >
     <span />
-  </p>
+  </section>
 </div>
 `;
 
-exports[`props should render with custom styles (string) 1`] = `
+exports[`props should render as another element 1`] = `
 <div>
-  <p
-    class="css-1ragr82-PolymorphicDiv emotion-0"
-  >
+  <p>
     <span />
   </p>
 </div>
 `;
+
+exports[`props should render correctly 1`] = `
+<div>
+  <div>
+    <span />
+  </div>
+</div>
+`;

package/src/view/test/index.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,10 +32,50 @@ describe( 'props', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render with custom styles (string)', () => {
+	test( 'should render as a custom component', () => {
+		const CustomComponent = forwardRef( ( props, ref ) => (
+			<section ref={ ref } data-custom-component { ...props } />
+		) );
+
+		const ref = jest.fn();
+		const { container } = render(
+			<View
+				as={ CustomComponent }
+				className="custom-class"
+				data-testid="custom-view"
+				ref={ ref }
+			>
+				<span />
+			</View>
+		);
+
+		const customView = screen.getByTestId( 'custom-view' );
+		expect( container ).toMatchSnapshot();
+		expect( ref ).toHaveBeenCalledWith( customView );
+	} );
+
+	test( 'should preserve SVG attributes', () => {
+		render(
+			<View
+				as="svg"
+				data-testid="svg-view"
+				fill="currentColor"
+				strokeWidth={ 2 }
+				viewBox="0 0 24 24"
+			/>
+		);
+
+		const svgView = screen.getByTestId( 'svg-view' );
+		expect( svgView ).toHaveAttribute( 'fill', 'currentColor' );
+		expect( svgView ).toHaveAttribute( 'stroke-width', '2' );
+		expect( svgView ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+	} );
+
+	test( 'should ignore legacy css prop styles (string)', () => {
 		const { container } = render(
 			<View
 				as="p"
+				data-testid="custom-css-string-view"
 				css={ `
 					background: pink;
 				` }
@@ -39,12 +84,16 @@ describe( 'props', () => {
 			</View>
 		);
 		expect( container ).toMatchSnapshot();
+		expect(
+			screen.getByTestId( 'custom-css-string-view' )
+		).not.toHaveAttribute( 'css' );
 	} );
 
-	test( 'should render with custom styles (object)', () => {
+	test( 'should ignore legacy css prop styles (object)', () => {
 		const { container } = render(
 			<View
 				as="p"
+				data-testid="custom-css-object-view"
 				css={ {
 					background: 'pink',
 				} }
@@ -53,12 +102,16 @@ describe( 'props', () => {
 			</View>
 		);
 		expect( container ).toMatchSnapshot();
+		expect(
+			screen.getByTestId( 'custom-css-object-view' )
+		).not.toHaveAttribute( 'css' );
 	} );
 
-	test( 'should render with custom styles (Array)', () => {
+	test( 'should ignore legacy css prop styles (array)', () => {
 		const { container } = render(
 			<View
 				as="p"
+				data-testid="custom-css-array-view"
 				css={ [
 					{
 						background: 'pink',
@@ -70,5 +123,8 @@ describe( 'props', () => {
 			</View>
 		);
 		expect( container ).toMatchSnapshot();
+		expect(
+			screen.getByTestId( 'custom-css-array-view' )
+		).not.toHaveAttribute( 'css' );
 	} );
 } );

package/src/visually-hidden/stories/index.story.tsx

@@ -17,7 +17,7 @@ const meta: Meta< typeof VisuallyHidden > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `VisuallyHidden` from `@wordpress/ui` instead.',
+			notes: 'Use [`VisuallyHidden`](?path=/docs/design-system-components-visuallyhidden--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/build/flex/styles.cjs

@@ -1,82 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/flex/styles.ts
-var styles_exports = {};
-__export(styles_exports, {
-  Flex: () => Flex,
-  Item: () => Item,
-  ItemsColumn: () => ItemsColumn,
-  ItemsRow: () => ItemsRow,
-  block: () => block
-});
-module.exports = __toCommonJS(styles_exports);
-var import_react = require("@emotion/react");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-var Flex = process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "a57899-Flex",
-  styles: "display:flex;label:Flex;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var Item = process.env.NODE_ENV === "production" ? {
-  name: "qgaee5",
-  styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0"
-} : {
-  name: "14ac8g8-Item",
-  styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;label:Item;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var block = process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "1ya6i3g-block",
-  styles: "flex:1;label:block;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQndCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var ItemsColumn = process.env.NODE_ENV === "production" ? {
-  name: "13nosa1",
-  styles: ">*{min-height:0;}"
-} : {
-  name: "9k4k7f-ItemsColumn",
-  styles: ">*{min-height:0;};label:ItemsColumn;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzhCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var ItemsRow = process.env.NODE_ENV === "production" ? {
-  name: "1pwxzk4",
-  styles: ">*{min-width:0;}"
-} : {
-  name: "1ozeagb-ItemsRow",
-  styles: ">*{min-width:0;};label:ItemsRow;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QzJCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Flex,
-  Item,
-  ItemsColumn,
-  ItemsRow,
-  block
-});
-//# sourceMappingURL=styles.cjs.map

package/build/flex/styles.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/flex/styles.ts"],
-  "sourcesContent": ["function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"; }\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nexport const Flex = process.env.NODE_ENV === \"production\" ? {\n  name: \"zjik7\",\n  styles: \"display:flex\"\n} : {\n  name: \"a57899-Flex\",\n  styles: \"display:flex;label:Flex;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};\nexport const Item = process.env.NODE_ENV === \"production\" ? {\n  name: \"qgaee5\",\n  styles: \"display:block;max-height:100%;max-width:100%;min-height:0;min-width:0\"\n} : {\n  name: \"14ac8g8-Item\",\n  styles: \"display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;label:Item;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};\nexport const block = process.env.NODE_ENV === \"production\" ? {\n  name: \"82a6rk\",\n  styles: \"flex:1\"\n} : {\n  name: \"1ya6i3g-block\",\n  styles: \"flex:1;label:block;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQndCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};\n\n/**\n * Workaround to optimize DOM rendering.\n * We'll enhance alignment with naive parent flex assumptions.\n *\n * Trade-off:\n * Far less DOM less. However, UI rendering is not as reliable.\n */\n\n/**\n * Improves stability of width/height rendering.\n * https://github.com/ItsJonQ/g2/pull/149\n */\nexport const ItemsColumn = process.env.NODE_ENV === \"production\" ? {\n  name: \"13nosa1\",\n  styles: \">*{min-height:0;}\"\n} : {\n  name: \"9k4k7f-ItemsColumn\",\n  styles: \">*{min-height:0;};label:ItemsColumn;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzhCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};\nexport const ItemsRow = process.env.NODE_ENV === \"production\" ? {\n  name: \"1pwxzk4\",\n  styles: \">*{min-width:0;}\"\n} : {\n  name: \"1ozeagb-ItemsRow\",\n  styles: \">*{min-width:0;};label:ItemsRow;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QzJCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAoB;AAJpB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAKjR,IAAM,OAAO,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;AACO,IAAM,OAAO,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;AACO,IAAM,QAAQ,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC3D,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;AAcO,IAAM,cAAc,QAAQ,IAAI,aAAa,eAAe;AAAA,EACjE,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;AACO,IAAM,WAAW,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC9D,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;",
-  "names": []
-}