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

package/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/SliceCard.tsx

@@ -1,7 +1,9 @@
-import { Button } from "@prismicio/editor-ui";
+import { Button, Tooltip } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { ReactNode } from "react";
 
 import { Card, CardFooter, CardMedia } from "@/components/Card";
+import { FigmaIconSquare } from "@/icons/FigmaIconSquare";
 
 interface SliceCardProps {
   slice: Slice;
@@ -16,10 +18,26 @@ export function SliceCard(props: SliceCardProps) {
     slice.status === "uploadError" || slice.status === "generateError";
 
   const hasThumbnail =
+    slice.status === "pending" ||
     slice.status === "generateError" ||
     slice.status === "generating" ||
     slice.status === "success";
 
+  let action: ReactNode | undefined;
+  if (error) {
+    action = (
+      <Button startIcon="refresh" color="grey" onClick={slice.onRetry}>
+        Retry
+      </Button>
+    );
+  } else if (slice.source === "figma") {
+    action = (
+      <Tooltip content="Pasted from Figma">
+        <FigmaIconSquare />
+      </Tooltip>
+    );
+  }
+
   return (
     <Card disabled={loading}>
       {hasThumbnail ? (
@@ -30,24 +48,19 @@ export function SliceCard(props: SliceCardProps) {
       <CardFooter
         loading={loading}
         startIcon={getStartIcon(slice.status)}
-        title={slice.status === "success" ? slice.model.name : slice.image.name}
-        subtitle={getSubtitle(slice.status)}
+        title={getTitle(slice)}
+        subtitle={getSubtitle(slice)}
         error={error}
-        action={
-          error ? (
-            <Button startIcon="refresh" color="grey" onClick={slice.onRetry}>
-              Retry
-            </Button>
-          ) : undefined
-        }
+        action={action}
       />
     </Card>
   );
 }
 
-export type Slice = { image: File } & (
+export type Slice = { image: File; source: "upload" | "figma" } & (
   | { status: "uploading" }
   | { status: "uploadError"; onRetry: () => void }
+  | { status: "pending"; thumbnailUrl: string }
   | { status: "generating"; thumbnailUrl: string }
   | { status: "generateError"; thumbnailUrl: string; onRetry: () => void }
   | {
@@ -58,11 +71,23 @@ export type Slice = { image: File } & (
     }
 );
 
+function getTitle(slice: Slice) {
+  if (slice.status === "success") {
+    return slice.model.name;
+  }
+  if (slice.source === "figma") {
+    return slice.image.name.split(".")[0];
+  }
+  return slice.image.name;
+}
+
 function getStartIcon(status: Slice["status"]) {
   switch (status) {
     case "uploadError":
     case "generateError":
       return "close";
+    case "pending":
+      return "image";
     case "success":
       return "check";
     default:
@@ -70,10 +95,22 @@ function getStartIcon(status: Slice["status"]) {
   }
 }
 
-function getSubtitle(status: Slice["status"]) {
-  switch (status) {
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} kB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getSubtitle(slice: Slice) {
+  switch (slice.status) {
     case "uploading":
       return "Uploading...";
+    case "pending":
+      return formatFileSize(slice.image.size);
     case "uploadError":
       return "Unable to upload image";
     case "generating":

package/src/icons/FigmaIcon.tsx

@@ -1,45 +1,44 @@
-import type { FC, SVGProps } from "react";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 
-export const FigmaIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g clipPath="url(#clip0_5065_192538)">
+export const FigmaIcon = forwardRef<
+  ElementRef<"svg">,
+  ComponentPropsWithoutRef<"svg">
+>((props, ref) => {
+  let { width, height } = props;
+  if (width === undefined && height === undefined) {
+    width = 10;
+    height = 16;
+  }
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 10 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      width={width}
+    >
       <path
-        d="M9.66862 19.9993C11.1406 19.9993 12.3353 18.8047 12.3353 17.3327V14.666H9.66862C8.19662 14.666 7.00195 15.8607 7.00195 17.3327C7.00195 18.8047 8.19662 19.9993 9.66862 19.9993Z"
-        fill="#0ACF83"
+        d="M5 7.83323C5 6.45253 6.11928 5.33325 7.49997 5.33325C8.8807 5.33325 10 6.45255 10 7.83328V8.16656C10 9.54728 8.8807 10.6666 7.49997 10.6666C6.11928 10.6666 5 9.54731 5 8.16661V7.83323Z"
+        fill="#1ABCFE"
       />
       <path
-        d="M7.00195 12.0007C7.00195 10.5287 8.19662 9.33398 9.66862 9.33398H12.3353V14.6673H9.66862C8.19662 14.6673 7.00195 13.4727 7.00195 12.0007Z"
-        fill="#A259FF"
+        d="M0 13.3334C0 11.8607 1.19391 10.6667 2.66667 10.6667H5V13.5001C5 14.8808 3.88071 16.0001 2.5 16.0001C1.11929 16.0001 0 14.8808 0 13.5001L0 13.3334Z"
+        fill="#0ACF83"
       />
       <path
-        d="M7.00195 6.66667C7.00195 5.19467 8.19662 4 9.66862 4H12.3353V9.33333H9.66862C8.19662 9.33333 7.00195 8.13867 7.00195 6.66667Z"
-        fill="#F24E1E"
+        d="M5 0V5.33333H7.33333C8.80609 5.33333 10 4.13943 10 2.66667C10 1.19391 8.80609 0 7.33333 0L5 0Z"
+        fill="#FF7262"
       />
       <path
-        d="M12.334 4H15.0007C16.4727 4 17.6673 5.19467 17.6673 6.66667C17.6673 8.13867 16.4727 9.33333 15.0007 9.33333H12.334V4Z"
-        fill="#FF7262"
+        d="M0 2.66659C0 4.13934 1.19391 5.33325 2.66667 5.33325L5 5.33325L5 -8.15392e-05L2.66667 -8.15392e-05C1.19391 -8.15392e-05 0 1.19383 0 2.66659Z"
+        fill="#F24E1E"
       />
       <path
-        d="M17.6673 12.0007C17.6673 13.4727 16.4727 14.6673 15.0007 14.6673C13.5287 14.6673 12.334 13.4727 12.334 12.0007C12.334 10.5287 13.5287 9.33398 15.0007 9.33398C16.4727 9.33398 17.6673 10.5287 17.6673 12.0007Z"
-        fill="#1ABCFE"
+        d="M0 8.00008C0 9.47284 1.19391 10.6667 2.66667 10.6667H5L5 5.33341L2.66667 5.33341C1.19391 5.33341 0 6.52732 0 8.00008Z"
+        fill="#A259FF"
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_5065_192538">
-        <rect
-          width="10.6688"
-          height="16"
-          fill="white"
-          transform="translate(7 4)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </svg>
+  );
+});

package/src/icons/FigmaIconSquare.tsx

@@ -0,0 +1,45 @@
+import type { FC, SVGProps } from "react";
+
+export const FigmaIconSquare: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5065_192538)">
+      <path
+        d="M9.66862 19.9993C11.1406 19.9993 12.3353 18.8047 12.3353 17.3327V14.666H9.66862C8.19662 14.666 7.00195 15.8607 7.00195 17.3327C7.00195 18.8047 8.19662 19.9993 9.66862 19.9993Z"
+        fill="#0ACF83"
+      />
+      <path
+        d="M7.00195 12.0007C7.00195 10.5287 8.19662 9.33398 9.66862 9.33398H12.3353V14.6673H9.66862C8.19662 14.6673 7.00195 13.4727 7.00195 12.0007Z"
+        fill="#A259FF"
+      />
+      <path
+        d="M7.00195 6.66667C7.00195 5.19467 8.19662 4 9.66862 4H12.3353V9.33333H9.66862C8.19662 9.33333 7.00195 8.13867 7.00195 6.66667Z"
+        fill="#F24E1E"
+      />
+      <path
+        d="M12.334 4H15.0007C16.4727 4 17.6673 5.19467 17.6673 6.66667C17.6673 8.13867 16.4727 9.33333 15.0007 9.33333H12.334V4Z"
+        fill="#FF7262"
+      />
+      <path
+        d="M17.6673 12.0007C17.6673 13.4727 16.4727 14.6673 15.0007 14.6673C13.5287 14.6673 12.334 13.4727 12.334 12.0007C12.334 10.5287 13.5287 9.33398 15.0007 9.33398C16.4727 9.33398 17.6673 10.5287 17.6673 12.0007Z"
+        fill="#1ABCFE"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5065_192538">
+        <rect
+          width="10.6688"
+          height="16"
+          fill="white"
+          transform="translate(7 4)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
 import { Box, Close, Flex, Heading, Text } from "theme-ui";
 
 import { Kbd } from "@/components/Kbd";
-import { FigmaIcon } from "@/icons/FigmaIcon";
+import { FigmaIconSquare } from "@/icons/FigmaIconSquare";
 import { Card, useCardRadius } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
@@ -52,7 +52,7 @@ const FigmaTip = () => {
         minHeight: "40px",
       }}
     >
-      <FigmaIcon />
+      <FigmaIconSquare />
       <div>
         Use&nbsp;{keys} to copy any frame as .png, then just paste it here
       </div>

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

@@ -427,7 +427,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           const newCustomType = addSlicesToSliceZone({
             customType,
             tabId,
-            slices: slices.map((slice) => slice.model),
+            slices,
           });
           setCustomType({
             customType: CustomTypes.fromSM(newCustomType),

package/test/__setup__.ts

@@ -144,6 +144,13 @@ vi.mock("@segment/analytics-node", () => {
   };
 });
 
+vi.mock("@anthropic-ai/claude-agent-sdk", () => {
+  return {
+    createClient: vi.fn(),
+    Agent: vi.fn(),
+  };
+});
+
 // We have to manually set this environment variable as there's no equivalent of
 // `next/jest` for Vitest. It means Vitest doesn't read Next.js's configuration
 // file and (in our case) the `experimental.newNextLinkBehavior` setting.

package/out/_next/static/MQ0zmvVfr20Ca-bgbzvFk/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,u,d,f,h,k,j,l,p,g,o,r,m,_,y){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-8514e0696e90a1b2.js"],"/changes":[c,i,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-fa4f2563cb5fd014.js",a,n,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-8af4acbb8f974cb2.js"],"/custom-types":[s,e,p,g,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,u,d,f,h,s,t,b,k,o,a,e,j,l,r,m,"static/chunks/pages/custom-types/[customTypeId]-af9376721beb489e.js"],"/labs":["static/chunks/pages/labs-56fd818a63553497.js"],"/page-types/[pageTypeId]":[c,u,d,f,h,s,t,b,k,o,a,e,j,l,r,m,"static/chunks/pages/page-types/[pageTypeId]-a24665e91b882169.js"],"/slices":[c,i,_,s,b,y,a,n,l,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-81c1c3f1bcad60f4.js"],"/slices/[lib]/[sliceName]/[variation]":[c,i,u,d,f,h,_,s,t,b,k,y,"static/chunks/484-3e011e79c41f0342.js",a,j,n,"static/css/e8e03c0d4003d1eb.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-e973a443d8b8a75d.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[i,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/429-aab52070cad2884b.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-faeb6d2f77d97096.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-28725deef8b874b1.js","static/chunks/647-aa094286bc248d52.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/344-fdb3008f4bb3b0c1.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/256-07f768a2b19b0a0e.js","static/chunks/630-2bf927bca082a191.js","static/chunks/907-180eb33eefccc237.js","static/chunks/248-84a5987f0499b074.js","static/css/4e475d945cf8a890.css","static/chunks/422-c9192a1dbdd2ae0e.js","static/chunks/489-ce3053e1d81ade83.js","static/css/56f2a6684a524374.css","static/chunks/52d4c156-89c6ec6efca0a0bb.js","static/chunks/500-d3989390f5e8da53.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/out/_next/static/chunks/34-28725deef8b874b1.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 C}});var o=n(52322),r=n(50002),i=n(11699),a=n(6277),l=n(2784),d=n(67968),s=n.n(d);let c=e=>{let{checked:t=!1,size:n="medium",variant:i="solid",interactive:d,disabled:c,onClick:u,href:m,component:_="a",replace:C,...h}=e,x={...h,className:(0,a.W)(s().root,s()["size-".concat(n)],s()[i],{[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",{...x,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)(_,{...x,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",{...x})},u=e=>{let{className:t,component:n="img",overlay:r,...i}=e;return(0,o.jsxs)("div",{className:s().media,children:[(0,l.createElement)(n,{...i,className:(0,a.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:a,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)(i.bg,{color:"grey11"}),!n&&r&&(0,o.jsx)(i.aX,{name:r,size:"small",color:u})]}),(0,o.jsxs)("div",{className:s().footerTexts,children:[(0,o.jsx)(i.bL,{component:"span",noWrap:!0,variant:"bold",children:l}),(0,o.jsx)(i.bL,{color:u,component:"span",noWrap:!0,variant:"small",children:a})]}),t]})},C=e=>{let{children:t,...n}=e;return(0,o.jsx)("div",{...n,className:s().status,children:(0,o.jsx)(i.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(11699),i=n(56448),a=n(93671);let l=e=>{let{badgeColor:t,badgeTitle:n,tooltipContent:l}=function(e){let t=d[e.modelType];switch(e.modelStatus){case i.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 i.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 i.GJ.Synced:return{badgeColor:"purple",badgeTitle:"Synced",tooltipContent:"This ".concat(t," is in sync with the remote repository.")};case i.GJ.Deleted:return{badgeColor:"tomato",badgeTitle:"Deleted",tooltipContent:"This ".concat(t," has been deleted locally.")};case i.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===a.t.UNAUTHENTICATED)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (not connected to Prismic)."};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 h}});var o=n(52322),r=n(11699),i=n(39097),a=n.n(i),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},{}):{},C={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]}},h=e=>{let t;let{action:n,isDeleted:i=!1,onUpdateScreenshot:m,selected:_=!1,slice:h,variant:p,variationId:b}=e,f=C.variation(h,b);if(!f)return null;let g=(0,d.d7)(h,f),j=!i&&!!m,y="outlined"===p,k=void 0!==b;return t="selection"===e.mode?{disabled:i,interactive:!0,onClick:()=>{e.onSelectedChange(!_)}}:i?{interactive:!1}:{component:a(),href:c.Y.getBuilderPagePathname({libraryName:h.href,sliceName:h.model.name,variationId:f.id}),interactive:!0,replace:e.replace},(0,o.jsxs)(l.Zb,{"aria-label":"".concat(h.model.name," ").concat(f.name," slice card"),checked:_,"data-testid":"shared-slice-card",...t,..."outlined"===p?{size:"small",variant:"outlined"}:{},children:[void 0!==g?(0,o.jsx)(l.ZB,{alt:"Preview image",overlay:j&&!y?(0,o.jsx)(r.D,{alignItems:"center",justifyContent:"center",children:(0,o.jsx)(x,{onClick:m})}):void 0,src:g}):(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"}),j&&!y?(0,o.jsx)(x,{onClick:m}):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:_,disabled:i,onCheckedChange:e.onSelectedChange})}):"menu"===n.type?(0,o.jsxs)(r.ar,{modal:!0,children:[(0,o.jsx)(r.av,{disabled:i,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:[j&&y?(0,o.jsx)(r.at,{onSelect:m,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&&k?(0,o.jsx)(r.c3,{content:"The slice needs to have at least one variation.",side:"bottom",stableMount:!0,children:(0,o.jsx)(v,{disabled:!0,onSelect:n.onRemove})}):(0,o.jsx)(v,{disabled:!0===n.removeDisabled,onSelect:n.onRemove})]})]}):"remove"===n.type?(0,o.jsx)(r.aZ,{icon:"close",onClick:()=>!i&&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.jsx)(o.Fragment,{children:k?f.id:"".concat(h.model.variations.length," variation").concat(h.model.variations.length>1?"s":"")}),title:k?f.name:h.model.name}),j&&!k&&(0,d.cx)(h)>0?(0,o.jsx)(l.Lm,{children:"Missing screenshot"}):void 0]})},x=e=>(0,o.jsx)(r.E,{onClick:e.onClick,renderStartIcon:()=>(0,o.jsx)(u,{color:r.t.color.grey11}),color:"grey",children:"Update screenshot"}),v=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),i=n(75289);let a=e=>{let{bg:t,background:n,sx:r,withRadius:a,radius:l,children:d}=e;return(0,o.jsx)(i.xu,{sx:{p:4,bg:t||n,...a?{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:C,background:h,children:x,...v}=e;return(0,o.jsx)(l.Provider,{value:c,children:(0,o.jsxs)(i.Zb,{sx:{border:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))},borderRadius:c,..._},...v,children:[t||null,n||null,(0,o.jsxs)(a,{bg:C,background:h,sx:u,withRadius:!d,children:[r?(0,o.jsx)(r,{}):null,x||null]}),d?(0,o.jsx)(a,{bg:C,background:h,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 a},xo:function(){return i}});let o=["components","update","insert"],r=["png","jpg","jpeg"],i=/^[A-Za-z0-9]+(?:_[A-Za-z0-9]+)*$/,a="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"}}}]);

package/out/_next/static/chunks/658-8231c0b729e0124a.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[658],{21442:function(e,i,t){"use strict";t.d(i,{H:function(){return s}});var r=t(2784),n=t(54597);let s=()=>{let{openScreenshotsModal:e}=(0,n.Z)(),[i,t]=(0,r.useState)({sliceFilterFn:e=>e});return{modalPayload:i,onOpenModal:i=>{t(i),e()}}}},68105:function(e,i,t){"use strict";t.d(i,{Z:function(){return O}});var r,n,s=t(52322),l=t(2784),o=t(951),a=t(75100),d=t(56580),c=t(75289),x=t(68238),u=t.n(x);let p=e=>{let{children:i}=e;return(0,s.jsx)("kbd",{className:u().root,children:i})},h=e=>(0,s.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,s.jsxs)("g",{clipPath:"url(#clip0_5065_192538)",children:[(0,s.jsx)("path",{d:"M9.66862 19.9993C11.1406 19.9993 12.3353 18.8047 12.3353 17.3327V14.666H9.66862C8.19662 14.666 7.00195 15.8607 7.00195 17.3327C7.00195 18.8047 8.19662 19.9993 9.66862 19.9993Z",fill:"#0ACF83"}),(0,s.jsx)("path",{d:"M7.00195 12.0007C7.00195 10.5287 8.19662 9.33398 9.66862 9.33398H12.3353V14.6673H9.66862C8.19662 14.6673 7.00195 13.4727 7.00195 12.0007Z",fill:"#A259FF"}),(0,s.jsx)("path",{d:"M7.00195 6.66667C7.00195 5.19467 8.19662 4 9.66862 4H12.3353V9.33333H9.66862C8.19662 9.33333 7.00195 8.13867 7.00195 6.66667Z",fill:"#F24E1E"}),(0,s.jsx)("path",{d:"M12.334 4H15.0007C16.4727 4 17.6673 5.19467 17.6673 6.66667C17.6673 8.13867 16.4727 9.33333 15.0007 9.33333H12.334V4Z",fill:"#FF7262"}),(0,s.jsx)("path",{d:"M17.6673 12.0007C17.6673 13.4727 16.4727 14.6673 15.0007 14.6673C13.5287 14.6673 12.334 13.4727 12.334 12.0007C12.334 10.5287 13.5287 9.33398 15.0007 9.33398C16.4727 9.33398 17.6673 10.5287 17.6673 12.0007Z",fill:"#1ABCFE"})]}),(0,s.jsx)("defs",{children:(0,s.jsx)("clipPath",{id:"clip0_5065_192538",children:(0,s.jsx)("rect",{width:"10.6688",height:"16",fill:"white",transform:"translate(7 4)"})})})]});var f=t(30527),v=t(55862),j=t(75966),m=t(34830),g=t(54597);(r=n||(n={})).Mac="Mac",r.Linux="Linux",r.Windows="Windows";let b=()=>{let{userAgent:e}=navigator,i="Linux";return Object.values(n).forEach(t=>{e.includes(t)&&(i=t)}),i};var C=t(76473),y=t(88932),w=t(94160);async function F(e){let{variationId:i,slice:t,file:r,method:n}=e;try{let e=new FormData;e.append("file",r),e.append("libraryName",t.from),e.append("sliceName",t.model.name),e.append("variationId",i);let{errors:s,url:l}=await (0,w.XQ)({libraryName:t.from,sliceId:t.model.id,variationId:i,file:r});if(s.length>0)throw s;return w.Xe.track({event:"screenshot-taken",type:"custom",method:n}),{...t,screenshots:{...t.screenshots,[i]:{url:l}}}}catch(i){let e="Screenshot not saved";console.error(e,i),y.Am.error(e)}}var E=t(77823),k=t(7974);let D=e=>{let{inputFile:i,handleFile:t,children:r,isDragActive:n}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.__,{htmlFor:"input-file",variant:"buttons.white",sx:{p:2,px:0,display:"flex",justifyContent:"center",width:200,alignItems:"center",flex:1},children:r||"Select file"}),(0,s.jsx)("input",{id:"input-file",type:"file",ref:i,style:{display:"none"},accept:k.nG.map(e=>"image/".concat(e)).join(","),onChange:e=>{var i;t(null===(i=e.target.files)||void 0===i?void 0:i[0],n)}})]})},I=()=>(0,s.jsx)(c.kC,{variant:"boxes.centered",sx:{p:2,position:"absolute",height:"100%",width:"100%",background:"rgba(249, 248, 249, 0.7)",backdropFilter:"blur(5px)",zIndex:"1",pointerEvents:"none"},children:(0,s.jsxs)(c.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:[(0,s.jsx)(S,{isActive:!0}),(0,s.jsx)(c.xv,{sx:{my:2},children:"Drop file here"}),(0,s.jsx)(c.xv,{variant:"secondary",children:"Maximum upload size file: 128Mb"})]})}),S=e=>{let{isActive:i}=e;return(0,s.jsx)(c.kC,{sx:{p:1,borderRadius:"50%",bg:i?"#F1EEFE":"#EDECEE",alignItems:"center",justifyContent:"center",width:"48px",height:"48px"},children:(0,s.jsx)(o.IEK,{style:{color:i?"#6E56CF":"#6F6E77",fontSize:"34px"}})})};var R=e=>{let{variationID:i,slice:t,imageTypes:r=k.nG,onUploadSuccess:n}=e,o=t.screenshots[i],{saveSliceCustomScreenshotSuccess:a}=(0,g.Z)(),[d,x]=(0,l.useState)(!1),[u,p]=(0,l.useState)(!1),[h,f]=(0,l.useState)(!1);(0,C.y1)(["meta+v","ctrl+v"],()=>void w(),[i,t]);let{FileInputRenderer:v,fileInputProps:j}=function(e){let{onHandleFile:i}=e,t=(0,l.useRef)(null),r=async(e,r)=>{e&&(await i(e,r),(null==t?void 0:t.current)&&(t.current.value=""))};return{handleFile:r,inputFile:t,FileInputRenderer:D,fileInputProps:{inputFile:t,handleFile:r}}}({onHandleFile:async(e,r)=>{f(!0);let s=await F({slice:t,file:e,method:r?"dragAndDrop":"upload",variationId:i});p(!1);let l=null==s?void 0:s.screenshots[i];l&&(a(i,l,s),n&&n(s)),f(!1)}}),m=async e=>{if(e.size>128e6)return y.Am.error("File is too big. Max file size: 128Mb.");f(!0);let r=await F({slice:t,file:e,method:"dragAndDrop",variationId:i}),s=null==r?void 0:r.screenshots[i];s&&(a(i,s,r),n&&n(r)),f(!1)},b="function"==typeof navigator.clipboard.read,w=async()=>{if(b)try{let e=await navigator.clipboard.read();if(void 0!==e[0]){let i=e[0].types.find(e=>r.map(e=>"image/".concat(e)).includes(e));if(void 0!==i){let t=await e[0].getType(i),r=new File([t],"file");return m(r)}}}catch(e){console.error("Could not paste file",e)}},R=e=>i=>{i.preventDefault(),x(e)},H=e=>i=>{i.preventDefault(),p(e)};return(0,s.jsxs)(c.kC,{as:"form",variant:"boxes.centered",sx:{bg:"#F9F8F9",position:"relative",borderRadius:"6px",height:"320px"},onDragEnter:R(!0),onDragLeave:R(!1),onDragOver:R(!0),onMouseEnter:H(!0),onMouseLeave:H(!1),onSubmit:e=>e.preventDefault(),onDrop:e=>{var i;e.preventDefault(),x(!1);let t=null===(i=e.dataTransfer.files)||void 0===i?void 0:i[0];if(void 0!==t)return r.some(e=>"image/".concat(e)===t.type)?void m(t):y.Am.error("Only files of type ".concat(r.join(", ")," are accepted."))},children:[h?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.$j,{}),(0,s.jsx)(c.xv,{sx:{my:2},children:"Uploading file ..."})]}):null,h||void 0===o?null:(0,s.jsx)(E.q,{src:o.url,sx:{width:"100%",height:"100%",maxHeight:"100%",backdropFilter:"blur(5px)"}}),h?null:(0,s.jsx)(c.kC,{sx:{p:2,position:"absolute",width:"100%",height:"100%",borderRadius:"6px",background:"#F9F8F9B2",justifyContent:"center",alignItems:"center",visibility:u||void 0===o?"visible":"hidden"},children:(0,s.jsx)(c.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:(0,s.jsxs)(c.kC,{sx:{width:"100%",justifyContent:"center",alignItems:"center",flexDirection:"column"},children:[(0,s.jsx)(S,{isActive:d}),(0,s.jsx)(c.xv,{sx:{my:2},children:b?"Paste, drop or ...":"Drop or ..."}),(0,s.jsx)(v,{...j,isDragActive:d}),(0,s.jsx)(c.xv,{sx:{color:"greyIcon",mt:1},children:"Maximum file size: 128Mb"})]})})}),d?(0,s.jsx)(I,{}):null]})};let H=()=>{let e=b(),i=[n.Windows,n.Linux].includes(e)?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p,{children:"ctrl"})," + ",(0,s.jsx)(p,{children:"shift"})," + ",(0,s.jsx)(p,{children:"c"})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p,{children:"cmd"})," + ",(0,s.jsx)(p,{children:"shift"})," + ",(0,s.jsx)(p,{children:"c"})]});return(0,s.jsxs)(c.kC,{sx:{pl:"4px",alignItems:"center",color:"#000",borderRadius:"6px",fontSize:"12px",lineHeight:"24px",border:"1px solid #E4E2E4",boxShadow:"0px 1px 0px 0px rgba(0, 0, 0, 0.04)",width:"100%",minHeight:"40px"},children:[(0,s.jsx)(h,{}),(0,s.jsxs)("div",{children:["Use\xa0",i," to copy any frame as .png, then just paste it here"]})]})},M=e=>{let{isValid:i}=e;return(0,s.jsx)(c.kC,{sx:{p:2,border:"1px solid #E4E2E4",borderRadius:"6px",bg:"#FFF"},children:i?(0,s.jsx)(o.Ypm,{style:{fontSize:"16px"}}):(0,s.jsx)(a.j6O,{style:{fontSize:"16px",color:"#ED811C"}})})},_=e=>{let{slice:i,onSelectVariation:t,variationSelector:r}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.X6,{as:"h4",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:i.model.name}),(0,s.jsx)(c.xu,{children:(0,s.jsx)(c.xu,{as:"ul",sx:{pl:0,my:3},children:i.model.variations.map(e=>{let{sliceID:n,variationID:l}=r,o=n===i.model.id&&l===e.id;return(0,s.jsx)(c.xu,{as:"li",sx:{listStyle:"none",my:2,p:2,cursor:"pointer",borderRadius:"4px",...o&&{bg:"#EDECEE",fontWeight:"500"},":hover":{bg:"#EDECEE"}},onClick:()=>t({sliceID:i.model.id,variationID:e.id}),children:(0,s.jsxs)(c.kC,{sx:{alignItems:"center"},children:[(0,s.jsx)(M,{isValid:!!i.screenshots[e.id]}),(0,s.jsx)(c.xv,{sx:{ml:2},children:e.name})]})},"".concat(i.model.id,"-").concat(e.id))})})})]})},z=(e,i)=>e||(i.length?{sliceID:i[0].model.id,variationID:i[0].model.variations[0].id}:void 0);function A(e){let{children:i}=e,t=(0,f.W)();return(0,s.jsx)(c.kC,{sx:{position:"sticky",top:0,zIndex:1,background:"gray",p:"16px",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:t,borderTopRightRadius:t,borderBottom:e=>{var i;return"1px solid ".concat(String(null===(i=e.colors)||void 0===i?void 0:i.borders))}},children:i})}var O=e=>{let{slices:i,defaultVariationSelector:t,onUploadSuccess:r}=e,{closeModals:n}=(0,g.Z)(),{isOpen:o}=(0,d.v9)(e=>({isOpen:(0,j.gP)(e,m.q.SCREENSHOTS)})),[a,x]=(0,l.useState)(z(t,i));if((0,l.useEffect)(()=>{x(z(t,i))},[null==t?void 0:t.sliceID,null==t?void 0:t.variationID,o]),0===i.length||!a)return null;let u="function"==typeof navigator.clipboard.read;return(0,s.jsx)(v.Z,{isOpen:o,shouldCloseOnOverlayClick:!0,onRequestClose:()=>n(),children:(0,s.jsx)(f.Z,{radius:"0px",bodySx:{p:0,bg:"#FFF",position:"relative"},sx:{border:"none"},Header:(0,s.jsxs)(A,{children:[(0,s.jsx)(c.X6,{sx:{fontSize:"20px"},children:"Slice screenshots"}),(0,s.jsx)(c.x8,{type:"button",onClick:()=>n()})]}),Footer:null,children:(0,s.jsxs)(c.xu,{sx:{display:"flex",flexWrap:"wrap",height:"100%"},children:[(0,s.jsx)(c.xu,{sx:{p:3,bg:"grey07",flexGrow:1,overflow:"auto",maxHeight:"100%",flexBasis:"sidebar"},children:i.map((e,i)=>(0,s.jsx)(_,{slice:e,variationSelector:a,onSelectVariation:x},"".concat(e.model.id,"-").concat(i)))}),(0,s.jsxs)(c.kC,{as:"main",sx:{p:3,flexGrow:99999,flexBasis:0,flexDirection:"column",minWidth:320,gap:"8px"},children:[u?(0,s.jsx)(H,{}):void 0,(()=>{let e=i.find(e=>e.model.id===a.sliceID);return e?(0,s.jsx)(R,{variationID:a.variationID,slice:e,onUploadSuccess:r}):null})()]})]})})})}},77823:function(e,i,t){"use strict";t.d(i,{q:function(){return a}});var r=t(52322),n=t(2784),s=t(65186),l=t(75289);let o=(0,n.memo)(e=>{let{src:i}=e;return(0,r.jsx)(l.Ee,{src:i,alt:"Preview image",sx:{maxHeight:"100%"}})}),a=e=>{let{src:i,sx:t}=e;return(0,r.jsx)(l.kC,{sx:{position:"relative",alignItems:"center",justifyContent:"center",overflow:"hidden",backgroundImage:"url(/pattern.png)",backgroundColor:"headSection",backgroundRepeat:"repeat",backgroundSize:"20px",borderRadius:"4px",...t},children:void 0!==i?(0,r.jsx)(o,{src:i}):(0,r.jsxs)(l.xv,{sx:{display:"flex",flexDirection:"column",alignItems:"center"},children:[(0,r.jsx)(s.eJU,{}),"You have no screenshot yet."]})})}},68238:function(e){e.exports={root:"Kbd_root__LRA1F"}}}]);

