slice-machine-ui 1.15.1-dev-next-release.0 → 1.15.1-dev-next-release.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/.storybook/preview.tsx +1 -5
  2. package/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx +3 -0
  3. package/lib/builders/SliceBuilder/Header/SimulatorButton/index.tsx +3 -2
  4. package/out/404.html +1 -1
  5. package/out/[lib]/[sliceName]/[variation]/screenshot.html +1 -1
  6. package/out/[lib]/[sliceName]/[variation]/simulator.html +1 -1
  7. package/out/[lib]/[sliceName]/[variation].html +1 -1
  8. package/out/_next/static/chunks/113-34b6cf41a62f08ce.js +3 -0
  9. package/out/_next/static/chunks/{740-d0642219804fa9f0.js → 125-84464edfe25651eb.js} +3 -3
  10. package/out/_next/static/chunks/18539003-1bb05c8aa7db2bc2.js +97 -0
  11. package/out/_next/static/chunks/{377-870ca4414847069f.js → 377-3caacee3c3ffdc25.js} +1 -1
  12. package/out/_next/static/chunks/{573-aaae870d20e5f86c.js → 573-e92018662d1f6c26.js} +1 -1
  13. package/out/_next/static/chunks/746-2ca4784811bde7c1.js +8 -0
  14. package/out/_next/static/chunks/{799-5ea3393033a9f617.js → 799-5c13484e9f945e5d.js} +1 -1
  15. package/out/_next/static/chunks/809-d1f83d7413864f03.js +1 -0
  16. package/out/_next/static/chunks/840-d84a2655185995ce.js +1 -0
  17. package/out/_next/static/chunks/pages/[lib]/[sliceName]/[variation]/{simulator-4dcf33735c45c344.js → simulator-c608e0470a8f6099.js} +1 -1
  18. package/out/_next/static/chunks/pages/[lib]/[sliceName]/[variation]-36ba0bde8415ad8b.js +1 -0
  19. package/out/_next/static/chunks/pages/{_app-2e696c5146b70244.js → _app-0e270aca89a6033d.js} +98 -95
  20. package/out/_next/static/chunks/pages/{changelog-877e16d5731e1966.js → changelog-11c9e241f5a8a4cb.js} +1 -1
  21. package/out/_next/static/chunks/pages/{changes-b85f5f8b616f683f.js → changes-8338c9d0723a7033.js} +1 -1
  22. package/out/_next/static/chunks/pages/custom-types/{[customTypeId]-4fe86acfed194773.js → [customTypeId]-868f09f50fd3039a.js} +1 -1
  23. package/out/_next/static/chunks/pages/custom-types-78e57821222c9603.js +1 -0
  24. package/out/_next/static/chunks/pages/index-d3da65c8b508c26e.js +1 -0
  25. package/out/_next/static/chunks/pages/page-types/{[pageTypeId]-87f5f9704f2c3f2d.js → [pageTypeId]-b6552cab363f7fbf.js} +1 -1
  26. package/out/_next/static/chunks/pages/{slices-53cb97d901d15d93.js → slices-afa4b34df8f8e1c3.js} +1 -1
  27. package/out/_next/static/css/{d6e6d21ff661397d.css → 26b51745402a92af.css} +1 -1
  28. package/out/_next/static/css/66b3836ab88b0c5c.css +1 -0
  29. package/out/_next/static/css/{2d1eda18406a9ff4.css → b6bfe1e0ef76c2b1.css} +1 -1
  30. package/out/_next/static/z-OmqvYWKjvP9W4MN_LBy/_buildManifest.js +1 -0
  31. package/out/changelog.html +1 -1
  32. package/out/changes.html +1 -1
  33. package/out/custom-types/[customTypeId].html +1 -1
  34. package/out/custom-types.html +1 -1
  35. package/out/index.html +1 -1
  36. package/out/page-types/[pageTypeId].html +1 -1
  37. package/out/slices.html +1 -1
  38. package/package.json +8 -8
  39. package/pages/_app.tsx +37 -5
  40. package/pages/index.tsx +8 -0
  41. package/src/components/BaseHoverCard/BaseHoverCard.stories.tsx +1 -0
  42. package/src/components/Card/Card.css.ts +182 -0
  43. package/src/components/Card/Card.stories.tsx +166 -0
  44. package/src/components/Card/Card.tsx +171 -0
  45. package/src/components/Card/index.ts +1 -0
  46. package/src/components/HoverCard/HoverCard.stories.tsx +4 -0
  47. package/src/components/Table/Table.tsx +4 -14
  48. package/src/components/TextLink/TextLink.stories.tsx +2 -5
  49. package/src/components/Window/Window.tsx +8 -4
  50. package/src/features/customTypes/PageTypeOnboarding.tsx +60 -0
  51. package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx +2 -2
  52. package/src/features/slices/sliceBuilder/FloatingBackButton.tsx +3 -13
  53. package/src/hooks/useIsEmptyProject.ts +24 -0
  54. package/src/icons/AddPhotoAlternateIcon.tsx +19 -0
  55. package/src/icons/ArrowDropDownIcon.tsx +14 -0
  56. package/src/icons/BlankPageIcon.tsx +58 -0
  57. package/src/icons/SliceMachinePrinterIcon.tsx +69 -0
  58. package/src/icons/SyncAltIcon.tsx +19 -0
  59. package/test/components/CreateCustomTypeModal.test.tsx +1 -0
  60. package/out/_next/static/WBN_4NBm93_gAe6XjcmpE/_buildManifest.js +0 -1
  61. package/out/_next/static/chunks/18539003-a714ba731c9448b9.js +0 -101
  62. package/out/_next/static/chunks/323-841ea6a21954aa7e.js +0 -1
  63. package/out/_next/static/chunks/482-cb5b635a7b32f4b0.js +0 -1
  64. package/out/_next/static/chunks/746-1d8d106d76d9a63e.js +0 -8
  65. package/out/_next/static/chunks/780-643ae720f13fb3dc.js +0 -1
  66. package/out/_next/static/chunks/pages/[lib]/[sliceName]/[variation]-e1c66b10113d656e.js +0 -1
  67. package/out/_next/static/chunks/pages/custom-types-abb8c8c92880120e.js +0 -1
  68. package/out/_next/static/chunks/pages/index-f382c8090bd21628.js +0 -1
  69. package/out/_next/static/css/fe2a2a1cbf3b4092.css +0 -1
  70. package/src/icons/LightningIcon3D.tsx +0 -49
  71. /package/out/_next/static/{WBN_4NBm93_gAe6XjcmpE → z-OmqvYWKjvP9W4MN_LBy}/_ssgManifest.js +0 -0
