npm - slice-machine-ui - Versions diffs - 2.11.2-beta.3 → 2.12.0 - Mend

slice-machine-ui 2.11.2-beta.3 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/out/slices/[lib]/[sliceName]/[variation].html CHANGED Viewed

	@@ -1 +1 @@
1	- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/~~e3fef77c99e43ec1~~.css" as="style"/><link rel="stylesheet" href="/_next/static/css/~~e3fef77c99e43ec1~~.css" data-n-g=""/><link rel="preload" href="/_next/static/css/9740e73b8aa87666.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9740e73b8aa87666.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-a31bc948075f7bde.js" defer=""></script><script src="/_next/static/chunks/main-8e15d66b38d840e9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-~~21a7b85cfca38b8e~~.js" defer=""></script><script src="/_next/static/chunks/59b4e022-8e544a511d670317.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/f36c6662-1f3a854183168b10.js" defer=""></script><script src="/_next/static/chunks/4c744e84-642bc2ece03445a4.js" defer=""></script><script src="/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js" defer=""></script><script src="/_next/static/chunks/1cc2734a-09fb3b997ad1eb70.js" defer=""></script><script src="/_next/static/chunks/183-b1a9f55f45cb8d8e.js" defer=""></script><script src="/_next/static/chunks/50-586dc7ab5e584e76.js" defer=""></script><script src="/_next/static/chunks/434-c7ad3ff97354e3b7.js" defer=""></script><script src="/_next/static/chunks/772-7401e6c6e7ca075e.js" defer=""></script><script src="/_next/static/chunks/574-~~a19734ace8217cf4~~.js" defer=""></script><script src="/_next/static/chunks/639-424b570eee9a37fb.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-~~5757936335b0f206~~.js" defer=""></script><script src="/_next/static/~~YYi6N7YgM3m2Y0OPbLTk2~~/_buildManifest.js" defer=""></script><script src="/_next/static/~~YYi6N7YgM3m2Y0OPbLTk2~~/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]","query":{},"buildId":"~~YYi6N7YgM3m2Y0OPbLTk2~~","runtimeConfig":{"sentryEnvironment":"~~beta~~"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
1	+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/69a583909471a453.css" as="style"/><link rel="stylesheet" href="/_next/static/css/69a583909471a453.css" data-n-g=""/><link rel="preload" href="/_next/static/css/9740e73b8aa87666.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9740e73b8aa87666.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-a31bc948075f7bde.js" defer=""></script><script src="/_next/static/chunks/main-8e15d66b38d840e9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-8d1003918e8b64eb.js" defer=""></script><script src="/_next/static/chunks/59b4e022-8e544a511d670317.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/f36c6662-1f3a854183168b10.js" defer=""></script><script src="/_next/static/chunks/4c744e84-642bc2ece03445a4.js" defer=""></script><script src="/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js" defer=""></script><script src="/_next/static/chunks/1cc2734a-09fb3b997ad1eb70.js" defer=""></script><script src="/_next/static/chunks/183-b1a9f55f45cb8d8e.js" defer=""></script><script src="/_next/static/chunks/50-586dc7ab5e584e76.js" defer=""></script><script src="/_next/static/chunks/434-c7ad3ff97354e3b7.js" defer=""></script><script src="/_next/static/chunks/772-7401e6c6e7ca075e.js" defer=""></script><script src="/_next/static/chunks/574-763538831d24c004.js" defer=""></script><script src="/_next/static/chunks/639-424b570eee9a37fb.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-4e288820949d6eb3.js" defer=""></script><script src="/_next/static/Ut7W03VJ4ylj2qWEaz1it/_buildManifest.js" defer=""></script><script src="/_next/static/Ut7W03VJ4ylj2qWEaz1it/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]","query":{},"buildId":"Ut7W03VJ4ylj2qWEaz1it","runtimeConfig":{"sentryEnvironment":"production"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

package/out/slices.html CHANGED Viewed

	@@ -1 +1 @@
1	- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/~~e3fef77c99e43ec1~~.css" as="style"/><link rel="stylesheet" href="/_next/static/css/~~e3fef77c99e43ec1~~.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b5323377600915db.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b5323377600915db.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-a31bc948075f7bde.js" defer=""></script><script src="/_next/static/chunks/main-8e15d66b38d840e9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-~~21a7b85cfca38b8e~~.js" defer=""></script><script src="/_next/static/chunks/59b4e022-8e544a511d670317.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/50-586dc7ab5e584e76.js" defer=""></script><script src="/_next/static/chunks/772-7401e6c6e7ca075e.js" defer=""></script><script src="/_next/static/chunks/639-424b570eee9a37fb.js" defer=""></script><script src="/_next/static/chunks/pages/slices-f42c28ddc74a5b2b.js" defer=""></script><script src="/_next/static/~~YYi6N7YgM3m2Y0OPbLTk2~~/_buildManifest.js" defer=""></script><script src="/_next/static/~~YYi6N7YgM3m2Y0OPbLTk2~~/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"~~YYi6N7YgM3m2Y0OPbLTk2~~","runtimeConfig":{"sentryEnvironment":"~~beta~~"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
1	+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/69a583909471a453.css" as="style"/><link rel="stylesheet" href="/_next/static/css/69a583909471a453.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b5323377600915db.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b5323377600915db.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-a31bc948075f7bde.js" defer=""></script><script src="/_next/static/chunks/main-8e15d66b38d840e9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-8d1003918e8b64eb.js" defer=""></script><script src="/_next/static/chunks/59b4e022-8e544a511d670317.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/50-586dc7ab5e584e76.js" defer=""></script><script src="/_next/static/chunks/772-7401e6c6e7ca075e.js" defer=""></script><script src="/_next/static/chunks/639-424b570eee9a37fb.js" defer=""></script><script src="/_next/static/chunks/pages/slices-f42c28ddc74a5b2b.js" defer=""></script><script src="/_next/static/Ut7W03VJ4ylj2qWEaz1it/_buildManifest.js" defer=""></script><script src="/_next/static/Ut7W03VJ4ylj2qWEaz1it/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"Ut7W03VJ4ylj2qWEaz1it","runtimeConfig":{"sentryEnvironment":"production"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.11.2-beta.3",
+  "version": "2.12.0",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -36,20 +36,20 @@
   },
   "dependencies": {
     "@radix-ui/react-visually-hidden": "1.0.3",
-    "@slicemachine/manager": "0.23.2-beta.3",
-    "start-slicemachine": "0.12.42-beta.3"
+    "@slicemachine/manager": "0.24.0",
+    "start-slicemachine": "0.12.42"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.11.0",
-    "@prismicio/editor-fields": "0.4.59",
-    "@prismicio/editor-support": "0.4.59",
-    "@prismicio/editor-ui": "0.4.59",
+    "@prismicio/editor-fields": "0.4.60",
+    "@prismicio/editor-support": "0.4.60",
+    "@prismicio/editor-ui": "0.4.60",
     "@prismicio/mock": "0.3.3",
-    "@prismicio/mocks": "2.5.0",
+    "@prismicio/mocks": "2.8.0",
     "@prismicio/simulator": "0.1.4",
-    "@prismicio/types-internal": "3.2.0",
+    "@prismicio/types-internal": "3.3.0",
     "@radix-ui/react-hover-card": "1.0.6",
     "@radix-ui/react-tabs": "1.0.4",
     "@reach/menu-button": "0.18.0",
@@ -135,6 +135,5 @@
     "vitest": "0.32.0",
     "yup": "0.32.11",
     "zod": "3.23.8"
-  },
-  "stableVersion": "2.11.1"
+  }
 }

package/src/features/customTypes/customTypesBuilder/UIDEditor.tsx CHANGED Viewed

@@ -95,7 +95,11 @@ export function UIDEditor() {
           </Box>
           <DialogActions>
             <DialogCancelButton size="medium" />
-            <DialogActionButton size="medium" disabled={Boolean(error)}>
+            <DialogActionButton
+              type="submit"
+              size="medium"
+              disabled={Boolean(error)}
+            >
               Save
             </DialogActionButton>
           </DialogActions>

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx CHANGED Viewed

@@ -141,6 +141,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={errors && Object.keys(errors).length > 0}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx CHANGED Viewed

@@ -174,6 +174,7 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={Object.keys(errors).length > 0}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx CHANGED Viewed

@@ -97,6 +97,7 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={Boolean(error)}

package/src/legacy/components/Forms/RenameVariationModal/RenameVariationModal.tsx CHANGED Viewed

@@ -105,6 +105,7 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isRenaming}
                 disabled={Boolean(error)}

package/src/legacy/lib/builders/SliceBuilder/VariationsList/AddVariationModal.tsx CHANGED Viewed

@@ -160,7 +160,9 @@ const AddVariationModal: React.FunctionComponent<{
                   <Button onClick={handleClose} color="grey">
                     Cancel
                   </Button>
-                  <Button loading={isAddingVariation}>Submit</Button>
+                  <Button type="submit" loading={isAddingVariation}>
+                    Submit
+                  </Button>
                 </Box>
               }
               close={handleClose}

