@billgangcom/theme-lib 1.8.0 → 1.8.2

package/dist/ui.cjs.js

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-D4KlodOJ.cjs"),b=require("react"),V="_wrapper_1g82c_2",W="_alignmentBlock_1g82c_8",X="_title_1g82c_15",Z="_subtitle_1g82c_22",tt="_alignmentContent_1g82c_29",et="_alignments_1g82c_35",st="_alignment_1g82c_8",nt="_circle_1g82c_54",ot="_paddings_1g82c_61",it="_padding_1g82c_61",ct="_input_1g82c_79",v={wrapper:V,alignmentBlock:W,title:X,subtitle:Z,alignmentContent:tt,alignments:et,alignment:st,circle:nt,paddings:ot,padding:it,input:ct},lt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],rt=["left","top","right","bottom"],at=x=>{const{alignment:s,padding:o,setPadding:i,setAlignment:l}=x;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:v.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:v.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:v.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:v.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:v.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:v.alignments,children:lt.map(n=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{l(n)},className:v.alignment,children:[n!==s&&t.jsxRuntimeExports.jsx("div",{className:v.circle}),n===s&&t.jsxRuntimeExports.jsx(t.Icon,{name:`text-align-${e()}`,fill:"#FF3F19",width:22,height:22})]},n))}),t.jsxRuntimeExports.jsx("div",{className:v.paddings,children:rt.map(n=>t.jsxRuntimeExports.jsxs("label",{className:v.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:`align-${n}`,width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(o[n]),onChange:r=>i({...o,[n]:Number(r)}),paddingless:!0,borderless:!0})]}))})]})]})]})},xt="_subtitle_2zbxx_1",ut="_header_2zbxx_8",dt="_text_2zbxx_9",pt="_top_2zbxx_16",mt="_itemsBlock_2zbxx_23",C={subtitle:xt,header:ut,text:dt,top:pt,itemsBlock:mt},_t="_typeTexts_3zlec_1",ht="_block_3zlec_7",gt="_active_3zlec_18",A={typeTexts:_t,block:ht,active:gt},jt=["bold","italic","underline","strike-through","code"],L=x=>{const{typesText:s,setTypesText:o}=x;return t.jsxRuntimeExports.jsx("div",{className:A.typeTexts,children:jt.map(i=>t.jsxRuntimeExports.jsx("div",{className:t.clx(A.block,{[A.active]:s.includes(i)}),onClick:()=>{const l=[...s];if(l.includes(i)){const e=l.filter(n=>n!==i);o(e)}else l.push(i),o(l)},children:t.jsxRuntimeExports.jsx(t.Icon,{name:`text-${i}`,fill:s.includes(i)?"#252525":"#757575",width:20,height:20})},String(i)))})},M=x=>{const{typesText:s,isActiveText:o,setIsActiveText:i,text:l,setText:e,setTypesText:n,title:r,subtitle:_="Items"}=x;return t.jsxRuntimeExports.jsxs("div",{className:C.text,children:[(r||o)&&t.jsxRuntimeExports.jsxs("div",{className:C.top,children:[r&&t.jsxRuntimeExports.jsx("h3",{className:C.title,children:r}),o&&i&&t.jsxRuntimeExports.jsx(t.Switch,{current:o,onChange:f=>i(f)})]}),t.jsxRuntimeExports.jsxs("div",{className:C.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:C.subtitle,children:_}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:f=>e(f),value:l,maxLength:150}),t.jsxRuntimeExports.jsx(L,{typesText:s,setTypesText:n})]})]})},bt="_subtitle_1nl8x_1",ft="_header_1nl8x_8",Rt="_text_1nl8x_9",Et="_productsBlock_1nl8x_10",vt="_top_1nl8x_22",kt="_itemsBlock_1nl8x_29",yt="_typeTexts_1nl8x_35",wt="_block_1nl8x_41",$t="_active_1nl8x_52",It="_products_1nl8x_10",Bt="_product_1nl8x_10",Nt="_button_1nl8x_70",Ct="_image_1nl8x_80",Tt="_info_1nl8x_87",St="_name_1nl8x_98",Pt="_buttons_1nl8x_102",At="_modal_1nl8x_108",Ot="_link_1nl8x_126",Lt="_modalOptions_1nl8x_132",j={subtitle:bt,header:ft,text:Rt,productsBlock:Et,top:vt,itemsBlock:kt,typeTexts:yt,block:wt,active:$t,products:It,product:Bt,button:Nt,image:Ct,info:Tt,name:St,buttons:Pt,modal:At,link:Ot,modalOptions:Lt},Dt=x=>{const{activeItem:s,setActiveItem:o,popupPosition:i,modalOptions:l}=x;return t.jsxRuntimeExports.jsxs("div",{className:j.modal,onClick:e=>{e.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:j.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:j.modalOptions,children:l.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:n=>{const r={...s,[e.field]:n[0]};o(r)}});if(e.type==="text")return t.jsxRuntimeExports.jsx(M,{typesText:s[e.field.type],setTypesText:n=>{const r={...s,[e.field.type]:n};o(r)},text:s[e.field.text]||"",setText:n=>{const r={...s,[e.field.text]:n};o(r)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const r={...s,[e.field]:n};o(r)},value:s[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:j.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const r={...s,[e.field.text]:n};o(r)},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,onChange:n=>{const r={...s,[e.field.switch]:n};o(r)}})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(F,{items:s[e.field]||[],setItems:n=>{const r={...s,[e.field]:n};o(r)},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:n=>{const r={...s,[e.field]:n};o(r)},label:e.label,value:s[e.field]||"String"})})})]})},zt="_other_1wtgi_1",Ht="_subtitle_1wtgi_7",Mt="_items_1wtgi_14",O={other:zt,subtitle:Ht,items:Mt},Ft=x=>{const{items:s,title:o="Other"}=x;return t.jsxRuntimeExports.jsxs("div",{className:O.other,children:[t.jsxRuntimeExports.jsx("h5",{className:O.subtitle,children:o}),t.jsxRuntimeExports.jsx("div",{className:O.items,children:s.map(i=>t.jsxRuntimeExports.jsx(t.Switch,{current:i.isItem,onChange:l=>i.setIsItem(l),label:i.label,hasBackground:!0,paddingless:!1}))})]})},Gt=x=>{const{index:s,moveProduct:o,children:i}=x,[,l]=t.useDrop({accept:"product",hover(r){r.index!==s&&(o(r.index,s),r.index=s)}}),[{isDragging:e},n]=t.useDrag({type:"product",item:{index:s},collect:r=>({isDragging:r.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:r=>n(l(r)),className:`${j.product} ${e?j.dragging:""}`,children:i})},F=x=>{const{isActiveItems:s,setIsActiveItems:o,items:i,setItems:l,other:e,title:n,subtitle:r,editable:_=!0,draggable:f=!1,withImage:a=!1,deletable:p=!0,addable:u=!0,itemsType:R,itemsPlaceholder:g="",itemsOptions:d,hasRangeSelector:S=!1,rangeSelectorOptions:D,modalOptions:z,addableOptions:P={}}=x,[$,I]=b.useState(null),[Y,U]=b.useState({top:0,left:0}),J=(c,E)=>{const k=[...i],[h]=k.splice(c,1);k.splice(E,0,h),l(k)};b.useEffect(()=>{const c=()=>{I(null)};return document.body.addEventListener("click",c),I(null),()=>{I(null),document.body.removeEventListener("click",c)}},[]),b.useEffect(()=>{if($){const c=[...i].map(E=>E.id===$.id?$:E);l(c)}},[$]);const K=(c,E)=>{c.stopPropagation();const k=c.target.getBoundingClientRect(),h=100,N=window.innerHeight;let y=k.top+window.scrollY;y+h>N&&(y=N-h-20),U({top:y-80,left:k.left-30}),I(E)};function Q(c){if(a)return c?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${c}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"image",width:16,height:16,fill:"#757575"})}const H=(c,E)=>{const k=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[f&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"drag",hoverable:!0,width:20,height:20})}),R==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:h=>{const y=[...i].map(w=>w.id===c.id?{...c,name:h}:w);I({...c,name:h}),l([...y])},value:c.name,options:d,leftAddon:Q(c.image)}),R==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:h=>{const y=[...i].map(w=>w.id===c.id?{...c,name:h}:w);l([...y])},value:c.name,placeholder:g}),R==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:h=>{const y=[...i].map(w=>w.id===c.id?{...c,image:h[0]}:w);l([...y])}}),t.jsxRuntimeExports.jsxs("div",{className:j.buttons,children:[_&&t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:h=>K(h,c)}),p&&t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>l(i.filter(h=>h.id!==c.id))})]})]});return f?t.jsxRuntimeExports.jsx(Gt,{product:c,index:E,moveProduct:J,children:k},c.id):t.jsxRuntimeExports.jsx("div",{className:j.product,children:k},c.id)};return t.jsxRuntimeExports.jsxs("div",{className:j.productsBlock,children:[(n||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:j.top,children:[n&&t.jsxRuntimeExports.jsx("h3",{className:j.title,children:n}),s!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:c=>o==null?void 0:o(c)})]}),$&&_&&z&&t.jsxRuntimeExports.jsx(Dt,{activeItem:$,setActiveItem:I,popupPosition:Y,modalOptions:z}),S&&D&&t.jsxRuntimeExports.jsx(q,{...D}),t.jsxRuntimeExports.jsxs("div",{className:j.products,children:[r&&t.jsxRuntimeExports.jsx("h5",{className:j.subtitle,children:r}),f?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:i.map((c,E)=>H(c,E))}):i.map((c,E)=>H(c,E)),u&&t.jsxRuntimeExports.jsxs(t.Button,{className:j.button,size:"s",onClick:()=>{const c=[...i];R==="select"?c.push({name:d[0]||`Product ${i.length+1}`,id:t.v4(),...P}):R==="input"?c.push({name:"",id:t.v4(),...P}):c.push({name:`Image ${i.length+1}`,id:t.v4(),...P}),l(c)},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(Ft,{items:e})]})},qt="_subtitle_41klp_1",Yt="_header_41klp_8",Ut="_text_41klp_9",Jt="_productsBlock_41klp_10",Kt="_buttonsBlock_41klp_11",Qt="_top_41klp_21",Vt="_itemsBlock_41klp_28",Wt="_typeTexts_41klp_34",Xt="_block_41klp_40",Zt="_active_41klp_51",te="_products_41klp_10",ee="_product_41klp_10",se="_button_41klp_11",ne="_image_41klp_79",oe="_info_41klp_86",ie="_name_41klp_97",ce="_buttons_41klp_11",le="_modal_41klp_107",re="_other_41klp_124",ae="_options_41klp_130",B={subtitle:qt,header:Yt,text:Ut,productsBlock:Jt,buttonsBlock:Kt,top:Qt,itemsBlock:Vt,typeTexts:Wt,block:Xt,active:Zt,products:te,product:ee,button:se,image:ne,info:oe,name:ie,buttons:ce,modal:le,other:re,options:ae},xe=x=>{const{activeButton:s,setActiveButton:o,popupPosition:i}=x,[l,e]=b.useState(s.typesText),[n,r]=b.useState(s.destination),[_,f]=b.useState(s.link||""),[a,p]=b.useState(s.text||"");return b.useEffect(()=>{o({...s,...{text:a,link:_,destination:n,typesText:l}})},[l,n,_,a]),t.jsxRuntimeExports.jsxs("div",{className:B.modal,onClick:u=>{u.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:B.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:B.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:u=>r(u),options:["Go to Page","Open Link"],value:n}),n==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:u=>f(u),value:_,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:u=>p(u),value:a,label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(L,{typesText:l,setTypesText:e})]})]})},ue="_subtitle_1y5sw_1",de="_header_1y5sw_8",pe="_text_1y5sw_9",me="_productsBlock_1y5sw_10",_e="_buttonsBlock_1y5sw_11",he="_top_1y5sw_22",ge="_itemsBlock_1y5sw_29",je="_typeTexts_1y5sw_35",be="_block_1y5sw_41",fe="_active_1y5sw_52",Re="_products_1y5sw_10",Ee="_product_1y5sw_10",ve="_button_1y5sw_11",ke="_image_1y5sw_80",ye="_info_1y5sw_87",we="_name_1y5sw_98",$e="_buttons_1y5sw_11",Ie="_modal_1y5sw_108",Be="_other_1y5sw_125",Ne="_options_1y5sw_131",T={subtitle:ue,header:de,text:pe,productsBlock:me,buttonsBlock:_e,top:he,itemsBlock:ge,typeTexts:je,block:be,active:fe,products:Re,product:Ee,button:ve,image:ke,info:ye,name:we,buttons:$e,modal:Ie,other:Be,options:Ne},G=x=>{const{buttons:s,setButtons:o,deletable:i=!0,addable:l=!0}=x,[e,n]=b.useState(null),[r,_]=b.useState({top:0,left:0});b.useEffect(()=>{const a=()=>{n(null)};return document.body.addEventListener("click",a),n(null),()=>{n(null),document.body.removeEventListener("click",a)}},[]),b.useEffect(()=>{if(e){const a=[...s].map(p=>p.id===e.id?e:p);o(a)}},[e]);const f=(a,p)=>{a.stopPropagation();const u=a.target.getBoundingClientRect(),R=490,g=window.innerHeight;let d=u.top+window.scrollY;d+R>g&&(d=g-R-20),_({top:d,left:u.left-30}),n(p)};return t.jsxRuntimeExports.jsxs("div",{className:T.products,children:[t.jsxRuntimeExports.jsx("h5",{className:T.subtitle,children:"Button Type"}),s.map(a=>t.jsxRuntimeExports.jsxs("div",{className:T.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:p=>{const R=[...s].map(g=>g.id===a.id?{...a,type:p}:g);o(R)},value:a.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:T.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"sliders",hoverable:!0,width:20,height:20,onClick:p=>{f(p,a)}}),i&&t.jsxRuntimeExports.jsx(t.Icon,{name:"trash",hoverable:!0,onClick:()=>{const p=s.filter(u=>u.id!==a.id);o(p)},width:20,height:20,fill:"#C12A2A"})]})]},a.id)),e&&t.jsxRuntimeExports.jsx(xe,{activeButton:e,setActiveButton:n,popupPosition:r}),l&&t.jsxRuntimeExports.jsxs(t.Button,{className:T.button,size:"s",onClick:()=>{const a=[...s];a.push({type:"Primary",id:t.v4(),typesText:[],destination:"Go to Page",text:""}),o(a)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"plus",width:16,height:16})]})]})},Ce=x=>{const{isActiveButtons:s,setIsActiveButtons:o,buttons:i,setButtons:l}=x;return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs("div",{className:B.buttonsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:B.top,children:[t.jsxRuntimeExports.jsx("h3",{className:B.title,children:"Buttons"}),t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:e=>o(e)})]}),t.jsxRuntimeExports.jsx(G,{buttons:i,setButtons:l})]})})},Te="_wrapper_tn7gb_1",Se="_subtitle_tn7gb_7",Pe="_content_tn7gb_14",Ae="_range_tn7gb_21",Oe="_track_tn7gb_26",Le="_progress_tn7gb_35",De="_dots_tn7gb_45",ze="_dot_tn7gb_45",He="_active_tn7gb_62",Me="_input_tn7gb_74",Fe="_countBlock_tn7gb_88",Ge="_count_tn7gb_88",qe="_controls_tn7gb_103",Ye="_button_tn7gb_108",m={wrapper:Te,subtitle:Se,content:Pe,range:Ae,track:Oe,progress:Le,dots:De,dot:ze,active:He,input:Me,countBlock:Fe,count:Ge,controls:qe,button:Ye},q=x=>{const{label:s,min:o=1,max:i=4,step:l=1,count:e,setCount:n}=x,[r,_]=b.useState(!1),f=Array.from({length:(i-o)/l+1}),a=(e-o)/(i-o)*100,p=()=>{e<i&&n(e+l)},u=()=>{e>o&&n(e-l)},R=g=>{const d=o+g*l;n(d)};return t.jsxRuntimeExports.jsxs("div",{className:m.wrapper,children:[s&&t.jsxRuntimeExports.jsx("h5",{className:m.subtitle,children:s}),t.jsxRuntimeExports.jsxs("div",{className:m.content,children:[t.jsxRuntimeExports.jsxs("div",{className:m.range,children:[t.jsxRuntimeExports.jsx("div",{className:m.track}),t.jsxRuntimeExports.jsx("div",{className:m.progress,style:{width:`${a}%`}}),t.jsxRuntimeExports.jsx("div",{className:m.dots,children:f.map((g,d)=>{const S=d<=(e-o)/l;return t.jsxRuntimeExports.jsx("button",{onClick:()=>R(d),className:t.clx(m.dot,{[m.active]:S,[m.inactive]:!S,[m.dragging]:r}),"aria-label":`Set value to ${o+d*l}`},d)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:o,max:i,step:l,value:e,onChange:g=>n(Number(g.target.value)),onMouseDown:()=>_(!0),onMouseUp:()=>_(!1),onTouchStart:()=>_(!0),onTouchEnd:()=>_(!1),className:m.input})]}),t.jsxRuntimeExports.jsxs("div",{className:m.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:o,max:i,paddingless:!0,onChange:g=>{const d=Number(g);d>i?n(i):d<o?n(o):n(d)},value:String(e)}),t.jsxRuntimeExports.jsxs("div",{className:m.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:p,disabled:e>=i,className:m.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:u,disabled:e<=o,className:m.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=G;exports.ButtonsSettings=Ce;exports.ItemsSettings=F;exports.LayoutSettings=at;exports.RangeSelector=q;exports.TextSettings=M;exports.TypesText=L;