slice-machine-ui 2.17.3-alpha.jp-revert-section-naming-experiment.2 → 2.17.3-alpha.jp-revert-section-naming-experiment.4

package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx

@@ -1,7 +1,6 @@
 import {
   ActionList,
   ActionListItem,
-  BackgroundIcon,
   BlankSlate,
   BlankSlateActions,
   BlankSlateDescription,
@@ -10,6 +9,8 @@ import {
 } from "@prismicio/editor-ui";
 import { FC } from "react";
 
+import { getSliceCreationOptions } from "./sliceCreationOptions";
+
 export type SliceZoneBlankSlateProps = {
   openUpdateSliceZoneModal: () => void;
   openCreateSliceModal: () => void;
@@ -27,6 +28,10 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   projectHasAvailableSlices,
   isSlicesTemplatesSupported,
 }) => {
+  const sliceCreationOptions = getSliceCreationOptions({
+    menuType: "ActionList",
+  });
+
   return (
     <BlankSlate data-testid="slice-zone-blank-slate" sx={{ width: 648 }}>
       <BlankSlateIcon
@@ -38,76 +43,49 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
       <BlankSlateTitle size="big">Add slices</BlankSlateTitle>
       <BlankSlateDescription>
         Slices are website sections that you can reuse on different pages with
-        different content. Each slice has its own component in your code.
+        different content. Each on different pages with different content. Each{" "}
+        slice has its own component in your code.
       </BlankSlateDescription>
       <BlankSlateActions>
         <ActionList>
           <ActionListItem
-            renderStartIcon={() => (
-              <BackgroundIcon
-                name="autoFixHigh"
-                size="small"
-                iconSize="medium"
-                color="purple"
-                variant="solid"
-                radius={6}
-              />
-            )}
+            renderStartIcon={() =>
+              sliceCreationOptions.fromImage.BackgroundIcon
+            }
             onClick={openCreateSliceFromImageModal}
-            description="Build a slice based on your design image."
+            description={sliceCreationOptions.fromImage.description}
           >
-            Generate from image
+            {sliceCreationOptions.fromImage.title}
           </ActionListItem>
           <ActionListItem
-            renderStartIcon={() => (
-              <BackgroundIcon
-                name="add"
-                size="small"
-                iconSize="medium"
-                color="white"
-                variant="solid"
-                radius={6}
-              />
-            )}
+            renderStartIcon={() =>
+              sliceCreationOptions.fromScratch.BackgroundIcon
+            }
             onClick={openCreateSliceModal}
-            description="Build a custom slice your way."
+            description={sliceCreationOptions.fromScratch.description}
           >
-            Start from scratch
+            {sliceCreationOptions.fromScratch.title}
           </ActionListItem>
           {isSlicesTemplatesSupported && (
             <ActionListItem
-              renderStartIcon={() => (
-                <BackgroundIcon
-                  name="contentCopy"
-                  size="small"
-                  iconSize="medium"
-                  color="white"
-                  variant="solid"
-                  radius={6}
-                />
-              )}
+              renderStartIcon={() =>
+                sliceCreationOptions.fromTemplate.BackgroundIcon
+              }
               onClick={openSlicesTemplatesModal}
-              description="Choose from ready-made examples."
+              description={sliceCreationOptions.fromTemplate.description}
             >
-              Use a template
+              {sliceCreationOptions.fromTemplate.title}
             </ActionListItem>
           )}
           {projectHasAvailableSlices && (
             <ActionListItem
-              renderStartIcon={() => (
-                <BackgroundIcon
-                  name="folder"
-                  size="small"
-                  iconSize="medium"
-                  color="white"
-                  variant="solid"
-                  radius={6}
-                />
-              )}
+              renderStartIcon={() =>
+                sliceCreationOptions.fromExisting.BackgroundIcon
+              }
               onClick={openUpdateSliceZoneModal}
-              description="Select from your created slices."
+              description={sliceCreationOptions.fromExisting.description}
             >
-              Reuse an existing slice
+              {sliceCreationOptions.fromExisting.title}
             </ActionListItem>
           )}
         </ActionList>

package/src/features/customTypes/customTypesBuilder/sliceCreationOptions.tsx

@@ -0,0 +1,68 @@
+import { BackgroundIcon } from "@prismicio/editor-ui";
+
+type SliceCreationOptionArgs = {
+  menuType: "ActionList" | "Dropdown";
+};
+
+export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
+  const { menuType } = args;
+
+  return {
+    fromImage: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="autoFixHigh"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="purple"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Generate from image",
+      description: "Build a slice based on your design image.",
+    },
+    fromScratch: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="add"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="white"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Start from scratch",
+      description: "Build a custom slice your way.",
+    },
+    fromTemplate: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="contentCopy"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="white"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Use a template",
+      description: "Choose from ready-made examples.",
+    },
+    fromExisting: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="folder"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="white"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Reuse an existing slice",
+      description: "Select from your created slices.",
+    },
+  };
+};

package/src/features/navigation/Navigation.tsx

@@ -8,13 +8,11 @@ import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
-import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
 import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
 import { MenuBookIcon } from "@/icons/MenuBookIcon";
-import { SettingsIcon } from "@/icons/SettingsIcon";
 
 import { ChangesItem } from "../../legacy/components/Navigation/ChangesItem";
 import { Environment } from "../../legacy/components/Navigation/Environment";
@@ -25,7 +23,6 @@ import { UpdateInfo } from "./UpdateInfo";
 export function Navigation() {
   const router = useRouter();
 
-  const gitIntegrationExperiment = useGitIntegrationExperiment();
   const { documentationLink } = useMarketingContent();
   const adapter = useAdapterName();
 
@@ -109,15 +106,6 @@ export function Navigation() {
             }}
           />
 
-          {gitIntegrationExperiment.eligible && (
-            <NavigationItem
-              title="Settings"
-              href="/settings"
-              Icon={SettingsIcon}
-              active={router.asPath.startsWith("/settings")}
-            />
-          )}
-
           <NavigationItem
             title="Changelog"
             href="/changelog"

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

@@ -1,5 +1,4 @@
 import {
-  BackgroundIcon,
   Box,
   Button,
   DropdownMenu,
@@ -18,6 +17,7 @@ import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SliceZoneBlankSlate } from "@/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { addSlicesToSliceZone } from "@/features/slices/actions/addSlicesToSliceZone";
@@ -131,6 +131,9 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   const { setCustomType } = useCustomTypeState();
   const { completeStep } = useOnboarding();
   const { openLoginModal } = useSliceMachineActions();
+  const sliceCreationOptions = getSliceCreationOptions({
+    menuType: "Dropdown",
+  });
 
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -228,73 +231,45 @@ const SliceZone: React.FC<SliceZoneProps> = ({
 
               <DropdownMenuContent align="end">
                 <DropdownMenuItem
-                  renderStartIcon={() => (
-                    <BackgroundIcon
-                      name="autoFixHigh"
-                      size="extraSmall"
-                      iconSize="small"
-                      radius={6}
-                      variant="solid"
-                      color="purple"
-                    />
-                  )}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.fromImage.BackgroundIcon
+                  }
                   onSelect={() => void openCreateSliceFromImageModal()}
-                  description="Build a slice based on your design image."
+                  description={sliceCreationOptions.fromImage.description}
                 >
-                  Generate from image
+                  {sliceCreationOptions.fromImage.title}
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  renderStartIcon={() => (
-                    <BackgroundIcon
-                      name="add"
-                      size="extraSmall"
-                      iconSize="small"
-                      radius={6}
-                      variant="solid"
-                      color="white"
-                    />
-                  )}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.fromScratch.BackgroundIcon
+                  }
                   onSelect={openCreateSliceModal}
-                  description="Build a custom slice your way."
+                  description={sliceCreationOptions.fromScratch.description}
                 >
-                  Start from scratch
+                  {sliceCreationOptions.fromScratch.title}
                 </DropdownMenuItem>
 
                 {availableSlicesTemplates.length > 0 ? (
                   <DropdownMenuItem
                     onSelect={openSlicesTemplatesModal}
-                    renderStartIcon={() => (
-                      <BackgroundIcon
-                        name="contentCopy"
-                        size="extraSmall"
-                        iconSize="small"
-                        radius={6}
-                        variant="solid"
-                        color="white"
-                      />
-                    )}
-                    description="Choose from ready-made examples."
+                    renderStartIcon={() =>
+                      sliceCreationOptions.fromTemplate.BackgroundIcon
+                    }
+                    description={sliceCreationOptions.fromTemplate.description}
                   >
-                    Use a template
+                    {sliceCreationOptions.fromTemplate.title}
                   </DropdownMenuItem>
                 ) : undefined}
 
                 {availableSlicesToAdd.length > 0 ? (
                   <DropdownMenuItem
                     onSelect={openUpdateSliceZoneModal}
-                    renderStartIcon={() => (
-                      <BackgroundIcon
-                        name="folder"
-                        size="extraSmall"
-                        iconSize="small"
-                        radius={6}
-                        variant="solid"
-                        color="white"
-                      />
-                    )}
-                    description="Select from your created slices."
+                    renderStartIcon={() =>
+                      sliceCreationOptions.fromExisting.BackgroundIcon
+                    }
+                    description={sliceCreationOptions.fromExisting.description}
                   >
-                    Reuse an existing slice
+                    {sliceCreationOptions.fromExisting.title}
                   </DropdownMenuItem>
                 ) : undefined}
               </DropdownMenuContent>

package/src/pages/slices.tsx

