slice-machine-ui 1.14.2-dev-next-release.5 → 1.14.2-dev-next-release.8

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -1,41 +1,37 @@
 import { Box, Label } from "theme-ui";
 import { FC, useState } from "react";
 import Select from "react-select";
-import { useRouter } from "next/router";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
 import { SliceSM } from "@lib/models/common/Slice";
 import { LibraryUI } from "@lib/models/common/LibraryUI";
 import ModalFormCard from "@components/ModalFormCard";
 import { createSlice } from "@src/features/slices/actions/createSlice";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getState } from "@src/apiClient";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { managerClient } from "@src/managerClient";
+
 import { validateSliceModalValues } from "../formsValidator";
 import { InputBox } from "../components/InputBox";
-import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 
 type CreateSliceModalProps = {
   onClose: () => void;
+  onSuccess: (
+    newSlice: SharedSlice,
+    libraryName: string
+  ) => Promise<void> | void;
   localLibraries: readonly LibraryUI[];
   remoteSlices: ReadonlyArray<SliceSM>;
-  customType?: CustomTypeSM;
-  tabId?: string;
 };
 
 type FormValues = { sliceName: string; from: string };
 
 export const CreateSliceModal: FC<CreateSliceModalProps> = ({
   onClose,
+  onSuccess,
   localLibraries,
   remoteSlices,
-  customType,
-  tabId,
 }) => {
-  const router = useRouter();
-  const { createSliceSuccess, saveCustomTypeSuccess } =
-    useSliceMachineActions();
+  const { createSliceSuccess } = useSliceMachineActions();
   const [isCreatingSlice, setIsCreatingSlice] = useState(false);
 
   const onSubmit = async (values: FormValues) => {
@@ -53,42 +49,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         // Update Redux store
         createSliceSuccess(serverState.libraries);
 
-        // When creating a slice from a custom type, we add it directly to the slice zone and save
-        if (customType) {
-          const newCustomType = {
-            ...customType,
-            tabs: customType.tabs.map((tab) =>
-              tab.key === tabId && tab.sliceZone
-                ? {
-                    ...tab,
-                    sliceZone: {
-                      key: tab.sliceZone.key,
-                      value: [
-                        ...tab.sliceZone.value,
-                        {
-                          key: newSlice.id,
-                          value: newSlice,
-                        },
-                      ],
-                    },
-                  }
-                : tab
-            ),
-          };
-          await managerClient.customTypes.updateCustomType({
-            model: CustomTypes.fromSM(newCustomType),
-          });
-          saveCustomTypeSuccess(CustomTypes.fromSM(newCustomType));
-        }
-
-        // Redirect to the slice page
-        const variationId = newSlice.variations[0].id;
-        const sliceLocation = SLICES_CONFIG.getBuilderPagePathname({
-          libraryName,
-          sliceName,
-          variationId,
-        });
-        void router.push(sliceLocation);
+        await onSuccess(newSlice, libraryName);
       },
     });
   };
@@ -115,12 +76,6 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
       content={{
         title: "Create a new slice",
       }}
-      actionMessage={
-        customType
-          ? CUSTOM_TYPES_MESSAGES[customType.format]
-              .createSliceFromTypeActionMessage
-          : undefined
-      }
     >
       {({ touched, values, setFieldValue, errors }) => (
         <Box>

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

@@ -1,19 +1,27 @@
 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 UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
+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 ModalFormCard from "../../../../components/ModalFormCard";
+import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 
 interface UpdateSliceModalProps {
   isOpen: boolean;
   formId: string;
   close: () => void;
-  onSubmit: (values: SliceZoneFormValues) => void;
+  onSuccess: (slices: SharedSlice[]) => Promise<void>;
   availableSlicesTemplates: SliceTemplate[];
+  localLibraries: readonly LibraryUI[];
 }
 
 export type SliceZoneFormValues = {
@@ -24,9 +32,12 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
   isOpen,
   formId,
   close,
-  onSubmit,
+  onSuccess,
   availableSlicesTemplates,
+  localLibraries,
 }) => {
+  const { createSliceSuccess } = useSliceMachineActions();
+
   return (
     <ModalFormCard
       buttonLabel="Add"
@@ -34,7 +45,35 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
       formId={formId}
       close={close}
       onSubmit={(values: SliceZoneFormValues) => {
-        onSubmit(values);
+        const { sliceKeys } = values;
+
+        void createSlicesTemplates({
+          templateIDs: sliceKeys,
+          localLibrariesNames: localLibraries.map((library) => library.name),
+          onSuccess: async (slicesIds: string[]) => {
+            // TODO(DT-1453): Remove the need of the global getState
+            const serverState = await getState();
+
+            // Update Redux store
+            createSliceSuccess(serverState.libraries);
+
+            const slices: SharedSlice[] = await Promise.all(
+              slicesIds
+                .map(async (sliceId) => {
+                  const slice = await managerClient.slices.readSlice({
+                    libraryID: localLibraries[0].name,
+                    sliceID: sliceId,
+                  });
+                  return slice.model;
+                })
+                .filter(
+                  (slice) => slice !== undefined
+                ) as Promise<SharedSlice>[]
+            );
+
+            await onSuccess(slices);
+          },
+        });
       }}
       initialValues={{
         sliceKeys: [],

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

@@ -1,6 +1,8 @@
 import { Text } from "theme-ui";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
 import { ComponentUI } from "@lib/models/common/ComponentUI";
+
 import ModalFormCard from "../../../../components/ModalFormCard";
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
@@ -8,7 +10,7 @@ interface UpdateSliceModalProps {
   isOpen: boolean;
   formId: string;
   close: () => void;
-  onSubmit: (values: SliceZoneFormValues) => void;
+  onSubmit: (slices: SharedSlice[]) => Promise<void>;
   availableSlices: ReadonlyArray<ComponentUI>;
 }
 
@@ -30,8 +32,14 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
       formId={formId}
       close={close}
       onSubmit={(values: SliceZoneFormValues) => {
-        onSubmit(values);
-        close();
+        const { sliceKeys } = values;
+        const slices = sliceKeys
+          .map(
+            (sliceKey) =>
+              availableSlices.find((s) => s.model.id === sliceKey)?.model
+          )
+          .filter((slice) => slice !== undefined) as SharedSlice[];
+        void onSubmit(slices);
       }}
       initialValues={{
         sliceKeys: [],

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

@@ -13,13 +13,12 @@ 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 {
-  NonSharedSliceInSliceZone,
-  SliceZoneSlice,
-} from "@lib/models/common/CustomType/sliceZone";
-import type { CustomTypeSM } from "@lib/models/common/CustomType";
+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";
@@ -33,14 +32,14 @@ import {
 } from "@src/modules/slices";
 import type { SliceMachineStoreType } from "@src/redux/type";
 import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
-import { createSlicesTemplates } from "@src/features/slicesTemplates/actions/createSlicesTemplates";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { addSlicesToSliceZone } from "@src/features/slices/actions/addSlicesToSliceZone";
+import { ToastMessageWithPath } from "@components/ToasterContainer";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
-import { SlicesList } from "./List";
 import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
 import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
-import { getState } from "@src/apiClient";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SlicesList } from "./List";
 
 const mapAvailableAndSharedSlices = (
   sliceZone: SlicesSM,
@@ -101,8 +100,6 @@ interface SliceZoneProps {
   onCreateSliceZone: () => void;
   onDeleteSliceZone: () => void;
   onRemoveSharedSlice: (sliceId: string) => void;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  onSelectSharedSlices: Function;
   sliceZone?: SlicesSM | null | undefined;
   tabId: string;
 }
@@ -112,7 +109,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   onCreateSliceZone,
   onDeleteSliceZone,
   onRemoveSharedSlice,
-  onSelectSharedSlices,
   sliceZone,
   tabId,
 }) => {
@@ -130,7 +126,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     })
   );
-  const { createSliceSuccess } = useSliceMachineActions();
+  const { initCustomTypeStore, saveCustomTypeSuccess } =
+    useSliceMachineActions();
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal
   );
@@ -157,11 +154,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     .filter((e) => e.type === "SharedSlice")
     .map((e) => e.payload) as ReadonlyArray<ComponentUI>;
 
-  /* Preserve these keys in SliceZone */
-  const nonSharedSlicesKeysInSliceZone = slicesInSliceZone
-    .filter((e) => e.type === "Slice")
-    .map((e) => (e.payload as NonSharedSliceInSliceZone).key);
-
   const availableSlicesToAdd = availableSlices.filter(
     (slice) =>
       !sharedSlicesInSliceZone.some(
@@ -169,11 +161,11 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       )
   );
 
-  const onAddNewSlice = () => {
+  const openUpdateSliceZoneModal = () => {
     setIsUpdateSliceZoneModalOpen(true);
   };
 
-  const onCreateNewSlice = () => {
+  const openCreateSliceModal = () => {
     setIsCreateSliceModalOpen(true);
   };
 
@@ -197,6 +189,29 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     }
   };
 
+  const closeUpdateSliceZoneModal = () => {
+    setIsUpdateSliceZoneModalOpen(false);
+    redirectToEditMode();
+  };
+
+  const closeCreateSliceModal = () => {
+    setIsCreateSliceModalOpen(false);
+    redirectToEditMode();
+  };
+
+  const closeSlicesTemplatesModal = () => {
+    setIsSlicesTemplatesModalOpen(false);
+    redirectToEditMode();
+  };
+
+  const onAddSlicesToSliceZone = (newCustomType: CustomTypeSM) => {
+    // Reset selected custom type store to update slice zone and saving status
+    initCustomTypeStore(newCustomType, newCustomType);
+
+    // Update available custom type store with new custom type
+    saveCustomTypeSuccess(CustomTypes.fromSM(newCustomType));
+  };
+
   return (
     <Box flexDirection="column" height="100%">
       {query.newPageType === undefined ? (
@@ -214,7 +229,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
                   <DropdownMenuContent align="end">
                     <DropdownMenuItem
                       startIcon={<Icon name="add" size="large" />}
-                      onSelect={onCreateNewSlice}
+                      onSelect={openCreateSliceModal}
                       description="Start from scratch."
                     >
                       Create new
@@ -233,7 +248,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
 
                     {availableSlicesToAdd.length > 0 ? (
                       <DropdownMenuItem
-                        onSelect={onAddNewSlice}
+                        onSelect={openUpdateSliceZoneModal}
                         startIcon={<Icon name="folder" size="large" />}
                         description="Select from your own slices."
                       >
@@ -274,8 +289,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           </BaseStyles>
         ) : (
           <SliceZoneBlankSlate
-            onAddNewSlice={onAddNewSlice}
-            onCreateNewSlice={onCreateNewSlice}
+            openUpdateSliceZoneModal={openUpdateSliceZoneModal}
+            openCreateSliceModal={openCreateSliceModal}
             openSlicesTemplatesModal={openSlicesTemplatesModal}
             projectHasAvailableSlices={availableSlicesToAdd.length > 0}
             isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
@@ -286,45 +301,39 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         isOpen={isUpdateSliceZoneModalOpen}
         formId={`tab-slicezone-form-${tabId}`}
         availableSlices={availableSlicesToAdd}
-        onSubmit={({ sliceKeys }) => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-          onSelectSharedSlices(
-            sliceKeys.concat(sharedSlicesInSliceZone.map((s) => s.model.id)),
-            nonSharedSlicesKeysInSliceZone
-          );
-          redirectToEditMode();
+        onSubmit={async (slices: SharedSlice[]) => {
+          const newCustomType = await addSlicesToSliceZone({
+            customType,
+            tabId,
+            slices,
+          });
+          onAddSlicesToSliceZone(newCustomType);
+          closeUpdateSliceZoneModal();
+          toast.success("Slice(s) added to slice zone");
         }}
-        close={() => setIsUpdateSliceZoneModalOpen(false)}
+        close={closeUpdateSliceZoneModal}
       />
       <SlicesTemplatesModal
         isOpen={isSlicesTemplatesModalOpen}
         formId={`tab-slicezone-form-${tabId}`}
         availableSlicesTemplates={availableSlicesTemplates}
-        onSubmit={({ sliceKeys }) =>
-          void createSlicesTemplates({
-            templateIDs: sliceKeys,
-            localLibrariesNames: localLibraries.map((library) => library.name),
-            onSuccess: async (slicesIds: string[]) => {
-              // TODO(DT-1453): Remove the need of the global getState
-              const serverState = await getState();
-
-              // Update Redux store
-              createSliceSuccess(serverState.libraries);
-
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-              onSelectSharedSlices(
-                slicesIds.concat(
-                  sharedSlicesInSliceZone.map((s) => s.model.id)
-                ),
-                nonSharedSlicesKeysInSliceZone
-              );
-
-              setIsSlicesTemplatesModalOpen(false);
-              redirectToEditMode();
-            },
-          })
-        }
-        close={() => setIsSlicesTemplatesModalOpen(false)}
+        localLibraries={localLibraries}
+        onSuccess={async (slices: SharedSlice[]) => {
+          const newCustomType = await addSlicesToSliceZone({
+            customType,
+            tabId,
+            slices,
+          });
+          onAddSlicesToSliceZone(newCustomType);
+          closeSlicesTemplatesModal();
+          toast.success(
+            <ToastMessageWithPath
+              message="Slice template(s) added to slice zone and created at: "
+              path={`${localLibraries[0].name}/`}
+            />
+          );
+        }}
+        close={closeSlicesTemplatesModal}
       />
       <DeleteSliceZoneModal
         isDeleteSliceZoneModalOpen={isDeleteSliceZoneModalOpen}
@@ -338,13 +347,24 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       />
       {localLibraries?.length !== 0 && isCreateSliceModalOpen && (
         <CreateSliceModal
-          onClose={() => {
-            setIsCreateSliceModalOpen(false);
+          onSuccess={async (newSlice: SharedSlice) => {
+            const newCustomType = await addSlicesToSliceZone({
+              customType,
+              tabId,
+              slices: [newSlice],
+            });
+            onAddSlicesToSliceZone(newCustomType);
+            closeCreateSliceModal();
+            toast.success(
+              <ToastMessageWithPath
+                message="New slice added to slice zone and created at: "
+                path={`${localLibraries[0].name}/${newSlice.name}/model.json`}
+              />
+            );
           }}
           localLibraries={localLibraries}
           remoteSlices={remoteSlices}
-          customType={customType}
-          tabId={tabId}
+          onClose={closeCreateSliceModal}
         />
       )}
     </Box>

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

@@ -46,7 +46,6 @@ const TabZone: FC<TabZoneProps> = ({
     createSliceZone,
     deleteSliceZone,
     deleteCustomTypeSharedSlice,
-    replaceCustomTypeSharedSlice,
   } = useSliceMachineActions();
 
   const { query } = useRouter();
@@ -128,14 +127,6 @@ const TabZone: FC<TabZoneProps> = ({
     deleteSliceZone(tabId);
   };
 
-  const onSelectSharedSlices = (keys: string[], preserve: string[] = []) => {
-    void telemetry.track({
-      event: "custom-type:slice-zone-updated",
-      customTypeId: customType.id,
-    });
-    replaceCustomTypeSharedSlice(tabId, keys, preserve);
-  };
-
   const onRemoveSharedSlice = (sliceId: string) => {
     deleteCustomTypeSharedSlice(tabId, sliceId);
   };
@@ -189,7 +180,6 @@ const TabZone: FC<TabZoneProps> = ({
             onRemoveSharedSlice={onRemoveSharedSlice}
             onCreateSliceZone={onCreateSliceZone}
             onDeleteSliceZone={onDeleteSliceZone}
-            onSelectSharedSlices={onSelectSharedSlices}
           />
         </Suspense>
       </ErrorBoundary>

package/lib/builders/common/EditModal/index.jsx

@@ -272,7 +272,7 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
                       borderRadius: "4px",
                     }}
                   >
-                    Save
+                    Done
                   </Button>
                 </Flex>
               }

package/lib/models/common/CustomType/sliceZone.ts

@@ -30,24 +30,6 @@ export const SliceZone = {
       value,
     };
   },
-  replaceSharedSlice(
-    sz: SlicesSM,
-    keys: ReadonlyArray<string>,
-    preserve: ReadonlyArray<string> = []
-  ): SlicesSM {
-    const value = sz.value
-      .filter(({ key }) => preserve.includes(key))
-      .concat(
-        keys.map((key) => ({
-          key,
-          value: { type: "SharedSlice" },
-        }))
-      );
-    return {
-      ...sz,
-      value,
-    };
-  },
   removeSharedSlice(sz: SlicesSM, key: string): SlicesSM {
     const value = sz.value.filter(({ key: k }) => k !== key);
 

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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-98311155cf2a39cc.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/aWd6brnoafNP_fcVfTvaj/_buildManifest.js" defer=""></script><script src="/_next/static/aWd6brnoafNP_fcVfTvaj/_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":"aWd6brnoafNP_fcVfTvaj","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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-62bb0daedfad0679.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/W5H36cBabsItHQduZS-Az/_buildManifest.js" defer=""></script><script src="/_next/static/W5H36cBabsItHQduZS-Az/_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":"W5H36cBabsItHQduZS-Az","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>

package/out/[lib]/[sliceName]/[variation]/screenshot.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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-98311155cf2a39cc.js" defer=""></script><script src="/_next/static/chunks/746-1d8d106d76d9a63e.js" defer=""></script><script src="/_next/static/chunks/pages/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/screenshot-2750adc7cdad5005.js" defer=""></script><script src="/_next/static/aWd6brnoafNP_fcVfTvaj/_buildManifest.js" defer=""></script><script src="/_next/static/aWd6brnoafNP_fcVfTvaj/_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":{}},"page":"/[lib]/[sliceName]/[variation]/screenshot","query":{},"buildId":"aWd6brnoafNP_fcVfTvaj","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-62bb0daedfad0679.js" defer=""></script><script src="/_next/static/chunks/746-1d8d106d76d9a63e.js" defer=""></script><script src="/_next/static/chunks/pages/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/screenshot-2750adc7cdad5005.js" defer=""></script><script src="/_next/static/W5H36cBabsItHQduZS-Az/_buildManifest.js" defer=""></script><script src="/_next/static/W5H36cBabsItHQduZS-Az/_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":{}},"page":"/[lib]/[sliceName]/[variation]/screenshot","query":{},"buildId":"W5H36cBabsItHQduZS-Az","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>