@scalably/ui 0.7.11 → 0.7.13

package/dist/index.esm.js

@@ -152,7 +152,7 @@ import {memo,forwardRef,useId,Children,createContext,useState,cloneElement,useRe
     </blockquote>
 `,U0=a6;var n6=()=>`
     <hr style="border: 0; border-top: 1px solid #ccc; margin: 20px 0;" />
-`,j0=n6;var p6=[{id:"paragraph",label:"Paragraph",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M10,13H22V11H10V13M10,19H22V17H10V19M10,7V9H22V7H10M6,7V9H8V7H6M6,13V11H8V13H6M6,17V19H8V17H6Z"/></svg>',content:G0},{id:"heading",label:"Heading",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M5,4V7H10.5V19H13.5V7H19V4H5Z" /></svg>',content:Z0},{id:"list",label:"List",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M3,4H7V8H3V4M9,5V7H21V5H9M3,10H7V14H3V10M9,11V13H21V11H9M3,16H7V20H3V16M9,17V19H21V17H9Z" /></svg>',content:O0},{id:"quote",label:"Quote",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" /></svg>',content:U0},{id:"image",label:"Image",category:"Media",media:'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>',content:{type:"image"}},{id:"video",label:"Video",category:"Media",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M14.73 2H9.27002V6.36H14.73V2Z" fill="currentColor" /><path d="M16.23 2V6.36H21.87C21.36 3.61 19.33 2.01 16.23 2Z" fill="currentColor" /><path d="M2 7.86V16.19C2 19.83 4.17 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.86H2ZM14.44 16.18L12.36 17.38C11.92 17.63 11.49 17.76 11.09 17.76C10.79 17.76 10.52 17.69 10.27 17.55C9.69 17.22 9.37 16.54 9.37 15.66V13.26C9.37 12.38 9.69 11.7 10.27 11.37C10.85 11.03 11.59 11.09 12.36 11.54L14.44 12.74C15.21 13.18 15.63 13.8 15.63 14.47C15.63 15.14 15.2 15.73 14.44 16.18Z" fill="currentColor" /><path d="M7.76988 2C4.66988 2.01 2.63988 3.61 2.12988 6.36H7.76988V2Z" fill="currentColor" /></svg>',content:{type:"video",style:{width:"100%",height:"350px"}}},{id:"grid-2-cols",label:"Columns (2)",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,2H22V22H2V2M4,4V20H12V4H4M14,4V20H20V4H14Z" /></svg>',content:_0},{id:"input",label:"Input",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7A2,2 0 0,0 20,5M20,17H4V7H20V17M18,15H6V13H18V15M18,11H6V9H18V11Z"/></svg>',content:W0},{id:"grid-3-cols",label:"Columns (3)",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,2H22V22H2V2M4,4V20H8V4H4M10,4V20H14V4H10M16,4V20H20V4H16Z" /></svg>',content:z0},{id:"button",label:"Button",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /></svg>',content:D0},{id:"separator",label:"Separator",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,11H22V13H2V11Z" /></svg>',content:j0},{id:"empty-div",label:"Empty Box",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z" /></svg>',content:F0},{id:"animated-box",label:"Animated Box",category:"Basic",content:{type:"gsap-box",content:"Click me to add animation",style:{padding:"20px",background:"#eee","text-align":"center"}}}],g6={height:"100vh",storageManager:false,blockManager:{blocks:p6},canvas:{scripts:["https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js","https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"],styles:["https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"]},deviceManager:{devices:[{name:"Desktop",width:"900px"},{name:"Tablet",width:"768px"},{name:"Mobile",width:"375px"},{name:"Mobile Landscape",width:"500px"}]}},m6=e=>{let o=new DOMParser().parseFromString(e,"text/html"),t=o.body.innerHTML,i=o.head.innerHTML;return {html:t,css:i}},b6=e=>{let r=/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/,o=e.match(r);return o&&o[7].length===11?o[7]:e},f6=e=>{e.Components.addType("empty-div",{model:{defaults:{resizable:true}}}),e.Components.addType("gsap-box",{model:{defaults:{script:function(){let r=this,o=()=>{typeof gsap<"u"&&typeof ScrollTrigger<"u"?(gsap.registerPlugin(ScrollTrigger),gsap.to(r,{scrollTrigger:{trigger:r,start:"top bottom",end:"center center",scrub:true},x:100,rotation:360})):setTimeout(o,50);};o();}}}}),e.Components.addType("video",{model:{defaults:{traits:[{type:"text",label:"URL",name:"videoId",changeProp:true}]},init(){this.on("change:videoId",this.onIdChange);},onIdChange(){let r=this.get("videoId");if(r){let o=b6(r);o!==r&&this.set("videoId",o);}}}});},h6=({onSave:e,initialData:r})=>{let[o,t]=useState(false);useEffect(()=>{t(true);},[]);let i=useCallback(n=>{n.StyleManager.removeProperty("typography","font-family"),n.setStyle(`
+`,j0=n6;var p6=[{id:"paragraph",label:"Paragraph",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M10,13H22V11H10V13M10,19H22V17H10V19M10,7V9H22V7H10M6,7V9H8V7H6M6,13V11H8V13H6M6,17V19H8V17H6Z"/></svg>',content:G0},{id:"heading",label:"Heading",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M5,4V7H10.5V19H13.5V7H19V4H5Z" /></svg>',content:Z0},{id:"list",label:"List",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M3,4H7V8H3V4M9,5V7H21V5H9M3,10H7V14H3V10M9,11V13H21V11H9M3,16H7V20H3V16M9,17V19H21V17H9Z" /></svg>',content:O0},{id:"quote",label:"Quote",category:"Text",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" /></svg>',content:U0},{id:"image",label:"Image",category:"Media",media:'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>',content:{type:"image"}},{id:"video",label:"Video",category:"Media",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M14.73 2H9.27002V6.36H14.73V2Z" fill="currentColor" /><path d="M16.23 2V6.36H21.87C21.36 3.61 19.33 2.01 16.23 2Z" fill="currentColor" /><path d="M2 7.86V16.19C2 19.83 4.17 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.86H2ZM14.44 16.18L12.36 17.38C11.92 17.63 11.49 17.76 11.09 17.76C10.79 17.76 10.52 17.69 10.27 17.55C9.69 17.22 9.37 16.54 9.37 15.66V13.26C9.37 12.38 9.69 11.7 10.27 11.37C10.85 11.03 11.59 11.09 12.36 11.54L14.44 12.74C15.21 13.18 15.63 13.8 15.63 14.47C15.63 15.14 15.2 15.73 14.44 16.18Z" fill="currentColor" /><path d="M7.76988 2C4.66988 2.01 2.63988 3.61 2.12988 6.36H7.76988V2Z" fill="currentColor" /></svg>',content:{type:"video",style:{width:"100%",height:"350px"}}},{id:"grid-2-cols",label:"Columns (2)",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,2H22V22H2V2M4,4V20H12V4H4M14,4V20H20V4H14Z" /></svg>',content:_0},{id:"input",label:"Input",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7A2,2 0 0,0 20,5M20,17H4V7H20V17M18,15H6V13H18V15M18,11H6V9H18V11Z"/></svg>',content:W0},{id:"grid-3-cols",label:"Columns (3)",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,2H22V22H2V2M4,4V20H8V4H4M10,4V20H14V4H10M16,4V20H20V4H16Z" /></svg>',content:z0},{id:"button",label:"Button",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /></svg>',content:D0},{id:"separator",label:"Separator",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M2,11H22V13H2V11Z" /></svg>',content:j0},{id:"empty-div",label:"Empty Box",category:"Design",media:'<svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z" /></svg>',content:F0},{id:"animated-box",label:"Animated Box",category:"Basic",content:{type:"gsap-box",content:"Click me to add animation",style:{padding:"20px",background:"#eee","text-align":"center"}}}],g6={height:"100vh",storageManager:false,blockManager:{blocks:p6},canvas:{scripts:["https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js","https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"],styles:["https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"]},deviceManager:{devices:[{name:"Desktop",width:"900px",widthMedia:""},{name:"Tablet",width:"768px"},{name:"Mobile",width:"375px"},{name:"Mobile Landscape",width:"500px"}]}},m6=e=>{let o=new DOMParser().parseFromString(e,"text/html"),t=o.body.innerHTML,i=o.head.innerHTML;return {html:t,css:i}},b6=e=>{let r=/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/,o=e.match(r);return o&&o[7].length===11?o[7]:e},f6=e=>{e.Components.addType("empty-div",{model:{defaults:{resizable:true}}}),e.Components.addType("gsap-box",{model:{defaults:{script:function(){let r=this,o=()=>{typeof gsap<"u"&&typeof ScrollTrigger<"u"?(gsap.registerPlugin(ScrollTrigger),gsap.to(r,{scrollTrigger:{trigger:r,start:"top bottom",end:"center center",scrub:true},x:100,rotation:360})):setTimeout(o,50);};o();}}}}),e.Components.addType("video",{model:{defaults:{traits:[{type:"text",label:"URL",name:"videoId",changeProp:true}]},init(){this.on("change:videoId",this.onIdChange);},onIdChange(){let r=this.get("videoId");if(r){let o=b6(r);o!==r&&this.set("videoId",o);}}}});},h6=({onSave:e,initialData:r})=>{let[o,t]=useState(false);useEffect(()=>{t(true);},[]);let i=useCallback(n=>{n.StyleManager.removeProperty("typography","font-family"),n.setStyle(`
         html { scroll-behavior: smooth; }
         body { 
           font-family: 'Poppins', sans-serif;