slice-machine-ui 1.26.1-beta.9 → 2.0.0

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/DeleteSliceZoneModal.tsx

@@ -1,9 +1,9 @@
-import { Close, Flex, Heading, Paragraph } from "theme-ui";
 import { FC } from "react";
+import { Close, Flex, Heading, Paragraph } from "theme-ui";
 
-import { Button } from "@components/Button";
-import Card from "@components/Card";
-import SliceMachineModal from "@components/SliceMachineModal";
+import { Button } from "@/legacy/components/Button";
+import Card from "@/legacy/components/Card";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 
 type DeleteSliceZoneModalProps = {
   deleteSliceZone: () => void;

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/List.tsx

@@ -1,17 +1,17 @@
+import { CustomTypeFormat } from "@slicemachine/manager";
 import React, { useEffect } from "react";
 import { toast } from "react-toastify";
 
-import Grid from "@components/Grid";
+import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
+import { useLab } from "@/features/labs/labsList/useLab";
+import { NonSharedSliceCard } from "@/features/slices/sliceCards/NonSharedSliceCard";
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import Grid from "@/legacy/components/Grid";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 import {
   NonSharedSliceInSliceZone,
   SliceZoneSlice,
-} from "@lib/models/common/CustomType/sliceZone";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { CustomTypeFormat } from "@slicemachine/manager";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { NonSharedSliceCard } from "@src/features/slices/sliceCards/NonSharedSliceCard";
-import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { useLab } from "@src/features/labs/labsList/useLab";
+} from "@/legacy/lib/models/common/CustomType/sliceZone";
 
 interface SlicesListProps {
   format: CustomTypeFormat;

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx

@@ -1,19 +1,19 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { FC } from "react";
 import { Text } from "theme-ui";
-import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { SliceTemplate } from "@src/features/slicesTemplates/useSlicesTemplates";
-import { Slices } from "@lib/models/common/Slice";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { createSlicesTemplates } from "@src/features/slicesTemplates/actions/createSlicesTemplates";
-import { LibraryUI } from "@lib/models/common/LibraryUI";
-import { getState } from "@src/apiClient";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { managerClient } from "@src/managerClient";
+import { getState } from "@/apiClient";
+import { createSlicesTemplates } from "@/features/slicesTemplates/actions/createSlicesTemplates";
+import { SliceTemplate } from "@/features/slicesTemplates/useSlicesTemplates";
+import ModalFormCard from "@/legacy/components/ModalFormCard";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
+import { Slices } from "@/legacy/lib/models/common/Slice";
+import { managerClient } from "@/managerClient";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
-import ModalFormCard from "../../../../components/ModalFormCard";
-import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
+import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
 interface UpdateSliceModalProps {
   formId: string;

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

@@ -1,9 +1,9 @@
-import { Text } from "theme-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { Text } from "theme-ui";
 
-import { ComponentUI } from "@lib/models/common/ComponentUI";
+import ModalFormCard from "@/legacy/components/ModalFormCard";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 
-import ModalFormCard from "../../../../components/ModalFormCard";
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
 interface UpdateSliceModalProps {

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

@@ -1,9 +1,10 @@
 import { FieldArray } from "formik";
 
-import Grid from "@components/Grid";
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import Grid from "@/legacy/components/Grid";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+
 import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -1,44 +1,47 @@
 import {
+  Badge,
   Button,
-  Switch,
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuTrigger,
   Icon,
-  Badge,
+  Switch,
 } from "@prismicio/editor-ui";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { BaseStyles } from "theme-ui";
-import { useRouter } from "next/router";
 import { toast } from "react-toastify";
-import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { BaseStyles } from "theme-ui";
 
-import { CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
-import { CreateSliceModal } from "@components/Forms/CreateSliceModal";
-import type { SliceZoneSlice } from "@lib/models/common/CustomType/sliceZone";
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { LibraryUI } from "@lib/models/common/LibraryUI";
-import type { SlicesSM } from "@lib/models/common/Slices";
-import { ListHeader } from "@src/components/List";
-import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
-import { telemetry } from "@src/apiClient";
+import { telemetry } from "@/apiClient";
+import { ListHeader } from "@/components/List";
+import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { SliceZoneBlankSlate } from "@/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
+import { addSlicesToSliceZone } from "@/features/slices/actions/addSlicesToSliceZone";
+import { useSlicesTemplates } from "@/features/slicesTemplates/useSlicesTemplates";
+import { CreateSliceModal } from "@/legacy/components/Forms/CreateSliceModal";
+import { ToastMessageWithPath } from "@/legacy/components/ToasterContainer";
+import type { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import {
+  CustomTypes,
+  CustomTypeSM,
+} from "@/legacy/lib/models/common/CustomType";
+import type { SliceZoneSlice } from "@/legacy/lib/models/common/CustomType/sliceZone";
+import type { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
+import type { SlicesSM } from "@/legacy/lib/models/common/Slices";
 import {
   getFrontendSlices,
   getLibraries,
   getRemoteSlices,
-} from "@src/modules/slices";
-import type { SliceMachineStoreType } from "@src/redux/type";
-import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
-import { addSlicesToSliceZone } from "@src/features/slices/actions/addSlicesToSliceZone";
-import { ToastMessageWithPath } from "@components/ToasterContainer";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+} from "@/modules/slices";
+import type { SliceMachineStoreType } from "@/redux/type";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
-import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
-import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
 import { SlicesList } from "./List";
+import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
+import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
 
 const mapAvailableAndSharedSlices = (
   sliceZone: SlicesSM,

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/SliceZone/sliceTemplatesComingSoon.ts

@@ -1,4 +1,4 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 
 export const sliceTemplatesComingSoon: ComponentUI[] = [
   {

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/TabModal/InputBox.tsx

@@ -1,5 +1,5 @@
 import { Field } from "formik";
-import { Box, Label, Input, Text } from "theme-ui";
+import { Box, Input, Label, Text } from "theme-ui";
 
 export const InputBox = ({
   name,

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/TabModal/create.tsx

@@ -1,4 +1,5 @@
-import ModalFormCard from "../../../../components/ModalFormCard";
+import ModalFormCard from "@/legacy/components/ModalFormCard";
+
 import { InputBox } from "./InputBox";
 
 const formId = "create-tab";

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/TabModal/delete.tsx

@@ -1,6 +1,6 @@
-import { Button, Heading, Box, Text } from "theme-ui";
+import { Box, Button, Heading, Text } from "theme-ui";
 
-import ModalFormCard from "../../../../components/ModalFormCard";
+import ModalFormCard from "@/legacy/components/ModalFormCard";
 
 const formId = "create-tab";
 

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/TabModal/update.tsx

@@ -1,6 +1,7 @@
-import { Button, Box } from "theme-ui";
+import { Box, Button } from "theme-ui";
+
+import ModalFormCard from "@/legacy/components/ModalFormCard";
 
-import ModalFormCard from "../../../../components/ModalFormCard";
 import { InputBox } from "./InputBox";
 
 const formId = "create-tab";

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -1,45 +1,48 @@
 import { Box, ProgressCircle } from "@prismicio/editor-ui";
+import {
+  Group,
+  NestableWidget,
+  UID,
+} from "@prismicio/types-internal/lib/customtypes";
+import { useRouter } from "next/router";
 import { FC, Suspense } from "react";
-import { flushSync } from "react-dom";
 import type { DropResult } from "react-beautiful-dnd";
+import { flushSync } from "react-dom";
 import type { AnyObjectSchema } from "yup";
-import { useRouter } from "next/router";
 
-import ctBuilderArray from "@lib/models/common/widgets/ctBuilderArray";
-import {
-  TabSM,
-  type TabField,
-  type TabFields,
-  CustomTypes,
-  TabFieldsModel,
-} from "@lib/models/common/CustomType";
-import type { AnyWidget } from "@lib/models/common/widgets/Widget";
-import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils";
-import { List } from "@src/components/List";
-import { telemetry } from "@src/apiClient";
-import { transformKeyAccessor } from "@utils/str";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { telemetry } from "@/apiClient";
+import { List } from "@/components/List";
 import {
+  addField,
   createSectionSliceZone,
+  deleteField,
   deleteSectionSliceZone,
   deleteSliceZoneSlice,
-  addField,
-  deleteField,
   reorderField,
   updateField,
-} from "@src/domain/customType";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+} from "@/domain/customType";
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import {
+  CustomTypes,
+  type TabField,
+  type TabFields,
+  TabFieldsModel,
+  TabSM,
+} from "@/legacy/lib/models/common/CustomType";
+import ctBuilderArray from "@/legacy/lib/models/common/widgets/ctBuilderArray";
+import type { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
+import {
+  ensureDnDDestination,
+  ensureWidgetTypeExistence,
+} from "@/legacy/lib/utils";
+import { transformKeyAccessor } from "@/legacy/lib/utils/str";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
 import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
-import {
-  FieldType,
-  Group,
-  NestableWidget,
-  UID,
-} from "@prismicio/types-internal/lib/customtypes";
 
 interface TabZoneProps {
   tabId: string;
@@ -80,9 +83,8 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   }: {
     id: string;
     label: string;
-    widgetTypeName: FieldType;
+    widgetTypeName: keyof typeof Widgets;
   }) => {
-    // @ts-expect-error We have to create a widget map or a service instead of using export name
     if (ensureWidgetTypeExistence(Widgets, widgetTypeName)) {
       return;
     }
@@ -123,9 +125,9 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
       event: "field:added",
       id,
       name: label,
-      type: widgetTypeName,
+      type: newField.type,
       isInAGroup: false,
-      contentType: customType.format === "page" ? "page type" : "custom type",
+      contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
 
@@ -161,7 +163,6 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     newKey: string;
     value: TabField;
   }) => {
-    // @ts-expect-error We have to create a widget map or a service instead of using export name
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
@@ -214,7 +215,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           {query.newPageType === undefined ? (
             <Zone
               zoneType="customType"
-              zoneTypeFormat={customType.format}
+              zoneTypeFormat={customType.format ?? "custom"}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               tabId={tabId}
               title="Static Zone"
@@ -241,6 +242,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
               }
               testId="static-zone-content"
               isRepeatableCustomType={customType.repeatable}
+              emptyStateActionTestId="add-Static-field"
             />
           ) : undefined}
 

package/{lib → src/legacy/lib}/builders/CustomTypeBuilder/index.tsx

@@ -1,6 +1,6 @@
 import { DropdownMenuItem, Icon } from "@prismicio/editor-ui";
-import { useState } from "react";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 import {
   Window,
@@ -9,14 +9,14 @@ import {
   WindowTabsContent,
   WindowTabsList,
   WindowTabsTrigger,
-} from "@src/components/Window";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
-import { CustomTypes } from "@lib/models/common/CustomType";
+} from "@/components/Window";
 import {
   createSection,
   deleteSection,
   renameSection,
-} from "@src/domain/customType";
+} from "@/domain/customType";
+import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
 
 import CreateModal from "./TabModal/create";
 import DeleteModal from "./TabModal/delete";

package/{lib → src/legacy/lib}/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,10 +1,3 @@
-import { FC, useState } from "react";
-import { flushSync } from "react-dom";
-import { DropResult } from "react-beautiful-dnd";
-import {
-  FieldType,
-  NestableWidget,
-} from "@prismicio/types-internal/lib/customtypes";
 import {
   Box,
   Dialog,
@@ -12,26 +5,34 @@ import {
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes";
+import { FC, useState } from "react";
+import { DropResult } from "react-beautiful-dnd";
+import { flushSync } from "react-dom";
 
-import { ensureDnDDestination } from "@lib/utils";
-import { transformKeyAccessor } from "@utils/str";
-import * as Widgets from "@lib/models/common/widgets";
-import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
-import { List } from "@src/components/List";
-import { WidgetsArea } from "@lib/models/common/Slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import { telemetry } from "@/apiClient";
+import { List } from "@/components/List";
 import {
   addField,
   deleteField,
   deleteRepeatableZone,
   reorderField,
   updateField,
-} from "@src/domain/slice";
-import Zone from "@lib/builders/common/Zone";
-import EditModal from "@lib/builders/common/EditModal";
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
-import { telemetry } from "@src/apiClient";
-import { useGroupsInSlicesExperiment } from "@src/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
+} from "@/domain/slice";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
+import EditModal from "@/legacy/lib/builders/common/EditModal";
+import Zone from "@/legacy/lib/builders/common/Zone";
+import { Groups } from "@/legacy/lib/models/common/Group";
+import {
+  SlicePrimaryFieldSM,
+  WidgetsArea,
+} from "@/legacy/lib/models/common/Slice";
+import * as Widgets from "@/legacy/lib/models/common/widgets";
+import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
+import sliceBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/sliceBuilderArray";
+import { ensureDnDDestination } from "@/legacy/lib/utils";
+import { transformKeyAccessor } from "@/legacy/lib/utils/str";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -47,7 +48,6 @@ const FieldZones: FC = () => {
     isDeleteRepeatableZoneDialogOpen,
     setIsDeleteRepeatableZoneDialogOpen,
   ] = useState(false);
-  const groupsInSlicesExperiment = useGroupsInSlicesExperiment();
 
   // We won't show the Repeatable Zone if no items are configured.
   const hasItems = Boolean(
@@ -56,7 +56,6 @@ const FieldZones: FC = () => {
 
   const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
     if (
-      groupsInSlicesExperiment.eligible &&
       widgetArea === WidgetsArea.Items &&
       variation.items &&
       Object.keys(variation.items).length <= 1
@@ -109,34 +108,21 @@ const FieldZones: FC = () => {
     }: {
       id: string;
       label: string;
-      widgetTypeName: FieldType;
+      widgetTypeName: keyof typeof Widgets;
     }) => {
-      // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const widget = Widgets[widgetTypeName];
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      const widget = sliceBuilderWidgetsArray.find(
+        (sliceBuilderWidget) =>
+          sliceBuilderWidget.CUSTOM_NAME === widgetTypeName ||
+          sliceBuilderWidget.TYPE_NAME === widgetTypeName,
+      );
       if (!widget) {
-        console.log(
-          `Could not find widget with type name "${widgetTypeName}". Please contact us!`,
-        );
+        throw new Error(`Unsupported Field Type: ${widgetTypeName}`);
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      const newField = widget.create(label) as NestableWidget;
-
-      if (
-        newField.type === "Range" ||
-        newField.type === "IntegrationFields" ||
-        newField.type === "Separator"
-      ) {
-        throw new Error(`Unsupported Field Type: ${newField.type}`);
-      }
+      const newField = widget.create(label) as SlicePrimaryFieldSM;
 
       try {
-        const CurrentWidget: AnyWidget = Widgets[newField.type];
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-        CurrentWidget.schema.validateSync(newField, { stripUnknown: false });
+        widget.schema.validateSync(newField, { stripUnknown: false });
       } catch (error) {
         throw new Error(`Model is invalid for widget "${newField.type}".`);
       }
@@ -146,7 +132,8 @@ const FieldZones: FC = () => {
         variationId: variation.id,
         widgetArea,
         newFieldId: id,
-        newField,
+        newField:
+          newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
       });
 
       setSlice(newSlice);
@@ -155,9 +142,9 @@ const FieldZones: FC = () => {
         event: "field:added",
         id,
         name: label,
-        type: widgetTypeName,
+        type: newField.type,
         isInAGroup: false,
-        contentType: "slice",
+        contentType: getContentTypeForTracking(window.location.pathname),
       });
     };
 
@@ -218,8 +205,10 @@ const FieldZones: FC = () => {
         }
         testId="static-zone-content"
         isRepeatableCustomType={undefined}
+        emptyStateHeading={undefined}
+        emptyStateActionTestId="add-Static-field"
       />
-      {!groupsInSlicesExperiment.eligible || hasItems ? (
+      {hasItems ? (
         <Zone
           zoneType="slice"
           zoneTypeFormat={undefined}
@@ -227,7 +216,7 @@ const FieldZones: FC = () => {
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={sliceBuilderWidgetsArray}
+          widgetsArray={groupBuilderWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}
@@ -245,6 +234,8 @@ const FieldZones: FC = () => {
           }
           testId="slice-repeatable-zone"
           isRepeatableCustomType={undefined}
+          emptyStateHeading="No fields"
+          emptyStateActionTestId="add-Repeatable-field"
         />
       ) : null}
       <Dialog
@@ -256,12 +247,12 @@ const FieldZones: FC = () => {
         <DialogContent>
           <Box padding={24} gap={12} flexDirection="column">
             <strong>
-              This action will permanently remove the Repeatable Zone from the{" "}
+              This action will permanently remove the repeatable zone from the{" "}
               {slice.model.name} slice.
             </strong>
             <div>
-              If you need repeatable fields again, use a repeatable group field
-              in place of the repeatable zone.
+              To reimplement repeatable fields later, use a group field instead
+              of the repeatable zone.
             </div>
           </Box>
           <DialogActions

package/{lib → src/legacy/lib}/builders/SliceBuilder/SimulatorButton/index.tsx

@@ -1,24 +1,25 @@
 import { Button, tokens } from "@prismicio/editor-ui";
-import React, { PropsWithChildren, useEffect, useRef } from "react";
-
-import { SIMULATOR_WINDOW_ID, VIDEO_SIMULATOR_TOOLTIP } from "@lib/consts";
 import { useRouter } from "next/router";
-import ReactTooltip from "react-tooltip";
-
-import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
-import { userHasSeenSimulatorToolTip } from "@src/modules/userContext";
+import React, { PropsWithChildren, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { telemetry } from "@src/apiClient";
+import ReactTooltip from "react-tooltip";
 
+import { telemetry } from "@/apiClient";
 import {
   HoverCard,
   HoverCardCloseButton,
   HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
-} from "@src/components/HoverCard";
+} from "@/components/HoverCard";
+import { PlayCircleIcon } from "@/icons/PlayCircleIcon";
+import {
+  SIMULATOR_WINDOW_ID,
+  VIDEO_SIMULATOR_TOOLTIP,
+} from "@/legacy/lib/consts";
+import { userHasSeenSimulatorToolTip } from "@/modules/userContext";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 const SimulatorOnboardingTooltip: React.FC<
   PropsWithChildren<{

package/{lib/builders/SliceBuilder/Sidebar → src/legacy/lib/builders/SliceBuilder/VariationsList}/AddVariationModal.tsx

@@ -1,13 +1,13 @@
+import { Box, Button } from "@prismicio/editor-ui";
+import { Field, Form, Formik } from "formik";
+import { camelCase } from "lodash";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
-import { Formik, Form, Field } from "formik";
-import { Button, Box } from "@prismicio/editor-ui";
-import { Text, Label, Input } from "theme-ui";
-import { camelCase } from "lodash";
+import { Input, Label, Text } from "theme-ui";
 
-import SliceMachineModal from "@components/SliceMachineModal";
-import Card from "@components/Card/Default";
-import { VariationSM } from "@lib/models/common/Slice";
+import Card from "@/legacy/components/Card/Default";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
 
 const Error = ({ msg }: { msg?: string }) => (
   <Text as="span" sx={{ fontSize: 12, color: "error", mt: "5px", ml: 2 }}>

package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css

@@ -0,0 +1,10 @@
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hideScrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hideScrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "hideScrollbar": string;
+};
+export = styles;
+