slice-machine-ui 1.26.1-beta.2 → 1.26.1-beta.21

package/src/features/sync/components/AutoSyncStatusIndicator.tsx

@@ -1,9 +1,9 @@
-import { FC } from "react";
 import { Text, Tooltip } from "@prismicio/editor-ui";
+import { FC } from "react";
 
-import { Syncing } from "@src/icons/Syncing";
-import { Synced } from "@src/icons/Synced";
-import { SyncFailed } from "@src/icons/SyncFailed";
+import { Synced } from "@/icons/Synced";
+import { SyncFailed } from "@/icons/SyncFailed";
+import { Syncing } from "@/icons/Syncing";
 
 import styles from "./AutoSyncStatusIndicator.module.css";
 

package/src/features/sync/fetchUnSyncChanges.ts

@@ -1,9 +1,9 @@
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { getState } from "@src/apiClient";
-import { AuthStatus } from "@src/modules/userContext/types";
+import { getState } from "@/apiClient";
+import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@/legacy/lib/models/common/normalizers/slices";
+import { AuthStatus } from "@/modules/userContext/types";
 
-import { UnSyncedChanges, getUnSyncedChanges } from "./getUnSyncChanges";
+import { getUnSyncedChanges, UnSyncedChanges } from "./getUnSyncChanges";
 
 type FetchUnSyncChangesArgs = {
   isOnline: boolean;

package/src/features/sync/getUnSyncChanges.ts

@@ -1,20 +1,20 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { LibraryUI } from "@lib/models/common/LibraryUI";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import {
-  LocalOrRemoteCustomType,
-  LocalOrRemoteSlice,
-  RemoteOnlySlice,
   getModelId,
   hasLocal,
   isRemoteOnly,
-} from "@lib/models/common/ModelData";
+  LocalOrRemoteCustomType,
+  LocalOrRemoteSlice,
+  RemoteOnlySlice,
+} from "@/legacy/lib/models/common/ModelData";
 import {
   ChangedCustomType,
   ChangedSlice,
-  ModelStatus,
   computeStatuses,
-} from "@lib/models/common/ModelStatus";
-import { AuthStatus } from "@src/modules/userContext/types";
+  ModelStatus,
+} from "@/legacy/lib/models/common/ModelStatus";
+import { AuthStatus } from "@/modules/userContext/types";
 
 type GetUnSyncedChangesArgs = {
   customTypes: LocalOrRemoteCustomType[];

package/src/features/sync/useUnSyncChanges.ts

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getFrontendSlices, getLibraries } from "@src/modules/slices";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
+import { getFrontendSlices, getLibraries } from "@/modules/slices";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { useNetwork } from "../../hooks/useNetwork";
-import { UnSyncedChanges, getUnSyncedChanges } from "./getUnSyncChanges";
+import { getUnSyncedChanges, UnSyncedChanges } from "./getUnSyncChanges";
 
 export const useUnSyncChanges = (): UnSyncedChanges => {
   const { customTypes, slices, libraries } = useSelector(

package/src/hooks/useActionQueue.tsx

@@ -1,14 +1,14 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
+import { uniqueId } from "lodash";
 import {
+  Dispatch,
+  SetStateAction,
   useCallback,
-  useState,
   useEffect,
-  SetStateAction,
-  Dispatch,
   useMemo,
+  useState,
 } from "react";
-import { uniqueId } from "lodash";
 import { toast } from "react-toastify";
-import { Box, Button, Text } from "@prismicio/editor-ui";
 
 export type ActionQueueStatus = "pending" | "done" | "failed";
 

package/src/hooks/useAdapterName.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 async function getAdapterName() {
   try {

package/src/hooks/useAuthStatus.ts

@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 
-import { getAuthStatus } from "@src/modules/environment";
-import { SliceMachineStoreType } from "@src/redux/type";
+import { getAuthStatus } from "@/modules/environment";
+import { SliceMachineStoreType } from "@/redux/type";
 
 export function useAuthStatus() {
   const { authStatus } = useSelector((store: SliceMachineStoreType) => ({

package/src/hooks/useCurrentSlice.tsx

@@ -1,10 +1,10 @@
 import { useRouter } from "next/router";
 import { useSelector } from "react-redux";
 
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { VariationSM } from "@lib/models/common/Slice";
-import { selectCurrentSlice } from "@src/modules/slices/selector";
-import { SliceMachineStoreType } from "@src/redux/type";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
+import { selectCurrentSlice } from "@/modules/slices/selector";
+import { SliceMachineStoreType } from "@/redux/type";
 
 type UseCurrentSliceRet = { slice?: ComponentUI; variation?: VariationSM };
 

package/src/hooks/useEditorContent.ts

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { defaultSharedSliceContent } from "@src/utils/editor";
 import { renderSliceMock } from "@prismicio/mocks";
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
-import { Slices } from "@lib/models/common/Slice";
+import { useMemo } from "react";
+
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { Slices } from "@/legacy/lib/models/common/Slice";
+import { defaultSharedSliceContent } from "@/utils/editor";
 
 function useEditorContentOnce({
   variationID,

package/src/hooks/useExperimentVariant.ts

@@ -1,7 +1,7 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
-
 import type { Variant } from "@slicemachine/manager";
-import { managerClient } from "@src/managerClient";
+
+import { managerClient } from "@/managerClient";
 
 async function getExperimentVariant(variantName: string) {
   try {

package/src/hooks/useIsEmptyProject.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 export async function getIsEmptyProject() {
   const [

package/src/hooks/useRepositoryInformation.ts

@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getApiEndpoint, getRepoName } from "@src/modules/environment";
+import { getApiEndpoint, getRepoName } from "@/modules/environment";
+import { SliceMachineStoreType } from "@/redux/type";
 
 // TODO: This hook should be extracted to a new manager endpoint
 export function useRepositoryInformation() {

package/src/hooks/useRouteChange.tsx

@@ -1,8 +1,8 @@
 import { type NextRouter, useRouter } from "next/router";
 import {
+  createContext,
   type FC,
   type PropsWithChildren,
-  createContext,
   useContext,
   useState,
 } from "react";

package/src/hooks/useSMTracker.ts

@@ -1,11 +1,11 @@
+import { useRouter } from "next/router";
 import { useEffect } from "react";
-
-import { telemetry } from "@src/apiClient";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLibraries } from "@src/modules/slices";
-import type { LibraryUI } from "@lib/models/common/LibraryUI";
-import { useRouter } from "next/router";
+
+import { telemetry } from "@/apiClient";
+import type { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
+import { getLibraries } from "@/modules/slices";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { managerClient } from "../managerClient";
 

package/src/hooks/useScreenshotChangesModal.ts

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { SliceVariationSelector } from "@components/ScreenshotChangesModal";
+
+import { SliceVariationSelector } from "@/legacy/components/ScreenshotChangesModal";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 type ModalPayload = {
   sliceFilterFn: (s: ComponentUI[]) => ComponentUI[];

package/src/hooks/useServerState.ts

@@ -1,10 +1,10 @@
-import { useEffect, useCallback } from "react";
 import * as Sentry from "@sentry/nextjs";
+import { useCallback, useEffect } from "react";
 import useSwr from "swr";
 
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import ServerState from "@lib/models/server/ServerState";
-import { getState } from "@src/apiClient";
+import { getState } from "@/apiClient";
+import ServerState from "@/legacy/lib/models/server/ServerState";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 const useServerState = () => {
   const { refreshState } = useSliceMachineActions();

package/src/hooks/useSliceMachineConfig.ts

@@ -1,7 +1,7 @@
-import { useRequest, updateData } from "@prismicio/editor-support/Suspense";
+import { updateData, useRequest } from "@prismicio/editor-support/Suspense";
 import type { SliceMachineConfig } from "@slicemachine/manager";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 type UseSliceMachineConfigReturnType = [
   config: SliceMachineConfig,

package/src/hooks/useSliceMachineRunningVersion.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 async function getSliceMachineRunningVersion() {
   const sliceMachineRunningVersion =

package/src/hooks/useThrottle.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function useThrottle<T>(
   cb: () => T,

package/src/hooks/useUpdateAvailable.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 async function getIsUpdateAvailable() {
   const [sliceMachineUpdateAvailable, adapterUpdateAvailable] =

package/src/hooks/useWindowDimensions.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;

package/src/hooks/useWindowSize.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+
 interface Size {
   width: number | undefined;
   height: number | undefined;

package/{components → src/legacy/components}/App/index.tsx

@@ -2,14 +2,14 @@ import type { FC, ReactNode } from "react";
 import { useSelector } from "react-redux";
 import { BaseStyles } from "theme-ui";
 
-import { AppLayout, AppLayoutContent } from "@components/AppLayout";
-import LoginModal from "@components/LoginModal";
-import { ReviewModal } from "@components/ReviewModal";
-import { MissingLibraries } from "@components/MissingLibraries";
-import useServerState from "@src/hooks/useServerState";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLibraries } from "@src/modules/slices";
-import useSMTracker from "@src/hooks/useSMTracker";
+import useServerState from "@/hooks/useServerState";
+import useSMTracker from "@/hooks/useSMTracker";
+import { AppLayout, AppLayoutContent } from "@/legacy/components/AppLayout";
+import LoginModal from "@/legacy/components/LoginModal";
+import { MissingLibraries } from "@/legacy/components/MissingLibraries";
+import { ReviewModal } from "@/legacy/components/ReviewModal";
+import { getLibraries } from "@/modules/slices";
+import { SliceMachineStoreType } from "@/redux/type";
 
 type Props = Readonly<{
   children?: ReactNode;

package/{components → src/legacy/components}/AppLayout/index.tsx

@@ -2,17 +2,16 @@ import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { FC, PropsWithChildren, Suspense } from "react";
 
-import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
-
-import Navigation from "@components/Navigation";
-import { Breadcrumb, type BreadcrumbProps } from "@src/components/Breadcrumb";
+import { Breadcrumb } from "@/components/Breadcrumb";
 import {
   PageLayout,
   PageLayoutContent,
   PageLayoutHeader,
   PageLayoutPane,
-} from "@src/components/PageLayout";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+} from "@/components/PageLayout";
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
+import Navigation from "@/legacy/components/Navigation";
 
 export const AppLayout: FC<PropsWithChildren> = ({
   children,
@@ -89,7 +88,7 @@ export const AppLayoutBackButton: FC<AppLayoutBackButtonProps> = ({
   );
 };
 
-export const AppLayoutBreadcrumb: FC<BreadcrumbProps> = (props) => (
+export const AppLayoutBreadcrumb: FC<PropsWithChildren> = (props) => (
   <Box flexGrow={1}>
     <Breadcrumb {...props} />
   </Box>

package/{components → src/legacy/components}/AuthInstructions/index.jsx

@@ -1,4 +1,4 @@
-import { Text, Flex, Heading } from "theme-ui";
+import { Flex, Heading, Text } from "theme-ui";
 
 import Card from "../Card";
 

package/{components → src/legacy/components}/Button/index.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from "react";
-
-import { Button as ThemeUIButton, ButtonProps, Spinner } from "theme-ui";
 import { IconType } from "react-icons";
+import { Button as ThemeUIButton, ButtonProps, Spinner } from "theme-ui";
 
 export interface SmButtonProps extends ButtonProps {
   label: string;

package/{components → src/legacy/components}/Card/Default.jsx

@@ -1,4 +1,5 @@
-import { Flex, Box, Close } from "theme-ui";
+import { Box, Close, Flex } from "theme-ui";
+
 import Card from "./";
 
 const DefaultCard = ({

package/{components → src/legacy/components}/Card/Preview.jsx

@@ -1,4 +1,4 @@
-import { Flex, Box, Heading, Card } from "theme-ui";
+import { Box, Card, Flex, Heading } from "theme-ui";
 
 const PreviewCard = ({
   variant = "primary",

package/{components → src/legacy/components}/Card/WithTabs/index.jsx

@@ -1,8 +1,9 @@
-import { Children, useState, memo } from "react";
+import { Children, memo, useState } from "react";
+import { TabPanel, Tabs } from "react-tabs";
 import { Box } from "theme-ui";
-import { Tabs, TabPanel } from "react-tabs";
-import { CustomTab as Tab, CustomTabList as TabList } from "./components";
+
 import Card from "../";
+import { CustomTab as Tab, CustomTabList as TabList } from "./components";
 
 const WithTabs = ({
   children,

package/{components → src/legacy/components}/Card/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Card as ThemeCard, ThemeUIStyleObject } from "theme-ui";
+
 import { CardBox, CardBoxProps } from "./CardBox";
 
 interface CardProps extends Omit<CardBoxProps, "withRadius"> {

package/{components → src/legacy/components}/Changelog/index.tsx

@@ -1,16 +1,16 @@
+import { ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
+import { Version } from "@slicemachine/manager";
 import { Suspense, useEffect, useState } from "react";
-import { BaseStyles } from "theme-ui";
 import { useSelector } from "react-redux";
-import { ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
+import { BaseStyles } from "theme-ui";
 
-import { Version } from "@slicemachine/manager";
-import { AppLayout, AppLayoutContent } from "@components/AppLayout";
-import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getPackageManager } from "@src/modules/environment";
+import { useSliceMachineVersions } from "@/features/changelog/useSliceMachineVersions";
+import { AppLayout, AppLayoutContent } from "@/legacy/components/AppLayout";
+import { getPackageManager } from "@/modules/environment";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { Navigation } from "./navigation";
-import { VersionDetails, ReleaseWarning } from "./versionDetails";
+import { ReleaseWarning, VersionDetails } from "./versionDetails";
 
 export default function Changelog() {
   const { packageManager } = useSelector((store: SliceMachineStoreType) => ({

package/{components → src/legacy/components}/Changelog/navigation/VersionBadge.tsx

@@ -1,5 +1,6 @@
-import { Flex, Text } from "theme-ui";
 import { transparentize } from "@theme-ui/color";
+import { Flex, Text } from "theme-ui";
+
 import { VersionTags } from ".";
 import { VersionTag } from "./VersionTag";
 

package/{components → src/legacy/components}/Changelog/navigation/VersionTag.tsx

@@ -1,4 +1,5 @@
 import { Text } from "theme-ui";
+
 import { VersionTags } from ".";
 
 interface VersionTagProps {

package/{components → src/legacy/components}/Changelog/navigation/index.tsx

@@ -1,12 +1,12 @@
+import { tokens } from "@prismicio/editor-ui";
+import { Version } from "@slicemachine/manager";
 import React from "react";
 import { Flex, Text } from "theme-ui";
-import { tokens } from "@prismicio/editor-ui";
 
-import { Version } from "@slicemachine/manager";
-import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
-import { useSliceMachineLatestNonBreakingVersion } from "@src/features/changelog/useSliceMachineLatestNonBreakingVersion";
-import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
-import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+import { useSliceMachineLatestNonBreakingVersion } from "@/features/changelog/useSliceMachineLatestNonBreakingVersion";
+import { useSliceMachineVersions } from "@/features/changelog/useSliceMachineVersions";
+import { useSliceMachineRunningVersion } from "@/hooks/useSliceMachineRunningVersion";
+import { useUpdateAvailable } from "@/hooks/useUpdateAvailable";
 
 import { VersionBadge } from "./VersionBadge";
 

package/{components → src/legacy/components}/Changelog/versionDetails/UpdateCommandBox.tsx

@@ -1,12 +1,12 @@
+import type { PackageManager, Version } from "@slicemachine/manager";
 import React from "react";
-import { Button, Flex, Text } from "theme-ui";
 import { AiFillWarning } from "react-icons/ai";
+import { Button, Flex, Text } from "theme-ui";
 
-import type { PackageManager, Version } from "@slicemachine/manager";
-import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
-import CodeBlock from "@components/CodeBlock";
-import { useAdapterName } from "@src/hooks/useAdapterName";
-import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+import { useSliceMachineVersions } from "@/features/changelog/useSliceMachineVersions";
+import { useAdapterName } from "@/hooks/useAdapterName";
+import { useUpdateAvailable } from "@/hooks/useUpdateAvailable";
+import CodeBlock from "@/legacy/components/CodeBlock";
 
 interface UpdateCommandBoxProps {
   selectedVersion: Version;

package/{components → src/legacy/components}/Changelog/versionDetails/VersionKindLabel.tsx

@@ -1,8 +1,7 @@
-import React from "react";
-import { type ThemeUIStyleObject, Text } from "theme-ui";
-import { transparentize } from "@theme-ui/color";
-
 import { VersionKind } from "@slicemachine/manager";
+import { transparentize } from "@theme-ui/color";
+import React from "react";
+import { Text, type ThemeUIStyleObject } from "theme-ui";
 
 interface VersionKindLabelProps {
   versionKind: VersionKind;

package/{components → src/legacy/components}/Changelog/versionDetails/index.tsx

@@ -1,14 +1,14 @@
+import { tokens } from "@prismicio/editor-ui";
+import type { PackageManager, Version } from "@slicemachine/manager";
 import React from "react";
-import { Flex, Text } from "theme-ui";
 import { AiFillWarning } from "react-icons/ai";
-import { tokens } from "@prismicio/editor-ui";
+import { Flex, Text } from "theme-ui";
 
-import type { PackageManager, Version } from "@slicemachine/manager";
-import { useSliceMachineReleaseNotes } from "@src/features/changelog/useSliceMachineReleaseNotes";
+import { useSliceMachineReleaseNotes } from "@/features/changelog/useSliceMachineReleaseNotes";
 
-import { VersionKindLabel } from "./VersionKindLabel";
 import { ReleaseNotesDetails } from "./ReleaseNotesDetails";
 import { UpdateCommandBox } from "./UpdateCommandBox";
+import { VersionKindLabel } from "./VersionKindLabel";
 
 interface VersionDetailsProps {
   selectedVersion: Version;

package/{components → src/legacy/components}/ChangesEmptyState/AuthErrorPage.tsx

@@ -1,8 +1,8 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
 import React, { FC } from "react";
-import { Box, Button, Text, TextLink } from "@prismicio/editor-ui";
 
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { AuthStatus } from "@src/modules/userContext/types";
+import { AuthStatus } from "@/modules/userContext/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export type AuthErrorPageProps = {
   authStatus: AuthStatus.UNAUTHORIZED | AuthStatus.FORBIDDEN;
@@ -41,9 +41,9 @@ export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
       <Text align="center">
         If that doesn't work, it's possible that Slice Machine is having trouble
         accessing Prismic's servers.{" "}
-        <TextLink href="https://community.prismic.io/">
+        <Text href="https://community.prismic.io/">
           Contact our support team
-        </TextLink>
+        </Text>
         .
       </Text>
       {authStatus === AuthStatus.FORBIDDEN && (

package/{components → src/legacy/components}/ChangesItems/ChangesItems.tsx

@@ -1,20 +1,20 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
 import React, { Suspense } from "react";
 import { AiFillCamera, AiOutlineExclamationCircle } from "react-icons/ai";
-import { Box, Button, Text } from "@prismicio/editor-ui";
 
-import { ChangesSectionHeader } from "@components/ChangesSectionHeader";
-import { CustomTypeTable } from "@components/CustomTypeTable/changesPage";
-import Grid from "@components/Grid";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
-import { countMissingScreenshots } from "@src/domain/slice";
-import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
-import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+import { countMissingScreenshots } from "@/domain/slice";
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import { ModelsStatuses } from "@/features/sync/getUnSyncChanges";
+import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
+import { ChangesSectionHeader } from "@/legacy/components/ChangesSectionHeader";
+import { CustomTypeTable } from "@/legacy/components/CustomTypeTable/changesPage";
+import Grid from "@/legacy/components/Grid";
+import ScreenshotChangesModal from "@/legacy/components/ScreenshotChangesModal";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { LocalOrRemoteCustomType } from "@/legacy/lib/models/common/ModelData";
+import { ModelStatus } from "@/legacy/lib/models/common/ModelStatus";
+import { AuthStatus } from "@/modules/userContext/types";
 
 import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
 

package/{components → src/legacy/components}/ChangesItems/DevCollaborationExperiment.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import {
   Box,
   Button,
@@ -8,9 +7,10 @@ import {
   DialogHeader,
   Text,
 } from "@prismicio/editor-ui";
+import { useEffect, useState } from "react";
 
-import { useExperimentVariant } from "@src/hooks/useExperimentVariant";
-import { telemetry } from "@src/apiClient";
+import { telemetry } from "@/apiClient";
+import { useExperimentVariant } from "@/hooks/useExperimentVariant";
 
 type DevCollaborationExperimentPayload = {
   cardButtonLabel: string;

package/{components → src/legacy/components}/CodeBlock/index.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { type ThemeUIStyleObject, Flex, useThemeUI } from "theme-ui";
 import hljs from "highlight.js";
+import React from "react";
+import { Flex, type ThemeUIStyleObject, useThemeUI } from "theme-ui";
 
-import { svelte } from "@lib/hljs/svelte";
+import { svelte } from "@/legacy/lib/hljs/svelte";
 
 hljs.registerLanguage("svelte", svelte);