package/out/_next/static/chunks/907-180eb33eefccc237.js

@@ -1 +0,0 @@
-"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)})}}}]);

package/out/_next/static/chunks/918-fa4f2563cb5fd014.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[918],{72779:function(e,t){var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)){if(n.length){var a=r.apply(null,n);a&&e.push(a)}}else if("object"===i){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){e.push(n.toString());continue}for(var c in n)o.call(n,c)&&n[c]&&e.push(c)}}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0!==(n=(function(){return r}).apply(t,[]))&&(e.exports=n)}()},79797:function(e,t,n){"use strict";n.d(t,{Z:function(){return en}});var o,r=n(7896),i=n(59740),a=n(9249),c=n(87371),l=n(45754),s=n(4309),u=n(80753),d=n(56666),f=n(86522),p=n(2784),m=function(e){return+setTimeout(e,16)},v=function(e){return clearTimeout(e)};"undefined"!=typeof window&&"requestAnimationFrame"in window&&(m=function(e){return window.requestAnimationFrame(e)},v=function(e){return window.cancelAnimationFrame(e)});var h=0,y=new Map,g=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=h+=1;return!function t(o){if(0===o)y.delete(n),e();else{var r=m(function(){t(o-1)});y.set(n,r)}}(t),n};g.cancel=function(e){var t=y.get(e);return y.delete(t),v(t)};var E=n(28316);function C(){return!!("undefined"!=typeof window&&window.document&&window.document.createElement)}var w=(0,p.forwardRef)(function(e,t){var n=e.didUpdate,o=e.getContainer,r=e.children,i=(0,p.useRef)(),a=(0,p.useRef)();(0,p.useImperativeHandle)(t,function(){return{}});var c=(0,p.useRef)(!1);return!c.current&&C()&&(a.current=o(),i.current=a.current.parentNode,c.current=!0),(0,p.useEffect)(function(){null==n||n(e)}),(0,p.useEffect)(function(){return null===a.current.parentNode&&null!==i.current&&i.current.appendChild(a.current),function(){var e,t;null===(e=a.current)||void 0===e||null===(t=e.parentNode)||void 0===t||t.removeChild(a.current)}},[]),a.current?E.createPortal(r,a.current):null});function b(e){if("undefined"==typeof document)return 0;if(e||void 0===o){var t=document.createElement("div");t.style.width="100%",t.style.height="200px";var n=document.createElement("div"),r=n.style;r.position="absolute",r.top="0",r.left="0",r.pointerEvents="none",r.visibility="hidden",r.width="200px",r.height="150px",r.overflow="hidden",n.appendChild(t),document.body.appendChild(n);var i=t.offsetWidth;n.style.overflow="scroll";var a=t.offsetWidth;i===a&&(a=n.clientWidth),document.body.removeChild(n),o=i-a}return o}var k=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)return{};var n=t.element,o=void 0===n?document.body:n,r={},i=Object.keys(e);return i.forEach(function(e){r[e]=o.style[e]}),i.forEach(function(t){o.style[t]=e[t]}),r},N={},S=function(e){if(document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight)&&window.innerWidth>document.body.offsetWidth||e){var t="ant-scrolling-effect",n=RegExp("".concat(t),"g"),o=document.body.className;if(e){if(!n.test(o))return;k(N),N={},document.body.className=o.replace(n,"").trim();return}var r=b();if(r&&(N=k({position:"relative",width:"calc(100% - ".concat(r,"px)")}),!n.test(o))){var i="".concat(o," ").concat(t);document.body.className=i.trim()}}},T=n(51171),A=0,L=[],O="ant-scrolling-effect",Z=RegExp("".concat(O),"g"),M=new Map,R=(0,c.Z)(function e(t){var n=this;(0,a.Z)(this,e),(0,d.Z)(this,"lockTarget",void 0),(0,d.Z)(this,"options",void 0),(0,d.Z)(this,"getContainer",function(){var e;return null===(e=n.options)||void 0===e?void 0:e.container}),(0,d.Z)(this,"reLock",function(e){var t=L.find(function(e){return e.target===n.lockTarget});t&&n.unLock(),n.options=e,t&&(t.options=e,n.lock())}),(0,d.Z)(this,"lock",function(){if(!L.some(function(e){return e.target===n.lockTarget})){if(L.some(function(e){var t,o=e.options;return(null==o?void 0:o.container)===(null===(t=n.options)||void 0===t?void 0:t.container)})){L=[].concat((0,T.Z)(L),[{target:n.lockTarget,options:n.options}]);return}var e,t=0,o=(null===(e=n.options)||void 0===e?void 0:e.container)||document.body;(o===document.body&&window.innerWidth-document.documentElement.clientWidth>0||o.scrollHeight>o.clientHeight)&&"hidden"!==getComputedStyle(o).overflow&&(t=b());var r=o.className;if(0===L.filter(function(e){var t,o=e.options;return(null==o?void 0:o.container)===(null===(t=n.options)||void 0===t?void 0:t.container)}).length&&M.set(o,k({width:0!==t?"calc(100% - ".concat(t,"px)"):void 0,overflow:"hidden",overflowX:"hidden",overflowY:"hidden"},{element:o})),!Z.test(r)){var i="".concat(r," ").concat(O);o.className=i.trim()}L=[].concat((0,T.Z)(L),[{target:n.lockTarget,options:n.options}])}}),(0,d.Z)(this,"unLock",function(){var e,t=L.find(function(e){return e.target===n.lockTarget});if(L=L.filter(function(e){return e.target!==n.lockTarget}),!(!t||L.some(function(e){var n,o=e.options;return(null==o?void 0:o.container)===(null===(n=t.options)||void 0===n?void 0:n.container)}))){var o=(null===(e=n.options)||void 0===e?void 0:e.container)||document.body,r=o.className;Z.test(r)&&(k(M.get(o),{element:o}),M.delete(o),o.className=o.className.replace(Z,"").trim())}}),this.lockTarget=A++,this.options=t}),D=0,P=C(),_={},I=function(e){if(!P)return null;if(e){if("string"==typeof e)return document.querySelectorAll(e)[0];if("function"==typeof e)return e();if("object"===(0,f.Z)(e)&&e instanceof window.HTMLElement)return e}return document.body},U=function(e){(0,l.Z)(n,e);var t=(0,s.Z)(n);function n(e){var o;return(0,a.Z)(this,n),o=t.call(this,e),(0,d.Z)((0,u.Z)(o),"container",void 0),(0,d.Z)((0,u.Z)(o),"componentRef",p.createRef()),(0,d.Z)((0,u.Z)(o),"rafId",void 0),(0,d.Z)((0,u.Z)(o),"scrollLocker",void 0),(0,d.Z)((0,u.Z)(o),"renderComponent",void 0),(0,d.Z)((0,u.Z)(o),"updateScrollLocker",function(e){var t=(e||{}).visible,n=o.props,r=n.getContainer,i=n.visible;i&&i!==t&&P&&I(r)!==o.scrollLocker.getContainer()&&o.scrollLocker.reLock({container:I(r)})}),(0,d.Z)((0,u.Z)(o),"updateOpenCount",function(e){var t=e||{},n=t.visible,r=t.getContainer,i=o.props,a=i.visible,c=i.getContainer;a!==n&&P&&I(c)===document.body&&(a&&!n?D+=1:e&&(D-=1)),("function"==typeof c&&"function"==typeof r?c.toString()!==r.toString():c!==r)&&o.removeCurrentContainer()}),(0,d.Z)((0,u.Z)(o),"attachToParent",function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e||o.container&&!o.container.parentNode){var t=I(o.props.getContainer);return!!t&&(t.appendChild(o.container),!0)}return!0}),(0,d.Z)((0,u.Z)(o),"getContainer",function(){return P?(o.container||(o.container=document.createElement("div"),o.attachToParent(!0)),o.setWrapperClassName(),o.container):null}),(0,d.Z)((0,u.Z)(o),"setWrapperClassName",function(){var e=o.props.wrapperClassName;o.container&&e&&e!==o.container.className&&(o.container.className=e)}),(0,d.Z)((0,u.Z)(o),"removeCurrentContainer",function(){var e,t;null===(e=o.container)||void 0===e||null===(t=e.parentNode)||void 0===t||t.removeChild(o.container)}),(0,d.Z)((0,u.Z)(o),"switchScrollingEffect",function(){1!==D||Object.keys(_).length?D||(k(_),_={},S(!0)):(S(),_=k({overflow:"hidden",overflowX:"hidden",overflowY:"hidden"}))}),o.scrollLocker=new R({container:I(e.getContainer)}),o}return(0,c.Z)(n,[{key:"componentDidMount",value:function(){var e=this;this.updateOpenCount(),this.attachToParent()||(this.rafId=g(function(){e.forceUpdate()}))}},{key:"componentDidUpdate",value:function(e){this.updateOpenCount(e),this.updateScrollLocker(e),this.setWrapperClassName(),this.attachToParent()}},{key:"componentWillUnmount",value:function(){var e=this.props,t=e.visible,n=e.getContainer;P&&I(n)===document.body&&(D=t&&D?D-1:D),this.removeCurrentContainer(),g.cancel(this.rafId)}},{key:"render",value:function(){var e=this.props,t=e.children,n=e.forceRender,o=e.visible,r=null,i={getOpenCount:function(){return D},getContainer:this.getContainer,switchScrollingEffect:this.switchScrollingEffect,scrollLocker:this.scrollLocker};return(n||o||this.componentRef.current)&&(r=p.createElement(w,{getContainer:this.getContainer,ref:this.componentRef},t(i))),r}}]),n}(p.Component),H=n(33028),F=n(72779),K=n.n(F),W={MAC_ENTER:3,BACKSPACE:8,TAB:9,NUM_CENTER:12,ENTER:13,SHIFT:16,CTRL:17,ALT:18,PAUSE:19,CAPS_LOCK:20,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,PRINT_SCREEN:44,INSERT:45,DELETE:46,ZERO:48,ONE:49,TWO:50,THREE:51,FOUR:52,FIVE:53,SIX:54,SEVEN:55,EIGHT:56,NINE:57,QUESTION_MARK:63,A:65,B:66,C:67,D:68,E:69,F:70,G:71,H:72,I:73,J:74,K:75,L:76,M:77,N:78,O:79,P:80,Q:81,R:82,S:83,T:84,U:85,V:86,W:87,X:88,Y:89,Z:90,META:91,WIN_KEY_RIGHT:92,CONTEXT_MENU:93,NUM_ZERO:96,NUM_ONE:97,NUM_TWO:98,NUM_THREE:99,NUM_FOUR:100,NUM_FIVE:101,NUM_SIX:102,NUM_SEVEN:103,NUM_EIGHT:104,NUM_NINE:105,NUM_MULTIPLY:106,NUM_PLUS:107,NUM_MINUS:109,NUM_PERIOD:110,NUM_DIVISION:111,F1:112,F2:113,F3:114,F4:115,F5:116,F6:117,F7:118,F8:119,F9:120,F10:121,F11:122,F12:123,NUMLOCK:144,SEMICOLON:186,DASH:189,EQUALS:187,COMMA:188,PERIOD:190,SLASH:191,APOSTROPHE:192,SINGLE_QUOTE:222,OPEN_SQUARE_BRACKET:219,BACKSLASH:220,CLOSE_SQUARE_BRACKET:221,WIN_KEY:224,MAC_FF_META:224,WIN_IME:229,isTextModifyingKeyEvent:function(e){var t=e.keyCode;if(e.altKey&&!e.ctrlKey||e.metaKey||t>=W.F1&&t<=W.F12)return!1;switch(t){case W.ALT:case W.CAPS_LOCK:case W.CONTEXT_MENU:case W.CTRL:case W.DOWN:case W.END:case W.ESC:case W.HOME:case W.INSERT:case W.LEFT:case W.MAC_FF_META:case W.META:case W.NUMLOCK:case W.NUM_CENTER:case W.PAGE_DOWN:case W.PAGE_UP:case W.PAUSE:case W.PRINT_SCREEN:case W.RIGHT:case W.SHIFT:case W.UP:case W.WIN_KEY:case W.WIN_KEY_RIGHT:return!1;default:return!0}},isCharacterKey:function(e){if(e>=W.ZERO&&e<=W.NINE||e>=W.NUM_ZERO&&e<=W.NUM_MULTIPLY||e>=W.A&&e<=W.Z||-1!==window.navigator.userAgent.indexOf("WebKit")&&0===e)return!0;switch(e){case W.SPACE:case W.QUESTION_MARK:case W.NUM_PLUS:case W.NUM_MINUS:case W.NUM_PERIOD:case W.NUM_DIVISION:case W.SEMICOLON:case W.DASH:case W.EQUALS:case W.COMMA:case W.PERIOD:case W.SLASH:case W.APOSTROPHE:case W.SINGLE_QUOTE:case W.OPEN_SQUARE_BRACKET:case W.BACKSLASH:case W.CLOSE_SQUARE_BRACKET:return!0;default:return!1}}},x={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend"},j=Object.keys(x).filter(function(e){if("undefined"==typeof document)return!1;var t=document.getElementsByTagName("html")[0];return e in(t?t.style:{})})[0],B=x[j];function X(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent&&e.attachEvent("on".concat(t),n)}function Y(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.attachEvent&&e.detachEvent("on".concat(t),n)}var V=function(e){return!isNaN(parseFloat(e))&&isFinite(e)},G=!("undefined"!=typeof window&&window.document&&window.document.createElement),Q=function e(t,n,o,r){if(!n||n===document||n instanceof Document)return!1;if(n===t.parentNode)return!0;var i=Math.max(Math.abs(o),Math.abs(r))===Math.abs(r),a=Math.max(Math.abs(o),Math.abs(r))===Math.abs(o),c=n.scrollHeight-n.clientHeight,l=n.scrollWidth-n.clientWidth,s=document.defaultView.getComputedStyle(n),u="auto"===s.overflowY||"scroll"===s.overflowY,d="auto"===s.overflowX||"scroll"===s.overflowX,f=c&&u,p=l&&d;return(!!i&&(!f||!!f&&(n.scrollTop>=c&&r<0||n.scrollTop<=0&&r>0))||!!a&&(!p||!!p&&(n.scrollLeft>=l&&o<0||n.scrollLeft<=0&&o>0)))&&e(t,n.parentNode,o,r)},z=["className","children","style","width","height","defaultOpen","open","prefixCls","placement","level","levelMove","ease","duration","getContainer","handler","onChange","afterVisibleChange","showMask","maskClosable","maskStyle","onClose","onHandleClick","keyboard","getOpenCount","scrollLocker","contentWrapperStyle"],q={},$=function(e){(0,l.Z)(n,e);var t=(0,s.Z)(n);function n(e){var o;return(0,a.Z)(this,n),(o=t.call(this,e)).levelDom=void 0,o.dom=void 0,o.contentWrapper=void 0,o.contentDom=void 0,o.maskDom=void 0,o.handlerDom=void 0,o.drawerId=void 0,o.timeout=void 0,o.passive=void 0,o.startPos=void 0,o.domFocus=function(){o.dom&&o.dom.focus()},o.removeStartHandler=function(e){if(e.touches.length>1){o.startPos=null;return}o.startPos={x:e.touches[0].clientX,y:e.touches[0].clientY}},o.removeMoveHandler=function(e){if(!(e.changedTouches.length>1)&&o.startPos){var t=e.currentTarget,n=e.changedTouches[0].clientX-o.startPos.x,r=e.changedTouches[0].clientY-o.startPos.y;(t===o.maskDom||t===o.handlerDom||t===o.contentDom&&Q(t,e.target,n,r))&&e.cancelable&&e.preventDefault()}},o.transitionEnd=function(e){var t=e.target;Y(t,B,o.transitionEnd),t.style.transition=""},o.onKeyDown=function(e){if(e.keyCode===W.ESC){var t=o.props.onClose;e.stopPropagation(),t&&t(e)}},o.onWrapperTransitionEnd=function(e){var t=o.props,n=t.open,r=t.afterVisibleChange;e.target===o.contentWrapper&&e.propertyName.match(/transform$/)&&(o.dom.style.transition="",!n&&o.getCurrentDrawerSome()&&(document.body.style.overflowX="",o.maskDom&&(o.maskDom.style.left="",o.maskDom.style.width="")),r&&r(!!n))},o.openLevelTransition=function(){var e=o.props,t=e.open,n=e.width,r=e.height,i=o.getHorizontalBoolAndPlacementName(),a=i.isHorizontal,c=i.placementName,l=o.contentDom?o.contentDom.getBoundingClientRect()[a?"width":"height"]:0;o.setLevelAndScrolling(t,c,(a?n:r)||l)},o.setLevelTransform=function(e,t,n,r){var i=o.props,a=i.placement,c=i.levelMove,l=i.duration,s=i.ease,u=i.showMask;o.levelDom.forEach(function(i){i.style.transition="transform ".concat(l," ").concat(s),X(i,B,o.transitionEnd);var d=e?n:0;if(c){var f,p,m=(f={target:i,open:e},Array.isArray(p="function"==typeof c?c(f):c)?2===p.length?p:[p[0],p[1]]:[p]);d=e?m[0]:m[1]||0}var v="number"==typeof d?"".concat(d,"px"):d,h="left"===a||"top"===a?v:"-".concat(v);h=u&&"right"===a&&r?"calc(".concat(h," + ").concat(r,"px)"):h,i.style.transform=d?"".concat(t,"(").concat(h,")"):""})},o.setLevelAndScrolling=function(e,t,n){var r=o.props.onChange;if(!G){var i=document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight)&&window.innerWidth>document.body.offsetWidth?b(!0):0;o.setLevelTransform(e,t,n,i),o.toggleScrollingToDrawerAndBody(i)}r&&r(e)},o.toggleScrollingToDrawerAndBody=function(e){var t=o.props,n=t.getContainer,r=t.showMask,i=t.open,a=n&&n();if(a&&a.parentNode===document.body&&r){var c=["touchstart"],l=[document.body,o.maskDom,o.handlerDom,o.contentDom];i&&"hidden"!==document.body.style.overflow?(e&&o.addScrollingEffect(e),document.body.style.touchAction="none",l.forEach(function(e,t){e&&X(e,c[t]||"touchmove",t?o.removeMoveHandler:o.removeStartHandler,o.passive)})):o.getCurrentDrawerSome()&&(document.body.style.touchAction="",e&&o.remScrollingEffect(e),l.forEach(function(e,t){e&&Y(e,c[t]||"touchmove",t?o.removeMoveHandler:o.removeStartHandler,o.passive)}))}},o.addScrollingEffect=function(e){var t=o.props,n=t.placement,r=t.duration,i=t.ease,a="width ".concat(r," ").concat(i),c="transform ".concat(r," ").concat(i);switch(o.dom.style.transition="none",n){case"right":o.dom.style.transform="translateX(-".concat(e,"px)");break;case"top":case"bottom":o.dom.style.width="calc(100% - ".concat(e,"px)"),o.dom.style.transform="translateZ(0)"}clearTimeout(o.timeout),o.timeout=setTimeout(function(){o.dom&&(o.dom.style.transition="".concat(c,",").concat(a),o.dom.style.width="",o.dom.style.transform="")})},o.remScrollingEffect=function(e){var t,n=o.props,r=n.placement,i=n.duration,a=n.ease;j&&(document.body.style.overflowX="hidden"),o.dom.style.transition="none";var c="width ".concat(i," ").concat(a),l="transform ".concat(i," ").concat(a);switch(r){case"left":o.dom.style.width="100%",c="width 0s ".concat(a," ").concat(i);break;case"right":o.dom.style.transform="translateX(".concat(e,"px)"),o.dom.style.width="100%",c="width 0s ".concat(a," ").concat(i),o.maskDom&&(o.maskDom.style.left="-".concat(e,"px"),o.maskDom.style.width="calc(100% + ".concat(e,"px)"));break;case"top":case"bottom":o.dom.style.width="calc(100% + ".concat(e,"px)"),o.dom.style.height="100%",o.dom.style.transform="translateZ(0)",t="height 0s ".concat(a," ").concat(i)}clearTimeout(o.timeout),o.timeout=setTimeout(function(){o.dom&&(o.dom.style.transition="".concat(l,",").concat(t?"".concat(t,","):"").concat(c),o.dom.style.transform="",o.dom.style.width="",o.dom.style.height="")})},o.getCurrentDrawerSome=function(){return!Object.keys(q).some(function(e){return q[e]})},o.getLevelDom=function(e){var t=e.level,n=e.getContainer;if(!G){var r=n&&n(),i=r?r.parentNode:null;(o.levelDom=[],"all"===t)?(i?Array.prototype.slice.call(i.children):[]).forEach(function(e){"SCRIPT"!==e.nodeName&&"STYLE"!==e.nodeName&&"LINK"!==e.nodeName&&e!==r&&o.levelDom.push(e)}):t&&(Array.isArray(t)?t:[t]).forEach(function(e){document.querySelectorAll(e).forEach(function(e){o.levelDom.push(e)})})}},o.getHorizontalBoolAndPlacementName=function(){var e=o.props.placement,t="left"===e||"right"===e;return{isHorizontal:t,placementName:"translate".concat(t?"X":"Y")}},o.state={_self:(0,u.Z)(o)},o}return(0,c.Z)(n,[{key:"componentDidMount",value:function(){var e,t=this;if(!G){var n=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){return n=!0,null}}))}catch(e){}this.passive=!!n&&{passive:!1}}var o=this.props,r=o.open,i=o.getContainer,a=o.showMask,c=o.autoFocus,l=i&&i();this.drawerId="drawer_id_".concat(Number((Date.now()+Math.random()).toString().replace(".",Math.round(9*Math.random()).toString())).toString(16)),this.getLevelDom(this.props),r&&(l&&l.parentNode===document.body&&(q[this.drawerId]=r),this.openLevelTransition(),this.forceUpdate(function(){c&&t.domFocus()}),a&&(null===(e=this.props.scrollLocker)||void 0===e||e.lock()))}},{key:"componentDidUpdate",value:function(e){var t=this.props,n=t.open,o=t.getContainer,r=t.scrollLocker,i=t.showMask,a=t.autoFocus,c=o&&o();n!==e.open&&(c&&c.parentNode===document.body&&(q[this.drawerId]=!!n),this.openLevelTransition(),n?(a&&this.domFocus(),i&&(null==r||r.lock())):null==r||r.unLock())}},{key:"componentWillUnmount",value:function(){var e=this.props,t=e.open,n=e.scrollLocker;delete q[this.drawerId],t&&(this.setLevelTransform(!1),document.body.style.touchAction=""),null==n||n.unLock()}},{key:"render",value:function(){var e,t,n,o=this,a=this.props,c=a.className,l=a.children,s=a.style,u=a.width,f=a.height,m=(a.defaultOpen,a.open),v=a.prefixCls,h=a.placement,y=(a.level,a.levelMove,a.ease,a.duration,a.getContainer,a.handler),g=(a.onChange,a.afterVisibleChange,a.showMask),E=a.maskClosable,C=a.maskStyle,w=a.onClose,b=a.onHandleClick,k=a.keyboard,N=(a.getOpenCount,a.scrollLocker,a.contentWrapperStyle),S=(0,i.Z)(a,z),T=!!this.dom&&m,A=K()(v,(n={},(0,d.Z)(n,"".concat(v,"-").concat(h),!0),(0,d.Z)(n,"".concat(v,"-open"),T),(0,d.Z)(n,c||"",!!c),(0,d.Z)(n,"no-mask",!g),n)),L=this.getHorizontalBoolAndPlacementName().placementName,O=T?"":"".concat(L,"(").concat("left"===h||"top"===h?"-100%":"100%",")"),Z=y&&p.cloneElement(y,{onClick:function(e){y.props.onClick&&y.props.onClick(),b&&b(e)},ref:function(e){o.handlerDom=e}});return p.createElement("div",(0,r.Z)({},(e=["switchScrollingEffect","autoFocus"],t=(0,H.Z)({},S),Array.isArray(e)&&e.forEach(function(e){delete t[e]}),t),{tabIndex:-1,className:A,style:s,ref:function(e){o.dom=e},onKeyDown:T&&k?this.onKeyDown:void 0,onTransitionEnd:this.onWrapperTransitionEnd}),g&&p.createElement("div",{className:"".concat(v,"-mask"),onClick:E?w:void 0,style:C,ref:function(e){o.maskDom=e}}),p.createElement("div",{className:"".concat(v,"-content-wrapper"),style:(0,H.Z)({transform:O,msTransform:O,width:V(u)?"".concat(u,"px"):u,height:V(f)?"".concat(f,"px"):f},N),ref:function(e){o.contentWrapper=e}},p.createElement("div",{className:"".concat(v,"-content"),ref:function(e){o.contentDom=e}},l),Z))}}],[{key:"getDerivedStateFromProps",value:function(e,t){var n=t.prevProps,o=t._self;if(void 0!==n){var r=e.placement,i=e.level;r!==n.placement&&(o.contentDom=null),i!==n.level&&o.getLevelDom(e)}return{prevProps:e}}}]),n}(p.Component),J=["defaultOpen","getContainer","wrapperClassName","forceRender","handler"],ee=["visible","afterClose"],et=function(e){(0,l.Z)(n,e);var t=(0,s.Z)(n);function n(e){(0,a.Z)(this,n),(o=t.call(this,e)).dom=void 0,o.onHandleClick=function(e){var t=o.props,n=t.onHandleClick,r=t.open;if(n&&n(e),void 0===r){var i=o.state.open;o.setState({open:!i})}},o.onClose=function(e){var t=o.props,n=t.onClose,r=t.open;n&&n(e),void 0===r&&o.setState({open:!1})};var o,r=void 0!==e.open?e.open:!!e.defaultOpen;return o.state={open:r},"onMaskClick"in e&&console.warn("`onMaskClick` are removed, please use `onClose` instead."),o}return(0,c.Z)(n,[{key:"render",value:function(){var e=this,t=this.props,n=(t.defaultOpen,t.getContainer),o=t.wrapperClassName,a=t.forceRender,c=t.handler,l=(0,i.Z)(t,J),s=this.state.open;return n?p.createElement(U,{visible:s,forceRender:!!c||a,getContainer:n,wrapperClassName:o},function(t){var n=t.visible,o=t.afterClose,a=(0,i.Z)(t,ee);return p.createElement($,(0,r.Z)({},l,a,{open:void 0!==n?n:s,afterVisibleChange:void 0!==o?o:l.afterVisibleChange,handler:c,onClose:e.onClose,onHandleClick:e.onHandleClick}))}):p.createElement("div",{className:o,ref:function(t){e.dom=t}},p.createElement($,(0,r.Z)({},l,{open:s,handler:c,getContainer:function(){return e.dom},onClose:this.onClose,onHandleClick:this.onHandleClick})))}}],[{key:"getDerivedStateFromProps",value:function(e,t){var n=t.prevProps,o={prevProps:e};return void 0!==n&&e.open!==n.open&&(o.open=e.open),o}}]),n}(p.Component);et.defaultProps={prefixCls:"drawer",placement:"left",getContainer:"body",defaultOpen:!1,level:"all",duration:".3s",ease:"cubic-bezier(0.78, 0.14, 0.15, 0.86)",onChange:function(){},afterVisibleChange:function(){},handler:p.createElement("div",{className:"drawer-handle"},p.createElement("i",{className:"drawer-handle-icon"})),showMask:!0,maskClosable:!0,maskStyle:{},wrapperClassName:"",className:"",keyboard:!0,forceRender:!1,autoFocus:!0};var en=et},76473:function(e,t,n){"use strict";n.d(t,{y1:function(){return C}});var o=n(2784);function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}n(52322);var i=["shift","alt","meta","mod","ctrl"],a={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function c(e){return(a[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function l(e,t){return void 0===t&&(t=","),e.split(t)}function s(e,t,n){void 0===t&&(t="+");var o=e.toLocaleLowerCase().split(t).map(function(e){return c(e)}),a={alt:o.includes("alt"),ctrl:o.includes("ctrl")||o.includes("control"),shift:o.includes("shift"),meta:o.includes("meta"),mod:o.includes("mod")},l=o.filter(function(e){return!i.includes(e)});return r({},a,{keys:l,description:n})}"undefined"!=typeof document&&(document.addEventListener("keydown",function(e){void 0!==e.key&&f([c(e.key),c(e.code)])}),document.addEventListener("keyup",function(e){void 0!==e.key&&p([c(e.key),c(e.code)])})),"undefined"!=typeof window&&window.addEventListener("blur",function(){u.clear()});var u=new Set;function d(e){return Array.isArray(e)}function f(e){var t=Array.isArray(e)?e:[e];u.has("meta")&&u.forEach(function(e){return!i.includes(e)&&u.delete(e.toLowerCase())}),t.forEach(function(e){return u.add(e.toLowerCase())})}function p(e){var t=Array.isArray(e)?e:[e];"meta"===e?u.clear():t.forEach(function(e){return u.delete(e.toLowerCase())})}function m(e,t){var n=e.target;void 0===t&&(t=!1);var o=n&&n.tagName;return d(t)?!!(o&&t&&t.some(function(e){return e.toLowerCase()===o.toLowerCase()})):!!(o&&t&&!0===t)}var v=function(e,t,n){void 0===n&&(n=!1);var o,r=t.alt,i=t.meta,a=t.mod,l=t.shift,s=t.ctrl,f=t.keys,p=e.key,m=e.code,v=e.ctrlKey,h=e.metaKey,y=e.shiftKey,g=e.altKey,E=c(m),C=p.toLowerCase();if(!n){if(!g===r&&"alt"!==C||!y===l&&"shift"!==C)return!1;if(a){if(!h&&!v)return!1}else if(!h===i&&"meta"!==C&&"os"!==C||!v===s&&"ctrl"!==C&&"control"!==C)return!1}return!!(f&&1===f.length&&(f.includes(C)||f.includes(E)))||(f?(void 0===o&&(o=","),(d(f)?f:f.split(o)).every(function(e){return u.has(e.trim().toLowerCase())})):!f)},h=(0,o.createContext)(void 0),y=(0,o.createContext)({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),g=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},E="undefined"!=typeof window?o.useLayoutEffect:o.useEffect;function C(e,t,n,r){var i,a=(0,o.useRef)(null),u=(0,o.useRef)(!1),C=n instanceof Array?r instanceof Array?void 0:r:n,w=d(e)?e.join(null==C?void 0:C.splitKey):e,b=n instanceof Array?n:r instanceof Array?r:void 0,k=(0,o.useCallback)(t,null!=b?b:[]),N=(0,o.useRef)(k);b?N.current=k:N.current=t;var S=(!function e(t,n){return t&&n&&"object"==typeof t&&"object"==typeof n?Object.keys(t).length===Object.keys(n).length&&Object.keys(t).reduce(function(o,r){return o&&e(t[r],n[r])},!0):t===n}((i=(0,o.useRef)(void 0)).current,C)&&(i.current=C),i.current),T=(0,o.useContext)(y).enabledScopes,A=(0,o.useContext)(h);return E(function(){if((null==S?void 0:S.enabled)!==!1&&(e=null==S?void 0:S.scopes,0===T.length&&e?(console.warn('A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'),!0):!!(!e||T.some(function(t){return e.includes(t)})||T.includes("*")))){var e,t=function(e,t){var n;if(void 0===t&&(t=!1),!(m(e,["input","textarea","select"])&&!m(e,null==S?void 0:S.enableOnFormTags)||null!=S&&null!=S.ignoreEventWhen&&S.ignoreEventWhen(e))){if(null!==a.current&&document.activeElement!==a.current&&!a.current.contains(document.activeElement)){g(e);return}(null==(n=e.target)||!n.isContentEditable||null!=S&&S.enableOnContentEditable)&&l(w,null==S?void 0:S.splitKey).forEach(function(n){var o,r,i,a=s(n,null==S?void 0:S.combinationKey);if(v(e,a,null==S?void 0:S.ignoreModifiers)||null!=(i=a.keys)&&i.includes("*")){if(t&&u.current)return;if(("function"==typeof(o=null==S?void 0:S.preventDefault)&&o(e,a)||!0===o)&&e.preventDefault(),"function"==typeof(r=null==S?void 0:S.enabled)?!r(e,a):!0!==r&&void 0!==r){g(e);return}N.current(e,a),t||(u.current=!0)}})}},n=function(e){void 0!==e.key&&(f(c(e.code)),((null==S?void 0:S.keydown)===void 0&&(null==S?void 0:S.keyup)!==!0||null!=S&&S.keydown)&&t(e))},o=function(e){void 0!==e.key&&(p(c(e.code)),u.current=!1,null!=S&&S.keyup&&t(e,!0))},r=a.current||(null==C?void 0:C.document)||document;return r.addEventListener("keyup",o),r.addEventListener("keydown",n),A&&l(w,null==S?void 0:S.splitKey).forEach(function(e){return A.addHotkey(s(e,null==S?void 0:S.combinationKey,null==S?void 0:S.description))}),function(){r.removeEventListener("keyup",o),r.removeEventListener("keydown",n),A&&l(w,null==S?void 0:S.splitKey).forEach(function(e){return A.removeHotkey(s(e,null==S?void 0:S.combinationKey,null==S?void 0:S.description))})}}},[w,S,T]),a}},926:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}n.d(t,{Z:function(){return o}})},9249:function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw TypeError("Cannot call a class as a function")}n.d(t,{Z:function(){return o}})},87371:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(32802);function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,(0,o.Z)(r.key),r)}}function i(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}},4309:function(e,t,n){"use strict";n.d(t,{Z:function(){return c}});var o=n(95058),r=n(70352),i=n(86522),a=n(80753);function c(e){var t=(0,r.Z)();return function(){var n,r=(0,o.Z)(e);return n=t?Reflect.construct(r,arguments,(0,o.Z)(this).constructor):r.apply(this,arguments),function(e,t){if(t&&("object"===(0,i.Z)(t)||"function"==typeof t))return t;if(void 0!==t)throw TypeError("Derived constructors may only return object or undefined");return(0,a.Z)(e)}(this,n)}}},45754:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var o=n(88960);function r(e,t){if("function"!=typeof t&&null!==t)throw TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&(0,o.Z)(e,t)}},59740:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var o=n(31461);function r(e,t){if(null==e)return{};var n,r,i=(0,o.Z)(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}},51171:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(926),r=n(59147);function i(e){return function(e){if(Array.isArray(e))return(0,o.Z)(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||(0,r.Z)(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},59147:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var o=n(926);function r(e,t){if(e){if("string"==typeof e)return(0,o.Z)(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return(0,o.Z)(e,t)}}}}]);