@wordpress/components 37.0.0 → 38.0.0

package/src/tools-panel/tools-panel/hook.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -12,10 +17,9 @@ import {
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type {
 	ToolsPanelItem,
 	ToolsPanelMenuItemKey,
@@ -25,8 +29,6 @@ import type {
 	ResetAllFilter,
 } from '../types';
 
-const DEFAULT_COLUMNS = 2;
-
 type PanelItemsState = {
 	panelItems: ToolsPanelItem[];
 	menuItemOrder: string[];
@@ -339,17 +341,13 @@ export function useToolsPanel(
 		);
 	}, [ menuItems ] );
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx(
-			styles.getToolsPanelStyles( {
-				columns: DEFAULT_COLUMNS,
-				hasInnerWrapper,
-				areAllOptionalControlsHidden,
-			} ),
-			className
-		);
-	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
+	const classes = clsx(
+		styles[ 'tools-panel' ],
+		hasInnerWrapper && styles[ 'tools-panel-with-inner-wrapper' ],
+		areAllOptionalControlsHidden &&
+			styles[ 'tools-panel-hidden-inner-wrapper' ],
+		className
+	);
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.

package/src/tools-panel/tools-panel-header/component.tsx

@@ -19,9 +19,9 @@ import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
 	ToolsPanelHeaderProps,
@@ -36,7 +36,11 @@ const DefaultControlsGroup = ( {
 		return null;
 	}
 
-	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
+	const resetSuffix = (
+		<span aria-hidden className={ styles[ 'reset-label' ] }>
+			{ __( 'Reset' ) }
+		</span>
+	);
 
 	return (
 		<>

package/src/tools-panel/tools-panel-header/hook.ts

@@ -1,16 +1,15 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import { useToolsPanelContext } from '../context';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelHeaderProps } from '../types';
 
 export function useToolsPanelHeader(
@@ -22,35 +21,18 @@ export function useToolsPanelHeader(
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanelHeader' );
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.ToolsPanelHeader, className );
-	}, [ className, cx ] );
-
-	const dropdownMenuClassName = useMemo( () => {
-		return cx( styles.DropdownMenu );
-	}, [ cx ] );
-
-	const headingClassName = useMemo( () => {
-		return cx( styles.ToolsPanelHeading );
-	}, [ cx ] );
-
-	const defaultControlsItemClassName = useMemo( () => {
-		return cx( styles.DefaultControlsItem );
-	}, [ cx ] );
-
 	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
 		useToolsPanelContext();
 
 	return {
 		...otherProps,
 		areAllOptionalControlsHidden,
-		defaultControlsItemClassName,
-		dropdownMenuClassName,
+		defaultControlsItemClassName: styles[ 'default-controls-item' ],
+		dropdownMenuClassName: styles[ 'dropdown-menu' ],
 		hasMenuItems,
-		headingClassName,
+		headingClassName: styles[ 'tools-panel-heading' ],
 		headingLevel,
 		menuItems,
-		className: classes,
+		className: clsx( styles[ 'tools-panel-header' ], className ),
 	};
 }

package/src/tools-panel/tools-panel-item/hook.ts

@@ -1,22 +1,21 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import {
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-} from '@wordpress/element';
+import { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import { useToolsPanelContext } from '../context';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelItemProps } from '../types';
 
 const noop = () => {};
@@ -174,32 +173,15 @@ export function useToolsPanelItem(
 		? menuItems?.[ menuGroup ]?.[ label ] !== undefined
 		: isMenuItemChecked;
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		const shouldApplyPlaceholderStyles =
-			shouldRenderPlaceholder && ! isShown;
-		const firstItemStyle =
-			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
-		const lastItemStyle =
-			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
-		return cx(
-			styles.ToolsPanelItem,
-			shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
-			! shouldApplyPlaceholderStyles && className,
-			firstItemStyle,
-			lastItemStyle
-		);
-	}, [
-		isShown,
-		shouldRenderPlaceholder,
-		className,
-		cx,
-		firstDisplayedItem,
-		lastDisplayedItem,
-		__experimentalFirstVisibleItemClass,
-		__experimentalLastVisibleItemClass,
-		label,
-	] );
+	const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && ! isShown;
+	const classes = clsx(
+		styles[ 'tools-panel-item' ],
+		shouldApplyPlaceholderStyles &&
+			styles[ 'tools-panel-item-placeholder' ],
+		! shouldApplyPlaceholderStyles && className,
+		firstDisplayedItem === label && __experimentalFirstVisibleItemClass,
+		lastDisplayedItem === label && __experimentalLastVisibleItemClass
+	);
 
 	return {
 		...otherProps,

package/src/tooltip/test/index.tsx

@@ -323,7 +323,7 @@ describe( 'Tooltip', () => {
 			// "Tooltips appear instantly if another tooltip has just been hidden."
 			// See: https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435495655
 			await sleep( 3000 );
-		} );
+		}, 10_000 );
 
 		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
 			const onMouseEnterMock = jest.fn();

