slice-machine-ui 1.26.1-beta.10 → 1.26.1-beta.11

package/components/ReviewModal/ReviewModal.tsx

@@ -1,12 +1,11 @@
-import { FC } from "react";
-import { useSelector } from "react-redux";
-
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLastSyncChange, getUserReview } from "@src/modules/userContext";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getLibraries } from "@src/modules/slices";
 import { hasLocal } from "@lib/models/common/ModelData";
 import { useInAppGuide } from "@src/features/inAppGuide/InAppGuideContext";
+import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
+import { getLibraries } from "@src/modules/slices";
+import { getLastSyncChange, getUserReview } from "@src/modules/userContext";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { FC } from "react";
+import { useSelector } from "react-redux";
 
 import { ReviewForm } from "./ReviewForm";
 

package/components/ScreenshotChangesModal/VariationDropZone.tsx

@@ -1,14 +1,13 @@
-import { useState } from "react";
-import { Flex, Text, Spinner } from "theme-ui";
-import { useHotkeys } from "react-hotkeys-hook";
-import { toast } from "react-toastify";
-import { AiOutlineCloudUpload } from "react-icons/ai";
-
-import { acceptedImagesTypes } from "@lib/consts";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ScreenshotPreview } from "@components/ScreenshotPreview";
+import { acceptedImagesTypes } from "@lib/consts";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { uploadSliceScreenshot } from "@src/features/slices/actions/uploadSliceScreenshot";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { AiOutlineCloudUpload } from "react-icons/ai";
+import { toast } from "react-toastify";
+import { Flex, Spinner, Text } from "theme-ui";
 
 import useCustomScreenshot from "./useCustomScreenshot";
 

package/components/ScreenshotChangesModal/index.tsx

@@ -1,25 +1,21 @@
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { Flex, Heading, Close, Box, Text } from "theme-ui";
-
 import Card from "@components/Card";
-import { AiOutlinePicture } from "react-icons/ai";
-import { RiErrorWarningLine } from "react-icons/ri";
 import SliceMachineModal from "@components/SliceMachineModal";
-
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { Kbd } from "@src/components/Kbd";
+import { FigmaIcon } from "@src/icons/FigmaIcon";
 import { isModalOpen } from "@src/modules/modal";
-
-import { SliceMachineStoreType } from "@src/redux/type";
 import { ModalKeysEnum } from "@src/modules/modal/types";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { getOS, OS } from "@src/utils/os";
+import { useEffect, useState } from "react";
+import { AiOutlinePicture } from "react-icons/ai";
+import { RiErrorWarningLine } from "react-icons/ri";
+import { useSelector } from "react-redux";
+import { Box, Close, Flex, Heading, Text } from "theme-ui";
 
 import VariationDropZone from "./VariationDropZone";
 
