slice-machine-ui 2.17.3-alpha.jp-cli-auth-localhost.1 → 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,9 +11,7 @@ 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 { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
 interface UpdateSliceModalProps {
@@ -39,7 +36,6 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
   location,
 }) => {
   const { createSliceSuccess } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   return (
     <ModalFormCard
@@ -83,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) {
@@ -101,29 +97,25 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
       {({ values }) => (
         <UpdateSliceZoneModalList
           values={values}
-          placeholderSlices={sliceTemplatesComingSoon}
-          availableSlices={[
-            ...availableSlicesTemplates.map(
-              (slice): ComponentUI => ({
-                extension: "",
-                fileName: "",
-                from: "",
-                href: "",
-                pathToSlice: "",
-                model: Slices.toSM(slice.model),
-                screenshots: Object.entries(slice.screenshots).reduce(
-                  (acc, curr) => ({
-                    ...acc,
-                    [curr[0]]: {
-                      url: curr[1],
-                    },
-                  }),
-                  {},
-                ),
-              }),
-            ),
-            ...sliceTemplatesComingSoon,
-          ]}
+          availableSlices={availableSlicesTemplates.map(
+            (slice): ComponentUI => ({
+              extension: "",
+              fileName: "",
+              from: "",
+              href: "",
+              pathToSlice: "",
+              model: Slices.toSM(slice.model),
+              screenshots: Object.entries(slice.screenshots).reduce(
+                (acc, curr) => ({
+                  ...acc,
+                  [curr[0]]: {
+                    url: curr[1],
+                  },
+                }),
+                {},
+              ),
+            }),
+          )}
         />
       )}
     </ModalFormCard>

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/UpdateSliceZoneModalList.tsx

@@ -9,8 +9,7 @@ import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
   values: SliceZoneFormValues;
-  placeholderSlices?: ReadonlyArray<ComponentUI>;
-}> = ({ availableSlices, values, placeholderSlices }) => (
+}> = ({ availableSlices, values }) => (
   <FieldArray
     name="sliceKeys"
     render={(arrayHelpers) => (
@@ -19,14 +18,10 @@ const UpdateSliceZoneModalList: React.FC<{
         elems={availableSlices}
         defineElementKey={(slice) => `${slice.from}-${slice.model.name}`}
         renderElem={(slice) => {
-          const isComingSoon =
-            placeholderSlices?.some((s) => s.model.id === slice.model.id) ??
-            false;
           const isInSliceZone = values.sliceKeys.includes(slice.model.id);
           return (
             <SharedSliceCard
               action={{ type: "checkbox" }}
-              isComingSoon={isComingSoon}
               mode="selection"
               onSelectedChange={(selected) => {
                 if (selected) {

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/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/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)})}}}]);

package/out/_next/static/chunks/34-e684c5fd75cc9dd0.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[34],{62434:function(e,t,n){"use strict";n.d(t,{Zb:function(){return c},T$:function(){return m},eW:function(){return _},ZB:function(){return u},Lm:function(){return h}});var o=n(52322),r=n(50002),a=n(56803),i=n(6277),l=n(2784),d=n(67968),s=n.n(d);let c=e=>{let{checked:t=!1,size:n="medium",variant:a="solid",interactive:d,disabled:c,onClick:u,href:m,component:_="a",replace:h,...C}=e,p={...C,className:(0,i.W)(s().root,s()["size-".concat(n)],s()[a],{[s().interactive]:e.interactive}),"data-state":!0===t?"checked":void 0,"data-disabled":!0===e.disabled?"":void 0};return!0===e.interactive&&void 0===e.href?(0,o.jsx)("div",{...p,onClick:t=>{if(!0===e.disabled||void 0===e.onClick)return;let n=t.target;(0,r.JY)(n)===t.currentTarget&&e.onClick(t)},tabIndex:!0===e.disabled?void 0:0}):!0===e.interactive?(0,l.createElement)(_,{...p,href:e.href,onClick:e=>{let t=e.target;(0,r.JY)(t)!==e.currentTarget&&e.preventDefault()},..."a"===_?{}:{replace:e.replace}}):(0,o.jsx)("div",{...p})},u=e=>{let{className:t,component:n="img",overlay:r,...a}=e;return(0,o.jsxs)("div",{className:s().media,children:[(0,l.createElement)(n,{...a,className:(0,i.W)(s()["mediaComponent-".concat(n)],t)}),r?(0,o.jsx)("div",{className:s().mediaOverlay,children:r}):void 0]})},m=e=>(0,o.jsx)("div",{...e,className:s().actions}),_=e=>{let{action:t,loading:n=!1,startIcon:r,subtitle:i,title:l,error:d=!1,...c}=e,u=d?"tomato11":"grey11";return(0,o.jsxs)("div",{...c,className:s().footer,children:[(r||n)&&(0,o.jsxs)("div",{className:s().startIconBox,children:[n&&(0,o.jsx)(a.bg,{color:"grey11"}),!n&&r&&(0,o.jsx)(a.aX,{name:r,size:"small",color:u})]}),(0,o.jsxs)("div",{className:s().footerTexts,children:[(0,o.jsx)(a.bL,{component:"span",noWrap:!0,variant:"bold",children:l}),(0,o.jsx)(a.bL,{color:u,component:"span",noWrap:!0,variant:"small",children:i})]}),t]})},h=e=>{let{children:t,...n}=e;return(0,o.jsx)("div",{...n,className:s().status,children:(0,o.jsx)(a.bL,{align:"center",color:"inherit",component:"span",noWrap:!0,variant:"smallBold",children:t})})}},99195:function(e,t,n){"use strict";n.d(t,{O:function(){return l}});var o=n(52322),r=n(56803),a=n(56448),i=n(93671);let l=e=>{let{badgeColor:t,badgeTitle:n,tooltipContent:l}=function(e){let t=d[e.modelType];switch(e.modelStatus){case a.GJ.New:return{badgeColor:"green",badgeTitle:"New",tooltipContent:"This ".concat(t," exists only locally. Upon sync, it will be pushed to your remote repository.")};case a.GJ.Modified:return{badgeColor:"amber",badgeTitle:"Modified",tooltipContent:"This ".concat(t," has been modified locally. Upon sync, changes will be pushed to your remote repository.")};case a.GJ.Synced:return{badgeColor:"purple",badgeTitle:"Synced",tooltipContent:"This ".concat(t," is in sync with the remote repository.")};case a.GJ.Deleted:return{badgeColor:"tomato",badgeTitle:"Deleted",tooltipContent:"This ".concat(t," has been deleted locally.")};case a.GJ.Unknown:if(!e.isOnline)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (no internet connection)."};if(e.authStatus===i.t.UNAUTHORIZED)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (not connected to Prismic)."};if(e.authStatus===i.t.FORBIDDEN)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (you don't have access to the repository)."};default:return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (unknown error)."}}}(e);return(0,o.jsx)(r.c3,{content:l,side:"bottom",children:(0,o.jsx)(r.m,{color:t,title:n})})},d={CustomType:"type",Slice:"slice"}},51507:function(e,t,n){"use strict";n.d(t,{b:function(){return C}});var o=n(52322),r=n(56803),a=n(39097),i=n.n(a),l=n(62434),d=n(63908),s=n(99195),c=n(27763);let u=e=>(0,o.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4 5.5C4 4.67157 4.67157 4 5.5 4H18.5C19.3284 4 20 4.67157 20 5.5V12.4413C20 12.4512 19.9997 12.461 19.9991 12.4707C20.0072 12.6083 19.9586 12.7485 19.8536 12.8536C19.6583 13.0488 19.3417 13.0488 19.1464 12.8536L16.3536 10.0607C16.1583 9.8654 15.8417 9.8654 15.6464 10.0607L11.8536 13.8536C11.6583 14.0488 11.3417 14.0488 11.1464 13.8536L9.35355 12.0607C9.15829 11.8654 8.84171 11.8654 8.64645 12.0607L5 15.7071V18.5C5 18.7761 5.22386 19 5.5 19H12.5C12.7761 19 13 19.2239 13 19.5C13 19.7761 12.7761 20 12.5 20H5.5C4.67157 20 4 19.3284 4 18.5V15.5003V15.4997V5.5ZM11.5 12.7929L14.9393 9.35355C15.5251 8.76777 16.4749 8.76777 17.0607 9.35355L19 11.2929V5.5C19 5.22386 18.7761 5 18.5 5H5.5C5.22386 5 5 5.22386 5 5.5V14.2929L7.93934 11.3536C8.52513 10.7678 9.47487 10.7678 10.0607 11.3536L11.5 12.7929ZM16.5 13C16.7761 13 17 13.2239 17 13.5V16H19.5C19.7761 16 20 16.2239 20 16.5C20 16.7761 19.7761 17 19.5 17H17V19.5C17 19.7761 16.7761 20 16.5 20C16.2239 20 16 19.7761 16 19.5V17H13.5C13.2239 17 13 16.7761 13 16.5C13 16.2239 13.2239 16 13.5 16H16V13.5C16 13.2239 16.2239 13 16.5 13Z",fill:"currentColor"})}),m=e=>({hash:e.hash}),_=e=>e?Object.entries(e).reduce((e,t)=>{let[n,o]=t;return o.hash?{...e,[n]:{...o,...m(o)}}:e},{}):{},h={build:e=>({...e,screenshots:_(e.screenshots)}),variation(e,t){if(e.model.variations.length)return t?e.model.variations.find(e=>e.id===t):e.model.variations[0]}},C=e=>{let t;let{action:n,isComingSoon:a=!1,isDeleted:m=!1,onUpdateScreenshot:_,selected:C=!1,slice:v,variant:b,variationId:f}=e,g=h.variation(v,f);if(!g)return null;let j=(0,d.d7)(v,g),y=a||m,k=!y&&!!_,S="outlined"===b,T=void 0!==f;return t="selection"===e.mode?{disabled:y,interactive:!0,onClick:()=>{e.onSelectedChange(!C)}}:y?{interactive:!1}:{component:i(),href:c.Y.getBuilderPagePathname({libraryName:v.href,sliceName:v.model.name,variationId:g.id}),interactive:!0,replace:e.replace},(0,o.jsxs)(l.Zb,{"aria-label":"".concat(v.model.name," ").concat(g.name," slice card"),checked:C,"data-testid":"shared-slice-card",...t,..."outlined"===b?{size:"small",variant:"outlined"}:{},children:[void 0!==j?(0,o.jsx)(l.ZB,{alt:"Preview image",overlay:k&&!S?(0,o.jsx)(r.D,{alignItems:"center",justifyContent:"center",children:(0,o.jsx)(p,{onClick:_})}):void 0,src:j}):(0,o.jsx)(l.ZB,{component:"div",children:(0,o.jsxs)(r.D,{alignItems:"center",flexDirection:"column",gap:8,justifyContent:"center",children:[(0,o.jsx)(r.bL,{color:"grey11",component:"span",children:"No screenshot available"}),k&&!S?(0,o.jsx)(p,{onClick:_}):void 0]})}),(0,o.jsx)(l.eW,{action:"checkbox"===n.type&&"selection"===e.mode?(0,o.jsx)("div",{onClick:e=>e.stopPropagation(),children:(0,o.jsx)(r.U,{checked:C,disabled:y,onCheckedChange:e.onSelectedChange})}):"menu"===n.type?(0,o.jsxs)(r.ar,{modal:!0,children:[(0,o.jsx)(r.av,{disabled:y,children:(0,o.jsx)(r.aZ,{hiddenLabel:"Slice actions",icon:"moreVert"})}),(0,o.jsxs)(r.as,{align:"end","data-testid":"slice-action-icon-dropdown",children:[k&&S?(0,o.jsx)(r.at,{onSelect:_,startIcon:(0,o.jsx)(u,{}),children:"Update screenshot"}):void 0,(0,o.jsx)(r.at,{onSelect:n.onRename,startIcon:(0,o.jsx)(r.aX,{name:"edit"}),children:"Rename"}),!0===n.removeDisabled&&T?(0,o.jsx)(r.c3,{content:"The slice needs to have at least one variation.",side:"bottom",stableMount:!0,children:(0,o.jsx)(x,{disabled:!0,onSelect:n.onRemove})}):(0,o.jsx)(x,{disabled:!0===n.removeDisabled,onSelect:n.onRemove})]})]}):"remove"===n.type?(0,o.jsx)(r.aZ,{icon:"close",onClick:()=>!y&&n.onRemove(),hiddenLabel:"Remove slice"}):"status"===n.type?(0,o.jsx)(s.O,{authStatus:n.authStatus,isOnline:n.isOnline,modelStatus:n.modelStatus,modelType:"Slice"}):void 0,subtitle:(0,o.jsxs)(o.Fragment,{children:[T?g.id:"".concat(v.model.variations.length," variation").concat(v.model.variations.length>1?"s":""),a?(0,o.jsxs)(r.bL,{color:"purple11",component:"span",variant:"small",children:[" ","• (coming soon)"]}):void 0]}),title:T?g.name:v.model.name}),k&&!T&&(0,d.cx)(v)>0?(0,o.jsx)(l.Lm,{children:"Missing screenshot"}):void 0]})},p=e=>(0,o.jsx)(r.E,{onClick:e.onClick,renderStartIcon:()=>(0,o.jsx)(u,{color:r.t.color.grey11}),color:"grey",children:"Update screenshot"}),x=e=>(0,o.jsx)(r.at,{...e,color:"tomato",startIcon:(0,o.jsx)(r.aX,{name:"delete"}),children:"Delete"})},27763:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});let o={getBuilderPagePathname:e=>"/slices/".concat(e.libraryName.replaceAll("/","--"),"/").concat(e.sliceName,"/").concat(e.variationId)}},30527:function(e,t,n){"use strict";n.d(t,{Z:function(){return s},W:function(){return d}});var o=n(52322),r=n(2784),a=n(75289);let i=e=>{let{bg:t,background:n,sx:r,withRadius:i,radius:l,children:d}=e;return(0,o.jsx)(a.xu,{sx:{p:4,bg:t||n,...i?{borderBottomLeftRadius:l,borderBottomRightRadius:l}:null,...r},children:d})},l=(0,r.createContext)("6px"),d=()=>(0,r.useContext)(l),s=e=>{let{Header:t=null,SubHeader:n=null,Body:r=null,Footer:d=null,borderFooter:s=!1,radius:c="6px",bodySx:u={},footerSx:m={},sx:_=null,bg:h,background:C,children:p,...x}=e;return(0,o.jsx)(l.Provider,{value:c,children:(0,o.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:c,..._},...x,children:[t||null,n||null,(0,o.jsxs)(i,{bg:h,background:C,sx:u,withRadius:!d,children:[r?(0,o.jsx)(r,{}):null,p||null]}),d?(0,o.jsx)(i,{bg:h,background:C,sx:{...s?{borderTop:e=>{let{colors:t}=e;return"1px solid ".concat(String(null==t?void 0:t.borders))}}:null,...m},radius:c,withRadius:!0,children:"object"==typeof d?d:(0,o.jsx)(d,{})}):null]})})}},7974:function(e,t,n){"use strict";n.d(t,{Sn:function(){return l},lS:function(){return o},nG:function(){return r},pq:function(){return d},rd:function(){return i},xo:function(){return a}});let o=["components","update","insert"],r=["png","jpg","jpeg"],a=/^[A-Za-z0-9]+(?:_[A-Za-z0-9]+)*$/,i="placeholders/What_are_Slices_mrvome",l="SM_HELP_VIDEOS/mock_data",d="slice-machine-simulator"},67968:function(e){e.exports={flex:"Card_flex__opby1",grid:"Card_grid__VAvIS",column:"Card_column__W4ACG Card_flex__opby1",root:"Card_root__YVuvU Card_column__W4ACG Card_flex__opby1","size-small":"Card_size-small__aIlxd","size-medium":"Card_size-medium__xegz0",solid:"Card_solid__GNGar",outlined:"Card_outlined__W_dxI",interactive:"Card_interactive__rXw5L",media:"Card_media__l0kHL Card_column__W4ACG Card_flex__opby1","mediaComponent-div":"Card_mediaComponent-div__Y2_PZ Card_grid__VAvIS","mediaComponent-img":"Card_mediaComponent-img__ezOTu",mediaOverlay:"Card_mediaOverlay__Aa__Q Card_grid__VAvIS",nonMedia:"Card_nonMedia__Fv3Mz Card_flex__opby1",actions:"Card_actions__XdhOt Card_nonMedia__Fv3Mz Card_flex__opby1",footer:"Card_footer__U0HS1 Card_nonMedia__Fv3Mz Card_flex__opby1",footerTexts:"Card_footerTexts__rTXup Card_column__W4ACG Card_flex__opby1",status:"Card_status__PNN2a Card_column__W4ACG Card_flex__opby1",startIconBox:"Card_startIconBox__1_L4u"}}}]);