@billgangcom/theme-lib 1.18.1 → 1.19.0

package/dist/ui.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./root-D8VGA9Zg.cjs"),h=require("react"),rt="_accordion_2tiiw_1",at="_header_2tiiw_9",lt="_icon_2tiiw_16",ut="_open_2tiiw_19",xt="_content_2tiiw_23",U={accordion:rt,header:at,icon:lt,open:ut,content:xt},dt=({title:l,content:n})=>{const[s,o]=h.useState(!1),[r,a]=h.useState(0),e=h.useRef(null),c=()=>{o(!s)};return h.useEffect(()=>{e.current&&a(s?e.current.scrollHeight:0)},[s]),t.jsxRuntimeExports.jsxs("div",{className:U.accordion,children:[t.jsxRuntimeExports.jsxs("div",{className:U.header,onClick:c,children:[t.jsxRuntimeExports.jsx("h3",{children:l}),t.jsxRuntimeExports.jsx("div",{className:t.clx(U.icon,{[U.open]:s}),children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown"})})]}),t.jsxRuntimeExports.jsx("div",{ref:e,className:U.content,style:{height:`${r}px`},children:t.jsxRuntimeExports.jsx("p",{children:n})})]})},pt="_wrapper_1g82c_2",mt="_alignmentBlock_1g82c_8",jt="_title_1g82c_15",_t="_subtitle_1g82c_22",ht="_alignmentContent_1g82c_29",gt="_alignments_1g82c_35",bt="_alignment_1g82c_8",ft="_circle_1g82c_54",vt="_paddings_1g82c_61",Rt="_padding_1g82c_61",Et="_input_1g82c_79",O={wrapper:pt,alignmentBlock:mt,title:jt,subtitle:_t,alignmentContent:ht,alignments:gt,alignment:bt,circle:ft,paddings:vt,padding:Rt,input:Et},yt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],kt=["left","top","right","bottom"],It=l=>{const{alignment:n,padding:s,setPadding:o,setAlignment:r}=l;function a(){switch(n){case"left":case"topLeft":case"bottomLeft":return"TextAlignLeft";case"right":case"topRight":case"bottomRight":return"TextAlignRight";case"center":case"top":case"bottom":return"TextAlignCenter";default:return"TextAlignCenter"}}function e(c){switch(c){case"left":return"AlignLeft";case"right":return"AlignRight";case"top":return"AlignTop";case"bottom":return"AlignBottom"}}return t.jsxRuntimeExports.jsxs("div",{className:O.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:O.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:O.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:O.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:O.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:O.alignments,children:yt.map(c=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{r(c)},className:O.alignment,children:[c!==n&&t.jsxRuntimeExports.jsx("div",{className:O.circle}),c===n&&t.jsxRuntimeExports.jsx(t.Icon,{name:a(),fill:"#FF3F19",width:22,height:22})]},c))}),t.jsxRuntimeExports.jsx("div",{className:O.paddings,children:kt.map(c=>t.jsxRuntimeExports.jsxs("label",{className:O.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:e(c),width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(s[c]),onChange:x=>o({...s,[c]:Number(x)}),paddingless:!0,borderless:!0})]},c))})]})]})]})},$t="_subtitle_2zbxx_1",Nt="_header_2zbxx_8",Ct="_text_2zbxx_9",wt="_top_2zbxx_16",Bt="_itemsBlock_2zbxx_23",G={subtitle:$t,header:Nt,text:Ct,top:wt,itemsBlock:Bt},Pt="_typeTexts_3zlec_1",St="_block_3zlec_7",Tt="_active_3zlec_18",W={typeTexts:Pt,block:St,active:Tt},At=["bold","italic","underline","strike-through","code"],K=l=>{const{typesText:n,setTypesText:s}=l;function o(r){switch(r){case"bold":return"TextB";case"italic":return"TextItalic";case"code":return"CodeSimple";case"strike-through":return"TextStrikethrough";case"underline":return"TextUnderline"}}return t.jsxRuntimeExports.jsx("div",{className:W.typeTexts,children:At.map(r=>t.jsxRuntimeExports.jsx("div",{className:t.clx(W.block,{[W.active]:n.includes(r)}),onClick:()=>{const a=[...n];if(a.includes(r)){const e=a.filter(c=>c!==r);s(e)}else a.push(r),s(a)},children:t.jsxRuntimeExports.jsx(t.Icon,{name:o(r),fill:n.includes(r)?"#252525":"#757575",width:20,height:20})},String(r)))})},Z=l=>{const{typesText:n,isActiveText:s,setIsActiveText:o,text:r,setText:a,setTypesText:e,title:c,subtitle:x="Items"}=l;return t.jsxRuntimeExports.jsxs("div",{className:G.text,children:[(c||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:G.top,children:[c&&t.jsxRuntimeExports.jsx("h3",{className:G.title,children:c}),s!==void 0&&o&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:v=>o(v)})]}),t.jsxRuntimeExports.jsxs("div",{className:G.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:G.subtitle,children:x}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:v=>a(v),value:r,maxLength:150}),t.jsxRuntimeExports.jsx(K,{typesText:n,setTypesText:e})]})]})},Ot="_subtitle_11qr1_1",Dt="_header_11qr1_8",qt="_text_11qr1_9",Lt="_productsBlock_11qr1_10",Mt="_top_11qr1_22",Ht="_itemsBlock_11qr1_29",Vt="_typeTexts_11qr1_35",zt="_block_11qr1_41",Ft="_active_11qr1_52",Ut="_products_11qr1_10",Gt="_product_11qr1_10",Yt="_button_11qr1_70",Xt="_disabled_11qr1_80",Qt="_image_11qr1_84",Wt="_info_11qr1_91",Jt="_name_11qr1_102",Kt="_buttons_11qr1_106",Zt="_modal_11qr1_112",te="_link_11qr1_130",ee="_modalOptions_11qr1_136",$={subtitle:Ot,header:Dt,text:qt,productsBlock:Lt,top:Mt,itemsBlock:Ht,typeTexts:Vt,block:zt,active:Ft,products:Ut,product:Gt,button:Yt,disabled:Xt,image:Qt,info:Wt,name:Jt,buttons:Kt,modal:Zt,link:te,modalOptions:ee},se=l=>{const{activeItem:n,setActiveItem:s,popupPosition:o,modalOptions:r,setIsOpenModal:a}=l;return t.jsxRuntimeExports.jsxs("div",{className:$.modal,onClick:e=>{e.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{s(null),a(!1)}})]}),t.jsxRuntimeExports.jsx("div",{className:$.modalOptions,children:r.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:c=>{const x={...n,[e.field]:c};s(x)}},String(e.field));if(e.type==="text")return t.jsxRuntimeExports.jsx(Z,{typesText:n[e.field.type],setTypesText:c=>{const x={...n,[e.field.type]:c};s(x)},text:n[e.field.text]||"",setText:c=>{const x={...n,[e.field.text]:c};s(x)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:c=>{const x={...n,[e.field]:c};s(x)},value:n[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:$.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:c=>{const x={...n,[e.field.text]:c};s(x)},value:n[e.field.text]||"",label:e.inputLabel,placeholder:e.placeholder}),t.jsxRuntimeExports.jsx(t.Switch,{current:!!n[e.field.switch]||!1,label:e.switchLabel,onChange:c=>{const x={...n,[e.field.switch]:c};s(x)}})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(et,{items:n[e.field]||[],setItems:c=>{const x={...n,[e.field]:c};s(x)},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:c=>{const x={...n,[e.field]:c};s(x)},label:e.label,value:n[e.field]||"String",leftAddon:e.leftAddon&&e.leftAddon==="icon"&&t.jsxRuntimeExports.jsx(t.Icon,{name:n[e.field]})})})})]})},ne="_other_1wtgi_1",oe="_subtitle_1wtgi_7",ie="_items_1wtgi_14",J={other:ne,subtitle:oe,items:ie},tt=l=>{const{items:n,title:s="Other"}=l;return t.jsxRuntimeExports.jsxs("div",{className:J.other,children:[t.jsxRuntimeExports.jsx("h5",{className:J.subtitle,children:s}),t.jsxRuntimeExports.jsx("div",{className:J.items,children:n.map((o,r)=>t.jsxRuntimeExports.jsx(t.Switch,{current:o.isItem,onChange:a=>o.setIsItem(a),label:o.label,hasBackground:!0,paddingless:!1},r))})]})},ce=l=>{const{index:n,moveProduct:s,children:o}=l,[,r]=t.useDrop({accept:"product",hover(c){c.index!==n&&(s(c.index,n),c.index=n)}}),[{isDragging:a},e]=t.useDrag({type:"product",item:{index:n},collect:c=>({isDragging:c.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:c=>e(r(c)),className:`${$.product} ${a?$.dragging:""}`,children:o})},et=l=>{const{isActiveItems:n,setIsActiveItems:s,items:o,setItems:r,other:a,title:e,subtitle:c,editable:x=!0,draggable:v=!1,withImage:m=!1,deletable:f=!0,addable:g=!0,itemsType:i,itemsPlaceholder:d="",itemsOptions:j,hasRangeSelector:N=!1,rangeSelectorOptions:B,modalOptions:y,addableOptions:z={},limit:T}=l,[q,L]=h.useState(null),[Q,X]=h.useState({top:0,left:0}),[p,R]=h.useState(!1),P=(u,C)=>{const S=[...o],[E]=S.splice(u,1);S.splice(C,0,E),r(S)};h.useEffect(()=>{const u=()=>{L(null),R(!1)};return document.body.addEventListener("click",u),L(null),R(!1),()=>{L(null),R(!1),document.body.removeEventListener("click",u)}},[]),h.useEffect(()=>{if(q){const u=[...o].map(C=>C.id===q.id?q:C);r(u)}},[q]);const k=(u,C)=>{u.stopPropagation(),R(!0);const S=u.target.getBoundingClientRect(),E=500,F=window.innerHeight;let D=S.top+window.scrollY;D+E>F&&(D=F-E-20),X({top:D-80,left:S.left-30}),L(C)};function H(u){if(m)return u?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${u[0]}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const A=(u,C)=>{const S=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[v&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),i==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,name:E}:M);L({...u,name:E}),r([...D])},value:u.name,options:j,leftAddon:H(u.images)}),i==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,name:E}:M);r([...D])},value:u.name,placeholder:d}),i==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,images:E}:M);r([...D])}}),t.jsxRuntimeExports.jsxs("div",{className:$.buttons,children:[x&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:E=>k(E,u)}),f&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>r(o.filter(E=>E.id!==u.id))})]})]});return v?t.jsxRuntimeExports.jsx(ce,{product:u,index:C,moveProduct:P,children:S},u.id):t.jsxRuntimeExports.jsx("div",{className:$.product,children:S},u.id)};return t.jsxRuntimeExports.jsxs("div",{className:$.productsBlock,children:[(e||n!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:$.title,children:e}),n!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:n,onChange:u=>s==null?void 0:s(u)})]}),q&&x&&y&&p&&t.jsxRuntimeExports.jsx(se,{activeItem:q,setActiveItem:L,popupPosition:Q,modalOptions:y,setIsOpenModal:R}),N&&B&&t.jsxRuntimeExports.jsx(nt,{...B}),t.jsxRuntimeExports.jsxs("div",{className:$.products,children:[c&&t.jsxRuntimeExports.jsx("h5",{className:$.subtitle,children:c}),v?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:o.map((u,C)=>A(u,C))}):o.map((u,C)=>A(u,C)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:t.clx($.button,{[$.disabled]:!!(T&&T<=o.length)}),size:"s",disabled:!!(T&&T<=o.length),onClick:()=>{const u=[...o];i==="select"?u.push({name:j[0]||`Product ${o.length+1}`,id:t.v4(),...z}):i==="input"?u.push({name:"",id:t.v4(),...z}):u.push({name:`Image ${o.length+1}`,id:t.v4(),...z}),r(u)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),a!==void 0&&t.jsxRuntimeExports.jsx(tt,{items:a})]})},re="_subtitle_41klp_1",ae="_header_41klp_8",le="_text_41klp_9",ue="_productsBlock_41klp_10",xe="_buttonsBlock_41klp_11",de="_top_41klp_21",pe="_itemsBlock_41klp_28",me="_typeTexts_41klp_34",je="_block_41klp_40",_e="_active_41klp_51",he="_products_41klp_10",ge="_product_41klp_10",be="_button_41klp_11",fe="_image_41klp_79",ve="_info_41klp_86",Re="_name_41klp_97",Ee="_buttons_41klp_11",ye="_modal_41klp_107",ke="_other_41klp_124",Ie="_options_41klp_130",V={subtitle:re,header:ae,text:le,productsBlock:ue,buttonsBlock:xe,top:de,itemsBlock:pe,typeTexts:me,block:je,active:_e,products:he,product:ge,button:be,image:fe,info:ve,name:Re,buttons:Ee,modal:ye,other:ke,options:Ie},$e=l=>{const{activeButton:n,setActiveButton:s,popupPosition:o}=l,[r,a]=h.useState(n.typesText),[e,c]=h.useState(n.destination),[x,v]=h.useState(n.link||""),[m,f]=h.useState(n.text||"");return h.useEffect(()=>{s({...n,...{text:m,link:x,destination:e,typesText:r}})},[r,e,x,m]),t.jsxRuntimeExports.jsxs("div",{className:V.modal,onClick:g=>{g.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:V.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>s(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:V.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:g=>c(g),options:["Go to Page","Open Link"],value:e}),e==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:g=>v(g),value:x,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:g=>f(g),value:m,label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(K,{typesText:r,setTypesText:a})]})]})},Ne="_subtitle_1y5sw_1",Ce="_header_1y5sw_8",we="_text_1y5sw_9",Be="_productsBlock_1y5sw_10",Pe="_buttonsBlock_1y5sw_11",Se="_top_1y5sw_22",Te="_itemsBlock_1y5sw_29",Ae="_typeTexts_1y5sw_35",Oe="_block_1y5sw_41",De="_active_1y5sw_52",qe="_products_1y5sw_10",Le="_product_1y5sw_10",Me="_button_1y5sw_11",He="_image_1y5sw_80",Ve="_info_1y5sw_87",ze="_name_1y5sw_98",Fe="_buttons_1y5sw_11",Ue="_modal_1y5sw_108",Ge="_other_1y5sw_125",Ye="_options_1y5sw_131",Y={subtitle:Ne,header:Ce,text:we,productsBlock:Be,buttonsBlock:Pe,top:Se,itemsBlock:Te,typeTexts:Ae,block:Oe,active:De,products:qe,product:Le,button:Me,image:He,info:Ve,name:ze,buttons:Fe,modal:Ue,other:Ge,options:Ye},st=l=>{const{buttons:n,setButtons:s,deletable:o=!0,addable:r=!0}=l,[a,e]=h.useState(null),[c,x]=h.useState({top:0,left:0});h.useEffect(()=>{const m=()=>{e(null)};return document.body.addEventListener("click",m),e(null),()=>{e(null),document.body.removeEventListener("click",m)}},[]),h.useEffect(()=>{if(a){const m=[...n].map(f=>f.id===a.id?a:f);s(m)}},[a]);const v=(m,f)=>{m.stopPropagation();const g=m.target.getBoundingClientRect(),i=490,d=window.innerHeight;let j=g.top+window.scrollY;j+i>d&&(j=d-i-20),x({top:j,left:g.left-30}),e(f)};return t.jsxRuntimeExports.jsxs("div",{className:Y.products,children:[t.jsxRuntimeExports.jsx("h5",{className:Y.subtitle,children:"Button Type"}),n.map(m=>t.jsxRuntimeExports.jsxs("div",{className:Y.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:f=>{const i=[...n].map(d=>d.id===m.id?{...m,type:f}:d);s(i)},value:m.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:Y.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:f=>{v(f,m)}}),o&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,onClick:()=>{const f=n.filter(g=>g.id!==m.id);s(f)},width:20,height:20,fill:"#C12A2A"})]})]},m.id)),a&&t.jsxRuntimeExports.jsx($e,{activeButton:a,setActiveButton:e,popupPosition:c}),r&&t.jsxRuntimeExports.jsxs(t.Button,{className:Y.button,size:"s",onClick:()=>{const m=[...n];m.push({type:"Primary",id:t.v4(),typesText:[],destination:"Go to Page",text:""}),s(m)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]})},Xe=l=>{const{isActiveButtons:n,setIsActiveButtons:s,buttons:o,setButtons:r}=l;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:n,onChange:a=>s(a)})]}),t.jsxRuntimeExports.jsx(st,{buttons:o,setButtons:r})]})})},Qe="_wrapper_tn7gb_1",We="_subtitle_tn7gb_7",Je="_content_tn7gb_14",Ke="_range_tn7gb_21",Ze="_track_tn7gb_26",ts="_progress_tn7gb_35",es="_dots_tn7gb_45",ss="_dot_tn7gb_45",ns="_active_tn7gb_62",os="_input_tn7gb_74",is="_countBlock_tn7gb_88",cs="_count_tn7gb_88",rs="_controls_tn7gb_103",as="_button_tn7gb_108",I={wrapper:Qe,subtitle:We,content:Je,range:Ke,track:Ze,progress:ts,dots:es,dot:ss,active:ns,input:os,countBlock:is,count:cs,controls:rs,button:as},nt=l=>{const{label:n,min:s=1,max:o=4,step:r=1,count:a,setCount:e}=l,[c,x]=h.useState(!1),v=Array.from({length:(o-s)/r+1}),m=(a-s)/(o-s)*100,f=()=>{a<o&&e(a+r)},g=()=>{a>s&&e(a-r)},i=d=>{const j=s+d*r;e(j)};return t.jsxRuntimeExports.jsxs("div",{className:I.wrapper,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:I.subtitle,children:n}),t.jsxRuntimeExports.jsxs("div",{className:I.content,children:[t.jsxRuntimeExports.jsxs("div",{className:I.range,children:[t.jsxRuntimeExports.jsx("div",{className:I.track}),t.jsxRuntimeExports.jsx("div",{className:I.progress,style:{width:`${m}%`}}),t.jsxRuntimeExports.jsx("div",{className:I.dots,children:v.map((d,j)=>{const N=j<=(a-s)/r;return t.jsxRuntimeExports.jsx("button",{onClick:()=>i(j),className:t.clx(I.dot,{[I.active]:N,[I.inactive]:!N,[I.dragging]:c}),"aria-label":`Set value to ${s+j*r}`},j)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:s,max:o,step:r,value:a,onChange:d=>e(Number(d.target.value)),onMouseDown:()=>x(!0),onMouseUp:()=>x(!1),onTouchStart:()=>x(!0),onTouchEnd:()=>x(!1),className:I.input})]}),t.jsxRuntimeExports.jsxs("div",{className:I.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:s,max:o,paddingless:!0,onChange:d=>{const j=Number(d);j>o?e(o):j<s?e(s):e(j)},value:String(a)}),t.jsxRuntimeExports.jsxs("div",{className:I.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:f,disabled:a>=o,className:I.button,"aria-label":"Increment count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretUp",width:15,height:15})}),t.jsxRuntimeExports.jsx("button",{onClick:g,disabled:a<=s,className:I.button,"aria-label":"Decrement count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown",width:15,height:15})})]})]})]})]})},ls="_subtitle_1nl8x_1",us="_header_1nl8x_8",xs="_text_1nl8x_9",ds="_productsBlock_1nl8x_10",ps="_top_1nl8x_22",ms="_itemsBlock_1nl8x_29",js="_typeTexts_1nl8x_35",_s="_block_1nl8x_41",hs="_active_1nl8x_52",gs="_products_1nl8x_10",bs="_product_1nl8x_10",fs="_button_1nl8x_70",vs="_image_1nl8x_80",Rs="_info_1nl8x_87",Es="_name_1nl8x_98",ys="_buttons_1nl8x_102",ks="_modal_1nl8x_108",Is="_link_1nl8x_126",$s="_modalOptions_1nl8x_132",w={subtitle:ls,header:us,text:xs,productsBlock:ds,top:ps,itemsBlock:ms,typeTexts:js,block:_s,active:hs,products:gs,product:bs,button:fs,image:vs,info:Rs,name:Es,buttons:ys,modal:ks,link:Is,modalOptions:$s},Ns=l=>{const{activeItem:n,setActiveItem:s,popupPosition:o,setIsOpenModal:r}=l;return t.jsxRuntimeExports.jsxs("div",{className:w.modal,onClick:a=>{a.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:w.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{r(!1),s(null)}})]}),t.jsxRuntimeExports.jsx("div",{className:w.modalOptions,children:t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:a=>{const e={...n,images:a,imagePath:a[0]};s(e)}})})]})},Cs=l=>{const{index:n,moveProduct:s,children:o}=l,[,r]=t.useDrop({accept:"product",hover(c){c.index!==n&&(s(c.index,n),c.index=n)}}),[{isDragging:a},e]=t.useDrag({type:"product",item:{index:n},collect:c=>({isDragging:c.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:c=>e(r(c)),className:`${w.product} ${a?w.dragging:""}`,children:o})},ws=l=>{const{isActiveItems:n,setIsActiveItems:s,items:o,setItems:r,other:a,title:e,subtitle:c,editable:x=!0,draggable:v=!1,withImage:m=!1,deletable:f=!0,addable:g=!0,itemsType:i,itemsOptions:d}=l,[j,N]=h.useState(null),[B,y]=h.useState({top:0,left:0}),[z,T]=h.useState(!1),q=(p,R)=>{const P=[...o],[k]=P.splice(p,1);P.splice(R,0,k),r(P)};h.useEffect(()=>{const p=()=>{N(null),T(!1)};return document.body.addEventListener("click",p),N(null),T(!1),()=>{N(null),T(!1),document.body.removeEventListener("click",p)}},[]),h.useEffect(()=>{if(j){const p=[...o].map(R=>R.id===j.id?j:R);r(p)}},[j]);const L=(p,R)=>{p.stopPropagation();const P=p.target.getBoundingClientRect(),k=100,H=window.innerHeight;let A=P.top+window.scrollY;A+k>H&&(A=H-k-20),T(!0),y({top:A-80,left:P.left-30}),N(R)};function Q(p){if(m)return p?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${p}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const X=(p,R)=>{const P=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[v&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),i==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:k=>{const H=[...o],A=Number(k.split(" ")[1]),u=d.find(E=>E.id===A);if(!u)return;const C={...u.productData.stats,newPrice:u.productData.minPrice.amount,oldPrice:u.productData.compareAtPrice.amount},S=H.map(E=>E.id===p.id?{...p,name:k,listingId:A,stats:C}:E);N({...p,name:k,listingId:A}),r([...S])},value:p.name,options:[...d.map(k=>`Product ${k.id}`)],leftAddon:Q(p.images[0])}),t.jsxRuntimeExports.jsxs("div",{className:w.buttons,children:[x&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:k=>L(k,p)}),f&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>r(o.filter(k=>k.id!==p.id))})]})]});return v?t.jsxRuntimeExports.jsx(Cs,{product:p,index:R,moveProduct:q,children:P},p.id):t.jsxRuntimeExports.jsx("div",{className:w.product,children:P},p.id)};return t.jsxRuntimeExports.jsxs("div",{className:w.productsBlock,children:[(e||n!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:w.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:w.title,children:e}),n!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:n,onChange:p=>s==null?void 0:s(p)})]}),z&&j&&t.jsxRuntimeExports.jsx(Ns,{activeItem:j,setActiveItem:N,setIsOpenModal:T,popupPosition:B}),t.jsxRuntimeExports.jsxs("div",{className:w.products,children:[c&&t.jsxRuntimeExports.jsx("h5",{className:w.subtitle,children:c}),v?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:o.map((p,R)=>X(p,R))}):o.map((p,R)=>X(p,R)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:w.button,size:"s",onClick:()=>{const p=[...o],R=d[0].id;p.push({name:`Product ${R}`,id:t.v4(),listingId:R,imagePath:"",images:[],stats:{...d[0].productData.stats,newPrice:d[0].productData.minPrice.amount,oldPrice:d[0].productData.compareAtPrice.amount}}),r(p)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),a!==void 0&&t.jsxRuntimeExports.jsx(tt,{items:a})]})},Bs="_options_163bj_1",Ps="_price_163bj_12",Ss="_oldPrice_163bj_18",Ts="_newPrice_163bj_26",As="_meta_163bj_33",Os="_info_163bj_39",Ds="_infoRight_163bj_46",qs="_buttons_163bj_52",Ls="_variants_163bj_59",Ms="_variant_163bj_59",Hs="_stock_163bj_74",Vs="_variantInfo_163bj_81",zs="_quantity_163bj_87",Fs="_count_163bj_93",Us="_button_163bj_52",Gs="_activeVariant_163bj_110",Ys="_chargeTypes_163bj_114",Xs="_charge_163bj_114",Qs="_chargeActive_163bj_131",b={options:Bs,price:Ps,oldPrice:Ss,newPrice:Ts,meta:As,info:Os,infoRight:Ds,buttons:qs,variants:Ls,variant:Ms,stock:Hs,variantInfo:Vs,quantity:zs,count:Fs,button:Us,activeVariant:Gs,chargeTypes:Ys,charge:Xs,chargeActive:Qs},Ws=l=>{const{variants:n}=l,[s,o]=h.useState(n[0]),r=t.useNavigate(),[a,e]=h.useState(1),{reset:c,addProductToCart:x,getProducts:v}=t.useCart();async function m(){await v(),await x({productId:l.id,productVariantId:s.id,quantity:a})}function f(){c(),m(),r("/checkout")}function g(i){if(i>=864e5){const y=Math.floor(i/864e5);return`${y} ${y===1?"day":"days"}`}else if(i>=36e5){const y=Math.floor(i/36e5);return`${y} ${y===1?"hour":"hours"}`}else if(i>=6e4){const y=Math.floor(i/6e4);return`${y} ${y===1?"minute":"minutes"}`}else{const y=Math.floor(i/1e3);return`${y} ${y===1?"second":"seconds"}`}}return t.jsxRuntimeExports.jsxs("div",{className:b.options,children:[t.jsxRuntimeExports.jsx("div",{className:b.chargeTypes,children:s.chargeTypes?s.chargeTypes.map(i=>t.jsxRuntimeExports.jsx("div",{children:i},i)):t.jsxRuntimeExports.jsx("div",{className:t.clx(b.charge,b.chargeActive),children:"One-Time"})}),t.jsxRuntimeExports.jsx("div",{className:b.variants,children:n.map(i=>t.jsxRuntimeExports.jsxs("div",{className:t.clx(b.variant,{[b.activeVariant]:s.id===i.id}),onClick:()=>o(i),children:[t.jsxRuntimeExports.jsxs("div",{className:b.variantInfo,children:[t.jsxRuntimeExports.jsx("span",{className:b.title,children:i.name}),t.jsxRuntimeExports.jsxs("span",{children:["$",i.price.amount]})]}),t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsxs("span",{className:b.stock,children:[i.quantity.restrictions.max||0," in stock"]})})]},i.id))}),t.jsxRuntimeExports.jsxs("div",{className:b.quantity,children:[t.jsxRuntimeExports.jsx("div",{onClick:()=>{a>1?e(i=>i-1):e(1)},className:b.button,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Minus"})}),t.jsxRuntimeExports.jsx("div",{className:b.count,children:a}),t.jsxRuntimeExports.jsx("div",{onClick:()=>e(i=>i+1),className:b.button,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus"})})]}),t.jsxRuntimeExports.jsxs("div",{className:b.meta,children:[t.jsxRuntimeExports.jsxs("div",{className:b.info,children:[t.jsxRuntimeExports.jsx("span",{children:"Delivery"}),t.jsxRuntimeExports.jsxs("div",{className:b.infoRight,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Lightning",fill:"#FF3F19",width:20,height:20}),t.jsxRuntimeExports.jsx("span",{children:s.deliveryTime===0?"Instant":g(s.deliveryTime)})]})]}),t.jsxRuntimeExports.jsxs("div",{className:b.info,children:[t.jsxRuntimeExports.jsx("span",{children:"Price"}),t.jsxRuntimeExports.jsx("div",{className:b.infoRight,children:s.compareAtPrice&&(s.compareAtPrice.amount||0)-(s.price.amount||0)>0?t.jsxRuntimeExports.jsxs("div",{className:b.price,children:[t.jsxRuntimeExports.jsxs("span",{className:b.newPrice,children:["$ ",(s.price.amount||0)*a]}),t.jsxRuntimeExports.jsxs("span",{className:b.oldPrice,children:["$ ",(s.compareAtPrice.amount||0)*a]})]}):t.jsxRuntimeExports.jsxs("span",{className:b.newPrice,children:["$ ",(s.price.amount||0)*a]})})]})]}),t.jsxRuntimeExports.jsxs("div",{className:b.buttons,children:[t.jsxRuntimeExports.jsx(t.Button,{type:"Primary",onClick:()=>f(),children:"Buy Now"}),t.jsxRuntimeExports.jsx(t.Button,{type:"Secondary",onClick:()=>m(),children:"Add to Cart"})]})]})},Js="_button_1jgdy_1",Ks="_login_1jgdy_12",Zs="_signUp_1jgdy_16",tn="_buttons_1jgdy_21",en="_modal_1jgdy_28",sn="_info_1jgdy_44",nn="_top_1jgdy_50",on="_title_1jgdy_59",cn="_clear_1jgdy_65",rn="_activeClear_1jgdy_72",an="_count_1jgdy_76",ln="_cart_1jgdy_89",un="_empty_1jgdy_96",xn="_product_1jgdy_122",dn="_products_1jgdy_129",pn="_image_1jgdy_136",mn="_productInfo_1jgdy_142",jn="_content_1jgdy_148",_n="_name_1jgdy_154",hn="_price_1jgdy_160",gn="_productButtons_1jgdy_166",bn="_productButton_1jgdy_166",fn="_productCount_1jgdy_183",vn="_bottom_1jgdy_197",Rn="_subtotal_1jgdy_205",En="_block_1jgdy_211",yn="_shoppingCount_1jgdy_217",_={button:Js,login:Ks,signUp:Zs,buttons:tn,modal:en,info:sn,top:nn,title:on,clear:cn,activeClear:rn,count:an,cart:ln,empty:un,product:xn,products:dn,image:pn,productInfo:mn,content:jn,name:_n,price:hn,productButtons:gn,productButton:bn,productCount:fn,bottom:vn,subtotal:Rn,block:En,shoppingCount:yn},kn=l=>{const{shopping:n,signUp:s}=l,o=t.useNavigate();function r(a){o(a)}return t.jsxRuntimeExports.jsxs("div",{className:_.buttons,children:[n&&t.jsxRuntimeExports.jsx(ot,{}),t.jsxRuntimeExports.jsx("div",{className:t.clx(_.button,_.login),onClick:()=>r("/customer-dash"),children:"Login"}),s&&t.jsxRuntimeExports.jsx("div",{className:t.clx(_.button,_.login,_.signUp),onClick:()=>r("/customer-dash"),children:"Sign Up"})]})},ot=()=>{const[l,n]=h.useState(!1),{cart:s}=t.useCart();return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsxs("div",{className:_.button,onClick:o=>{o.stopPropagation(),n(!0)},children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Handbag",fill:"#252525"}),s.parts.length>0&&t.jsxRuntimeExports.jsx("div",{className:_.shoppingCount,children:s.parts.length})]}),l&&t.jsxRuntimeExports.jsx(t.Modal,{close:n,children:t.jsxRuntimeExports.jsx(it,{})})]})},it=()=>{const{cart:l,reset:n,getProducts:s,getTotalAndDiscount:o,updateQuantityOfProduct:r}=t.useCart(),[a,e]=h.useState([]),c=t.useNavigate();function x(i){for(let d=0;d<l.parts.length;d++)for(let j=0;j<i.variants.length;j++)if(l.parts[d].productVariantId===i.variants[d].id)return l.parts[d].productVariantId}function v(i){for(let d=0;d<l.parts.length;d++)for(let j=0;j<i.variants.length;j++)if(l.parts[d].productVariantId===i.variants[d].id)return l.parts[d].quantity}function m(i){c(i)}function f(i){r({productId:i.id,productVariantId:i.activeVariantId,quantity:i.quantity+1})}function g(i){r({productId:i.id,productVariantId:i.activeVariantId,quantity:i.quantity-1})}return h.useEffect(()=>{(async()=>{const d=l.parts.map(B=>String(B.productId)),N=(await s([...d])).map(B=>({...B,activeVariantId:x(B),quantity:v(B)}));e(N)})()},[l]),t.jsxRuntimeExports.jsxs("div",{className:_.modal,onClick:i=>i.stopPropagation(),children:[t.jsxRuntimeExports.jsxs("div",{className:_.top,children:[t.jsxRuntimeExports.jsxs("div",{className:_.info,children:[t.jsxRuntimeExports.jsx("span",{className:_.title,children:"Cart"}),l.parts.length>0&&t.jsxRuntimeExports.jsx("div",{className:_.count,children:l.parts.length})]}),t.jsxRuntimeExports.jsx("button",{className:t.clx(_.clear,{[_.activeClear]:l.parts.length>0}),disabled:l.parts.length===0,onClick:()=>n(),children:"Clear all"})]}),l.parts.length>0?t.jsxRuntimeExports.jsxs("div",{className:_.cart,children:[t.jsxRuntimeExports.jsx("div",{className:_.products,children:a.map(i=>t.jsxRuntimeExports.jsxs("div",{className:_.product,children:[t.jsxRuntimeExports.jsxs("div",{className:_.productInfo,children:[t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${i.images[0].cfId}/w=500`,alt:"image",width:"100%",height:"100%",className:_.image}),t.jsxRuntimeExports.jsxs("div",{className:_.content,children:[t.jsxRuntimeExports.jsx("div",{className:_.name,children:i.name}),t.jsxRuntimeExports.jsxs("div",{className:_.price,children:["$",i.variants.find(d=>d.id===i.activeVariantId).price.amount*((i==null?void 0:i.quantity)||1)]})]})]}),t.jsxRuntimeExports.jsxs("div",{className:_.productButtons,children:[t.jsxRuntimeExports.jsx("div",{onClick:()=>{i.quantity!==1&&g(i)},className:_.productButton,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Minus",fill:"#757575",width:20,height:20})}),t.jsxRuntimeExports.jsx("div",{className:_.productCount,children:i.quantity}),t.jsxRuntimeExports.jsx("div",{onClick:()=>f(i),className:_.productButton,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",fill:"#757575",width:20,height:20})})]})]},i.id))}),t.jsxRuntimeExports.jsxs("div",{className:_.bottom,children:[t.jsxRuntimeExports.jsxs("div",{className:_.subtotal,children:[t.jsxRuntimeExports.jsxs("div",{className:_.block,children:[t.jsxRuntimeExports.jsx("span",{children:"Subtotal"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Info",width:20,height:20,fill:"#757575"})]}),t.jsxRuntimeExports.jsxs("div",{children:["$",o().total]})]}),t.jsxRuntimeExports.jsx(t.Button,{onClick:()=>m("/checkout"),children:"Checkout"})]})]}):t.jsxRuntimeExports.jsx(ct,{})]})},ct=()=>t.jsxRuntimeExports.jsxs("div",{className:_.empty,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Handbag"})}),t.jsxRuntimeExports.jsx("span",{children:"Your cart is empty"}),t.jsxRuntimeExports.jsx("span",{children:"Check out the store's products and add them here"})]});exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.ErrorableBlock=t.ErrorableBlock;exports.Icon=t.Icon;exports.Input=t.Input;exports.Loader=t.Loader;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.Accordion=dt;exports.ButtonTypeSettings=st;exports.ButtonsSettings=Xe;exports.EmptyCart=ct;exports.HeaderButtons=kn;exports.ItemsSettings=et;exports.LayoutSettings=It;exports.ListingSelector=ws;exports.ProductOptions=Ws;exports.RangeSelector=nt;exports.ShoppingButton=ot;exports.ShoppingModalCart=it;exports.TextSettings=Z;exports.TypesText=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./root-zM3aYbtZ.cjs"),h=require("react"),rt="_accordion_2tiiw_1",at="_header_2tiiw_9",lt="_icon_2tiiw_16",ut="_open_2tiiw_19",xt="_content_2tiiw_23",U={accordion:rt,header:at,icon:lt,open:ut,content:xt},dt=({title:l,content:n})=>{const[s,o]=h.useState(!1),[r,a]=h.useState(0),e=h.useRef(null),c=()=>{o(!s)};return h.useEffect(()=>{e.current&&a(s?e.current.scrollHeight:0)},[s]),t.jsxRuntimeExports.jsxs("div",{className:U.accordion,children:[t.jsxRuntimeExports.jsxs("div",{className:U.header,onClick:c,children:[t.jsxRuntimeExports.jsx("h3",{children:l}),t.jsxRuntimeExports.jsx("div",{className:t.clx(U.icon,{[U.open]:s}),children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown"})})]}),t.jsxRuntimeExports.jsx("div",{ref:e,className:U.content,style:{height:`${r}px`},children:t.jsxRuntimeExports.jsx("p",{children:n})})]})},pt="_wrapper_1g82c_2",mt="_alignmentBlock_1g82c_8",jt="_title_1g82c_15",_t="_subtitle_1g82c_22",ht="_alignmentContent_1g82c_29",gt="_alignments_1g82c_35",bt="_alignment_1g82c_8",ft="_circle_1g82c_54",vt="_paddings_1g82c_61",Rt="_padding_1g82c_61",Et="_input_1g82c_79",O={wrapper:pt,alignmentBlock:mt,title:jt,subtitle:_t,alignmentContent:ht,alignments:gt,alignment:bt,circle:ft,paddings:vt,padding:Rt,input:Et},yt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],kt=["left","top","right","bottom"],It=l=>{const{alignment:n,padding:s,setPadding:o,setAlignment:r}=l;function a(){switch(n){case"left":case"topLeft":case"bottomLeft":return"TextAlignLeft";case"right":case"topRight":case"bottomRight":return"TextAlignRight";case"center":case"top":case"bottom":return"TextAlignCenter";default:return"TextAlignCenter"}}function e(c){switch(c){case"left":return"AlignLeft";case"right":return"AlignRight";case"top":return"AlignTop";case"bottom":return"AlignBottom"}}return t.jsxRuntimeExports.jsxs("div",{className:O.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:O.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:O.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:O.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:O.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:O.alignments,children:yt.map(c=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{r(c)},className:O.alignment,children:[c!==n&&t.jsxRuntimeExports.jsx("div",{className:O.circle}),c===n&&t.jsxRuntimeExports.jsx(t.Icon,{name:a(),fill:"#FF3F19",width:22,height:22})]},c))}),t.jsxRuntimeExports.jsx("div",{className:O.paddings,children:kt.map(c=>t.jsxRuntimeExports.jsxs("label",{className:O.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:e(c),width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(s[c]),onChange:x=>o({...s,[c]:Number(x)}),paddingless:!0,borderless:!0})]},c))})]})]})]})},$t="_subtitle_2zbxx_1",Nt="_header_2zbxx_8",Ct="_text_2zbxx_9",wt="_top_2zbxx_16",Bt="_itemsBlock_2zbxx_23",G={subtitle:$t,header:Nt,text:Ct,top:wt,itemsBlock:Bt},Pt="_typeTexts_3zlec_1",St="_block_3zlec_7",Tt="_active_3zlec_18",W={typeTexts:Pt,block:St,active:Tt},At=["bold","italic","underline","strike-through","code"],K=l=>{const{typesText:n,setTypesText:s}=l;function o(r){switch(r){case"bold":return"TextB";case"italic":return"TextItalic";case"code":return"CodeSimple";case"strike-through":return"TextStrikethrough";case"underline":return"TextUnderline"}}return t.jsxRuntimeExports.jsx("div",{className:W.typeTexts,children:At.map(r=>t.jsxRuntimeExports.jsx("div",{className:t.clx(W.block,{[W.active]:n.includes(r)}),onClick:()=>{const a=[...n];if(a.includes(r)){const e=a.filter(c=>c!==r);s(e)}else a.push(r),s(a)},children:t.jsxRuntimeExports.jsx(t.Icon,{name:o(r),fill:n.includes(r)?"#252525":"#757575",width:20,height:20})},String(r)))})},Z=l=>{const{typesText:n,isActiveText:s,setIsActiveText:o,text:r,setText:a,setTypesText:e,title:c,subtitle:x="Items"}=l;return t.jsxRuntimeExports.jsxs("div",{className:G.text,children:[(c||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:G.top,children:[c&&t.jsxRuntimeExports.jsx("h3",{className:G.title,children:c}),s!==void 0&&o&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:R=>o(R)})]}),t.jsxRuntimeExports.jsxs("div",{className:G.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:G.subtitle,children:x}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:R=>a(R),value:r,maxLength:150}),t.jsxRuntimeExports.jsx(K,{typesText:n,setTypesText:e})]})]})},Ot="_subtitle_11qr1_1",Dt="_header_11qr1_8",qt="_text_11qr1_9",Lt="_productsBlock_11qr1_10",Mt="_top_11qr1_22",Ht="_itemsBlock_11qr1_29",Vt="_typeTexts_11qr1_35",zt="_block_11qr1_41",Ft="_active_11qr1_52",Ut="_products_11qr1_10",Gt="_product_11qr1_10",Yt="_button_11qr1_70",Xt="_disabled_11qr1_80",Qt="_image_11qr1_84",Wt="_info_11qr1_91",Jt="_name_11qr1_102",Kt="_buttons_11qr1_106",Zt="_modal_11qr1_112",te="_link_11qr1_130",ee="_modalOptions_11qr1_136",$={subtitle:Ot,header:Dt,text:qt,productsBlock:Lt,top:Mt,itemsBlock:Ht,typeTexts:Vt,block:zt,active:Ft,products:Ut,product:Gt,button:Yt,disabled:Xt,image:Qt,info:Wt,name:Jt,buttons:Kt,modal:Zt,link:te,modalOptions:ee},se=l=>{const{activeItem:n,setActiveItem:s,popupPosition:o,modalOptions:r,setIsOpenModal:a}=l;return t.jsxRuntimeExports.jsxs("div",{className:$.modal,onClick:e=>{e.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{s(null),a(!1)}})]}),t.jsxRuntimeExports.jsx("div",{className:$.modalOptions,children:r.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:c=>{const x={...n,[e.field]:c};s(x)}},String(e.field));if(e.type==="text")return t.jsxRuntimeExports.jsx(Z,{typesText:n[e.field.type],setTypesText:c=>{const x={...n,[e.field.type]:c};s(x)},text:n[e.field.text]||"",setText:c=>{const x={...n,[e.field.text]:c};s(x)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:c=>{const x={...n,[e.field]:c};s(x)},value:n[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:$.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:c=>{const x={...n,[e.field.text]:c};s(x)},value:n[e.field.text]||"",label:e.inputLabel,placeholder:e.placeholder}),t.jsxRuntimeExports.jsx(t.Switch,{current:!!n[e.field.switch]||!1,label:e.switchLabel,onChange:c=>{const x={...n,[e.field.switch]:c};s(x)}})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(et,{items:n[e.field]||[],setItems:c=>{const x={...n,[e.field]:c};s(x)},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:c=>{const x={...n,[e.field]:c};s(x)},label:e.label,value:n[e.field]||"String",leftAddon:e.leftAddon&&e.leftAddon==="icon"&&t.jsxRuntimeExports.jsx(t.Icon,{name:n[e.field]})})})})]})},ne="_other_1wtgi_1",oe="_subtitle_1wtgi_7",ie="_items_1wtgi_14",J={other:ne,subtitle:oe,items:ie},tt=l=>{const{items:n,title:s="Other"}=l;return t.jsxRuntimeExports.jsxs("div",{className:J.other,children:[t.jsxRuntimeExports.jsx("h5",{className:J.subtitle,children:s}),t.jsxRuntimeExports.jsx("div",{className:J.items,children:n.map((o,r)=>t.jsxRuntimeExports.jsx(t.Switch,{current:o.isItem,onChange:a=>o.setIsItem(a),label:o.label,hasBackground:!0,paddingless:!1},r))})]})},ce=l=>{const{index:n,moveProduct:s,children:o}=l,[,r]=t.useDrop({accept:"product",hover(c){c.index!==n&&(s(c.index,n),c.index=n)}}),[{isDragging:a},e]=t.useDrag({type:"product",item:{index:n},collect:c=>({isDragging:c.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:c=>e(r(c)),className:`${$.product} ${a?$.dragging:""}`,children:o})},et=l=>{const{isActiveItems:n,setIsActiveItems:s,items:o,setItems:r,other:a,title:e,subtitle:c,editable:x=!0,draggable:R=!1,withImage:m=!1,deletable:v=!0,addable:g=!0,itemsType:i,itemsPlaceholder:d="",itemsOptions:j,hasRangeSelector:N=!1,rangeSelectorOptions:B,modalOptions:y,addableOptions:z={},limit:T}=l,[q,L]=h.useState(null),[Q,X]=h.useState({top:0,left:0}),[p,f]=h.useState(!1),P=(u,C)=>{const S=[...o],[E]=S.splice(u,1);S.splice(C,0,E),r(S)};h.useEffect(()=>{const u=()=>{L(null),f(!1)};return document.body.addEventListener("click",u),L(null),f(!1),()=>{L(null),f(!1),document.body.removeEventListener("click",u)}},[]),h.useEffect(()=>{if(q){const u=[...o].map(C=>C.id===q.id?q:C);r(u)}},[q]);const k=(u,C)=>{u.stopPropagation(),f(!0);const S=u.target.getBoundingClientRect(),E=500,F=window.innerHeight;let D=S.top+window.scrollY;D+E>F&&(D=F-E-20),X({top:D-80,left:S.left-30}),L(C)};function H(u){if(m)return u?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${u[0]}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const A=(u,C)=>{const S=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[R&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),i==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,name:E}:M);L({...u,name:E}),r([...D])},value:u.name,options:j,leftAddon:H(u.images)}),i==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,name:E}:M);r([...D])},value:u.name,placeholder:d}),i==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:E=>{const D=[...o].map(M=>M.id===u.id?{...u,images:E}:M);r([...D])}}),t.jsxRuntimeExports.jsxs("div",{className:$.buttons,children:[x&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:E=>k(E,u)}),v&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>r(o.filter(E=>E.id!==u.id))})]})]});return R?t.jsxRuntimeExports.jsx(ce,{product:u,index:C,moveProduct:P,children:S},u.id):t.jsxRuntimeExports.jsx("div",{className:$.product,children:S},u.id)};return t.jsxRuntimeExports.jsxs("div",{className:$.productsBlock,children:[(e||n!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:$.title,children:e}),n!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:n,onChange:u=>s==null?void 0:s(u)})]}),q&&x&&y&&p&&t.jsxRuntimeExports.jsx(se,{activeItem:q,setActiveItem:L,popupPosition:Q,modalOptions:y,setIsOpenModal:f}),N&&B&&t.jsxRuntimeExports.jsx(nt,{...B}),t.jsxRuntimeExports.jsxs("div",{className:$.products,children:[c&&t.jsxRuntimeExports.jsx("h5",{className:$.subtitle,children:c}),R?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:o.map((u,C)=>A(u,C))}):o.map((u,C)=>A(u,C)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:t.clx($.button,{[$.disabled]:!!(T&&T<=o.length)}),size:"s",disabled:!!(T&&T<=o.length),onClick:()=>{const u=[...o];i==="select"?u.push({name:j[0]||`Product ${o.length+1}`,id:t.v4(),...z}):i==="input"?u.push({name:"",id:t.v4(),...z}):u.push({name:`Image ${o.length+1}`,id:t.v4(),...z}),r(u)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),a!==void 0&&t.jsxRuntimeExports.jsx(tt,{items:a})]})},re="_subtitle_41klp_1",ae="_header_41klp_8",le="_text_41klp_9",ue="_productsBlock_41klp_10",xe="_buttonsBlock_41klp_11",de="_top_41klp_21",pe="_itemsBlock_41klp_28",me="_typeTexts_41klp_34",je="_block_41klp_40",_e="_active_41klp_51",he="_products_41klp_10",ge="_product_41klp_10",be="_button_41klp_11",fe="_image_41klp_79",ve="_info_41klp_86",Re="_name_41klp_97",Ee="_buttons_41klp_11",ye="_modal_41klp_107",ke="_other_41klp_124",Ie="_options_41klp_130",V={subtitle:re,header:ae,text:le,productsBlock:ue,buttonsBlock:xe,top:de,itemsBlock:pe,typeTexts:me,block:je,active:_e,products:he,product:ge,button:be,image:fe,info:ve,name:Re,buttons:Ee,modal:ye,other:ke,options:Ie},$e=l=>{const{activeButton:n,setActiveButton:s,popupPosition:o}=l,[r,a]=h.useState(n.typesText),[e,c]=h.useState(n.destination),[x,R]=h.useState(n.link||""),[m,v]=h.useState(n.text||"");return h.useEffect(()=>{s({...n,...{text:m,link:x,destination:e,typesText:r}})},[r,e,x,m]),t.jsxRuntimeExports.jsxs("div",{className:V.modal,onClick:g=>{g.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:V.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>s(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:V.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:g=>c(g),options:["Go to Page","Open Link"],value:e}),e==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:g=>R(g),value:x,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:g=>v(g),value:m,label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(K,{typesText:r,setTypesText:a})]})]})},Ne="_subtitle_1y5sw_1",Ce="_header_1y5sw_8",we="_text_1y5sw_9",Be="_productsBlock_1y5sw_10",Pe="_buttonsBlock_1y5sw_11",Se="_top_1y5sw_22",Te="_itemsBlock_1y5sw_29",Ae="_typeTexts_1y5sw_35",Oe="_block_1y5sw_41",De="_active_1y5sw_52",qe="_products_1y5sw_10",Le="_product_1y5sw_10",Me="_button_1y5sw_11",He="_image_1y5sw_80",Ve="_info_1y5sw_87",ze="_name_1y5sw_98",Fe="_buttons_1y5sw_11",Ue="_modal_1y5sw_108",Ge="_other_1y5sw_125",Ye="_options_1y5sw_131",Y={subtitle:Ne,header:Ce,text:we,productsBlock:Be,buttonsBlock:Pe,top:Se,itemsBlock:Te,typeTexts:Ae,block:Oe,active:De,products:qe,product:Le,button:Me,image:He,info:Ve,name:ze,buttons:Fe,modal:Ue,other:Ge,options:Ye},st=l=>{const{buttons:n,setButtons:s,deletable:o=!0,addable:r=!0}=l,[a,e]=h.useState(null),[c,x]=h.useState({top:0,left:0});h.useEffect(()=>{const m=()=>{e(null)};return document.body.addEventListener("click",m),e(null),()=>{e(null),document.body.removeEventListener("click",m)}},[]),h.useEffect(()=>{if(a){const m=[...n].map(v=>v.id===a.id?a:v);s(m)}},[a]);const R=(m,v)=>{m.stopPropagation();const g=m.target.getBoundingClientRect(),i=490,d=window.innerHeight;let j=g.top+window.scrollY;j+i>d&&(j=d-i-20),x({top:j,left:g.left-30}),e(v)};return t.jsxRuntimeExports.jsxs("div",{className:Y.products,children:[t.jsxRuntimeExports.jsx("h5",{className:Y.subtitle,children:"Button Type"}),n.map(m=>t.jsxRuntimeExports.jsxs("div",{className:Y.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:v=>{const i=[...n].map(d=>d.id===m.id?{...m,type:v}:d);s(i)},value:m.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:Y.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:v=>{R(v,m)}}),o&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,onClick:()=>{const v=n.filter(g=>g.id!==m.id);s(v)},width:20,height:20,fill:"#C12A2A"})]})]},m.id)),a&&t.jsxRuntimeExports.jsx($e,{activeButton:a,setActiveButton:e,popupPosition:c}),r&&t.jsxRuntimeExports.jsxs(t.Button,{className:Y.button,size:"s",onClick:()=>{const m=[...n];m.push({type:"Primary",id:t.v4(),typesText:[],destination:"Go to Page",text:""}),s(m)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]})},Xe=l=>{const{isActiveButtons:n,setIsActiveButtons:s,buttons:o,setButtons:r}=l;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:n,onChange:a=>s(a)})]}),t.jsxRuntimeExports.jsx(st,{buttons:o,setButtons:r})]})})},Qe="_wrapper_tn7gb_1",We="_subtitle_tn7gb_7",Je="_content_tn7gb_14",Ke="_range_tn7gb_21",Ze="_track_tn7gb_26",ts="_progress_tn7gb_35",es="_dots_tn7gb_45",ss="_dot_tn7gb_45",ns="_active_tn7gb_62",os="_input_tn7gb_74",is="_countBlock_tn7gb_88",cs="_count_tn7gb_88",rs="_controls_tn7gb_103",as="_button_tn7gb_108",I={wrapper:Qe,subtitle:We,content:Je,range:Ke,track:Ze,progress:ts,dots:es,dot:ss,active:ns,input:os,countBlock:is,count:cs,controls:rs,button:as},nt=l=>{const{label:n,min:s=1,max:o=4,step:r=1,count:a,setCount:e}=l,[c,x]=h.useState(!1),R=Array.from({length:(o-s)/r+1}),m=(a-s)/(o-s)*100,v=()=>{a<o&&e(a+r)},g=()=>{a>s&&e(a-r)},i=d=>{const j=s+d*r;e(j)};return t.jsxRuntimeExports.jsxs("div",{className:I.wrapper,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:I.subtitle,children:n}),t.jsxRuntimeExports.jsxs("div",{className:I.content,children:[t.jsxRuntimeExports.jsxs("div",{className:I.range,children:[t.jsxRuntimeExports.jsx("div",{className:I.track}),t.jsxRuntimeExports.jsx("div",{className:I.progress,style:{width:`${m}%`}}),t.jsxRuntimeExports.jsx("div",{className:I.dots,children:R.map((d,j)=>{const N=j<=(a-s)/r;return t.jsxRuntimeExports.jsx("button",{onClick:()=>i(j),className:t.clx(I.dot,{[I.active]:N,[I.inactive]:!N,[I.dragging]:c}),"aria-label":`Set value to ${s+j*r}`},j)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:s,max:o,step:r,value:a,onChange:d=>e(Number(d.target.value)),onMouseDown:()=>x(!0),onMouseUp:()=>x(!1),onTouchStart:()=>x(!0),onTouchEnd:()=>x(!1),className:I.input})]}),t.jsxRuntimeExports.jsxs("div",{className:I.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:s,max:o,paddingless:!0,onChange:d=>{const j=Number(d);j>o?e(o):j<s?e(s):e(j)},value:String(a)}),t.jsxRuntimeExports.jsxs("div",{className:I.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:v,disabled:a>=o,className:I.button,"aria-label":"Increment count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretUp",width:15,height:15})}),t.jsxRuntimeExports.jsx("button",{onClick:g,disabled:a<=s,className:I.button,"aria-label":"Decrement count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown",width:15,height:15})})]})]})]})]})},ls="_subtitle_1nl8x_1",us="_header_1nl8x_8",xs="_text_1nl8x_9",ds="_productsBlock_1nl8x_10",ps="_top_1nl8x_22",ms="_itemsBlock_1nl8x_29",js="_typeTexts_1nl8x_35",_s="_block_1nl8x_41",hs="_active_1nl8x_52",gs="_products_1nl8x_10",bs="_product_1nl8x_10",fs="_button_1nl8x_70",vs="_image_1nl8x_80",Rs="_info_1nl8x_87",Es="_name_1nl8x_98",ys="_buttons_1nl8x_102",ks="_modal_1nl8x_108",Is="_link_1nl8x_126",$s="_modalOptions_1nl8x_132",w={subtitle:ls,header:us,text:xs,productsBlock:ds,top:ps,itemsBlock:ms,typeTexts:js,block:_s,active:hs,products:gs,product:bs,button:fs,image:vs,info:Rs,name:Es,buttons:ys,modal:ks,link:Is,modalOptions:$s},Ns=l=>{const{activeItem:n,setActiveItem:s,popupPosition:o,setIsOpenModal:r}=l;return t.jsxRuntimeExports.jsxs("div",{className:w.modal,onClick:a=>{a.stopPropagation()},style:{top:`${o.top}px`,left:`${o.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:w.top,children:[t.jsxRuntimeExports.jsx("h3",{children:n.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{r(!1),s(null)}})]}),t.jsxRuntimeExports.jsx("div",{className:w.modalOptions,children:t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:a=>{const e={...n,images:a,imagePath:a[0]};s(e)}})})]})},Cs=l=>{const{index:n,moveProduct:s,children:o}=l,[,r]=t.useDrop({accept:"product",hover(c){c.index!==n&&(s(c.index,n),c.index=n)}}),[{isDragging:a},e]=t.useDrag({type:"product",item:{index:n},collect:c=>({isDragging:c.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:c=>e(r(c)),className:`${w.product} ${a?w.dragging:""}`,children:o})},ws=l=>{const{isActiveItems:n,setIsActiveItems:s,items:o,setItems:r,other:a,title:e,subtitle:c,editable:x=!0,draggable:R=!1,withImage:m=!1,deletable:v=!0,addable:g=!0,itemsType:i,itemsOptions:d}=l,[j,N]=h.useState(null),[B,y]=h.useState({top:0,left:0}),[z,T]=h.useState(!1),q=(p,f)=>{const P=[...o],[k]=P.splice(p,1);P.splice(f,0,k),r(P)};h.useEffect(()=>{const p=()=>{N(null),T(!1)};return document.body.addEventListener("click",p),N(null),T(!1),()=>{N(null),T(!1),document.body.removeEventListener("click",p)}},[]),h.useEffect(()=>{if(j){const p=[...o].map(f=>f.id===j.id?j:f);r(p)}},[j]);const L=(p,f)=>{p.stopPropagation();const P=p.target.getBoundingClientRect(),k=100,H=window.innerHeight;let A=P.top+window.scrollY;A+k>H&&(A=H-k-20),T(!0),y({top:A-80,left:P.left-30}),N(f)};function Q(p){if(m)return p?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${p}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const X=(p,f)=>{const P=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[R&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})},f),i==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:k=>{const H=[...o],A=Number(k.split(" ")[1]),u=d.find(E=>E.id===A);if(!u)return;const C={...u.productData.stats,newPrice:u.productData.minPrice.amount,oldPrice:u.productData.compareAtPrice.amount},S=H.map(E=>E.id===p.id?{...p,name:k,listingId:A,stats:C}:E);N({...p,name:k,listingId:A}),r([...S])},value:p.name,options:[...d.map(k=>`Product ${k.id}`)],leftAddon:Q(p.images[0])},f),t.jsxRuntimeExports.jsxs("div",{className:w.buttons,children:[x&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:k=>L(k,p)}),v&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>r(o.filter(k=>k.id!==p.id))})]})]});return R?t.jsxRuntimeExports.jsx(Cs,{product:p,index:f,moveProduct:q,children:P},p.id):t.jsxRuntimeExports.jsx("div",{className:w.product,children:P},p.id)};return t.jsxRuntimeExports.jsxs("div",{className:w.productsBlock,children:[(e||n!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:w.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:w.title,children:e}),n!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:n,onChange:p=>s==null?void 0:s(p)})]}),z&&j&&t.jsxRuntimeExports.jsx(Ns,{activeItem:j,setActiveItem:N,setIsOpenModal:T,popupPosition:B}),t.jsxRuntimeExports.jsxs("div",{className:w.products,children:[c&&t.jsxRuntimeExports.jsx("h5",{className:w.subtitle,children:c}),R?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:o.map((p,f)=>X(p,f))}):o.map((p,f)=>X(p,f)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:w.button,size:"s",onClick:()=>{const p=[...o],f=d[0].id;p.push({name:`Product ${f}`,id:t.v4(),listingId:f,imagePath:"",images:[],stats:{...d[0].productData.stats,newPrice:d[0].productData.minPrice.amount,oldPrice:d[0].productData.compareAtPrice.amount}}),r(p)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),a!==void 0&&t.jsxRuntimeExports.jsx(tt,{items:a})]})},Bs="_options_163bj_1",Ps="_price_163bj_12",Ss="_oldPrice_163bj_18",Ts="_newPrice_163bj_26",As="_meta_163bj_33",Os="_info_163bj_39",Ds="_infoRight_163bj_46",qs="_buttons_163bj_52",Ls="_variants_163bj_59",Ms="_variant_163bj_59",Hs="_stock_163bj_74",Vs="_variantInfo_163bj_81",zs="_quantity_163bj_87",Fs="_count_163bj_93",Us="_button_163bj_52",Gs="_activeVariant_163bj_110",Ys="_chargeTypes_163bj_114",Xs="_charge_163bj_114",Qs="_chargeActive_163bj_131",b={options:Bs,price:Ps,oldPrice:Ss,newPrice:Ts,meta:As,info:Os,infoRight:Ds,buttons:qs,variants:Ls,variant:Ms,stock:Hs,variantInfo:Vs,quantity:zs,count:Fs,button:Us,activeVariant:Gs,chargeTypes:Ys,charge:Xs,chargeActive:Qs},Ws=l=>{const{variants:n}=l,[s,o]=h.useState(n[0]),r=t.useNavigate(),[a,e]=h.useState(1),{reset:c,addProductToCart:x,getProducts:R}=t.useCart();async function m(){await R(),await x({productId:l.id,productVariantId:s.id,quantity:a})}function v(){c(),m(),r("/checkout")}function g(i){if(i>=864e5){const y=Math.floor(i/864e5);return`${y} ${y===1?"day":"days"}`}else if(i>=36e5){const y=Math.floor(i/36e5);return`${y} ${y===1?"hour":"hours"}`}else if(i>=6e4){const y=Math.floor(i/6e4);return`${y} ${y===1?"minute":"minutes"}`}else{const y=Math.floor(i/1e3);return`${y} ${y===1?"second":"seconds"}`}}return t.jsxRuntimeExports.jsxs("div",{className:b.options,children:[t.jsxRuntimeExports.jsx("div",{className:b.chargeTypes,children:s.chargeTypes?s.chargeTypes.map(i=>t.jsxRuntimeExports.jsx("div",{children:i},i)):t.jsxRuntimeExports.jsx("div",{className:t.clx(b.charge,b.chargeActive),children:"One-Time"})}),t.jsxRuntimeExports.jsx("div",{className:b.variants,children:n.map(i=>t.jsxRuntimeExports.jsxs("div",{className:t.clx(b.variant,{[b.activeVariant]:s.id===i.id}),onClick:()=>o(i),children:[t.jsxRuntimeExports.jsxs("div",{className:b.variantInfo,children:[t.jsxRuntimeExports.jsx("span",{className:b.title,children:i.name}),t.jsxRuntimeExports.jsxs("span",{children:["$",i.price.amount]})]}),t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsxs("span",{className:b.stock,children:[i.quantity.restrictions.max||0," in stock"]})})]},i.id))}),t.jsxRuntimeExports.jsxs("div",{className:b.quantity,children:[t.jsxRuntimeExports.jsx("div",{onClick:()=>{a>1?e(i=>i-1):e(1)},className:b.button,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Minus"})}),t.jsxRuntimeExports.jsx("div",{className:b.count,children:a}),t.jsxRuntimeExports.jsx("div",{onClick:()=>e(i=>i+1),className:b.button,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus"})})]}),t.jsxRuntimeExports.jsxs("div",{className:b.meta,children:[t.jsxRuntimeExports.jsxs("div",{className:b.info,children:[t.jsxRuntimeExports.jsx("span",{children:"Delivery"}),t.jsxRuntimeExports.jsxs("div",{className:b.infoRight,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Lightning",fill:"#FF3F19",width:20,height:20}),t.jsxRuntimeExports.jsx("span",{children:s.deliveryTime===0?"Instant":g(s.deliveryTime)})]})]}),t.jsxRuntimeExports.jsxs("div",{className:b.info,children:[t.jsxRuntimeExports.jsx("span",{children:"Price"}),t.jsxRuntimeExports.jsx("div",{className:b.infoRight,children:s.compareAtPrice&&(s.compareAtPrice.amount||0)-(s.price.amount||0)>0?t.jsxRuntimeExports.jsxs("div",{className:b.price,children:[t.jsxRuntimeExports.jsxs("span",{className:b.newPrice,children:["$ ",(s.price.amount||0)*a]}),t.jsxRuntimeExports.jsxs("span",{className:b.oldPrice,children:["$ ",(s.compareAtPrice.amount||0)*a]})]}):t.jsxRuntimeExports.jsxs("span",{className:b.newPrice,children:["$ ",(s.price.amount||0)*a]})})]})]}),t.jsxRuntimeExports.jsxs("div",{className:b.buttons,children:[t.jsxRuntimeExports.jsx(t.Button,{type:"Primary",onClick:()=>v(),children:"Buy Now"}),t.jsxRuntimeExports.jsx(t.Button,{type:"Secondary",onClick:()=>m(),children:"Add to Cart"})]})]})},Js="_button_1jgdy_1",Ks="_login_1jgdy_12",Zs="_signUp_1jgdy_16",tn="_buttons_1jgdy_21",en="_modal_1jgdy_28",sn="_info_1jgdy_44",nn="_top_1jgdy_50",on="_title_1jgdy_59",cn="_clear_1jgdy_65",rn="_activeClear_1jgdy_72",an="_count_1jgdy_76",ln="_cart_1jgdy_89",un="_empty_1jgdy_96",xn="_product_1jgdy_122",dn="_products_1jgdy_129",pn="_image_1jgdy_136",mn="_productInfo_1jgdy_142",jn="_content_1jgdy_148",_n="_name_1jgdy_154",hn="_price_1jgdy_160",gn="_productButtons_1jgdy_166",bn="_productButton_1jgdy_166",fn="_productCount_1jgdy_183",vn="_bottom_1jgdy_197",Rn="_subtotal_1jgdy_205",En="_block_1jgdy_211",yn="_shoppingCount_1jgdy_217",_={button:Js,login:Ks,signUp:Zs,buttons:tn,modal:en,info:sn,top:nn,title:on,clear:cn,activeClear:rn,count:an,cart:ln,empty:un,product:xn,products:dn,image:pn,productInfo:mn,content:jn,name:_n,price:hn,productButtons:gn,productButton:bn,productCount:fn,bottom:vn,subtotal:Rn,block:En,shoppingCount:yn},kn=l=>{const{shopping:n,signUp:s}=l,o=t.useNavigate();function r(a){o(a)}return t.jsxRuntimeExports.jsxs("div",{className:_.buttons,children:[n&&t.jsxRuntimeExports.jsx(ot,{}),t.jsxRuntimeExports.jsx("div",{className:t.clx(_.button,_.login),onClick:()=>r("/customer-dash"),children:"Login"}),s&&t.jsxRuntimeExports.jsx("div",{className:t.clx(_.button,_.login,_.signUp),onClick:()=>r("/customer-dash"),children:"Sign Up"})]})},ot=()=>{const[l,n]=h.useState(!1),{cart:s}=t.useCart();return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsxs("div",{className:_.button,onClick:o=>{o.stopPropagation(),n(!0)},children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Handbag",fill:"#252525"}),s.parts.length>0&&t.jsxRuntimeExports.jsx("div",{className:_.shoppingCount,children:s.parts.length})]}),l&&t.jsxRuntimeExports.jsx(t.Modal,{close:n,children:t.jsxRuntimeExports.jsx(it,{})})]})},it=()=>{const{cart:l,reset:n,getProducts:s,getTotalAndDiscount:o,updateQuantityOfProduct:r}=t.useCart(),[a,e]=h.useState([]),c=t.useNavigate();function x(i){for(let d=0;d<l.parts.length;d++)for(let j=0;j<i.variants.length;j++)if(l.parts[d].productVariantId===i.variants[d].id)return l.parts[d].productVariantId}function R(i){for(let d=0;d<l.parts.length;d++)for(let j=0;j<i.variants.length;j++)if(l.parts[d].productVariantId===i.variants[d].id)return l.parts[d].quantity}function m(i){c(i)}function v(i){r({productId:i.id,productVariantId:i.activeVariantId,quantity:i.quantity+1})}function g(i){r({productId:i.id,productVariantId:i.activeVariantId,quantity:i.quantity-1})}return h.useEffect(()=>{(async()=>{const d=l.parts.map(B=>String(B.productId)),N=(await s([...d])).map(B=>({...B,activeVariantId:x(B),quantity:R(B)}));e(N)})()},[l]),t.jsxRuntimeExports.jsxs("div",{className:_.modal,onClick:i=>i.stopPropagation(),children:[t.jsxRuntimeExports.jsxs("div",{className:_.top,children:[t.jsxRuntimeExports.jsxs("div",{className:_.info,children:[t.jsxRuntimeExports.jsx("span",{className:_.title,children:"Cart"}),l.parts.length>0&&t.jsxRuntimeExports.jsx("div",{className:_.count,children:l.parts.length})]}),t.jsxRuntimeExports.jsx("button",{className:t.clx(_.clear,{[_.activeClear]:l.parts.length>0}),disabled:l.parts.length===0,onClick:()=>n(),children:"Clear all"})]}),l.parts.length>0?t.jsxRuntimeExports.jsxs("div",{className:_.cart,children:[t.jsxRuntimeExports.jsx("div",{className:_.products,children:a.map(i=>t.jsxRuntimeExports.jsxs("div",{className:_.product,children:[t.jsxRuntimeExports.jsxs("div",{className:_.productInfo,children:[t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${i.images[0].cfId}/w=500`,alt:"image",width:"100%",height:"100%",className:_.image}),t.jsxRuntimeExports.jsxs("div",{className:_.content,children:[t.jsxRuntimeExports.jsx("div",{className:_.name,children:i.name}),t.jsxRuntimeExports.jsxs("div",{className:_.price,children:["$",i.variants.find(d=>d.id===i.activeVariantId).price.amount*((i==null?void 0:i.quantity)||1)]})]})]}),t.jsxRuntimeExports.jsxs("div",{className:_.productButtons,children:[t.jsxRuntimeExports.jsx("div",{onClick:()=>{i.quantity!==1&&g(i)},className:_.productButton,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Minus",fill:"#757575",width:20,height:20})}),t.jsxRuntimeExports.jsx("div",{className:_.productCount,children:i.quantity}),t.jsxRuntimeExports.jsx("div",{onClick:()=>v(i),className:_.productButton,children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",fill:"#757575",width:20,height:20})})]})]},i.id))}),t.jsxRuntimeExports.jsxs("div",{className:_.bottom,children:[t.jsxRuntimeExports.jsxs("div",{className:_.subtotal,children:[t.jsxRuntimeExports.jsxs("div",{className:_.block,children:[t.jsxRuntimeExports.jsx("span",{children:"Subtotal"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Info",width:20,height:20,fill:"#757575"})]}),t.jsxRuntimeExports.jsxs("div",{children:["$",o().total]})]}),t.jsxRuntimeExports.jsx(t.Button,{onClick:()=>m("/checkout"),children:"Checkout"})]})]}):t.jsxRuntimeExports.jsx(ct,{})]})},ct=()=>t.jsxRuntimeExports.jsxs("div",{className:_.empty,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"Handbag"})}),t.jsxRuntimeExports.jsx("span",{children:"Your cart is empty"}),t.jsxRuntimeExports.jsx("span",{children:"Check out the store's products and add them here"})]});exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.ErrorableBlock=t.ErrorableBlock;exports.Icon=t.Icon;exports.Input=t.Input;exports.Loader=t.Loader;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.Accordion=dt;exports.ButtonTypeSettings=st;exports.ButtonsSettings=Xe;exports.EmptyCart=ct;exports.HeaderButtons=kn;exports.ItemsSettings=et;exports.LayoutSettings=It;exports.ListingSelector=ws;exports.ProductOptions=Ws;exports.RangeSelector=nt;exports.ShoppingButton=ot;exports.ShoppingModalCart=it;exports.TextSettings=Z;exports.TypesText=K;

package/dist/ui.es.js

@@ -1,5 +1,5 @@
-import { j as t, c as H, I as x, a as G, S as z, T as lt, C as ot, b as Y, D as rt, H as dt, B as X, v as tt, u as ut, d as _t, e as it, f as at, M as mt } from "./root-DZd2_UyS.js";
-import { k as Gn, l as Yn, h as Xn, E as Qn, L as Wn, P as Jn, R as Kn, g as Zn, i as tc } from "./root-DZd2_UyS.js";
+import { j as t, c as H, I as x, a as G, S as z, T as lt, C as ot, b as Y, D as rt, H as dt, B as X, v as tt, u as ut, d as _t, e as it, f as at, M as mt } from "./root-BudTzp0i.js";
+import { k as Gn, l as Yn, h as Xn, E as Qn, L as Wn, P as Jn, R as Kn, g as Zn, i as tc } from "./root-BudTzp0i.js";
 import b from "react";
 const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16", jt = "_open_2tiiw_19", ft = "_content_2tiiw_23", J = {
   accordion: gt,
@@ -219,7 +219,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         z,
         {
           current: s,
-          onChange: (y) => c(y)
+          onChange: (k) => c(k)
         }
       )
     ] }),
@@ -228,7 +228,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
       /* @__PURE__ */ t.jsx(
         lt,
         {
-          onChange: (y) => l(y),
+          onChange: (k) => l(k),
           value: a,
           maxLength: 150
         }
@@ -471,9 +471,9 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     title: e,
     subtitle: i,
     editable: u = !0,
-    draggable: y = !1,
+    draggable: k = !1,
     withImage: h = !1,
-    deletable: v = !0,
+    deletable: y = !0,
     addable: j = !0,
     itemsType: o,
     itemsPlaceholder: _ = "",
@@ -486,16 +486,16 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   } = r, [R, E] = b.useState(null), [st, et] = b.useState({
     top: 0,
     left: 0
-  }), [p, k] = b.useState(!1), S = (d, B) => {
+  }), [p, v] = b.useState(!1), S = (d, B) => {
     const O = [...c], [$] = O.splice(d, 1);
     O.splice(B, 0, $), a(O);
   };
   b.useEffect(() => {
     const d = () => {
-      E(null), k(!1);
+      E(null), v(!1);
     };
-    return document.body.addEventListener("click", d), E(null), k(!1), () => {
-      E(null), k(!1), document.body.removeEventListener("click", d);
+    return document.body.addEventListener("click", d), E(null), v(!1), () => {
+      E(null), v(!1), document.body.removeEventListener("click", d);
     };
   }, []), b.useEffect(() => {
     if (R) {
@@ -504,7 +504,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     }
   }, [R]);
   const C = (d, B) => {
-    d.stopPropagation(), k(!0);
+    d.stopPropagation(), v(!0);
     const O = d.target.getBoundingClientRect(), $ = 500, W = window.innerHeight;
     let M = O.top + window.scrollY;
     M + $ > W && (M = W - $ - 20), et({
@@ -534,7 +534,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   }
   const q = (d, B) => {
     const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+      k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         x,
         {
           name: "DotsSixVertical",
@@ -598,7 +598,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
             onClick: ($) => C($, d)
           }
         ),
-        v && /* @__PURE__ */ t.jsx(
+        y && /* @__PURE__ */ t.jsx(
           x,
           {
             name: "Trash",
@@ -611,7 +611,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         )
       ] })
     ] });
-    return y ? /* @__PURE__ */ t.jsx(
+    return k ? /* @__PURE__ */ t.jsx(
       he,
       {
         product: d,
@@ -647,13 +647,13 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         setActiveItem: E,
         popupPosition: st,
         modalOptions: N,
-        setIsOpenModal: k
+        setIsOpenModal: v
       }
     ),
     P && A && /* @__PURE__ */ t.jsx(bs, { ...A }),
     /* @__PURE__ */ t.jsxs("div", { className: I.products, children: [
       i && /* @__PURE__ */ t.jsx("h5", { className: I.subtitle, children: i }),
-      y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((d, B) => q(d, B)) }) : c.map((d, B) => q(d, B)),
+      k ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((d, B) => q(d, B)) }) : c.map((d, B) => q(d, B)),
       j && /* @__PURE__ */ t.jsxs(
         X,
         {
@@ -716,7 +716,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   other: Oe,
   options: De
 }, qe = (r) => {
-  const { activeButton: n, setActiveButton: s, popupPosition: c } = r, [a, l] = b.useState(n.typesText), [e, i] = b.useState(n.destination), [u, y] = b.useState(n.link || ""), [h, v] = b.useState(n.text || "");
+  const { activeButton: n, setActiveButton: s, popupPosition: c } = r, [a, l] = b.useState(n.typesText), [e, i] = b.useState(n.destination), [u, k] = b.useState(n.link || ""), [h, y] = b.useState(n.text || "");
   return b.useEffect(() => {
     s({
       ...n,
@@ -774,7 +774,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           ) : /* @__PURE__ */ t.jsx(
             G,
             {
-              onChange: (j) => y(j),
+              onChange: (j) => k(j),
               value: u,
               placeholder: "https://",
               label: "Link"
@@ -790,7 +790,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           /* @__PURE__ */ t.jsx(
             lt,
             {
-              onChange: (j) => v(j),
+              onChange: (j) => y(j),
               value: h,
               label: "Text",
               maxLength: 150
@@ -842,18 +842,18 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     };
   }, []), b.useEffect(() => {
     if (l) {
-      const h = [...n].map((v) => v.id === l.id ? l : v);
+      const h = [...n].map((y) => y.id === l.id ? l : y);
       s(h);
     }
   }, [l]);
-  const y = (h, v) => {
+  const k = (h, y) => {
     h.stopPropagation();
     const j = h.target.getBoundingClientRect(), o = 490, _ = window.innerHeight;
     let m = j.top + window.scrollY;
     m + o > _ && (m = _ - o - 20), u({
       top: m,
       left: j.left - 30
-    }), e(v);
+    }), e(y);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
     /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
@@ -865,10 +865,10 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           /* @__PURE__ */ t.jsx(
             Y,
             {
-              onChange: (v) => {
+              onChange: (y) => {
                 const o = [...n].map((_) => _.id === h.id ? {
                   ...h,
-                  type: v
+                  type: y
                 } : _);
                 s(o);
               },
@@ -884,8 +884,8 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (v) => {
-                  y(v, h);
+                onClick: (y) => {
+                  k(y, h);
                 }
               }
             ),
@@ -895,8 +895,8 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const v = n.filter((j) => j.id !== h.id);
-                  s(v);
+                  const y = n.filter((j) => j.id !== h.id);
+                  s(y);
                 },
                 width: 20,
                 height: 20,
@@ -982,7 +982,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   controls: gs,
   button: xs
 }, bs = (r) => {
-  const { label: n, min: s = 1, max: c = 4, step: a = 1, count: l, setCount: e } = r, [i, u] = b.useState(!1), y = Array.from({ length: (c - s) / a + 1 }), h = (l - s) / (c - s) * 100, v = () => {
+  const { label: n, min: s = 1, max: c = 4, step: a = 1, count: l, setCount: e } = r, [i, u] = b.useState(!1), k = Array.from({ length: (c - s) / a + 1 }), h = (l - s) / (c - s) * 100, y = () => {
     l < c && e(l + a);
   }, j = () => {
     l > s && e(l - a);
@@ -1002,7 +1002,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
             style: { width: `${h}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: w.dots, children: y.map((_, m) => {
+        /* @__PURE__ */ t.jsx("div", { className: w.dots, children: k.map((_, m) => {
           const P = m <= (l - s) / a;
           return /* @__PURE__ */ t.jsx(
             "button",
@@ -1054,7 +1054,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: v,
+              onClick: y,
               disabled: l >= c,
               className: w.button,
               "aria-label": "Increment count",
@@ -1186,18 +1186,18 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     title: e,
     subtitle: i,
     editable: u = !0,
-    draggable: y = !1,
+    draggable: k = !1,
     withImage: h = !1,
-    deletable: v = !0,
+    deletable: y = !0,
     addable: j = !0,
     itemsType: o,
     itemsOptions: _
   } = r, [m, P] = b.useState(null), [A, N] = b.useState({
     top: 0,
     left: 0
-  }), [Q, D] = b.useState(!1), R = (p, k) => {
+  }), [Q, D] = b.useState(!1), R = (p, v) => {
     const S = [...c], [C] = S.splice(p, 1);
-    S.splice(k, 0, C), a(S);
+    S.splice(v, 0, C), a(S);
   };
   b.useEffect(() => {
     const p = () => {
@@ -1208,18 +1208,18 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     };
   }, []), b.useEffect(() => {
     if (m) {
-      const p = [...c].map((k) => k.id === m.id ? m : k);
+      const p = [...c].map((v) => v.id === m.id ? m : v);
       a(p);
     }
   }, [m]);
-  const E = (p, k) => {
+  const E = (p, v) => {
     p.stopPropagation();
     const S = p.target.getBoundingClientRect(), C = 100, F = window.innerHeight;
     let q = S.top + window.scrollY;
     q + C > F && (q = F - C - 20), D(!0), N({
       top: q - 80,
       left: S.left - 30
-    }), P(k);
+    }), P(v);
   };
   function st(p) {
     if (h)
@@ -1241,9 +1241,9 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         }
       );
   }
-  const et = (p, k) => {
+  const et = (p, v) => {
     const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+      k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         x,
         {
           name: "DotsSixVertical",
@@ -1251,7 +1251,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           width: 20,
           height: 20
         }
-      ) }),
+      ) }, v),
       o === "select" && /* @__PURE__ */ t.jsx(
         Y,
         {
@@ -1277,7 +1277,8 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
           value: p.name,
           options: [..._.map((C) => `Product ${C.id}`)],
           leftAddon: st(p.images[0])
-        }
+        },
+        v
       ),
       /* @__PURE__ */ t.jsxs("div", { className: T.buttons, children: [
         u && /* @__PURE__ */ t.jsx(
@@ -1290,7 +1291,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
             onClick: (C) => E(C, p)
           }
         ),
-        v && /* @__PURE__ */ t.jsx(
+        y && /* @__PURE__ */ t.jsx(
           x,
           {
             name: "Trash",
@@ -1303,11 +1304,11 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         )
       ] })
     ] });
-    return y ? /* @__PURE__ */ t.jsx(
+    return k ? /* @__PURE__ */ t.jsx(
       Hs,
       {
         product: p,
-        index: k,
+        index: v,
         moveProduct: R,
         children: S
       },
@@ -1343,18 +1344,18 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
     ),
     /* @__PURE__ */ t.jsxs("div", { className: T.products, children: [
       i && /* @__PURE__ */ t.jsx("h5", { className: T.subtitle, children: i }),
-      y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((p, k) => et(p, k)) }) : c.map((p, k) => et(p, k)),
+      k ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((p, v) => et(p, v)) }) : c.map((p, v) => et(p, v)),
       j && /* @__PURE__ */ t.jsxs(
         X,
         {
           className: T.button,
           size: "s",
           onClick: () => {
-            const p = [...c], k = _[0].id;
+            const p = [...c], v = _[0].id;
             p.push({
-              name: `Product ${k}`,
+              name: `Product ${v}`,
               id: tt(),
-              listingId: k,
+              listingId: v,
               imagePath: "",
               images: [],
               stats: {
@@ -1401,15 +1402,15 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   charge: nn,
   chargeActive: cn
 }, Vn = (r) => {
-  const { variants: n } = r, [s, c] = b.useState(n[0]), a = it(), [l, e] = b.useState(1), { reset: i, addProductToCart: u, getProducts: y } = at();
+  const { variants: n } = r, [s, c] = b.useState(n[0]), a = it(), [l, e] = b.useState(1), { reset: i, addProductToCart: u, getProducts: k } = at();
   async function h() {
-    await y(), await u({
+    await k(), await u({
       productId: r.id,
       productVariantId: s.id,
       quantity: l
     });
   }
-  function v() {
+  function y() {
     i(), h(), a("/checkout");
   }
   function j(o) {
@@ -1511,7 +1512,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         X,
         {
           type: "Primary",
-          onClick: () => v(),
+          onClick: () => y(),
           children: "Buy Now"
         }
       ),
@@ -1609,7 +1610,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
         if (r.parts[_].productVariantId === o.variants[_].id)
           return r.parts[_].productVariantId;
   }
-  function y(o) {
+  function k(o) {
     for (let _ = 0; _ < r.parts.length; _++)
       for (let m = 0; m < o.variants.length; m++)
         if (r.parts[_].productVariantId === o.variants[_].id)
@@ -1618,7 +1619,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
   function h(o) {
     i(o);
   }
-  function v(o) {
+  function y(o) {
     a({
       productId: o.id,
       productVariantId: o.activeVariantId,
@@ -1637,7 +1638,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
       const _ = r.parts.map((A) => String(A.productId)), P = (await s([..._])).map((A) => ({
         ...A,
         activeVariantId: u(A),
-        quantity: y(A)
+        quantity: k(A)
       }));
       e(P);
     })();
@@ -1712,7 +1713,7 @@ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16",
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => v(o),
+                      onClick: () => y(o),
                       className: g.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         x,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@billgangcom/theme-lib",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@billgangcom/frontend-lib": "^4.0.0",
+    "@billgangcom/frontend-lib": "^4.0.1",
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dnd": "^16.0.1",