chore: migrate flex component

app/.eslintrc.js

@@ -57,22 +57,27 @@ module.exports = {
       {
         name: "Button",
         module: "@arizeai/components",
-        use: "@phoenix/components/button",
+        use: "@phoenix/components",
       },
       {
         name: "Icon",
         module: "@arizeai/components",
-        use: "@phoenix/components/icon",
+        use: "@phoenix/components",
       },
       {
         name: "Icons",
         module: "@arizeai/components",
-        use: "@phoenix/components/icon",
+        use: "@phoenix/components",
       },
       {
         name: "View",
         module: "@arizeai/components",
-        use: "@phoenix/components/view",
+        use: "@phoenix/components",
+      },
+      {
+        name: "Flex",
+        module: "@arizeai/components",
+        use: "@phoenix/components",
       },
     ],
     "no-duplicate-imports": "error",

app/src/components/annotation/AnnotationLabel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 

app/src/components/auth/DeleteAPIKeyButton.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 
 export function DeleteAPIKeyButton({
   handleDelete,

app/src/components/dataset/DatasetForm.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { Flex, Form, TextArea, TextField } from "@arizeai/components";
+import { Form, TextArea, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { CodeEditorFieldWrapper, JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 

app/src/components/experiment/ExperimentActionMenu.tsx

@@ -7,12 +7,11 @@ import {
   ActionMenuProps,
   Dialog,
   DialogContainer,
-  Flex,
   Item,
   Text,
 } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { assertUnreachable } from "@phoenix/typeUtils";

app/src/components/generative/ToolChoiceSelector.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import { Flex, Item, Label, Picker } from "@arizeai/components";
+import { Item, Label, Picker } from "@arizeai/components";
+
+import { Flex } from "@phoenix/components";
 
 type DefaultToolChoice = Extract<ToolChoice, "auto" | "required" | "none">;
 

app/src/components/trace/LatencyText.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 
-import { Flex, Text, TextProps } from "@arizeai/components";
+import { Text, TextProps } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 export function LatencyText({
   latencyMs,

app/src/components/trace/SpanAnnotationActionMenu.tsx

@@ -6,10 +6,10 @@ import React, {
 } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 import { NoticeConfig } from "@arizeai/components/dist/notification/types";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 import { SpanAnnotationActionMenuDeleteMutation } from "./__generated__/SpanAnnotationActionMenuDeleteMutation.graphql";
 import { AnnotationActionMenu } from "./AnnotationActionMenu";

app/src/components/trace/TokenCount.tsx

@@ -2,15 +2,14 @@ import React from "react";
 import { css } from "@emotion/react";
 
 import {
-  Flex,
   Text,
   TextProps,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 type TokenCountProps = {
   /**

app/src/pages/ErrorElement.tsx

@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { useRouteError } from "react-router";
 import { css } from "@emotion/react";
 
-import { EmptyGraphic, Flex } from "@arizeai/components";
+import { EmptyGraphic } from "@arizeai/components";
 
-import { Button, ExternalLink } from "@phoenix/components";
+import { Button, ExternalLink, Flex } from "@phoenix/components";
 
 export function ErrorElement() {
   const error = useRouteError();

app/src/pages/Layout.tsx

@@ -2,9 +2,7 @@ import React, { Suspense, useCallback, useMemo } from "react";
 import { Outlet, useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Flex } from "@arizeai/components";
-
-import { Icon, Icons, Loading } from "@phoenix/components";
+import { Flex, Icon, Icons, Loading } from "@phoenix/components";
 import {
   Brand,
   DocsLink,

app/src/pages/auth/ForgotPasswordPage.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Heading } from "@arizeai/components";
+import { Heading } from "@arizeai/components";
 
-import { Link } from "@phoenix/components";
+import { Flex, Link } from "@phoenix/components";
 
 import { AuthLayout } from "./AuthLayout";
 import { ForgotPasswordForm } from "./ForgotPasswordForm";

app/src/pages/auth/LoginPage.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
-import { Alert, Flex } from "@arizeai/components";
+import { Alert } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 
 import { AuthLayout } from "./AuthLayout";
 import { LoginForm } from "./LoginForm";

app/src/pages/auth/ResetPasswordPage.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 
-import { Flex } from "@arizeai/components";
-
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 
 import { AuthLayout } from "./AuthLayout";
 import { PhoenixLogo } from "./PhoenixLogo";

app/src/pages/dataset/AddDatasetExampleDialog.tsx

@@ -3,16 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
-import {
-  Alert,
-  Card,
-  CardProps,
-  Dialog,
-  Flex,
-  TextArea,
-} from "@arizeai/components";
+import { Alert, Card, CardProps, Dialog, TextArea } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 

app/src/pages/dataset/DatasetPage.tsx

@@ -5,14 +5,13 @@ import { css } from "@emotion/react";
 import {
   ActionMenu,
   Counter,
-  Flex,
   Item,
   TabPane,
   Tabs,
   Text,
 } from "@arizeai/components";
 
-import { Button, Icon, Icons, Loading, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, Loading, View } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 import {
   DatasetProvider,

app/src/pages/datasets/DatasetActionMenu.tsx

@@ -1,14 +1,8 @@
 import React, { ReactNode, useCallback, useState } from "react";
 
-import {
-  ActionMenu,
-  DialogContainer,
-  Flex,
-  Item,
-  Text,
-} from "@arizeai/components";
+import { ActionMenu, DialogContainer, Item, Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 import { DeleteDatasetDialog } from "./DeleteDatasetDialog";
 import { EditDatasetDialog } from "./EditDatasetDialog";

app/src/pages/datasets/DatasetFromCSVForm.tsx

@@ -7,15 +7,14 @@ import {
   DropdownProps,
   Field,
   FieldProps,
-  Flex,
   Form,
   Item,
   ListBox,
   TextArea,
   TextField,
 } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 type CreateDatasetFromCSVParams = {
   file: FileList;

app/src/pages/datasets/DeleteDatasetDialog.tsx

@@ -2,9 +2,9 @@ import React, { startTransition, useCallback } from "react";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import { Dialog, Flex, Text } from "@arizeai/components";
+import { Dialog, Text } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 
 import { DeleteDatasetDialogMutation } from "./__generated__/DeleteDatasetDialogMutation.graphql";
 

app/src/pages/dimension/DimensionDriftBreakdownSegmentBarChart.tsx

@@ -13,9 +13,9 @@ import {
   YAxis,
 } from "recharts";
 
-import { Flex, Text, theme } from "@arizeai/components";
+import { Text, theme } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import {
   ChartTooltip,
   ChartTooltipItem,

app/src/pages/dimension/DimensionDriftStats.tsx

@@ -1,15 +1,9 @@
 import React from "react";
 import { graphql, useFragment } from "react-relay";
 
-import {
-  Content,
-  ContextualHelp,
-  Flex,
-  Heading,
-  Text,
-} from "@arizeai/components";
+import { Content, ContextualHelp, Heading, Text } from "@arizeai/components";
 
-import { ExternalLink } from "@phoenix/components";
+import { ExternalLink, Flex } from "@phoenix/components";
 import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
 
 import { DimensionDriftStats_dimension$key } from "./__generated__/DimensionDriftStats_dimension.graphql";

app/src/pages/dimension/DimensionPage.tsx

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 
 import { Dialog, DialogContainer } from "@arizeai/components";
 
-import { Loading, View, ViewSummaryAside, Flex } from "@phoenix/components";
+import { Flex,Loading, View, ViewSummaryAside } from "@phoenix/components";
 import { useInferences, useTimeRange } from "@phoenix/contexts";
 import { TimeSliceContextProvider } from "@phoenix/contexts/TimeSliceContext";
 

app/src/pages/embedding/EmbeddingPage.tsx

@@ -18,10 +18,10 @@ import { subDays } from "date-fns";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { css } from "@emotion/react";
 
-import { Counter, Flex, Switch, TabPane, Tabs } from "@arizeai/components";
+import { Counter, Switch, TabPane, Tabs } from "@arizeai/components";
 import { ThreeDimensionalPoint } from "@arizeai/point-cloud";
 
-import { Loading, LoadingMask, View } from "@phoenix/components";
+import { Flex, Loading, LoadingMask, View } from "@phoenix/components";
 import {
   PrimaryInferencesTimeRange,
   ReferenceInferencesTimeRange,

app/src/pages/embedding/PointSelectionTable.tsx

@@ -8,9 +8,13 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Flex } from "@arizeai/components";
-
-import { ExternalLink, Icon, Icons, LinkButton } from "@phoenix/components";
+import {
+  ExternalLink,
+  Flex,
+  Icon,
+  Icons,
+  LinkButton,
+} from "@phoenix/components";
 import { Shape, ShapeIcon } from "@phoenix/components/pointcloud";
 import { FloatCell, TextCell } from "@phoenix/components/table";
 import { tableCSS } from "@phoenix/components/table/styles";

app/src/pages/example/ExampleExperimentRunsTable.tsx

@@ -9,9 +9,9 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import {
   AnnotationLabel,
   AnnotationTooltip,

app/src/pages/examples/ExampleSelectionToolbar.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode, useCallback, useState } from "react";
 import { graphql, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
-import { DialogContainer, Flex, Text } from "@arizeai/components";
+import { DialogContainer, Text } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";
 

app/src/pages/experiment/ExperimentComparePage.tsx

@@ -2,9 +2,9 @@ import React, { startTransition, Suspense, useState } from "react";
 import { useLoaderData, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
-import { Alert, Flex, Heading, Switch } from "@arizeai/components";
+import { Alert, Heading, Switch } from "@arizeai/components";
 
-import { Loading, View } from "@phoenix/components";
+import { Flex, Loading, View } from "@phoenix/components";
 
 import { experimentCompareLoaderQuery$data } from "./__generated__/experimentCompareLoaderQuery.graphql";
 import { ExperimentCompareTable } from "./ExperimentCompareTable";

app/src/pages/experiment/ExperimentMultiSelector.tsx

@@ -6,12 +6,12 @@ import {
   DropdownProps,
   Field,
   FieldProps,
-  Flex,
   Item,
   ListBox,
   Text,
 } from "@arizeai/components";
 
+import { Flex } from "@phoenix/components";
 import { SequenceNumberLabel } from "@phoenix/components/experiment/SequenceNumberLabel";
 
 import { ExperimentMultiSelector__experiments$key } from "./__generated__/ExperimentMultiSelector__experiments.graphql";