package/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ const Hint: React.FC<HintProps> = ({
     if (item.value.config?.allowText ?? false)
       snippetCacheKey.push("allowText");
     if (item.value.config?.repeat ?? false) snippetCacheKey.push("repeat");
+    if (Boolean(item.value.config?.variants)) snippetCacheKey.push("variants");
   }
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/src/legacy/lib/models/common/widgets/Link/Form.jsx CHANGED Viewed

@@ -1,3 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import { Box } from "@prismicio/editor-ui";
+import { useField } from "formik";
 import { Flex } from "theme-ui";
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
@@ -6,7 +12,11 @@ import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { CheckBox } from "@/legacy/lib/forms/fields";
-import { DisplayTextCheckbox, RepeatableCheckbox } from "./components";
+import {
+  DisplayTextCheckbox,
+  RepeatableCheckbox,
+  Variants as VariantsForm,
+} from "./components";
 const FormFields = {
   ...DefaultFields,
@@ -18,7 +28,7 @@ const Form = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const {
-    config: { allowText, repeat },
+    config: { allowText, repeat, variants },
   } = formValues;
   return (
@@ -64,15 +74,38 @@ const Form = (props) => {
           </Flex>
         </Col>
       </FlexGrid>
-      <RepeatableCheckbox
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        checked={repeat}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        setFieldValue={setFieldValue}
-      />
+      <Box height={8} />
+      <Box flexDirection="column" gap={16}>
+        <RepeatableCheckbox
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          checked={repeat}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          setFieldValue={setFieldValue}
+        />
+        <Variants variants={variants} setFieldValue={setFieldValue} />
+      </Box>
     </>
   );
 };
 export { FormFields };
 export default Form;
+export function Variants({ variants, setFieldValue }) {
+  const fieldKey = "config.variants";
+  const onVariantsChange = (newVariants) =>
+    setFieldValue(fieldKey, newVariants);
+  const [_, meta] = useField(fieldKey);
+  const error = meta.error?.find((err) => err);
+  return (
+    <VariantsForm
+      variants={variants}
+      onVariantsChange={onVariantsChange}
+      error={error}
+    />
+  );
+}

package/src/legacy/lib/models/common/widgets/Link/components.tsx CHANGED Viewed

@@ -1,4 +1,14 @@
-import { Box, Icon, Text, Tooltip } from "@prismicio/editor-ui";
+import {
+  Box,
+  Button,
+  Icon,
+  IconButton,
+  Switch,
+  Text,
+  TextInput,
+  Tooltip,
+} from "@prismicio/editor-ui";
+import { useRef } from "react";
 import { Checkbox, Flex, Label } from "theme-ui";
 import { Col } from "@/legacy/components/Flex";
@@ -13,6 +23,9 @@ interface CommonCheckboxProps {
 export function DisplayTextCheckbox(props: CommonCheckboxProps) {
   const { checked, height = 130, setFieldValue } = props;
+  // Ref to the container to position the tooltip inside it.
+  const container = useRef<HTMLDivElement>(null);
   return (
     <Col>
       <Flex
@@ -28,6 +41,7 @@ export function DisplayTextCheckbox(props: CommonCheckboxProps) {
             justifyContent="space-between"
             alignItems="center"
             width="100%"
+            ref={container}
           >
             <Flex>
               <Checkbox
@@ -39,9 +53,9 @@ export function DisplayTextCheckbox(props: CommonCheckboxProps) {
               Allow display text
             </Flex>
             <Tooltip
-              content="Allow editors to customize the link display text"
+              containerRef={container}
               align="end"
-              zIndexHack
+              content="Allow editors to customize the link display text"
             >
               <Icon name="alert" size="medium" color="grey11" />
             </Tooltip>
@@ -57,13 +71,7 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
   return (
     <Box flexDirection="column">
-      <Label
-        htmlFor="repeat"
-        variant="label.primary"
-        sx={{
-          mt: 2,
-        }}
-      >
+      <Label htmlFor="repeat" variant="label.primary">
         Repeatable
       </Label>
       <Label variant="label.border" sx={{ display: "flex" }}>
@@ -74,7 +82,7 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
             void setFieldValue("config.repeat", event.target.checked);
           }}
         />
-        Make this link repeatable - Allow editors to create lists of links
+        Make this link repeatable (allows editors to create lists of links)
       </Label>
       <Box alignItems="center" gap={4}>
         <Icon name="alert" size="medium" color="grey11" />
@@ -95,3 +103,134 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
     </Box>
   );
 }
+export function Variants({
+  variants,
+  onVariantsChange,
+  error,
+}: {
+  variants?: string[];
+  onVariantsChange: (variants?: string[]) => void;
+  error?: string;
+}) {
+  const enabled = Boolean(variants);
+  const onCheckedChange = (checked: boolean) => {
+    onVariantsChange(checked ? ["Primary", "Secondary"] : undefined);
+  };
+  const switchLabel = enabled ? "Enabled" : "Disabled";
+  const optionsTitle = `Options (${variants?.length ?? 0}/5)`;
+  const addButtonShown = (variants?.length ?? 0) < 5;
+  const deleteButtonShown = (variants?.length ?? 0) > 2;
+  const focusableInputIndex = useRef<number>();
+  return (
+    <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
+      <Box
+        border={{ bottom: true }}
+        padding={12}
+        flexDirection="column"
+        gap={8}
+      >
+        <Text variant="h4" color="grey12">
+          Variants
+        </Text>
+        <Text color="grey12">
+          Add variants like "Primary" and "Secondary" to allow editors to choose
+          the link's style by selecting one of them.
+        </Text>
+        <Box gap={8}>
+          <Switch checked={enabled} onCheckedChange={onCheckedChange} />
+          <Text color="grey11">{switchLabel}</Text>
+        </Box>
+      </Box>
+      {enabled && (
+        <Box
+          border={{ bottom: true }}
+          padding={12}
+          flexDirection="column"
+          gap={8}
+        >
+          <Text variant="h5" color="grey11">
+            {optionsTitle}
+            {Boolean(error) && (
+              <Text variant="inherit" color="tomato9">{` ${error}`}</Text>
+            )}
+          </Text>
+          {variants?.map((variant, position) => (
+            <Box key={position} gap={4} alignItems="center">
+              <Box
+                flexGrow={1}
+                backgroundColor="white"
+                padding={{ inline: 12, block: 8 }}
+                flexDirection="column"
+                border
+                borderRadius={4}
+              >
+                <TextInput
+                  ref={(ref) => {
+                    if (focusableInputIndex.current !== position) return;
+                    focusableInputIndex.current = undefined;
+                    ref?.focus();
+                  }}
+                  placeholder="Variant option (e.g. Primary)"
+                  value={variant}
+                  onValueChange={(newVariant) =>
+                    onVariantsChange(
+                      variants?.map((variant, index) =>
+                        index === position ? newVariant : variant,
+                      ),
+                    )
+                  }
+                />
+              </Box>
+              {deleteButtonShown && (
+                <IconButton
+                  type="button"
+                  icon="delete"
+                  onClick={() =>
+                    onVariantsChange(
+                      variants?.filter((_, index) => index !== position),
+                    )
+                  }
+                />
+              )}
+            </Box>
+          ))}
+          {addButtonShown && (
+            <Box>
+              <Button
+                invisible
+                startIcon="add"
+                onClick={() => {
+                  focusableInputIndex.current = variants?.length;
+                  onVariantsChange([...(variants ?? []), ""]);
+                }}
+              >
+                Add option
+              </Button>
+            </Box>
+          )}
+        </Box>
+      )}
+      <Box backgroundColor="white" flexDirection="column" padding={12}>
+        <Text variant="normal" color="grey11">
+          Need additional properties similar to "Variants"?{" "}
+          <a
+            href="https://community.prismic.io/t/link-field-use-cases-share-your-requests-and-feedback/18146"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "inherit", textDecoration: "underline" }}
+          >
+            Please provide your feedback here.
+          </a>
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/legacy/lib/models/common/widgets/Link/index.ts CHANGED Viewed

@@ -78,6 +78,9 @@ export const linkConfigSchema = yup
     allowTargetBlank: yup.boolean().strict().optional(),
     allowText: yup.boolean().strict().optional(),
     repeat: yup.boolean().strict().optional(),
+    variants: yup
+      .array(yup.string().trim().required("Values can't be empty"))
+      .optional(),
   })
   .required()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

package/src/legacy/lib/models/common/widgets/LinkToMedia/Form.jsx CHANGED Viewed

@@ -1,9 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { Box } from "@prismicio/editor-ui";
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
 import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
 import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { DisplayTextCheckbox } from "../Link/components";
+import { Variants } from "../Link/Form";
 const FormFields = {
   ...DefaultFields,
@@ -15,11 +20,11 @@ const Form = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const {
-    config: { allowText },
+    config: { allowText, variants },
   } = formValues;
   return (
-    <>
+    <Box flexDirection="column" gap={16}>
       <FlexGrid>
         {Object.entries(FormFields).map(([key, field]) => (
           <Col key={key}>
@@ -40,7 +45,8 @@ const Form = (props) => {
           setFieldValue={setFieldValue}
         />
       </FlexGrid>
-    </>
+      <Variants variants={variants} setFieldValue={setFieldValue} />
+    </Box>
   );
 };

package/src/legacy/lib/models/common/widgets/LinkToMedia/index.ts CHANGED Viewed

@@ -41,7 +41,6 @@ export const LinkToMediaWidget: Widget<Link, typeof schema> = {
       placeholder: "",
       select: "media",
       allowText: true,
-      repeat: false,
     },
   }),
   TYPE_NAME: "Link",

package/src/utils/tracking/trackFieldAdded.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export function trackFieldAdded(args: TrackFieldAddedArgs) {
     ...(field.type === "Link" && {
       allowText: field.config?.allowText,
       repeat: field.config?.repeat,
+      variants: field.config?.variants,
     }),
   });
 }

package/out/_next/static/chunks/150-902bd1ee3468dd05.js DELETED Viewed

@@ -1 +0,0 @@

- (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[150],{9150:function(e,t,l){"use strict";l.d(t,{H:function(){return e4}});var i=l(52322),n=l(7729),a=l(97729),r=l.n(a),o=l(5632),s=l(2784),c=l(56580),d=l(23335),u=l(93216),m=l(6697),h=l(63447),x=l(5335),p=l(74217),v=l(93188),y=l(80546),f=l(43874),j=l(41067),b=l(77507);let g=(0,s.createContext)(void 0);function C(e){let{children:t,initialCustomType:l}=e,[n,a]=(0,s.useState)(l),r=(0,u.y6)(n),o=b.$[r],{actionQueueStatus:c,setNextAction:d}=(0,f.c)({errorMessage:o.autoSaveFailed}),{saveCustomTypeSuccess:m}=(0,j.Z)(),h=(0,p.R9)(m),{syncChanges:x}=(0,y.g)(),C=(0,s.useCallback)((e,t)=>{a(e),d(async()=>{let{errors:l}=await (0,v.KA)(e);if(l.length>0)throw l;h(e),x(),null==t||t()})},[d,h,x]),S=(0,s.useMemo)(()=>({actionQueueStatus:c,customType:n,setCustomType:C}),[c,n,C]);return(0,i.jsx)(g.Provider,{value:S,children:"function"==typeof t?t(S):t})}function S(){let e=(0,s.useContext)(g);if(!e)throw Error("CustomTypeProvider not found");return e}var I=l(30195);function T(){var e;let[t,l]=(0,s.useState)(!1),{customType:a,setCustomType:r}=S(),[o,c]=null!==(e=(0,u.j5)(a))&&void 0!==e?e:[],d=c?(0,u.N3)(c):"",[m,h]=(0,s.useState)(null!=d?d:""),[x,v]=(0,s.useState)();(0,p.pQ)(t,()=>{t||(h(null!=d?d:""),v(void 0))});let y=(0,s.useCallback)(()=>(0,i.jsx)(n.JO$,{name:c?"language":"add",size:"small",color:"grey11"}),[c]);return(0,i.jsxs)(n.VqE,{open:t,onOpenChange:l,size:"small",trigger:(0,i.jsx)(n.zxk,{color:"grey",textColor:"placeholder",textWeight:"normal",renderStartIcon:y,sx:{marginInline:"auto"},children:c?d:"Add an UID"}),children:[(0,i.jsx)(n.fKu,{title:"Edit the UID label"}),(0,i.jsx)(n.cZJ,{children:(0,i.jsxs)(n.l09,{onSubmit:function(){x||(r(c?(0,u.eK)(m,a):(0,u.H8)(m,a)),l(!1))},children:[(0,i.jsx)(n.xuv,{flexDirection:"column",padding:16,gap:4,children:(0,i.jsx)(n.ytj,{type:"text",label:"Label *",placeholder:"UID",value:m,onValueChange:function(e){h(e),v(function(e){let t=w.safeParse(e,{errorMap:k});if(t.error)return t.error.errors[0].message}(e))},error:x,description:"A label for the UID"})}),(0,i.jsxs)(n.kXR,{children:[(0,i.jsx)(n.POh,{size:"medium"}),(0,i.jsx)(n._dX,{size:"medium",disabled:!!x,children:"Save"})]})]})})]})}let w=I.z.string().max(35).min(1),k=e=>{switch(e.code){case I.z.ZodIssueCode.too_big:return{message:"The label can't be longer than ".concat(e.maximum," characters")};case I.z.ZodIssueCode.too_small:return{message:"This field is required"};default:return{message:"Invalid value"}}};var _=l(95799),D=l(1490),N=l(63397),E=l(75289);let M=e=>{let{name:t,label:l,placeholder:n,error:a,...r}=e;return(0,i.jsxs)(E.xu,{mb:3,children:[(0,i.jsx)(E.__,{htmlFor:t,mb:2,children:l}),(0,i.jsx)(N.gN,{name:t,type:"text",placeholder:n,as:E.II,autoComplete:"off",...r}),a?(0,i.jsx)(E.xv,{sx:{color:"error",mt:1},children:a}):null]})};var A=e=>{let{isOpen:t,onSubmit:l,close:n,tabIds:a}=e;return(0,i.jsx)(D.Z,{isOpen:t,widthInPx:"530px",formId:"create-tab",close:n,onSubmit:e=>{l(e),n()},initialValues:{id:""},validate:e=>{let{id:t}=e;return t?a.includes(t.toLowerCase())?{id:"Tab exists already"}:void 0:{id:"Tab ID is required"}},content:{title:"Add Tab"},children:e=>{let{errors:t}=e;return(0,i.jsx)(M,{name:"id",label:"New Tab ID",placeholder:"A label for selecting the tab (i.e. not used in the API)",error:t.id})}})},Z=e=>{let{isOpen:t,onSubmit:l,close:n}=e;return(0,i.jsx)(D.Z,{omitFooter:!0,isOpen:t,widthInPx:"530px",formId:"create-tab",close:n,cardProps:{bodySx:{p:0}},onSubmit:e=>{l(e),n()},initialValues:{},content:{title:"Remove Tab"},children:()=>(0,i.jsxs)(E.xu,{sx:{px:4,py:4},children:[(0,i.jsx)(E.X6,{as:"h4",children:"Remove this tab?"}),(0,i.jsx)(E.xv,{as:"p",color:"textClear",sx:{mt:2},children:"This action cannot be undone."}),(0,i.jsx)(E.zx,{type:"button",variant:"buttons.actionDelete",sx:{mt:3},onClick:()=>{l({}),n()},children:"Yes, remove tab"})]})})},O=e=>{let{isOpen:t,onSubmit:l,close:n,tabIds:a,initialTabKey:r}=e;return(0,i.jsx)(D.Z,{omitFooter:!0,isOpen:t,widthInPx:"530px",formId:"create-tab",close:n,cardProps:{bodySx:{p:0}},onSubmit:e=>{l(e),n()},initialValues:{id:r},validate:e=>{let{id:t}=e;return t?a.includes(t.toLowerCase())?{id:"Tab exists already"}:void 0:{id:"Tab ID is required"}},content:{title:"Rename Tab"},children:e=>{let{errors:t,values:a,setFieldValue:r,isValid:o}=e;return(0,i.jsxs)(E.xu,{sx:{px:4,py:4},children:[(0,i.jsx)(M,{name:"id",label:"Rename Tab ID",placeholder:"A label for selecting the tab (i.e. not used in the API)",error:t.id,onBlur:e=>{a.id!==e.target.value&&r("id",e.target.value.trim())},onChange:e=>{r("id",e.target.value)}}),(0,i.jsx)(E.zx,{type:"button",sx:{mt:3,width:"100%"},disabled:!o,onClick:()=>{a.id&&a.id.length&&l({id:a.id.trim()}),n()},children:"Save"})]})}})},V=l(28316),z=l(88932),F=l(80775),L=l(30988),P=l(67875),K=l(85357),H=l(99510),R=l(50268),X=l(64602),U=l(47655),B=l(65077),$=l(28574);let J=e=>(0,i.jsxs)("svg",{width:"127",height:"98",viewBox:"0 0 127 98",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,i.jsx)("path",{d:"M73.5 44.5H85",stroke:"#17151F",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M35 68.5H40.5H92C93.1046 68.5 94 67.6046 94 66.5V39C94 37.8954 93.1046 37 92 37H35C33.8954 37 33 37.8954 33 39V66.5C33 67.6046 33.8954 68.5 35 68.5Z",fill:"#F4F2F4",stroke:"#17151F"}),(0,i.jsx)("path",{d:"M38 60.5H41.0381H89C89.5523 60.5 90 60.0523 90 59.5V52C90 51.4477 89.5523 51 89 51H38C37.4477 51 37 51.4477 37 52V59.5C37 60.0523 37.4477 60.5 38 60.5Z",fill:"#6E56CF",stroke:"#17151F"}),(0,i.jsx)("circle",{cx:"89.5",cy:"44.5",r:"0.5",fill:"#17151F"}),(0,i.jsx)("path",{d:"M40.5 97.5V56H86V97.5H40.5Z",fill:"#F9F8F9",stroke:"#17151F"}),(0,i.jsx)("rect",{x:"47",y:"75",width:"33",height:"16",fill:"#E4E2E4"}),(0,i.jsx)("path",{d:"M48 57H52V70C52 71.1046 51.1046 72 50 72V72C48.8954 72 48 71.1046 48 70V57Z",fill:"#E4E2E4"}),(0,i.jsx)("path",{d:"M55 57H59V70C59 71.1046 58.1046 72 57 72V72C55.8954 72 55 71.1046 55 70V57Z",fill:"#E4E2E4"}),(0,i.jsx)("path",{d:"M62 57H66V70C66 71.1046 65.1046 72 64 72V72C62.8954 72 62 71.1046 62 70V57Z",fill:"#E4E2E4"}),(0,i.jsx)("line",{x1:"0.353553",y1:"35.9856",x2:"15.5467",y2:"51.1787",stroke:"#C8C7CB"}),(0,i.jsx)("line",{x1:"42.1959",y1:"0.87059",x2:"47.7569",y2:"21.6248",stroke:"#C8C7CB"}),(0,i.jsx)("line",{x1:"99.5522",y1:"8.4091",x2:"87.2281",y2:"26.0097",stroke:"#C8C7CB"}),(0,i.jsx)("line",{x1:"126.408",y1:"41.0849",x2:"108.807",y2:"53.4089",stroke:"#C8C7CB"}),(0,i.jsx)("path",{d:"M39.8713 47C38.7657 47 38.0627 46.4554 38.0033 45.6337L38 45.5875H38.8251L38.8284 45.6205C38.868 46.0198 39.2937 46.2838 39.8977 46.2838C40.4719 46.2838 40.8746 46 40.8746 45.5908V45.5875C40.8746 45.2442 40.6271 45.0363 40.0132 44.9043L39.5017 44.7987C38.5281 44.5941 38.1056 44.1386 38.1056 43.429V43.4257C38.1056 42.5743 38.8383 42 39.868 42C40.9241 42 41.5809 42.5776 41.6403 43.3432L41.6436 43.3861H40.8284L40.8218 43.3465C40.7624 42.9769 40.4092 42.7129 39.8647 42.7162C39.3366 42.7162 38.9604 42.9637 38.9604 43.3696V43.3729C38.9604 43.7096 39.2013 43.9208 39.7954 44.0462L40.3069 44.1551C41.3102 44.3663 41.7294 44.769 41.7294 45.4884V45.4917C41.7294 46.4191 41.0132 47 39.8713 47Z",fill:"black"}),(0,i.jsx)("path",{d:"M42.6865 46.8812V42.1188H43.6634L45.0957 45.7822H45.1518L46.5809 42.1188H47.5578V46.8812H46.7921V43.495H46.7327L45.4125 46.8812H44.8317L43.5116 43.495H43.4554V46.8812H42.6865Z",fill:"black"})]}),G=e=>{let{openCreateSliceModal:t,openUpdateSliceZoneModal:l,openSlicesTemplatesModal:a,projectHasAvailableSlices:r,isSlicesTemplatesSupported:o}=e;return(0,i.jsx)(n.xuv,{flexGrow:1,justifyContent:"center","data-testid":"slice-zone-blank-slate",children:(0,i.jsx)($.R$,{backgroundImage:"/blank-slate-slice-zone.png",children:(0,i.jsxs)($.T9,{children:[(0,i.jsx)(n.xuv,{justifyContent:"center",padding:{bottom:16},children:(0,i.jsx)(J,{})}),(0,i.jsx)($._T,{children:"Add slices"}),(0,i.jsx)($.nf,{children:"Slices are website sections that you can reuse on different pages with different content. Each slice has its own component in your code."}),(0,i.jsx)($.Qj,{children:(0,i.jsxs)(n.S0S,{children:[(0,i.jsx)(n.F8s,{startIcon:"add",onClick:t,description:"Start from scratch.",children:"Create new"}),o?(0,i.jsx)(n.F8s,{startIcon:"contentCopy",onClick:a,description:"Select from premade examples.",endAdornment:(0,i.jsx)(n.Cts,{color:"purple",title:"New"}),children:"Use template"}):void 0,r?(0,i.jsx)(n.F8s,{startIcon:"folder",onClick:l,description:"Select from your own slices.",children:"Select existing"}):void 0]})})]})})})};var Q=l(65856);function Y(e){let{customType:t,tabId:l,slices:i}=e,n={...t};return i.forEach(e=>{n={...n,tabs:n.tabs.map(t=>t.key===l&&t.sliceZone?{...t,sliceZone:{key:t.sliceZone.key,value:[{key:e.id,value:e},...t.sliceZone.value]}}:t)}}),v.Xe.track({event:"custom-type:slice-zone-updated",customTypeId:t.id}),n}var q=l(18566),W=l(70647);async function ee(){try{let{templates:e,errors:t}=await W.managerClient.sliceTemplateLibrary.readLibrary({});if(t.length>0)throw t;return e.map(e=>({model:e.model,screenshots:Object.fromEntries(Object.entries(e.screenshots).map(e=>{let[t,l]=e;return[t,URL.createObjectURL(l)]}))}))}catch(e){return[]}}var et=l(17889),el=l(91133),ei=l(68916),en=l(47861),ea=l(76805),er=l(11104);let eo=e=>{let{deleteSliceZone:t,closeDeleteSliceZoneModal:l}=e;return(0,i.jsx)(er.Z,{isOpen:!0,shouldCloseOnOverlayClick:!0,style:{content:{maxWidth:612}},onRequestClose:l,children:(0,i.jsx)(ea.Z,{bodySx:{p:0,bg:"white",position:"relative",height:"100%",padding:16},footerSx:{position:"sticky",bottom:0,p:0},sx:{border:"none",overflow:"hidden"},borderFooter:!0,Header:(0,i.jsxs)(E.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))}},children:[(0,i.jsx)(E.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:"Do you really want to delete Slice Zone?"}),(0,i.jsx)(E.x8,{type:"button",onClick:l})]}),Footer:()=>(0,i.jsxs)(E.kC,{sx:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.darkBorders))},backgroundColor:"gray"},children:[(0,i.jsx)(en.z,{label:"Cancel",variant:"secondary",onClick:l,sx:{mr:"10px",fontWeight:"bold",color:"grey12",borderRadius:6}}),(0,i.jsx)(en.z,{label:"Delete",variant:"danger",onClick:t,sx:{minHeight:39,minWidth:78}})]}),children:(0,i.jsx)(E.nv,{children:"You're about to delete Slice Zone."})})})};var es=l(61502),ec=l(80218),ed=l(3181),eu=l(99923),em=l(17766),eh=l.n(em);let ex=e=>{var t;let{isOpen:l,close:a,onSubmit:r,isLoading:o,slice:d,libraries:u}=e,{remoteSlices:m}=(0,c.v9)(e=>({remoteSlices:(0,ei.sT)(e)})),h={from:null===(t=u[0])||void 0===t?void 0:t.name,sliceName:(0,H.MP)(d.key)},[x,v]=(0,s.useState)(h),[y,f]=(0,s.useState)();function j(e){v(e),f((0,eu.h)(e,u,m))}return(0,p.pQ)(l,()=>{l||(v(h),f(void 0))}),(0,i.jsxs)(n.VqE,{open:l,onOpenChange:e=>!e&&a(),size:{width:448,height:"auto"},children:[(0,i.jsx)(n.fKu,{title:"Upgrade slice"}),(0,i.jsx)(n.cZJ,{children:(0,i.jsx)(n.l09,{onSubmit:function(){y&&Object.keys(y).length>0||r({libraryID:x.from,sliceID:x.sliceName})},children:(0,i.jsxs)(n.xuv,{flexDirection:"column",children:[(0,i.jsxs)(n.xrM,{className:eh().scrollArea,children:[(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"This will create a new slice with the same fields. The new slice will replace the legacy slice in all of your types, and the existing slice content will be re-mapped to the new slice."}),(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"This will not migrate your component. You will need to do that manually."}),(0,i.jsxs)(n.xuv,{flexDirection:"column",gap:4,children:[(0,i.jsx)(n.ytj,{label:"Slice name *",placeholder:"Pascalised Slice API ID (e.g. ".concat((0,H.MP)(d.key),")"),error:null==y?void 0:y.sliceName,value:x.sliceName,onValueChange:e=>j({...x,sliceName:e.slice(0,30)}),"data-testid":"slice-name-input"}),(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"A display name for the slice"})]}),(0,i.jsxs)(n.xuv,{flexDirection:"column",gap:4,children:[(0,i.jsx)("label",{className:eh().label,children:(0,i.jsx)(n.xvT,{variant:"bold",children:"Slice library *"})}),(0,i.jsx)(n.PhF,{size:"medium",color:"grey",startIcon:"folder",flexContent:!0,value:x.from,onValueChange:e=>{e&&j({...x,from:e})},children:u.map(e=>(0,i.jsx)(n.QlF,{value:e.name,children:e.name},e.name))}),(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"The library where we'll store your slice"})]})]}),(0,i.jsxs)(n.kXR,{children:[(0,i.jsx)(n.POh,{size:"medium"}),(0,i.jsx)(n._dX,{size:"medium",loading:o,disabled:y&&Object.keys(y).length>0,children:"Upgrade"})]})]})})})]})};var ep=l(96009),ev=l.n(ep);let ey=e=>{var t,l;let{isOpen:a,close:r,onSubmit:o,isLoading:c,slice:d,sliceName:u,libraries:m,localSharedSlices:h}=e,x={libraryID:null===(t=h[0])||void 0===t?void 0:t.from,sliceID:null===(l=h[0])||void 0===l?void 0:l.model.id,variationID:ev()(d.key),variationName:u},[v,y]=(0,s.useState)(!0),[f,j]=(0,s.useState)(x),[b,g]=(0,s.useState)({});function C(e){j(e),g(ef(e,m))}return(0,p.pQ)(a,()=>{a||(j(x),g({}))}),(0,i.jsxs)(n.VqE,{open:a,onOpenChange:e=>!e&&r(),size:{width:448,height:"auto"},children:[(0,i.jsx)(n.fKu,{title:"Convert to slice variation"}),(0,i.jsx)(n.cZJ,{children:(0,i.jsx)(n.l09,{onSubmit:function(){Object.keys(b).length>0||o(f)},children:(0,i.jsxs)(n.xuv,{display:"flex",flexDirection:"column",children:[(0,i.jsxs)(n.xrM,{className:eh().scrollArea,children:[(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"If you have multiple slices that are similar, you can combine them as variations of the same slice."}),(0,i.jsxs)(n.xuv,{display:"flex",flexDirection:"column",gap:4,children:[(0,i.jsxs)("label",{className:eh().label,children:[(0,i.jsx)(n.xvT,{variant:"bold",children:"Target slice *"}),"string"==typeof b.libraryID?(0,i.jsx)(n.xvT,{variant:"small",color:"tomato10",children:b.libraryID}):null,"string"==typeof b.sliceID?(0,i.jsx)(n.xvT,{variant:"small",color:"tomato10",children:b.sliceID}):null]}),(0,i.jsx)(n.PhF,{size:"medium",color:"grey",startIcon:"viewDay",flexContent:!0,value:"".concat(f.libraryID,"::").concat(f.sliceID),onValueChange:e=>{if(e){let[t,l]=e.split("::");C({...f,libraryID:t,sliceID:l})}},children:h.map(e=>(0,i.jsxs)(n.QlF,{value:"".concat(e.from,"::").concat(e.model.id),children:[e.from," ",">"," ",e.model.name," (",e.model.id,")"]},"".concat(e.from,"::").concat(e.model.id)))}),(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"Choose the slice to which you would like to add this variation."})]}),(0,i.jsx)(n.xuv,{display:"flex",flexDirection:"column",gap:4,children:(0,i.jsx)(n.ytj,{label:"Variation name *",placeholder:u,error:b.variationName,value:f.variationName,onValueChange:e=>{let t={...f,variationName:e.slice(0,30)};v&&(t.variationID=ev()(t.variationName)),C(t)},"data-testid":"variation-name-input"})}),(0,i.jsx)(n.xuv,{display:"flex",flexDirection:"column",gap:4,children:(0,i.jsx)(n.ytj,{label:"ID *",placeholder:ev()(d.key),error:b.variationID,value:f.variationID,onValueChange:e=>{y(!1),C({...f,variationID:e.slice(0,30)})},"data-testid":"variation-id-input"})})]}),(0,i.jsxs)(n.kXR,{children:[(0,i.jsx)(n.POh,{size:"medium"}),(0,i.jsx)(n._dX,{size:"medium",loading:c,disabled:Object.keys(b).length>0,children:"Convert"})]})]})})})]})},ef=(e,t)=>{let l={};e.libraryID||(l.libraryID="Cannot be empty.");let i=t.find(t=>t.path===e.libraryID);l.libraryID||i||(l.libraryID="Does not exist."),e.sliceID||(l.sliceID="Cannot be empty.");let n=null==i?void 0:i.components.find(t=>t.model.id===e.sliceID);if(l.sliceID||n||(l.sliceID="Does not exist."),e.variationName||(l.variationName="Cannot be empty."),e.variationID){var a;(null!==(a=null==n?void 0:n.model.variations.map(e=>e.id))&&void 0!==a?a:[]).includes(e.variationID)&&(l.variationID="Slice variation ID is already taken.")}else l.variationID="Cannot be empty.";return l},ej=e=>{var t,l;let{isOpen:a,close:r,onSubmit:o,isLoading:c,identicalSlices:d}=e,u=null!==(l=null===(t=d[0])||void 0===t?void 0:t.path)&&void 0!==l?l:"",[m,h]=(0,s.useState)(u),[x,v]=(0,s.useState)();return(0,p.pQ)(a,()=>{a||(h(u),v(void 0))}),(0,i.jsxs)(n.VqE,{open:a,onOpenChange:e=>!e&&r(),size:{width:448,height:"auto"},children:[(0,i.jsx)(n.fKu,{title:"Merge with an existing slice"}),(0,i.jsx)(n.cZJ,{children:(0,i.jsx)(n.l09,{onSubmit:function(){if(x)return;let[e,t,l]=m.split("::");o({libraryID:e,sliceID:t,variationID:l})},children:(0,i.jsxs)(n.xuv,{display:"flex",flexDirection:"column",children:[(0,i.jsxs)(n.xrM,{className:eh().scrollArea,children:[(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"If you have multiple identical slices, you can merge them. All of your content will be remapped to the target slice."}),(0,i.jsxs)(n.xuv,{display:"flex",flexDirection:"column",gap:4,children:[(0,i.jsxs)("label",{className:eh().label,children:[(0,i.jsx)(n.xvT,{variant:"bold",children:"Target slice*"}),"string"==typeof x?(0,i.jsx)(n.xvT,{variant:"small",color:"tomato10",children:x}):null]}),(0,i.jsx)(n.PhF,{size:"medium",color:"grey",startIcon:"viewDay",flexContent:!0,value:m,onValueChange:function(e){h(e),e||v("Cannot be empty.")},children:d.map(e=>(0,i.jsx)(n.QlF,{value:e.path,children:e.path.split("::").join(" > ")},e.path))}),(0,i.jsx)(n.xvT,{variant:"normal",color:"grey11",children:"Choose a slice that you would like to merge this into."})]})]}),(0,i.jsxs)(n.kXR,{children:[(0,i.jsx)(n.POh,{size:"medium"}),(0,i.jsx)(n._dX,{size:"medium",loading:c,disabled:!!x,children:"Merge"})]})]})})})]})},eb=e=>{var t;let{slice:l,path:a}=e,{refreshState:r}=(0,j.Z)(),[o,d]=(0,s.useState)(!1),[u,m]=(0,s.useState)(),{setCustomType:h}=S(),{libraries:x}=(0,c.v9)(e=>({libraries:(0,ei.Sd)(e)})),p="Slice"===l.value.type&&null!==(t=l.value.fieldset)&&void 0!==t?t:l.key,y=x.filter(e=>e.isLocal),f=y.map(e=>e.components).flat(),b=eg(l,p,f),g=async e=>{var t,i,n;if(!u)return;d(!0),v.Xe.track({event:"legacy-slice:converted",id:e.sliceID,variation:null!==(t=e.variationID)&&void 0!==t?t:"default",library:e.libraryID,conversionType:u});let{errors:o}=await W.managerClient.slices.convertLegacySliceToSharedSlice({model:l.value,src:{...a,sliceID:l.key},dest:{libraryID:e.libraryID,sliceID:e.sliceID,variationName:null!==(i=e.variationName)&&void 0!==i?i:"Default",variationID:null!==(n=e.variationID)&&void 0!==n?n:"default"}});if(o.length)throw console.error("Could not convert slice `".concat(p,"`"),o),z.Am.error("Could not convert slice `".concat(p,"`")),o;let{model:s,errors:c}=await W.managerClient.customTypes.readCustomType({id:a.customTypeID});if(c.length||!s){console.error("Could not refresh custom type view `".concat(a.customTypeID,"`"),c),z.Am.error("Could not refresh custom type view `".concat(a.customTypeID,"`"));return}switch(r(await (0,v.y0)()),d(!1),m(void 0),u){case"as_new_slice":z.Am.success("".concat(p," has been upgraded to a new slice ").concat(e.libraryID," > ").concat(e.sliceID));break;case"as_new_variation":z.Am.success("".concat(p," has been converted as a variation of ").concat(e.libraryID," > ").concat(e.sliceID));break;default:z.Am.success("".concat(p," has been merged with ").concat(e.libraryID," > ").concat(e.sliceID))}h(s)},C={path:a,slice:l,sliceName:p,libraries:y,localSharedSlices:f,identicalSlices:b,close:()=>m(void 0),onSubmit:g,isLoading:o};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h_2,{children:[(0,i.jsx)(n.$FS,{children:(0,i.jsx)(n.zxk,{"data-testid":"convert-legacy-slice",startIcon:"refresh",endIcon:"arrowDropDown",size:"medium",color:"grey",children:"Migrate legacy slice"})}),(0,i.jsxs)(n.AWV,{align:"start",children:[(0,i.jsx)(n.Xiv,{startIcon:(0,i.jsx)(n.JO$,{name:"folder",size:"large"}),description:"Use it with new types",onSelect:()=>m("as_new_slice"),children:"Upgrade slice"}),(0,i.jsx)(n.Xiv,{startIcon:(0,i.jsx)(n.JO$,{name:"viewDay",size:"large"}),description:"Add it to another slice",onSelect:()=>m("as_new_variation"),disabled:!f.length,children:"Convert to slice variation"}),(0,i.jsx)(n.Xiv,{startIcon:(0,i.jsx)(n.JO$,{name:"driveFileMove",size:"large"}),description:"Combine identical slices",onSelect:()=>m("merge_with_identical"),disabled:!b.length,children:"Merge with another slice"})]})]}),(0,i.jsx)(ex,{...C,isOpen:"as_new_slice"===u}),(0,i.jsx)(ey,{...C,isOpen:"as_new_variation"===u}),(0,i.jsx)(ej,{...C,isOpen:"merge_with_identical"===u})]})},eg=(e,t,l)=>(0,s.useMemo)(()=>{let i=[],n=(0,ed.ux)(e.value,t);for(let e of l)for(let t of e.model.variations){let l=(0,ed.ux)(t,e.model.name);n.primary===l.primary&&n.items===l.items&&i.push({libraryID:e.from,sliceID:e.model.id,variationID:t.id,path:"".concat(e.from,"::").concat(e.model.id,"::").concat(t.id)})}return i},[e,t,l]),eC=e=>{let{slice:t,path:l}=e,[a]=(0,es.E)("legacySliceUpgrader"),r=a.enabled?"This Slice was created with the Legacy Builder. It needs to be converted first to be used within Slice Machine.":"This Slice was created with the Legacy Builder, and is incompatible with Slice Machine. You cannot edit, push, or delete it in Slice Machine. In order to proceed, manually remove the Slice from your type model. Then create a new Slice with the same fields using Slice Machine.";return(0,i.jsxs)(ec.Zb,{children:[(0,i.jsx)(ec.ZB,{component:"div",children:(0,i.jsx)(n.xuv,{alignItems:"center",justifyContent:"center",children:(0,i.jsx)(n.xvT,{color:"grey11",component:"span",children:"No screenshot available"})})}),(0,i.jsxs)(ec.T$,{children:[(0,i.jsx)(n.ua7,{content:r,side:"bottom",children:(0,i.jsx)(n.Cts,{color:"purple",title:"Legacy Slice"})}),a.enabled?(0,i.jsx)(eb,{slice:t,path:l}):null]}),(0,i.jsx)(ec.eW,{subtitle:"1 variation",title:(0,ed.Dj)(t.value)})]})};var eS=l(53850),eI=l(42849);let eT=e=>{let{slices:t,format:l,path:n,onRemoveSharedSlice:a}=e,r=t.some(e=>"SharedSlice"!==e.type),o=b.$[l],[c]=(0,es.E)("legacySliceUpgrader");return(0,s.useEffect)(()=>{r&&(c.enabled?z.Am.info("This ".concat(o.name({start:!1,plural:!1})," contains legacy slices that can be upgraded.")):z.Am.warning("This ".concat(o.name({start:!1,plural:!1})," contains slices that are incompatible.")))},[r]),(0,i.jsx)(eI.Z,{elems:t,defineElementKey:e=>"SharedSlice"!==e.type?e.payload.key:e.payload.model.name,renderElem:e=>{if("SharedSlice"!==e.type){let t=e.payload;return(0,i.jsx)(eC,{slice:t,path:n})}{let t=e.payload;return(0,i.jsx)(eS.b,{action:{type:"remove",onRemove:()=>{a(t.model.id)}},mode:"navigation",slice:t,variant:"solid"})}},sx:{padding:"16px"}})};async function ew(e){try{let{templateIDs:t,localLibrariesNames:l,onSuccess:i}=e,{data:n,errors:a}=await W.managerClient.sliceTemplateLibrary.createSlices({templateIDs:t});if(a.length>0||void 0===n)throw a;n.sliceIDs.forEach((e,i)=>{v.Xe.track({event:"slice:created",id:e,name:e,library:l[0],sliceTemplate:t[i]})}),await i(n.sliceIDs)}catch(t){let e="Internal Error: Slice(s) not created";console.error(e,t),z.Am.error(e)}}var ek=l(80410);let e_=[{extension:"",fileName:"",from:"",href:"",pathToSlice:"",model:{id:"video_highlights",name:"VideoHighlights",type:"SharedSlice",variations:[{description:"",docURL:"",id:"default",name:"Default",version:"sktwi1xtmkfgx8626"}]},screenshots:{default:{url:"/videoHighlights.png"}}}];var eD=e=>{let{availableSlices:t,values:l,placeholderSlices:n}=e;return(0,i.jsx)(N.F2,{name:"sliceKeys",render:e=>(0,i.jsx)(eI.Z,{gridTemplateMinPx:"200px",elems:t,defineElementKey:e=>"".concat(e.from,"-").concat(e.model.name),renderElem:t=>{var a;let r=null!==(a=null==n?void 0:n.some(e=>e.model.id===t.model.id))&&void 0!==a&&a,o=l.sliceKeys.includes(t.model.id);return(0,i.jsx)(eS.b,{action:{type:"checkbox"},isComingSoon:r,mode:"selection",onSelectedChange:i=>{i?e.push(t.model.id):e.remove(l.sliceKeys.indexOf(t.model.id))},selected:o,slice:t,variant:"outlined"})}})})};let eN=e=>{let{formId:t,close:l,onSuccess:n,availableSlicesTemplates:a,localLibraries:r}=e,{createSliceSuccess:o}=(0,j.Z)();return(0,i.jsx)(D.Z,{isOpen:!0,buttonLabel:"Add",formId:t,close:l,onSubmit:e=>{let{sliceKeys:t}=e;ew({templateIDs:t,localLibrariesNames:r.map(e=>e.name),onSuccess:async e=>{o((await (0,v.y0)()).libraries),n(await Promise.all(e.map(async e=>(await W.managerClient.slices.readSlice({libraryID:r[0].name,sliceID:e})).model).filter(e=>void 0!==e)))}})},initialValues:{sliceKeys:[]},content:{title:"Use template slices"},validate:e=>{if(0===e.sliceKeys.length)return{sliceKeys:"Select at least one template to add"}},actionMessage:e=>{let{errors:t}=e;return void 0!==t.sliceKeys?(0,i.jsx)(E.xv,{sx:{color:"error"},children:t.sliceKeys}):void 0},children:e=>{let{values:t}=e;return(0,i.jsx)(eD,{values:t,placeholderSlices:e_,availableSlices:[...a.map(e=>({extension:"",fileName:"",from:"",href:"",pathToSlice:"",model:ek.id.toSM(e.model),screenshots:Object.entries(e.screenshots).reduce((e,t)=>({...e,[t[0]]:{url:t[1]}}),{})})),...e_]})}})};var eE=e=>{let{formId:t,close:l,onSubmit:n,availableSlices:a}=e;return(0,i.jsx)(D.Z,{isOpen:!0,buttonLabel:"Add",formId:t,close:l,onSubmit:e=>{let{sliceKeys:t}=e;n(t.map(e=>{var t;return null===(t=a.find(t=>t.model.id===e))||void 0===t?void 0:t.model}).filter(e=>void 0!==e))},initialValues:{sliceKeys:[]},content:{title:"Select existing slices"},testId:"update-slices-modal",validate:e=>{if(0===e.sliceKeys.length)return{sliceKeys:"Select at least one slice to add"}},actionMessage:e=>{let{errors:t}=e;return void 0!==t.sliceKeys?(0,i.jsx)(E.xv,{sx:{color:"error"},children:t.sliceKeys}):void 0},children:e=>{let{values:t}=e;return(0,i.jsx)(eD,{values:t,availableSlices:a})}})};let eM=(e,t)=>{let l=(t||[]).reduce((e,t)=>[...e,...t.components],[]),{slicesInSliceZone:i,notFound:n}=e.value.reduce((e,t)=>{let{key:i,value:n}=t;if("SharedSlice"===n.type){let t=l.find(e=>e.model.id===i);return t?{...e,slicesInSliceZone:[...e.slicesInSliceZone,{type:"SharedSlice",payload:t}]}:{...e,notFound:[...e.notFound,{key:i}]}}return{...e,slicesInSliceZone:[...e.slicesInSliceZone,{type:"Slice",payload:{key:i,value:n}}]}},{slicesInSliceZone:[],notFound:[]});return{availableSlices:l,slicesInSliceZone:i,notFound:n}};var eA=e=>{var t;let{customType:l,onCreateSliceZone:a,onDeleteSliceZone:r,onRemoveSharedSlice:o,sliceZone:d,tabId:u}=e,m=(0,q.QT)(ee,[]),[h,x]=(0,s.useState)(!1),[p,y]=(0,s.useState)(!1),[f,j]=(0,s.useState)(!1),{remoteSlices:b,libraries:g}=(0,c.v9)(e=>({remoteSlices:(0,ei.sT)(e),libraries:(0,ei.Sd)(e),slices:(0,ei.xC)(e)})),{setCustomType:C}=S(),{completeStep:I}=(0,Q.k)(),T=g.filter(e=>e.isLocal),{availableSlices:w,slicesInSliceZone:k,notFound:D}=(0,s.useMemo)(()=>d?eM(d,g):{availableSlices:[],slicesInSliceZone:[],notFound:[]},[d,g]),[N,E]=(0,s.useState)(!1);(0,s.useEffect)(()=>{(null==D?void 0:D.length)&&D.forEach(e=>{let{key:t}=e;o(t)})},[D]);let M=k.filter(e=>"SharedSlice"===e.type).map(e=>e.payload),A=w.filter(e=>!M.some(t=>t.model.id===e.model.id)),Z=()=>{y(!0)},O=()=>{j(!0)},V=()=>{x(!0),v.Xe.track({event:"custom-type:open-add-from-templates",customTypeId:l.id,customTypeFormat:l.format})},L=()=>{y(!1)},P=()=>{j(!1)},K=()=>{x(!1)};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(F.Bu,{actions:d?(0,i.jsxs)(n.h_2,{children:[(0,i.jsx)(n.$FS,{children:(0,i.jsx)(n.zxk,{color:"purple",startIcon:"add","data-testid":"add-new-slice-dropdown",children:"Add"})}),(0,i.jsxs)(n.AWV,{align:"end",children:[(0,i.jsx)(n.Xiv,{startIcon:(0,i.jsx)(n.JO$,{name:"add",size:"large"}),onSelect:O,description:"Start from scratch.",children:"Create new"}),m.length>0?(0,i.jsx)(n.Xiv,{onSelect:V,startIcon:(0,i.jsx)(n.JO$,{name:"contentCopy",size:"large"}),description:"Select from premade examples.",endAdornment:(0,i.jsx)(n.xvT,{color:"inherit",component:"kbd",children:(0,i.jsx)(n.Cts,{color:"purple",title:"New"})}),children:"Use template"}):void 0,A.length>0?(0,i.jsx)(n.Xiv,{onSelect:Z,startIcon:(0,i.jsx)(n.JO$,{name:"folder",size:"large"}),description:"Select from your own slices.",children:"Select existing"}):void 0]})]}):void 0,toggle:"page"!==l.format||"Main"!==u?(0,i.jsx)(n.rsf,{checked:!!d,onCheckedChange:e=>{e?a():E(!0)},size:"small","data-testid":"slice-zone-switch"}):void 0,children:"Slices"}),d?k.length>0?(0,i.jsx)(B.xR,{children:(0,i.jsx)(eT,{slices:k,format:l.format,path:{customTypeID:l.id,tabID:u,sliceZoneID:null!==(t=null==d?void 0:d.key)&&void 0!==t?t:""},onRemoveSharedSlice:o})}):(0,i.jsx)(G,{openUpdateSliceZoneModal:Z,openCreateSliceModal:O,openSlicesTemplatesModal:V,projectHasAvailableSlices:A.length>0,isSlicesTemplatesSupported:m.length>0}):void 0,p&&(0,i.jsx)(eE,{formId:"tab-slicezone-form-".concat(u),availableSlices:A,onSubmit:e=>{let t=Y({customType:l,tabId:u,slices:e});C(_.Dc.fromSM(t),()=>{z.Am.success("Slice(s) added to slice zone")}),I("createSlice"),L()},close:L}),h&&(0,i.jsx)(eN,{formId:"tab-slicezone-form-".concat(u),availableSlicesTemplates:m,localLibraries:T,onSuccess:e=>{let t=Y({customType:l,tabId:u,slices:e});C(_.Dc.fromSM(t),()=>{z.Am.success((0,i.jsx)(el.GX,{message:"Slice template(s) added to slice zone and created at: ",path:"".concat(T[0].name,"/")}))}),I("createSlice"),K()},close:K}),N&&(0,i.jsx)(eo,{closeDeleteSliceZoneModal:()=>{E(!1)},deleteSliceZone:()=>{r(),E(!1)}}),(null==T?void 0:T.length)!==0&&f&&(0,i.jsx)(et.c,{onSuccess:e=>{let t=Y({customType:l,tabId:u,slices:[e]});C(_.Dc.fromSM(t),()=>{z.Am.success((0,i.jsx)(el.GX,{message:"New slice added to slice zone and created at: ",path:"".concat(T[0].name,"/")}))}),P()},localLibraries:T,remoteSlices:b,onClose:P})]})};let eZ=[P.C.UID,P.C.Image,P.C.Text,P.C.StructuredText,P.C.Link,P.C.Select,P.C.Boolean,P.C.Number,P.C.Color,P.C.Date,P.C.Embed,P.C.Timestamp,P.C.GeoPoint,P.C.ContentRelationship,P.C.LinkToMedia,P.C.Group,P.C.NestedGroup];var eO=e=>{var t,l,a,r;let{tabId:o}=e,{customType:c,setCustomType:d}=S(),m=_.Dc.toSM(c),h=null===(t=m.tabs.find(e=>e.key===o))||void 0===t?void 0:t.sliceZone,x=null!==(a=null===(l=m.tabs.find(e=>e.key===o))||void 0===l?void 0:l.value)&&void 0!==a?a:[],p="page"===m.format&&m.repeatable?x.filter(e=>"uid"!==e.key):x,v=m.tabs.reduce((e,t)=>[...e,...t.value],[]),y=e=>{var t;let{apiId:l,value:i}=e,n=null===(t=i.config)||void 0===t?void 0:t.label;if((0,K.Ss)(P.C,i.type)||null==n)return;if("Range"===i.type||"IntegrationFields"===i.type||"Separator"===i.type)throw Error("Unsupported Field Type: ".concat(i.type));let a=P.C[i.type];try{a.schema.validateSync(i,{stripUnknown:!1})}catch(e){throw Error('Add field: Model is invalid for field "'.concat(i.type,'".'))}let r=_.L$.fromSM(i);d((0,u.xS)({customType:c,newField:r,newFieldId:l,sectionId:o}),()=>{z.Am.success("".concat("Group"===i.type?"Group":"Field"," added"))}),(0,R.V)({id:l,field:r})},f=e=>{let{apiId:t,newKey:l,value:i,isNewGroupField:n}=e;if((0,K.Ss)(P.C,i.type))return;let a=_.L$.fromSM(i);d((0,u.L4)({customType:c,previousFieldId:t,newFieldId:l,newField:a,sectionId:o}),()=>{!0===n&&z.Am.success("Field added")})};return(0,i.jsx)(L.S,{children:(0,i.jsx)(s.Suspense,{fallback:(0,i.jsx)(n.xuv,{padding:32,children:(0,i.jsx)(n._3P,{})}),children:(0,i.jsxs)(F.aV,{border:!1,style:{flexGrow:1},children:[(0,i.jsx)(U.Z,{zoneType:"customType",zoneTypeFormat:null!==(r=c.format)&&void 0!==r?r:"custom",tabId:o,title:"Static zone",dataTip:"",fields:p,poolOfFieldsToCheck:v,showHints:!0,EditModal:X.Z,widgetsArray:eZ,onDeleteItem:e=>{d((0,u.AK)({customType:c,fieldId:e,sectionId:o}))},onSave:e=>""===e.apiId?y({...e,apiId:e.newKey}):f(e),onDragEnd:e=>{if((0,K.uS)(e))return;let{source:t,destination:l}=e;if(!l)return;let i=(0,u.gR)({customType:c,sourceIndex:t.index,destinationIndex:l.index,sectionId:o});(0,V.flushSync)(()=>d(i))},renderHintBase:e=>{let{item:t}=e;return"data".concat((0,H.Ti)(t.key))},renderFieldAccessor:e=>"data".concat((0,H.Ti)(e)),testId:"static-zone-content",isRepeatableCustomType:c.repeatable}),(0,i.jsx)(eA,{customType:m,tabId:o,sliceZone:h,onRemoveSharedSlice:e=>{d((0,u.EN)({customType:c,sectionId:o,sliceId:e}))},onCreateSliceZone:()=>{d((0,u.Tr)(c,o))},onDeleteSliceZone:()=>{d((0,u.E3)(c,o))}})]})})})};let eV=()=>{var e,t,l;let{customType:a,setCustomType:r}=S(),o=_.Dc.toSM(a),[c,d]=(0,s.useState)(null===(e=o.tabs[0])||void 0===e?void 0:e.key),[m,h]=(0,s.useState)(),x=(null===(l=o.tabs.find(e=>e.key===c))||void 0===l?void 0:null===(t=l.sliceZone)||void 0===t?void 0:t.value.length)===0;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.Rz2,{sx:x?{flexGrow:1}:void 0,children:["page"===a.format?(0,i.jsx)(n.pyJ,{title:a.repeatable?(0,i.jsx)(T,{}):void 0}):void 0,(0,i.jsxs)(n.KCD,{onValueChange:d,value:c,children:[(0,i.jsx)(n.mYC,{onAddNewTab:()=>{h({type:"CREATE_CUSTOM_TYPE_TAB"})},children:o.tabs.map(e=>(0,i.jsx)(n.wfd,{menu:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.Xiv,{onSelect:()=>{h({type:"UPDATE_CUSTOM_TYPE_TAB",tabKey:e.key})},startIcon:(0,i.jsx)(n.JO$,{name:"edit"}),children:"Rename"}),(0,i.jsx)(n.Xiv,{color:"tomato",disabled:function(e){if(o.tabs.length<=1)return!0;let t=o.tabs.find(e=>e.value.find(e=>"uid"===e.key));return"page"===a.format&&a.repeatable&&(null==t?void 0:t.key)===e}(e.key),onSelect:()=>{h({type:"DELETE_CUSTOM_TYPE_TAB",tabKey:e.key})},startIcon:(0,i.jsx)(n.JO$,{name:"delete"}),children:"Remove"})]}),value:e.key,children:e.key},e.key))}),o.tabs.map(e=>(0,i.jsx)(n.e$b,{value:e.key,children:(0,i.jsx)(eO,{tabId:e.key})},e.key))]})]}),(null==m?void 0:m.type)==="CREATE_CUSTOM_TYPE_TAB"?(0,i.jsx)(A,{close:()=>{h(void 0)},isOpen:!0,onSubmit:e=>{let{id:t}=e;r((0,u.vB)(a,t)),d(t)},tabIds:o.tabs.map(e=>e.key.toLowerCase())}):void 0,(null==m?void 0:m.type)==="UPDATE_CUSTOM_TYPE_TAB"?(0,i.jsx)(O,{close:()=>{h(void 0)},initialTabKey:m.tabKey,isOpen:!0,onSubmit:e=>{let{id:t}=e;r((0,u.HO)(a,m.tabKey,t)),c===m.tabKey&&d(t)},tabIds:o.tabs.filter(e=>e.key!==m.tabKey).map(e=>e.key.toLowerCase())}):void 0,(null==m?void 0:m.type)==="DELETE_CUSTOM_TYPE_TAB"?(0,i.jsx)(Z,{close:()=>{h(void 0)},isOpen:!0,onSubmit:()=>{if(r((0,u.F$)(a,m.tabKey)),c===m.tabKey){var e;let t=null===(e=o.tabs.find(e=>e.key!==m.tabKey))||void 0===e?void 0:e.key;void 0!==t&&d(t)}}}):void 0]})};var ez=l(1744),eF=l(40572),eL=l(64910),eP=l(9975),eK=l(41329),eH=l.n(eK);let eR=e=>{let{tabs:t,...l}=e;return(0,i.jsxs)(eP.fC,{...l,className:eH().root,defaultValue:t[0].label,orientation:"vertical",children:[(0,i.jsx)(eP.aV,{className:eH().list,"aria-label":"content tabs",children:t.map((e,t)=>{let{label:l}=e;return(0,i.jsx)(eP.xz,{className:eH().trigger,value:l,children:(0,i.jsx)(n.xvT,{className:eH().triggerText,component:"span",color:"inherit",children:l})},"".concat(l,"-trig").concat(t+1))})}),t.map((e,t)=>{let{label:l,content:a}=e;return(0,i.jsx)(eP.VY,{className:eH().content,value:l,children:(0,i.jsx)(n.xrM,{className:eH().scrollArea,children:a})},"".concat(l,"-content").concat(t+1))})]})};var eX=l(11290),eU=l(88241),eB=l(58133),e$=l(37628),eJ=l.n(e$);let eG=e=>{var t,l;let{inline:a,...r}=e,o=(0,eB.p)();if(!0===a)return(0,i.jsx)("code",{...r,className:eJ().inlineCode});let s=(()=>{var e,t,l,i,n;if((null===(t=r.node)||void 0===t?void 0:null===(e=t.data)||void 0===e?void 0:e.meta)!==void 0){let e=null===(i=r.node)||void 0===i?void 0:null===(l=i.data)||void 0===l?void 0:l.meta;return{fileName:e.substring(1,e.length-1),language:null===(n=r.className)||void 0===n?void 0:n.split("-")[1]}}return null})(),c=null===(t=/language-(\w+)/.exec(null!==(l=r.className)&&void 0!==l?l:""))||void 0===t?void 0:t[1];return(0,i.jsx)(n.dnZ,{...r,onCopy:()=>{v.Xe.track({event:"page-type:copy-snippet",framework:o})},language:c,code:String(r.children).replace(/\n$/,""),title:null==s?void 0:s.fileName})},eQ=e=>{let{markdown:t}=e;return(0,i.jsx)(eX.D,{children:t,linkTarget:"_blank",remarkPlugins:[eU.Z],components:{code:e=>(0,i.jsx)(eG,{...e}),h1:e=>(0,i.jsx)(n.xvT,{children:e.children,component:"h1",variant:"h1"}),h2:e=>(0,i.jsx)(n.xvT,{children:e.children,component:"h2",variant:"h2"}),h3:e=>(0,i.jsx)(n.xvT,{children:e.children,component:"h3",variant:"h3"}),h4:e=>(0,i.jsx)(n.xvT,{children:e.children,component:"h4",variant:"h4"}),h5:e=>(0,i.jsx)(n.xvT,{children:e.children,component:"h4",variant:"h4"}),p:e=>(0,i.jsx)(n.xvT,{className:eJ().section,children:e.children,component:"p",variant:"normal"}),pre:e=>(0,i.jsx)(n.xvT,{className:eJ().section,children:e.children,component:"pre",variant:"normal"})}})};async function eY(e){let t=JSON.parse(e),{errors:l,documentation:i}=await W.managerClient.documentation.read({kind:t.kind,data:t.data});if(l.length>0)throw l;return i}var eq=l(83321),eW=l.n(eq);let e0=e=>{var t;let{model:l}=e,a=(0,eB.p)(),r=(t={kind:"PageSnippet",data:{model:l}},(0,q.QT)(eY,[JSON.stringify(t)])),{completeStep:o}=(0,Q.k)();return 0===r.length?null:(0,i.jsxs)(n.VqE,{size:"small",trigger:(0,i.jsx)(n.zxk,{color:"grey",onClick:()=>{o("codePage"),v.Xe.track({event:"page-type:open-snippet",framework:a})},startIcon:"code",children:"Page snippet"}),children:[(0,i.jsx)(n.fKu,{icon:"code",title:"Page snippet"}),(0,i.jsx)("section",{className:eW().content,children:r.length>1?(0,i.jsx)(eR,{style:{flex:1},tabs:r.map((e,t)=>{let{label:l,content:n}=e;return{label:null!=l?l:"Tab ".concat(t+1),content:(0,i.jsx)(eQ,{markdown:n})}})}):(0,i.jsx)(n.xrM,{style:{flex:1,padding:16},children:(0,i.jsx)(eQ,{markdown:r[0].content})})})]})},e1=e=>{let{model:t}=e;return(0,i.jsx)("div",{children:(0,i.jsx)(L.S,{children:(0,i.jsx)(s.Suspense,{fallback:(0,i.jsx)(n.zxk,{color:"grey",startIcon:"code",children:"Page snippet"}),children:(0,i.jsx)(e0,{model:t})})})})},e4=()=>{let e=(0,o.useRouter)(),{selectedCustomType:t}=(0,c.v9)(t=>({selectedCustomType:(0,eF.Jk)(t,(0,h.Ag)(e.query))}));return((0,s.useEffect)(()=>{t&&(0,ez.TG)(t)||e.replace("/")},[t,e]),t&&(0,ez.TG)(t))?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r(),{children:(0,i.jsxs)("title",{children:[t.local.label," - Slice Machine"]})}),(0,i.jsx)(e5,{customType:t.local})]}):(0,i.jsx)(x.LN,{})},e5=e=>{let{customType:t}=e;return null===t?(0,i.jsx)(x.LN,{}):(0,i.jsx)(x.LN,{children:(0,i.jsx)(C,{initialCustomType:_.Dc.fromSM(t),children:e=>{var l;let{actionQueueStatus:a,customType:r,setCustomType:o}=e,s=(0,u.y6)(r),c=h.cd[t.format],p=b.$[t.format];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(x.wd,{children:[(0,i.jsx)(x.Xq,{url:c.tablePagePathname}),(0,i.jsxs)(x.Cx,{children:[(0,i.jsx)(d.g,{children:p.name({start:!0,plural:!0})}),(0,i.jsx)(d.g,{active:!0,children:null!==(l=r.label)&&void 0!==l?l:r.id})]}),(0,i.jsxs)(x.K2,{children:[(0,i.jsx)(m.X,{status:a}),"page"===r.format?(0,i.jsx)(e1,{model:r}):void 0,(0,i.jsx)(eL._,{isChangesLocal:!0,format:s,customType:r,setLocalCustomType:o})]})]}),(0,i.jsx)(x.RN,{children:(0,i.jsx)(n.xuv,{flexDirection:"column",minWidth:0,children:(0,i.jsx)(eV,{})})})]})}})})}},61502:function(e,t,l){"use strict";l.d(t,{E:function(){return n}});var i=l(29806);function n(e){var t,l;let[n,a]=(0,i.f)(),r=async t=>{let l={...n,labs:{...n.labs}};t?l.labs[e]=t:e in l.labs&&delete l.labs[e],0===Object.keys(l.labs).length&&delete l.labs,await a(l)};return[{enabled:null!==(l=null==n?void 0:null===(t=n.labs)||void 0===t?void 0:t[e])&&void 0!==l&&l},r]}},29806:function(e,t,l){"use strict";l.d(t,{f:function(){return a}});var i=l(18566),n=l(70647);function a(){return[(0,i.QT)(r,[]),async e=>{await n.managerClient.project.writeSliceMachineConfig({config:e}),(0,i.VA)(r,[],e)}]}async function r(){return n.managerClient.project.getSliceMachineConfig()}},17889:function(e,t,l){"use strict";l.d(t,{c:function(){return j}});var i=l(52322),n=l(2784),a=l(36131),r=l(75289),o=l(93188),s=l(65856),c=l(88932),d=l(3181),u=l(99510),m=l(70647);async function h(e){let{sliceName:t,libraryName:l,onSuccess:i}=e;try{let e=(0,d.fo)(t),{errors:n}=await m.managerClient.slices.createSlice({libraryID:l,model:e});if(n.length>0)throw n;o.Xe.track({event:"slice:created",id:(0,u.MP)(t),name:t,library:l}),await i(e)}catch(l){let e="An unexpected error happened while creating slice ".concat(t,".");console.error(e,l),c.Am.error(e)}}var x=l(80546),p=l(1490),v=l(41067),y=l(28801),f=l(99923);let j=e=>{let{onClose:t,onSuccess:l,localLibraries:c,remoteSlices:d}=e,{createSliceSuccess:u}=(0,v.Z)(),[m,j]=(0,n.useState)(!1),{syncChanges:b}=(0,x.g)(),{completeStep:g}=(0,s.k)(),C=async e=>{let t=e.sliceName,i=e.from;j(!0),await h({sliceName:t,libraryName:i,onSuccess:async e=>{u((await (0,o.y0)()).libraries),l(e,i),b(),g("createSlice")}})};return(0,i.jsx)(p.Z,{testId:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:m,formId:"create-new-slice",close:t,buttonLabel:"Create",onSubmit:e=>{C(e)},initialValues:{sliceName:"",from:c[0].name},validate:e=>(0,f.h)(e,c,d),content:{title:"Create a new slice"},children:e=>{let{touched:t,values:l,setFieldValue:n,errors:o}=e;return(0,i.jsxs)(r.xu,{children:[(0,i.jsx)(y.W,{name:"sliceName",label:"Slice Name",placeholder:"Pascalised Slice API ID (e.g. TextBlock)",error:t.sliceName?o.sliceName:void 0,testId:"slice-name-input"}),(0,i.jsx)(r.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,i.jsx)(a.ZP,{name:"from",options:c.map(e=>({value:e.name,label:e.name})),onChange:e=>e?void n("from",e.value):null,defaultValue:{value:l.from,label:l.from},styles:{option:e=>({...e,color:"#161618"})},theme:e=>({...e,colors:{...e.colors,primary:"#E9E8EA"}}),menuPortalTarget:document.body})]})}})}},99923:function(e,t,l){"use strict";l.d(t,{h:function(){return s}});var i=l(96009),n=l.n(i),a=l(74600),r=l.n(a),o=l(17186);function s(e,t,l){let{sliceName:i}=e;return i?o.lS.includes(i.toLowerCase())?{sliceName:'Name "'.concat(i,'" is reserved for Slice Machine use.')}:o.xo.exec(i)?r()(n()(i)).replace(/\s/gm,"")!==i.trim()?{sliceName:"Value has to be PascalCased."}:i.match(/^\d/)?{sliceName:"Value cannot start with a number."}:[...t.flatMap(e=>e.components.map(e=>e.model.name)),...l.map(e=>e.name)].includes(i)?{sliceName:"Slice name is already taken."}:void 0:{sliceName:"No special characters allowed."}:{sliceName:"Cannot be empty"}}},42849:function(e,t,l){"use strict";var i=l(52322),n=l(75289);t.Z=function(e){let{elems:t,renderElem:l,defineElementKey:a,gridTemplateMinPx:r="320px",gridGap:o="16px",sx:s}=e;return(0,i.jsx)(n.xu,{as:"section",sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(r,", 1fr))"),gridGap:o,pt:2,...s},children:t.map((e,t)=>e?(0,i.jsx)("span",{children:l(e,t)},"".concat(a(e),"-").concat(t+1)):null)})}},41329:function(e){e.exports={flex:"ContentTabs_flex__T21Oc",column:"ContentTabs_column__1f8b8 ContentTabs_flex__T21Oc",root:"ContentTabs_root__Gn3Zg ContentTabs_column__1f8b8 ContentTabs_flex__T21Oc",list:"ContentTabs_list__rAZtl ContentTabs_flex__T21Oc",trigger:"ContentTabs_trigger__cTyPN ContentTabs_column__1f8b8 ContentTabs_flex__T21Oc",triggerText:"ContentTabs_triggerText__p_ZBl",content:"ContentTabs_content__H1Stj ContentTabs_column__1f8b8 ContentTabs_flex__T21Oc",scrollArea:"ContentTabs_scrollArea__DuDcQ"}},83321:function(e){e.exports={content:"PageSnippetDialog_content__jIN6d"}},37628:function(e){e.exports={section:"MarkdownRenderer_section__uNS1M",inlineCode:"MarkdownRenderer_inlineCode__lmGTi"}},17766:function(e){e.exports={scrollArea:"ConvertLegacySliceButton_scrollArea__xf3vM",label:"ConvertLegacySliceButton_label__BK0Gd"}}}]);