slice-machine-ui 1.25.1-beta.4 → 1.25.1-beta.6

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -1,3 +1,4 @@
+import { useMediaQuery } from "@prismicio/editor-support/React";
 import {
   Box,
   DropdownMenu,
@@ -10,16 +11,18 @@ import {
   InvisibleButton,
   ProgressCircle,
   Text,
+  Tooltip,
+  breakpoints,
 } from "@prismicio/editor-ui";
-import { Environment } from "@slicemachine/manager/client";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import { FC } from "react";
-import clsx from "clsx";
+import type { Environment } from "@slicemachine/manager/client";
+import { clsx } from "clsx";
+import type { FC, ReactNode } from "react";
 
-import LogoIcon from "@src/icons/LogoIcon";
-
-import * as styles from "./SideNavEnvironmentSelector.css";
 import { LoginIcon } from "@src/icons/LoginIcon";
+import { LogoIcon } from "@src/icons/LogoIcon";
+
+import styles from "./SideNavEnvironmentSelector.module.css";
 
 type SideNavEnvironmentSelectorProps = {
   activeEnvironment?: Environment;
@@ -44,12 +47,24 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
     onSelect,
   } = props;
 
+  const isSmall = useMediaQuery(breakpoints.small);
+
   const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
 
   return (
     <Box alignItems="center" gap={16}>
       <Box position="relative">
-        <LogoIcon className={styles.logo} />
+        {isSmall && environments.length > 1 ? (
+          <EnvironmentDropdownMenu
+            activeEnvironment={activeEnvironment}
+            disabled={disabled || loading}
+            environments={environments}
+            onSelect={onSelect}
+            trigger={<LogoIcon className={styles.logo} />}
+          />
+        ) : (
+          <LogoIcon className={styles.logo} />
+        )}
         {environments.length > 1 && (
           <EnvironmentDot
             kind={activeEnvironment?.kind ?? "prod"}
@@ -59,59 +74,74 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
           />
         )}
       </Box>
-      <Box
-        flexGrow={1}
-        flexDirection="column"
-        overflow="hidden"
-        alignItems="flex-start"
-      >
-        {variant === "default" ? (
-          <Text component="span" variant="small" color="grey11">
-            Environment
-          </Text>
-        ) : undefined}
+      {!isSmall && (
+        <>
+          <Box
+            flexGrow={1}
+            flexDirection="column"
+            overflow="hidden"
+            alignItems="flex-start"
+          >
+            {variant === "default" ? (
+              <Text component="span" variant="small" color="grey11">
+                Environment
+              </Text>
+            ) : undefined}
 
-        {variant === "unauthenticated" ? (
-          <InvisibleButton buttonText="Login required" onClick={onLogInClick} />
-        ) : undefined}
+            {variant === "unauthenticated" ? (
+              <InvisibleButton
+                buttonText="Login required"
+                onClick={onLogInClick}
+              />
+            ) : undefined}
 
-        {variant === "offline" ? (
-          <Text component="span" variant="bold">
-            Offline
-          </Text>
-        ) : undefined}
+            {variant === "offline" ? (
+              <Text component="span" variant="bold">
+                Offline
+              </Text>
+            ) : undefined}
 
-        {variant === "default" ? (
-          <Text
-            component="span"
-            className={styles.activeEnvironmentName}
-            data-testid="active-environment-name"
-          >
-            {isProductionEnvironmentActive || activeEnvironment === undefined
-              ? "Production"
-              : activeEnvironment?.name}
-          </Text>
-        ) : undefined}
-      </Box>
-      <Box flexShrink={0}>
-        {variant === "unauthenticated" ? (
-          <IconButton
-            icon={<LoginIcon className={styles.loginIcon} />}
-            onClick={onLogInClick}
-            hiddenLabel="Log in to enable environments"
-          />
-        ) : undefined}
+            {variant === "default" ? (
+              <Text
+                component="span"
+                className={styles.activeEnvironmentName}
+                data-testid="active-environment-name"
+              >
+                {isProductionEnvironmentActive ||
+                activeEnvironment === undefined
+                  ? "Production"
+                  : activeEnvironment?.name}
+              </Text>
+            ) : undefined}
+          </Box>
+          <Box flexShrink={0}>
+            {variant === "unauthenticated" ? (
+              <Tooltip content="Log in" side="right">
+                <IconButton
+                  icon={<LoginIcon className={styles.loginIcon} />}
+                  onClick={onLogInClick}
+                  hiddenLabel="Log in to enable environments"
+                />
+              </Tooltip>
+            ) : undefined}
 
-        {environments.length > 1 ? (
-          <EnvironmentDropdownMenu
-            activeEnvironment={activeEnvironment}
-            disabled={disabled}
-            environments={environments}
-            loading={loading}
-            onSelect={onSelect}
-          />
-        ) : undefined}
-      </Box>
+            {environments.length > 1 ? (
+              <EnvironmentDropdownMenu
+                activeEnvironment={activeEnvironment}
+                disabled={disabled}
+                environments={environments}
+                onSelect={onSelect}
+                trigger={
+                  <IconButton
+                    icon={loading ? <ProgressCircle /> : "unfoldMore"}
+                    hiddenLabel="Select environment"
+                  />
+                }
+              />
+            ) : undefined}
+          </Box>
+        </>
+      )}
     </Box>
   );
 };
@@ -122,11 +152,11 @@ type EnvironmentDropdownMenuProps = Pick<
 > & {
   disabled: boolean;
   environments: Environment[];
-  loading: boolean;
+  trigger: ReactNode;
 };
 
 const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
