slice-machine-ui 1.19.3-dev-rename-and-delete-variations.0 → 1.19.3-dev-next-release.0

package/components/Simulator/index.tsx

@@ -291,17 +291,15 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
               </>
             )}
           </BaseStyles>
-          {currentState === UiState.SUCCESS ? (
-            <Box
+          {currentState === UiState.SUCCESS && isDisplayEditor ? (
+            <Flex
               className="editor"
               sx={{
+                flexDirection: "column",
                 marginLeft: "16px",
                 maxWidth: "440px",
                 minWidth: "440px",
                 overflowY: "auto",
-                ...(isDisplayEditor
-                  ? { display: "flex", flexDirection: "column" }
-                  : { display: "none" }),
               }}
             >
               {/*
@@ -335,7 +333,7 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
                   />
                 </Suspense>
               </ErrorBoundary>
-            </Box>
+            </Flex>
           ) : null}
         </Flex>
       </Box>

package/lib/builders/SliceBuilder/Sidebar/{AddVariationModal.tsx → VariationModal.tsx}

@@ -15,7 +15,7 @@ const Error = ({ msg }: { msg?: string }) => (
     {msg || "Error!"}
   </Text>
 );
-const AddVariationModal: React.FunctionComponent<{
+const VariationModal: React.FunctionComponent<{
   isOpen: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClose: () => any;
@@ -51,7 +51,7 @@ const AddVariationModal: React.FunctionComponent<{
     const originError = !(
       origin.value.length && variations.find((v) => v.id === origin.value)
     )
-      ? { id: "You must select an existing variation!" }
+      ? { id: "Yuu must select an existing variation!" }
       : null;
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     const invalidIdError = id &&
@@ -236,4 +236,4 @@ const AddVariationModal: React.FunctionComponent<{
   );
 };
 
-export default AddVariationModal;
+export default VariationModal;

package/lib/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,11 +1,8 @@
 import { Box, Button } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { type Dispatch, type FC, type SetStateAction, useState } from "react";
+import { type FC, useState } from "react";
 
-import AddVariationModal from "@builders/SliceBuilder/Sidebar/AddVariationModal";
-import type { SliceBuilderState } from "@builders/SliceBuilder";
-import { DeleteVariationModal } from "@components/DeleteVariationModal";
-import { RenameVariationModal } from "@components/Forms/RenameVariationModal";
+import VariationModal from "@builders/SliceBuilder/Sidebar/VariationModal";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
@@ -18,43 +15,27 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 type SidebarProps = {
   slice: ComponentUI;
   variation: VariationSM;
-  sliceBuilderState: SliceBuilderState;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
+  updateSlice: (slice: ComponentUI) => void;
 };
 
-type DialogState =
-  | { type: "ADD_VARIATION" }
-  | { type: "RENAME_VARIATION"; variation: VariationSM }
-  | { type: "DELETE_VARIATION"; variation: VariationSM }
-  | undefined;
-
 export const Sidebar: FC<SidebarProps> = (props) => {
-  const { slice, variation, sliceBuilderState, setSliceBuilderState } = props;
+  const { slice, variation, updateSlice } = props;
 
-  const [dialog, setDialog] = useState<DialogState>();
+  const router = useRouter();
 
   const screenshotChangesModal = useScreenshotChangesModal();
   const { sliceFilterFn, defaultVariationSelector } =
     screenshotChangesModal.modalPayload;
 
-  const { copyVariationSlice, updateSlice } = useSliceMachineActions();
-  const router = useRouter();
+  const [showVariationModal, setShowVariationModal] = useState(false);
+  const { copyVariationSlice } = useSliceMachineActions();
 
   return (
     <>
       <Box flexDirection="column" gap={16}>
         {slice.model.variations.map((v) => (
           <SharedSliceCard
-            action={{
-              type: "menu",
-              onRename: () => {
-                setDialog({ type: "RENAME_VARIATION", variation: v });
-              },
-              onRemove: () => {
-                setDialog({ type: "DELETE_VARIATION", variation: v });
-              },
-              removeDisabled: slice.model.variations.length <= 1,
-            }}
+            action={{ type: "menu" }}
             key={v.id}
             mode="navigation"
             onUpdateScreenshot={() => {
@@ -75,7 +56,7 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         ))}
         <Button
           onClick={() => {
-            setDialog({ type: "ADD_VARIATION" });
+            setShowVariationModal(true);
           }}
           startIcon="add"
           sx={{ bottom: 72, marginInline: 24, position: "sticky" }}
@@ -88,62 +69,36 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         slices={sliceFilterFn([slice])}
         defaultVariationSelector={defaultVariationSelector}
       />
-      {dialog?.type === "RENAME_VARIATION" ? (
-        <RenameVariationModal
-          isOpen
-          onClose={() => {
-            setDialog(undefined);
-          }}
-          slice={slice}
-          variation={dialog.variation}
-          sliceBuilderState={sliceBuilderState}
-          setSliceBuilderState={setSliceBuilderState}
-        />
-      ) : undefined}
-      {dialog?.type === "DELETE_VARIATION" ? (
-        <DeleteVariationModal
-          isOpen
-          onClose={() => {
-            setDialog(undefined);
-          }}
-          slice={slice}
-          variation={dialog.variation}
-          sliceBuilderState={sliceBuilderState}
-          setSliceBuilderState={setSliceBuilderState}
-        />
-      ) : undefined}
-      {dialog?.type === "ADD_VARIATION" ? (
-        <AddVariationModal
-          initialVariation={variation}
-          isOpen
-          onClose={() => {
-            setDialog(undefined);
-          }}
-          onSubmit={(id, name, copiedVariation) => {
-            copyVariationSlice(id, name, copiedVariation);
+      <VariationModal
+        initialVariation={variation}
+        isOpen={showVariationModal}
+        onClose={() => {
+          setShowVariationModal(false);
+        }}
+        onSubmit={(id, name, copiedVariation) => {
+          copyVariationSlice(id, name, copiedVariation);
 
-            // We have to immediately save the new variation to prevent an
-            // infinite loop related to screenshots handling.
-            const newVariation = Variation.copyValue(copiedVariation, id, name);
-            const newSlice = {
-              ...slice,
-              model: {
-                ...slice.model,
-                variations: [...slice.model.variations, newVariation],
-              },
-            };
-            updateSlice(newSlice, setSliceBuilderState);
+          // We have to immediately save the new variation to prevent an
+          // infinite loop related to screenshots handling.
+          const newVariation = Variation.copyValue(copiedVariation, id, name);
+          const newSlice = {
+            ...slice,
+            model: {
+              ...slice.model,
+              variations: [...slice.model.variations, newVariation],
+            },
+          };
+          updateSlice(newSlice);
 
-            const url = SLICES_CONFIG.getBuilderPagePathname({
-              libraryName: newSlice.href,
-              sliceName: newSlice.model.name,
-              variationId: newVariation.id,
-            });
-            void router.replace(url);
-          }}
-          variations={slice.model.variations}
-        />
-      ) : undefined}
+          const url = SLICES_CONFIG.getBuilderPagePathname({
+            libraryName: newSlice.href,
+            sliceName: newSlice.model.name,
+            variationId: newVariation.id,
+          });
+          void router.replace(url);
+        }}
+        variations={slice.model.variations}
+      />
     </>
   );
 };

package/lib/builders/SliceBuilder/index.tsx

@@ -1,16 +1,7 @@
 import { Box, Button } from "@prismicio/editor-ui";
-import {
-  type Dispatch,
-  type FC,
-  type SetStateAction,
-  useEffect,
-  useState,
-} from "react";
+import React, { useState, useEffect } from "react";
 
-import {
-  type ToastPayload,
-  handleRemoteResponse,
-} from "@src/modules/toaster/utils";
+import { handleRemoteResponse } from "@src/modules/toaster/utils";
 
 import FieldZones from "./FieldZones";
 import { Sidebar } from "./Sidebar";
@@ -36,7 +27,10 @@ import { selectIsSimulatorAvailableForFramework } from "@src/modules/environment
 import { isSelectedSliceTouched } from "@src/modules/selectedSlice/selectors";
 import { ComponentWithSliceProps } from "@src/layouts/WithSlice";
 
-export type SliceBuilderState = ToastPayload & { loading: boolean };
+export type SliceBuilderState = {
+  loading: boolean;
+  done: boolean;
+};
 
 export const initialState: SliceBuilderState = {
   loading: false,
@@ -44,60 +38,63 @@ export const initialState: SliceBuilderState = {
 };
 
 const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
-  const { openToaster } = useSliceMachineActions();
+  const { openToaster, updateSlice } = useSliceMachineActions();
   const isTouched = useSelector((store: SliceMachineStoreType) =>
     isSelectedSliceTouched(store, slice.from, slice.model.id),
   );
 
   // We need to move this state to somewhere global to update the UI if any action from anywhere save or update to the filesystem I'd guess
-  const [state, setState] = useState<SliceBuilderState>(initialState);
+  const [data, setData] = useState<SliceBuilderState>(initialState);
 
   useEffect(() => {
     if (isTouched) {
-      setState(initialState);
+      setData(initialState);
     }
   }, [isTouched]);
 
   // activate/deactivate Success message
   useEffect(() => {
-    if (state.done) {
-      handleRemoteResponse(openToaster)(state);
+    if (data.done) {
+      // @ts-expect-error TS(2345) FIXME: Argument of type '(content: string | React.ReactNo... Remove this comment to see the full error message
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      handleRemoteResponse(openToaster)(data);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state]);
+  }, [data]);
 
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (!variation) return <AppLayout />;
   else
     return (
       <SliceBuilderForVariation
-        setState={setState}
+        updateSlice={(slice) => {
+          updateSlice(slice, setData);
+        }}
         slice={slice}
         variation={variation}
         isTouched={isTouched}
-        state={state}
+        data={data}
       />
     );
 };
 
 type SliceBuilderForVariationProps = {
-  setState: Dispatch<SetStateAction<SliceBuilderState>>;
+  updateSlice: (slice: ComponentUI) => void;
   slice: ComponentUI;
   variation: VariationSM;
   isTouched: boolean;
-  state: SliceBuilderState;
+  data: SliceBuilderState;
 };
-const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
-  setState,
+const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
+  updateSlice,
   slice,
   variation,
   isTouched,
-  state,
+  data,
 }) => {
   const isSimulatorAvailableForFramework = useSelector(
     selectIsSimulatorAvailableForFramework,
   );
-  const { updateSlice } = useSliceMachineActions();
 
   return (
     <AppLayout>
@@ -110,10 +107,10 @@ const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
             isTouched={!!isTouched}
           />
           <Button
-            loading={state.loading}
-            disabled={!isTouched || state.loading}
+            loading={data.loading}
+            disabled={!isTouched || data.loading}
             onClick={() => {
-              updateSlice(slice, setState);
+              updateSlice(slice);
             }}
             data-cy="builder-save-button"
           >
@@ -131,8 +128,7 @@ const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
           <Sidebar
             slice={slice}
             variation={variation}
-            sliceBuilderState={state}
-            setSliceBuilderState={setState}
+            updateSlice={updateSlice}
           />
           <FieldZones variation={variation} />
         </Box>

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-628af0af7eca309e.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/RsTCACkh2zmwWfCbSFXPV/_buildManifest.js" defer=""></script><script src="/_next/static/RsTCACkh2zmwWfCbSFXPV/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"RsTCACkh2zmwWfCbSFXPV","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/412af4286eb0b283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/412af4286eb0b283.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-152015a55bf443c9.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/xdIrFCP9it-7L81Mcll4H/_buildManifest.js" defer=""></script><script src="/_next/static/xdIrFCP9it-7L81Mcll4H/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"xdIrFCP9it-7L81Mcll4H","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>