slice-machine-ui 2.18.0 → 2.18.1-alpha.dani-mcp.2

package/src/features/navigation/NavigationItem.tsx

@@ -13,6 +13,7 @@ type NavigationItemPropsBase = {
   active?: boolean;
   Icon: FC<SVGProps<SVGSVGElement>>;
   RightElement?: ReactNode;
+  tooltip?: string;
 };
 
 type NavigationLinkItemProps = NavigationItemPropsBase & {
@@ -32,7 +33,8 @@ type NavigationButtonItemProps = NavigationItemPropsBase & {
 type NavigationItemProps = NavigationLinkItemProps | NavigationButtonItemProps;
 
 export function NavigationItem(props: NavigationItemProps) {
-  const { title, href, target, active, Icon, RightElement, onClick } = props;
+  const { title, href, target, active, Icon, RightElement, onClick, tooltip } =
+    props;
 
   const isCollapsed = useMediaQuery({ max: "medium" });
 
@@ -45,7 +47,7 @@ export function NavigationItem(props: NavigationItemProps) {
       textVariant="normal"
       backgroundColor="transparent"
       renderStartIcon={ItemIcon}
-      endAdornment={RightElement}
+      endAdornment={isCollapsed ? undefined : RightElement}
       selected={active}
     >
       {isCollapsed ? null : title}
@@ -53,7 +55,11 @@ export function NavigationItem(props: NavigationItemProps) {
   );
 
   return (
-    <Tooltip content={title} side="right" visible={isCollapsed}>
+    <Tooltip
+      content={Boolean(tooltip) ? tooltip ?? "" : title}
+      side="right"
+      visible={Boolean(tooltip) ? undefined : isCollapsed}
+    >
       {href !== undefined ? (
         <Link
           href={href}

package/src/features/navigation/SliceMachineVersion.tsx

@@ -1,14 +1,9 @@
-import { Text, useMediaQuery } from "@prismicio/editor-ui";
+import { Text } from "@prismicio/editor-ui";
 
 import { useSliceMachineRunningVersion } from "@/hooks/useSliceMachineRunningVersion";
 
 export function SliceMachineVersion() {
   const sliceMachineRunningVersion = useSliceMachineRunningVersion();
-  const isCollapsed = useMediaQuery({ max: "medium" });
-
-  if (isCollapsed) {
-    return null;
-  }
 
   return (
     <Text

package/src/features/sync/actions/pushChanges.ts

@@ -29,6 +29,7 @@ export async function pushChanges(
     type: "Slice" as const,
     libraryID: sliceChange.slice.from,
     status: sliceChange.status,
+    variationImageUrlMap: sliceChange.variationImageUrlMap,
   }));
   const customTypeChanges = changedCustomTypes.map((customTypeChange) => ({
     id: customTypeChange.customType.id,

package/src/features/sync/getUnSyncChanges.ts

@@ -3,6 +3,7 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import {
   getModelId,
   hasLocal,
+  hasRemote,
   isRemoteOnly,
   LocalOrRemoteCustomType,
   LocalOrRemoteSlice,
@@ -76,11 +77,23 @@ export function getUnSyncedChanges(
   );
 
   const changedSlices = unSyncedSlices
-    .map((s) => ({
-      slice: s,
-      status: modelsStatuses.slices[s.model.id],
-    }))
+    .map((slice) => {
+      const status = modelsStatuses.slices[slice.model.id];
+
+      const imageUrlMap = findRemoteSlice(
+        slices,
+        slice.model.id,
+      )?.variations.reduce<Record<string, string>>((result, variation) => {
+        const { imageUrl } = variation;
+        if (imageUrl === undefined || imageUrl === "") return result;
+        result[variation.id] = imageUrl;
+        return result;
+      }, {});
+
+      return { status, slice, variationImageUrlMap: imageUrlMap ?? {} };
+    })
     .filter((s): s is ChangedSlice => unSyncStatuses.includes(s.status));
+
   const changedCustomTypes = unSyncedCustomTypes
     .map((model) => (hasLocal(model) ? model.local : model.remote))
     .map((ct) => ({
@@ -98,6 +111,11 @@ export function getUnSyncedChanges(
   };
 }
 
+function findRemoteSlice(slices: LocalOrRemoteSlice[], sliceId: string) {
+  const slice = slices.find((s) => hasRemote(s) && s.remote.id === sliceId);
+  return slice && hasRemote(slice) ? slice.remote : undefined;
+}
+
 // ComponentUI are manipulated on all the relevant pages
 // But the data is not available for remote only slices
 // which have been deleted locally

package/src/legacy/components/AppLayout/index.tsx

@@ -6,9 +6,11 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Text,
 } from "@prismicio/editor-ui";
+import { isUnauthorizedError } from "@slicemachine/manager/client";
 import { useRouter } from "next/router";
-import { FC, PropsWithChildren, Suspense } from "react";
+import { FC, PropsWithChildren, Suspense, useState } from "react";
 
 import { Breadcrumb } from "@/components/Breadcrumb";
 import {
@@ -18,6 +20,7 @@ import {
   PageLayoutPane,
 } from "@/components/PageLayout";
 import { ErrorBoundary } from "@/ErrorBoundary";
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { Navigation } from "@/features/navigation/Navigation";
 
@@ -44,7 +47,7 @@ export const AppLayout: FC<PropsWithChildren> = ({
               />
               <BlankSlateTitle>Failed to load Slice Machine</BlankSlateTitle>
               <BlankSlateDescription>
-                {JSON.stringify(error)}
+                <RenderError error={error} />
               </BlankSlateDescription>
             </BlankSlate>
           </Box>
@@ -63,6 +66,43 @@ export const AppLayout: FC<PropsWithChildren> = ({
   );
 };
 
+function RenderError(args: { error: unknown }) {
+  const { error } = args;
+
+  if (isUnauthorizedError(error)) {
+    return <UnauthorizedErrorView />;
+  }
+  return <>{JSON.stringify(error)}</>;
+}
+
+function UnauthorizedErrorView() {
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  return (
+    <Box flexDirection="column" gap={16} margin={{ top: 8 }}>
+      <Box flexDirection="column" gap={8} alignItems="center">
+        <Text variant="h3" align="center">
+          It seems like you don't have access to this repository
+        </Text>
+        <Text align="center">
+          Check that the repository name is correct, then contact your
+          repository administrator.
+        </Text>
+      </Box>
+      <LogoutButton
+        isLoading={isLoggingOut}
+        onLogoutSuccess={() => {
+          setIsLoggingOut(true);
+          window.location.reload();
+        }}
+        sx={{ alignSelf: "center" }}
+      >
+        Log out
+      </LogoutButton>
+    </Box>
+  );
+}
+
 const environmentTopBorderColorMap = {
   prod: "purple",
   stage: "indigo",

package/src/legacy/components/ChangesEmptyState/AuthErrorPage.tsx

@@ -5,7 +5,7 @@ import { AuthStatus } from "@/modules/userContext/types";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export type AuthErrorPageProps = {
-  authStatus: AuthStatus.UNAUTHORIZED | AuthStatus.FORBIDDEN;
+  authStatus: AuthStatus.FORBIDDEN;
 };
 
 export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
@@ -20,23 +20,13 @@ export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
       justifyContent="center"
       gap={8}
     >
-      {authStatus === AuthStatus.FORBIDDEN ? (
+      {authStatus === AuthStatus.FORBIDDEN && (
         <>
           <Text variant="h3" align="center">
             It seems like you are logged out
           </Text>
           <Text align="center">Log in to connect to your repository.</Text>
         </>
-      ) : (
-        <>
-          <Text variant="h3" align="center">
-            It seems like you don't have access to this repository
-          </Text>
-          <Text align="center">
-            Check that the repository name is correct, then contact your
-            repository administrator.
-          </Text>
-        </>
       )}
       <Text align="center">
         If that doesn't work, it's possible that Slice Machine is having trouble

package/src/legacy/components/Navigation/Environment.tsx

@@ -1,7 +1,6 @@
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
-  isUnauthorizedError,
 } from "@slicemachine/manager/client";
 import { useState } from "react";
 
@@ -98,17 +97,10 @@ export function Environment() {
     );
   }
 
-  if (
-    isUnauthenticatedError(useEnvironmentsError) ||
-    isUnauthorizedError(useEnvironmentsError)
-  ) {
+  if (isUnauthenticatedError(useEnvironmentsError)) {
     return (
       <SideNavEnvironmentSelector
-        variant={
-          isUnauthenticatedError(useEnvironmentsError)
-            ? "unauthenticated"
-            : "unauthorized"
-        }
+        variant="unauthenticated"
         onLogInClick={() => openLoginModal()}
       />
     );

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -17,6 +17,7 @@ import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
+import { toast } from "react-toastify";
 
 import { LogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
@@ -140,7 +141,11 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
               />
             ) : undefined}
 
-            {variant === "default" && <LogoutButton />}
+            {variant === "default" && (
+              <LogoutButton
+                onLogoutSuccess={() => toast.success("Logged out")}
+              />
+            )}
           </Box>
         </>
       )}

package/src/legacy/lib/models/common/ModelStatus/index.ts

@@ -30,7 +30,12 @@ export type ChangesStatus =
   | ModelStatus.New
   | ModelStatus.Modified;
 
-export type ChangedSlice = { status: ChangesStatus; slice: ComponentUI };
+export type ChangedSlice = {
+  status: ChangesStatus;
+  slice: ComponentUI;
+  /** A map of variation IDs to remote screenshot URLs. */
+  variationImageUrlMap: Record<string, string>;
+};
 export type ChangedCustomType = {
   status: ChangesStatus;
   customType: CustomTypeSM;

package/src/pages/changes.tsx

@@ -114,10 +114,7 @@ const Changes: React.FunctionComponent = () => {
     if (!isOnline) {
       return <OfflinePage />;
     }
-    if (
-      authStatus === AuthStatus.UNAUTHORIZED ||
-      authStatus === AuthStatus.FORBIDDEN
-    ) {
+    if (authStatus === AuthStatus.FORBIDDEN) {
       return <AuthErrorPage authStatus={authStatus} />;
     }
     if (numberOfChanges === 0) {

package/out/_next/static/chunks/248-bdbfde18c5a04eae.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(14226),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(14226),a=n(97729),s=n.n(a),c=n(2784),i=n(43388),o=n(17378),d=n(98564),u=n(2993),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"}}}]);