@@ -1,5 +1,4 @@
 import {
-  BackgroundIcon,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -16,6 +15,7 @@ import { BaseStyles, Flex, Link, Text } from "theme-ui";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
+import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
 import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
@@ -47,6 +47,9 @@ const SlicesIndex: React.FunctionComponent = () => {
   const router = useRouter();
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
   const { openLoginModal } = useSliceMachineActions();
+  const sliceCreationOptions = getSliceCreationOptions({
+    menuType: "Dropdown",
+  });
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
@@ -125,36 +128,22 @@ const SlicesIndex: React.FunctionComponent = () => {
 
               <DropdownMenuContent align="end">
                 <DropdownMenuItem
-                  renderStartIcon={() => (
-                    <BackgroundIcon
-                      name="autoFixHigh"
-                      size="extraSmall"
-                      iconSize="small"
-                      radius={6}
-                      variant="solid"
-                      color="purple"
-                    />
-                  )}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.fromImage.BackgroundIcon
+                  }
                   onSelect={() => void openCreateSliceFromImageModal()}
-                  description="Build a slice based on your design image."
+                  description={sliceCreationOptions.fromImage.description}
                 >
-                  Generate from image
+                  {sliceCreationOptions.fromImage.title}
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  renderStartIcon={() => (
-                    <BackgroundIcon
-                      name="add"
-                      size="extraSmall"
-                      iconSize="small"
-                      radius={6}
-                      variant="solid"
-                      color="white"
-                    />
-                  )}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.fromScratch.BackgroundIcon
+                  }
                   onSelect={() => setIsCreateSliceModalOpen(true)}
-                  description="Build a custom slice your way."
+                  description={sliceCreationOptions.fromScratch.description}
                 >
-                  Start from scratch
+                  {sliceCreationOptions.fromScratch.title}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -182,7 +171,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                       onCreateNew={() => {
                         setIsCreateSliceModalOpen(true);
                       }}
-                      buttonText="Create one"
+                      buttonText={"Create one"}
                       videoPublicIdUrl={VIDEO_WHAT_ARE_SLICES}
                       documentationComponent={
                         <>
@@ -191,7 +180,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                           creators to add, edit, and rearrange slices to compose
                           dynamic layouts for any page design.{" "}
                           <Link
-                            target="_blank"
+                            target={"_blank"}
                             href={
                               "https://prismic.io/docs/core-concepts/slices"
                             }
@@ -235,7 +224,11 @@ const SlicesIndex: React.FunctionComponent = () => {
                               mb: 1,
                             }}
                           >
-                            <Text>{name}</Text>
+                            <Text>
+                              {sortedLibraries.length === 1
+                                ? `Your slices`
+                                : name}
+                            </Text>
                           </Flex>
                           {!isLocal && (
                             <p>⚠️ External libraries are read-only</p>

package/out/_next/static/TDI0oMeAJsBzW3-NbPUKW/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,d,u,f,h,l,k,j,p,g,o,r,m){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,e,p,g,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,t,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-063c5e11dfc8fd55.js"],"/changes":[c,i,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-fa4f2563cb5fd014.js",a,n,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-b4b7d3047cf012a0.js"],"/custom-types":[s,e,p,g,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,d,u,f,h,s,t,b,l,o,a,e,k,j,r,m,"static/chunks/pages/custom-types/[customTypeId]-d4b2bfcf2a7dd717.js"],"/labs":["static/chunks/pages/labs-9630bfb1005be02b.js"],"/page-types/[pageTypeId]":[c,d,u,f,h,s,t,b,l,o,a,e,k,j,r,m,"static/chunks/pages/page-types/[pageTypeId]-912b2d65b2db290d.js"],"/settings":[s,"static/css/e5f781f20e24a5ea.css","static/chunks/pages/settings-01f4aeb9112a1f87.js"],"/slices":[c,i,s,b,a,n,j,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-12e4d75d553a0426.js"],"/slices/[lib]/[sliceName]/[variation]":[c,i,d,u,f,h,s,t,b,l,a,k,n,"static/css/cdee5b195444f185.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-0a51da2e35d6e62f.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[i,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/157-54b8336d20b41933.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-0ecd552897e61e29.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/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/34-6c3125e6f01c62c7.js","static/chunks/647-7b9b5aa9468f9e4b.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/44-a2056f993381ad0f.js","static/chunks/658-8231c0b729e0124a.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/349-7118116b93278f73.js","static/chunks/630-799c128fd87fa645.js","static/chunks/7-4221ce4f79fb2ff2.js","static/chunks/248-03446cd9e9f13730.js","static/css/4e475d945cf8a890.css","static/chunks/385-b949173dfa03dd3e.js","static/chunks/489-949e8f6070a61205.js","static/css/56f2a6684a524374.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/out/_next/static/chunks/248-03446cd9e9f13730.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[248],{72641:function(e,t,n){"use strict";n.d(t,{R$:function(){return i},Qj:function(){return x},T9:function(){return d},nf:function(){return h},u2:function(){return o},_T:function(){return u}});var l=n(52322),r=n(56803),a=n(6277),s=n(83478),c=n.n(s);let i=e=>{let{backgroundImage:t,style:n,...r}=e,s=void 0!==t;return(0,l.jsx)("article",{...r,className:(0,a.W)(c().root,{[c().withBackground]:s}),style:{backgroundImage:s?"url(".concat(t,")"):void 0,...n}})},o=e=>(0,l.jsx)("div",{...e,className:c().image}),d=e=>(0,l.jsx)("div",{...e,className:c().content}),u=e=>(0,l.jsx)(r.bL,{...e,variant:"h3"}),h=e=>(0,l.jsx)(r.bL,{...e,color:"grey11"}),x=e=>(0,l.jsx)("div",{...e,className:c().actions,color:"grey"})},38241:function(e,t,n){"use strict";n.d(t,{F:function(){return O}});var l=n(52322),r=n(56803),a=n(97729),s=n.n(a),c=n(2784),i=n(43388),o=n(17378),d=n(98564),u=n(51384),h=n(5632),x=n(56580),m=n(75289),p=n(77630),j=n(88932),g=n(94160),b=n(39204);async function f(e){let{id:t,label:n,repeatable:l,format:r,onSuccess:a}=e,s=d.$[r],c=(0,p.Ue)({id:t,label:n,repeatable:l,format:r});try{let{errors:e}=await (0,g.KA)({customType:c});if(e.length>0)throw e;g.Xe.track({event:"custom-type:created",id:c.id,name:n,format:r,type:l?"repeatable":"single",origin:"table"}),await a(c),j.Am.success((0,b.GX)({message:"".concat(s.name({start:!0,plural:!1})," saved successfully at "),path:"./customtypes/".concat(c.id,"/index.json")}))}catch(t){let e="Internal Error: ".concat(s.name({start:!0,plural:!1})," not saved");console.error(e,t),j.Am.error(e)}}var v=n(59294),_=n(98250),S=n(68968),y=n(59532),C=n(7974),k=n(358),w=n(78254),L=n(54597),I=n(46999),R=n(63397);let B=e=>{let{selected:t,...n}=e;return(0,l.jsx)(m.kC,{sx:{p:"24px",mb:3,alignItems:"top",cursor:"pointer",borderRadius:"6px",backgroundColor:"grayLight",boxShadow:t?e=>{var t;return"0 0 0 2px ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.primary))}:"none","&:hover":{boxShadow:e=>{var t;return"0 0 0 2px ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.primary))}}},...n})},N=e=>{let{format:t}=e,[n,,r]=(0,R.U$)("repeatable"),a=d.$[t];return(0,l.jsxs)(m.xu,{mb:2,children:[(0,l.jsxs)(B,{selected:n.value,onClick:()=>r.setValue(!0),children:[(0,l.jsx)(m.Y8,{checked:n.value,onChange:()=>{},"data-testid":"repeatable-type-radio-btn"}),(0,l.jsxs)(m.xu,{sx:{marginLeft:2},children:["Reusable type",(0,l.jsx)(m.xu,{as:"p",sx:{fontSize:"12px",color:"textClear",mt:1},children:a.hintRepeatable})]})]}),(0,l.jsxs)(B,{selected:!n.value,onClick:()=>r.setValue(!1),children:[(0,l.jsx)(m.Y8,{checked:!n.value,onChange:()=>{},"data-testid":"single-type-radio-btn"}),(0,l.jsxs)(m.xu,{sx:{marginLeft:2},children:["Single type",(0,l.jsx)(m.xu,{as:"p",sx:{fontSize:"12px",color:"textClear",mt:1},children:a.hintSingle})]})]})]})},z=e=>{let{format:t,isCreating:n,isOpen:r,origin:a="table",onCreateChange:s,onOpenChange:i}=e,{createCustomTypeSuccess:o}=(0,L.Z)(),{completeStep:u}=(0,_.k)(),{customTypeIds:j,customTypeLabels:g}=(0,x.v9)(e=>({customTypeIds:(0,w.W6)(e),customTypeLabels:(0,w.YS)(e)})),b=d.$[t],[R,B]=(0,c.useState)(!0),{syncChanges:z}=(0,S.g)(),E=(0,h.useRouter)(),T=async e=>{let{id:n,label:l,repeatable:r}=e;s(!0),await f({format:t,id:n,label:l,origin:a,repeatable:r,onSuccess:async e=>{o(e);let t=(0,p.y6)(e),l=v.cd[t];B(!0),await E.push({pathname:l.getBuilderPagePathname(n)}),z(),"page"===t&&u("createPageType")}}),s(!1),i(!1)},G=(e,t,n)=>{n(R?{...t,label:e.target.value,id:(0,k.lV)(e.target.value)}:{...t,label:e.target.value})},D=(e,t)=>{t("id",e.target.value),B(!1)};return(0,l.jsx)(y.Z,{testId:"create-ct-modal",isOpen:r,widthInPx:"530px",formId:"create-custom-type",buttonLabel:"Create",close:()=>{i(!1),B(!0)},onSubmit:e=>{T(e)},isLoading:n,initialValues:{repeatable:!0,id:"",label:""},validate:e=>{let{id:t,label:n}=e,l={};return n&&n.length||(l.label="Cannot be empty."),!l.label&&g.includes(n)&&(l.label="".concat(b.name({start:!0,plural:!1})," name is already taken.")),["update","insert"].includes(n.toLowerCase())&&(l.label='Name "'.concat(n,'" is reserved for Slice Machine use.')),t&&t.length||(l.id="ID cannot be empty."),["update","insert"].includes(t.toLowerCase())&&(l.id='Id "'.concat(t,'" is reserved for Slice Machine use.')),l.id||!t||C.xo.exec(t)||(l.id="Invalid id: No special characters allowed."),!l.id&&t&&j.map(e=>e.toLowerCase()).includes(t)&&(l.id='ID "'.concat(t,'" exists already.')),Object.keys(l).length>0?l:void 0},content:{title:"Create a new ".concat(b.name({start:!1,plural:!1}))},children:e=>{let{errors:n,setValues:r,setFieldValue:a,values:s,touched:c}=e;return(0,l.jsxs)(m.xu,{children:[(0,l.jsx)(N,{format:t}),(0,l.jsx)(I.W,{name:"label",label:"".concat(b.name({start:!0,plural:!1})," Name"),testId:"ct-name-input",placeholder:"A display name for the ".concat(b.name({start:!1,plural:!1})),error:c.label?n.label:void 0,onChange:e=>G(e,s,r)}),(0,l.jsx)(I.W,{name:"id",testId:"ct-id-input",label:"".concat(b.name({start:!0,plural:!1})," ID"),placeholder:b.inputPlaceholder,error:c.id?n.id:void 0,onChange:e=>D(e,a)})]})}})};var E=n(72641);let T=e=>(0,l.jsxs)("svg",{viewBox:"0 0 20 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,l.jsx)("path",{d:"m2 24h16c1.1046 0 2-.8954 2-2v-17l-5-5h-13c-1.10457 0-2 .89543-2 2v20c0 1.1046.89543 2 2 2z",fill:"#6e56cf"}),(0,l.jsx)("path",{d:"m17 5h3l-5-5v3c0 1.10457.8954 2 2 2z",fill:"#9e8cfc"}),(0,l.jsx)("path",{d:"m10.0912 8c-2.8118 0-5.0912 2.2794-5.0912 5.0912s2.2794 5.0912 5.0912 5.0912c1.8851 0 3.5303-1.0247 4.4098-2.5452.1553-.2684.2868-.5523.3916-.8489.092-.2604-.0444-.5461-.3048-.6381-.2603-.092-.546.0445-.638.3048-.0841.238-.1897.4659-.3144.6815-.7081 1.2241-2.0305 2.0459-3.5442 2.0459-2.2595 0-4.0912-1.8317-4.0912-4.0912s1.8317-4.0912 4.0912-4.0912c1.3566 0 2.5595.66 3.3043 1.6782h-1.7739c-.2761 0-.5.2239-.5.5 0 .2762.2239.5.5.5h2.6782c.2762 0 .5-.2238.5-.5v-2.6782c0-.2761-.2238-.5-.5-.5-.2761 0-.5.2239-.5.5v1.1032c-.9281-.9865-2.2462-1.6032-3.7086-1.6032z",fill:"#fff"})]}),G=e=>(0,l.jsxs)("svg",{viewBox:"0 0 20 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,l.jsx)("path",{d:"m2 24h16c1.1046 0 2-.8954 2-2v-17l-5-5h-13c-1.10457 0-2 .89543-2 2v20c0 1.1046.89543 2 2 2z",fill:"#6e56cf",fillRule:"nonzero"}),(0,l.jsx)("path",{d:"m17 5h3l-5-5v3c0 1.10457.8954 2 2 2z",fill:"#9e8cfc",fillRule:"nonzero"}),(0,l.jsx)("path",{d:"m8.0869 10.6818.5758-2.3031c.0556-.2226.2556-.3787.485-.3787.3253 0 .564.3057.4851.6213l-.5151 2.0605h2.6055l.5758-2.3031c.0557-.2226.2557-.3787.4851-.3787.3253 0 .564.3057.4851.6213l-.5152 2.0605h2.246c.2761 0 .5.2239.5.5 0 .2762-.2239.5-.5.5h-2.496l-.6591 2.6364h2.1551c.2761 0 .5.2238.5.5 0 .2761-.2239.5-.5.5h-2.4051l-.5757 2.3031c-.0557.2226-.2557.3787-.4851.3787-.3253 0-.564-.3057-.4851-.6213l.5152-2.0605h-2.6056l-.5758 2.3031c-.0556.2226-.2556.3787-.4851.3787-.3253 0-.5639-.3057-.485-.6213l.5151-2.0605h-1.9278c-.2761 0-.5-.2239-.5-.5 0-.2762.2239-.5.5-.5h2.1778l.6591-2.6364h-1.8369c-.2761 0-.5-.2238-.5-.5 0-.2761.2239-.5.5-.5zm2.7273 3.6364.659-2.6364h-2.6055l-.6591 2.6364z",fill:"#fff"})]});var D=n(60867),P=n(50477),W=n(94840),A=n(16442);let $=e=>{let{format:t,isCreatingCustomType:n,openCreateCustomTypeModal:a}=e,s=(0,h.useRouter)(),{customTypes:i,updateCustomTypes:o}=(0,P.xU)(t),u=i.sort((e,t)=>e.id.localeCompare(t.id)),m=v.cd[t],p=d.$[t];return(!function(e,t,n){let{storeCustomTypes:l}=(0,x.v9)(e=>({storeCustomTypes:(0,w.Ch)(e).filter(A.TG)}));(0,c.useEffect)(()=>{let r=l.filter(e=>{let{local:n}=e;return n.format===t});(r.length!==e.length||r.some(t=>{let n=e.find(e=>e.id===t.local.id);return!n||JSON.stringify(W.Dc.fromSM(t.local))!==JSON.stringify(n)}))&&n(r.map(e=>{let{local:t}=e;return W.Dc.fromSM(t)}))},[t,n,e,l])}(i,t,o),0===u.length)?(0,l.jsxs)(E.R$,{"data-testid":"blank-slate",style:{alignSelf:"center",marginTop:r.t.space[72]},children:[(0,l.jsx)(E.u2,{children:(0,l.jsx)(r.a_,{src:m.blankSlateImage,sizing:"cover"})}),(0,l.jsxs)(E.T9,{children:[(0,l.jsx)(E._T,{children:p.name({start:!0,plural:!0})}),(0,l.jsx)(E.nf,{children:p.blankSlateDescription}),(0,l.jsx)(E.Qj,{children:(0,l.jsx)(r.E,{onClick:a,loading:n,children:"Create"})})]})]}):(0,l.jsx)("div",{children:(0,l.jsxs)(r.bE,{columnLayout:"28px 1fr 1fr 1fr 42px",children:[(0,l.jsx)(r.bH,{children:(0,l.jsxs)(r.bI,{children:[(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.aX,{name:"notes",size:"medium"})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{color:"grey11",variant:"small",children:"Label"})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{color:"grey11",variant:"small",children:"API ID"})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{color:"grey11",variant:"small",children:"Limit"})}),(0,l.jsx)(r.bG,{})]})}),(0,l.jsx)(r.bF,{children:u.map(e=>{let{repeatable:n,label:a,id:c}=e;return(0,l.jsxs)(r.bI,{onClick:()=>{s.push(v.cd[t].getBuilderPagePathname(c))},children:[(0,l.jsx)(r.bG,{children:n?(0,l.jsx)(T,{width:r.t.space[20]}):(0,l.jsx)(G,{width:r.t.space[20]})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{variant:"bold",noWrap:!0,children:a})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{color:"grey11",noWrap:!0,children:c})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(r.bL,{color:"grey11",noWrap:!0,children:n?"Reusable":"Single"})}),(0,l.jsx)(r.bG,{children:(0,l.jsx)(D._,{isChangesLocal:!1,format:t,customType:e})})]},c)})})]})})},O=e=>{let{format:t}=e,n=d.$[t],[a,h]=(0,c.useState)(!1),[x,m]=(0,c.useState)(!1);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s(),{children:(0,l.jsxs)("title",{children:[n.name({start:!0,plural:!0})," - Slice Machine"]})}),(0,l.jsx)(o.S,{renderError:()=>(0,l.jsx)(u.LN,{children:(0,l.jsx)(u.RN,{children:(0,l.jsx)(r.D,{alignItems:"center",justifyContent:"center",children:(0,l.jsx)(r.ax,{title:"Request failed",description:"An error occurred while fetching your ".concat(n.name({start:!1,plural:!0}),".")})})})}),children:(0,l.jsx)(c.Suspense,{fallback:(0,l.jsxs)(u.LN,{children:[(0,l.jsxs)(u.wd,{children:[(0,l.jsx)(u.Cx,{children:(0,l.jsx)(i.g,{children:n.name({start:!0,plural:!0})})}),(0,l.jsx)(u.K2,{children:(0,l.jsx)(r.E,{disabled:!0,startIcon:"add",children:"Create"})})]}),(0,l.jsx)(u.RN,{children:(0,l.jsx)(r.bg,{})})]}),children:(0,l.jsxs)(u.LN,{children:[(0,l.jsxs)(u.wd,{children:[(0,l.jsx)(u.Cx,{children:(0,l.jsx)(i.g,{children:n.name({start:!0,plural:!0})})}),(0,l.jsx)(u.K2,{children:(0,l.jsx)(r.E,{"data-testid":"create-ct",loading:a,onClick:()=>{m(!0)},startIcon:"add",children:"Create"})})]}),(0,l.jsx)(u.RN,{children:(0,l.jsxs)(r.D,{flexDirection:"column",children:[(0,l.jsx)($,{format:t,isCreatingCustomType:a,openCreateCustomTypeModal:()=>{m(!0)}}),(0,l.jsx)(z,{format:t,isCreating:a,isOpen:x,onCreateChange:h,onOpenChange:m})]})})]})})})]})}},30527:function(e,t,n){"use strict";n.d(t,{Z:function(){return o},W:function(){return i}});var l=n(52322),r=n(2784),a=n(75289);let s=e=>{let{bg:t,background:n,sx:r,withRadius:s,radius:c,children:i}=e;return(0,l.jsx)(a.xu,{sx:{p:4,bg:t||n,...s?{borderBottomLeftRadius:c,borderBottomRightRadius:c}:null,...r},children:i})},c=(0,r.createContext)("6px"),i=()=>(0,r.useContext)(c),o=e=>{let{Header:t=null,SubHeader:n=null,Body:r=null,Footer:i=null,borderFooter:o=!1,radius:d="6px",bodySx:u={},footerSx:h={},sx:x=null,bg:m,background:p,children:j,...g}=e;return(0,l.jsx)(c.Provider,{value:d,children:(0,l.jsxs)(a.Zb,{sx:{border:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))},borderRadius:d,...x},...g,children:[t||null,n||null,(0,l.jsxs)(s,{bg:m,background:p,sx:u,withRadius:!i,children:[r?(0,l.jsx)(r,{}):null,j||null]}),i?(0,l.jsx)(s,{bg:m,background:p,sx:{...o?{borderTop:e=>{let{colors:t}=e;return"1px solid ".concat(String(null==t?void 0:t.borders))}}:null,...h},radius:d,withRadius:!0,children:"object"==typeof i?i:(0,l.jsx)(i,{})}):null]})})}},7974:function(e,t,n){"use strict";n.d(t,{Sn:function(){return c},lS:function(){return l},nG:function(){return r},pq:function(){return i},rd:function(){return s},xo:function(){return a}});let l=["components","update","insert"],r=["png","jpg","jpeg"],a=/^[A-Za-z0-9]+(?:_[A-Za-z0-9]+)*$/,s="placeholders/What_are_Slices_mrvome",c="SM_HELP_VIDEOS/mock_data",i="slice-machine-simulator"},83478:function(e){e.exports={column:"BlankSlate_column__genEe",root:"BlankSlate_root__CmSqW BlankSlate_column__genEe",fadeIn:"BlankSlate_fadeIn__mAfi5",withBackground:"BlankSlate_withBackground__mLYij",image:"BlankSlate_image__Jn90S BlankSlate_column__genEe",content:"BlankSlate_content__0Yt2d BlankSlate_column__genEe",desc:"BlankSlate_desc___Dl7e",actions:"BlankSlate_actions__OYRj4"}}}]);

package/out/_next/static/chunks/489-949e8f6070a61205.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[489],{19489:function(e,t,l){"use strict";l.d(t,{H:function(){return e1}});var a=l(52322),i=l(56803),n=l(97729),o=l.n(n),r=l(5632),s=l(2784),c=l(56580),d=l(43388),u=l(77630),m=l(23094),h=l(59294),p=l(51384),x=l(74217),v=l(94160),b=l(68968),y=l(23710),j=l(54597),f=l(98564);let g=(0,s.createContext)(void 0);function S(e){let{children:t,initialCustomType:l}=e,[i,n]=(0,s.useState)(l),o=(0,u.y6)(i),r=f.$[o],{actionQueueStatus:c,setNextAction:d}=(0,y.c)({errorMessage:r.autoSaveFailed}),{refreshState:m}=(0,j.Z)(),h=(0,x.R9)(m),{syncChanges:p}=(0,b.g)(),S=(0,s.useCallback)(e=>{let{customType:t,onSaveCallback:l,updateMeta:a}=e;n(t),d(async()=>{let{errors:e}=await (0,v.KA)({customType:t,updateMeta:a});if(e.length>0)throw e;h(await (0,v.y0)()),p(),null==l||l()})},[d,h,p]),C=(0,s.useMemo)(()=>({actionQueueStatus:c,customType:i,setCustomType:S}),[c,i,S]);return(0,a.jsx)(g.Provider,{value:C,children:"function"==typeof t?t(C):t})}function C(){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:n,setCustomType:o}=C(),[r,c]=null!==(e=(0,u.j5)(n))&&void 0!==e?e:[],d=c?(0,u.N3)(c):"",[m,h]=(0,s.useState)(null!=d?d:""),[p,v]=(0,s.useState)();(0,x.pQ)(t,()=>{t||(h(null!=d?d:""),v(void 0))});let b=(0,s.useCallback)(()=>(0,a.jsx)(i.aX,{name:c?"language":"add",size:"small",color:"grey11"}),[c]);return(0,a.jsxs)(i.ae,{open:t,onOpenChange:l,size:"small",trigger:(0,a.jsx)(i.E,{color:"grey",textColor:"placeholder",textWeight:"normal",renderStartIcon:b,sx:{marginInline:"auto"},children:c?d:"Add an UID"}),children:[(0,a.jsx)(i.al,{title:"Edit the UID label"}),(0,a.jsx)(i.aj,{children:(0,a.jsxs)(i.aJ,{onSubmit:function(){p||(o({customType:c?(0,u.eK)(m,n):(0,u.H8)(m,n)}),l(!1))},children:[(0,a.jsx)(i.D,{flexDirection:"column",padding:16,gap:4,children:(0,a.jsx)(i.aM,{type:"text",label:"Label *",placeholder:"UID",value:m,onValueChange:function(e){h(e),v(function(e){let t=D.safeParse(e,{errorMap:w});if(t.error)return t.error.errors[0].message}(e))},error:p,description:"A label for the UID"})}),(0,a.jsxs)(i.ah,{children:[(0,a.jsx)(i.ai,{size:"medium"}),(0,a.jsx)(i.af,{type:"submit",size:"medium",disabled:!!p,children:"Save"})]})]})})]})}let D=I.z.string().max(35).min(1),w=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(94840),k=l(59532),z=l(63397),L=l(75289);let A=e=>{let{name:t,label:l,placeholder:i,error:n,...o}=e;return(0,a.jsxs)(L.xu,{mb:3,children:[(0,a.jsx)(L.__,{htmlFor:t,mb:2,children:l}),(0,a.jsx)(z.gN,{name:t,type:"text",placeholder:i,as:L.II,autoComplete:"off",...o}),n?(0,a.jsx)(L.xv,{sx:{color:"error",mt:1},children:n}):null]})};var N=e=>{let{isOpen:t,onSubmit:l,close:i,tabIds:n}=e;return(0,a.jsx)(k.Z,{isOpen:t,widthInPx:"530px",formId:"create-tab",close:i,onSubmit:e=>{l(e),i()},initialValues:{id:""},validate:e=>{let{id:t}=e;return t?n.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,a.jsx)(A,{name:"id",label:"New Tab ID",placeholder:"A label for selecting the tab (i.e. not used in the API)",error:t.id})}})},M=e=>{let{isOpen:t,onSubmit:l,close:i}=e;return(0,a.jsx)(k.Z,{omitFooter:!0,isOpen:t,widthInPx:"530px",formId:"create-tab",close:i,cardProps:{bodySx:{p:0}},onSubmit:e=>{l(e),i()},initialValues:{},content:{title:"Remove Tab"},children:()=>(0,a.jsxs)(L.xu,{sx:{px:4,py:4},children:[(0,a.jsx)(L.X6,{as:"h4",children:"Remove this tab?"}),(0,a.jsx)(L.xv,{as:"p",color:"textClear",sx:{mt:2},children:"This action cannot be undone."}),(0,a.jsx)(L.zx,{type:"button",variant:"buttons.actionDelete",sx:{mt:3},onClick:()=>{l({}),i()},children:"Yes, remove tab"})]})})},E=e=>{let{isOpen:t,onSubmit:l,close:i,tabIds:n,initialTabKey:o}=e;return(0,a.jsx)(k.Z,{omitFooter:!0,isOpen:t,widthInPx:"530px",formId:"create-tab",close:i,cardProps:{bodySx:{p:0}},onSubmit:e=>{l(e),i()},initialValues:{id:o},validate:e=>{let{id:t}=e;return t?n.includes(t.toLowerCase())?{id:"Tab exists already"}:void 0:{id:"Tab ID is required"}},content:{title:"Rename Tab"},children:e=>{let{errors:t,values:n,setFieldValue:o,isValid:r}=e;return(0,a.jsxs)(L.xu,{sx:{px:4,py:4},children:[(0,a.jsx)(A,{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=>{n.id!==e.target.value&&o("id",e.target.value.trim())},onChange:e=>{o("id",e.target.value)}}),(0,a.jsx)(L.zx,{type:"button",sx:{mt:3,width:"100%"},disabled:!r,onClick:()=>{n.id&&n.id.length&&l({id:n.id.trim()}),i()},children:"Save"})]})}})},Z=l(28316),O=l(88932),P=l(35289),F=l(17378),B=l(45440),K=l(16086),R=l(358),U=l(5495),V=l(39302),X=l(3285),G=l(40141),H=l(65077),Y=l(91589);let q=e=>{let{openCreateSliceModal:t,openCreateSliceFromImageModal:l,openUpdateSliceZoneModal:n,openSlicesTemplatesModal:o,projectHasAvailableSlices:r,isSlicesTemplatesSupported:s}=e;return(0,a.jsxs)(i.s,{"data-testid":"slice-zone-blank-slate",sx:{width:648},children:[(0,a.jsx)(i.x,{lineColor:"purple9",backgroundColor:"purple5",name:"add",size:"large"}),(0,a.jsx)(i.z,{size:"big",children:"Add slices"}),(0,a.jsx)(i.w,{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,a.jsx)(i.v,{children:(0,a.jsxs)(i.A,{children:[(0,a.jsx)(i.b,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"autoFixHigh",size:"small",iconSize:"medium",color:"purple",variant:"solid",radius:6}),onClick:l,description:"Build a slice based on your design image.",children:"Generate from image"}),(0,a.jsx)(i.b,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"add",size:"small",iconSize:"medium",color:"white",variant:"solid",radius:6}),onClick:t,description:"Build a custom slice your way.",children:"Start from scratch"}),s&&(0,a.jsx)(i.b,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"contentCopy",size:"small",iconSize:"medium",color:"white",variant:"solid",radius:6}),onClick:o,description:"Choose from ready-made examples.",children:"Use a template"}),r&&(0,a.jsx)(i.b,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"folder",size:"small",iconSize:"medium",color:"white",variant:"solid",radius:6}),onClick:n,description:"Select from your created slices.",children:"Reuse an existing slice"})]})})]})};var Q=l(98250);function W(e){let{customType:t,tabId:l,slices:a}=e,i={...t};return a.forEach(e=>{i={...i,tabs:i.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}),i}var $=l(18566),J=l(80148);async function ee(){try{let{templates:e,errors:t}=await J.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(6256),el=l(39204),ea=l(7723),ei=l(33986),en=l(30527),eo=l(55862);let er=e=>{let{deleteSliceZone:t,closeDeleteSliceZoneModal:l}=e;return(0,a.jsx)(eo.Z,{isOpen:!0,shouldCloseOnOverlayClick:!0,style:{content:{maxWidth:612}},onRequestClose:l,children:(0,a.jsx)(en.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,a.jsxs)(L.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,a.jsx)(L.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:"Do you really want to delete Slice Zone?"}),(0,a.jsx)(L.x8,{type:"button",onClick:l})]}),Footer:()=>(0,a.jsxs)(L.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,a.jsx)(ei.z,{label:"Cancel",variant:"secondary",onClick:l,sx:{mr:"10px",fontWeight:"bold",color:"grey12",borderRadius:6}}),(0,a.jsx)(ei.z,{label:"Delete",variant:"danger",onClick:t,sx:{minHeight:39,minWidth:78}})]}),children:(0,a.jsx)(L.nv,{children:"You're about to delete Slice Zone."})})})};var es=l(43776),ec=l(62434),ed=l(63908),eu=l(63019),em=l(65375),eh=l.n(em);let ep=e=>{var t;let{isOpen:l,close:n,onSubmit:o,isLoading:r,slice:d,libraries:u}=e,{remoteSlices:m}=(0,c.v9)(e=>({remoteSlices:(0,ea.sT)(e)})),h={from:null===(t=u[0])||void 0===t?void 0:t.name,sliceName:(0,R.MP)(d.key)},[p,v]=(0,s.useState)(h),[b,y]=(0,s.useState)();function j(e){v(e),y((0,eu.h)(e,u,m))}return(0,x.pQ)(l,()=>{l||(v(h),y(void 0))}),(0,a.jsxs)(i.ae,{open:l,onOpenChange:e=>!e&&n(),size:{width:448,height:"auto"},children:[(0,a.jsx)(i.al,{title:"Upgrade slice"}),(0,a.jsx)(i.aj,{children:(0,a.jsx)(i.aJ,{onSubmit:function(){b&&Object.keys(b).length>0||o({libraryID:p.from,sliceID:p.sliceName})},children:(0,a.jsxs)(i.D,{flexDirection:"column",children:[(0,a.jsxs)(i.bn,{className:eh().scrollArea,children:[(0,a.jsx)(i.bL,{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,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"This will not migrate your component. You will need to do that manually."}),(0,a.jsxs)(i.D,{flexDirection:"column",gap:4,children:[(0,a.jsx)(i.aM,{label:"Slice name *",placeholder:"Pascalised Slice API ID (e.g. ".concat((0,R.MP)(d.key),")"),error:null==b?void 0:b.sliceName,value:p.sliceName,onValueChange:e=>j({...p,sliceName:e.slice(0,30)}),"data-testid":"slice-name-input"}),(0,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"A display name for the slice"})]}),(0,a.jsxs)(i.D,{flexDirection:"column",gap:4,children:[(0,a.jsx)("label",{className:eh().label,children:(0,a.jsx)(i.bL,{variant:"bold",children:"Slice library *"})}),(0,a.jsx)(i.bq,{size:"medium",color:"grey",startIcon:"folder",flexContent:!0,value:p.from,onValueChange:e=>{e&&j({...p,from:e})},children:u.map(e=>(0,a.jsx)(i.bt,{value:e.name,children:e.name},e.name))}),(0,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"The library where we'll store your slice"})]})]}),(0,a.jsxs)(i.ah,{children:[(0,a.jsx)(i.ai,{size:"medium"}),(0,a.jsx)(i.af,{type:"submit",size:"medium",loading:r,disabled:b&&Object.keys(b).length>0,children:"Upgrade"})]})]})})})]})};var ex=l(96009),ev=l.n(ex);let eb=e=>{var t,l;let{isOpen:n,close:o,onSubmit:r,isLoading:c,slice:d,sliceName:u,libraries:m,localSharedSlices:h}=e,p={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,b]=(0,s.useState)(!0),[y,j]=(0,s.useState)(p),[f,g]=(0,s.useState)({});function S(e){j(e),g(ey(e,m))}return(0,x.pQ)(n,()=>{n||(j(p),g({}))}),(0,a.jsxs)(i.ae,{open:n,onOpenChange:e=>!e&&o(),size:{width:448,height:"auto"},children:[(0,a.jsx)(i.al,{title:"Convert to slice variation"}),(0,a.jsx)(i.aj,{children:(0,a.jsx)(i.aJ,{onSubmit:function(){Object.keys(f).length>0||r(y)},children:(0,a.jsxs)(i.D,{display:"flex",flexDirection:"column",children:[(0,a.jsxs)(i.bn,{className:eh().scrollArea,children:[(0,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"If you have multiple slices that are similar, you can combine them as variations of the same slice."}),(0,a.jsxs)(i.D,{display:"flex",flexDirection:"column",gap:4,children:[(0,a.jsxs)("label",{className:eh().label,children:[(0,a.jsx)(i.bL,{variant:"bold",children:"Target slice *"}),"string"==typeof f.libraryID?(0,a.jsx)(i.bL,{variant:"small",color:"tomato10",children:f.libraryID}):null,"string"==typeof f.sliceID?(0,a.jsx)(i.bL,{variant:"small",color:"tomato10",children:f.sliceID}):null]}),(0,a.jsx)(i.bq,{size:"medium",color:"grey",startIcon:"viewDay",flexContent:!0,value:"".concat(y.libraryID,"::").concat(y.sliceID),onValueChange:e=>{if(e){let[t,l]=e.split("::");S({...y,libraryID:t,sliceID:l})}},children:h.map(e=>(0,a.jsxs)(i.bt,{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,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"Choose the slice to which you would like to add this variation."})]}),(0,a.jsx)(i.D,{display:"flex",flexDirection:"column",gap:4,children:(0,a.jsx)(i.aM,{label:"Variation name *",placeholder:u,error:f.variationName,value:y.variationName,onValueChange:e=>{let t={...y,variationName:e.slice(0,30)};v&&(t.variationID=ev()(t.variationName)),S(t)},"data-testid":"variation-name-input"})}),(0,a.jsx)(i.D,{display:"flex",flexDirection:"column",gap:4,children:(0,a.jsx)(i.aM,{label:"ID *",placeholder:ev()(d.key),error:f.variationID,value:y.variationID,onValueChange:e=>{b(!1),S({...y,variationID:e.slice(0,30)})},"data-testid":"variation-id-input"})})]}),(0,a.jsxs)(i.ah,{children:[(0,a.jsx)(i.ai,{size:"medium"}),(0,a.jsx)(i.af,{type:"submit",size:"medium",loading:c,disabled:Object.keys(f).length>0,children:"Convert"})]})]})})})]})},ey=(e,t)=>{let l={};e.libraryID||(l.libraryID="Cannot be empty.");let a=t.find(t=>t.path===e.libraryID);l.libraryID||a||(l.libraryID="Does not exist."),e.sliceID||(l.sliceID="Cannot be empty.");let i=null==a?void 0:a.components.find(t=>t.model.id===e.sliceID);if(l.sliceID||i||(l.sliceID="Does not exist."),e.variationName||(l.variationName="Cannot be empty."),e.variationID){var n;(null!==(n=null==i?void 0:i.model.variations.map(e=>e.id))&&void 0!==n?n:[]).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:n,close:o,onSubmit:r,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),[p,v]=(0,s.useState)();return(0,x.pQ)(n,()=>{n||(h(u),v(void 0))}),(0,a.jsxs)(i.ae,{open:n,onOpenChange:e=>!e&&o(),size:{width:448,height:"auto"},children:[(0,a.jsx)(i.al,{title:"Merge with an existing slice"}),(0,a.jsx)(i.aj,{children:(0,a.jsx)(i.aJ,{onSubmit:function(){if(p)return;let[e,t,l]=m.split("::");r({libraryID:e,sliceID:t,variationID:l})},children:(0,a.jsxs)(i.D,{display:"flex",flexDirection:"column",children:[(0,a.jsxs)(i.bn,{className:eh().scrollArea,children:[(0,a.jsx)(i.bL,{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,a.jsxs)(i.D,{display:"flex",flexDirection:"column",gap:4,children:[(0,a.jsxs)("label",{className:eh().label,children:[(0,a.jsx)(i.bL,{variant:"bold",children:"Target slice*"}),"string"==typeof p?(0,a.jsx)(i.bL,{variant:"small",color:"tomato10",children:p}):null]}),(0,a.jsx)(i.bq,{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,a.jsx)(i.bt,{value:e.path,children:e.path.split("::").join(" > ")},e.path))}),(0,a.jsx)(i.bL,{variant:"normal",color:"grey11",children:"Choose a slice that you would like to merge this into."})]})]}),(0,a.jsxs)(i.ah,{children:[(0,a.jsx)(i.ai,{size:"medium"}),(0,a.jsx)(i.af,{type:"submit",size:"medium",loading:c,disabled:!!p,children:"Merge"})]})]})})})]})},ef=e=>{var t;let{slice:l,path:n}=e,{refreshState:o}=(0,j.Z)(),[r,d]=(0,s.useState)(!1),[u,m]=(0,s.useState)(),{setCustomType:h}=C(),{libraries:p}=(0,c.v9)(e=>({libraries:(0,ea.Sd)(e)})),x="Slice"===l.value.type&&null!==(t=l.value.fieldset)&&void 0!==t?t:l.key,b=p.filter(e=>e.isLocal),y=b.map(e=>e.components).flat(),f=eg(l,x,y),g=async e=>{var t,a,i;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:r}=await J.managerClient.slices.convertLegacySliceToSharedSlice({model:l.value,src:{...n,sliceID:l.key},dest:{libraryID:e.libraryID,sliceID:e.sliceID,variationName:null!==(a=e.variationName)&&void 0!==a?a:"Default",variationID:null!==(i=e.variationID)&&void 0!==i?i:"default"}});if(r.length)throw console.error("Could not convert slice `".concat(x,"`"),r),O.Am.error("Could not convert slice `".concat(x,"`")),r;let{model:s,errors:c}=await J.managerClient.customTypes.readCustomType({id:n.customTypeID});if(c.length||!s){console.error("Could not refresh custom type view `".concat(n.customTypeID,"`"),c),O.Am.error("Could not refresh custom type view `".concat(n.customTypeID,"`"));return}switch(o(await (0,v.y0)()),d(!1),m(void 0),u){case"as_new_slice":O.Am.success("".concat(x," has been upgraded to a new slice ").concat(e.libraryID," > ").concat(e.sliceID));break;case"as_new_variation":O.Am.success("".concat(x," has been converted as a variation of ").concat(e.libraryID," > ").concat(e.sliceID));break;default:O.Am.success("".concat(x," has been merged with ").concat(e.libraryID," > ").concat(e.sliceID))}h({customType:s})},S={path:n,slice:l,sliceName:x,libraries:b,localSharedSlices:y,identicalSlices:f,close:()=>m(void 0),onSubmit:g,isLoading:r};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i.ar,{children:[(0,a.jsx)(i.av,{children:(0,a.jsx)(i.E,{"data-testid":"convert-legacy-slice",startIcon:"refresh",endIcon:"arrowDropDown",size:"medium",color:"grey",children:"Migrate legacy slice"})}),(0,a.jsxs)(i.as,{align:"start",children:[(0,a.jsx)(i.at,{startIcon:(0,a.jsx)(i.aX,{name:"folder",size:"large"}),description:"Use it with new types",onSelect:()=>m("as_new_slice"),children:"Upgrade slice"}),(0,a.jsx)(i.at,{startIcon:(0,a.jsx)(i.aX,{name:"viewDay",size:"large"}),description:"Add it to another slice",onSelect:()=>m("as_new_variation"),disabled:!y.length,children:"Convert to slice variation"}),(0,a.jsx)(i.at,{startIcon:(0,a.jsx)(i.aX,{name:"driveFileMove",size:"large"}),description:"Combine identical slices",onSelect:()=>m("merge_with_identical"),disabled:!f.length,children:"Merge with another slice"})]})]}),(0,a.jsx)(ep,{...S,isOpen:"as_new_slice"===u}),(0,a.jsx)(eb,{...S,isOpen:"as_new_variation"===u}),(0,a.jsx)(ej,{...S,isOpen:"merge_with_identical"===u})]})},eg=(e,t,l)=>(0,s.useMemo)(()=>{let a=[],i=(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);i.primary===l.primary&&i.items===l.items&&a.push({libraryID:e.from,sliceID:e.model.id,variationID:t.id,path:"".concat(e.from,"::").concat(e.model.id,"::").concat(t.id)})}return a},[e,t,l]),eS=e=>{let{slice:t,path:l}=e,[n]=(0,es.E)("legacySliceUpgrader"),o=n.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,a.jsxs)(ec.Zb,{children:[(0,a.jsx)(ec.ZB,{component:"div",children:(0,a.jsx)(i.D,{alignItems:"center",justifyContent:"center",children:(0,a.jsx)(i.bL,{color:"grey11",component:"span",children:"No screenshot available"})})}),(0,a.jsxs)(ec.T$,{children:[(0,a.jsx)(i.c3,{content:o,side:"bottom",children:(0,a.jsx)(i.m,{color:"purple",title:"Legacy Slice"})}),n.enabled?(0,a.jsx)(ef,{slice:t,path:l}):null]}),(0,a.jsx)(ec.eW,{subtitle:"1 variation",title:(0,ed.Dj)(t.value)})]})};var eC=l(51507),eI=l(21151);let eT=e=>{let{slices:t,format:l,path:i,onRemoveSharedSlice:n}=e,o=t.some(e=>"SharedSlice"!==e.type),r=f.$[l],[c]=(0,es.E)("legacySliceUpgrader");return(0,s.useEffect)(()=>{o&&(c.enabled?O.Am.info("This ".concat(r.name({start:!1,plural:!1})," contains legacy slices that can be upgraded.")):O.Am.warning("This ".concat(r.name({start:!1,plural:!1})," contains slices that are incompatible.")))},[o]),(0,a.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,a.jsx)(eS,{slice:t,path:i})}{let t=e.payload;return(0,a.jsx)(eC.b,{action:{type:"remove",onRemove:()=>{n(t.model.id)}},mode:"navigation",slice:t,variant:"solid"})}},sx:{padding:"16px"}})};async function eD(e){try{let{templateIDs:t,localLibrariesNames:l,location:a,onSuccess:i}=e,{data:n,errors:o}=await J.managerClient.sliceTemplateLibrary.createSlices({templateIDs:t});if(o.length>0||void 0===n)throw o;n.sliceIDs.forEach((e,i)=>{v.Xe.track({event:"slice:created",id:e,name:e,library:l[0],location:a,mode:"template",sliceTemplate:t[i]})}),await i(n.sliceIDs)}catch(t){let e="Internal Error: Slice(s) not created";console.error(e,t),O.Am.error(e)}}var ew=l(26109),e_=e=>{let{availableSlices:t,values:l}=e;return(0,a.jsx)(z.F2,{name:"sliceKeys",render:e=>(0,a.jsx)(eI.Z,{gridTemplateMinPx:"200px",elems:t,defineElementKey:e=>"".concat(e.from,"-").concat(e.model.name),renderElem:t=>{let i=l.sliceKeys.includes(t.model.id);return(0,a.jsx)(eC.b,{action:{type:"checkbox"},mode:"selection",onSelectedChange:a=>{a?e.push(t.model.id):e.remove(l.sliceKeys.indexOf(t.model.id))},selected:i,slice:t,variant:"outlined"})}})})};let ek=e=>{let{formId:t,close:l,onSuccess:i,availableSlicesTemplates:n,localLibraries:o,location:r}=e,{createSliceSuccess:s}=(0,j.Z)();return(0,a.jsx)(k.Z,{isOpen:!0,buttonLabel:"Add",formId:t,close:l,onSubmit:e=>{let{sliceKeys:t}=e;eD({templateIDs:t,localLibrariesNames:o.map(e=>e.name),location:r,onSuccess:async e=>{s((await (0,v.y0)()).libraries),i(await Promise.all(e.map(async e=>(await J.managerClient.slices.readSlice({libraryID:o[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,a.jsx)(L.xv,{sx:{color:"error"},children:t.sliceKeys}):void 0},children:e=>{let{values:t}=e;return(0,a.jsx)(e_,{values:t,availableSlices:n.map(e=>({extension:"",fileName:"",from:"",href:"",pathToSlice:"",model:ew.id.toSM(e.model),screenshots:Object.entries(e.screenshots).reduce((e,t)=>({...e,[t[0]]:{url:t[1]}}),{})}))})}})};var ez=e=>{let{formId:t,close:l,onSubmit:i,availableSlices:n}=e;return(0,a.jsx)(k.Z,{isOpen:!0,buttonLabel:"Add",formId:t,close:l,onSubmit:e=>{let{sliceKeys:t}=e;i(t.map(e=>{var t;return null===(t=n.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,a.jsx)(L.xv,{sx:{color:"error"},children:t.sliceKeys}):void 0},children:e=>{let{values:t}=e;return(0,a.jsx)(e_,{values:t,availableSlices:n})}})};let eL=(e,t)=>{let l=(t||[]).reduce((e,t)=>[...e,...t.components],[]),{slicesInSliceZone:a,notFound:i}=e.value.reduce((e,t)=>{let{key:a,value:i}=t;if("SharedSlice"===i.type){let t=l.find(e=>e.model.id===a);return t?{...e,slicesInSliceZone:[...e.slicesInSliceZone,{type:"SharedSlice",payload:t}]}:{...e,notFound:[...e.notFound,{key:a}]}}return{...e,slicesInSliceZone:[...e.slicesInSliceZone,{type:"Slice",payload:{key:a,value:i}}]}},{slicesInSliceZone:[],notFound:[]});return{availableSlices:l,slicesInSliceZone:a,notFound:i}};var eA=e=>{var t;let{customType:l,onCreateSliceZone:n,onDeleteSliceZone:o,onRemoveSharedSlice:r,sliceZone:d,tabId:u}=e,m=(0,$.QT)(ee,[]),[h,p]=(0,s.useState)(!1),[x,b]=(0,s.useState)(!1),[y,f]=(0,s.useState)(!1),[g,S]=(0,s.useState)(!1),{remoteSlices:I,libraries:T}=(0,c.v9)(e=>({remoteSlices:(0,ea.sT)(e),libraries:(0,ea.Sd)(e),slices:(0,ea.xC)(e)})),{setCustomType:D}=C(),{completeStep:w}=(0,Q.k)(),{openLoginModal:k}=(0,j.Z)(),z=T.filter(e=>e.isLocal),{availableSlices:L,slicesInSliceZone:A,notFound:N}=(0,s.useMemo)(()=>d?eL(d,T):{availableSlices:[],slicesInSliceZone:[],notFound:[]},[d,T]),[M,E]=(0,s.useState)(!1);(0,s.useEffect)(()=>{(null==N?void 0:N.length)&&N.forEach(e=>{let{key:t}=e;r(t)})},[N]);let Z=A.filter(e=>"SharedSlice"===e.type).map(e=>e.payload),F=L.filter(e=>!Z.some(t=>t.model.id===e.model.id)),B=()=>{b(!0)},K=()=>{f(!0)},R=async()=>{await J.managerClient.user.checkIsLoggedIn()?S(!0):k()},U=()=>{p(!0),v.Xe.track({event:"custom-type:open-add-from-templates",customTypeId:l.id,customTypeFormat:l.format})},V=()=>{b(!1)},X=()=>{f(!1)},G=()=>{S(!1)},ei=()=>{p(!1)};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(P.Bu,{actions:d?(0,a.jsxs)(i.ar,{children:[(0,a.jsx)(i.av,{children:(0,a.jsx)(i.E,{color:"purple",startIcon:"add","data-testid":"add-new-slice-dropdown",children:"Add"})}),(0,a.jsxs)(i.as,{align:"end",children:[(0,a.jsx)(i.at,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"autoFixHigh",size:"extraSmall",iconSize:"small",radius:6,variant:"solid",color:"purple"}),onSelect:()=>void R(),description:"Build a slice based on your design image.",children:"Generate from image"}),(0,a.jsx)(i.at,{renderStartIcon:()=>(0,a.jsx)(i.B,{name:"add",size:"extraSmall",iconSize:"small",radius:6,variant:"solid",color:"white"}),onSelect:K,description:"Build a custom slice your way.",children:"Start from scratch"}),m.length>0?(0,a.jsx)(i.at,{onSelect:U,renderStartIcon:()=>(0,a.jsx)(i.B,{name:"contentCopy",size:"extraSmall",iconSize:"small",radius:6,variant:"solid",color:"white"}),description:"Choose from ready-made examples.",children:"Use a template"}):void 0,F.length>0?(0,a.jsx)(i.at,{onSelect:B,renderStartIcon:()=>(0,a.jsx)(i.B,{name:"folder",size:"extraSmall",iconSize:"small",radius:6,variant:"solid",color:"white"}),description:"Select from your created slices.",children:"Reuse an existing slice"}):void 0]})]}):void 0,toggle:"page"!==l.format||"Main"!==u?(0,a.jsx)(i.bC,{checked:!!d,onCheckedChange:e=>{e?n():E(!0)},size:"small","data-testid":"slice-zone-switch"}):void 0,children:"Slices"}),d?A.length>0?(0,a.jsx)(H.xR,{children:(0,a.jsx)(eT,{slices:A,format:l.format,path:{customTypeID:l.id,tabID:u,sliceZoneID:null!==(t=null==d?void 0:d.key)&&void 0!==t?t:""},onRemoveSharedSlice:r})}):(0,a.jsx)(i.D,{flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:"center",padding:{block:32},children:(0,a.jsx)(q,{openUpdateSliceZoneModal:B,openCreateSliceModal:K,openCreateSliceFromImageModal:()=>void R(),openSlicesTemplatesModal:U,projectHasAvailableSlices:F.length>0,isSlicesTemplatesSupported:m.length>0})}):void 0,x&&(0,a.jsx)(ez,{formId:"tab-slicezone-form-".concat(u),availableSlices:F,onSubmit:e=>{let t=W({customType:l,tabId:u,slices:e});D({customType:_.Dc.fromSM(t),onSaveCallback:()=>{O.Am.success("Slice(s) added to slice zone")}}),w("createSlice"),V()},close:V}),h&&(0,a.jsx)(ek,{formId:"tab-slicezone-form-".concat(u),availableSlicesTemplates:m,localLibraries:z,location:"".concat(l.format,"_type"),onSuccess:e=>{let t=W({customType:l,tabId:u,slices:e});D({customType:_.Dc.fromSM(t),onSaveCallback:()=>{O.Am.success((0,a.jsx)(el.GX,{message:"Slice template(s) added to slice zone and created at: ",path:"".concat(z[0].name,"/")}))}}),w("createSlice"),ei()},close:ei}),M&&(0,a.jsx)(er,{closeDeleteSliceZoneModal:()=>{E(!1)},deleteSliceZone:()=>{o(),E(!1)}}),(null==z?void 0:z.length)!==0&&y&&(0,a.jsx)(et.c,{onSuccess:e=>{let t=W({customType:l,tabId:u,slices:[e]});D({customType:_.Dc.fromSM(t),onSaveCallback:()=>{O.Am.success((0,a.jsx)(el.GX,{message:"New slice added to slice zone and created at: ",path:"".concat(z[0].name,"/")}))}}),X()},localLibraries:z,location:"".concat(l.format,"_type"),remoteSlices:I,onClose:X}),(0,a.jsx)(Y.S,{open:g,location:"".concat(l.format,"_type"),onSuccess:e=>{let{slices:t,library:i}=e,n=W({customType:l,tabId:u,slices:t.map(e=>e.model)});D({customType:_.Dc.fromSM(n),onSaveCallback:()=>{O.Am.success((0,a.jsx)(el.GX,{message:"Slice(s) added to slice zone and created at: ",path:i}))}}),G()},onClose:G})]})};let eN=[B.C.UID,B.C.Image,B.C.Text,B.C.StructuredText,B.C.Link,B.C.Select,B.C.Boolean,B.C.Number,B.C.Color,B.C.Date,B.C.Table,B.C.Embed,B.C.Timestamp,B.C.GeoPoint,B.C.ContentRelationship,B.C.LinkToMedia,B.C.Group,B.C.NestedGroup];var eM=e=>{var t,l,n,o;let{tabId:r}=e,{customType:c,setCustomType:d}=C(),m=_.Dc.toSM(c),h=null===(t=m.tabs.find(e=>e.key===r))||void 0===t?void 0:t.sliceZone,p=null!==(n=null===(l=m.tabs.find(e=>e.key===r))||void 0===l?void 0:l.value)&&void 0!==n?n:[],x="page"===m.format&&m.repeatable?p.filter(e=>"uid"!==e.key):p,v=m.tabs.reduce((e,t)=>[...e,...t.value],[]),b=e=>{var t;let{apiId:l,value:a}=e,i=null===(t=a.config)||void 0===t?void 0:t.label;if((0,K.Ss)(B.C,a.type)||null==i)return;if("Range"===a.type||"IntegrationFields"===a.type||"Separator"===a.type)throw Error("Unsupported Field Type: ".concat(a.type));let n=B.C[a.type];try{n.schema.validateSync(a,{stripUnknown:!1})}catch(e){throw Error('Add field: Model is invalid for field "'.concat(a.type,'".'))}let o=_.L$.fromSM(a);d({customType:(0,u.xS)({customType:c,newField:o,newFieldId:l,sectionId:r}),onSaveCallback:()=>{O.Am.success("".concat("Group"===a.type?"Group":"Field"," added"))}}),(0,U.V)({id:l,field:o})},y=e=>{let{apiId:t,newKey:l,value:a,inGroupFieldAction:i,updateMeta:n}=e;if((0,K.Ss)(B.C,a.type))return;let o=_.L$.fromSM(a);d({customType:(0,u.L4)({customType:c,previousFieldId:t,newFieldId:l,newField:o,sectionId:r}),onSaveCallback:()=>{"add"===i&&O.Am.success("Field added")},updateMeta:n}),i||(0,V.Z)({previousId:t,id:l,field:o})};return(0,a.jsx)(F.S,{children:(0,a.jsx)(s.Suspense,{fallback:(0,a.jsx)(i.D,{padding:32,children:(0,a.jsx)(i.bg,{})}),children:(0,a.jsxs)(P.aV,{border:!1,style:{flexGrow:1},children:[(0,a.jsx)(G.Z,{zoneType:"customType",zoneTypeFormat:null!==(o=c.format)&&void 0!==o?o:"custom",tabId:r,title:"Static zone",dataTip:"",fields:x,poolOfFieldsToCheck:v,showHints:!0,EditModal:X.Z,widgetsArray:eN,onDeleteItem:e=>{d({customType:(0,u.AK)({customType:c,fieldId:e,sectionId:r})})},onSave:e=>""===e.apiId?b({...e,apiId:e.newKey}):y(e),onDragEnd:e=>{if((0,K.uS)(e))return;let{source:t,destination:l}=e;if(!l)return;let a=(0,u.gR)({customType:c,sourceIndex:t.index,destinationIndex:l.index,sectionId:r});(0,Z.flushSync)(()=>d({customType:a}))},renderHintBase:e=>{let{item:t}=e;return"data".concat((0,R.Ti)(t.key))},renderFieldAccessor:e=>"data".concat((0,R.Ti)(e)),testId:"static-zone-content",isRepeatableCustomType:c.repeatable}),(0,a.jsx)(eA,{customType:m,tabId:r,sliceZone:h,onRemoveSharedSlice:e=>{d({customType:(0,u.EN)({customType:c,sectionId:r,sliceId:e})})},onCreateSliceZone:()=>{d({customType:(0,u.Tr)(c,r)})},onDeleteSliceZone:()=>{d({customType:(0,u.E3)(c,r)})}})]})})})};let eE=()=>{var e,t,l;let{customType:n,setCustomType:o}=C(),r=_.Dc.toSM(n),[c,d]=(0,s.useState)(null===(e=r.tabs[0])||void 0===e?void 0:e.key),[m,h]=(0,s.useState)(),p=(null===(l=r.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,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i.c9,{sx:p?{flexGrow:1}:void 0,children:["page"===n.format?(0,a.jsx)(i.ca,{title:n.repeatable?(0,a.jsx)(T,{}):void 0}):void 0,(0,a.jsxs)(i.cb,{onValueChange:d,value:c,children:[(0,a.jsx)(i.cd,{onAddNewTab:()=>{h({type:"CREATE_CUSTOM_TYPE_TAB"})},children:r.tabs.map(e=>(0,a.jsx)(i.ce,{menu:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.at,{onSelect:()=>{h({type:"UPDATE_CUSTOM_TYPE_TAB",tabKey:e.key})},startIcon:(0,a.jsx)(i.aX,{name:"edit"}),children:"Rename"}),(0,a.jsx)(i.at,{color:"tomato",disabled:function(e){if(r.tabs.length<=1)return!0;let t=r.tabs.find(e=>e.value.find(e=>"uid"===e.key));return"page"===n.format&&n.repeatable&&(null==t?void 0:t.key)===e}(e.key),onSelect:()=>{h({type:"DELETE_CUSTOM_TYPE_TAB",tabKey:e.key})},startIcon:(0,a.jsx)(i.aX,{name:"delete"}),children:"Remove"})]}),value:e.key,children:e.key},e.key))}),r.tabs.map(e=>(0,a.jsx)(i.cc,{value:e.key,children:(0,a.jsx)(eM,{tabId:e.key})},e.key))]})]}),(null==m?void 0:m.type)==="CREATE_CUSTOM_TYPE_TAB"?(0,a.jsx)(N,{close:()=>{h(void 0)},isOpen:!0,onSubmit:e=>{let{id:t}=e;o({customType:(0,u.vB)(n,t)}),d(t)},tabIds:r.tabs.map(e=>e.key.toLowerCase())}):void 0,(null==m?void 0:m.type)==="UPDATE_CUSTOM_TYPE_TAB"?(0,a.jsx)(E,{close:()=>{h(void 0)},initialTabKey:m.tabKey,isOpen:!0,onSubmit:e=>{let{id:t}=e;o({customType:(0,u.HO)(n,m.tabKey,t)}),c===m.tabKey&&d(t)},tabIds:r.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,a.jsx)(M,{close:()=>{h(void 0)},isOpen:!0,onSubmit:()=>{if(o({customType:(0,u.F$)(n,m.tabKey)}),c===m.tabKey){var e;let t=null===(e=r.tabs.find(e=>e.key!==m.tabKey))||void 0===e?void 0:e.key;void 0!==t&&d(t)}}}):void 0]})};var eZ=l(16442),eO=l(78254),eP=l(60867),eF=l(9975),eB=l(34919),eK=l.n(eB);let eR=e=>{let{tabs:t,...l}=e;return(0,a.jsxs)(eF.fC,{...l,className:eK().root,defaultValue:t[0].label,orientation:"vertical",children:[(0,a.jsx)(eF.aV,{className:eK().list,"aria-label":"content tabs",children:t.map((e,t)=>{let{label:l}=e;return(0,a.jsx)(eF.xz,{className:eK().trigger,value:l,children:(0,a.jsx)(i.bL,{className:eK().triggerText,component:"span",color:"inherit",children:l})},"".concat(l,"-trig").concat(t+1))})}),t.map((e,t)=>{let{label:l,content:n}=e;return(0,a.jsx)(eF.VY,{className:eK().content,value:l,children:(0,a.jsx)(i.bn,{className:eK().scrollArea,children:n})},"".concat(l,"-content").concat(t+1))})]})};var eU=l(25661),eV=l(88241),eX=l(32554),eG=l(44621),eH=l.n(eG);let eY=e=>{var t,l;let{inline:n,...o}=e,r=(0,eX.p)();if(!0===n)return(0,a.jsx)("code",{...o,className:eH().inlineCode});let s=(()=>{var e,t,l,a,i;if((null===(t=o.node)||void 0===t?void 0:null===(e=t.data)||void 0===e?void 0:e.meta)!==void 0){let e=null===(a=o.node)||void 0===a?void 0:null===(l=a.data)||void 0===l?void 0:l.meta;return{fileName:e.substring(1,e.length-1),language:null===(i=o.className)||void 0===i?void 0:i.split("-")[1]}}return null})(),c=null===(t=/language-(\w+)/.exec(null!==(l=o.className)&&void 0!==l?l:""))||void 0===t?void 0:t[1];return(0,a.jsx)(i.W,{...o,onCopy:()=>{v.Xe.track({event:"page-type:copy-snippet",framework:r})},language:c,code:String(o.children).replace(/\n$/,""),title:null==s?void 0:s.fileName})},eq=e=>{let{markdown:t}=e;return(0,a.jsx)(eU.D,{children:t,linkTarget:"_blank",remarkPlugins:[eV.Z],components:{code:e=>(0,a.jsx)(eY,{...e}),h1:e=>(0,a.jsx)(i.bL,{children:e.children,component:"h1",variant:"h1"}),h2:e=>(0,a.jsx)(i.bL,{children:e.children,component:"h2",variant:"h2"}),h3:e=>(0,a.jsx)(i.bL,{children:e.children,component:"h3",variant:"h3"}),h4:e=>(0,a.jsx)(i.bL,{children:e.children,component:"h4",variant:"h4"}),h5:e=>(0,a.jsx)(i.bL,{children:e.children,component:"h4",variant:"h4"}),p:e=>(0,a.jsx)(i.bL,{className:eH().section,children:e.children,component:"p",variant:"normal"}),pre:e=>(0,a.jsx)(i.bL,{className:eH().section,children:e.children,component:"pre",variant:"normal"})}})};async function eQ(e){let t=JSON.parse(e),{errors:l,documentation:a}=await J.managerClient.documentation.read({kind:t.kind,data:t.data});if(l.length>0)throw l;return a}var eW=l(65480),e$=l.n(eW);let eJ=e=>{var t;let{model:l}=e,n=(0,eX.p)(),o=(t={kind:"PageSnippet",data:{model:l}},(0,$.QT)(eQ,[JSON.stringify(t)])),{completeStep:r}=(0,Q.k)();return 0===o.length?null:(0,a.jsxs)(i.ae,{size:"small",trigger:(0,a.jsx)(i.E,{color:"grey",onClick:()=>{r("codePage"),v.Xe.track({event:"page-type:open-snippet",framework:n})},startIcon:"code",children:"Page snippet"}),children:[(0,a.jsx)(i.al,{icon:"code",title:"Page snippet"}),(0,a.jsx)("section",{className:e$().content,children:o.length>1?(0,a.jsx)(eR,{style:{flex:1},tabs:o.map((e,t)=>{let{label:l,content:i}=e;return{label:null!=l?l:"Tab ".concat(t+1),content:(0,a.jsx)(eq,{markdown:i})}})}):(0,a.jsx)(i.bn,{style:{flex:1,padding:16},children:(0,a.jsx)(eq,{markdown:o[0].content})})})]})},e0=e=>{let{model:t}=e;return(0,a.jsx)("div",{children:(0,a.jsx)(F.S,{children:(0,a.jsx)(s.Suspense,{fallback:(0,a.jsx)(i.E,{color:"grey",startIcon:"code",children:"Page snippet"}),children:(0,a.jsx)(eJ,{model:t})})})})},e1=()=>{let e=(0,r.useRouter)(),{selectedCustomType:t}=(0,c.v9)(t=>({selectedCustomType:(0,eO.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,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o(),{children:(0,a.jsxs)("title",{children:[t.local.label," - Slice Machine"]})}),(0,a.jsx)(e4,{customType:t.local})]}):(0,a.jsx)(p.LN,{})},e4=e=>{let{customType:t}=e;return null===t?(0,a.jsx)(p.LN,{}):(0,a.jsx)(p.LN,{children:(0,a.jsx)(S,{initialCustomType:_.Dc.fromSM(t),children:e=>{var l;let{actionQueueStatus:n,customType:o,setCustomType:r}=e,s=(0,u.y6)(o),c=h.cd[t.format],x=f.$[t.format];return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(p.wd,{children:[(0,a.jsx)(p.Xq,{url:c.tablePagePathname}),(0,a.jsxs)(p.Cx,{children:[(0,a.jsx)(d.g,{children:x.name({start:!0,plural:!0})}),(0,a.jsx)(d.g,{active:!0,children:null!==(l=o.label)&&void 0!==l?l:o.id})]}),(0,a.jsxs)(p.K2,{children:[(0,a.jsx)(m.X,{status:n}),"page"===o.format?(0,a.jsx)(e0,{model:o}):void 0,(0,a.jsx)(eP._,{isChangesLocal:!0,format:s,customType:o,setLocalCustomType:r})]})]}),(0,a.jsx)(p.RN,{children:(0,a.jsx)(i.D,{flexDirection:"column",minWidth:0,children:(0,a.jsx)(eE,{})})})]})}})})}},43776:function(e,t,l){"use strict";l.d(t,{E:function(){return i}});var a=l(31470);function i(e){var t,l;let[i,n]=(0,a.f)(),o=async t=>{let l={...i,labs:{...i.labs}};t?l.labs[e]=t:e in l.labs&&delete l.labs[e],0===Object.keys(l.labs).length&&delete l.labs,await n(l)};return[{enabled:null!==(l=null==i?void 0:null===(t=i.labs)||void 0===t?void 0:t[e])&&void 0!==l&&l},o]}},31470:function(e,t,l){"use strict";l.d(t,{f:function(){return n}});var a=l(18566),i=l(80148);function n(){return[(0,a.QT)(o,[]),async e=>{await i.managerClient.project.writeSliceMachineConfig({config:e}),(0,a.VA)(o,[],e)}]}async function o(){return i.managerClient.project.getSliceMachineConfig()}},34919: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"}},65480:function(e){e.exports={content:"PageSnippetDialog_content__jIN6d"}},44621:function(e){e.exports={section:"MarkdownRenderer_section__uNS1M",inlineCode:"MarkdownRenderer_inlineCode__lmGTi"}},65375:function(e){e.exports={scrollArea:"ConvertLegacySliceButton_scrollArea__xf3vM",label:"ConvertLegacySliceButton_label__BK0Gd"}}}]);

