Apply some integration improvements

packages/components/src/h-stack/README.md

@@ -1,13 +1,19 @@
 # HStack
 
+> **Experimental!**
+
 `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
 
 ## Usage
 
 `HStack` can render anything inside.
 
 ```jsx
-import { HStack, Text, View } from '@wordpress/components/ui';
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalView as View,
+} from '@wordpress/components';
 
 function Example() {
 	return (
@@ -83,7 +89,12 @@ Determines if children should wrap.
 When a `Spacer` is used within an `HStack`, the `Spacer` adaptively expands to take up the remaining space.
 
 ```jsx
-import { HStack, Spacer, Text, View } from '@wordpress/components/ui';
+import {
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalView as View,
+} from '@wordpress/components';
 
 function Example() {
 	return (
@@ -105,7 +116,12 @@ function Example() {
 `Spacer` also be used in-between items to push them apart.
 
 ```jsx
-import { HStack, Spacer, Text, View } from '@wordpress/components/ui';
+import {
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalView as View,
+} from '@wordpress/components';
 
 function Example() {
 	return (

packages/components/src/h-stack/component.js

@@ -11,7 +11,11 @@ import { useHStack } from './hook';
  *
  * @example
  * ```jsx
- * import { HStack, Text, View } from `@wordpress/components/ui`;
+ * import {
+ * 	__experimentalHStack as HStack,
+ * 	__experimentalText as Text,
+ * 	__experimentalView as View,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/h-stack/index.js

@@ -1,2 +1,2 @@
-export { default } from './component';
-export * from './hook';
+export { default as HStack } from './component';
+export { useHStack } from './hook';

packages/components/src/h-stack/stories/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { View } from '../../view';
-import { HStack } from '../index';
+import { HStack } from '..';
 
 export default {
 	component: HStack,

packages/components/src/h-stack/test/index.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../ui/view';
+import { View } from '../../ui/view';
 import { HStack } from '..';
 
 describe( 'props', () => {

packages/components/src/h-stack/types.ts

@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
-import type { FlexProps } from '../../flex/types';
+import type { FlexProps } from '../flex/types';
 
 export type HStackAlignment =
 	| 'bottom'

packages/components/src/h-stack/utils.js

@@ -36,7 +36,7 @@ const V_ALIGNMENTS = {
 /* eslint-disable jsdoc/valid-types */
 /**
  * @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment Where to align.
- * @param {import('../../flex/types').FlexDirection} [direction='row'] Direction to align.
+ * @param {import('../flex/types').FlexDirection} [direction='row'] Direction to align.
  * @return {import('./types').AlignmentProps} Alignment props.
  */
 /* eslint-enable jsdoc/valid-types */

packages/components/src/index.js

@@ -66,7 +66,7 @@ export { default as __experimentalCustomGradientPicker } from './custom-gradient
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';
-export { default as __experimentalHStack } from './h-stack';
+export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
 export { default as __experimentalInputControl } from './input-control';
@@ -126,7 +126,7 @@ export { default as TreeSelect } from './tree-select';
 export { Truncate as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
-export { default as __experimentalVStack } from './v-stack';
+export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';
 export {
 	createSlotFill,

packages/components/src/ui/__storybook-utils/example-grid.js

@@ -5,7 +5,7 @@ import { Grid } from '../grid';
 import { Surface } from '../surface';
 import { Text } from '../../text';
 import { View } from '../view';
-import VStack from '../../v-stack';
+import { VStack } from '../../v-stack';
 
 const Container = ( { children } ) => (
 	<div

packages/components/src/ui/__storybook-utils/page.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import VStack from '../../v-stack';
+import { VStack } from '../../v-stack';
 import { View } from '../view';
 import { Heading } from '../../heading';
 import { Divider } from '../divider';

packages/components/src/ui/form-group/form-group-content.js

@@ -6,7 +6,7 @@ import { useMemo, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import VStack from '../../v-stack';
+import { VStack } from '../../v-stack';
 import { FormGroupContext } from './form-group-context';
 import FormGroupHelp from './form-group-help';
 import FormGroupLabel from './form-group-label';

packages/components/src/v-stack/README.md

@@ -1,13 +1,19 @@
 # VStack
 
+> **Experimental!**
+
 `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line.
 
 ## Usage
 
 `VStack` can render anything inside.
 
 ```jsx
-import { VStack, Text, View } from '@wordpress/components';
+import {
+	__experimentalText as Text,
+	__experimentalView as View
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 function Example() {
 	return (
@@ -83,6 +89,13 @@ Determines if children should wrap.
 When a `Spacer` is used within an `VStack`, the `Spacer` adaptively expands to take up the remaining space.
 
 ```jsx
+import {
+	__experimentalSpacer as Text,
+	__experimentalText as Text,
+	__experimentalView as View
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
 function Example() {
 	return (
 		<VStack>
@@ -103,6 +116,13 @@ function Example() {
 `Spacer` can also be used in-between items to push them apart.
 
 ```jsx
+import {
+	__experimentalSpacer as Text,
+	__experimentalText as Text,
+	__experimentalView as View
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
 function Example() {
 	return (
 		<VStack>

packages/components/src/v-stack/component.js

@@ -11,7 +11,11 @@ import { useVStack } from './hook';
  *
  * @example
  * ```jsx
- * import { VStack, Text, View } from `@wordpress/components`;
+ * import {
+ * 	__experimentalText as Text,
+ * 	__experimentalView as View,
+ * 	__experimentalVStack as VStack,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/v-stack/index.js

@@ -1,2 +1,2 @@
-export { default } from './component';
-export * from './hook';
+export { default as VStack } from './component';
+export { useVStack } from './hook';

packages/components/src/v-stack/test/index.js

@@ -6,8 +6,8 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../../view';
-import VStack from '../index';
+import { View } from '../../ui/view';
+import { VStack } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {