slice-machine-ui 1.19.2-dev-next-release.2 → 1.19.2-dev-next-release.4

package/components/Navigation/ChangesListItem.tsx

@@ -18,7 +18,6 @@ import {
 import {
   userHasSeenChangesToolTip,
   userHasSeenSimulatorToolTip,
-  userHasSeenTutorialsToolTip,
 } from "@src/modules/userContext";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ChangesRightElement } from "./ChangesRightElement";
@@ -68,13 +67,11 @@ const useOpenChangesHoverCard = () => {
   const {
     hasSeenChangesToolTip,
     hasSeenSimulatorToolTip,
-    hasSeenTutorialsToolTip,
     isSavingCustomType,
     isSavingSlice,
   } = useSelector((store: SliceMachineStoreType) => ({
     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
-    hasSeenTutorialsToolTip: userHasSeenTutorialsToolTip(store),
     isSavingCustomType: isLoading(store, LoadingKeysEnum.SAVE_CUSTOM_TYPE),
     isSavingSlice: isLoading(store, LoadingKeysEnum.SAVE_SLICE),
   }));
@@ -88,7 +85,6 @@ const useOpenChangesHoverCard = () => {
 
   return (
     !hasSeenChangesToolTip &&
-    hasSeenTutorialsToolTip &&
     hasSeenSimulatorToolTip &&
     !isSaving &&
     prevIsSaving

package/components/Navigation/VideoItem.tsx

@@ -5,11 +5,12 @@ import {
   RefCallback,
   ReactNode,
   forwardRef,
+  PropsWithChildren,
 } from "react";
+import { useSelector } from "react-redux";
 import ReactTooltip from "react-tooltip";
 import { Close, Flex, Paragraph } from "theme-ui";
 import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
-import { VIDEO_YOUTUBE_PLAYLIST_LINK, PRISMIC_ACADEMY_URL } from "@lib/consts";
 import { telemetry } from "@src/apiClient";
 import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
 import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
@@ -20,7 +21,9 @@ import {
   HoverCardMedia,
   HoverCardTitle,
 } from "@src/components/HoverCard";
-import { useAdapterName } from "@src/hooks/useAdapterName";
+import { getUserReview } from "@src/modules/userContext";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { useMarketingContent } from "@src/hooks/useMarketingContent";
 
 import style from "./VideoItem.module.css";
 
@@ -31,27 +34,23 @@ type VideoItemProps = {
 
 export const VideoItem = forwardRef<HTMLLIElement, VideoItemProps>(
   ({ onClose, hasSeenTutorialsToolTip }, ref) => {
-    const adapterName = useAdapterName();
-
-    const isNext = adapterName === "@slicemachine/adapter-next";
-    const videoUrl = isNext ? PRISMIC_ACADEMY_URL : VIDEO_YOUTUBE_PLAYLIST_LINK;
+    const { tutorial } = useMarketingContent();
 
     return (
       <MaybeVideoTooltipWrapper
         onClose={onClose}
-        isNext={isNext}
         hasSeenTutorialsToolTip={hasSeenTutorialsToolTip}
       >
         <SideNavListItem ref={ref}>
           <SideNavLink
-            title="Tutorial"
-            href={videoUrl}
+            title={tutorial.link.title}
+            href={tutorial.link.url}
             target="_blank"
             Icon={(props) => <PlayCircleIcon {...props} />}
             onClick={() => {
               void telemetry.track({
                 event: "open-video-tutorials",
-                video: videoUrl,
+                video: tutorial.link.url,
               });
               onClose();
             }}
@@ -63,20 +62,26 @@ export const VideoItem = forwardRef<HTMLLIElement, VideoItemProps>(
 );
 
 type MaybeVideoTooltipWrapperProps = VideoItemProps & {
-  isNext: boolean;
   children: ReactNode;
 };
 
 const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
-  isNext,
   children,
   onClose,
   hasSeenTutorialsToolTip,
 }) => {
-  if (isNext) {
+  const { tutorial } = useMarketingContent();
+  const { userReview } = useSelector((store: SliceMachineStoreType) => ({
+    userReview: getUserReview(store),
+  }));
+  const open =
+    !hasSeenTutorialsToolTip &&
+    (userReview.onboarding || userReview.advancedRepository);
+
+  if (tutorial.tooltip.video !== undefined) {
     return (
       <HoverCard
-        open={!hasSeenTutorialsToolTip}
+        open={open}
         side="right"
         onClose={onClose}
         trigger={children}
@@ -84,40 +89,37 @@ const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
         align="end"
         alignOffset={8}
       >
-        <HoverCardTitle>Need help?</HoverCardTitle>
+        <HoverCardTitle>{tutorial.tooltip.title}</HoverCardTitle>
         <HoverCardMedia
           component="video"
-          cloudName="dmtf1daqp"
-          publicId="Tooltips/pa-course-overview_eaopsn"
-          poster="/phil.png"
+          cloudName={tutorial.tooltip.video.cloudName}
+          publicId={tutorial.tooltip.video.publicId}
+          poster={tutorial.tooltip.video.poster}
           controls
         />
         <HoverCardDescription>
-          Learn how to turn a Next.js website into a page builder powered by
-          Prismic.
+          {tutorial.tooltip.description}
         </HoverCardDescription>
-        <HoverCardCloseButton>Got It</HoverCardCloseButton>
+        <HoverCardCloseButton>
+          {tutorial.tooltip.closeButton}
+        </HoverCardCloseButton>
       </HoverCard>
     );
   }
 
   return (
-    <OldVideoItem
-      onClose={onClose}
-      hasSeenTutorialsToolTip={hasSeenTutorialsToolTip}
-    >
+    <OldVideoItem onClose={onClose} open={open}>
       {children}
     </OldVideoItem>
   );
 };
 
-type OldVideoItemProps = VideoItemProps & { children: ReactNode };
+type OldVideoItemProps = PropsWithChildren<{
+  open: boolean;
+  onClose: () => void;
+}>;
 
-const OldVideoItem: FC<OldVideoItemProps> = ({
-  hasSeenTutorialsToolTip,
-  onClose,
-  children,
-}) => {
+const OldVideoItem: FC<OldVideoItemProps> = ({ open, onClose, children }) => {
   const id = "video-tool-tip";
   const ref = useRef<HTMLDivElement | null>(null);
 
@@ -126,12 +128,12 @@ const OldVideoItem: FC<OldVideoItemProps> = ({
       if (ref.current) {
         return;
       }
-      if (node && !hasSeenTutorialsToolTip) {
+      if (node && open) {
         setTimeout(() => ReactTooltip.show(node), 5000);
+        ref.current = node;
       }
-      ref.current = node;
     },
-    [hasSeenTutorialsToolTip],
+    [open],
   );
 
   return (
@@ -144,7 +146,7 @@ const OldVideoItem: FC<OldVideoItemProps> = ({
     >
       {children}
 
-      {!hasSeenTutorialsToolTip && <ToolTip id={id} onClose={onClose} />}
+      {open && <ToolTip id={id} onClose={onClose} />}
     </div>
   );
 };
@@ -154,53 +156,57 @@ type ToolTipProps = {
   onClose: VideoItemProps["onClose"];
 };
 
-const ToolTip: FC<ToolTipProps> = ({ id, onClose }) => (
-  <ReactTooltipPortal>
-    <ReactTooltip
-      id={id}
-      effect="solid"
-      place="right"
-      backgroundColor="#5741c3"
-      clickable
-      className={style.videoTutorialsContainer}
-      afterHide={onClose}
-      offset={{
-        left: 80,
-      }}
-      role="tooltip"
-      getContent={() => (
-        <Flex
-          sx={{
-            maxWidth: "268px",
-            flexDirection: "column",
-          }}
-        >
+const ToolTip: FC<ToolTipProps> = ({ id, onClose }) => {
+  const { tutorial } = useMarketingContent();
+
+  return (
+    <ReactTooltipPortal>
+      <ReactTooltip
+        id={id}
+        effect="solid"
+        place="right"
+        backgroundColor="#5741c3"
+        clickable
+        className={style.videoTutorialsContainer}
+        afterHide={onClose}
+        offset={{
+          left: 80,
+        }}
+        role="tooltip"
+        getContent={() => (
           <Flex
             sx={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              mb: 1,
+              maxWidth: "268px",
+              flexDirection: "column",
             }}
           >
-            <Paragraph sx={{ color: "#FFF", fontWeight: 700 }}>
-              Need Help?
-            </Paragraph>
-            <Close
-              data-testid="video-tooltip-close-button"
-              onClick={onClose}
+            <Flex
               sx={{
-                width: "26px",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                mb: 1,
               }}
-            />
+            >
+              <Paragraph sx={{ color: "#FFF", fontWeight: 700 }}>
+                {tutorial.tooltip.title}
+              </Paragraph>
+              <Close
+                data-testid="video-tooltip-close-button"
+                onClick={onClose}
+                sx={{
+                  width: "26px",
+                }}
+              />
+            </Flex>
+            <Paragraph sx={{ color: "#FFF", fontWeight: 400 }}>
+              {tutorial.tooltip.description}
+            </Paragraph>
           </Flex>
-          <Paragraph sx={{ color: "#FFF", fontWeight: 400 }}>
-            Follow our Quick Start guide to learn the basics of Slice Machine
-          </Paragraph>
-        </Flex>
-      )}
-    />
-  </ReactTooltipPortal>
-);
+        )}
+      />
+    </ReactTooltipPortal>
+  );
+};
 
 export default VideoItem;

package/components/Navigation/index.test.tsx

@@ -270,7 +270,7 @@ describe("Side Navigation", () => {
 
     renderSideNavigation({ canUpdate: true });
 
-    const link = (await screen.findByText("Tutorial")).parentElement
+    const link = (await screen.findByText("Academy")).parentElement
       ?.parentElement as HTMLElement;
 
     await waitFor(() =>
@@ -284,7 +284,7 @@ describe("Side Navigation", () => {
   });
 
   test("Video Item not next", async () => {
-    const { user } = renderSideNavigation({ canUpdate: true });
+    renderSideNavigation({ canUpdate: true });
 
     const link = (await screen.findByText("Tutorial")).parentElement
       ?.parentElement as HTMLElement;
@@ -293,16 +293,5 @@ describe("Side Navigation", () => {
       "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH",
     );
     expect(link).toHaveAttribute("target", "_blank");
-
-    await user.hover(link);
-
-    const tooltip = await screen.findByRole("tooltip");
-    expect(tooltip).toBeVisible();
-    const closeButton = await within(tooltip).findByTestId(
-      "video-tooltip-close-button",
-    );
-    await user.click(closeButton);
-
-    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
   });
 });

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

@@ -125,7 +125,6 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
       {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
       {simulatorUrl ? (
         <iframe
-          id="__iframe-renderer"
           ref={iframeRef}
           src={simulatorUrl}
           style={{
@@ -141,8 +140,6 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
           }}
         />
       ) : null}
-      {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
-      {client?.connected ? <div id="__iframe-ready" /> : null}
     </Flex>
   );
 };

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

@@ -11,20 +11,14 @@ import {
 } from "./ScreensizeInput";
 
 import { ScreenDimensions } from "@lib/models/common/Screenshots";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { VariationSM } from "@lib/models/common/Slice";
 
 type ToolbarProps = {
-  slice: ComponentUI;
-  variation: VariationSM;
   handleScreenSizeChange: (screenDimensions: ScreenDimensions) => void;
   screenDimensions: ScreenDimensions;
   actionsDisabled: boolean;
 };
 
 export const Toolbar: React.FC<ToolbarProps> = ({
-  slice: _slice,
-  variation: _variation,
   handleScreenSizeChange,
   screenDimensions,
   actionsDisabled,
@@ -57,30 +51,6 @@ export const Toolbar: React.FC<ToolbarProps> = ({
     handleScreenSizeChange(newScreenDimensions);
   };
 
-  // TODO(DT-1534): Uncomment to enable Puppeteer screenshots or delete if we decide to remove Puppeteer
-  // const { generateSliceScreenshot } = useSliceMachineActions();
-  //
-  // const onTakingSliceScreenshot = () => {
-  //   generateSliceScreenshot(
-  //     variation.id,
-  //     slice,
-  //     {
-  //       width: screenDimensions.width,
-  //       height: screenDimensions.height,
-  //     },
-  //     "fromSimulator"
-  //   );
-  // };
-  //
-  // const { isSavingScreenshot } = useSelector(
-  //   (store: SliceMachineStoreType) => ({
-  //     isSavingScreenshot: isLoading(
-  //       store,
-  //       LoadingKeysEnum.GENERATE_SLICE_SCREENSHOT
-  //     ),
-  //   })
-  // );
-
   return (
     <Flex
       sx={{
@@ -129,18 +99,6 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           sx={{ ml: 2 }}
         />
       </Flex>
-      {/* 
-		  // TODO(DT-1534): Uncomment to enable Puppeteer screenshots or delete if we decide to remove Puppeteer
-      <Button
-        onClick={onTakingSliceScreenshot}
-        label="Take a screenshot"
-        isLoading={isSavingScreenshot}
-        Icon={AiFillCamera}
-        iconSize={20}
-        iconFill="#6F6E77"
-        variant="secondaryMedium"
-        disabled={actionsDisabled}
-      /> */}
     </Flex>
   );
 };

package/components/Simulator/index.tsx

@@ -262,8 +262,6 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
             }}
           >
             <Toolbar
-              slice={slice}
-              variation={variation}
               handleScreenSizeChange={setScreenDimensions}
               screenDimensions={screenDimensions}
               actionsDisabled={currentState !== UiState.SUCCESS}

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

@@ -7,10 +7,7 @@ import { useRouter } from "next/router";
 import ReactTooltip from "react-tooltip";
 
 import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
-import {
-  userHasSeenSimulatorToolTip,
-  userHasSeenTutorialsToolTip,
-} from "@src/modules/userContext";
+import { userHasSeenSimulatorToolTip } from "@src/modules/userContext";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
@@ -97,28 +94,18 @@ const SimulatorButton: React.FC<{
 
   const { setSeenSimulatorToolTip } = useSliceMachineActions();
 
-  const { hasSeenSimulatorTooltip, hasSeenTutorialsToolTip } = useSelector(
+  const { hasSeenSimulatorTooltip } = useSelector(
     (store: SliceMachineStoreType) => ({
       hasSeenSimulatorTooltip: userHasSeenSimulatorToolTip(store),
-      hasSeenTutorialsToolTip: userHasSeenTutorialsToolTip(store),
     }),
   );
 
   useEffect(() => {
     const node = ref.current;
-    if (
-      node &&
-      isSimulatorAvailableForFramework &&
-      !hasSeenSimulatorTooltip &&
-      hasSeenTutorialsToolTip
-    ) {
+    if (node && isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip) {
       setTimeout(() => ReactTooltip.show(node), 5000);
     }
-  }, [
-    isSimulatorAvailableForFramework,
-    hasSeenSimulatorTooltip,
-    hasSeenTutorialsToolTip,
-  ]);
+  }, [isSimulatorAvailableForFramework, hasSeenSimulatorTooltip]);
 
   const onCloseToolTip = () => {
     setSeenSimulatorToolTip();
@@ -131,9 +118,7 @@ const SimulatorButton: React.FC<{
   const disabled = !isSimulatorAvailableForFramework || isTouched;
 
   const shouldShowSimulatorTooltip =
-    isSimulatorAvailableForFramework &&
-    !hasSeenSimulatorTooltip &&
-    hasSeenTutorialsToolTip;
+    isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip;
 
   const shouldShowNeedToSaveTooltip =
     isSimulatorAvailableForFramework &&

package/lib/consts.ts

@@ -10,13 +10,6 @@ export const API_ID_REGEX = /^[A-Za-z0-9]+(?:_[A-Za-z0-9]+)*$/;
 export const API_ID_RETRO_COMPATIBLE_REGEX =
   /^[A-Za-z0-9]+(?:[_-][A-Za-z0-9]+)*$/;
 
-export const PRISMIC_ACADEMY_URL =
-  "https://prismic.io/academy/prismic-and-nextjs";
-
-// VIDEOS
-export const VIDEO_YOUTUBE_PLAYLIST_LINK =
-  "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH";
-
 export const VIDEO_WHAT_ARE_SLICES = "placeholders/What_are_Slices_mrvome";
 export const VIDEO_WHAT_ARE_CUSTOM_TYPES = "placeholders/CUSTOM_TYPE__0.5.0";
 

package/lib/models/common/Screenshots.ts

@@ -4,12 +4,6 @@ export interface ScreenDimensions {
   width: number;
   height: number;
 }
-export interface ScreenshotRequest {
-  libraryName: string;
-  sliceId: string;
-  variationId: string;
-  screenDimensions: ScreenDimensions;
-}
 export interface CustomScreenshotRequest {
   libraryName: string;
   sliceId: string;
@@ -41,7 +35,4 @@ export interface CustomScreenshotRequest {
   variationId: string;
 }
 
-export type ScreenshotGenerationMethod =
-  | "fromSimulator"
-  | "upload"
-  | "dragAndDrop";
+export type ScreenshotGenerationMethod = "upload" | "dragAndDrop";

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-ec1f14f2d3ddb69d.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/DcicAqW9Z1wJ8X-Tue3N3/_buildManifest.js" defer=""></script><script src="/_next/static/DcicAqW9Z1wJ8X-Tue3N3/_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":"DcicAqW9Z1wJ8X-Tue3N3","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/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-ee40681cde62eb80.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/4sLbpIu3gX8jUmr0j0Shc/_buildManifest.js" defer=""></script><script src="/_next/static/4sLbpIu3gX8jUmr0j0Shc/_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":"4sLbpIu3gX8jUmr0j0Shc","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/4sLbpIu3gX8jUmr0j0Shc/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,e,a,t,i,b,n,f,u){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[c,i,b,"static/chunks/pages/index-5266b7f0ca55025a.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":["static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-75b0bf58d1f3045d.js"],"/changes":[e,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-38d08f1e885b222d.js",s,a,"static/css/f585032018f6024b.css","static/chunks/pages/changes-9dcb1cdaa8b10560.js"],"/custom-types":[c,i,b,"static/chunks/pages/custom-types-2f5664d9492b13fb.js"],"/custom-types/[customTypeId]":[n,s,c,t,f,u,"static/chunks/pages/custom-types/[customTypeId]-aa37e07c96c8f9b5.js"],"/labs":["static/chunks/pages/labs-2349c21fbac1bd23.js"],"/page-types/[pageTypeId]":[n,s,c,t,f,u,"static/chunks/pages/page-types/[pageTypeId]-d445f5cabeb460c0.js"],"/slices":[e,s,a,"static/css/22d69420bda374a7.css","static/chunks/pages/slices-247c480530e98426.js"],"/slices/[lib]/[sliceName]/[variation]":[e,s,a,t,"static/css/e4f4acc81f000d9c.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-c9b5ff7076d2b19b.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[e,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-1bb05c8aa7db2bc2.js","static/chunks/585-f3dca093db4b3792.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-5e441f8b049cf91b.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/958-2b881a5b68ff11ba.js","static/chunks/550-1dafbcec5d50b384.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/80-c513d12da6156fb7.js","static/chunks/482-e6bbd1fcdcdf79ad.js","static/chunks/840-c317c8ff8de0f202.js","static/css/26b51745402a92af.css","static/chunks/125-e3857af2068bbedf.js","static/chunks/904-d5dfccdb4d9ab010.js","static/css/1fbd45881dcf43c4.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();