package/src/tree-grid/test/__snapshots__/cell.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/index.tsx.snap

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/row.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
 <div>

package/src/tree-select/README.md

@@ -154,7 +154,7 @@ The id of the currently selected node.
 
 ### `size`
 
- - Type: `"default" | "small" | "compact" | "__unstable-large"`
+ - Type: `"default" | "small" | "compact"`
  - Required: No
  - Default: `'default'`
 

package/src/tree-select/types.ts

@@ -18,15 +18,8 @@ export interface Tree {
 export interface TreeSelectProps
 	extends Omit<
 		SelectControlSingleSelectionProps,
-		'value' | 'multiple' | 'onChange' | '__next40pxDefaultSize'
+		'value' | 'multiple' | 'onChange'
 	> {
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: boolean;
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */

package/src/unit-control/types.ts

@@ -70,10 +70,7 @@ export type UnitSelectControlProps = {
 
 export type UnitControlProps = Pick< InputControlProps, 'size' > &
 	Omit< UnitSelectControlProps, 'size' | 'unit' > &
-	Omit<
-		NumberControlProps,
-		'spinControls' | 'suffix' | 'type' | '__next40pxDefaultSize'
-	> & {
+	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *
@@ -110,18 +107,4 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
 		 * Callback when either the quantity or the unit inputs gains focus.
 		 */
 		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
-		 * @ignore
-		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__next40pxDefaultSize?: boolean;
 	};

package/src/utils/theme-variables.scss

@@ -37,3 +37,4 @@ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-b
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };
 $components-color-disabled: #{ $components-color-gray-600 };
+$components-color-focus: var(--wp-components-color-accent, var(--wpds-color-stroke-focus));

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render alignment 1`] = `
 <div>

package/src/validated-form-controls/components/stories/overview.story.tsx

@@ -365,6 +365,57 @@ export const ShowingErrorsAtArbitraryTimes: StoryObj<
 	},
 };
 