-  const { activeEnvironment, disabled, environments, loading, onSelect } =
+  const { activeEnvironment, disabled, environments, onSelect, trigger } =
     props;
 
   const nonPersonalEnvironments = environments.filter(
@@ -138,13 +168,14 @@ const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
 
   return (
     <DropdownMenu modal>
-      <DropdownMenuTrigger disabled={disabled}>
-        <IconButton
-          icon={loading ? <ProgressCircle /> : "unfoldMore"}
-          hiddenLabel="Select environment"
-          disabled={disabled}
-        />
-      </DropdownMenuTrigger>
+      <Tooltip
+        content="Select environment"
+        side="right"
+        stableMount
+        visible={!disabled}
+      >
+        <DropdownMenuTrigger disabled={disabled}>{trigger}</DropdownMenuTrigger>
+      </Tooltip>
       <DropdownMenuContent align="end" minWidth={256}>
         {personalEnvironment ? (
           <DropdownMenuLabel>Regular Environments</DropdownMenuLabel>
@@ -222,7 +253,7 @@ const EnvironmentDot: FC<EnvironmentDotProps> = (props) => {
 
   return (
     <div
-      className={clsx(styles.environmentDot[kind], className)}
+      className={clsx(styles[`environmentDot-${kind}`], className)}
       role={asStatus ? "status" : undefined}
       {...otherProps}
     >

package/src/components/TextLink/TextLink.tsx

@@ -1,8 +1,6 @@
-import type { FC, ReactNode } from "react";
-import { isValidElement, cloneElement } from "react";
-
-import clsx from "clsx";
 import { Text } from "@prismicio/editor-ui";
+import { clsx } from "clsx";
+import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
 
 import * as styles from "./TextLink.css";
 

package/src/features/changes/PushChangesButton.tsx

@@ -62,7 +62,7 @@ const BarePushChangesButton = forwardRef<
   ElementRef<typeof Button>,
   BarePushChangesButtonProps
 >((props, ref) => (
-  <Button {...props} data-cy="push-changes" ref={ref} startIcon="upload">
+  <Button {...props} ref={ref} startIcon="upload">
     Push
   </Button>
 ));

package/src/features/sync/components/AutoSyncStatusIndicator.module.css

@@ -15,3 +15,9 @@
   justify-content: center;
   width: 100%;
 }
+
+@media screen and (max-width: 767px) {
+  .text {
+    display: none;
+  }
+}

package/src/features/sync/components/AutoSyncStatusIndicator.module.css.d.ts

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "root": string;
+  readonly "text": string;
 };
 export = styles;
 

package/src/features/sync/components/AutoSyncStatusIndicator.tsx

@@ -46,10 +46,12 @@ export const AutoSyncStatusIndicator: FC<AutoSyncStatusIndicatorProps> = (
   }
 
   return autoSaveStatusInfo.tooltipText !== undefined ? (
-    <Tooltip content={autoSaveStatusInfo.tooltipText} side="bottom">
+    <Tooltip content={autoSaveStatusInfo.tooltipText} side="right">
       <div className={styles.root}>
         {autoSaveStatusInfo.icon}
-        <Text color="grey11">{autoSaveStatusInfo.text}</Text>
+        <Text className={styles.text} color="grey11">
+          {autoSaveStatusInfo.text}
+        </Text>
       </div>
     </Tooltip>
   ) : (

package/src/icons/ChangesIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const ChangesIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.53868 5.08412L11.9985 7.96822V2.20001L8.53868 5.08412ZM16.5459 16.5508L17.3035 17.3084C18.3522 16.2597 19.0664 14.9235 19.3557 13.4689C19.6451 12.0143 19.4966 10.5066 18.929 9.13639C18.3614 7.76618 17.4003 6.59505 16.1672 5.77109C14.934 4.94712 13.4842 4.50733 12.0011 4.50733V5.57857C15.5508 5.57866 18.4284 8.45629 18.4284 12.006C18.4284 13.7809 17.709 15.3877 16.5459 16.5508ZM15.4609 18.9278L11.9989 16.0437L11.9989 21.8119L15.4609 18.9278ZM7.45385 7.46112L6.69631 6.70357C5.6476 7.75228 4.93342 9.08842 4.64408 10.543C4.35474 11.9976 4.50324 13.5054 5.0708 14.8756C5.63835 16.2458 6.59948 17.4169 7.83263 18.2409C9.06578 19.0648 10.5156 19.5046 11.9987 19.5046V18.4333C8.44897 18.4332 5.57139 15.5556 5.57139 12.0059C5.57139 10.2311 6.29077 8.62425 7.45385 7.46112Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/icons/DatabaseIcon.tsx

@@ -13,6 +13,7 @@ export const DatabaseIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M23.0651 10.0686C23.0656 10.0687 23.0628 10.0727 23.0551 10.0805C23.0607 10.0724 23.0646 10.0685 23.0651 10.0686ZM22.7102 10.3001C22.4175 10.1539 21.9868 9.9991 21.4143 9.85598C20.0667 9.51907 18.152 9.30005 16 9.30005C13.848 9.30005 11.9333 9.51907 10.5857 9.85598C10.0132 9.9991 9.58249 10.1539 9.28975 10.3C9.58249 10.4462 10.0132 10.601 10.5857 10.7441C11.9333 11.081 13.848 11.3 16 11.3C18.152 11.3 20.0667 11.081 21.4143 10.7441C21.9868 10.601 22.4175 10.4462 22.7102 10.3001ZM8.93492 10.0686C8.93545 10.0685 8.93931 10.0724 8.94491 10.0805C8.93719 10.0727 8.93439 10.0687 8.93492 10.0686ZM24 10.3C24 9.19548 20.4183 8.30005 16 8.30005C11.5817 8.30005 8 9.19548 8 10.3V16.3V22.3C8 22.8286 8.36652 23.2227 8.77269 23.4942C9.19392 23.7758 9.77503 24.0088 10.4612 24.1965C11.8404 24.5739 13.7629 24.8 16 24.8C18.2371 24.8 20.1596 24.5739 21.5388 24.1965C22.225 24.0088 22.8061 23.7758 23.2273 23.4942C23.6335 23.2227 24 22.8286 24 22.3V16.3V10.3ZM23 16.3V11.2691C21.6353 11.8839 19.012 12.3 16 12.3C12.988 12.3 10.3647 11.8839 9 11.2691V16.3C9 16.3238 9.0187 16.4558 9.32842 16.6629C9.62308 16.8598 10.0885 17.0578 10.7251 17.232C11.9913 17.5784 13.8188 17.8 16 17.8C18.1812 17.8 20.0087 17.5784 21.2749 17.232C21.9115 17.0578 22.3769 16.8598 22.6716 16.6629C22.9813 16.4558 23 16.3238 23 16.3ZM23 17.633V22.3C23 22.3238 22.9813 22.4558 22.6716 22.6629C22.3769 22.8598 21.9115 23.0578 21.2749 23.232C20.0087 23.5784 18.1812 23.8 16 23.8C13.8188 23.8 11.9913 23.5784 10.7251 23.232C10.0885 23.0578 9.62308 22.8598 9.32842 22.6629C9.0187 22.4558 9 22.3238 9 22.3V17.633C9.3936 17.8534 9.89115 18.0406 10.4612 18.1965C11.8404 18.5739 13.7629 18.8 16 18.8C18.2371 18.8 20.1596 18.5739 21.5388 18.1965C22.1089 18.0406 22.6064 17.8534 23 17.633Z"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/FolderIcon.tsx

@@ -13,6 +13,7 @@ export const FolderIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M8 9.5C8 8.67157 8.67157 8 9.5 8H13.382C13.9501 8 14.4695 8.321 14.7236 8.82918L15.809 11H18H22.5C23.3284 11 24 11.6716 24 12.5V22.5001C24 23.3285 23.3284 24.0001 22.5 24.0001H12.25H9.5C8.67157 24.0001 8 23.3285 8 22.5001V11.5V9.5ZM14.691 11L13.8292 9.27639C13.7445 9.107 13.5714 9 13.382 9H9.5C9.22386 9 9 9.22386 9 9.5V11H14.691ZM9 12V22.5001C9 22.7762 9.22386 23.0001 9.5 23.0001H12.25H22.5C22.7761 23.0001 23 22.7762 23 22.5001V12.5C23 12.2239 22.7761 12 22.5 12H18H15.5H9Z"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/Lightning.tsx

@@ -13,6 +13,7 @@ export const LightningIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M14.3775 24.9684C14.4175 24.9884 14.5075 24.9884 14.5075 24.9884C14.6775 24.9884 14.8475 24.8984 14.9375 24.7484L20.9375 14.7484C21.0275 14.5984 21.0275 14.3984 20.9375 14.2484C20.8475 14.0984 20.6775 13.9984 20.4975 13.9984H16.9975V7.49842C16.9975 7.27842 16.8475 7.07842 16.6275 7.01842C16.4175 6.95842 16.1875 7.04842 16.0675 7.23842L10.0675 17.2384C9.9775 17.3884 9.9775 17.5884 10.0675 17.7384C10.1575 17.8884 10.3275 17.9884 10.5075 17.9884H14.0075V24.4884C14.0075 24.7084 14.1575 24.9084 14.3775 24.9684ZM11.3875 16.9884H14.5075C14.7875 16.9884 15.0075 17.2084 15.0075 17.4884V22.6784L19.6275 14.9884H16.5075C16.2275 14.9884 16.0075 14.7684 16.0075 14.4884V9.29842L11.3875 16.9884Z"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/LogoIcon.tsx

@@ -1,24 +1,28 @@
-import React from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  forwardRef,
+} from "react";
 
-const LogoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
-  return (
-    <svg
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <rect width="32" height="32" rx="6" fill="#1A1523" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.2519 22.6786C19.7531 22.6786 22.5913 19.8404 22.5913 16.3393C22.5913 14.8061 22.0469 13.3999 21.141 12.3037L23.8238 10.7547C23.9923 10.6574 24.05 10.4421 23.9528 10.2736C23.8555 10.1052 23.6401 10.0474 23.4717 10.1447L20.65 11.7738C19.5101 10.6754 17.9599 10 16.2519 10C12.7508 10 9.91263 12.8382 9.91263 16.3393C9.91263 17.7073 10.3459 18.9741 11.0828 20.0099L8.17615 21.688C8.0077 21.7853 7.94999 22.0006 8.04724 22.1691C8.1445 22.3375 8.35989 22.3953 8.52834 22.298L11.5276 20.5664C12.6883 21.8628 14.3749 22.6786 16.2519 22.6786ZM11.5276 20.5664C11.3692 20.3895 11.2207 20.2038 11.0828 20.0099L17.3262 16.4052C17.4946 16.308 17.71 16.3657 17.8073 16.5341C17.9045 16.7026 17.8468 16.918 17.6784 17.0152L11.5276 20.5664ZM20.65 11.7738L14.3216 15.4275C14.1532 15.5247 14.0955 15.7401 14.1927 15.9086C14.29 16.077 14.5054 16.1347 14.6738 16.0375L21.141 12.3037C20.9874 12.1178 20.8235 11.9409 20.65 11.7738Z"
-        fill="white"
-      />
-    </svg>
-  );
-};
-
-export default LogoIcon;
+export const LogoIcon = forwardRef<
+  ElementRef<"svg">,
+  ComponentPropsWithoutRef<"svg">
+>((props, ref) => (
+  <svg
+    {...props}
+    fill="none"
+    height="32"
+    ref={ref}
+    viewBox="0 0 32 32"
+    width="32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="#1A1523" height="32" rx="6" width="32" />
+    <path
+      clipRule="evenodd"
+      d="M16.2519 22.6786C19.7531 22.6786 22.5913 19.8404 22.5913 16.3393C22.5913 14.8061 22.0469 13.3999 21.141 12.3037L23.8238 10.7547C23.9923 10.6574 24.05 10.4421 23.9528 10.2736C23.8555 10.1052 23.6401 10.0474 23.4717 10.1447L20.65 11.7738C19.5101 10.6754 17.9599 10 16.2519 10C12.7508 10 9.91263 12.8382 9.91263 16.3393C9.91263 17.7073 10.3459 18.9741 11.0828 20.0099L8.17615 21.688C8.0077 21.7853 7.94999 22.0006 8.04724 22.1691C8.1445 22.3375 8.35989 22.3953 8.52834 22.298L11.5276 20.5664C12.6883 21.8628 14.3749 22.6786 16.2519 22.6786ZM11.5276 20.5664C11.3692 20.3895 11.2207 20.2038 11.0828 20.0099L17.3262 16.4052C17.4946 16.308 17.71 16.3657 17.8073 16.5341C17.9045 16.7026 17.8468 16.918 17.6784 17.0152L11.5276 20.5664ZM20.65 11.7738L14.3216 15.4275C14.1532 15.5247 14.0955 15.7401 14.1927 15.9086C14.29 16.077 14.5054 16.1347 14.6738 16.0375L21.141 12.3037C20.9874 12.1178 20.8235 11.9409 20.65 11.7738Z"
+      fill="white"
+      fillRule="evenodd"
+    />
+  </svg>
+));

package/src/icons/MathPlusIcon.tsx

@@ -11,7 +11,7 @@ export const MathPlusIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
   >
     <path
       d="M16 9C15.7239 9 15.5 9.22386 15.5 9.5V15.5H9.5C9.22386 15.5 9 15.7239 9 16C9 16.2761 9.22386 16.5 9.5 16.5H15.5V22.5C15.5 22.7761 15.7239 23 16 23C16.2761 23 16.5 22.7761 16.5 22.5V16.5H22.5C22.7761 16.5 23 16.2761 23 16C23 15.7239 22.7761 15.5 22.5 15.5H16.5V9.5C16.5 9.22386 16.2761 9 16 9Z"
-      fill="#6F6E77"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/OpenIcon.tsx

@@ -14,7 +14,7 @@ const OpenIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.5 9C9.22386 9 9 9.22386 9 9.5V22.4996C9 22.7758 9.22386 22.9996 9.5 22.9996H22.5C22.7761 22.9996 23 22.7758 23 22.4996V17.5C23 17.2239 23.2239 17 23.5 17C23.7761 17 24 17.2239 24 17.5V22.4996C24 23.3281 23.3284 23.9996 22.5 23.9996H9.5C8.67157 23.9996 8 23.3281 8 22.4996V9.5C8 8.67157 8.67157 8 9.5 8H14.5C14.7761 8 15 8.22386 15 8.5C15 8.77614 14.7761 9 14.5 9H9.5ZM24 8H18L20.6464 10.6464L15.6464 15.6464C15.4512 15.8417 15.4512 16.1583 15.6464 16.3536C15.8417 16.5488 16.1583 16.5488 16.3536 16.3536L21.3536 11.3536L24 14V8Z"
-        fill="#6F6E77"
+        fill="currentColor"
       />
     </svg>
   );

package/src/icons/PageStackIcon.tsx

@@ -13,6 +13,7 @@ export const PageStackIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M15.6048 8.0111C15.4571 7.97946 15.3031 8.01624 15.1857 8.11117C15.0682 8.2061 15 8.34901 15 8.5V23.5C15 23.651 15.0682 23.7939 15.1857 23.8888C15.3031 23.9838 15.4571 24.0205 15.6048 23.9889L21.8143 22.6583C22.5059 22.5101 23 21.8989 23 21.1916V14V10.8084C23 10.1011 22.5059 9.48991 21.8143 9.34171L15.6048 8.0111ZM16 22.8815V9.1185L21.6048 10.3195C21.8353 10.3689 22 10.5726 22 10.8084V14V21.1916C22 21.4274 21.8353 21.6311 21.6048 21.6805L16 22.8815ZM9.5 8C9.77614 8 10 8.22386 10 8.5V23.5C10 23.7761 9.77614 24 9.5 24C9.22386 24 9 23.7761 9 23.5V8.5C9 8.22386 9.22386 8 9.5 8ZM12.5 8C12.7761 8 13 8.22386 13 8.5V23.5C13 23.7761 12.7761 24 12.5 24C12.2239 24 12 23.7761 12 23.5V8.5C12 8.22386 12.2239 8 12.5 8Z"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/RadarIcon.tsx

@@ -13,6 +13,7 @@ export const RadarIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M21.2935 9.99939C20.279 9.10571 19.0503 8.48022 17.7199 8.18832C16.0872 7.83009 14.3833 7.99228 12.8475 8.65212C11.3117 9.31195 10.0211 10.4363 9.15711 11.8672C8.29307 13.2981 7.89895 14.9637 8.0301 16.6301C8.16125 18.2965 8.81108 19.88 9.88832 21.1581C10.9656 22.4362 12.4161 23.3448 14.0362 23.7563C15.6563 24.1678 17.3646 24.0614 18.9212 23.4522C20.3224 22.9037 21.5373 21.9726 22.43 20.7696C22.5943 20.5481 22.5273 20.2378 22.2961 20.0876C22.0649 19.9375 21.7572 20.0043 21.5908 20.224C21.3268 20.5725 21.0262 20.9011 20.6894 21.2045C17.8164 23.7913 13.3903 23.5594 10.8034 20.6864C8.21657 17.8134 8.44853 13.3873 11.3215 10.8004C13.9755 8.41078 17.9548 8.42656 20.5853 10.7076L19.166 12.1269C18.5618 11.6349 17.848 11.2885 17.08 11.1199C16.0595 10.8961 14.9946 10.9974 14.0347 11.4098C13.0748 11.8222 12.2682 12.5249 11.7282 13.4192C11.1882 14.3136 10.9419 15.3546 11.0238 16.3961C11.1058 17.4376 11.5119 18.4272 12.1852 19.2261C12.8585 20.0249 13.7651 20.5928 14.7777 20.8499C15.7902 21.1071 16.8579 21.0406 17.8308 20.6599C18.648 20.34 19.3638 19.8119 19.9092 19.1318C20.0818 18.9165 20.0142 18.6051 19.7827 18.4548C19.5514 18.3046 19.2443 18.3727 19.0662 18.5833C18.9498 18.721 18.8227 18.8524 18.6849 18.9764C17.0432 20.4546 14.514 20.322 13.0358 18.6803C11.5576 17.0386 11.6902 14.5094 13.3319 13.0312C14.7921 11.7164 16.9543 11.6759 18.4547 12.8382L15.6464 15.6465C15.4512 15.8417 15.4512 16.1583 15.6464 16.3536C15.8417 16.5488 16.1583 16.5488 16.3535 16.3536L22.8535 9.85356C23.0488 9.6583 23.0488 9.34172 22.8535 9.14646C22.6583 8.95119 22.3417 8.95119 22.1464 9.14646L21.2935 9.99939Z"
+      fill="currentColor"
     />
   </svg>
 );

package/test/__setup__.ts

@@ -191,6 +191,21 @@ vi.stubGlobal(
   }),
 );
 
