slice-machine-ui 2.17.3-alpha.dani-git-integration.2 → 2.17.3-alpha.jp-revert-section-naming-experiment.1

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

@@ -3,7 +3,6 @@ import { FC } from "react";
 import { Text } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { createSlicesTemplates } from "@/features/slicesTemplates/actions/createSlicesTemplates";
 import { SliceTemplate } from "@/features/slicesTemplates/useSlicesTemplates";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
@@ -12,7 +11,6 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { Slices } from "@/legacy/lib/models/common/Slice";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
-import { pluralize } from "@/utils/textConversion";
 
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
@@ -38,7 +36,6 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
   location,
 }) => {
   const { createSliceSuccess } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   return (
     <ModalFormCard
@@ -82,7 +79,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
         sliceKeys: [],
       }}
       content={{
-        title: `Use template ${pluralize(sectionsNamingExperiment.value)}`,
+        title: "Use template slices",
       }}
       validate={(values) => {
         if (values.sliceKeys.length === 0) {

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

@@ -1,10 +1,8 @@
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { Text } from "theme-ui";
 
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
-import { pluralize } from "@/utils/textConversion";
 
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
@@ -25,8 +23,6 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
   onSubmit,
   availableSlices,
 }) => {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-
   return (
     <ModalFormCard
       isOpen
@@ -47,7 +43,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
         sliceKeys: [],
       }}
       content={{
-        title: `Select existing ${pluralize(sectionsNamingExperiment.value)}`,
+        title: "Select existing slices",
       }}
       testId="update-slices-modal"
       validate={(values) => {

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

@@ -1,4 +1,5 @@
 import {
+  BackgroundIcon,
   Box,
   Button,
   DropdownMenu,
@@ -16,10 +17,8 @@ import { BaseStyles } from "theme-ui";
 import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
 import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 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";
@@ -42,7 +41,6 @@ import {
 } from "@/modules/slices";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 import type { SliceMachineStoreType } from "@/redux/type";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import { SlicesList } from "./List";
@@ -135,11 +133,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   const { setCustomType } = useCustomTypeState();
   const { completeStep } = useOnboarding();
   const { openLoginModal } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-  const sliceCreationOptions = getSliceCreationOptions({
-    menuType: "Dropdown",
-    sectionsNamingExperiment,
-  });
 
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -238,46 +231,74 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               <DropdownMenuContent align="end">
                 {aiSliceGenerationExperiment.eligible && (
                   <DropdownMenuItem
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromImage.BackgroundIcon
-                    }
+                    renderStartIcon={() => (
+                      <BackgroundIcon
+                        name="autoFixHigh"
+                        size="extraSmall"
+                        iconSize="small"
+                        radius={6}
+                        variant="solid"
+                        color="purple"
+                      />
+                    )}
                     onSelect={() => void openCreateSliceFromImageModal()}
-                    description={sliceCreationOptions.fromImage.description}
+                    description="Build a slice based on your design image."
                   >
-                    {sliceCreationOptions.fromImage.title}
+                    Generate from image
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem
-                  renderStartIcon={() =>
-                    sliceCreationOptions.fromScratch.BackgroundIcon
-                  }
+                  renderStartIcon={() => (
+                    <BackgroundIcon
+                      name="add"
+                      size="extraSmall"
+                      iconSize="small"
+                      radius={6}
+                      variant="solid"
+                      color="white"
+                    />
+                  )}
                   onSelect={openCreateSliceModal}
-                  description={sliceCreationOptions.fromScratch.description}
+                  description="Build a custom slice your way."
                 >
-                  {sliceCreationOptions.fromScratch.title}
+                  Start from scratch
                 </DropdownMenuItem>
 
                 {availableSlicesTemplates.length > 0 ? (
                   <DropdownMenuItem
                     onSelect={openSlicesTemplatesModal}
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromTemplate.BackgroundIcon
-                    }
-                    description={sliceCreationOptions.fromTemplate.description}
+                    renderStartIcon={() => (
+                      <BackgroundIcon
+                        name="contentCopy"
+                        size="extraSmall"
+                        iconSize="small"
+                        radius={6}
+                        variant="solid"
+                        color="white"
+                      />
+                    )}
+                    description="Choose from ready-made examples."
                   >
-                    {sliceCreationOptions.fromTemplate.title}
+                    Use a template
                   </DropdownMenuItem>
                 ) : undefined}
 
                 {availableSlicesToAdd.length > 0 ? (
                   <DropdownMenuItem
                     onSelect={openUpdateSliceZoneModal}
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromExisting.BackgroundIcon
-                    }
-                    description={sliceCreationOptions.fromExisting.description}
+                    renderStartIcon={() => (
+                      <BackgroundIcon
+                        name="folder"
+                        size="extraSmall"
+                        iconSize="small"
+                        radius={6}
+                        variant="solid"
+                        color="white"
+                      />
+                    )}
+                    description="Select from your created slices."
                   >
-                    {sliceCreationOptions.fromExisting.title}
+                    Reuse an existing slice
                   </DropdownMenuItem>
                 ) : undefined}
               </DropdownMenuContent>
@@ -301,7 +322,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           ) : undefined
         }
       >
-        {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
+        Slices
       </ListHeader>
 
       {sliceZone ? (
@@ -378,11 +399,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               onSaveCallback: () => {
                 toast.success(
                   <ToastMessageWithPath
-                    message={`${capitalizeFirstLetter(
-                      sectionsNamingExperiment.value,
-                    )} template(s) added to ${
-                      sectionsNamingExperiment.value
-                    } zone and created at: `}
+                    message="Slice template(s) added to slice zone and created at: "
                     path={`${localLibraries[0].name}/`}
                   />,
                 );
@@ -418,7 +435,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               onSaveCallback: () => {
                 toast.success(
                   <ToastMessageWithPath
-                    message={`New ${sectionsNamingExperiment.value} added to ${sectionsNamingExperiment.value} zone and created at: `}
+                    message="New slice added to slice zone and created at: "
                     path={`${localLibraries[0].name}/`}
                   />,
                 );
@@ -446,11 +463,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
             onSaveCallback: () => {
               toast.success(
                 <ToastMessageWithPath
-                  message={`${capitalizeFirstLetter(
-                    sectionsNamingExperiment.value,
-                  )}(s) added to ${
-                    sectionsNamingExperiment.value
-                  } zone and created at: `}
+                  message="Slice(s) added to slice zone and created at: "
                   path={library}
                 />,
               );

package/src/legacy/lib/builders/SliceBuilder/index.tsx

@@ -3,7 +3,6 @@ import { type FC } from "react";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
 import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
@@ -15,7 +14,6 @@ import {
   AppLayoutHeader,
 } from "@/legacy/components/AppLayout";
 import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import FieldZones from "./FieldZones";
 import { VariationsList } from "./VariationsList";
@@ -23,7 +21,6 @@ import { VariationsList } from "./VariationsList";
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
   const horizontalScroll = useMediaQuery({ max: "large" });
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   const contentDisplayProps = horizontalScroll
     ? { gridTemplateRows: "304px 1fr" }
@@ -34,9 +31,7 @@ export const SliceBuilder: FC = () => {
       <AppLayoutHeader>
         <AppLayoutBackButton url="/slices" />
         <AppLayoutBreadcrumb>
-          <BreadcrumbItem>
-            {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
-          </BreadcrumbItem>
+          <BreadcrumbItem>Slices</BreadcrumbItem>
           <BreadcrumbItem active>{slice.model.name}</BreadcrumbItem>
         </AppLayoutBreadcrumb>
         <AppLayoutActions>

package/src/legacy/lib/builders/common/Zone/components/ZoneEmptyState/ZoneEmptyState.tsx

@@ -1,8 +1,6 @@
 import { Text } from "@prismicio/editor-ui";
 import { FC, ReactNode } from "react";
 
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
-
 import styles from "./ZoneEmptyState.module.css";
 
 type ZoneEmptyStateProps = {
@@ -12,14 +10,11 @@ type ZoneEmptyStateProps = {
 };
 
 export const ZoneEmptyState: FC<ZoneEmptyStateProps> = (props) => {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-  const modifiedZoneType =
-    props.zoneType === "slice"
-      ? sectionsNamingExperiment.value
-      : props.zoneType;
-
-  const { heading = `Your ${modifiedZoneType} has no fields yet`, action } =
-    props;
+  const {
+    zoneType,
+    heading = `Your ${zoneType} has no fields yet`,
+    action,
+  } = props;
 
   return (
     <div className={styles.root}>

package/src/pages/settings.tsx

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

package/src/pages/slices.tsx

@@ -1,4 +1,5 @@
 import {
+  BackgroundIcon,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -15,9 +16,7 @@ import { BaseStyles, Flex, Link, Text } from "theme-ui";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 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";
@@ -44,18 +43,12 @@ import { managerClient } from "@/managerClient";
 import { getLibraries, getRemoteSlices } from "@/modules/slices";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 import { SliceMachineStoreType } from "@/redux/type";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 const SlicesIndex: React.FunctionComponent = () => {
   const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
   const router = useRouter();
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
   const { openLoginModal } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-  const sliceCreationOptions = getSliceCreationOptions({
-    menuType: "Dropdown",
-    sectionsNamingExperiment,
-  });
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
@@ -113,17 +106,12 @@ const SlicesIndex: React.FunctionComponent = () => {
   return (
     <>
       <Head>
-        <title>
-          {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))} -
-          Slice Machine
-        </title>
+        <title>Slices - Slice Machine</title>
       </Head>
       <AppLayout>
         <AppLayoutHeader>
           <AppLayoutBreadcrumb>
-            <BreadcrumbItem>
-              {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
-            </BreadcrumbItem>
+            <BreadcrumbItem>Slices</BreadcrumbItem>
           </AppLayoutBreadcrumb>
           {localLibraries?.length !== 0 && sliceCount !== 0 ? (
             <DropdownMenu>
@@ -140,23 +128,37 @@ const SlicesIndex: React.FunctionComponent = () => {
               <DropdownMenuContent align="end">
                 {aiSliceGenerationExperiment.eligible && (
                   <DropdownMenuItem
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromImage.BackgroundIcon
-                    }
+                    renderStartIcon={() => (
+                      <BackgroundIcon
+                        name="autoFixHigh"
+                        size="extraSmall"
+                        iconSize="small"
+                        radius={6}
+                        variant="solid"
+                        color="purple"
+                      />
+                    )}
                     onSelect={() => void openCreateSliceFromImageModal()}
-                    description={sliceCreationOptions.fromImage.description}
+                    description="Build a slice based on your design image."
                   >
-                    {sliceCreationOptions.fromImage.title}
+                    Generate from image
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem
-                  renderStartIcon={() =>
-                    sliceCreationOptions.fromScratch.BackgroundIcon
-                  }
+                  renderStartIcon={() => (
+                    <BackgroundIcon
+                      name="add"
+                      size="extraSmall"
+                      iconSize="small"
+                      radius={6}
+                      variant="solid"
+                      color="white"
+                    />
+                  )}
                   onSelect={() => setIsCreateSliceModalOpen(true)}
-                  description={sliceCreationOptions.fromScratch.description}
+                  description="Build a custom slice your way."
                 >
-                  {sliceCreationOptions.fromScratch.title}
+                  Start from scratch
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -180,31 +182,20 @@ const SlicesIndex: React.FunctionComponent = () => {
                     }}
                   >
                     <EmptyState
-                      title={`What are ${pluralize(
-                        sectionsNamingExperiment.value,
-                      )}?`}
+                      title="What are slices?"
                       onCreateNew={() => {
                         setIsCreateSliceModalOpen(true);
                       }}
-                      buttonText={"Create one"}
+                      buttonText="Create one"
                       videoPublicIdUrl={VIDEO_WHAT_ARE_SLICES}
                       documentationComponent={
                         <>
-                          {pluralize(
-                            capitalizeFirstLetter(
-                              sectionsNamingExperiment.value,
-                            ),
-                          )}{" "}
-                          are sections of your website. Prismic documents
-                          contain a dynamic "
-                          {capitalizeFirstLetter(
-                            sectionsNamingExperiment.value,
-                          )}{" "}
-                          Zone" that allows content creators to add, edit, and
-                          rearrange {pluralize(sectionsNamingExperiment.value)}{" "}
-                          to compose dynamic layouts for any page design.{" "}
+                          Slices are sections of your website. Prismic documents
+                          contain a dynamic "Slice Zone" that allows content
+                          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"
                             }
@@ -248,14 +239,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                               mb: 1,
                             }}
                           >
-                            <Text>
-                              {sectionsNamingExperiment.eligible &&
-                              sortedLibraries.length === 1
-                                ? `Your ${pluralize(
-                                    sectionsNamingExperiment.value,
-                                  )}`
-                                : name}
-                            </Text>
+                            <Text>{name}</Text>
                           </Flex>
                           {!isLocal && (
                             <p>⚠️ External libraries are read-only</p>
@@ -321,7 +305,6 @@ const SlicesIndex: React.FunctionComponent = () => {
                 void router.push(sliceLocation);
                 toast.success(
                   SliceToastMessage({
-                    sectionsNamingExperiment,
                     path: `${libraryName}/${newSlice.name}/model.json`,
                   }),
                 );
@@ -357,11 +340,7 @@ const SlicesIndex: React.FunctionComponent = () => {
             onSuccess={({ library }) => {
               toast.success(
                 <ToastMessageWithPath
-                  message={`${capitalizeFirstLetter(
-                    sectionsNamingExperiment.value,
-                  )}(s) added to ${
-                    sectionsNamingExperiment.value
-                  } zone and created at: `}
+                  message="Slice(s) added to slice zone and created at: "
                   path={library}
                 />,
               );

package/out/_next/static/OERdRe23c5buVNy_8FtIU/_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-98836c22c6a40c5d.js"],"/changes":[c,i,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-fa4f2563cb5fd014.js",a,n,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-db800bf4a08faa31.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]-041985d94bb9649f.js"],"/labs":["static/chunks/pages/labs-ad7f36c6f544c1a8.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]-338f685c0723043b.js"],"/slices":[c,i,s,b,a,n,j,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-6dbc3df2c4ef058a.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]-0bc862dd7bd99611.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-5008e29008aa04f4.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/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-29c729ad2a291ef6.js","static/chunks/268-6a9214b97195af9c.js","static/chunks/248-6f20227ad4764216.js","static/css/4e475d945cf8a890.css","static/chunks/385-b949173dfa03dd3e.js","static/chunks/489-eaa4848c00e8986b.js","static/css/56f2a6684a524374.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/out/_next/static/chunks/248-6f20227ad4764216.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(4790),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/268-6a9214b97195af9c.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[268],{22654:function(e,t,a){a.d(t,{l:function(){return n}});var r=a(96317);function n(){let e=(0,r.L)("slicemachine-image-to-slice");return{eligible:(null==e?void 0:e.value)==="on"}}},91589:function(e,t,a){a.d(t,{S:function(){return x}});var r=a(52322),n=a(56803),i=a(2784),l=a(88932),s=a(94160),c=a(34166),o=a(63470),u=a(98250),d=a(68968),m=a(80148),g=a(54597),p=a(31860),h=a(62434);function f(e){let{slice:t}=e,a="uploading"===t.status||"generating"===t.status,i="uploadError"===t.status||"generateError"===t.status,l="generateError"===t.status||"generating"===t.status||"success"===t.status;return(0,r.jsxs)(h.Zb,{disabled:a,children:[l?(0,r.jsx)(h.ZB,{src:t.thumbnailUrl}):(0,r.jsx)(h.ZB,{component:"div"}),(0,r.jsx)(h.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:i,action:i?(0,r.jsx)(n.E,{startIcon:"refresh",color:"grey",onClick:t.onRetry,children:"Retry"}):void 0})]})}function x(e){let{open:t,location:a,onSuccess:h,onClose:x}=e,[S,b]=(0,i.useState)([]),[C,I]=(0,i.useState)(!1),{syncChanges:k}=(0,d.g)(),{createSliceSuccess:A}=(0,g.Z)(),{completeStep:E}=(0,u.k)(),U=(0,o.k)(),L=(0,i.useRef)(crypto.randomUUID()),N=e=>{let{index:t,slice:a}=e;b(e=>e.map((e,r)=>r===t?a(e):e))},D=e=>{if(e.length>10){l.Am.error("You can only upload ".concat(10," images at a time."));return}b(e.map(e=>({status:"uploading",image:e}))),e.forEach((e,t)=>B({index:t,image:e}))},B=e=>{let{index:t,image:a}=e,r=L.current;N({index:t,slice:e=>({...e,status:"uploading"})}),j({image:a}).then(e=>{r===L.current&&F({index:t,imageUrl:e})},()=>{r===L.current&&N({index:t,slice:e=>({...e,status:"uploadError",onRetry:()=>B({index:t,image:a})})})})},_=function(e){let{open:t}=e,a=(0,i.useRef)([]);return(0,i.useEffect)(()=>{t&&(a.current=[],m.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=L.current;N({index:t,slice:e=>({...e,status:"generating",thumbnailUrl:a})}),m.managerClient.customTypes.inferSlice({imageUrl:a}).then(e=>{let{slice:n,langSmithUrl:i}=e;r===L.current&&b(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,i=new Set;for(let{id:e,name:a}of t)n.add(e),i.add(a.toLowerCase());for(let e of a)"success"===e.status&&(n.add(e.model.id),i.add(e.model.name.toLowerCase()));let l=r.id,s=2;for(;n.has(l);)l="".concat(r.id,"_").concat(s),s++;let c=r.name;for(s=2;i.has(c.toLowerCase());)c="".concat(r.name).concat(s),s++;return{...r,id:l,name:c}}({existingSlices:_.current,newSlices:e,slice:n}),langSmithUrl:i}:r))},()=>{r===L.current&&N({index:t,slice:e=>({...e,status:"generateError",thumbnailUrl:a,onRetry:()=>F({index:t,imageUrl:a})})})})},z=S.some(e=>"uploading"===e.status||"generating"===e.status),R=S.filter(e=>"success"===e.status),Z=R.length>0;return(0,r.jsxs)(n.ae,{open:t,onOpenChange:e=>{e||C||(x(),L.current=crypto.randomUUID(),b([]))},children:[(0,r.jsx)(n.al,{title:"Generate from image"}),(0,r.jsxs)(n.aj,{gap:0,children:[(0,r.jsxs)(n.ak,{hidden:!0,children:["Upload images to generate ",(0,p._)(U.value)," ","with AI"]}),0===S.length?(0,r.jsx)(n.D,{padding:16,height:"100%",children:(0,r.jsx)(n.aF,{onFilesSelected:D,assetType:"image",maxFiles:10,overlay:(0,r.jsx)(y,{onFilesSelected:D,droppingFiles:!0}),children:(0,r.jsx)(y,{onFilesSelected:D})})}):(0,r.jsx)(n.bn,{stableScrollbar:!1,children:(0,r.jsx)(n.D,{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:16,children:S.map((e,t)=>(0,r.jsx)(f,{slice:e},"slice-".concat(t)))})}),(0,r.jsxs)(n.ah,{children:[(0,r.jsx)(n.ai,{disabled:C}),(0,r.jsxs)(n.af,{disabled:!Z||z,loading:C,onClick:()=>{let e=S.reduce((e,t)=>("success"===t.status&&e.push(t),e),[]);if(!e.length)return;let t=L.current;I(!0),v(e).then(async e=>{let{slices:r,library:n}=e;if(t===L.current)for(let{model:e,langSmithUrl:t}of(A((await (0,s.y0)()).libraries),k(),h({slices:r,library:n}),I(!1),L.current=crypto.randomUUID(),b([]),E("createSlice"),r))s.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===L.current&&(I(!1),l.Am.error("An unexpected error happened while adding slices."))})},children:[w({location:a,sectionsNamingExperiment:U})," (",R.length,")"]})]})]})]})}function y(e){let t=(0,o.k)(),{droppingFiles:a=!1,onFilesSelected:i}=e;return(0,r.jsx)(n.D,{justifyContent:"center",flexDirection:"column",height:"100%",backgroundColor:a?"purple2":"grey2",border:!0,borderStyle:"dashed",borderColor:a?"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.jsxs)(n.w,{children:["Once uploaded, you can generate"," ",(0,p._)(t.value)," automatically using AI."]}),(0,r.jsx)(n.v,{children:(0,r.jsx)(n.aG,{startIcon:"attachFile",onFilesSelected:i,color:"grey",children:"Add images"})})]})})}async function j(e){let{image:t}=e,a=[await m.managerClient.project.getResolvedRepositoryName(),"shared-slices","prismic-inferred-slices",crypto.randomUUID()].join("/");await m.managerClient.screenshots.initS3ACL();let{url:r}=await m.managerClient.screenshots.uploadScreenshot({keyPrefix:a,data:t});return r}async function v(e){let{libraries:t=[]}=await m.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 m.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 m.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 w=e=>{let{location:t,sectionsNamingExperiment:a}=e;switch(t){case"custom_type":return"Add to type";case"page_type":return"Add to page";case"slices":return"Add to ".concat((0,p._)(a.value))}}},27213:function(e,t,a){a.d(t,{F:function(){return l}});var r=a(52322),n=a(56803),i=a(31860);let l=e=>{let{menuType:t,sectionsNamingExperiment:a}=e;return{fromImage:{BackgroundIcon:(0,r.jsx)(n.B,{name:"autoFixHigh",size:"ActionList"===t?"small":"extraSmall",iconSize:"ActionList"===t?"medium":"small",color:"purple",variant:"solid",radius:6}),title:"Generate from image",description:"Build a ".concat(a.value," based on your design image.")},fromScratch:{BackgroundIcon:(0,r.jsx)(n.B,{name:"add",size:"ActionList"===t?"small":"extraSmall",iconSize:"ActionList"===t?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Start from scratch",description:"Build a custom ".concat(a.value," your way.")},fromTemplate:{BackgroundIcon:(0,r.jsx)(n.B,{name:"contentCopy",size:"ActionList"===t?"small":"extraSmall",iconSize:"ActionList"===t?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Use a template",description:"Choose from ready-made examples."},fromExisting:{BackgroundIcon:(0,r.jsx)(n.B,{name:"folder",size:"ActionList"===t?"small":"extraSmall",iconSize:"ActionList"===t?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Reuse an existing ".concat(a.value),description:"Select from your created ".concat((0,i._)(a.value))}}}},6256:function(e,t,a){a.d(t,{c:function(){return w}});var r=a(52322),n=a(2784),i=a(36131),l=a(75289),s=a(94160),c=a(63470),o=a(98250),u=a(88932),d=a(63908),m=a(358),g=a(80148);async function p(e){let{sliceName:t,libraryName:a,location:r,onSuccess:n}=e;try{let e=(0,d.fo)(t),{errors:i}=await g.managerClient.slices.createSlice({libraryID:a,model:e});if(i.length>0)throw i;s.Xe.track({event:"slice:created",id:(0,m.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),u.Am.error(e)}}var h=a(68968),f=a(59532),x=a(54597),y=a(31860),j=a(46999),v=a(63019);let w=e=>{let{onClose:t,onSuccess:a,localLibraries:u,location:d,remoteSlices:m}=e,{createSliceSuccess:g}=(0,x.Z)(),[w,S]=(0,n.useState)(!1),{syncChanges:b}=(0,h.g)(),{completeStep:C}=(0,o.k)(),I=(0,c.k)(),k=async e=>{let t=e.sliceName,r=e.from;S(!0),await p({sliceName:t,libraryName:r,location:d,onSuccess:async e=>{g((await (0,s.y0)()).libraries),a(e,r),b(),C("createSlice")}})};return(0,r.jsx)(f.Z,{testId:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:w,formId:"create-new-slice",close:t,buttonLabel:"Create",onSubmit:e=>{k(e)},initialValues:{sliceName:"",from:u[0].name},validate:e=>(0,v.h)(e,u,m),content:{title:"Create a new ".concat(I.value)},children:e=>{let{touched:t,values:a,setFieldValue:n,errors:s}=e;return(0,r.jsxs)(l.xu,{children:[(0,r.jsx)(j.W,{name:"sliceName",label:"".concat((0,y.f)(I.value)," name"),placeholder:"Pascalised ".concat(I.value," API ID (e.g. TextBlock)"),error:t.sliceName?s.sliceName:void 0,testId:"slice-name-input"}),(0,r.jsx)(l.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,r.jsx)(i.ZP,{name:"from",options:u.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),i=a(74600),l=a.n(i),s=a(7974);function c(e,t,a){let{sliceName:r}=e;return r?s.lS.includes(r.toLowerCase())?{sliceName:'Name "'.concat(r,'" is reserved for Slice Machine use.')}:s.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:i,gridTemplateMinPx:l="320px",gridGap:s="16px",sx:c}=e;return(0,r.jsx)(n.xu,{as:"section",sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(l,", 1fr))"),gridGap:s,pt:2,...c},children:t.map((e,t)=>e?(0,r.jsx)("span",{children:a(e,t)},"".concat(i(e),"-").concat(t+1)):null)})}}}]);