+/**
+ * A synthetic `invalid` event can be dispatched to reveal an existing error
+ * without moving focus.
+ */
+export const ShowingErrorsWithoutMovingFocus: StoryObj<
+	typeof ValidatedInputControl
+> = {
+	args: {
+		label: 'Text',
+		required: true,
+		help: 'The word "error" will trigger an error.',
+	},
+	decorators: [],
+	render: function Template( { ...args } ) {
+		const [ text, setText ] = useState< string | undefined >( 'error' );
+		const ref = useRef< HTMLInputElement >( null );
+
+		return (
+			<VStack spacing={ 4 } alignment="left">
+				<ValidatedInputControl
+					ref={ ref }
+					{ ...args }
+					value={ text }
+					onChange={ setText }
+					customValidity={
+						text === 'error'
+							? {
+									type: 'invalid',
+									message: 'The word "error" is not allowed.',
+							  }
+							: undefined
+					}
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ () =>
+						ref.current?.dispatchEvent(
+							new Event( 'invalid', {
+								cancelable: true,
+							} )
+						)
+					}
+				>
+					Show errors
+				</Button>
+			</VStack>
+		);
+	},
+};
+
 /**
  * A `form` wrapper and `type="submit"` button can be used to force validation when
  * the user tries to commit their changes, while still allowing the modal to be closed by canceling.

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

@@ -124,6 +124,15 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		const suppressNativePopover = ( event: Event ) => {
 			event.preventDefault();
 
+			// Only trusted `invalid` events (a form submission or a
+			// `reportValidity()` call) mirror the native focus behavior.
+			// Consumers may dispatch a synthetic `invalid` event to reveal
+			// this control's error message without disturbing the user's
+			// place in the form, so it must not move focus.
+			if ( ! event.isTrusted ) {
+				return;
+			}
+
 			const target = event.target as ValidityTarget;
 			const firstErrorInForm = Array.from(
 				target.form?.elements ?? []

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

@@ -21,7 +21,7 @@
 	.components-combobox-control__suggestions-container:has(
 	input:invalid[data-validity-visible]
 ):not(:has([aria-expanded="true"])) {
-		--wp-components-color-accent: #{$alert-red};
+		--wp-admin-theme-color: #{$alert-red};
 	}
 }
 
@@ -41,14 +41,14 @@
 
 	// For FormTokenField
 	&:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded="true"])) {
-		--wp-components-color-accent: #{$alert-red};
+		--wp-admin-theme-color: #{$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};
+		--wp-admin-theme-color: #{$alert-red};
 		border-color: $alert-red;
 	}
 }

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

@@ -542,5 +542,47 @@ describe( 'ControlWithError', () => {
 				).toHaveFocus();
 			} );
 		} );
+
+		it( 'should show the error message without moving focus on a synthetic `invalid` event', async () => {
+			const user = userEvent.setup();
+			function ValidatedInputControlWithRef(
+				props: React.ComponentProps< typeof ValidatedInputControl >
+			) {
+				const ref = useRef< HTMLInputElement >( null );
+				return (
+					<>
+						<ValidatedInputControl ref={ ref } { ...props } />
+						<button
+							type="button"
+							onClick={ () =>
+								ref.current?.dispatchEvent(
+									new Event( 'invalid', {
+										cancelable: true,
+									} )
+								)
+							}
+						>
+							Show errors
+						</button>
+					</>
+				);
+			}
+
+			render( <ValidatedInputControlWithRef label="Text" required /> );
+
+			const button = screen.getByRole( 'button', {
+				name: 'Show errors',
+			} );
+			await user.click( button );
+
+			// The error message is revealed...
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'Constraints not satisfied' )
+				).toBeVisible();
+			} );
+			// ...but focus is not moved to the invalid field.
+			expect( button ).toHaveFocus();
+		} );
 	} );
 } );

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should ignore legacy css prop styles (array) 1`] = `
 <div>

package/build/confirm-dialog/styles.cjs

@@ -1,42 +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/confirm-dialog/styles.ts
-var styles_exports = {};
-__export(styles_exports, {
-  wrapper: () => wrapper
-});
-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 wrapper = process.env.NODE_ENV === "production" ? {
-  name: "7g5ii0",
-  styles: "&&{z-index:1000001;}"
-} : {
-  name: "1gucf3d-wrapper",
-  styles: "&&{z-index:1000001;};label:wrapper;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhMEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFRoZSB6LWluZGV4IGZvciBDb25maXJtRGlhbG9nIGlzIGJlaW5nIHNldCBoZXJlIGluc3RlYWQgb2YgaW5cbiAqIHBhY2thZ2VzL2Jhc2Utc3R5bGVzL196LWluZGV4LnNjc3MsIGJlY2F1c2UgdGhpcyBjb21wb25lbnQgdXNlc1xuICogZW1vdGlvbiBpbnN0ZWFkIG9mIHNhc3MuXG4gKlxuICogQ29uZmlybURpYWxvZyBuZWVkcyB0aGlzIGhpZ2hlciB6LWluZGV4IHRvIGVuc3VyZSBpdCByZW5kZXJzIG9uIHRvcCBvZlxuICogYW55IHBhcmVudCBQb3BvdmVyIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdCYmIHtcblx0XHR6LWluZGV4OiAxMDAwMDAxO1xuXHR9XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  wrapper
-});
-//# sourceMappingURL=styles.cjs.map

package/build/confirm-dialog/styles.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/confirm-dialog/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';\n\n/**\n * The z-index for ConfirmDialog is being set here instead of in\n * packages/base-styles/_z-index.scss, because this component uses\n * emotion instead of sass.\n *\n * ConfirmDialog needs this higher z-index to ensure it renders on top of\n * any parent Popover component.\n */\nexport const wrapper = process.env.NODE_ENV === \"production\" ? {\n  name: \"7g5ii0\",\n  styles: \"&&{z-index:1000001;}\"\n} : {\n  name: \"1gucf3d-wrapper\",\n  styles: \"&&{z-index:1000001;};label:wrapper;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhMEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFRoZSB6LWluZGV4IGZvciBDb25maXJtRGlhbG9nIGlzIGJlaW5nIHNldCBoZXJlIGluc3RlYWQgb2YgaW5cbiAqIHBhY2thZ2VzL2Jhc2Utc3R5bGVzL196LWluZGV4LnNjc3MsIGJlY2F1c2UgdGhpcyBjb21wb25lbnQgdXNlc1xuICogZW1vdGlvbiBpbnN0ZWFkIG9mIHNhc3MuXG4gKlxuICogQ29uZmlybURpYWxvZyBuZWVkcyB0aGlzIGhpZ2hlciB6LWluZGV4IHRvIGVuc3VyZSBpdCByZW5kZXJzIG9uIHRvcCBvZlxuICogYW55IHBhcmVudCBQb3BvdmVyIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdCYmIHtcblx0XHR6LWluZGV4OiAxMDAwMDAxO1xuXHR9XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAoB;AAJpB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAcjR,IAAM,UAAU,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;",
-  "names": []
-}