+// Adapted from: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom.
+vi.stubGlobal(
+  "matchMedia",
+  vi.fn((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+);
+
 vi.stubGlobal(
   "ResizeObserver",
   vi.fn(() => {

package/test/__testutils__/index.tsx

@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@prismicio/editor-ui";
 import { render as rtlRender, RenderOptions } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Store, AnyAction } from "redux";
@@ -43,11 +44,13 @@ function render(
   }) {
     return (
       <ThemeUIThemeProvider theme={theme}>
-        <BaseStyles>
-          <Provider store={store}>
-            <ErrorBoundary>{children}</ErrorBoundary>
-          </Provider>
-        </BaseStyles>
+        <TooltipProvider>
+          <BaseStyles>
+            <Provider store={store}>
+              <ErrorBoundary>{children}</ErrorBoundary>
+            </Provider>
+          </BaseStyles>
+        </TooltipProvider>
       </ThemeUIThemeProvider>
     );
   }

package/out/_next/static/chunks/pages/changes-23829ddb11cac992.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[849],{21985:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/changes",function(){return t(59046)}])},56577:function(e,n,t){"use strict";t.d(n,{z:function(){return d}});var i=t(62230),r=t(85244),s=t(98240),o=t(52322),c=t(2784),l=t(75289),a=function(e,n){return e?"".concat(e,"-").concat(n):""},u=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},d=(0,c.forwardRef)(function(e,n){var t=e.label,c=e.Icon,d=e.type,h=e.form,x=e.isLoading,f=void 0!==x&&x,p=e.disabled,m=e.onClick,g=e.sx,j=e.iconSize,v=void 0===j?16:j,y=e.iconFill,b=e.variant,C=void 0===b?"primary":b,_=(0,s.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,o.jsx)(l.zx,(0,r.Z)((0,i.Z)({ref:n,sx:(0,i.Z)((0,r.Z)((0,i.Z)({},void 0===g?{}:g),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),f?{cursor:"wait !important"}:{}),type:d,form:h,disabled:void 0!==p&&p||f,onClick:f?void 0:m,variant:C},_),{children:f?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.$j,{size:v,color:u(C),"data-testid":a(_["data-testid"],"spinner")}),c&&t]}):(0,o.jsxs)(o.Fragment,{children:[c&&(0,o.jsx)(c,{size:v,fill:y,"data-testid":a(_["data-testid"],"icon")}),t]})}))})},59469:function(e,n,t){"use strict";var i=t(62230),r=t(52322),s=t(75289);n.Z=function(e){var n=e.elems,t=e.renderElem,o=e.defineElementKey,c=e.gridTemplateMinPx,l=e.gridGap,a=e.sx;return(0,r.jsx)(s.xu,{as:"section",sx:(0,i.Z)({display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(void 0===c?"320px":c,", 1fr))"),gridGap:void 0===l?"16px":l,pt:2},a),children:n.map(function(e,n){return e?(0,r.jsx)("span",{children:t(e,n)},"".concat(o(e),"-").concat(n+1)):null})})}},59046:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return eC}});var i=t(22710),r=t(99267),s=t(52322),o=t(2784),c=t(88932),l=t(97729),a=t.n(l),u=t(65077),d=t(5632),h=t.n(d),x=t(42050),f=t(951),p=t(22715),m=t(75289),g=function(e){var n=e.children;return(0,s.jsx)(m.kC,{sx:{alignItems:"center",justifyContent:"space-between",mt:"8px",bg:"grey02",borderRadius:4,padding:"12px 16px",width:"100%"},children:n})},j=t(39097),v=t.n(j),y=t(7819),b=t(34728),C=t(67445),_=function(e){var n=e.ct,t=e.status,i=e.authStatus,r=e.isOnline;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(m.xu,{as:"td",style:{width:"40%"},children:(0,s.jsx)(m.xv,{sx:{fontWeight:500},children:n.label})}),(0,s.jsx)(m.xu,{as:"td",style:{width:"40%"},children:n.id}),(0,s.jsx)(m.xu,{as:"td",style:{width:"20%"},children:(0,s.jsx)(b.O,{authStatus:i,isOnline:r,modelStatus:t,modelType:"CustomType"})})]})},w=function(e){var n=e.customTypes,t=e.modelsStatuses,i=e.authStatus,r=e.isOnline;return(0,s.jsxs)(m.xu,{as:"table","data-legacy-component":!0,children:[(0,s.jsx)("thead",{children:(0,s.jsxs)("tr",{className:"transparent small",children:[(0,s.jsx)(m.xu,{as:"th",sx:{width:"40%",fontWeight:600},children:"Name"}),(0,s.jsx)(m.xu,{as:"th",sx:{width:"40%",fontWeight:600},children:"API ID"}),(0,s.jsx)(m.xu,{as:"th",sx:{width:"20%",fontWeight:600},children:"Status"})]})}),(0,s.jsx)("tbody",{children:n.map(function(e){return(0,y.TG)(e)?(0,s.jsx)(v(),{passHref:!0,href:C.cd[e.local.format].getBuilderPagePathname(e.local.id),legacyBehavior:!0,children:(0,s.jsx)("tr",{tabIndex:0,"data-testid":"custom-type-".concat(e.local.id),children:(0,s.jsx)(_,{ct:e.local,status:t.customTypes[e.local.id],authStatus:i,isOnline:r},e.local.id)})},e.local.id):(0,s.jsx)("tr",{tabIndex:0,className:"disabled","data-testid":"custom-type-".concat(e.remote.id),children:(0,s.jsx)(_,{ct:e.remote,status:t.customTypes[e.remote.id],authStatus:i,isOnline:r},e.remote.id)},e.remote.id)})})]})},k=t(59469),S=t(15836),Z=t(5479),z=t(47731),T=t(32681),D=t(71749),L=t(8564),O=t(11563),N=t(82770);function R(){var e=(0,O.L)("slicemachine-dev-collaboration"),n=(0,o.useState)(!1),t=n[0],i=n[1],r=null==e?void 0:e.payload;return((0,o.useEffect)(function(){(null==e?void 0:e.value)==="on"&&void 0!==r&&N.Xe.track({event:"dev-collab:workflow-stub-displayed"})},[e,r]),(null==e?void 0:e.value)!=="on"||void 0===r)?null:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(p.xu,{alignItems:"flex-start",border:{bottom:!0,left:!0,right:!0,top:!0},borderRadius:6,borderStyle:"dashed",flexDirection:"column",flexShrink:0,gap:8,padding:16,width:320,children:[(0,s.jsxs)(p.xu,{flexDirection:"column",gap:2,children:[(0,s.jsx)(p.xv,{variant:"smallBold",children:r.cardTitle}),(0,s.jsx)(p.xv,{color:"grey11",variant:"small",children:r.cardDescription})]}),(0,s.jsx)(p.zx,{color:"grey",onClick:function(){N.Xe.track({event:"dev-collab:set-up-workflow-opened"}),i(!0)},children:r.cardButtonLabel})]}),(0,s.jsxs)(p.Vq,{onOpenChange:function(e){e||i(!1)},open:t,size:{height:"auto",width:448},children:[(0,s.jsx)(p.fK,{title:r.dialogTitle}),(0,s.jsx)(p.cZ,{children:(0,s.jsxs)(p.xu,{flexDirection:"column",children:[(0,s.jsx)(p.xu,{flexDirection:"column",padding:16,children:(0,s.jsx)(p.xv,{children:r.dialogDescription})}),(0,s.jsx)(p.kX,{cancel:{text:"Cancel"},ok:{text:r.dialogButtonLabel,onClick:function(){N.Xe.track({event:"dev-collab:join-beta-clicked"}),window.open(r.dialogButtonLink,"_blank"),i(!1)}},size:"medium"})]})})]})]})}var I=function(e){var n=e.unSyncedCustomTypes,t=e.unSyncedSlices,i=e.modelsStatuses,r=e.authStatus,c=e.isOnline,l=(0,z.H)(),a=l.modalPayload,u=l.onOpenModal,d=a.sliceFilterFn,h=a.defaultVariationSelector,x=t.filter(function(e){return i.slices[e.model.id]!==T.GJ.Deleted});return(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)(p.xu,{gap:16,alignItems:"flex-start",children:[(0,s.jsxs)(p.xu,{flexDirection:"column",flexGrow:1,children:[n.length>0&&(0,s.jsxs)(p.xu,{flexDirection:"column",children:[(0,s.jsx)(g,{children:(0,s.jsxs)(p.xu,{children:[(0,s.jsx)(p.xv,{variant:"h5",children:"Types"}),(0,s.jsx)(p.xv,{variant:"h5",sx:{marginLeft:8},children:n.length})]})}),(0,s.jsx)(w,{customTypes:n,modelsStatuses:i,authStatus:r,isOnline:c})]}),t.length>0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p.xu,{padding:{bottom:8},children:(0,s.jsxs)(g,{children:[(0,s.jsxs)(p.xu,{children:[(0,s.jsx)(p.xv,{variant:"h5",children:"Slices"}),(0,s.jsx)(p.xv,{variant:"h5",sx:{marginLeft:8},children:t.length})]}),(0,s.jsxs)(p.xu,{children:[t.some(function(e){return(0,Z.cx)(e)>0&&i.slices[e.model.id]!==T.GJ.Deleted})&&(0,s.jsxs)(p.xv,{color:"amber11",sx:{marginRight:8,alignSelf:"center"},children:[(0,s.jsx)(f.sQg,{size:16,style:{marginRight:"4px",position:"relative",top:"3px"}}),"Missing Screenshots"]}),(0,s.jsxs)(p.zx,{color:"dark",onClick:function(){return u({sliceFilterFn:function(e){return e}})},children:[(0,s.jsx)(f.hOO,{style:{color:"#FFF",fontSize:"15px",position:"relative",top:"3px",marginRight:"4px"}})," ","Update all screenshots"]})]})]})}),(0,s.jsx)(k.Z,{gridGap:"32px 16px",elems:t,gridTemplateMinPx:"305px",defineElementKey:function(e){return e.model.name},renderElem:function(e){var n=i.slices[e.model.id];return(0,s.jsx)(D.b,{action:{type:"status",authStatus:r,isOnline:c,modelStatus:n},isDeleted:n===T.GJ.Deleted,mode:"navigation",onUpdateScreenshot:function(){u({sliceFilterFn:function(n){return n.filter(function(n){return n.model.id===e.model.id})}})},slice:e,variant:"solid"})}}),(0,s.jsx)(S.Z,{slices:d(x),defaultVariationSelector:h})]})]}),(0,s.jsx)(L.S,{children:(0,s.jsx)(o.Suspense,{children:(0,s.jsx)(R,{})})})]})})},F=t(91914),H=function(){return(0,s.jsx)(m.kC,{sx:{justifyContent:"center",alignItems:"center",flex:1},children:(0,s.jsxs)(m.kC,{sx:{flexDirection:"column",alignItems:"center",transform:"translateY(-50%)"},children:[(0,s.jsx)(F.wQ1,{size:48}),(0,s.jsx)(m.xv,{sx:{fontWeight:600,fontSize:"24px",lineHeight:"32px",mb:"8px",mt:"2px",textAlign:"center"},children:"No internet connection"}),(0,s.jsx)(m.xv,{sx:{fontSize:"13px",lineHeight:"24px",textAlign:"center"},children:"Connect to the internet to sync your changes."})]})})},E=t(90374),B=t(79096),M=function(e){var n=e.authStatus,t=(0,E.Z)().openLoginModal;return(0,s.jsxs)(p.xu,{flexDirection:"column",height:"100%",alignItems:"center",justifyContent:"center",gap:8,children:[n===B.t.FORBIDDEN?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p.xv,{variant:"h3",align:"center",children:"It seems like you are logged out"}),(0,s.jsx)(p.xv,{align:"center",children:"Log in to connect to your repository."})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p.xv,{variant:"h3",align:"center",children:"It seems like you don't have access to this repository"}),(0,s.jsx)(p.xv,{align:"center",children:"Check that the repository name is correct, then contact your repository administrator."})]}),(0,s.jsxs)(p.xv,{align:"center",children:["If that doesn't work, it's possible that Slice Machine is having trouble accessing Prismic's servers."," ",(0,s.jsx)(p.hh,{href:"https://community.prismic.io/",children:"Contact our support team"}),"."]}),n===B.t.FORBIDDEN&&(0,s.jsx)(p.zx,{onClick:function(){return t()},children:"Log in to Prismic"})]})},A=t(2754),G=t(34543),P=t(62230),V=t(85244),W=t(98240),U=t(6277);t(25977);var X={primary:"_1ecs97dbc8 _1ecs97dbjl _1ecs97dbc2 _1ecs97dbjf _1ecs97dbca _1ecs97dbjn",secondary:"_1ecs97daji _1ecs97dah3 _1ecs97dajc _1ecs97dagx _1ecs97dajk _1ecs97dah5"},Q={normal:"ovkapw1",smallBold:"ovkapw2",inherit:"ovkapw3 _1ecs97df47"},Y=function(e){var n=e.children,t=e.color,i=e.endIcon,r=e.href,c=e.textVariant,l=void 0===c?"smallBold":c,a=(0,W.Z)(e,["children","color","endIcon","href","textVariant"]);return(0,s.jsxs)("a",(0,V.Z)((0,P.Z)({href:r,target:"_blank",rel:"noreferrer"},a),{className:(0,U.Z)("ovkapw0 _1ecs97dez0 _1ecs97df41 _1ecs97dez2 _1ecs97dez8",X[void 0===t?"primary":t]),children:[(0,s.jsx)(p.xv,{component:"span",color:"inherit",variant:l,children:n}),(0,o.isValidElement)(i)?(0,o.cloneElement)(i,{className:(0,U.Z)(i.props.className,"_1ecs97dfhw",Q[l])}):null]}))},K=t(56580),J=t(39092),$=function(){var e,n=(e=(0,K.v9)(function(e){return{repoName:(0,J.MY)(e)}}).repoName,"https://".concat(e,".prismic.io/documents/working"));return(0,s.jsxs)(A.R$,{style:{alignSelf:"center",marginTop:p.TV.size[72]},children:[(0,s.jsx)(A.u2,{children:(0,s.jsx)(p.Ee,{src:"/blank-slate-changes-uptodate.png",sizing:"cover"})}),(0,s.jsxs)(A.T9,{children:[(0,s.jsx)(A._T,{children:"Everything up-to-date"}),(0,s.jsx)(A.nf,{children:"You have no changes staged. Your changes appear here after you have saved them, while they're waiting to be pushed to the Page Builder. Ready to get going?"}),(0,s.jsxs)(A.Qj,{children:[(0,s.jsx)(p.zx,{onClick:function(){h().push("/")},children:"Create a page type"}),(0,s.jsx)(Y,{endIcon:(0,s.jsx)(G.AlO,{}),textVariant:"normal",href:n,children:"Create content"})]})]})]})},q=t(80441),ee=t(80299),en=t(75499),et=function(e){return(0,s.jsx)(L.S,{renderError:eo,children:(0,s.jsx)(o.Suspense,{fallback:(0,s.jsx)(ec,{}),children:(0,s.jsx)(ei,(0,P.Z)({},e))})})},ei=function(e){return(0,ee.M)().eligible?(0,s.jsx)(er,(0,P.Z)({},e)):(0,s.jsx)(es,(0,P.Z)({},e))},er=function(e){var n=(0,en.G)().linkedGitRepos;if(!(n.length>0))return(0,s.jsx)(es,(0,P.Z)({},e));var t=q.Q[n[0].provider];return(0,s.jsx)(p.u,{content:"This project uses the Git workflow. Update Prismic by pushing your changes to ".concat(t.name,"."),side:"bottom",children:(0,s.jsx)(es,{disabled:!0})})},es=(0,o.forwardRef)(function(e,n){return(0,s.jsx)(p.zx,(0,V.Z)((0,P.Z)({},e),{"data-cy":"push-changes",ref:n,startIcon:"upload",children:"Push"}))});function eo(){return(0,s.jsx)(p.u,{content:"An error occurred while fetching the list of connected Git repositories.",side:"bottom",children:(0,s.jsx)(es,{disabled:!0})})}var ec=function(){return(0,s.jsx)(p.Od,{height:32,width:71.32})},el=t(56577),ea=t(31667);t(78656);var eu=function(e){var n=e.ctName,t=e.numberOfDocuments,i=e.link,r=e.isOverLimit;return(0,s.jsxs)(m.Zb,{sx:{mb:12},variant:"drawerCard","data-testid":"AssociatedDocumentsCard-".concat(n),children:[(0,s.jsxs)(m.kC,{sx:{flexDirection:"column"},children:[(0,s.jsx)(m.xv,{children:n}),(0,s.jsxs)(m.xv,{sx:{color:"textClear",fontSize:"12px",lineHeight:"16px"},children:[t," documents"]})]}),(0,s.jsx)(m.rU,{href:i,target:"_blank",variant:"cardSmall",sx:{color:void 0!==r&&r?"danger":"purple08"},children:"View documents"})]})},ed=t(79797),eh=t(54132),ex=function(e){var n=e.isOpen,t=e.title,i=e.footer,r=e.explanations,o=e.onClose;return(0,s.jsx)(ed.Z,{placement:"right",open:n,level:null,onClose:o,width:496,children:(0,s.jsx)(eh.Z,{radius:"0px",bodySx:{bg:"white",padding:24,flex:1,display:"flex",flexDirection:"column",overflow:"scroll"},footerSx:{p:0},sx:{flexDirection:"column",display:"flex",height:"100%",border:"none"},borderFooter:!0,Header:function(){return(0,s.jsxs)(m.kC,{sx:{p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,s.jsx)(m.kC,{sx:{alignItems:"center"},children:(0,s.jsx)(m.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:t})}),(0,s.jsx)(m.x8,{type:"button",onClick:function(){return o()}})]})},Footer:function(){return(0,s.jsx)(m.kC,{sx:{flexDirection:"column",justifyContent:"center",alignItems:"center",paddingRight:16,borderTop:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.darkBorders))},backgroundColor:"white",padding:20},children:i})},children:r})})},ef=function(e){var n=e.onToggle,t=e.isConfirmed,i=e.sx;return(0,s.jsxs)(m.kC,{sx:(0,P.Z)({borderRadius:6,flexDirection:"column",backgroundColor:"grey03",padding:12,width:"100%"},i),children:[(0,s.jsx)(m.xv,{sx:{fontWeight:"bold",mb:2},children:"Are you sure to proceed?"}),(0,s.jsxs)(m.__,{sx:{mt:"4px",py:1},variant:"large",children:[(0,s.jsx)(m.XZ,{defaultChecked:t,onChange:n,variant:"forms.checkbox.dark"}),"Delete these Documents"]})]})},ep=function(e){var n=e.pushChanges,t=e.modalData,i=e.onClose,r=(0,o.useState)(!1),c=r[0],l=r[1],a=(0,K.v9)(function(e){return{remoteOnlyCustomTypes:(0,ea.Ch)(e).filter(y.yp)}}).remoteOnlyCustomTypes;if((null==t?void 0:t.type)!=="SOFT")return null;var u=t.details.customTypes.map(function(e){var n,t=a.find(function(n){return(0,y.n5)(n)===e.id});return void 0===t?null:(0,s.jsx)(eu,{isOverLimit:!0,ctName:null!==(n=t.remote.label)&&void 0!==n?n:t.remote.id,link:e.url,numberOfDocuments:e.numberOfDocuments},e.id)});return(0,s.jsx)(ex,{isOpen:"SOFT"===t.type,title:"Confirm deletion",onClose:i,footer:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(ef,{onToggle:function(){l(!c)},isConfirmed:c,sx:{mb:10}}),(0,s.jsx)(el.z,{label:"Push changes",variant:"primary",onClick:function(){n(c)},disabled:!c,sx:{fontWeight:"bold",color:"white",borderRadius:6,width:"100%"}})]}),explanations:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(m.xv,{sx:{fontWeight:"bold",mb:1,lineHeight:"24px"},children:"This action will also delete Documents."}),(0,s.jsxs)(m.xv,{sx:{mb:24},children:[t.details.customTypes.length>1?"These types have":"This type has"," ","associated Documents, which will also be deleted. This might create broken links in your repository."]}),u]})})},em=function(e){var n=e.pushChanges,t=e.modalData,i=e.onClose,r=(0,K.v9)(function(e){return{remoteOnlyCustomTypes:(0,ea.Ch)(e).filter(y.yp)}}).remoteOnlyCustomTypes;if((null==t?void 0:t.type)!=="HARD")return null;var o=t.details.customTypes.map(function(e){var n,t=r.find(function(n){return(0,y.n5)(n)===e.id});return void 0===t?null:(0,s.jsx)(eu,{isOverLimit:!0,ctName:null!==(n=t.remote.label)&&void 0!==n?n:t.remote.id,link:e.url,numberOfDocuments:e.numberOfDocuments},e.id)});return(0,s.jsx)(ex,{isOpen:"HARD"===t.type,title:"Manual action required",onClose:i,footer:(0,s.jsx)(el.z,{label:"Try again",variant:"primary",onClick:function(){n(!1)},sx:{fontWeight:"bold",color:"white",borderRadius:6,width:"100%"}}),explanations:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(m.xv,{sx:{fontWeight:"bold",mb:1,lineHeight:"24px"},children:["Your type",t.details.customTypes.length>1&&"s"," cannot be deleted."]}),(0,s.jsxs)(m.xv,{sx:{mb:24},children:[t.details.customTypes.length>1?"These types have":"This type has"," ","too many associated Documents. Archive and delete these Documents manually and then try deleting the types again."]}),o]})})},eg=t(46326),ej=t(41834),ev=t(80262),ey=t(16847),eb=t(50950),eC=function(){var e,n=(0,ej.X)(),t=n.unSyncedSlices,l=n.unSyncedCustomTypes,h=n.changedCustomTypes,f=n.changedSlices,p=n.modelsStatuses,m=(0,ev.L)(),g=(0,ey.n)(),j=(0,E.Z)(),v=j.pushChangesSuccess,y=j.refreshState,b=(0,o.useState)(!1),C=b[0],_=b[1],w=(0,o.useState)(void 0),k=w[0],S=w[1],Z=(0,eb.g)().autoSyncStatus,z=(0,d.useRouter)(),T=t.length+l.length;(0,o.useEffect)(function(){("synced"===Z||"failed"===Z||"syncing"===Z)&&z.push("/")},[Z,z]);var D=(e=(0,i.Z)(function(e){var n,t,i;return(0,r.__generator)(this,function(t){switch(t.label){case 0:return t.trys.push([0,5,,6]),_(!0),S(void 0),[4,(0,eg.t)({confirmDeleteDocuments:e,changedCustomTypes:h,changedSlices:f})];case 1:if(!(void 0!==(n=t.sent())))return[3,2];return S(n),[3,4];case 2:return[4,(0,N.y0)()];case 3:y(t.sent()),v(),c.Am.success("All slices and types have been pushed"),t.label=4;case 4:return[3,6];case 5:return i=t.sent(),console.error("Something went wrong when manually pushing your changes",i),c.Am.error("Something went wrong when pushing your changes. Check your terminal logs."),[3,6];case 6:return _(!1),[2]}})}),function(n){return e.apply(this,arguments)}),L=(0,o.useMemo)(function(){return m?g===B.t.UNAUTHORIZED||g===B.t.FORBIDDEN?(0,s.jsx)(M,{authStatus:g}):0===T?(0,s.jsx)($,{}):(0,s.jsx)(I,{unSyncedSlices:t,unSyncedCustomTypes:l,modelsStatuses:p,authStatus:g,isOnline:m}):(0,s.jsx)(H,{})},[m,g,T,t,l,p,]);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a(),{children:(0,s.jsx)("title",{children:"Changes - Slice Machine"})}),(0,s.jsxs)(x.LN,{children:[(0,s.jsxs)(x.wd,{children:[(0,s.jsx)(x.Cx,{folder:"Changes"}),(0,s.jsx)(x.K2,{children:(0,s.jsx)(et,{disabled:0===T||!m||g===B.t.UNAUTHORIZED||g===B.t.FORBIDDEN||C,loading:C,onClick:function(){D(!1)}})})]}),(0,s.jsx)(x.RN,{children:(0,s.jsxs)(u.xR,{sx:{display:"flex",flexDirection:"column"},children:[L,(0,s.jsx)(ep,{pushChanges:function(e){D(e)},modalData:k,onClose:function(){return S(void 0)}}),(0,s.jsx)(em,{pushChanges:function(e){D(e)},modalData:k,onClose:function(){return S(void 0)}})]})})]})]})}},2754:function(e,n,t){"use strict";t.d(n,{R$:function(){return u},Qj:function(){return p},T9:function(){return h},nf:function(){return f},u2:function(){return d},_T:function(){return x}});var i=t(67557),r=t(62230),s=t(85244),o=t(98240),c=t(52322),l=t(6277),a=t(22715);t(69143);var u=function(e){var n=e.backgroundImage,t=e.style,a=(0,o.Z)(e,["backgroundImage","style"]),u=void 0!==n;return(0,c.jsx)("article",(0,s.Z)((0,r.Z)({},a),{className:(0,l.Z)("_18bjhbz0 _1ecs97dez0 _1ecs97dez1 _1ecs97dez2 _1ecs97dezb _1ecs97dfiv _1ecs97dfix _1ecs97dfiz _1ecs97d3fg _1ecs97d3mt _1ecs97df0r _1ecs97df23 _1ecs97df2h _1ecs97dezp",(0,i.Z)({},"_18bjhbz1 _1ecs97dezx _1ecs97df4v",u)),style:(0,r.Z)({backgroundImage:u?"url(".concat(n,")"):void 0},t)}))},d=function(e){return(0,c.jsx)("div",(0,s.Z)((0,r.Z)({},e),{className:"_1ecs97dez0 _1ecs97dez1 _1ecs97dez2 _1ecs97dezb _1ecs97d6r8 _1ecs97d6yl _1ecs97df29 _1ecs97df2l _1ecs97dezp"}))},h=function(e){return(0,c.jsx)("div",(0,s.Z)((0,r.Z)({},e),{className:"_18bjhbz3 _1ecs97dez0 _1ecs97dez1 _1ecs97dez2 _1ecs97dezb _1ecs97dffv"}))},x=function(e){return(0,c.jsx)(a.xv,(0,s.Z)((0,r.Z)({},e),{className:"_18bjhbz4"}))},f=function(e){return(0,c.jsx)(a.xv,(0,s.Z)((0,r.Z)({},e),{className:"_18bjhbz5",color:"grey11"}))},p=function(e){return(0,c.jsx)("div",(0,s.Z)((0,r.Z)({},e),{className:"_18bjhbz6 _1ecs97dez0 _1ecs97dez8 _1ecs97dez1 _1ecs97dez2 _1ecs97df95 _1ecs97dfdl",color:"grey"}))}},80441:function(e,n,t){"use strict";t.d(n,{Q:function(){return x}});var i=t(22710),r=t(99267);let s={GitHub:"gitHub"};var o=t(62230),c=t(85244),l=t(52322),a=function(e){return(0,l.jsx)("svg",(0,c.Z)((0,o.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.77596 5.47599C4.84147 5.44648 4.91265 5.43167 4.9845 5.4326L19.3525 5.43506C19.4243 5.43413 19.4955 5.44894 19.561 5.47845C19.6265 5.50796 19.6848 5.55146 19.7317 5.60588C19.7786 5.6603 19.8131 5.72433 19.8326 5.79348C19.8521 5.86262 19.8563 5.93521 19.8448 6.00614L19.1802 10.0751H9.71803L10.5722 14.6018H11.1162L11.1162 14.6018H13.7846L14.56 10.0751H19.1803L17.7575 18.8357C17.7387 18.9522 17.6786 19.058 17.5882 19.1339C17.4979 19.2098 17.3832 19.2507 17.2652 19.2492H7.23692C7.2134 19.249 7.19001 19.2476 7.16682 19.2449C7.03392 19.2298 6.90803 19.175 6.80603 19.0868C6.68704 18.9851 6.60772 18.8448 6.58203 18.6904L4.49219 6.00367C4.48069 5.93275 4.48485 5.86016 4.50438 5.79102C4.52392 5.72187 4.55835 5.65784 4.60527 5.60342C4.65218 5.54899 4.71044 5.5055 4.77596 5.47599Z",fill:"currentColor"})}))},u=function(e){return(0,l.jsx)("svg",(0,c.Z)((0,o.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:(0,l.jsx)("path",{d:"M12 4C7.57486 4 4 7.57486 4 12C4 15.5246 6.30057 18.5257 9.47429 19.6C9.87429 19.6754 10.0251 19.4251 10.0251 19.2251V17.8754C7.8 18.3497 7.32457 16.8 7.32457 16.8C6.94971 15.8743 6.42514 15.6251 6.42514 15.6251C5.70057 15.1246 6.47543 15.1497 6.47543 15.1497C7.27543 15.2 7.69943 15.9749 7.69943 15.9749C8.42514 17.2 9.57486 16.8503 10.0251 16.6491C10.1006 16.1246 10.2994 15.7749 10.5246 15.5749C8.74971 15.3749 6.87543 14.6754 6.87543 11.6251C6.87543 10.7497 7.17486 10.0503 7.69943 9.47543C7.62514 9.27543 7.34971 8.45029 7.77486 7.34971C7.77486 7.34971 8.44914 7.12457 9.97486 8.17486C10.6266 7.99627 11.2991 7.90405 11.9749 7.90057C12.6491 7.90057 13.3497 8 13.9749 8.17486C15.5006 7.14971 16.1749 7.34971 16.1749 7.34971C16.6 8.45029 16.3246 9.27543 16.2503 9.47543C16.776 10.024 17.0754 10.7497 17.0754 11.624C17.0754 14.6994 15.2 15.3749 13.4251 15.5749C13.6994 15.8251 13.9749 16.2994 13.9749 17.0491V19.2503C13.9749 19.4754 14.1246 19.7246 14.5246 19.6251C17.7006 18.5246 20 15.5246 20 12C20 7.57486 16.4251 4 12 4Z",fill:"currentColor"})}))},d=function(e){return(0,l.jsx)("svg",(0,c.Z)((0,o.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.7881 10.5954L16.5431 5.20756C16.6328 4.93081 17.0594 4.93081 17.1492 5.20756L18.9076 10.5954H14.7881ZM6.6192 5.20756L4.86353 10.5954H8.97968L7.22468 5.20756C7.1349 4.93081 6.70898 4.93081 6.6192 5.20756ZM4.0299 13.2981L4.86352 10.5954H4.86353H8.979H14.7881H18.9076L19.7392 13.2981C19.7796 13.4207 19.7802 13.553 19.7408 13.676C19.7014 13.799 19.624 13.9063 19.5198 13.9826L11.893 19.5257L11.8879 19.5319L11.8923 19.5378L11.8865 19.5336L11.8835 19.5371L11.8852 19.5326L4.24927 13.9826C4.0299 13.8246 3.95092 13.5458 4.0299 13.2981Z",fill:"currentColor"})}))},h=t(81038),x={gitHub:{connect:(0,i.Z)(function(){return(0,r.__generator)(this,function(e){switch(e.label){case 0:return[4,f("gitHub")];case 1:return[2,e.sent()]}})}),Icon:u,name:"GitHub",supported:m("gitHub")},bitbucket:{connect:(0,i.Z)(function(){return(0,r.__generator)(this,function(e){switch(e.label){case 0:return[4,f("bitbucket")];case 1:return[2,e.sent()]}})}),Icon:a,name:"Bitbucket",supported:m("bitbucket")},gitLab:{connect:(0,i.Z)(function(){return(0,r.__generator)(this,function(e){switch(e.label){case 0:return[4,f("gitLab")];case 1:return[2,e.sent()]}})}),Icon:d,name:"GitLab",supported:m("gitLab")}};function f(e){return p.apply(this,arguments)}function p(){return(p=(0,i.Z)(function(e){var n;return(0,r.__generator)(this,function(t){switch(t.label){case 0:if(!m(e))throw Error("Not implemented.");return[4,h.j.git.getProviderAppInstallURL({provider:e})];case 1:return n=t.sent(),window.open(n,"git-provider-app-installation"),[2]}})})).apply(this,arguments)}function m(e){return Boolean(Object.values(s).includes(e))}},75499:function(e,n,t){"use strict";t.d(n,{G:function(){return a}});var i=t(22710),r=t(17064),s=t(99267),o=t(17329),c=t(19334),l=t(81038);function a(){var e,n,t=(0,r.Z)((0,c.f)(),1)[0];return{linkedGitRepos:(0,o.QT)(u,[t.repositoryName]),linkRepo:(e=(0,i.Z)(function(e){return(0,s.__generator)(this,function(n){switch(n.label){case 0:return[4,l.j.git.linkRepo({prismic:{domain:t.repositoryName},git:e})];case 1:return n.sent(),[4,(0,o.gw)(u,[t.repositoryName])];case 2:return n.sent(),[2]}})}),function(n){return e.apply(this,arguments)}),unlinkRepo:(n=(0,i.Z)(function(e){return(0,s.__generator)(this,function(n){switch(n.label){case 0:return[4,l.j.git.unlinkRepo({prismic:{domain:t.repositoryName},git:e})];case 1:return n.sent(),[4,(0,o.gw)(u,[t.repositoryName])];case 2:return n.sent(),[2]}})}),function(e){return n.apply(this,arguments)})}}function u(e){return d.apply(this,arguments)}function d(){return(d=(0,i.Z)(function(e){return(0,s.__generator)(this,function(n){switch(n.label){case 0:return[4,l.j.git.fetchLinkedRepos({prismic:{domain:e}})];case 1:return[2,n.sent()]}})})).apply(this,arguments)}},19334:function(e,n,t){"use strict";t.d(n,{f:function(){return c}});var i=t(22710),r=t(99267),s=t(17329),o=t(81038);function c(){var e,n=(0,s.QT)(l,[]),t=(e=(0,i.Z)(function(e){return(0,r.__generator)(this,function(n){switch(n.label){case 0:return[4,o.j.project.writeSliceMachineConfig({config:e})];case 1:return n.sent(),(0,s.VA)(l,[],e),[2]}})}),function(n){return e.apply(this,arguments)});return[n,t]}function l(){return a.apply(this,arguments)}function a(){return(a=(0,i.Z)(function(){return(0,r.__generator)(this,function(e){return[2,o.j.project.getSliceMachineConfig()]})})).apply(this,arguments)}},69143:function(){},25977:function(){}},function(e){e.O(0,[898,789,123,543,918,25,286,774,888,179],function(){return e(e.s=21985)}),_N_E=e.O()}]);

package/src/components/PageLayout/PageLayout.css.ts

@@ -1,69 +0,0 @@
-import { colors, sprinkles, vars } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
-
-const grid = sprinkles({ all: "unset", display: "grid" });
-
-export const root = style([
-  grid,
-  sprinkles({
-    backgroundColor: colors.grey2,
-    height: "100%",
-    justifyContent: "center",
-    overflowY: "auto",
-    position: "absolute",
-    width: "100%",
-    borderStyle: "solid",
-  }),
-  {
-    borderWidth: 0,
-    borderTopWidth: 2,
-    gridTemplateAreas: `
-    "pane header"
-    "pane content"
-  `,
-    gridTemplateColumns: "min-content minmax(auto, 1008px)",
-    gridTemplateRows: "min-content 1fr",
-  },
-]);
-
-export const borderTopColor = {
-  purple: sprinkles({ borderTopColor: colors.purple9 }),
-  indigo: sprinkles({ borderTopColor: colors.indigo10 }),
-  amber: sprinkles({ borderTopColor: colors.amber10 }),
-};
-
-export const pane = style([
-  grid,
-  sprinkles({
-    borderRightColor: colors.grey6,
-    borderRightStyle: "dashed",
-    borderRightWidth: 1,
-    boxSizing: "border-box",
-    overflowY: "auto",
-    position: "sticky",
-    top: 0,
-  }),
-  { gridArea: "pane", width: "320px" },
-]);
-
-export const header = style([
-  grid,
-  sprinkles({
-    boxSizing: "border-box",
-    height: 64,
-    paddingBlock: 16,
-    paddingInline: 32,
-  }),
-  { gridArea: "header" },
-]);
-
-export const content = style([
-  grid,
-  sprinkles({ minHeight: 0, paddingInline: 32, paddingTop: 16 }),
-  {
-    gridArea: "content",
-    selectors: { [`${header} ~ &`]: { paddingTop: vars.space[0] } },
-  },
-]);
-
-export const contentChildren = style([grid, sprinkles({ paddingBottom: 16 })]);