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

package/.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     project: ["./tsconfig.json"],
     tsconfigRootDir: __dirname,
   },
-  plugins: ["@typescript-eslint", "import"],
+  plugins: ["@typescript-eslint", "simple-import-sort", "import"],
   extends: [
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
@@ -30,5 +30,10 @@ module.exports = {
     ],
     "@typescript-eslint/prefer-nullish-coalescing": "warn",
     "@typescript-eslint/strict-boolean-expressions": "warn",
+    "simple-import-sort/exports": "warn",
+    "simple-import-sort/imports": "warn",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
   },
 };

package/.storybook/preview.tsx

@@ -1,5 +1,6 @@
-import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import "@prismicio/editor-ui/style.css";
+
+import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {

package/components/App/index.tsx

@@ -1,15 +1,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 { ReviewModal } from "@components/ReviewModal";
 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 { getLibraries } from "@src/modules/slices";
+import { SliceMachineStoreType } from "@src/redux/type";
+import type { FC, ReactNode } from "react";
+import { useSelector } from "react-redux";
+import { BaseStyles } from "theme-ui";
 
 type Props = Readonly<{
   children?: ReactNode;

package/components/AppLayout/index.tsx

@@ -1,10 +1,5 @@
-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 { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
 import { Breadcrumb } from "@src/components/Breadcrumb";
 import {
   PageLayout,
@@ -13,6 +8,9 @@ import {
   PageLayoutPane,
 } from "@src/components/PageLayout";
 import { ErrorBoundary } from "@src/ErrorBoundary";
+import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
+import { useRouter } from "next/router";
+import { FC, PropsWithChildren, Suspense } from "react";
 
 export const AppLayout: FC<PropsWithChildren> = ({
   children,

package/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/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/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/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/Card/WithTabs/components.jsx

@@ -1,5 +1,5 @@
-import { Box, useThemeUI } from "theme-ui";
 import { Tab } from "react-tabs";
+import { Box, useThemeUI } from "theme-ui";
 
 export const CustomTabList = ({ children, ...otherProps }) => (
   <Box

package/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/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/Changelog/index.tsx

@@ -1,16 +1,15 @@
-import { Suspense, useEffect, useState } from "react";
-import { BaseStyles } from "theme-ui";
-import { useSelector } from "react-redux";
+import { AppLayout, AppLayoutContent } from "@components/AppLayout";
 import { ErrorBoundary, ProgressCircle } from "@prismicio/editor-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 { SliceMachineStoreType } from "@src/redux/type";
+import { Suspense, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { BaseStyles } from "theme-ui";
 
 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/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/Changelog/navigation/VersionTag.tsx

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

package/components/Changelog/navigation/index.tsx

@@ -1,12 +1,11 @@
-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 { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
 import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
 import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+import React from "react";
+import { Flex, Text } from "theme-ui";
 
 import { VersionBadge } from "./VersionBadge";
 

package/components/Changelog/versionDetails/ReleaseNotesDetails.tsx

@@ -1,6 +1,6 @@
+import { marked } from "marked";
 import React from "react";
 import { Text } from "theme-ui";
-import { marked } from "marked";
 
 interface ReleaseNotesDetailsProps {
   releaseNotes: string;

package/components/Changelog/versionDetails/UpdateCommandBox.tsx

@@ -1,12 +1,11 @@
-import React from "react";
-import { Button, Flex, Text } from "theme-ui";
-import { AiFillWarning } from "react-icons/ai";
-
+import CodeBlock from "@components/CodeBlock";
 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 React from "react";
+import { AiFillWarning } from "react-icons/ai";
+import { Button, Flex, Text } from "theme-ui";
 
 interface UpdateCommandBoxProps {
   selectedVersion: Version;

package/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/Changelog/versionDetails/index.tsx

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

package/components/ChangesEmptyState/AuthErrorPage.tsx

@@ -1,8 +1,7 @@
-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 useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import React, { FC } from "react";
 
 export type AuthErrorPageProps = {
   authStatus: AuthStatus.UNAUTHORIZED | AuthStatus.FORBIDDEN;

package/components/ChangesEmptyState/OfflinePage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Flex, Text } from "theme-ui";
 import { IoCloudOfflineOutline } from "react-icons/io5";
+import { Flex, Text } from "theme-ui";
 
 export const OfflinePage = () => {
   return (

package/components/ChangesEmptyState/index.ts

@@ -1,2 +1,2 @@
-export { OfflinePage } from "./OfflinePage";
 export { AuthErrorPage } from "./AuthErrorPage";
+export { OfflinePage } from "./OfflinePage";

package/components/ChangesItems/ChangesItems.tsx

@@ -1,20 +1,19 @@
-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 { ComponentUI } from "@lib/models/common/ComponentUI";
 import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
+import { ModelStatus } from "@lib/models/common/ModelStatus";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+import { countMissingScreenshots } from "@src/domain/slice";
+import { ErrorBoundary } from "@src/ErrorBoundary";
 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 { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import { AuthStatus } from "@src/modules/userContext/types";
+import React, { Suspense } from "react";
+import { AiFillCamera, AiOutlineExclamationCircle } from "react-icons/ai";
 
 import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
 

package/components/ChangesItems/DevCollaborationExperiment.tsx

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

package/components/ChangesItems/ErrorBanner.tsx

@@ -1,6 +1,6 @@
+import { alpha } from "@theme-ui/color";
 import React from "react";
 import { Flex, Text, ThemeUIStyleObject } from "theme-ui";
-import { alpha } from "@theme-ui/color";
 
 interface ErrorBannerProps {
   message: string;

package/components/CodeBlock/index.tsx

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

package/components/ConfigErrors/index.jsx

@@ -1,6 +1,6 @@
-import { Box, Heading, Flex, Text } from "theme-ui";
 import Card from "@components/Card";
 import Li from "@components/Li";
+import { Box, Flex, Heading, Text } from "theme-ui";
 
 const ConfigErrors = ({ errors }) => (
   <Card

package/components/CustomTypeTable/changesPage.tsx

@@ -1,16 +1,16 @@
-import Link from "next/link";
-import React from "react";
-import { Box, Text } from "theme-ui";
 import { CustomTypeSM } from "@lib/models/common/CustomType";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
 import {
-  LocalOrRemoteCustomType,
   hasLocal,
+  LocalOrRemoteCustomType,
 } from "@lib/models/common/ModelData";
+import { ModelStatus } from "@lib/models/common/ModelStatus";
 import { StatusBadge } from "@src/features/changes/StatusBadge";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { AuthStatus } from "@src/modules/userContext/types";
 import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
+import { AuthStatus } from "@src/modules/userContext/types";
+import Link from "next/link";
+import React from "react";
+import { Box, Text } from "theme-ui";
 
 interface CustomTypeTableProps {
   customTypes: LocalOrRemoteCustomType[];

package/components/DeleteCTModal/index.tsx

@@ -1,15 +1,14 @@
-import SliceMachineModal from "@components/SliceMachineModal";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { Close, Flex, Heading, Text, useThemeUI } from "theme-ui";
-import Card from "@components/Card";
-import { MdOutlineDelete } from "react-icons/md";
 import { Button } from "@components/Button";
+import Card from "@components/Card";
+import SliceMachineModal from "@components/SliceMachineModal";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-
 import { deleteCustomType } from "@src/features/customTypes/actions/deleteCustomType";
+import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { useState } from "react";
+import { MdOutlineDelete } from "react-icons/md";
+import { Close, Flex, Heading, Text, useThemeUI } from "theme-ui";
 
 type DeleteCTModalProps = {
   customType: CustomType;

package/components/DeleteDocumentsDrawer/AssociatedDocumentsCard.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import { Flex, Text, Card, Link } from "theme-ui";
-
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
+import React from "react";
+import { Card, Flex, Link, Text } from "theme-ui";
 
 type AssociatedDocumentsCardProps = {
   ctName: string;

package/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx

@@ -1,15 +1,14 @@
-import React from "react";
-
-import { Text } from "theme-ui";
 import { Button } from "@components/Button";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { isRemoteOnly } from "@lib/models/common/ModelData";
-import { getModelId } from "@lib/models/common/ModelData";
-import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 import { SliceMachineDrawerUI } from "@components/SliceMachineDrawer";
+import { getModelId, isRemoteOnly } from "@lib/models/common/ModelData";
 import { PushChangesLimit } from "@slicemachine/manager";
+import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
+import { SliceMachineStoreType } from "@src/redux/type";
+import React from "react";
+import { useSelector } from "react-redux";
+import { Text } from "theme-ui";
+
+import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 
 export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
   pushChanges: (confirmDeleteDocuments: boolean) => void;

package/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import { Flex, Text, Checkbox, ThemeUIStyleObject, Label } from "theme-ui";
 import { Button } from "@components/Button";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isRemoteOnly } from "@lib/models/common/ModelData";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getModelId } from "@lib/models/common/ModelData";
-import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 import { SliceMachineDrawerUI } from "@components/SliceMachineDrawer";
+import { getModelId, isRemoteOnly } from "@lib/models/common/ModelData";
 import { PushChangesLimit } from "@slicemachine/manager";
+import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
+import { SliceMachineStoreType } from "@src/redux/type";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { Checkbox, Flex, Label, Text, ThemeUIStyleObject } from "theme-ui";
+
+import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 
 const ConfirmationDialogue: React.FC<{
   isConfirmed: boolean;

package/components/DeleteDocumentsDrawer/index.tsx

@@ -1,2 +1,2 @@
-export { SoftDeleteDocumentsDrawer } from "./SoftDeleteDocumentsDrawer";
 export { HardDeleteDocumentsDrawer } from "./HardDeleteDocumentsDrawer";
+export { SoftDeleteDocumentsDrawer } from "./SoftDeleteDocumentsDrawer";

package/components/DeleteSliceModal/index.tsx

@@ -1,13 +1,12 @@
-import { useState } from "react";
-import { MdOutlineDelete } from "react-icons/md";
-import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
-
-import SliceMachineModal from "@components/SliceMachineModal";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import Card from "@components/Card";
 import { Button } from "@components/Button";
+import Card from "@components/Card";
+import SliceMachineModal from "@components/SliceMachineModal";
 import { deleteSlice } from "@src/features/slices/actions/deleteSlice";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useState } from "react";
+import { MdOutlineDelete } from "react-icons/md";
+import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
 
 type DeleteSliceModalProps = {
   isOpen: boolean;

package/components/DeleteVariationModal/index.tsx

@@ -1,3 +1,5 @@
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
 import {
   Box,
   Dialog,
@@ -6,14 +8,11 @@ import {
   DialogHeader,
   Text,
 } from "@prismicio/editor-ui";
-import { useRouter } from "next/router";
-import { useState, type FC, type PropsWithChildren } from "react";
-
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { VariationSM } from "@lib/models/common/Slice";
 import { deleteVariation } from "@src/features/slices/sliceBuilder/actions/deleteVariation";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useRouter } from "next/router";
+import { type FC, type PropsWithChildren, useState } from "react";
 
 type DeleteVariationModalProps = {
   isOpen: boolean;

package/components/DropDownSelector/index.tsx

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
+import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
 import { Popover } from "react-tiny-popover";
+import { Box, Button, ThemeUICSSObject } from "theme-ui";
 
 import MenuList from "./MenuList";
 
-import { Button, Box, ThemeUICSSObject } from "theme-ui";
-
-import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
-
 type DropDownMenuProps = {
   options: string[];
   currentValue: string;

package/components/EmptyState/index.tsx

@@ -1,8 +1,7 @@
-import { Button, Text, Heading, Box } from "theme-ui";
-import React from "react";
-import { Video } from "cloudinary-react";
-
 import { telemetry } from "@src/apiClient";
+import { Video } from "cloudinary-react";
+import React from "react";
+import { Box, Button, Heading, Text } from "theme-ui";
 
 interface Props {
   title: string;

package/components/FormFields/Array.jsx

@@ -1,8 +1,6 @@
-import { Fragment, useRef, useEffect, useState } from "react";
-
 import { FieldArray } from "formik";
-
-import { Text, Label, Flex, Input, Button } from "theme-ui";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { Button, Flex, Input, Label, Text } from "theme-ui";
 
 const FormFieldArray = ({
   field,

package/components/FormFields/Checkbox.jsx

@@ -1,5 +1,5 @@
 import { Field } from "formik";
-import { Label, Checkbox } from "theme-ui";
+import { Checkbox, Label } from "theme-ui";
 
 const FormFieldCheckbox = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/components/FormFields/CheckboxControl.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { FormFieldCheckbox } from "./";
 

package/components/FormFields/Input.tsx

@@ -1,7 +1,7 @@
 import { InputType } from "@lib/forms/fields";
 import { Field, FieldMetaProps } from "formik";
 import React from "react";
-import { Box, Label, Input, Text, ThemeUIStyleObject } from "theme-ui";
+import { Box, Input, Label, Text, ThemeUIStyleObject } from "theme-ui";
 
 export enum InputFieldStyles {
   ERROR,

package/components/FormFields/SelectDefaultValue.jsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
 import { useFormikContext } from "formik";
+import { useEffect, useState } from "react";
 
 import { FormFieldCheckbox } from "./";