@billgangcom/theme-lib 1.6.0 → 1.8.0

package/dist/ui.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DSUcxVxJ.cjs"),g=require("react"),z="_wrapper_o1bnv_2",O="_alignmentBlock_o1bnv_8",H="_title_o1bnv_16",M="_subtitle_o1bnv_23",F="_alignmentContent_o1bnv_30",G="_alignments_o1bnv_37",q="_alignment_o1bnv_8",D="_circle_o1bnv_56",Y="_paddings_o1bnv_63",J="_padding_o1bnv_63",K="_input_o1bnv_81",_={wrapper:z,alignmentBlock:O,title:H,subtitle:M,alignmentContent:F,alignments:G,alignment:q,circle:D,paddings:Y,padding:J,input:K},Q=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],U=["left","top","right","bottom"],V=u=>{const{alignment:i,padding:a,setPadding:e,setAlignment:n}=u;return t.jsxRuntimeExports.jsxs("div",{className:_.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:_.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:_.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:_.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:_.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:_.alignments,children:Q.map(c=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{n(p=>c)},className:_.alignment,children:[c!==i&&t.jsxRuntimeExports.jsx("div",{className:_.circle}),c===i&&t.jsxRuntimeExports.jsx(t.Icon,{name:"text-align-left",fill:"#FF3F19"})]},c))}),t.jsxRuntimeExports.jsx("div",{className:_.paddings,children:U.map(c=>t.jsxRuntimeExports.jsxs("label",{className:_.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:`align-${c}`,width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(a[c]),onChange:p=>e(d=>({...d,[c]:Number(p)})),paddingless:!0})]}))})]})]})]})},W="_subtitle_2zbxx_1",X="_header_2zbxx_8",Z="_text_2zbxx_9",tt="_top_2zbxx_16",st="_itemsBlock_2zbxx_23",k={subtitle:W,header:X,text:Z,top:tt,itemsBlock:st},et="_typeTexts_3zlec_1",nt="_block_3zlec_7",ot="_active_3zlec_18",B={typeTexts:et,block:nt,active:ot},it=["bold","italic","underline","strike-through","code"],I=u=>{const{typeText:i,setTypeText:a}=u;return t.jsxRuntimeExports.jsx("div",{className:B.typeTexts,children:it.map(e=>t.jsxRuntimeExports.jsx("div",{className:t.clx(B.block,{[B.active]:i===e}),onClick:()=>a(n=>e),children:t.jsxRuntimeExports.jsx(t.Icon,{name:`text-${e}`,fill:i===e?"#252525":"#757575",width:20,height:20})},String(e)))})},ct=u=>{const{typeText:i,isActiveText:a,setIsActiveText:e,text:n,setText:c,setTypeText:p,title:d,subtitle:o="Items"}=u;return t.jsxRuntimeExports.jsxs("div",{className:k.text,children:[t.jsxRuntimeExports.jsxs("div",{className:k.top,children:[t.jsxRuntimeExports.jsx("h3",{className:k.title,children:d}),t.jsxRuntimeExports.jsx(t.Switch,{current:a,onChange:l=>e(r=>l)})]}),t.jsxRuntimeExports.jsxs("div",{className:k.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:k.subtitle,children:o}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:l=>c(r=>l),value:n,maxLength:150}),t.jsxRuntimeExports.jsx(I,{typeText:i,setTypeText:p})]})]})},lt="_subtitle_2l7ty_1",at="_header_2l7ty_8",rt="_text_2l7ty_9",xt="_productsBlock_2l7ty_10",ut="_top_2l7ty_22",pt="_itemsBlock_2l7ty_29",mt="_typeTexts_2l7ty_35",dt="_block_2l7ty_41",_t="_active_2l7ty_52",ht="_products_2l7ty_10",jt="_product_2l7ty_10",gt="_button_2l7ty_70",bt="_image_2l7ty_80",yt="_info_2l7ty_87",vt="_name_2l7ty_98",Rt="_buttons_2l7ty_102",Et="_modal_2l7ty_108",kt="_other_2l7ty_125",m={subtitle:lt,header:at,text:rt,productsBlock:xt,top:ut,itemsBlock:pt,typeTexts:mt,block:dt,active:_t,products:ht,product:jt,button:gt,image:bt,info:yt,name:vt,buttons:Rt,modal:Et,other:kt},wt=u=>{const{activeItem:i,setActiveItem:a,popupPosition:e}=u;return t.jsxRuntimeExports.jsxs("div",{className:m.modal,onClick:n=>{n.stopPropagation()},style:{top:`${e.top}px`,left:`${e.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:m.top,children:[t.jsxRuntimeExports.jsx("h3",{children:i.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"x",height:20,width:20,hoverable:!0,onClick:()=>a(null)})]}),t.jsxRuntimeExports.jsxs("div",{children:[t.jsxRuntimeExports.jsx("span",{children:"Put up an attractive image"}),t.jsxRuntimeExports.jsx("div",{children:"Choose Image"})]})]})},ft=u=>{const{isActiveItems:i,setIsActiveItems:a,items:e,setItems:n,isProductStats:c,setIsProductStats:p,title:d,subtitle:o,editable:l=!0,draggable:r=!1,withImage:R=!0,itemsType:h,itemsPlaceholder:b="",itemsOptions:T}=u,[C,E]=g.useState(null),[S,P]=g.useState({top:0,left:0});g.useEffect(()=>{const s=()=>{E(null)};return document.body.addEventListener("click",s),E(null),()=>{E(null),document.body.removeEventListener("click",s)}},[]);const A=(s,x)=>{s.stopPropagation();const y=s.target.getBoundingClientRect(),f=100,$=window.innerHeight;let j=y.top+window.scrollY;j+f>$&&(j=$-f-20),P({top:j-80,left:y.left-30}),E(x)};function L(s){if(R&&!s)return t.jsxRuntimeExports.jsx(t.Icon,{name:"image",width:16,height:16,fill:"#757575"})}return t.jsxRuntimeExports.jsxs("div",{className:m.productsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:m.top,children:[d&&t.jsxRuntimeExports.jsx("h3",{className:m.title,children:d}),t.jsxRuntimeExports.jsx(t.Switch,{current:i,onChange:s=>a(x=>s)})]}),C&&l&&t.jsxRuntimeExports.jsx(wt,{activeItem:C,setActiveItem:E,popupPosition:S}),t.jsxRuntimeExports.jsxs("div",{className:m.products,children:[o&&t.jsxRuntimeExports.jsx("h5",{className:m.subtitle,children:o}),e.map(s=>t.jsxRuntimeExports.jsxs("div",{className:m.product,children:[r&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"drag",hoverable:!0,width:20,height:20})}),h==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:x=>{n(y=>[...y].map(j=>j.id===s.id?{...s,name:x}:j))},value:s.name,options:T,leftAddon:L(s.image)}),h==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:x=>{n(y=>[...y].map(j=>j.id===s.id?{...s,name:x}:j))},value:s.name,placeholder:b}),h==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{}),t.jsxRuntimeExports.jsxs("div",{className:m.buttons,children:[l&&t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:x=>{A(x,s)}}),t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,onClick:()=>n(x=>x.filter(y=>y.id!==s.id)),width:20,height:20,fill:"#C12A2A"})]})]},s.id)),t.jsxRuntimeExports.jsxs(t.Button,{className:m.button,size:"s",onClick:()=>n(s=>{const x=[...s];return h==="select"?x.push({name:T[0]||"",id:t.v4()}):h==="input"?x.push({name:"",id:t.v4()}):x.push({id:t.v4()}),x}),children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"plus",width:16,height:16})]})]}),c!==void 0&&t.jsxRuntimeExports.jsxs("div",{className:m.other,children:[t.jsxRuntimeExports.jsx("h5",{className:m.subtitle,children:"Other"}),t.jsxRuntimeExports.jsx(t.Switch,{current:c,onChange:s=>p==null?void 0:p(x=>s),label:"Product Stats",hasBackground:!0,paddingless:!1})]})]})},$t="_subtitle_1y5sw_1",Bt="_header_1y5sw_8",It="_text_1y5sw_9",Tt="_productsBlock_1y5sw_10",Ct="_buttonsBlock_1y5sw_11",Nt="_top_1y5sw_22",St="_itemsBlock_1y5sw_29",Pt="_typeTexts_1y5sw_35",At="_block_1y5sw_41",Lt="_active_1y5sw_52",zt="_products_1y5sw_10",Ot="_product_1y5sw_10",Ht="_button_1y5sw_11",Mt="_image_1y5sw_80",Ft="_info_1y5sw_87",Gt="_name_1y5sw_98",qt="_buttons_1y5sw_11",Dt="_modal_1y5sw_108",Yt="_other_1y5sw_125",Jt="_options_1y5sw_131",v={subtitle:$t,header:Bt,text:It,productsBlock:Tt,buttonsBlock:Ct,top:Nt,itemsBlock:St,typeTexts:Pt,block:At,active:Lt,products:zt,product:Ot,button:Ht,image:Mt,info:Ft,name:Gt,buttons:qt,modal:Dt,other:Yt,options:Jt},Kt=u=>{const{activeButton:i,setActiveButton:a,popupPosition:e}=u,[n,c]=g.useState(i.typeText),[p,d]=g.useState(i.destination),[o,l]=g.useState(i.link||"");return t.jsxRuntimeExports.jsxs("div",{className:v.modal,onClick:r=>{r.stopPropagation()},style:{top:`${e.top}px`,left:`${e.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[t.jsxRuntimeExports.jsx("h3",{children:i.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"x",height:20,width:20,hoverable:!0,onClick:()=>a(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:v.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:r=>d(r),options:["Go to Page","Open Link"],value:p}),p==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:r=>l(r),value:o,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:()=>{},value:"Lorem ipsum dolor sit amet com",label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(I,{typeText:n,setTypeText:c})]})]})},Qt="_subtitle_1y5sw_1",Ut="_header_1y5sw_8",Vt="_text_1y5sw_9",Wt="_productsBlock_1y5sw_10",Xt="_buttonsBlock_1y5sw_11",Zt="_top_1y5sw_22",ts="_itemsBlock_1y5sw_29",ss="_typeTexts_1y5sw_35",es="_block_1y5sw_41",ns="_active_1y5sw_52",os="_products_1y5sw_10",is="_product_1y5sw_10",cs="_button_1y5sw_11",ls="_image_1y5sw_80",as="_info_1y5sw_87",rs="_name_1y5sw_98",xs="_buttons_1y5sw_11",us="_modal_1y5sw_108",ps="_other_1y5sw_125",ms="_options_1y5sw_131",w={subtitle:Qt,header:Ut,text:Vt,productsBlock:Wt,buttonsBlock:Xt,top:Zt,itemsBlock:ts,typeTexts:ss,block:es,active:ns,products:os,product:is,button:cs,image:ls,info:as,name:rs,buttons:xs,modal:us,other:ps,options:ms},N=u=>{const{buttons:i,setButtons:a}=u,[e,n]=g.useState(null),[c,p]=g.useState({top:0,left:0});g.useEffect(()=>{const o=()=>{n(null)};return document.body.addEventListener("click",o),n(null),()=>{n(null),document.body.removeEventListener("click",o)}},[]);const d=(o,l)=>{o.stopPropagation();const r=o.target.getBoundingClientRect(),R=490,h=window.innerHeight;let b=r.top+window.scrollY;b+R>h&&(b=h-R-20),p({top:b,left:r.left-30}),n(l)};return t.jsxRuntimeExports.jsxs("div",{className:w.products,children:[t.jsxRuntimeExports.jsx("h5",{className:w.subtitle,children:"Button Type"}),i.map(o=>t.jsxRuntimeExports.jsxs("div",{className:w.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:l=>{a(r=>[...r].map(b=>b.id===o.id?{...o,type:l}:b))},value:o.type,options:["Primary","Secondary"]}),t.jsxRuntimeExports.jsxs("div",{className:w.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:l=>{d(l,o)}}),t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,onClick:()=>a(l=>l.filter(r=>r.id!==o.id)),width:20,height:20,fill:"#C12A2A"})]})]},o.id)),e&&t.jsxRuntimeExports.jsx(Kt,{activeButton:e,setActiveButton:n,popupPosition:c}),t.jsxRuntimeExports.jsxs(t.Button,{className:w.button,size:"s",onClick:()=>a(o=>{const l=[...o];return l.push({type:"Primary",id:t.v4(),typeText:"bold",destination:"Go to Page"}),l}),children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"plus",width:16,height:16})]})]})},ds=u=>{const{isActiveButtons:i,setIsActiveButtons:a,buttons:e,setButtons:n}=u;return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs("div",{className:v.buttonsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[t.jsxRuntimeExports.jsx("h3",{className:v.title,children:"Buttons"}),t.jsxRuntimeExports.jsx(t.Switch,{current:i,onChange:c=>a(p=>c)})]}),t.jsxRuntimeExports.jsx(N,{buttons:e,setButtons:n})]})})};exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.Icon=t.Icon;exports.Input=t.Input;exports.Modal=t.Modal;exports.Picker=t.Picker;exports.Radio=t.Radio;exports.Select=t.Select;exports.Submodal=t.Submodal;exports.Switch=t.Switch;exports.Textarea=t.Textarea;exports.Tip=t.Tip;exports.ButtonTypeSettings=N;exports.ButtonsSettings=ds;exports.ItemsSettings=ft;exports.LayoutSettings=V;exports.TextSettings=ct;exports.TypeTexts=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-K_gSTxJk.cjs"),b=require("react"),U="_wrapper_1g82c_2",J="_alignmentBlock_1g82c_8",K="_title_1g82c_15",Q="_subtitle_1g82c_22",V="_alignmentContent_1g82c_29",W="_alignments_1g82c_35",X="_alignment_1g82c_8",Z="_circle_1g82c_54",tt="_paddings_1g82c_61",et="_padding_1g82c_61",st="_input_1g82c_79",R={wrapper:U,alignmentBlock:J,title:K,subtitle:Q,alignmentContent:V,alignments:W,alignment:X,circle:Z,paddings:tt,padding:et,input:st},nt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],ot=["left","top","right","bottom"],it=u=>{const{alignment:s,padding:o,setPadding:n,setAlignment:c}=u;function e(){switch(s){case"left":case"topLeft":case"bottomLeft":return"left";case"right":case"topRight":case"bottomRight":return"right";case"center":case"top":case"bottom":return"center";default:return"center"}}return t.jsxRuntimeExports.jsxs("div",{className:R.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:R.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:R.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:R.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:R.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:R.alignments,children:nt.map(i=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{c(i)},className:R.alignment,children:[i!==s&&t.jsxRuntimeExports.jsx("div",{className:R.circle}),i===s&&t.jsxRuntimeExports.jsx(t.Icon,{name:`text-align-${e()}`,fill:"#FF3F19",width:22,height:22})]},i))}),t.jsxRuntimeExports.jsx("div",{className:R.paddings,children:ot.map(i=>t.jsxRuntimeExports.jsxs("label",{className:R.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:`align-${i}`,width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(o[i]),onChange:a=>n({...o,[i]:Number(a)}),paddingless:!0,borderless:!0})]}))})]})]})]})},ct="_subtitle_2zbxx_1",lt="_header_2zbxx_8",at="_text_2zbxx_9",rt="_top_2zbxx_16",ut="_itemsBlock_2zbxx_23",B={subtitle:ct,header:lt,text:at,top:rt,itemsBlock:ut},xt="_typeTexts_3zlec_1",pt="_block_3zlec_7",mt="_active_3zlec_18",S={typeTexts:xt,block:pt,active:mt},dt=["bold","italic","underline","strike-through","code"],A=u=>{const{typeText:s,setTypeText:o}=u;return t.jsxRuntimeExports.jsx("div",{className:S.typeTexts,children:dt.map(n=>t.jsxRuntimeExports.jsx("div",{className:t.clx(S.block,{[S.active]:s===n}),onClick:()=>o(n),children:t.jsxRuntimeExports.jsx(t.Icon,{name:`text-${n}`,fill:s===n?"#252525":"#757575",width:20,height:20})},String(n)))})},z=u=>{const{typeText:s,isActiveText:o,setIsActiveText:n,text:c,setText:e,setTypeText:i,title:a,subtitle:r="Items"}=u;return t.jsxRuntimeExports.jsxs("div",{className:B.text,children:[(a||o)&&t.jsxRuntimeExports.jsxs("div",{className:B.top,children:[a&&t.jsxRuntimeExports.jsx("h3",{className:B.title,children:a}),o&&n&&t.jsxRuntimeExports.jsx(t.Switch,{current:o,onChange:x=>n(x)})]}),t.jsxRuntimeExports.jsxs("div",{className:B.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:B.subtitle,children:r}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:x=>e(x),value:c,maxLength:150}),t.jsxRuntimeExports.jsx(A,{typeText:s,setTypeText:i})]})]})},_t="_subtitle_14b87_1",ht="_header_14b87_8",jt="_text_14b87_9",gt="_productsBlock_14b87_10",bt="_top_14b87_22",Rt="_itemsBlock_14b87_29",Et="_typeTexts_14b87_35",ft="_block_14b87_41",vt="_active_14b87_52",kt="_products_14b87_10",yt="_product_14b87_10",wt="_button_14b87_70",$t="_image_14b87_80",It="_info_14b87_87",Bt="_name_14b87_98",Nt="_buttons_14b87_102",Ct="_modal_14b87_108",Tt="_link_14b87_125",St="_modalOptions_14b87_131",h={subtitle:_t,header:ht,text:jt,productsBlock:gt,top:bt,itemsBlock:Rt,typeTexts:Et,block:ft,active:vt,products:kt,product:yt,button:wt,image:$t,info:It,name:Bt,buttons:Nt,modal:Ct,link:Tt,modalOptions:St},Pt=u=>{const{activeItem:s,setActiveItem:o,popupPosition:n,modalOptions:c}=u;return console.log(s,c),t.jsxRuntimeExports.jsxs("div",{className:h.modal,onClick:e=>{e.stopPropagation()},style:{top:`${n.top}px`,left:`${n.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:h.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"x",height:20,width:20,hoverable:!0,onClick:()=>o(null)})]}),t.jsxRuntimeExports.jsx("div",{className:h.modalOptions,children:c.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:i=>{const a={...s,[e.field]:i[0]};o(a)}});if(e.type==="text")return t.jsxRuntimeExports.jsx(z,{typeText:s[e.field.type]||"bold",setTypeText:i=>{const a={...s,[e.field.type]:i};o(a)},text:s[e.field.text]||"",setText:i=>{const a={...s,[e.field.text]:i};o(a)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:i=>{const a={...s,[e.field]:i};o(a)},value:s[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:h.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:i=>{const a={...s,[e.field.text]:i};o(a)},value:s[e.field.text]||"",label:e.inputLabel,placeholder:e.placeholder}),t.jsxRuntimeExports.jsx(t.Switch,{current:!!s[e.field.switch]||!1,label:e.switchLabel})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(D,{items:s[e.field]||[],setItems:i=>{const a={...s,[e.field]:i};o(a)},itemsType:"select",draggable:e.draggable||!1,itemsOptions:e.itemsOptions,deletable:e.deletable||!1,editable:!1,subtitle:e.label});if(e.type==="select")return t.jsxRuntimeExports.jsx(t.Select,{options:e.itemsOptions,onChange:i=>{const a={...s,[e.field]:i};o(a)},label:e.label,value:s[e.field]||"String"})})})]})},At="_other_1wtgi_1",Ot="_subtitle_1wtgi_7",Lt="_items_1wtgi_14",P={other:At,subtitle:Ot,items:Lt},zt=u=>{const{items:s,title:o="Other"}=u;return t.jsxRuntimeExports.jsxs("div",{className:P.other,children:[t.jsxRuntimeExports.jsx("h5",{className:P.subtitle,children:o}),t.jsxRuntimeExports.jsx("div",{className:P.items,children:s.map(n=>t.jsxRuntimeExports.jsx(t.Switch,{current:n.isItem,onChange:c=>n.setIsItem(c),label:n.label,hasBackground:!0,paddingless:!1}))})]})},D=u=>{const{isActiveItems:s,setIsActiveItems:o,items:n,setItems:c,other:e,title:i,subtitle:a,editable:r=!0,draggable:x=!1,withImage:m=!1,deletable:f=!0,addable:E=!0,itemsType:j,itemsPlaceholder:v="",itemsOptions:_,hasRangeSelector:C=!1,rangeSelectorOptions:O,modalOptions:L}=u,[w,I]=b.useState(null),[F,G]=b.useState({top:0,left:0});b.useEffect(()=>{const l=()=>{I(null)};return document.body.addEventListener("click",l),I(null),()=>{I(null),document.body.removeEventListener("click",l)}},[]),b.useEffect(()=>{if(w){const l=[...n].map(d=>d.id===w.id?w:d);c(l)}},[w]),console.log(n);const q=(l,d)=>{l.stopPropagation();const y=l.target.getBoundingClientRect(),k=100,g=window.innerHeight;let T=y.top+window.scrollY;T+k>g&&(T=g-k-20),G({top:T-80,left:y.left-30}),I(d)};function Y(l){if(m)return l?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${l}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"image",width:16,height:16,fill:"#757575"})}return t.jsxRuntimeExports.jsxs("div",{className:h.productsBlock,children:[(i||s)&&t.jsxRuntimeExports.jsxs("div",{className:h.top,children:[i&&t.jsxRuntimeExports.jsx("h3",{className:h.title,children:i}),s&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:l=>o==null?void 0:o(l)})]}),w&&r&&L&&t.jsxRuntimeExports.jsx(Pt,{activeItem:w,setActiveItem:I,popupPosition:F,modalOptions:L}),C&&O&&t.jsxRuntimeExports.jsx(M,{...O}),t.jsxRuntimeExports.jsxs("div",{className:h.products,children:[a&&t.jsxRuntimeExports.jsx("h5",{className:h.subtitle,children:a}),n.map(l=>t.jsxRuntimeExports.jsxs("div",{className:h.product,children:[x&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"drag",hoverable:!0,width:20,height:20})}),j==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:d=>{const k=[...n].map(g=>g.id===l.id?{...l,name:d}:g);c(k)},value:l.name,options:_,leftAddon:Y(l.image)}),j==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:d=>{const k=[...n].map(g=>g.id===l.id?{...l,name:d}:g);c(k)},value:l.name,placeholder:v}),j==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:d=>{const k=[...n].map(g=>g.id===l.id?{...l,image:d[0]}:g);c(k)}}),t.jsxRuntimeExports.jsxs("div",{className:h.buttons,children:[r&&t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:d=>{q(d,l)}}),f&&t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,onClick:()=>{const d=n.filter(y=>y.id!==l.id);c(d)},width:20,height:20,fill:"#C12A2A"})]})]},l.id)),E&&t.jsxRuntimeExports.jsxs(t.Button,{className:h.button,size:"s",onClick:()=>{const l=[...n];j==="select"?l.push({name:_[0]||`Product ${n.length+1}`,id:t.v4()}):j==="input"?l.push({name:"",id:t.v4()}):l.push({name:`Image ${n.length+1}`,id:t.v4()}),c(l)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"plus",width:16,height:16})]})]}),e!==void 0&&t.jsxRuntimeExports.jsx(zt,{items:e})]})},Dt="_subtitle_41klp_1",Ht="_header_41klp_8",Mt="_text_41klp_9",Ft="_productsBlock_41klp_10",Gt="_buttonsBlock_41klp_11",qt="_top_41klp_21",Yt="_itemsBlock_41klp_28",Ut="_typeTexts_41klp_34",Jt="_block_41klp_40",Kt="_active_41klp_51",Qt="_products_41klp_10",Vt="_product_41klp_10",Wt="_button_41klp_11",Xt="_image_41klp_79",Zt="_info_41klp_86",te="_name_41klp_97",ee="_buttons_41klp_11",se="_modal_41klp_107",ne="_other_41klp_124",oe="_options_41klp_130",$={subtitle:Dt,header:Ht,text:Mt,productsBlock:Ft,buttonsBlock:Gt,top:qt,itemsBlock:Yt,typeTexts:Ut,block:Jt,active:Kt,products:Qt,product:Vt,button:Wt,image:Xt,info:Zt,name:te,buttons:ee,modal:se,other:ne,options:oe},ie=u=>{const{activeButton:s,setActiveButton:o,popupPosition:n}=u,[c,e]=b.useState(s.typeText),[i,a]=b.useState(s.destination),[r,x]=b.useState(s.link||"");return t.jsxRuntimeExports.jsxs("div",{className:$.modal,onClick:m=>{m.stopPropagation()},style:{top:`${n.top}px`,left:`${n.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"x",height:20,width:20,hoverable:!0,onClick:()=>o(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:$.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:m=>a(m),options:["Go to Page","Open Link"],value:i}),i==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:m=>x(m),value:r,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:()=>{},value:"Lorem ipsum dolor sit amet com",label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(A,{typeText:c,setTypeText:e})]})]})},ce="_subtitle_1y5sw_1",le="_header_1y5sw_8",ae="_text_1y5sw_9",re="_productsBlock_1y5sw_10",ue="_buttonsBlock_1y5sw_11",xe="_top_1y5sw_22",pe="_itemsBlock_1y5sw_29",me="_typeTexts_1y5sw_35",de="_block_1y5sw_41",_e="_active_1y5sw_52",he="_products_1y5sw_10",je="_product_1y5sw_10",ge="_button_1y5sw_11",be="_image_1y5sw_80",Re="_info_1y5sw_87",Ee="_name_1y5sw_98",fe="_buttons_1y5sw_11",ve="_modal_1y5sw_108",ke="_other_1y5sw_125",ye="_options_1y5sw_131",N={subtitle:ce,header:le,text:ae,productsBlock:re,buttonsBlock:ue,top:xe,itemsBlock:pe,typeTexts:me,block:de,active:_e,products:he,product:je,button:ge,image:be,info:Re,name:Ee,buttons:fe,modal:ve,other:ke,options:ye},H=u=>{const{buttons:s,setButtons:o}=u,[n,c]=b.useState(null),[e,i]=b.useState({top:0,left:0});b.useEffect(()=>{const r=()=>{c(null)};return document.body.addEventListener("click",r),c(null),()=>{c(null),document.body.removeEventListener("click",r)}},[]);const a=(r,x)=>{r.stopPropagation();const m=r.target.getBoundingClientRect(),f=490,E=window.innerHeight;let j=m.top+window.scrollY;j+f>E&&(j=E-f-20),i({top:j,left:m.left-30}),c(x)};return t.jsxRuntimeExports.jsxs("div",{className:N.products,children:[t.jsxRuntimeExports.jsx("h5",{className:N.subtitle,children:"Button Type"}),s.map(r=>t.jsxRuntimeExports.jsxs("div",{className:N.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:x=>{const f=[...s].map(E=>E.id===r.id?{...r,type:x}:E);o(f)},value:r.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:N.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:x=>{a(x,r)}}),t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,onClick:()=>{const x=s.filter(m=>m.id!==r.id);o(x)},width:20,height:20,fill:"#C12A2A"})]})]},r.id)),n&&t.jsxRuntimeExports.jsx(ie,{activeButton:n,setActiveButton:c,popupPosition:e}),t.jsxRuntimeExports.jsxs(t.Button,{className:N.button,size:"s",onClick:()=>{const r=[...s];r.push({type:"Primary",id:t.v4(),typeText:"bold",destination:"Go to Page"}),o(r)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"plus",width:16,height:16})]})]})},we=u=>{const{isActiveButtons:s,setIsActiveButtons:o,buttons:n,setButtons:c}=u;return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs("div",{className:$.buttonsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{className:$.title,children:"Buttons"}),t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:e=>o(e)})]}),t.jsxRuntimeExports.jsx(H,{buttons:n,setButtons:c})]})})},$e="_wrapper_tn7gb_1",Ie="_subtitle_tn7gb_7",Be="_content_tn7gb_14",Ne="_range_tn7gb_21",Ce="_track_tn7gb_26",Te="_progress_tn7gb_35",Se="_dots_tn7gb_45",Pe="_dot_tn7gb_45",Ae="_active_tn7gb_62",Oe="_input_tn7gb_74",Le="_countBlock_tn7gb_88",ze="_count_tn7gb_88",De="_controls_tn7gb_103",He="_button_tn7gb_108",p={wrapper:$e,subtitle:Ie,content:Be,range:Ne,track:Ce,progress:Te,dots:Se,dot:Pe,active:Ae,input:Oe,countBlock:Le,count:ze,controls:De,button:He},M=u=>{const{label:s,min:o=1,max:n=4,step:c=1,count:e,setCount:i}=u,[a,r]=b.useState(!1),x=Array.from({length:(n-o)/c+1}),m=(e-o)/(n-o)*100,f=()=>{e<n&&i(e+c)},E=()=>{e>o&&i(e-c)},j=v=>{const _=o+v*c;i(_)};return t.jsxRuntimeExports.jsxs("div",{className:p.wrapper,children:[s&&t.jsxRuntimeExports.jsx("h5",{className:p.subtitle,children:s}),t.jsxRuntimeExports.jsxs("div",{className:p.content,children:[t.jsxRuntimeExports.jsxs("div",{className:p.range,children:[t.jsxRuntimeExports.jsx("div",{className:p.track}),t.jsxRuntimeExports.jsx("div",{className:p.progress,style:{width:`${m}%`}}),t.jsxRuntimeExports.jsx("div",{className:p.dots,children:x.map((v,_)=>{const C=_<=(e-o)/c;return t.jsxRuntimeExports.jsx("button",{onClick:()=>j(_),className:t.clx(p.dot,{[p.active]:C,[p.inactive]:!C,[p.dragging]:a}),"aria-label":`Set value to ${o+_*c}`},_)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:o,max:n,step:c,value:e,onChange:v=>i(Number(v.target.value)),onMouseDown:()=>r(!0),onMouseUp:()=>r(!1),onTouchStart:()=>r(!0),onTouchEnd:()=>r(!1),className:p.input})]}),t.jsxRuntimeExports.jsxs("div",{className:p.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:o,max:n,paddingless:!0,onChange:v=>{const _=Number(v);_>n?i(n):_<o?i(o):i(_)},value:String(e)}),t.jsxRuntimeExports.jsxs("div",{className:p.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:f,disabled:e>=n,className:p.button,"aria-label":"Increment count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"arrow-down",width:15,height:15,rotated:!0})}),t.jsxRuntimeExports.jsx("button",{onClick:E,disabled:e<=o,className:p.button,"aria-label":"Decrement count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"arrow-down",width:15,height:15})})]})]})]})]})};exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.Icon=t.Icon;exports.Input=t.Input;exports.Modal=t.Modal;exports.Picker=t.Picker;exports.Radio=t.Radio;exports.Select=t.Select;exports.Submodal=t.Submodal;exports.Switch=t.Switch;exports.Textarea=t.Textarea;exports.Tip=t.Tip;exports.ButtonTypeSettings=H;exports.ButtonsSettings=we;exports.ItemsSettings=D;exports.LayoutSettings=it;exports.RangeSelector=M;exports.TextSettings=z;exports.TypeTexts=A;