package/build/disabled/styles/disabled-styles.cjs

@@ -1,42 +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/disabled/styles/disabled-styles.tsx
-var disabled_styles_exports = {};
-__export(disabled_styles_exports, {
-  disabledStyles: () => disabledStyles
-});
-module.exports = __toCommonJS(disabled_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 disabledStyles = process.env.NODE_ENV === "production" ? {
-  name: "u2jump",
-  styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}"
-} : {
-  name: "iqemdn-disabledStyles",
-  styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;};label:disabledStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpc2FibGVkLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6ImRpc2FibGVkLXN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBkaXNhYmxlZFN0eWxlcyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXHQmOjphZnRlciB7XG5cdFx0Y29udGVudDogJyc7XG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMDtcblx0XHRyaWdodDogMDtcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0fVxuXG5cdC8vIEFsc28gbWFrZSBuZXN0ZWQgYmxvY2tzIHVuc2VsZWN0YWJsZS5cblx0KiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cbmA7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  disabledStyles
-});
-//# sourceMappingURL=disabled-styles.cjs.map

package/build/disabled/styles/disabled-styles.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/disabled/styles/disabled-styles.tsx"],
-  "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 disabledStyles = process.env.NODE_ENV === \"production\" ? {\n  name: \"u2jump\",\n  styles: \"position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}\"\n} : {\n  name: \"iqemdn-disabledStyles\",\n  styles: \"position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;};label:disabledStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpc2FibGVkLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6ImRpc2FibGVkLXN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBkaXNhYmxlZFN0eWxlcyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXHQmOjphZnRlciB7XG5cdFx0Y29udGVudDogJyc7XG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMDtcblx0XHRyaWdodDogMDtcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0fVxuXG5cdC8vIEFsc28gbWFrZSBuZXN0ZWQgYmxvY2tzIHVuc2VsZWN0YWJsZS5cblx0KiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cbmA7XG4iXX0= */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAoB;AAJpB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAKjR,IAAM,iBAAiB,QAAQ,IAAI,aAAa,eAAe;AAAA,EACpE,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ;",
-  "names": []
-}

package/build/form-token-field/styles.cjs

@@ -1,49 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/form-token-field/styles.ts
-var styles_exports = {};
-__export(styles_exports, {
-  TokensAndInputWrapperFlex: () => TokensAndInputWrapperFlex
-});
-module.exports = __toCommonJS(styles_exports);
-var import_base = __toESM(require("@emotion/styled/base"));
-var import_flex = require("../flex/index.cjs");
-var import_utils = require("../utils/index.cjs");
-var TokensAndInputWrapperFlex = /* @__PURE__ */ (0, import_base.default)(import_flex.Flex, process.env.NODE_ENV === "production" ? {
-  target: "ehq8nmi0"
-} : {
-  target: "ehq8nmi0",
-  label: "TokensAndInputWrapperFlex"
-})("padding:7px;", import_utils.boxSizingReset, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXdUQiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vZmxleCc7XG5pbXBvcnQgeyBib3hTaXppbmdSZXNldCB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRva2Vuc0FuZElucHV0V3JhcHBlckZsZXggPSBzdHlsZWQoIEZsZXggKWBcblx0cGFkZGluZzogN3B4O1xuXHQkeyBib3hTaXppbmdSZXNldCB9XG5gO1xuIl19 */"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TokensAndInputWrapperFlex
-});
-//# sourceMappingURL=styles.cjs.map