package/out/_next/static/chunks/7-4221ce4f79fb2ff2.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7],{91589:function(e,t,a){a.d(t,{S:function(){return h}});var r=a(52322),n=a(56803),s=a(2784),l=a(88932),i=a(94160),c=a(34166),o=a(98250),u=a(68968),d=a(80148),m=a(54597),p=a(62434);function g(e){let{slice:t}=e,a="uploading"===t.status||"generating"===t.status,s="uploadError"===t.status||"generateError"===t.status,l="generateError"===t.status||"generating"===t.status||"success"===t.status;return(0,r.jsxs)(p.Zb,{disabled:a,children:[l?(0,r.jsx)(p.ZB,{src:t.thumbnailUrl}):(0,r.jsx)(p.ZB,{component:"div"}),(0,r.jsx)(p.eW,{loading:a,startIcon:function(e){switch(e){case"uploadError":case"generateError":return"close";case"success":return"check";default:return}}(t.status),title:"success"===t.status?t.model.name:t.image.name,subtitle:function(e){switch(e){case"uploading":return"Uploading...";case"uploadError":return"Unable to upload image";case"generating":return"Generating...";case"generateError":return"Something went wrong";case"success":return"Generated"}}(t.status),error:s,action:s?(0,r.jsx)(n.E,{startIcon:"refresh",color:"grey",onClick:t.onRetry,children:"Retry"}):void 0})]})}function h(e){let{open:t,location:a,onSuccess:p,onClose:h}=e,[j,w]=(0,s.useState)([]),[C,S]=(0,s.useState)(!1),{syncChanges:v}=(0,u.g)(),{createSliceSuccess:I}=(0,m.Z)(),{completeStep:E}=(0,o.k)(),N=(0,s.useRef)(crypto.randomUUID()),U=e=>{let{index:t,slice:a}=e;w(e=>e.map((e,r)=>r===t?a(e):e))},k=e=>{if(e.length>10){l.Am.error("You can only upload ".concat(10," images at a time."));return}w(e.map(e=>({status:"uploading",image:e}))),e.forEach((e,t)=>A({index:t,image:e}))},A=e=>{let{index:t,image:a}=e,r=N.current;U({index:t,slice:e=>({...e,status:"uploading"})}),x({image:a}).then(e=>{r===N.current&&F({index:t,imageUrl:e})},()=>{r===N.current&&U({index:t,slice:e=>({...e,status:"uploadError",onRetry:()=>A({index:t,image:a})})})})},D=function(e){let{open:t}=e,a=(0,s.useRef)([]);return(0,s.useEffect)(()=>{t&&(a.current=[],d.managerClient.slices.readAllSlices().then(e=>{a.current=e.models.map(e=>{let{model:t}=e;return t})}).catch(()=>null))},[t]),a}({open:t}),F=e=>{let{index:t,imageUrl:a}=e,r=N.current;U({index:t,slice:e=>({...e,status:"generating",thumbnailUrl:a})}),d.managerClient.customTypes.inferSlice({imageUrl:a}).then(e=>{let{slice:n,langSmithUrl:s}=e;r===N.current&&w(e=>e.map((r,l)=>l===t?{...r,status:"success",thumbnailUrl:a,model:function(e){let{existingSlices:t,newSlices:a,slice:r}=e,n=new Set,s=new Set;for(let{id:e,name:a}of t)n.add(e),s.add(a.toLowerCase());for(let e of a)"success"===e.status&&(n.add(e.model.id),s.add(e.model.name.toLowerCase()));let l=r.id,i=2;for(;n.has(l);)l="".concat(r.id,"_").concat(i),i++;let c=r.name;for(i=2;s.has(c.toLowerCase());)c="".concat(r.name).concat(i),i++;return{...r,id:l,name:c}}({existingSlices:D.current,newSlices:e,slice:n}),langSmithUrl:s}:r))},()=>{r===N.current&&U({index:t,slice:e=>({...e,status:"generateError",thumbnailUrl:a,onRetry:()=>F({index:t,imageUrl:a})})})})},Z=j.some(e=>"uploading"===e.status||"generating"===e.status),_=j.filter(e=>"success"===e.status),L=_.length>0;return(0,r.jsxs)(n.ae,{open:t,onOpenChange:e=>{e||C||(h(),N.current=crypto.randomUUID(),w([]))},children:[(0,r.jsx)(n.al,{title:"Generate from image"}),(0,r.jsxs)(n.aj,{gap:0,children:[(0,r.jsx)(n.ak,{hidden:!0,children:"Upload images to generate slices with AI"}),0===j.length?(0,r.jsx)(n.D,{padding:16,height:"100%",children:(0,r.jsx)(n.aF,{onFilesSelected:k,assetType:"image",maxFiles:10,overlay:(0,r.jsx)(f,{onFilesSelected:k,droppingFiles:!0}),children:(0,r.jsx)(f,{onFilesSelected:k})})}):(0,r.jsx)(n.bn,{stableScrollbar:!1,children:(0,r.jsx)(n.D,{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:16,children:j.map((e,t)=>(0,r.jsx)(g,{slice:e},"slice-".concat(t)))})}),(0,r.jsxs)(n.ah,{children:[(0,r.jsx)(n.ai,{disabled:C}),(0,r.jsxs)(n.af,{disabled:!L||Z,loading:C,onClick:()=>{let e=j.reduce((e,t)=>("success"===t.status&&e.push(t),e),[]);if(!e.length)return;let t=N.current;S(!0),y(e).then(async e=>{let{slices:r,library:n}=e;if(t===N.current)for(let{model:e,langSmithUrl:t}of(I((await (0,i.y0)()).libraries),v(),p({slices:r,library:n}),S(!1),N.current=crypto.randomUUID(),w([]),E("createSlice"),r))i.Xe.track({event:"slice:created",id:e.id,name:e.name,library:n,location:a,mode:"ai",langSmithUrl:t}),(0,c.nZ)({type:"model",library:n,sliceId:e.id,variationId:e.variations[0].id,langSmithUrl:t})}).catch(()=>{t===N.current&&(S(!1),l.Am.error("An unexpected error happened while adding slices."))})},children:[b(a)," (",_.length,")"]})]})]})]})}function f(e){let{droppingFiles:t=!1,onFilesSelected:a}=e;return(0,r.jsx)(n.D,{justifyContent:"center",flexDirection:"column",height:"100%",backgroundColor:t?"purple2":"grey2",border:!0,borderStyle:"dashed",borderColor:t?"purple9":"grey6",children:(0,r.jsxs)(n.s,{children:[(0,r.jsx)(n.x,{lineColor:"purple11",backgroundColor:"purple5",name:"cloudUpload",size:"large"}),(0,r.jsx)(n.z,{children:"Upload your design images."}),(0,r.jsx)(n.w,{children:"Once uploaded, you can generate slices automatically using AI."}),(0,r.jsx)(n.v,{children:(0,r.jsx)(n.aG,{startIcon:"attachFile",onFilesSelected:a,color:"grey",children:"Add images"})})]})})}async function x(e){let{image:t}=e,a=[await d.managerClient.project.getResolvedRepositoryName(),"shared-slices","prismic-inferred-slices",crypto.randomUUID()].join("/");await d.managerClient.screenshots.initS3ACL();let{url:r}=await d.managerClient.screenshots.uploadScreenshot({keyPrefix:a,data:t});return r}async function y(e){let{libraries:t=[]}=await d.managerClient.project.getSliceMachineConfig(),a=t[0];if(!a)throw Error("No library found in the config.");for(let{model:t}of e){let{errors:e}=await d.managerClient.slices.createSlice({libraryID:a,model:t});if(e.length)throw Error("Failed to create slice ".concat(t.id,"."))}let r=await Promise.all(e.map(async e=>{let{model:t,image:r,langSmithUrl:n}=e;return await d.managerClient.slices.updateSliceScreenshot({libraryID:a,sliceID:t.id,variationID:t.variations[0].id,data:r}),{model:t,langSmithUrl:n}}));return{library:a,slices:r}}let b=e=>{switch(e){case"custom_type":return"Add to type";case"page_type":return"Add to page";case"slices":return"Add to slices"}}},6256:function(e,t,a){a.d(t,{c:function(){return b}});var r=a(52322),n=a(2784),s=a(36131),l=a(75289),i=a(94160),c=a(98250),o=a(88932),u=a(63908),d=a(358),m=a(80148);async function p(e){let{sliceName:t,libraryName:a,location:r,onSuccess:n}=e;try{let e=(0,u.fo)(t),{errors:s}=await m.managerClient.slices.createSlice({libraryID:a,model:e});if(s.length>0)throw s;i.Xe.track({event:"slice:created",id:(0,d.MP)(t),name:t,library:a,location:r,mode:"manual"}),await n(e)}catch(a){let e="An unexpected error happened while creating slice ".concat(t,".");console.error(e,a),o.Am.error(e)}}var g=a(68968),h=a(59532),f=a(54597),x=a(46999),y=a(63019);let b=e=>{let{onClose:t,onSuccess:a,localLibraries:o,location:u,remoteSlices:d}=e,{createSliceSuccess:m}=(0,f.Z)(),[b,j]=(0,n.useState)(!1),{syncChanges:w}=(0,g.g)(),{completeStep:C}=(0,c.k)(),S=async e=>{let t=e.sliceName,r=e.from;j(!0),await p({sliceName:t,libraryName:r,location:u,onSuccess:async e=>{m((await (0,i.y0)()).libraries),a(e,r),w(),C("createSlice")}})};return(0,r.jsx)(h.Z,{testId:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:b,formId:"create-new-slice",close:t,buttonLabel:"Create",onSubmit:e=>{S(e)},initialValues:{sliceName:"",from:o[0].name},validate:e=>(0,y.h)(e,o,d),content:{title:"Create a new slice"},children:e=>{let{touched:t,values:a,setFieldValue:n,errors:i}=e;return(0,r.jsxs)(l.xu,{children:[(0,r.jsx)(x.W,{name:"sliceName",label:"Slice name",placeholder:"Pascalised slice API ID (e.g. TextBlock)",error:t.sliceName?i.sliceName:void 0,testId:"slice-name-input"}),(0,r.jsx)(l.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,r.jsx)(s.ZP,{name:"from",options:o.map(e=>({value:e.name,label:e.name})),onChange:e=>e?void n("from",e.value):null,defaultValue:{value:a.from,label:a.from},styles:{option:e=>({...e,color:"#161618"})},theme:e=>({...e,colors:{...e.colors,primary:"#E9E8EA"}}),menuPortalTarget:document.body})]})}})}},63019:function(e,t,a){a.d(t,{h:function(){return c}});var r=a(96009),n=a.n(r),s=a(74600),l=a.n(s),i=a(7974);function c(e,t,a){let{sliceName:r}=e;return r?i.lS.includes(r.toLowerCase())?{sliceName:'Name "'.concat(r,'" is reserved for Slice Machine use.')}:i.xo.exec(r)?l()(n()(r)).replace(/\s/gm,"")!==r.trim()?{sliceName:"Value has to be PascalCased."}:r.match(/^\d/)?{sliceName:"Value cannot start with a number."}:[...t.flatMap(e=>e.components.map(e=>e.model.name)),...a.map(e=>e.name)].includes(r)?{sliceName:"Slice name is already taken."}:void 0:{sliceName:"No special characters allowed."}:{sliceName:"Cannot be empty"}}},21151:function(e,t,a){var r=a(52322),n=a(75289);t.Z=function(e){let{elems:t,renderElem:a,defineElementKey:s,gridTemplateMinPx:l="320px",gridGap:i="16px",sx:c}=e;return(0,r.jsx)(n.xu,{as:"section",sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(l,", 1fr))"),gridGap:i,pt:2,...c},children:t.map((e,t)=>e?(0,r.jsx)("span",{children:a(e,t)},"".concat(s(e),"-").concat(t+1)):null)})}}}]);