slice-machine-ui 2.18.2-beta.1 → 2.18.2-beta.3

package/out/_next/static/chunks/{907-445266211c48b1a5.js → 907-180eb33eefccc237.js}

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