-import { FigmaIcon } from "@src/icons/FigmaIcon";
-import { getOS, OS } from "@src/utils/os";
-import { Kbd } from "@src/components/Kbd";
-
 export type SliceVariationSelector = { sliceID: string; variationID: string };
 
 const FigmaTip = () => {

package/components/ScreenshotChangesModal/useCustomScreenshot.tsx

@@ -1,8 +1,7 @@
+import { acceptedImagesTypes } from "@lib/consts";
 import React, { useRef } from "react";
 import { Label } from "theme-ui";
 
-import { acceptedImagesTypes } from "@lib/consts";
-
 type HandleFileProp = {
   inputFile: React.RefObject<HTMLInputElement>;
   children?: React.ReactNode;

package/components/ScreenshotPreview/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from "react";
-import { Flex, Image, Text, ThemeUIStyleObject } from "theme-ui";
 import { MdInfoOutline } from "react-icons/md";
+import { Flex, Image, Text, ThemeUIStyleObject } from "theme-ui";
 
 const MemoedImage = memo<{ src: string | undefined }>(({ src }) => (
   <Image src={src} alt="Preview image" sx={{ maxHeight: "100%" }} />

package/components/ScreenshotPreviewModal/index.tsx

@@ -1,12 +1,12 @@
+import Card from "@components/Card";
+import { ScreenshotPreview } from "@components/ScreenshotPreview";
 import SliceMachineModal from "@components/SliceMachineModal";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
 import { isModalOpen } from "@src/modules/modal";
 import { ModalKeysEnum } from "@src/modules/modal/types";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { useSelector } from "react-redux";
 import { Button, Close, Flex, Heading } from "theme-ui";
-import Card from "@components/Card";
-import { ScreenshotPreview } from "@components/ScreenshotPreview";
 
 type ScreenshotModalProps = {
   sliceName: string;

package/components/Simulator/components/FailedConnect/index.tsx

@@ -1,9 +1,8 @@
-import { Image, Link, Text } from "theme-ui";
-import FullPage from "../FullPage";
-
 import { Button } from "@components/Button";
-
 import { IoMdRefresh } from "react-icons/io";
+import { Image, Link, Text } from "theme-ui";
+
+import FullPage from "../FullPage";
 
 const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => (
   <FullPage>

package/components/Simulator/components/Header/VariationsPopover/index.tsx

@@ -1,13 +1,11 @@
+import { VariationSM } from "@lib/models/common/Slice";
 import React, { useEffect, useState } from "react";
+import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
 import { Popover } from "react-tiny-popover";
+import { Box, Button, ThemeUICSSObject, ThemeUIStyleObject } from "theme-ui";
 
 import MenuList from "./MenuList";
 
-import { Button, Box, ThemeUICSSObject, ThemeUIStyleObject } from "theme-ui";
-
-import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
-import { VariationSM } from "@lib/models/common/Slice";
-
 const VarationsPopover: React.FunctionComponent<{
   buttonSx?: ThemeUICSSObject;
   defaultValue?: VariationSM;

package/components/Simulator/components/Header/index.tsx

@@ -1,12 +1,11 @@
-import router from "next/router";
-import { Text, Flex, Switch, Label } from "theme-ui";
-
 import { Button } from "@components/Button";
-import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
 import * as Links from "@components/Simulator/components/Header/links";
-import SliceMachineLogo from "@src/icons/SliceMachineLogo";
+import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { VariationSM } from "@lib/models/common/Slice";
+import SliceMachineLogo from "@src/icons/SliceMachineLogo";
+import router from "next/router";
+import { Flex, Label, Switch, Text } from "theme-ui";
 
 const redirect = (
   model: ComponentUI,

package/components/Simulator/components/IframeRenderer/index.tsx

@@ -1,10 +1,8 @@
-import { RefCallback, useCallback, useEffect, useRef, useState } from "react";
-
-import { Flex } from "theme-ui";
-
+import { ScreenDimensions } from "@lib/models/common/Screenshots";
 import { SimulatorClient } from "@prismicio/simulator";
 import { useElementSize } from "@src/hooks/useElementSize";
-import { ScreenDimensions } from "@lib/models/common/Screenshots";
+import { RefCallback, useCallback, useEffect, useRef, useState } from "react";
+import { Flex } from "theme-ui";
 
 function useSimulatorClient(): readonly [
   SimulatorClient | undefined,

package/components/Simulator/components/Toolbar/index.tsx

@@ -1,7 +1,7 @@
 import { DropDownMenu } from "@components/DropDownSelector";
-import { RiCloseLine } from "react-icons/ri";
+import { ScreenDimensions } from "@lib/models/common/Screenshots";
 import { useState } from "react";
-
+import { RiCloseLine } from "react-icons/ri";
 import { Flex } from "theme-ui";
 
 import {
@@ -10,8 +10,6 @@ import {
   ScreenSizes,
 } from "./ScreensizeInput";
 
-import { ScreenDimensions } from "@lib/models/common/Screenshots";
-
 type ToolbarProps = {
   handleScreenSizeChange: (screenDimensions: ScreenDimensions) => void;
   screenDimensions: ScreenDimensions;

package/components/Simulator/index.tsx

@@ -1,3 +1,18 @@
+import ScreenshotPreviewModal from "@components/ScreenshotPreviewModal";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ScreenDimensions } from "@lib/models/common/Screenshots";
+import { Slices, VariationSM } from "@lib/models/common/Slice";
+import { EditorConfig, SharedSliceEditor } from "@prismicio/editor-fields";
+import { DefaultErrorMessage } from "@prismicio/editor-ui";
+import { renderSliceMock } from "@prismicio/mocks";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+import { saveSliceMock, telemetry } from "@src/apiClient";
+import { ErrorBoundary } from "@src/ErrorBoundary";
+import useThrottle from "@src/hooks/useThrottle";
+import { selectEndpoints, selectSimulatorUrl } from "@src/modules/environment";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { defaultSharedSliceContent } from "@src/utils/editor";
 import {
   FC,
   Suspense,
@@ -7,41 +22,19 @@ import {
   useRef,
   useState,
 } from "react";
-import { EditorConfig, SharedSliceEditor } from "@prismicio/editor-fields";
-import { DefaultErrorMessage } from "@prismicio/editor-ui";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
-
-import { defaultSharedSliceContent } from "@src/utils/editor";
-
 import { BaseStyles, Box, Flex, Spinner } from "theme-ui";
 
+import FailedConnect from "./components/FailedConnect";
+import FullPage from "./components/FullPage";
 import Header from "./components/Header";
-
-import { saveSliceMock, telemetry } from "@src/apiClient";
-import { useSelector } from "react-redux";
-import { selectEndpoints, selectSimulatorUrl } from "@src/modules/environment";
-import { SliceMachineStoreType } from "@src/redux/type";
+import IframeRenderer from "./components/IframeRenderer";
 import { Toolbar } from "./components/Toolbar";
 import {
   ScreenSizeOptions,
   ScreenSizes,
 } from "./components/Toolbar/ScreensizeInput";
-import { ScreenDimensions } from "@lib/models/common/Screenshots";
-import ScreenshotPreviewModal from "@components/ScreenshotPreviewModal";
-import { renderSliceMock } from "@prismicio/mocks";
-
-import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
-
-import useThrottle from "@src/hooks/useThrottle";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
-import IframeRenderer from "./components/IframeRenderer";
-import { ErrorBoundary } from "@src/ErrorBoundary";
-
-import FullPage from "./components/FullPage";
-import FailedConnect from "./components/FailedConnect";
-import { Slices, VariationSM } from "@lib/models/common/Slice";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 type SimulatorProps = {
   slice: ComponentUI;

package/components/SliceMachineDrawer/index.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import Card from "@components/Card";
 import Drawer from "rc-drawer";
+import React from "react";
 import { Close, Flex, Heading } from "theme-ui";
-import Card from "@components/Card";
 
 export const SliceMachineDrawerUI: React.FunctionComponent<{
   isOpen: boolean;

package/components/SliceMachineIconButton/index.tsx

@@ -1,6 +1,6 @@
-import { IconButton } from "theme-ui";
 import { IconButtonProps } from "@theme-ui/components";
 import { IconType } from "react-icons/lib";
+import { IconButton } from "theme-ui";
 
 const defaultActiveSx = (active: boolean, hasError: boolean | null): object => {
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

package/components/SliceMachineModal/index.tsx

@@ -1,5 +1,5 @@
-import Modal from "react-modal";
 import * as React from "react";
+import Modal from "react-modal";
 
 const SliceMachineModal: React.FunctionComponent<Modal.Props> = (props) => {
   const modalStyle = {

package/components/ToasterContainer/index.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-
+import { MdDangerous, MdDone, MdError, MdWarning } from "react-icons/md";
 import {
-  ToastContainer as ReactToastifyContainer,
+  Slide,
   toast,
+  ToastContainer as ReactToastifyContainer,
   TypeOptions,
-  Slide,
 } from "react-toastify";
 
-import { MdDangerous, MdDone, MdError, MdWarning } from "react-icons/md";
-
 const getIconAccordingToasterType = ({
   type,
 }: {

package/components/Tooltip/TextWithTooltip.tsx

@@ -1,9 +1,8 @@
-import ReactTooltip from "react-tooltip";
+import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
 import React, { ElementType, useEffect, useRef, useState } from "react";
+import ReactTooltip from "react-tooltip";
 import { Text, ThemeUIStyleObject } from "theme-ui";
 
-import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
-
 interface TextWithTooltipProps {
   text: string;
   as: ElementType;

package/components/Tooltip/index.jsx

@@ -1,7 +1,6 @@
-import { useThemeUI } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-
 import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
+import ReactTooltip from "react-tooltip";
+import { useThemeUI } from "theme-ui";
 
 const Tooltip = (props) => {
   const { theme, colorMode } = useThemeUI();

package/components/Warnings/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/lib/builders/CustomTypeBuilder/SliceZone/DeleteSliceZoneModal.tsx

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

package/lib/builders/CustomTypeBuilder/SliceZone/List.tsx

@@ -1,17 +1,16 @@
-import React, { useEffect } from "react";
-import { toast } from "react-toastify";
-
 import Grid from "@components/Grid";
+import { ComponentUI } from "@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 { useLab } from "@src/features/labs/labsList/useLab";
 import { NonSharedSliceCard } from "@src/features/slices/sliceCards/NonSharedSliceCard";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { useLab } from "@src/features/labs/labsList/useLab";
+import React, { useEffect } from "react";
+import { toast } from "react-toastify";
 
 interface SlicesListProps {
   format: CustomTypeFormat;

package/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx

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

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

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

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

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

package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -1,44 +1,43 @@
+import { CreateSliceModal } from "@components/Forms/CreateSliceModal";
+import { ToastMessageWithPath } from "@components/ToasterContainer";
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import { CustomTypes, CustomTypeSM } from "@lib/models/common/CustomType";
+import type { SliceZoneSlice } from "@lib/models/common/CustomType/sliceZone";
+import type { LibraryUI } from "@lib/models/common/LibraryUI";
+import type { SlicesSM } from "@lib/models/common/Slices";
 import {
+  Badge,
   Button,
-  Switch,
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuTrigger,
   Icon,
-  Badge,
+  Switch,
 } from "@prismicio/editor-ui";
-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 { 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 { telemetry } from "@src/apiClient";
 import { ListHeader } from "@src/components/List";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
 import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
-import { telemetry } from "@src/apiClient";
+import { addSlicesToSliceZone } from "@src/features/slices/actions/addSlicesToSliceZone";
+import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
 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";
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
+import { BaseStyles } from "theme-ui";
 
 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/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/builders/CustomTypeBuilder/TabModal/delete.tsx

@@ -1,4 +1,4 @@
-import { Button, Heading, Box, Text } from "theme-ui";
+import { Box, Button, Heading, Text } from "theme-ui";
 
 import ModalFormCard from "../../../../components/ModalFormCard";
 

package/lib/builders/CustomTypeBuilder/TabModal/update.tsx

@@ -1,4 +1,4 @@
-import { Button, Box } from "theme-ui";
+import { Box, Button } from "theme-ui";
 
 import ModalFormCard from "../../../../components/ModalFormCard";
 import { InputBox } from "./InputBox";

package/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -1,45 +1,44 @@
-import { Box, ProgressCircle } from "@prismicio/editor-ui";
-import { FC, Suspense } from "react";
-import { flushSync } from "react-dom";
-import type { DropResult } from "react-beautiful-dnd";
-import type { AnyObjectSchema } from "yup";
-import { useRouter } from "next/router";
-
-import ctBuilderArray from "@lib/models/common/widgets/ctBuilderArray";
 import {
-  TabSM,
+  CustomTypes,
   type TabField,
   type TabFields,
-  CustomTypes,
   TabFieldsModel,
+  TabSM,
 } from "@lib/models/common/CustomType";
+import ctBuilderArray from "@lib/models/common/widgets/ctBuilderArray";
 import type { AnyWidget } from "@lib/models/common/widgets/Widget";
 import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils";
-import { List } from "@src/components/List";
+import { Box, ProgressCircle } from "@prismicio/editor-ui";
+import {
+  FieldType,
+  Group,
+  NestableWidget,
+  UID,
+} from "@prismicio/types-internal/lib/customtypes";
 import { telemetry } from "@src/apiClient";
-import { transformKeyAccessor } from "@utils/str";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { List } from "@src/components/List";
 import {
+  addField,
   createSectionSliceZone,
+  deleteField,
   deleteSectionSliceZone,
   deleteSliceZoneSlice,
-  addField,
-  deleteField,
   reorderField,
   updateField,
 } from "@src/domain/customType";
 import { ErrorBoundary } from "@src/ErrorBoundary";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { transformKeyAccessor } from "@utils/str";
+import { useRouter } from "next/router";
+import { FC, Suspense } from "react";
+import type { DropResult } from "react-beautiful-dnd";
+import { flushSync } from "react-dom";
+import type { AnyObjectSchema } from "yup";
 
 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;

package/lib/builders/CustomTypeBuilder/index.tsx

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