Fix integration issues

packages/components/src/box-control/index.js

@@ -18,7 +18,7 @@ import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import BoxControlIcon from './icon';
-import Text from '../text';
+import { Text } from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
 import {

packages/components/src/flex/flex/component.js

@@ -33,7 +33,12 @@ function Flex( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Flex, FlexItem, FlexBlock, Text } from `@wordpress/components/ui`;
+ * import {
+ * 	__experimentalFlex as Flex,
+ * 	__experimentalFlexBlock as FlexBlock,
+ * 	__experimentalFlexItem as FlexItem,
+ * 	__experimentalText as Text
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/flex/stories/index.js

@@ -1,9 +1,8 @@
 /**
  * Internal dependencies
  */
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import { View } from '../../view';
+import { Flex, FlexItem } from '../';
+import { View } from '../../ui/view';
 
 export default {
 	component: Flex,

packages/components/src/flex/test/index.js

@@ -7,9 +7,7 @@ import { render } from '@testing-library/react';
  * Internal dependencies
  */
 import { View } from '../../ui/view';
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import FlexBlock from '../flex-block';
+import { Flex, FlexBlock, FlexItem } from '../';
 
 describe( 'props', () => {
 	let base;

packages/components/src/index.js

@@ -102,7 +102,7 @@ export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
-export { default as __experimentalText } from './text';
+export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
@@ -121,7 +121,7 @@ export {
 	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
-export { default as __experimentalTruncate } from './truncate';
+export { Truncate as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
 export { default as IsolatedEventContainer } from './isolated-event-container';

packages/components/src/input-control/styles/input-control-styles.js

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Flex, FlexItem } from '../../flex';
-import Text from '../../text';
+import { Text } from '../../text';
 import { color, rtl } from '../../utils/style-mixins';
 
 const rootFloatLabelStyles = () => {

packages/components/src/navigation/styles/navigation-styles.js

@@ -13,7 +13,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
-import Text from '../../text';
+import { Text } from '../../text';
 import { reduceMotion, space, rtl } from '../../utils';
 
 export const NavigationUI = styled.div`

packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { color } from '../../../utils/style-mixins';
 
 export const Root = styled.div`

packages/components/src/text/README.md

@@ -1,4 +1,4 @@
-# Text
+# Text (Experimental)
 
 `Text` is a core component that renders text in the library, using the library's typography system.
 
@@ -23,7 +23,7 @@ function Example() {
 Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 
 ```jsx
-import { Text, TextInput } from '@wordpress/components';
+import { __experimentalText as Text, TextInput } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -42,7 +42,7 @@ function Example() {
 Adjusts the text alignment.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -107,7 +107,7 @@ Array of search words. String search terms are automatically cast to RegExps unl
 Letters or words within `Text` can be highlighted using `highlightWords`.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -159,7 +159,7 @@ Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis`
 The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).
 
 ```jsx
-import { Text, View } from '@wordpress/components';
+import { __experimentalText as Text, View } from '@wordpress/components';
 
 function Example() {
 	const backgroundColor = 'blue';
@@ -181,7 +181,7 @@ function Example() {
 Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return <Text size="largeTitle">Code is Poetry</Text>;
@@ -195,7 +195,7 @@ function Example() {
 Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -223,7 +223,7 @@ Uppercases the text content.
 Adjusts style variation of the text.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return <Text variant="muted">Code is Poetry</Text>;

packages/components/src/text/component.js

@@ -13,7 +13,7 @@ import useText from './hook';
  * @example
  *
  * ```jsx
- * import { Text } from `@wordpress/components`;
+ * import { __experimentalText as Text } from `@wordpress/components`;
  *
  * function Example() {
  * 	return <Text>Code is Poetry</Text>;

packages/components/src/text/index.js

@@ -1,2 +1,2 @@
-export { default } from './component';
+export { default as Text } from './component';
 export { default as useText } from './hook';

packages/components/src/text/stories/index.js

@@ -5,7 +5,7 @@ import { Text } from '..';
 
 export default {
 	component: Text,
-	title: 'Components/Text',
+	title: 'G2 Components (Experimental)/Text',
 };
 
 export const _default = () => {

packages/components/src/text/test/text.js → packages/components/src/text/test/index.js

@@ -8,7 +8,7 @@ import { render } from '@testing-library/react';
  */
 import { getFontSize } from '../../ui/utils/font-size';
 import { COLORS } from '../../utils';
-import Text from '..';
+import { Text } from '../';
 
 describe( 'Text', () => {
 	describe( 'snapshot tests', () => {

packages/components/src/truncate/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```jsx
-import { Truncate } from '@wordpress/components/ui';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -50,7 +50,7 @@ Determines the max characters when `truncate` is set.
 Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.
 
 ```jsx
-import { Truncate } from '@wordpress/components/ui';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 
 function Example() {
 	return (

packages/components/src/truncate/component.js

@@ -12,7 +12,7 @@ import useTruncate from './hook';
  *
  * @example
  * ```jsx
- * import { Truncate } from `@wordpress/components/ui`;
+ * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/truncate/index.js

@@ -1,2 +1,2 @@
-export { default } from './component';
+export { default as Truncate } from './component';
 export { default as useTruncate } from './hook';

packages/components/src/truncate/test/truncate.js → packages/components/src/truncate/test/index.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Truncate from '..';
+import { Truncate } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {

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

@@ -3,7 +3,7 @@
  */
 import { Grid } from '../grid';
 import { Surface } from '../surface';
-import Text from '../../text';
+import { Text } from '../../text';
 import { View } from '../view';
 import { VStack } from '../v-stack';
 

packages/components/src/ui/card/stories/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { Grid } from '../../grid';
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { VStack } from '../../v-stack';
 import { Card, CardBody, CardFooter } from '../index';
 import { Divider } from '../../divider';

packages/components/src/ui/form-group/stories/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { FormGroup, useFormGroupContextId } from '../index';
-import Text from '../../../text';
+import { Text } from '../../../text';
 
 // @todo: Refactor this after adding next TextInput component.
 const TextInput = ( { id: idProp, ...props } ) => {

packages/components/src/ui/surface/stories/index.js

@@ -7,7 +7,7 @@ import { boolean, number, select } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import { Surface } from '../index';
-import Text from '../../../text';
+import { Text } from '../../../text';
 
 export default {
 	component: Surface,

packages/components/src/ui/tooltip/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { Tooltip } from '../index';
 
 export default {

packages/components/src/ui/tooltip/test/index.js

@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { Tooltip } from '../index';
 
 describe( 'props', () => {