slice-machine-ui 1.26.1-beta.9 → 2.0.0

package/out/_next/static/p-7eJUu7gNSRAriJWjZOw/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,f,d,u,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-cf93d16e9c63b6db.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-055db8139a22a592.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,n,"static/css/0e0d6c4ec6bf7373.css","static/chunks/pages/changes-f43ad4ab5e00f9b9.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-3c8e721ec6802127.js"],"/custom-types/[customTypeId]":[s,f,d,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-ad5936d95fafff44.js"],"/labs":["static/chunks/pages/labs-73a12d2fe0233fb9.js"],"/page-types/[pageTypeId]":[s,f,d,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-5ccb44e013a3b002.js"],"/settings":["static/css/ca32882a5d2d8d88.css","static/chunks/pages/settings-417f1d5c1e558c88.js"],"/slices":[s,t,b,c,n,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-3c9b08adf578b020.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,f,d,u,h,e,b,i,l,c,k,n,"static/css/27f2b9b9c9f65885.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-a8933b0ef10806cd.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-a5a5d48f20a7b261.js","static/chunks/46-d22d7a121254e31d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-01d67e97cb901e46.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/settings","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-792af14760d9df34.js","static/chunks/799-7b910b896ff60ebe.js","static/chunks/183-ebd633fed7c74545.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-e0950c3083c672e8.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b992b9e1ce75777e.js","static/chunks/318-77a29f41c3a027e3.js","static/chunks/727-d0d6a29f0793bde2.js","static/css/be1f49e49a5aa7eb.css","static/chunks/210-aee6116139329803.js","static/chunks/869-868567cc5e32452f.js","static/css/57a7e5eb58b45860.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/pages/custom-types/[customTypeId].tsx

@@ -1 +0,0 @@
-export { CustomTypesBuilderPage as default } from "@src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage";

package/pages/labs.tsx

@@ -1 +0,0 @@
-export { LabsPage as default } from "@src/features/labs/labsList/LabsPage";

package/pages/page-types/[pageTypeId].tsx

@@ -1 +0,0 @@
-export { CustomTypesBuilderPage as default } from "@src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage";

package/pages/settings.tsx

@@ -1 +0,0 @@
-export { SettingsPage as default } from "@src/features/settings/SettingsPage";

package/src/components/BaseHoverCard/BaseHoverCard.css.ts

@@ -1,25 +0,0 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
-
-const reset = sprinkles({
-  all: "unset",
-  boxSizing: "border-box",
-  display: "revert",
-  fontFamily: "body",
-});
-
-export const container = style([
-  reset,
-  sprinkles({
-    backgroundColor: colors.grey1,
-    borderRadius: 6,
-    boxShadow: 3,
-  }),
-]);
-
-export const arrow = style([
-  reset,
-  sprinkles({
-    fill: colors.grey1,
-  }),
-]);

package/src/components/BlankSlate/BlankSlate.css.ts

@@ -1,96 +0,0 @@
-import { colors, sprinkles, vars } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
-
-const column = sprinkles({
-  all: "unset",
-  boxSizing: "border-box",
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const root = style([
-  column,
-  sprinkles({
-    animationDuration: 300,
-    animationName: "fadeIn",
-    animationTimingFunction: "easeInOut",
-    borderColor: colors.grey6,
-    borderRadius: 6,
-    borderStyle: "solid",
-    borderWidth: 1,
-    overflow: "hidden",
-  }),
-  { maxWidth: 498, minHeight: 400, backgroundColor: vars.color.greyLight1 },
-]);
-
-export const withBackground = style([
-  sprinkles({
-    textAlign: "center",
-    width: "100%",
-  }),
-  {
-    backgroundSize: "cover",
-    backgroundColor: "transparent",
-    borderRadius: vars.borderRadius[0],
-    borderStyle: vars.borderStyle.none,
-    height: "100%",
-    maxWidth: "100%",
-  },
-]);
-
-export const image = style([
-  column,
-  sprinkles({
-    borderBottomColor: colors.grey6,
-    borderBottomStyle: "solid",
-    borderBottomWidth: 1,
-    overflow: "hidden",
-  }),
-]);
-
-export const content = style([
-  column,
-  sprinkles({ padding: 32 }),
-  {
-    selectors: {
-      [`${withBackground} &`]: {
-        padding: "64px",
-      },
-    },
-  },
-]);
-
-export const title = style({
-  fontSize: 18,
-  fontWeight: 600,
-  lineHeight: "32px",
-});
-
-export const desc = style({
-  fontWeight: 400,
-  lineHeight: "24px",
-  selectors: {
-    [`${withBackground} &`]: {
-      maxWidth: "464px",
-      alignSelf: "center",
-    },
-  },
-});
-
-export const actions = style([
-  sprinkles({
-    all: "unset",
-    alignItems: "center",
-    boxSizing: "border-box",
-    display: "flex",
-    gap: 16,
-    marginTop: 16,
-  }),
-  {
-    selectors: {
-      [`${withBackground} &`]: {
-        justifyContent: "center",
-      },
-    },
-  },
-]);

package/src/components/Card/Card.css.ts

@@ -1,188 +0,0 @@
-import { colors, selectors, sprinkles, vars } from "@prismicio/editor-ui";
-import { style, styleVariants } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
-
-const flex = sprinkles({ all: "unset", display: "flex" });
-
-const column = style([flex, sprinkles({ flexDirection: "column" })]);
-
-export const root = style([
-  column,
-  sprinkles({
-    borderColor: colors.grey6,
-    borderRadius: 6,
-    borderStyle: "solid",
-    borderWidth: 1,
-    boxSizing: "border-box",
-    overflowX: "hidden",
-    position: "relative",
-  }),
-]);
-
-export const size = styleVariants({
-  small: { height: "240px" },
-  medium: { height: "320px" },
-});
-
-export const variant = styleVariants({
-  solid: [
-    sprinkles({
-      backgroundColor: colors.grey3,
-      borderColor: selectors.checked(colors.purple10),
-    }),
-  ],
-  outlined: [
-    sprinkles({
-      backgroundColor: colors.grey2,
-      borderColor: selectors.checked(colors.purple8),
-    }),
-  ],
-});
-
-export const interactive = style({
-  ":focus-visible": { boxShadow: "0px 0px 0px 4px hsla(251, 63%, 63%, 0.1)" },
-  selectors: {
-    "&[data-disabled]": { opacity: vars.opacity["50%"] },
-    "&:not([data-disabled])": { cursor: vars.cursor.pointer },
-  },
-});
-
-export const interactiveVariant = {
-  solid: sprinkles({
-    backgroundColor: selectors.focusVisible(colors.grey5),
-    borderColor: selectors.focusVisible(colors.purple10),
-  }),
-  outlined: sprinkles({
-    backgroundColor: {
-      ...selectors.active(colors.grey4),
-      ...selectors.focusVisible(colors.grey1),
-      ...selectors.hover(colors.grey4),
-    },
-    borderColor: {
-      ...selectors.active(colors.purple9),
-      ...selectors.focusVisible(colors.purple8),
-    },
-  }),
-};
-
-export const media = style([
-  column,
-  sprinkles({ flexBasis: 0, flexGrow: 1, minHeight: 0, position: "relative" }),
-  {
-    order: 0,
-    selectors: {
-      [`${variant.solid} > &`]: {
-        padding: calc.subtract(vars.space[32], vars.borderWidth[1]),
-      },
-      [`${variant.outlined} > &`]: {
-        backgroundColor: vars.color.greyLight3,
-        marginInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
-        marginTop: calc.subtract(vars.space[16], vars.borderWidth[1]),
-        padding: vars.space[16],
-      },
-    },
-  },
-]);
-
-const grid = sprinkles({ all: "unset", display: "grid" });
-
-export const mediaComponent = styleVariants({
-  div: [grid, sprinkles({ flexGrow: 1 })],
-  img: [
-    sprinkles({ height: "100%", objectFit: "contain" }),
-    { selectors: { "&:not([src])": { visibility: "hidden" } } },
-  ],
-});
-
-export const mediaOverlay = style([
-  grid,
-  sprinkles({ inset: 0, position: "absolute", visibility: "hidden" }),
-  {
-    "::before": {
-      backgroundColor: vars.color.greyLight12,
-      content: "",
-      inset: vars.space[0],
-      opacity: vars.opacity["10%"],
-      position: "absolute",
-    },
-    selectors: {
-      [`${interactive}:focus-visible &, ${interactive}:not([data-disabled]) ${media}:hover > &`]:
-        { visibility: "visible" },
-      [`${interactive}:not([data-disabled]) &:has(:focus-visible)`]: {
-        visibility: "visible",
-      },
-    },
-  },
-]);
-
-const nonMedia = style([
-  flex,
-  sprinkles({
-    alignItems: "center",
-    boxSizing: "border-box",
-    flexDirection: "row",
-  }),
-  {
-    selectors: {
-      [`${variant.solid} > &`]: { backgroundColor: vars.color.greyLight1 },
-      [`${variant.solid} > &:not(:first-child)`]: {
-        borderTopColor: vars.color.greyLight6,
-        borderTopStyle: "inherit",
-        borderTopWidth: "inherit",
-      },
-    },
-  },
-]);
-
-export const actions = style([
-  nonMedia,
-  sprinkles({ height: 48, justifyContent: "space-between" }),
-  {
-    order: 1,
-    selectors: {
-      [`${variant.solid} > &`]: {
-        paddingLeft: calc.subtract(vars.space[12], vars.borderWidth[1]),
-        paddingRight: calc.subtract(vars.space[8], vars.borderWidth[1]),
-      },
-      [`${variant.outlined} > &`]: {
-        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
-      },
-    },
-  },
-]);
-
-export const footer = style([
-  nonMedia,
-  sprinkles({ gap: 8, height: 60 }),
-  {
-    order: 2,
-    selectors: {
-      [`${variant.solid} > &`]: {
-        paddingInline: calc.subtract(vars.space[12], vars.borderWidth[1]),
-      },
-      [`${variant.outlined} > &`]: {
-        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
-      },
-    },
-  },
-]);
-
-export const footerTexts = style([
-  column,
-  sprinkles({ flexBasis: 0, flexGrow: 1, minWidth: 0 }),
-  // Offset `title` and `subtitle` so that they are centered vertically despite
-  // having different line heights.
-  { marginBottom: `calc((${24 / 16}rem - ${16 / 16}rem) / 2)` },
-]);
-
-export const status = style([
-  column,
-  sprinkles({
-    height: 24,
-    insetInline: 0,
-    justifyContent: "center",
-    paddingInline: 8,
-    position: "absolute",
-  }),
-  { backgroundColor: "hsl(251, 91%, 95%)", color: "hsl(250, 43%, 48%)" },
-]);

package/src/components/CodeBlock/CodeBlock.css.ts

@@ -1,37 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { colors, sprinkles } from "@prismicio/editor-ui";
-
-export const root = sprinkles({
-  all: "unset",
-  display: "revert",
-  borderWidth: 1,
-  borderRadius: 6,
-  borderStyle: "solid",
-  borderColor: colors.grey6,
-});
-
-export const header = sprinkles({
-  all: "unset",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-  borderBottomStyle: "solid",
-  borderBottomWidth: 1,
-  backgroundColor: colors.grey2,
-  borderBottomColor: colors.grey6,
-  paddingBlock: 4,
-  paddingRight: 4,
-});
-
-export const fileInfo = sprinkles({
-  all: "unset",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const fileName = style({
-  lineHeight: "32px",
-});

package/src/components/Divider/Divider.css.ts

@@ -1,31 +0,0 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
-import { style, styleVariants } from "@vanilla-extract/css";
-
-const base = style([
-  sprinkles({
-    width: "100%",
-    borderStyle: "none",
-    margin: 0,
-  }),
-]);
-
-export const variants = styleVariants({
-  dashed: [
-    base,
-    sprinkles({
-      borderColor: colors.currentColor,
-      borderTopStyle: "dashed",
-      borderWidth: 1,
-    }),
-  ],
-  edgeFaded: [
-    base,
-    sprinkles({
-      height: 1,
-    }),
-    {
-      backgroundImage:
-        "linear-gradient(to right, color-mix(in srgb, currentColor, transparent 100%), currentColor, color-mix(in srgb, currentColor, transparent 100%))",
-    },
-  ],
-});

package/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.css.ts

@@ -1,12 +0,0 @@
-import { sprinkles } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
-
-export const content = style([
-  sprinkles({
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
-    gap: 12,
-  }),
-  { gridArea: "content", overflow: "hidden" },
-]);

package/src/features/documentation/MarkdownRenderer/MarkdownRenderer.css.ts

@@ -1,13 +0,0 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
-
-export const section = sprinkles({
-  paddingBottom: 16,
-});
-
-export const inlineCode = sprinkles({
-  fontFamily: "code",
-  backgroundColor: colors.grey2,
-  borderRadius: 6,
-  paddingBlock: 2,
-  paddingInline: 4,
-});

package/src/features/slices/sliceBuilder/useGroupsInSlicesExperiment.ts

@@ -1,8 +0,0 @@
-import { useExperimentVariant } from "@src/hooks/useExperimentVariant";
-
-type UseGitIntegrationExperimentReturnType = { eligible: boolean };
-
-export function useGroupsInSlicesExperiment(): UseGitIntegrationExperimentReturnType {
-  const variant = useExperimentVariant("slicemachine-groups-in-slices");
-  return { eligible: variant?.value === "on" };
-}

package/{components → src/legacy/components}/Card/WithTabs/components.jsx

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

package/{components → src/legacy/components}/Changelog/versionDetails/ReleaseNotesDetails.tsx

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

package/{components → src/legacy/components}/ChangesEmptyState/OfflinePage.tsx

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

package/{components → src/legacy/components}/ChangesEmptyState/index.ts

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

package/{components → src/legacy/components}/ChangesItems/ErrorBanner.tsx

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

package/{components → src/legacy/components}/DeleteDocumentsDrawer/index.tsx

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

package/{components → src/legacy/components}/InputDeleteIcon/index.jsx

@@ -1,5 +1,5 @@
-import { IconButton, useThemeUI } from "theme-ui";
 import { AiFillCloseCircle } from "react-icons/ai";
+import { IconButton, useThemeUI } from "theme-ui";
 
 const InputDeleteIcon = ({ sx, size = 22, ...rest }) => {
   const { theme } = useThemeUI();

package/{components → src/legacy/components}/ItemHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Flex, Text } from "theme-ui";
 import type { Theme } from "theme-ui";
+import { Flex, Text } from "theme-ui";
 
 const ItemHeader: React.FC<{
   text: React.ReactNode;

package/{components → src/legacy/components}/ReviewModal/ReviewFormSelect.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import { FieldProps } from "formik";
+import { FC } from "react";
 import { Box, Button } from "theme-ui";
 
 const ratingSelectable = [1, 2, 3, 4, 5];

package/{components → src/legacy/components}/ScreenshotPreview/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from "react";
-import { Flex, Image, Text, ThemeUIStyleObject } from "theme-ui";
 import { MdInfoOutline } from "react-icons/md";
+import { Flex, Image, Text, ThemeUIStyleObject } from "theme-ui";
 
 const MemoedImage = memo<{ src: string | undefined }>(({ src }) => (
   <Image src={src} alt="Preview image" sx={{ maxHeight: "100%" }} />

package/{components → src/legacy/components}/SliceMachineIconButton/index.tsx

@@ -1,6 +1,6 @@
-import { IconButton } from "theme-ui";
 import { IconButtonProps } from "@theme-ui/components";
 import { IconType } from "react-icons/lib";
+import { IconButton } from "theme-ui";
 
 const defaultActiveSx = (active: boolean, hasError: boolean | null): object => {
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

package/{components → src/legacy/components}/SliceMachineModal/index.tsx

@@ -1,5 +1,5 @@
-import Modal from "react-modal";
 import * as React from "react";
+import Modal from "react-modal";
 
 const SliceMachineModal: React.FunctionComponent<Modal.Props> = (props) => {
   const modalStyle = {

package/{lib → src/legacy/lib}/forms/defaults.ts

@@ -1,5 +1,5 @@
-import { Input, InputType } from "./fields";
 import { API_ID_REGEX } from "../consts";
+import { Input, InputType } from "./fields";
 
 export const validateId = ({
   value,

package/{lib → src/legacy/lib}/models/common/ComponentUI.ts

@@ -1,5 +1,5 @@
-import { VariationSM } from "./Slice";
 import { Component, Screenshot } from "./Library";
+import { VariationSM } from "./Slice";
 
 export const createScreenshotUI = (screenshot: Screenshot): ScreenshotUI => ({
   hash: screenshot.hash,