@@ -1 +1 @@
1
- (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[377],{96377:function(e,n,t){"use strict";t.d(n,{Z:function(){return S}});var i=t(62230),s=t(85244),r=t(17064),d=t(81541),a=t(52322),c=t(10873),o=t(13980),l=t(2784),u=t(65077),p=t(75289),f=t(28173),x=t(75012),h=t(9620),y=t(2967),j=t(71168),g=t(51579),m=t(13394),b=t(99968),v=t(92809),R=function(e){var n=e.fields,t=e.title,r=e.tabId,d=e.enterEditMode,c=e.enterSelectMode,o=e.onDragEnd,l=e.renderFieldAccessor,u=e.onDeleteItem,f=e.showHints,x=e.newField,h=e.renderHintBase,R=e.isRepeatable,C=e.dataCy,_=e.isRepeatableCustomType,w=e.sx;return(0,a.jsx)(y.Z5,{onDragEnd:o,children:(0,a.jsx)(y.bK,{droppableId:t,children:function(e,t){return(0,a.jsxs)(p.xu,(0,s.Z)((0,i.Z)({as:"ul",ref:e.innerRef},e.droppableProps),{"data-cy":C,sx:w,children:[n.map(function(e,n){var o=e.value,x=o.config,y=o.type,C=(0,b.t)(m,x,y);if(!C)return(0,a.jsx)(j.Z,{children:(0,a.jsxs)(p.xv,{children:['Field type "',y,'" not supported']})});var w={item:e,index:n,tabId:r,widget:C,showHints:f,key:e.key,enterSelectMode:c,renderFieldAccessor:l,enterEditMode:d,parentSnapshot:t,deleteItem:u,draggableId:"list-item-".concat(e.key),isRepeatableCustomType:_};if(C.CustomListItem){var S=C.CustomListItem;return(0,a.jsx)(S,(0,i.Z)({},w))}var I=(0,a.jsx)(v.Z,{item:e,show:f,isRepeatable:R,renderHintBase:h,Widgets:m,typeName:C.CUSTOM_NAME||C.TYPE_NAME});return(0,a.jsx)(g.Z,(0,s.Z)((0,i.Z)({},w),{HintElement:I}))}),e.placeholder,x]}))}})})},C=function(e){var n=e.onEnterSelectMode,t=e.zoneName;return(0,a.jsxs)(p.xu,{sx:{textAlign:"center",my:4},children:[(0,a.jsx)(p.X6,{as:"h5",children:"Add a new field here"}),(0,a.jsx)(p.xu,{sx:{my:2},children:(0,a.jsxs)(p.xv,{sx:{color:"textClear"},children:["Add a field to your ",t," Zone"]})}),(0,a.jsx)(p.xu,{sx:{display:"flex",justifyContent:"center",marginTop:16},children:(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return n()},"data-cy":"add-".concat(t,"-field"),startIcon:"add",children:"Add a new field"})})]})},_=function(e){var n=e.Heading,t=e.Actions;return(0,a.jsxs)(p.kC,{bg:"grey02",sx:{pl:3,pr:2,py:2,mb:2,borderRadius:"6px",alignItems:"center",minHeight:"51px",justifyContent:"space-between"},children:[(0,a.jsx)(p.kC,{sx:{alignItems:"center"},children:n}),(0,a.jsx)(p.kC,{sx:{alignItems:"center"},children:t})]})},w=function(e){var n=e.zoneType,t=e.tabId,o=e.title,y=e.fields,j=e.poolOfFieldsToCheck,g=e.widgetsArray,m=e.isRepeatable,b=e.onDeleteItem,v=e.onSaveNewField,w=e.onDragEnd,S=e.EditModal,I=e.onSave,Z=e.dataTip,k=e.renderHintBase,E=e.renderFieldAccessor,A=e.dataCy,T=e.isRepeatableCustomType,H="customType"===n,N=Object.entries(j).find(function(e){return"UID"===(0,r.Z)(e,2)[1].value.type})?g.filter(function(e){return"UID"!==e.TYPE_NAME}):g,F=(0,l.useState)(!1),M=F[0],O=F[1],q=(0,l.useState)({isOpen:!1}),z=q[0],D=q[1],B=(0,l.useState)({isOpen:!1}),P=B[0],U=B[1],L=(0,l.useState)(null),X=L[0],Y=L[1],G=function(e){D({isOpen:!0,field:e})},K=function(){U({isOpen:!0})},W=function(){D({isOpen:!1})},J=function(){return U({isOpen:!1})},Q=function(e){Y({widgetTypeName:e,fields:y}),U({isOpen:!1})},V=function(){return Y(null)};return(0,a.jsxs)(f.a,{children:[H?(0,a.jsx)(f.B,{actions:y.length>0?(0,a.jsxs)(c.hE,{size:"medium",variant:"secondary",children:[(0,a.jsxs)(c.zx,{variant:"secondary",onClick:function(){return O(!M)},children:[M?"Hide":"Show"," code snippets"]}),(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return K()},"data-cy":"add-".concat(m?"Repeatable":"Static","-field"),startIcon:"add",children:"Add a new field"})]}):void 0,children:o}):(0,a.jsx)(u.xR,{children:(0,a.jsx)(_,{Heading:(0,a.jsx)(p.X6,{as:"h6",children:o}),Actions:y.length>0?(0,a.jsxs)(c.hE,{size:"medium",variant:"secondary",children:[(0,a.jsxs)(c.zx,{variant:"secondary",onClick:function(){return O(!M)},children:[M?"Hide":"Show"," code snippets"]}),(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return K()},"data-cy":"add-".concat(m?"Repeatable":"Static","-field"),startIcon:"add",children:"Add a new field"})]}):null})}),0!==y.length||X?y.length>0||X?(0,a.jsx)(u.xR,{children:(0,a.jsx)(R,{tabId:t,isRepeatable:m,fields:y,showHints:M,dataTip:Z,title:o,renderFieldAccessor:E,renderHintBase:k,enterEditMode:G,enterSelectMode:K,onDragEnd:w,onDeleteItem:b,dataCy:A,isRepeatableCustomType:T,newField:X&&(0,a.jsx)(h.Z,(0,s.Z)((0,i.Z)({},X),{fields:j||y,onSave:function(){for(var e=arguments.length,n=Array(e),t=0;t<e;t++)n[t]=arguments[t];v.apply(void 0,(0,d.Z)(n)),Y(null)},onCancelNewField:V})),sx:H?{paddingInline:"16px !important"}:{}})}):void 0:(0,a.jsx)(u.xR,{children:(0,a.jsx)(C,{onEnterSelectMode:function(){return K()},zoneName:m?"Repeatable":"Static"})}),(0,a.jsx)(S,{data:z,close:W,onSave:I,fields:j,zoneType:n}),(0,a.jsx)(x.Z,{data:P,close:J,onSelect:Q,widgetsArray:N})]})};w.propTypes={isRepeatable:o.bool,title:o.string.isRequired,dataTip:o.string.isRequired,onSave:o.func.isRequired,onSaveNewField:o.func.isRequired,onDragEnd:o.func.isRequired,onDeleteItem:o.func.isRequired,poolOfFieldsToCheck:(0,o.arrayOf)((0,o.shape)({key:o.string,value:o.object})),renderHintBase:o.func.isRequired,renderFieldAccessor:o.func.isRequired,widgetsArray:o.array.isRequired,fields:(0,o.arrayOf)((0,o.shape)({key:o.string.isRequired,value:(0,o.shape)({config:o.object,fields:o.array,type:o.string.isRequired})}))};var S=w},28173:function(e,n,t){"use strict";t.d(n,{a:function(){return c},B:function(){return o}});var i=t(62230),s=t(85244),r=t(98240),d=t(52322),a=t(10873);t(52968);var c=function(e){return(0,d.jsx)("article",(0,s.Z)((0,i.Z)({},e),{className:"_2a96i70 _1ecs97d9bi _1ecs97d9bk _1ecs97d9bt"}))},o=function(e){var n=e.actions,t=e.children,c=e.toggle,o=(0,r.Z)(e,["actions","children","toggle"]);return(0,d.jsxs)("header",(0,s.Z)((0,i.Z)({},o),{className:"_2a96i71 _1ecs97d9bi _1ecs97d9bk _1ecs97d9bq _1ecs97dm _1ecs97d7z _1ecs97d48s _1ecs97d4g5 _1ecs97d9eo _1ecs97d9f1 _1ecs97d9bj _1ecs97d9bu _1ecs97d9l0 _1ecs97d9j4 _1ecs97d9rc _1ecs97d9ro",children:[(0,d.jsx)(a.xv,{color:"grey11",component:"span",variant:"smallBold",children:t}),c,(0,d.jsx)(a.xu,{flexGrow:1,justifyContent:"end",children:n})]}))}},52968:function(){}}]);
1
+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[377],{96377:function(e,n,t){"use strict";t.d(n,{Z:function(){return S}});var i=t(62230),s=t(85244),r=t(17064),d=t(81541),a=t(52322),c=t(71651),o=t(13980),l=t(2784),u=t(65077),p=t(75289),f=t(28173),x=t(75012),h=t(9620),y=t(2967),j=t(71168),g=t(51579),m=t(13394),b=t(99968),v=t(92809),R=function(e){var n=e.fields,t=e.title,r=e.tabId,d=e.enterEditMode,c=e.enterSelectMode,o=e.onDragEnd,l=e.renderFieldAccessor,u=e.onDeleteItem,f=e.showHints,x=e.newField,h=e.renderHintBase,R=e.isRepeatable,C=e.dataCy,_=e.isRepeatableCustomType,w=e.sx;return(0,a.jsx)(y.Z5,{onDragEnd:o,children:(0,a.jsx)(y.bK,{droppableId:t,children:function(e,t){return(0,a.jsxs)(p.xu,(0,s.Z)((0,i.Z)({as:"ul",ref:e.innerRef},e.droppableProps),{"data-cy":C,sx:w,children:[n.map(function(e,n){var o=e.value,x=o.config,y=o.type,C=(0,b.t)(m,x,y);if(!C)return(0,a.jsx)(j.Z,{children:(0,a.jsxs)(p.xv,{children:['Field type "',y,'" not supported']})});var w={item:e,index:n,tabId:r,widget:C,showHints:f,key:e.key,enterSelectMode:c,renderFieldAccessor:l,enterEditMode:d,parentSnapshot:t,deleteItem:u,draggableId:"list-item-".concat(e.key),isRepeatableCustomType:_};if(C.CustomListItem){var S=C.CustomListItem;return(0,a.jsx)(S,(0,i.Z)({},w))}var I=(0,a.jsx)(v.Z,{item:e,show:f,isRepeatable:R,renderHintBase:h,Widgets:m,typeName:C.CUSTOM_NAME||C.TYPE_NAME});return(0,a.jsx)(g.Z,(0,s.Z)((0,i.Z)({},w),{HintElement:I}))}),e.placeholder,x]}))}})})},C=function(e){var n=e.onEnterSelectMode,t=e.zoneName;return(0,a.jsxs)(p.xu,{sx:{textAlign:"center",my:4},children:[(0,a.jsx)(p.X6,{as:"h5",children:"Add a new field here"}),(0,a.jsx)(p.xu,{sx:{my:2},children:(0,a.jsxs)(p.xv,{sx:{color:"textClear"},children:["Add a field to your ",t," Zone"]})}),(0,a.jsx)(p.xu,{sx:{display:"flex",justifyContent:"center",marginTop:16},children:(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return n()},"data-cy":"add-".concat(t,"-field"),startIcon:"add",children:"Add a new field"})})]})},_=function(e){var n=e.Heading,t=e.Actions;return(0,a.jsxs)(p.kC,{bg:"grey02",sx:{pl:3,pr:2,py:2,mb:2,borderRadius:"6px",alignItems:"center",minHeight:"51px",justifyContent:"space-between"},children:[(0,a.jsx)(p.kC,{sx:{alignItems:"center"},children:n}),(0,a.jsx)(p.kC,{sx:{alignItems:"center"},children:t})]})},w=function(e){var n=e.zoneType,t=e.tabId,o=e.title,y=e.fields,j=e.poolOfFieldsToCheck,g=e.widgetsArray,m=e.isRepeatable,b=e.onDeleteItem,v=e.onSaveNewField,w=e.onDragEnd,S=e.EditModal,I=e.onSave,Z=e.dataTip,k=e.renderHintBase,E=e.renderFieldAccessor,A=e.dataCy,T=e.isRepeatableCustomType,H="customType"===n,N=Object.entries(j).find(function(e){return"UID"===(0,r.Z)(e,2)[1].value.type})?g.filter(function(e){return"UID"!==e.TYPE_NAME}):g,F=(0,l.useState)(!1),M=F[0],O=F[1],q=(0,l.useState)({isOpen:!1}),z=q[0],D=q[1],B=(0,l.useState)({isOpen:!1}),P=B[0],U=B[1],L=(0,l.useState)(null),X=L[0],Y=L[1],G=function(e){D({isOpen:!0,field:e})},K=function(){U({isOpen:!0})},W=function(){D({isOpen:!1})},J=function(){return U({isOpen:!1})},Q=function(e){Y({widgetTypeName:e,fields:y}),U({isOpen:!1})},V=function(){return Y(null)};return(0,a.jsxs)(f.a,{children:[H?(0,a.jsx)(f.B,{actions:y.length>0?(0,a.jsxs)(c.hE,{size:"medium",variant:"secondary",children:[(0,a.jsxs)(c.zx,{variant:"secondary",onClick:function(){return O(!M)},children:[M?"Hide":"Show"," code snippets"]}),(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return K()},"data-cy":"add-".concat(m?"Repeatable":"Static","-field"),startIcon:"add",children:"Add a new field"})]}):void 0,children:o}):(0,a.jsx)(u.xR,{children:(0,a.jsx)(_,{Heading:(0,a.jsx)(p.X6,{as:"h6",children:o}),Actions:y.length>0?(0,a.jsxs)(c.hE,{size:"medium",variant:"secondary",children:[(0,a.jsxs)(c.zx,{variant:"secondary",onClick:function(){return O(!M)},children:[M?"Hide":"Show"," code snippets"]}),(0,a.jsx)(c.zx,{variant:"secondary",onClick:function(){return K()},"data-cy":"add-".concat(m?"Repeatable":"Static","-field"),startIcon:"add",children:"Add a new field"})]}):null})}),0!==y.length||X?y.length>0||X?(0,a.jsx)(u.xR,{children:(0,a.jsx)(R,{tabId:t,isRepeatable:m,fields:y,showHints:M,dataTip:Z,title:o,renderFieldAccessor:E,renderHintBase:k,enterEditMode:G,enterSelectMode:K,onDragEnd:w,onDeleteItem:b,dataCy:A,isRepeatableCustomType:T,newField:X&&(0,a.jsx)(h.Z,(0,s.Z)((0,i.Z)({},X),{fields:j||y,onSave:function(){for(var e=arguments.length,n=Array(e),t=0;t<e;t++)n[t]=arguments[t];v.apply(void 0,(0,d.Z)(n)),Y(null)},onCancelNewField:V})),sx:H?{paddingInline:"16px !important"}:{}})}):void 0:(0,a.jsx)(u.xR,{children:(0,a.jsx)(C,{onEnterSelectMode:function(){return K()},zoneName:m?"Repeatable":"Static"})}),(0,a.jsx)(S,{data:z,close:W,onSave:I,fields:j,zoneType:n}),(0,a.jsx)(x.Z,{data:P,close:J,onSelect:Q,widgetsArray:N})]})};w.propTypes={isRepeatable:o.bool,title:o.string.isRequired,dataTip:o.string.isRequired,onSave:o.func.isRequired,onSaveNewField:o.func.isRequired,onDragEnd:o.func.isRequired,onDeleteItem:o.func.isRequired,poolOfFieldsToCheck:(0,o.arrayOf)((0,o.shape)({key:o.string,value:o.object})),renderHintBase:o.func.isRequired,renderFieldAccessor:o.func.isRequired,widgetsArray:o.array.isRequired,fields:(0,o.arrayOf)((0,o.shape)({key:o.string.isRequired,value:(0,o.shape)({config:o.object,fields:o.array,type:o.string.isRequired})}))};var S=w},28173:function(e,n,t){"use strict";t.d(n,{a:function(){return c},B:function(){return o}});var i=t(62230),s=t(85244),r=t(98240),d=t(52322),a=t(71651);t(52968);var c=function(e){return(0,d.jsx)("article",(0,s.Z)((0,i.Z)({},e),{className:"_2a96i70 _1ecs97d9bi _1ecs97d9bk _1ecs97d9bt"}))},o=function(e){var n=e.actions,t=e.children,c=e.toggle,o=(0,r.Z)(e,["actions","children","toggle"]);return(0,d.jsxs)("header",(0,s.Z)((0,i.Z)({},o),{className:"_2a96i71 _1ecs97d9bi _1ecs97d9bk _1ecs97d9bq _1ecs97dm _1ecs97d7z _1ecs97d48s _1ecs97d4g5 _1ecs97d9eo _1ecs97d9f1 _1ecs97d9bj _1ecs97d9bu _1ecs97d9ld _1ecs97d9jc _1ecs97d9ts _1ecs97d9u4",children:[(0,d.jsx)(a.xv,{color:"grey11",component:"span",variant:"smallBold",children:t}),c,(0,d.jsx)(a.xu,{flexGrow:1,justifyContent:"end",children:n})]}))}},52968:function(){}}]);
@@ -1 +1 @@
1
- (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[573],{56577:function(e,n,i){"use strict";i.d(n,{z:function(){return u}});var r=i(62230),t=i(85244),s=i(98240),o=i(52322),l=i(2784),a=i(75289),c=function(e,n){return e?"".concat(e,"-").concat(n):""},d=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},u=(0,l.forwardRef)(function(e,n){var i=e.label,l=e.Icon,u=e.type,x=e.form,p=e.isLoading,f=void 0!==p&&p,h=e.disabled,v=e.onClick,g=e.sx,j=e.iconSize,m=void 0===j?16:j,b=e.iconFill,C=e.variant,y=void 0===C?"primary":C,F=(0,s.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,o.jsx)(a.zx,(0,t.Z)((0,r.Z)({ref:n,sx:(0,r.Z)((0,t.Z)((0,r.Z)({},void 0===g?{}:g),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),f?{cursor:"wait !important"}:{}),type:u,form:x,disabled:void 0!==h&&h||f,onClick:f?void 0:v,variant:y},F),{children:f?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.$j,{size:m,color:d(y),"data-cy":c(F["data-cy"],"spinner")}),l&&i]}):(0,o.jsxs)(o.Fragment,{children:[l&&(0,o.jsx)(l,{size:m,fill:b,"data-cy":c(F["data-cy"],"icon")}),i]})}))})},84449:function(e,n,i){"use strict";i.d(n,{Z:function(){return A}});var r,t,s=i(62230),o=i(85244),l=i(52322),a=i(2784),c=i(56580),d=i(75289),u=i(54132),x=i(951),p=i(75100),f=i(25812),h=i(77174),v=i(24340),g=i(90374),j=i(22710),m=i(99267),b=i(76473),C=i(75329),y=i(57282),F=function(e){var n=e.inputFile,i=e.handleFile,r=e.children,t=e.isDragActive;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.__,{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,l.jsx)("input",{id:"input-file",type:"file",ref:n,style:{display:"none"},accept:C.nG.map(function(e){return"image/".concat(e)}).join(","),onChange:function(e){var n;i(null===(n=e.target.files)||void 0===n?void 0:n[0],t)}})]})},E=i(32665),w=i(3098),S=i(61931),D=function(){return(0,l.jsx)(d.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,l.jsxs)(d.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:[(0,l.jsx)(I,{isActive:!0}),(0,l.jsx)(d.xv,{sx:{my:2},children:"Drop file here"}),(0,l.jsx)(d.xv,{variant:"secondary",children:"Maximum upload size file: 128Mb"})]})})},I=function(e){var n=e.isActive;return(0,l.jsx)(d.kC,{sx:{p:1,borderRadius:"50%",bg:n?"#F1EEFE":"#EDECEE",alignItems:"center",justifyContent:"center",width:"48px",height:"48px"},children:(0,l.jsx)(x.IEK,{style:{color:n?"#6E56CF":"#6F6E77",fontSize:"34px"}})})},k=function(e){var n=e.variationID,i=e.slice,r=e.imageTypes,t=void 0===r?C.nG:r,u=i.screenshots[n],x=(0,g.Z)().openToaster,p=(0,a.useState)(!1),f=p[0],h=p[1],v=(0,a.useState)(!1),k=v[0],R=v[1];(0,b.y1)(["meta+v","ctrl+v"],function(){N()},[n,i,]);var Z,_,M,z,H,O=(0,g.Z)().generateSliceCustomScreenshot,A=(0,c.v9)(function(e){return{isLoadingScreenshot:(0,E.hg)(e,w.z.GENERATE_SLICE_CUSTOM_SCREENSHOT)}}).isLoadingScreenshot,L=(_=(Z={onHandleFile:function(e,r){O(n,i,e,r?"dragAndDrop":"upload"),R(!1)}}).onHandleFile,M=(0,a.useRef)(null),{handleFile:z=function(e,n){e&&(_(e,n),(null==M?void 0:M.current)&&(M.current.value=""))},inputFile:M,FileInputRenderer:F,fileInputProps:{inputFile:M,handleFile:z}}),T=L.FileInputRenderer,V=L.fileInputProps,P=function(e){if(e.size>128e6)return x("File is too big. Max file size: 128Mb.",y.Jf.ERROR);O(n,i,e,"dragAndDrop")},B="function"==typeof navigator.clipboard.read,N=(H=(0,j.Z)(function(){var e,n,i,r,s;return(0,m.__generator)(this,function(o){switch(o.label){case 0:if(!B)return[2];o.label=1;case 1:return o.trys.push([1,5,,6]),[4,navigator.clipboard.read()];case 2:if(!(void 0!==(e=o.sent())[0])||!(void 0!==(n=e[0].types.find(function(e){return t.map(function(e){return"image/".concat(e)}).includes(e)}))))return[3,4];return[4,e[0].getType(n)];case 3:return i=o.sent(),r=new File([i],"file"),[2,P(r)];case 4:return[3,6];case 5:return s=o.sent(),console.error("Could not paste file",s),[3,6];case 6:return[2]}})}),function(){return H.apply(this,arguments)}),W=function(e){e.preventDefault(),h(!1);var n,i=null===(n=e.dataTransfer.files)||void 0===n?void 0:n[0];if(void 0!==i)return t.some(function(e){return"image/".concat(e)===i.type})?P(i):x("Only files of type ".concat(t.join(", ")," are accepted."),y.Jf.ERROR)},G=function(e){return function(n){n.preventDefault(),h(e)}},q=function(e){return function(n){n.preventDefault(),R(e)}};return(0,l.jsxs)(d.kC,{as:"form",variant:"boxes.centered",sx:{bg:"#F9F8F9",position:"relative",borderRadius:"6px",height:"320px"},onDragEnter:G(!0),onDragLeave:G(!1),onDragOver:G(!0),onMouseEnter:q(!0),onMouseLeave:q(!1),onSubmit:function(e){return e.preventDefault()},onDrop:W,children:[A?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.$j,{}),(0,l.jsx)(d.xv,{sx:{my:2},children:"Uploading file ..."})]}):null,A||void 0===u?null:(0,l.jsx)(S.q,{src:u.url,sx:{width:"100%",height:"100%",maxHeight:"100%",backdropFilter:"blur(5px)"}}),A?null:(0,l.jsx)(d.kC,{sx:{p:2,position:"absolute",width:"100%",height:"100%",borderRadius:"6px",background:"#F9F8F9B2",justifyContent:"center",alignItems:"center",visibility:k||void 0===u?"visible":"hidden"},children:(0,l.jsx)(d.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:(0,l.jsxs)(d.kC,{sx:{width:"100%",justifyContent:"center",alignItems:"center",flexDirection:"column"},children:[(0,l.jsx)(I,{isActive:f}),(0,l.jsx)(d.xv,{sx:{my:2},children:B?"Paste, drop or ...":"Drop or ..."}),(0,l.jsx)(T,(0,o.Z)((0,s.Z)({},V),{isDragActive:f})),(0,l.jsx)(d.xv,{sx:{color:"greyIcon",mt:1},children:"Maximum file size: 128Mb"})]})})}),f?(0,l.jsx)(D,{}):null]})},R=function(e){return(0,l.jsxs)("svg",(0,o.Z)((0,s.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:[(0,l.jsxs)("g",{clipPath:"url(#clip0_5065_192538)",children:[(0,l.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,l.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,l.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,l.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,l.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,l.jsx)("defs",{children:(0,l.jsx)("clipPath",{id:"clip0_5065_192538",children:(0,l.jsx)("rect",{width:"10.6688",height:"16",fill:"white",transform:"translate(7 4)"})})})]}))};(t=r||(r={})).Mac="Mac",t.Linux="Linux",t.Windows="Windows";var Z=function(){var e=navigator.userAgent,n=r.Linux;return Object.values(r).forEach(function(i){e.includes(i)&&(n=i)}),n};i(61213);var _=function(e){var n=e.children;return(0,l.jsx)("kbd",{className:"_1nkpwww0 _1ecs97d9sg _1ecs97d6ee _1ecs97d6lr _1ecs97d18 _1ecs97d8l _1ecs97d268 _1ecs97d2dl _1ecs97d9ej _1ecs97d9ex",children:n})},M=function(){var e,n=[r.Windows,r.Linux].includes(Z())?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(_,{children:"ctrl"})," + ",(0,l.jsx)(_,{children:"shift"})," + ",(0,l.jsx)(_,{children:"c"})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(_,{children:"cmd"})," + ",(0,l.jsx)(_,{children:"shift"})," + ",(0,l.jsx)(_,{children:"c"})]});return(0,l.jsxs)(d.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,l.jsx)(R,{}),(0,l.jsxs)("div",{children:["Use\xa0",n," to copy any frame as .png, then just paste it here"]})]})},z=function(e){var n=e.isValid;return(0,l.jsx)(d.kC,{sx:{p:2,border:"1px solid #E4E2E4",borderRadius:"6px",bg:"#FFF"},children:n?(0,l.jsx)(x.Ypm,{style:{fontSize:"16px"}}):(0,l.jsx)(p.j6O,{style:{fontSize:"16px",color:"#ED811C"}})})},H=function(e){var n=e.slice,i=e.onSelectVariation,r=e.variationSelector;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.X6,{as:"h4",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:n.model.name}),(0,l.jsx)(d.xu,{children:(0,l.jsx)(d.xu,{as:"ul",sx:{pl:0,my:3},children:n.model.variations.map(function(e){var t=r.sliceID,a=r.variationID,c=t===n.model.id&&a===e.id;return(0,l.jsx)(d.xu,{as:"li",sx:(0,o.Z)((0,s.Z)({listStyle:"none",my:2,p:2,cursor:"pointer",borderRadius:"4px"},c&&{bg:"#EDECEE",fontWeight:"500"}),{":hover":{bg:"#EDECEE"}}),onClick:function(){return i({sliceID:n.model.id,variationID:e.id})},children:(0,l.jsxs)(d.kC,{sx:{alignItems:"center"},children:[(0,l.jsx)(z,{isValid:!!n.screenshots[e.id]}),(0,l.jsx)(d.xv,{sx:{ml:2},children:e.name})]})},"".concat(n.model.id,"-").concat(e.id))})})})]})},O=function(e,n){return e||(n.length?{sliceID:n[0].model.id,variationID:n[0].model.variations[0].id}:void 0)},A=function(e){var n=e.slices,i=e.defaultVariationSelector,r=(0,g.Z)().closeModals,t=(0,c.v9)(function(e){return{isOpen:(0,h.gP)(e,v.q.SCREENSHOTS)}}).isOpen,s=(0,a.useState)(O(i,n)),o=s[0],x=s[1];if((0,a.useEffect)(function(){x(O(i,n))},[null==i?void 0:i.sliceID,null==i?void 0:i.variationID,t,]),0===n.length||!o)return null;var p,j="function"==typeof navigator.clipboard.read;return(0,l.jsx)(f.Z,{isOpen:t,shouldCloseOnOverlayClick:!0,onRequestClose:function(){return r()},children:(0,l.jsx)(u.Z,{radius:"0px",bodySx:{p:0,bg:"#FFF",position:"relative"},sx:{border:"none"},Header:function(e){var n=e.radius;return(0,l.jsxs)(d.kC,{sx:{position:"sticky",top:0,zIndex:1,background:"gray",p:"16px",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,l.jsx)(d.X6,{sx:{fontSize:"20px"},children:"Slice screenshots"}),(0,l.jsx)(d.x8,{type:"button",onClick:function(){return r()}})]})},Footer:null,children:(0,l.jsxs)(d.xu,{sx:{display:"flex",flexWrap:"wrap",height:"100%"},children:[(0,l.jsx)(d.xu,{sx:{p:3,bg:"grey07",flexGrow:1,overflow:"auto",maxHeight:"100%",flexBasis:"sidebar"},children:n.map(function(e,n){return(0,l.jsx)(H,{slice:e,variationSelector:o,onSelectVariation:x},"".concat(e.model.id,"-").concat(n))})}),(0,l.jsxs)(d.kC,{as:"main",sx:{p:3,flexGrow:99999,flexBasis:0,flexDirection:"column",minWidth:320,gap:"8px"},children:[j?(0,l.jsx)(M,{}):void 0,(p=n.find(function(e){return e.model.id===o.sliceID}))?(0,l.jsx)(k,{variationID:o.variationID,slice:p}):null]})]})})})}},47731:function(e,n,i){"use strict";i.d(n,{H:function(){return s}});var r=i(2784),t=i(90374),s=function(){var e=(0,t.Z)().openScreenshotsModal,n=(0,r.useState)({sliceFilterFn:function(e){return e}}),i=n[0],s=n[1];return{modalPayload:i,onOpenModal:function(n){s(n),e()},openScreenshotsModal:e}}},61213:function(){}}]);
1
+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[573],{56577:function(e,n,i){"use strict";i.d(n,{z:function(){return u}});var r=i(62230),t=i(85244),s=i(98240),o=i(52322),l=i(2784),a=i(75289),c=function(e,n){return e?"".concat(e,"-").concat(n):""},d=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},u=(0,l.forwardRef)(function(e,n){var i=e.label,l=e.Icon,u=e.type,x=e.form,p=e.isLoading,f=void 0!==p&&p,h=e.disabled,v=e.onClick,g=e.sx,j=e.iconSize,m=void 0===j?16:j,b=e.iconFill,C=e.variant,y=void 0===C?"primary":C,F=(0,s.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,o.jsx)(a.zx,(0,t.Z)((0,r.Z)({ref:n,sx:(0,r.Z)((0,t.Z)((0,r.Z)({},void 0===g?{}:g),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),f?{cursor:"wait !important"}:{}),type:u,form:x,disabled:void 0!==h&&h||f,onClick:f?void 0:v,variant:y},F),{children:f?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.$j,{size:m,color:d(y),"data-cy":c(F["data-cy"],"spinner")}),l&&i]}):(0,o.jsxs)(o.Fragment,{children:[l&&(0,o.jsx)(l,{size:m,fill:b,"data-cy":c(F["data-cy"],"icon")}),i]})}))})},84449:function(e,n,i){"use strict";i.d(n,{Z:function(){return A}});var r,t,s=i(62230),o=i(85244),l=i(52322),a=i(2784),c=i(56580),d=i(75289),u=i(54132),x=i(951),p=i(75100),f=i(25812),h=i(77174),v=i(24340),g=i(90374),j=i(22710),m=i(99267),b=i(76473),C=i(75329),y=i(57282),F=function(e){var n=e.inputFile,i=e.handleFile,r=e.children,t=e.isDragActive;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.__,{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,l.jsx)("input",{id:"input-file",type:"file",ref:n,style:{display:"none"},accept:C.nG.map(function(e){return"image/".concat(e)}).join(","),onChange:function(e){var n;i(null===(n=e.target.files)||void 0===n?void 0:n[0],t)}})]})},E=i(32665),w=i(3098),S=i(61931),D=function(){return(0,l.jsx)(d.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,l.jsxs)(d.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:[(0,l.jsx)(I,{isActive:!0}),(0,l.jsx)(d.xv,{sx:{my:2},children:"Drop file here"}),(0,l.jsx)(d.xv,{variant:"secondary",children:"Maximum upload size file: 128Mb"})]})})},I=function(e){var n=e.isActive;return(0,l.jsx)(d.kC,{sx:{p:1,borderRadius:"50%",bg:n?"#F1EEFE":"#EDECEE",alignItems:"center",justifyContent:"center",width:"48px",height:"48px"},children:(0,l.jsx)(x.IEK,{style:{color:n?"#6E56CF":"#6F6E77",fontSize:"34px"}})})},k=function(e){var n=e.variationID,i=e.slice,r=e.imageTypes,t=void 0===r?C.nG:r,u=i.screenshots[n],x=(0,g.Z)().openToaster,p=(0,a.useState)(!1),f=p[0],h=p[1],v=(0,a.useState)(!1),k=v[0],R=v[1];(0,b.y1)(["meta+v","ctrl+v"],function(){N()},[n,i,]);var Z,_,M,z,H,O=(0,g.Z)().generateSliceCustomScreenshot,A=(0,c.v9)(function(e){return{isLoadingScreenshot:(0,E.hg)(e,w.z.GENERATE_SLICE_CUSTOM_SCREENSHOT)}}).isLoadingScreenshot,L=(_=(Z={onHandleFile:function(e,r){O(n,i,e,r?"dragAndDrop":"upload"),R(!1)}}).onHandleFile,M=(0,a.useRef)(null),{handleFile:z=function(e,n){e&&(_(e,n),(null==M?void 0:M.current)&&(M.current.value=""))},inputFile:M,FileInputRenderer:F,fileInputProps:{inputFile:M,handleFile:z}}),T=L.FileInputRenderer,V=L.fileInputProps,P=function(e){if(e.size>128e6)return x("File is too big. Max file size: 128Mb.",y.Jf.ERROR);O(n,i,e,"dragAndDrop")},B="function"==typeof navigator.clipboard.read,N=(H=(0,j.Z)(function(){var e,n,i,r,s;return(0,m.__generator)(this,function(o){switch(o.label){case 0:if(!B)return[2];o.label=1;case 1:return o.trys.push([1,5,,6]),[4,navigator.clipboard.read()];case 2:if(!(void 0!==(e=o.sent())[0])||!(void 0!==(n=e[0].types.find(function(e){return t.map(function(e){return"image/".concat(e)}).includes(e)}))))return[3,4];return[4,e[0].getType(n)];case 3:return i=o.sent(),r=new File([i],"file"),[2,P(r)];case 4:return[3,6];case 5:return s=o.sent(),console.error("Could not paste file",s),[3,6];case 6:return[2]}})}),function(){return H.apply(this,arguments)}),W=function(e){e.preventDefault(),h(!1);var n,i=null===(n=e.dataTransfer.files)||void 0===n?void 0:n[0];if(void 0!==i)return t.some(function(e){return"image/".concat(e)===i.type})?P(i):x("Only files of type ".concat(t.join(", ")," are accepted."),y.Jf.ERROR)},G=function(e){return function(n){n.preventDefault(),h(e)}},q=function(e){return function(n){n.preventDefault(),R(e)}};return(0,l.jsxs)(d.kC,{as:"form",variant:"boxes.centered",sx:{bg:"#F9F8F9",position:"relative",borderRadius:"6px",height:"320px"},onDragEnter:G(!0),onDragLeave:G(!1),onDragOver:G(!0),onMouseEnter:q(!0),onMouseLeave:q(!1),onSubmit:function(e){return e.preventDefault()},onDrop:W,children:[A?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.$j,{}),(0,l.jsx)(d.xv,{sx:{my:2},children:"Uploading file ..."})]}):null,A||void 0===u?null:(0,l.jsx)(S.q,{src:u.url,sx:{width:"100%",height:"100%",maxHeight:"100%",backdropFilter:"blur(5px)"}}),A?null:(0,l.jsx)(d.kC,{sx:{p:2,position:"absolute",width:"100%",height:"100%",borderRadius:"6px",background:"#F9F8F9B2",justifyContent:"center",alignItems:"center",visibility:k||void 0===u?"visible":"hidden"},children:(0,l.jsx)(d.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:(0,l.jsxs)(d.kC,{sx:{width:"100%",justifyContent:"center",alignItems:"center",flexDirection:"column"},children:[(0,l.jsx)(I,{isActive:f}),(0,l.jsx)(d.xv,{sx:{my:2},children:B?"Paste, drop or ...":"Drop or ..."}),(0,l.jsx)(T,(0,o.Z)((0,s.Z)({},V),{isDragActive:f})),(0,l.jsx)(d.xv,{sx:{color:"greyIcon",mt:1},children:"Maximum file size: 128Mb"})]})})}),f?(0,l.jsx)(D,{}):null]})},R=function(e){return(0,l.jsxs)("svg",(0,o.Z)((0,s.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:[(0,l.jsxs)("g",{clipPath:"url(#clip0_5065_192538)",children:[(0,l.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,l.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,l.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,l.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,l.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,l.jsx)("defs",{children:(0,l.jsx)("clipPath",{id:"clip0_5065_192538",children:(0,l.jsx)("rect",{width:"10.6688",height:"16",fill:"white",transform:"translate(7 4)"})})})]}))};(t=r||(r={})).Mac="Mac",t.Linux="Linux",t.Windows="Windows";var Z=function(){var e=navigator.userAgent,n=r.Linux;return Object.values(r).forEach(function(i){e.includes(i)&&(n=i)}),n};i(61213);var _=function(e){var n=e.children;return(0,l.jsx)("kbd",{className:"_1nkpwww0 _1ecs97d9t8 _1ecs97d6ee _1ecs97d6lr _1ecs97d18 _1ecs97d8l _1ecs97d268 _1ecs97d2dl _1ecs97d9ej _1ecs97d9ex",children:n})},M=function(){var e,n=[r.Windows,r.Linux].includes(Z())?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(_,{children:"ctrl"})," + ",(0,l.jsx)(_,{children:"shift"})," + ",(0,l.jsx)(_,{children:"c"})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(_,{children:"cmd"})," + ",(0,l.jsx)(_,{children:"shift"})," + ",(0,l.jsx)(_,{children:"c"})]});return(0,l.jsxs)(d.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,l.jsx)(R,{}),(0,l.jsxs)("div",{children:["Use\xa0",n," to copy any frame as .png, then just paste it here"]})]})},z=function(e){var n=e.isValid;return(0,l.jsx)(d.kC,{sx:{p:2,border:"1px solid #E4E2E4",borderRadius:"6px",bg:"#FFF"},children:n?(0,l.jsx)(x.Ypm,{style:{fontSize:"16px"}}):(0,l.jsx)(p.j6O,{style:{fontSize:"16px",color:"#ED811C"}})})},H=function(e){var n=e.slice,i=e.onSelectVariation,r=e.variationSelector;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(d.X6,{as:"h4",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:n.model.name}),(0,l.jsx)(d.xu,{children:(0,l.jsx)(d.xu,{as:"ul",sx:{pl:0,my:3},children:n.model.variations.map(function(e){var t=r.sliceID,a=r.variationID,c=t===n.model.id&&a===e.id;return(0,l.jsx)(d.xu,{as:"li",sx:(0,o.Z)((0,s.Z)({listStyle:"none",my:2,p:2,cursor:"pointer",borderRadius:"4px"},c&&{bg:"#EDECEE",fontWeight:"500"}),{":hover":{bg:"#EDECEE"}}),onClick:function(){return i({sliceID:n.model.id,variationID:e.id})},children:(0,l.jsxs)(d.kC,{sx:{alignItems:"center"},children:[(0,l.jsx)(z,{isValid:!!n.screenshots[e.id]}),(0,l.jsx)(d.xv,{sx:{ml:2},children:e.name})]})},"".concat(n.model.id,"-").concat(e.id))})})})]})},O=function(e,n){return e||(n.length?{sliceID:n[0].model.id,variationID:n[0].model.variations[0].id}:void 0)},A=function(e){var n=e.slices,i=e.defaultVariationSelector,r=(0,g.Z)().closeModals,t=(0,c.v9)(function(e){return{isOpen:(0,h.gP)(e,v.q.SCREENSHOTS)}}).isOpen,s=(0,a.useState)(O(i,n)),o=s[0],x=s[1];if((0,a.useEffect)(function(){x(O(i,n))},[null==i?void 0:i.sliceID,null==i?void 0:i.variationID,t,]),0===n.length||!o)return null;var p,j="function"==typeof navigator.clipboard.read;return(0,l.jsx)(f.Z,{isOpen:t,shouldCloseOnOverlayClick:!0,onRequestClose:function(){return r()},children:(0,l.jsx)(u.Z,{radius:"0px",bodySx:{p:0,bg:"#FFF",position:"relative"},sx:{border:"none"},Header:function(e){var n=e.radius;return(0,l.jsxs)(d.kC,{sx:{position:"sticky",top:0,zIndex:1,background:"gray",p:"16px",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,l.jsx)(d.X6,{sx:{fontSize:"20px"},children:"Slice screenshots"}),(0,l.jsx)(d.x8,{type:"button",onClick:function(){return r()}})]})},Footer:null,children:(0,l.jsxs)(d.xu,{sx:{display:"flex",flexWrap:"wrap",height:"100%"},children:[(0,l.jsx)(d.xu,{sx:{p:3,bg:"grey07",flexGrow:1,overflow:"auto",maxHeight:"100%",flexBasis:"sidebar"},children:n.map(function(e,n){return(0,l.jsx)(H,{slice:e,variationSelector:o,onSelectVariation:x},"".concat(e.model.id,"-").concat(n))})}),(0,l.jsxs)(d.kC,{as:"main",sx:{p:3,flexGrow:99999,flexBasis:0,flexDirection:"column",minWidth:320,gap:"8px"},children:[j?(0,l.jsx)(M,{}):void 0,(p=n.find(function(e){return e.model.id===o.sliceID}))?(0,l.jsx)(k,{variationID:o.variationID,slice:p}):null]})]})})})}},47731:function(e,n,i){"use strict";i.d(n,{H:function(){return s}});var r=i(2784),t=i(90374),s=function(){var e=(0,t.Z)().openScreenshotsModal,n=(0,r.useState)({sliceFilterFn:function(e){return e}}),i=n[0],s=n[1];return{modalPayload:i,onOpenModal:function(n){s(n),e()},openScreenshotsModal:e}}},61213:function(){}}]);