1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4510],{28276:(e,a,r)=>{r.d(a,{sc:()=>c,RT:()=>p,ER:()=>d});var t=r(75038),s=r(76430),l=r(2272),i=r(34530),o=r(85315),n=r(62260);r(1433);let p=({trigger:e,textStack:a,setTextStack:r,listTrigger:p}={})=>{let{isPro:c,c_HandleNonPro:h}=(0,s.useContext)(l.A);return(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)(i.m_,{text:"Add freeform text layer",triggerClass:"flex items-center",children:(0,t.jsx)("div",{onClick:()=>{c?r(e=>e?.length?[...e,{id:+new Date,content:"Edit this text",color:"#111111",alignment:"center",fontSize:"48",fontWeight:"700",lineHeight:"1",fontFamily:"",zIndex:30}]:[{id:"text-"+ +new Date,content:"Edit this text",color:"#111111",alignment:"center",fontSize:"48",fontWeight:"700",lineHeight:"1",fontFamily:"",zIndex:30}]):h({text:"Upgrade to Pro to add text on your image"})},children:e})}),p&&a?.length?(0,t.jsx)(i.AM,{trigger:p,noSpacing:!0,content:(0,t.jsx)("div",{className:"w-[300px] px-2 py-1 max-h-[300px] overflow-y-auto overscroll-none",children:a?.map(e=>(0,t.jsxs)("div",{className:"text-sm flex items-center mb-[4px]",onClick:()=>r(a=>a.map(a=>a?.id===e?.id?{...a,zIndex:10}:a)),children:[(0,t.jsxs)("div",{className:"cursor-pointer hover:bg-white dark:hover:bg-gray-900 whitespace-nowrap rounded-lg px-2 py-1 w-full mr-2 hover:shadow dark:hover:shadow-[0_1px_5px_rgba(0,0,0,0.15)]",children:[e?.content?.replace(/<[^>]*>?/gm," ").slice(0,20),"..."]}),(0,t.jsxs)("div",{className:"w-[100px] grid grid-cols-2 gap-x-1 ml-auto flex-none",children:[(0,t.jsx)(i.$n,{variant:"secondary",className:"p-1! h-[12px]!",onClick:()=>{r(a=>[...a,{...e,id:`text-${+new Date}`}])},children:(0,t.jsx)(o.A,{size:14})}),(0,t.jsx)(i.$n,{variant:"secondary",className:"p-1! h-[12px]!",onClick:()=>r(a=>a.filter(a=>a?.id!==e?.id)),children:(0,t.jsx)(n.A,{size:14})})]})]},e?.id))})}):""]})},c=({trigger:e,shapesStack:a,setShapesStack:r,listTrigger:s}={})=>(0,t.jsxs)("div",{className:"flex items-center",children:[e,s&&a?.length?(0,t.jsx)(i.AM,{trigger:s,noSpacing:!0,content:(0,t.jsx)("div",{className:"w-[300px] px-2 py-1 max-h-[300px] overflow-y-auto overscroll-none",children:a.map((e,a)=>(0,t.jsxs)("div",{className:"text-sm flex items-center mb-[4px]",onClick:()=>r(a=>a.map(a=>a?.id===e?.id?{...a,zIndex:10}:a)),children:[(0,t.jsxs)("div",{className:"cursor-pointer hover:bg-white dark:hover:bg-gray-900 whitespace-nowrap rounded-lg px-2 py-1 w-full mr-2 hover:shadow dark:hover:shadow-[0_1px_5px_rgba(0,0,0,0.15)]",children:[e?.type," ",a]}),(0,t.jsxs)("div",{className:"w-[100px] grid grid-cols-2 gap-x-1 ml-auto flex-none",children:[(0,t.jsx)(i.$n,{variant:"secondary",className:"p-1! h-[12px]!",onClick:()=>{r(a=>[...a,{...e,id:+new Date}])},children:(0,t.jsx)(o.A,{size:14})}),(0,t.jsx)(i.$n,{variant:"secondary",className:"p-1! h-[12px]!",onClick:()=>r(a=>a.filter(a=>a?.id!==e?.id)),children:(0,t.jsx)(n.A,{size:14})})]})]},e?.id))})}):""]});var h=r(71623);let d=({children:e,className:a})=>{let{c_ToggleTemplatesExplorer:r}=(0,s.useContext)(l.A);return(0,t.jsxs)("div",{className:(0,h.A)("mb-4 w-full flex items-center bg-white dark:bg-black/50 border border-l-0 border-r-0 md:border-l md:border-r border-gray-200/70 dark:border-gray-800/70 backdrop-blur-md px-3 py-2 md:rounded-lg",a),children:[(0,t.jsxs)(i.$n,{className:"mr-3",variant:"secondary",onClick:r,children:[(0,t.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"All"}),"Templates"]}),e]})}},36791:(e,a,r)=>{r.d(a,{Z4:()=>z,aR:()=>_,VS:()=>C,AR:()=>V,qU:()=>U,ar:()=>eo,i9:()=>J,Lv:()=>el,Ru:()=>H,sB:()=>Q,gE:()=>ee,yX:()=>F});var t=r(75038),s=r(76430),l=r(2272),i=r(46001),o=r.n(i),n=r(66899),p=r(96881),c=r(73753),h=r(38648),d=r(62260),m=r(19297),u=r(69558),g=r(34530),x=r(72651),f=r(71623),b=r(1433),v=r(61498);let w=(e,a)=>{let r=a?.background?.gradientDirection;return r?.css?e.value.deg===r.css:e.value.tw===r?.tw},k=["rgba(0,0,0,0)","#222222","#ebebeb","#ffffff","#cae7b9","#f3de8a","#8abdf2","#eb9486"],y=["from-[#f2b8ff] via-[#e9e4fe] to-[#a9aeff]","from-[#3de5b3] via-[#fee899] to-[#fff7ef]","from-[#9fbdd3] to-[#ebe6e2]","from-[#f0e2cf] via-[#f4d5af] to-[#f1c2b4]","from-[#81b29a] via-[#f2cc8f] to-[#f4f1de]","from-[#fbe0ff] via-[#92b4e9] to-[#ffc1c1]","from-[#01befc] via-[#fc7efc] to-[#fbd847]","from-[#b9fbc0] via-[#a3c4f3] to-[#f1c0e8]","from-[#ffd488] via-[#ff9b7f] to-[#fff6b1]","from-[#a3ffe7] via-[#7a6bfb] to-[#ff90c9]","from-[#5e88da] to-[#e3f0ff]","from-[#fff2a4] via-[#d3acee] to-[#82f5ff]","from-[#c6ffb1] via-[#b4eef5] to-[#ffdb95]","from-[#a280ff] via-[#ff7bb6] to-[#ff9d85]","from-[#9f82fe] to-[#ffe992]","from-[#fda1ff] via-[#fed3d3] to-[#66b3ff]","from-[#adf285] to-[#5346bf]","from-[#5493c8] to-[#4135ab]","from-[#f5e7ff] to-[#ff94be]","from-[#e98d96] to-[#e6a45e]","from-[#cf48d5] to-[#3e5bc7]","from-[#29817e] to-[#90e9cf]","from-[#799aff] to-[#e8de90]","from-[#c3c3c3] to-[#1a180b]","from-[#f2f2f2] to-[#a9a9a9]","from-[#ffb5a6] to-[#fb2626]","from-[#3165a6] to-[#0c6405]","from-[#fafafa] to-[#9614e2]","from-[#000000] to-[#c5e282]","from-[#399266] to-[#e9faab]","from-[#f8b016] to-[#161616]","from-[#925a9e] to-[#ff9696]"],j=({background:e,className:a})=>e?.active==="gradient"?(0,t.jsx)("div",{className:(0,f.A)("p-[2px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-white/30 rounded-[10px] cursor-pointer hover:border-gray-600 dark:hover:border-white/60 w-[36px] h-[36px] mr-3",a),children:(0,t.jsx)("div",{className:(0,f.A)("w-full h-full rounded-lg shadow-[0_0_2px_rgba(0,0,0,0.2)]",e?.active==="gradient"&&e?.gradientDirection?.tw,e?.active==="gradient"&&e?.gradient)})}):e?.active==="custom-color"?(0,t.jsx)("div",{className:(0,f.A)("p-[2px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-white/30 rounded-[10px] cursor-pointer hover:border-gray-600 dark:hover:border-white/60 w-[36px] h-[36px] mr-3",a),children:(0,t.jsx)("div",{className:"w-full h-full rounded-lg shadow-[0_0_2px_rgba(0,0,0,0.2)]",style:{backgroundImage:(0,v.Bu)(e)}})}):e?.active==="image"?(0,t.jsx)("div",{className:(0,f.A)("p-[2px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-white/30 rounded-[10px] cursor-pointer hover:border-gray-600 dark:hover:border-white/60 w-[36px] h-[36px] mr-3",a),children:(0,t.jsx)("div",{className:"w-full h-full rounded-lg shadow-[0_0_2px_rgba(0,0,0,0.2)]",style:{backgroundImage:`url(${e?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}})}):"",N=({setOptions:e})=>
1{let[a,r]=(0,s.useState)(""),[i,o]=(0,s.useState)(null),[c,h]=(0,s.useState)(!1),{isPro:d,c_HandleNonPro:m}=(0,s.useContext)(l.A),u=async()=>{if(!d)return void m({text:"Upgrade to Pro to search for background images"});h(!0);try{if(a?.length){let{searchResults:e}=await fetch(`/api/unsplash/search?searchTerm=${a}`).then(e=>e.json());o(e?.response?.results)}}catch(e){}finally{h(!1)}};return(0,t.jsx)("div",{className:"px-1 py-2",children:(0,t.jsxs)("form",{onSubmit:e=>{e.preventDefault(),u()},children:[(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)(g.pd,{autoFocus:!0,value:a,onChange:e=>r(e.target.value),placeholder:"Enter search term and hit enter",className:"pl-8"}),(0,t.jsx)(n.A,{className:"absolute left-[12px] top-[50%] translate-y-[-50%]"})]}),c?(0,t.jsx)("div",{className:"py-10 flex items-center justify-center",children:(0,t.jsx)(p.A,{size:32,className:"leading-none animate-spin"})}):(0,t.jsx)("div",{className:"pt-3",children:i?.length?(0,t.jsx)("div",{className:"grid grid-cols-4 gap-2 max-h-[240px] overflow-auto",children:i?.map(a=>(0,t.jsx)(g.T8,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},className:"",children:(0,t.jsx)("div",{className:"cursor-pointer max-h-[60px] rounded-xl overflow-hidden h-full w-full",onClick:()=>{e(e=>({...e,background:{...e.background,active:"image",image:{baseData:a?.urls?.regular}}}))},children:(0,t.jsx)("img",{src:a?.urls?.small_s3,className:"rounded-xl object-cover h-full w-full hover:opacity-60 transition-opacity duration-200",alt:a?.alt_description})})},a?.id))}):(0,t.jsx)("div",{className:"text-sm opacity-50 text-center py-10",children:"No results found. Try changing the search term."})})]})})},S=({options:e,setOptions:a})=>{let[r,i]=(0,s.useState)({name:"",includePattern:!0}),[o,n]=(0,s.useState)(!1),{isPro:p,c_SavedBackgrounds:m,c_SetSavedBackgrounds:u}=(0,s.useContext)(l.A);return p?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(g.AM,{open:o,onOpenChange:()=>n(!o),noSpacing:!0,trigger:(0,t.jsx)("div",{className:"px-3 pt-4",children:(0,t.jsxs)(g.$n,{variant:"secondary",children:["Save current background as preset"," ",(0,t.jsx)(c.A,{className:"ml-1 rotate-90"})]})}),content:(0,t.jsx)("form",{onSubmit:a=>{a.preventDefault(),(()=>{try{if(!r?.name||r?.name?.trim()==="")return void b.oR.error("Preset name cannot be empty");let a=!!m?.length&&m?.filter(e=>e.name===r?.name);if(a?.length>0)return void b.oR.error("Background preset with same name already exists, please try a different name");let t=m?.length?[...m,{name:r?.name,background:e?.background,pattern:r?.includePattern?e?.pattern:null}]:[{name:r?.name,background:e?.background,pattern:r?.includePattern?e?.pattern:null}];(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Save Preset"}),u({newSavedBackgrounds:t}),n(!1)}catch(e){console.error(e)}})()},children:(0,t.jsxs)("div",{className:"max-w-[95vw] md:max-w-[300px] w-full rounded-xl overflow-hidden overscroll-none",children:[(0,t.jsx)("div",{className:"bg-white/70 z-20 px-2 flex py-2 text-xs dark:bg-gray-800/40 backdrop-blur-md text-gray-500 dark:text-gray-400 border-b dark:border-gray-700 rounded-t-xl",children:(0,t.jsxs)("h3",{className:"flex items-center",children:[(0,t.jsx)(h.A,{size:16,className:"mr-1"}),"Save current background as preset"]})}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-3 max-h-[300px] overscroll-none h-full w-full px-3 py-4",children:[(0,t.jsx)(g.pd,{value:r?.name,onChange:e=>i(a=>({...a,name:e.target.value})),placeholder:"Enter preset name"}),(0,t.jsx)(g.Sc,{id:"savePattern",label:"Also save pattern",checked:r?.includePattern,onChange:e=>i(e=>({...e,includePattern:!e.includePattern}))}),(0,t.jsx)(g.$n,{type:"submit",variant:"primary",children:"Save Preset"})]})]})})}),(0,t.jsx)("hr",{className:"mt-5 dark:opacity-10"}),(0,t.jsx)("div",{className:"max-h-[200px] overflow-scroll px-3 pt-5",children:m?.length?(0,t.jsx)("div",{className:"grid grid-cols-2 gap-x-2 gap-y-4 pb-5",children:m?.map((e,r)=>(0,t.jsx)("div",{className:"relative",children:(0,t.jsxs)(g.$n,{onClick:()=>a(a=>({...a,background:e?.background,pattern:e?.pattern??{...a.pattern,name:"None",value:"none"}})),className:"grid grid-cols-[56px_1fr] gap-1",children:[(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)(g.$n,{type:"button",className:"bg-white/90 backdrop-blur w-4 h-4 flex justify-center text-base items-center absolute top-[-2px] right-[-2px] rounded-full shadow-[0_0_5px_rgba(0,0,0,0.1)] group",onClick:a=>(({e,presetName:a})=>
1{e.stopPropagation(),u({newSavedBackgrounds:m?.length?m?.filter(e=>e.name!==a):[],type:"remove"})})({e:a,presetName:e?.name}),children:(0,t.jsx)(d.A,{className:"opacity-50 text-xs group-hover:opacity-80"})}),(0,t.jsx)(j,{background:e?.background,className:"w-12! h-12!"})]}),(0,t.jsxs)("div",{className:"flex flex-col justify-center items-start h-full leading-none text-sm",children:[(0,t.jsx)("h4",{className:"font-semibold font-inter mb-[2px] dark:text-white",children:e?.name}),(0,t.jsx)("p",{className:"opacity-50 text-sm",children:e?.pattern?"Includes Pattern":"Without Pattern"})]})]})},e?.name+r))}):(0,t.jsx)("div",{className:"pt-4 px-3 pb-10 text-sm opacity-50 w-full flex items-center justify-center text-center",children:"Use above button to save your brand colors as background presets"})})]}):(0,t.jsx)("div",{className:"px-3 pt-4 min-h-[240px] flex items-center justify-center",children:(0,t.jsx)("div",{className:"text-sm opacity-50 text-center",children:"Upgrade to Pro to save your brand colors as background presets"})})};function C({options:e,setOptions:a}){let{isPro:i,c_HandleNonPro:n}
1=(0,s.useContext)(l.A),[p,h]=(0,s.useState)("gradient"),[d,A]=(0,s.useState)({solidColor:!1,customGradient:!1}),z=()=>{let a=e?.background;return a?.active==="gradient"?(0,v.fL)(a.gradient,a.gradientDirection?.css)??(0,v.Bu)(a):(0,v.Bu)(a)},_=()=>{try{let e=localStorage.getItem("pika_bgActiveTab");e?.length&&h(e)}catch(e){throw Error(e)}};(0,s.useEffect)(()=>{_()},[]);let P=[{className:"-rotate-90",value:{tw:"bg-linear-to-t",deg:"to top"},title:"To top"},{className:"-rotate-45",value:{tw:"bg-linear-to-tr",deg:"to top right"},title:"To top right"},{className:"rotate-0",value:{tw:"bg-linear-to-r",deg:"to right"},title:"To right"},{className:"rotate-45",value:{tw:"bg-linear-to-br",deg:"to bottom right"},title:"To bottom right"},{className:"rotate-90",value:{tw:"bg-linear-to-b",deg:"to bottom"},title:"To bottom"},{className:"rotate-135",value:{tw:"bg-linear-to-bl",deg:"to bottom left"},title:"To bottom left"},{className:"rotate-180",value:{tw:"bg-linear-to-l",deg:"to left"},title:"To left"},{className:"rotate-215",value:{tw:"bg-linear-to-tl",deg:"to top left"},title:"To top left"}];return(0,t.jsx)("div",{className:"w-full",children:(0,t.jsx)(g.AM,{asModal:!1,side:"top",onOpenChange:()=>{_()},noSpacing:!0,trigger:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 w-full",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Backgroun
1d"}),(0,t.jsx)(g.$n,{variant:"side",as:"div",className:"ml-2",children:(0,t.jsx)("span",{className:"font-mono capitalize",children:e?.background?.active?.replace("-"," ")||"Gradient"})}),(0,t.jsxs)("div",{className:"flex ml-auto items-center",children:[(0,t.jsx)(j,{background:e?.background}),(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})]})]}),content:(0,t.jsx)("div",{className:"w-[95vw] md:w-[450px] rounded-xl overflow-hidden overscroll-none px-1 pt-1",children:(0,t.jsx)("div",{children:(0,t.jsx)(g.tU,{defaultValue:p||"gradient",onTabChange:e=>{try{localStorage.setItem("pika_bgActiveTab",e)}catch(e){throw Error(e)}},items:[{key:"saved",trigger:(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)("div",{className:"bg-red-400 text-red-100 px-1 text-xs -rotate-2 absolute top-[-8px] left-[calc(100%-6px)] rounded font-semibold dark:text-white",children:"New"}),(0,t.jsx)("span",{className:"flex items-center justify-center",children:"Saved"})]}),content:(0,t.jsx)(S,{options:e,setOptions:a})},{key:"gradient",trigger:(0,t.jsx)("span",{className:"flex items-center justify-center",children:"Gradient"}),content:(0,t.jsx)("div",{className:"px-3 py-4",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"grid flex-wrap grid-cols-8 gap-px relative overflow-hidden rounded-lg shadow",children:y?.map(r=>(0,t.jsx)(g.m_,{noSpacing:!0,text:(0,t.jsxs)("div",{className:"flex items-center divide-x divide-gray-700 text-sm rounded-lg overflow-hidden",children:[(0,t.jsxs)(g.$n,{className:"px-3 py-1 flex items-center hover:bg-gray-700",onClick:()=>{try{let a=r.match(/#(?:[0-9a-fA-F]{3}){1,2}/g),t=`linear-gradient(${e?.background?.gradientDirection?.css??"135deg"}, ${a[0]}, ${a[1]})`;navigator.clipboard.writeText(t),b.oR.success("CSS Gradient copied to clipboard")}catch(e){b.oR.error("Failed to copy CSS Gradient")}},children:[(0,t.jsx)(u.A,{className:"mr-1"}),"Copy Gradient CSS"]}),(0,t.jsxs)(g.$n,{className:"px-3 py-1 flex items-center hover:bg-gray-700",onClick:()=>{try{let e=r.match(/#(?:[0-9a-fA-F]{3}){1,2}/g);navigator.clipboard.writeText(e),b.oR.success("Colors copied to clipboard")}catch(e){b.oR.error("Failed to copy CSS Gradient")}},children:[(0,t.jsx)(u.A,{className:"mr-1"}),"Copy Colors"]})]}),children:(0,t.jsx)("div",{className:(0,f.A)("cursor-pointer group flex items-center justify-center shadow dark:shadow-black/20 shadow-gray-500/20 w-full aspect-square bg-linear-to-br",r),onClick:()=>{a(e=>({...e,background:{...e.background,active:"gradient",gradient:r}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Gradient"})},children:(0,t.jsx)("div",{className:o()("w-2 h-2 rounded-full shadow-black/50 bg-linear-to-br from-white to-gray-600 duration-200",{"opacity-100 translate-y-0 scale-100":r==e?.background?.gradient&&e?.background?.active==="gradient"},{"opacity-0 translate-y-[-20px] scale-[0]":r!=e?.background?.gradient||e?.background?.active!=="gradient"})})})},r))}),(0,t.jsxs)("div",{className:"flex items-center my-5",children:[(0,t.jsx)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white",children:"Custom Gradient"}),(0,t.jsx)("div",{className:"ml-auto flex items-center",children:(0,t.jsx)(g.sk,{gradient:!0,popoverOpen:d?.customGradient,onPopoverOpen:()=>{d?.customGradient||(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Custom Gradient"}),A(e=>({...e,customGradient:!e.customGradient}))},value:z(),onChange:e=>{a(a=>({...a,background:{...a.background,active:"custom-color",customColor:{...a.background.customColor,css:e}}}))},trigger:(0,t.jsx)("div",{className:"p-[2px] border border-gray-300 dark:border-white/30 rounded-[10px] cursor-pointer hover:border-gray-600 dark:hover:border-white/60",children:(0,t.jsx)("div",{className:"w-[64px] h-[30px] rounded-[8px] shadow-[0_0_2px_rgba(0,0,0,0.2)]",style:{backgroundImage:z()}})})})})]}),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white mt-4",children:"Gradient Direction"}),(0,t.jsx)("div",{className:"grid grid-cols-8 gap-x-2 overflow-auto text-xs snap-x max-w-full w-full sizes-wrapper",children:P?.map(s=>(0,t.jsx)("div",{className:o()("snap-center mt-2 whitespace-nowrap cursor-pointer aspect-square w-full text-center border rounded-xl flex items-center justify-center relative",{"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":!w(s,e)},{"bg-pink-100 text-pink-500 border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400":w(s,e)}),onClick:async()=>{a(e=>({...e,background:{...e.background,gradientDirection:{css:s.value.deg,tw:s.value.t
1w}}}));let t=e?.background?.customColor?.css;if(e?.background?.active!=="custom-color"||!t)return;let{createPicker:l}=await r.e(6726).then(r.bind(r,16726)),i=l({value:t,outputFormat:"hex"});i.setMode("linear"),i.setAngle(v.Nz[s.value.deg]??135);let o=i.getState().value;a(e=>({...e,background:{...e.background,customColor:{...e.background.customColor,css:o}}}))},title:s.title,children:(0,t.jsx)("span",{className:o()({[s.className]:s.className}),children:"â"})},s.title))})]})]})})},{key:"solid",trigger:(0,t.jsx)("span",{className:"flex items-center justify-center",children:"Solid"}),content:(0,t.jsx)("div",{className:"px-3 py-4",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"grid flex-wrap grid-cols-8 gap-px relative shadow overflow-hidden rounded-xl",children:k.map((r,s)=>(0,t.jsx)(g.m_,{noSpacing:!0,text:(0,t.jsx)("div",{className:"flex items-center divide-x divide-gray-700 text-sm rounded-lg overflow-hidden",children:(0,t.jsxs)(g.$n,{className:"px-3 py-1 flex items-center hover:bg-gray-700",onClick:()=>{try{navigator.clipboard.writeText(r),b.oR.success("Colors copied to clipboard")}catch(e){b.oR.error("Failed to copy CSS Gradient")}},children:[(0,t.jsx)(u.A,{className:"mr-1"}),"Copy Color"]})}),children:(0,t.jsxs)("div",{className:"cursor-pointer group flex items-center justify-center shadow dark:shadow-black/20 shadow-gray-500/20 w-full aspect-square relative",style:{backgroundColor:r},onClick:()=>{if("rgba(0,0,0,0)"===r&&!i){n({text:"Upgrade to Pro to apply transparent background"}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:"Background â Solid Color â Signup modal"});return}a(e=>({...e,background:{...e.background,active:"custom-color",customColor:{...e.background.customColor,colorStart:r,colorEnd:r,css:null}}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Solid Color"})},children:[(0,t.jsx)("div",{className:o()("w-2 h-2 rounded-full shadow-black/50 bg-linear-to-br from-white to-gray-600 duration-200",{"opacity-100 translate-y-0 scale-100":r==e?.background?.customColor?.colorStart&&e?.background?.active==="custom-color"&&!e?.background?.customColor?.css},{"opacity-0 translate-y-[-20px] scale-[0]":r!=e?.background?.customColor?.colorStart||e?.background?.active!=="custom-color"||!!e?.background?.customColor?.css})}),"rgba(0,0,0,0)"===r?(0,t.jsx)(g.m_,{text:(0,t.jsx)("div",{className:"max-w-[320px]",children:"Select this for transparent background. Output images in PNG wouldn't have any background"}),children:(0,t.jsx)("div",{className:"absolute inset-0 w-full h-full z-20000",children:(0,t.jsx)("img",{src:"/app-tools/background/transparent.png",alt:"Transparent"})})}):""]})},r))}),(0,t.jsxs)("div",{className:"flex items-center mt-5",children:[(0,t.jsx)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white",children:"Custom Solid Color"}),(0,t.jsx)("div",{className:"ml-auto",children:(0,t.jsx)(g.sk,{popoverOpen:d?.solidColor,onPopoverOpen:()=>{A(e=>({...e,solidColor:!e.solidColor}))},value:e?.background?.customColor?.colorEnd,onChange:e=>{a(a=>({...a,background:{...a.background,active:"custom-color",customColor:{...a.background.customColor,colorStart:e,colorEnd:e,css:null}}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Custom Solid Color"})}})})]})]})})},{key:"image",trigger:(0,t.jsxs)("span",{className:"flex items-center justify-center",children:[i?"":(0,t.jsx)(m.A,{size:16,className:"mr-1"}),"Image"]}),content:(0,t.jsx)("div",{className:"",children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{className:"overflow-y-auto max-h-[300px] overscroll-none pb-4",children:[(0,t.jsxs)("label",{className:"w-full mb-5 block px-3 pt-4",style:e?.bgImage?.src?{backgroundImage:`url(${e?.bgImage?.src})`,backgroundSize:"cover"}:{},htmlFor:"customBgImage",children:[e?.bgImage?.src?(0,t.jsx)("div",{className:"inset-0 w-full h-full bg-black/60 backdrop-blur rounded-xl absolute"}):"",(0,t.jsx)("input",{className:"hidden",id:"customBgImage",type:"file",accept:"image/*",onChange:async e=>{let r;if(!i){n({text:"Upgrade to Pro to apply custom color or image as background"}
1),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:"Background â Custom Image â Signup modal"}),e.target.value="";return}try{({baseData:r}=await (0,x.Qp)(e))}catch(e){b.oR.error("Please use an image file");return}finally{e.target.value=""}a(e=>({...e,background:{...e?.background,active:"image",image:{...e?.background?.image,baseData:r}}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Custom Image"})}}),(0,t.jsxs)(g.$n,{variant:"secondary",as:"div",className:"w-full",children:[i?(0,t.jsx)("span",{className:"duration-100 mr-2 group-hover:scale-[1.2]",children:"+"}):(0,t.jsx)(m.A,{size:16,className:"mr-1"}),(0,t.jsx)("span",{className:"text-sm text-center leading-none opacity-80 group-hover:opacity-100",children:"Add or replace custom image"})]})]}),[{title:"Pika Exclusive",list:["/backgrounds/pika-1.png","/backgrounds/pika-2.png","/backgrounds/pika-3.png","/backgrounds/pika-5.png","/backgrounds/pika-6.png","/backgrounds/pika-7.png","/backgrounds/pika-4.png","/backgrounds/pika-8.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-1.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-2.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-3.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-4.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-5.png","/backgrounds/pika-series-2/series-2-pika-wallpaper-6.png"]},{title:"By Maitri Shah",list:["/backgrounds/maitris/1.png","/backgrounds/maitris/2.png","/backgrounds/maitris/3.png","/backgrounds/maitris/4.png","/backgrounds/maitris/5.png","/backgrounds/maitris/6.png","/backgrounds/maitris/7.png","/backgrounds/maitris/8.png","/backgrounds/maitris/9.png","/backgrounds/maitris/10.png","/backgrounds/maitris/11.png"]},{title:"Mesh",list:["/backgrounds/20-mesh.jpg","/backgrounds/19-mesh.jpg","/backgrounds/1-mesh.jpg","/backgrounds/15-mesh.jpg","/backgrounds/17-mesh.jpg","/backgrounds/18-mesh.jpg","/backgrounds/16-mesh.jpg","/backgrounds/14-gradient.png","/backgrounds/6-abstract.jpg","/backgrounds/10-abstract.jpg"]},{title:"Images",list:["/backgrounds/1-macos.svg","/backgrounds/5-macos.png","/backgrounds/1-art.jpg","/backgrounds/2-art.jpg","/backgrounds/5-abstract.png","/backgrounds/4-abstract.png","/backgrounds/3-abstract.png","/backgrounds/2-abstract.png","/backgrounds/8-abstract.jpg","/backgrounds/9-abstract.jpg"]}].map(r=>(0,t.jsxs)("div",{className:"w-full border-b border-gray-500/30 pb-4 mb-4 last:mb-0 last:pb-0 last:border-0",children:[(0,t.jsx)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white mb-2 px-3",children:r?.title}),(0,t.jsx)("div",{className:"grid grid-cols-6 gap-x-3 gap-y-3 px-3",children:r?.list?.map((r,s)=>(0,t.jsx)(g.m_,{noSpacing:!0,text:(0,t.jsx)("div",{className:"flex items-center divide-x divide-gray-700 text-sm rounded-lg overflow-hidden",children:(0,t.jsxs)(g.$n,{className:"px-3 py-1 flex items-center hover:bg-gray-700",onClick:()=>{try{navigator.clipboard.writeText(`https://pika.style${r}
1`),b.oR.success("Background URL copied to clipboard")}catch(e){b.oR.error("Failed to copy CSS Gradient")}},children:[(0,t.jsx)(u.A,{className:"mr-1"}),"Copy Background URL"]})}),children:(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)("div",{className:"absolute inset-0 w-full h-full flex items-center justify-center",children:(0,t.jsx)("div",{className:o()("w-2 h-2 rounded-full shadow-black/50 bg-linear-to-br from-white to-gray-600 duration-200",{"opacity-100 translate-y-0 scale-100":r==e?.background?.image&&e?.background?.active==="image"},{"opacity-0 translate-y-[-20px] scale-[0]":r!=e?.background?.image||e?.background?.active!=="image"})})}),(0,t.jsx)("div",{className:"absolute inset-0 w-full h-full bg-black rounded-xl z-1 opacity-0 cursor-pointer",onClick:()=>{a(e=>({...e,background:{...e.background,active:"image",image:{baseData:r}}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Background â Custom Image"})}}),(0,t.jsx)("img",{alt:"Background option",src:`https://pika.style${r}`,loading:"lazy",className:"object-cover h-full w-full shadow-sm cursor-pointer rounded-xl aspect-square duration-200"})]})},r+s))})]},r?.title))]})})})},{key:"imageSearch",trigger:(0,t.jsxs)("span",{className:"flex items-center justify-center",children:[i?"":(0,t.jsx)(m.A,{size:16,className:"mr-1"}),"Unsplash"]}),content:(0,t.jsx)("div",{className:"",children:(0,t.jsx)(N,{setOptions:a})})}]})})})})})}var A=r(75154);let z=({image:e,setImage:a,id:r})=>(0,t.jsx)("div",{children:(0,t.jsxs)("label",{className:"w-8 h-8 rounded-lg flex items-center justify-center text-xl dark:from-gray-800/50 dark:to-gray-500/30 text-white bg-linear-to-br from-gray-600 to-gray-800 duration-100 cursor-pointer flex-col relative backdrop-blur-lg shadow",htmlFor:r??"customBgImage",children:[(0,t.jsx)("div",{className:"inset-0 w-full h-full absolute opacity-20 rounded-lg",style:e?{backgroundImage:`url(${e})`,backgroundSize:"cover"}:{}}),(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)("input",{className:"hidden",id:r??"customBgImage",type:"file",accept:"image/*",onChange:async e=>{try{let{baseData:r}=await (0,x.Qp)(e);a(r),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Template Image Added"})}catch(e){b.oR.error("Please use an image file")}finally{e.target.value=""}}}),(0,t.jsx)(A.A,{size:16,weight:"bold"})]}),e?(0,t.jsx)("div",{className:"border dark:border-gray-600 absolute top-[-15%] right-[-15%] rounded-full w-4 h-4 bg-gray-700 flex items-center justify-center shadow group",onClick:e=>{e.preventDefault(),a(null)},children:(0,t.jsx)(d.A,{size:10,weight:"bold",className:"opacity-60 group-hover:opacity-100"})}):""]})}),_=({setOptions:e,options:a})=>{let r,[i,o]=(0,s.useState)(!1),{isPro:n,c_HandleNonPro:p,c_Session:h}=(0,s.useContext)(l.A);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-[14px] cursor-pointer hover:bg-gray-50 dark:hover:bg-[#222]",onClick:()=>{if(!n){p({text:"Upgrade to Pro to add custom watermarks"}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:h?.email?`Watermark option â Signup modal(${h?.email})`:"Watermark option â Signup modal"});return}o(!0)},children:[(0,t.jsxs)("div",{className:"flex text-sm font-semibold dark:text-gray-200 items-center",children:[n?"":(0,t.jsx)(m.A,{size:15,className:"mr-1 opacity-40"}),"Watermark",n?(0,t.jsx)(g.$n,{as:"div",variant:"side",className:"ml-2",onClick:a=>{a.stopPropagation(),e(e=>({...e,watermark:{...e.watermark,active:!e?.watermark?.active}}))},children:a?.watermark?.active?"Hide":"Show"}):""]}),(0,t.jsx)("div",{className:"flex",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]}),(r=[{title:"Top left",value:"top-0 justify-start",active:a?.watermark?.position=="top-0 justify-start"},{title:"Top center",value:"top-0 justify-center",active:a?.watermark?.position=="top-0 justify-center"},{title:"Top right",value:"top-0 justify-end",active:a?.watermark?.position=="top-0 justify-end"},{title:"Bottom left",value:"bottom-0 justify-start",active:a?.watermark?.position=="bottom-0
1justify-start"},{title:"Bottom center",value:"bottom-0 justify-center",active:a?.watermark?.position=="bottom-0 justify-center"},{title:"Bottom right",value:"bottom-0 justify-end",active:a?.watermark?.position=="bottom-0 justify-end"}],(0,t.jsx)(g.Zv,{show:i,children:(0,t.jsxs)("div",{className:"p-4 bg-white/90 backdrop-blur duration-200 dark:bg-gray-900/90 rounded-2xl border-gray-300 w-full shadow-xl border overflow-y-auto max-h-full dark:border-gray-800 h-full",children:[(0,t.jsx)(g.QM,{title:"Add Watermark",onBack:()=>o(!1)}),(0,t.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800",children:[(0,t.jsx)("div",{className:"flex justify-start pt-2 pb-6",children:(0,t.jsx)(g.Sc,{checked:a?.watermark?.active||!1,id:"toggleWatermark",label:"Show watermark",onChange:()=>{(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Watermark Toggled"}),e(e=>({...e,watermark:{...e.watermark,active:!e.watermark.active}}))}})}),(0,t.jsxs)("div",{className:"w-full py-3",children:[(0,t.jsx)("div",{className:"text-base font-semibold dark:text-white mb-2",children:"Backgroun
1d"}),(0,t.jsx)("div",{className:"",children:(0,t.jsx)(g.zb,{selected:a?.watermark?.bgColor,items:[{name:"Dark",value:"bg-gray-800/30"},{name:"Light",value:"bg-white/60"},{name:"Transparent",value:"bg-transparent"}],onChange:a=>{e(e=>({...e,watermark:{...e.watermark,active:!0,bgColor:a}}))}})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between w-full py-3",children:[(0,t.jsx)("div",{className:"text-base font-semibold dark:text-white",children:"Position"}),(0,t.jsx)("div",{className:"relative grid w-16 h-12 grid-cols-3 p-1 bg-white border border-gray-200 rounded-lg dark:border-gray-700 place-content-around place-items-center aspect-square dark:bg-gray-900 duration-300 ease-[cubic-bezier(.75,-0.5,0,1.75)]",children:r?.map(a=>(0,t.jsx)("div",{title:a.title,className:(0,f.A)("w-[10px] h-[10px] rounded-full cursor-pointer",{"bg-gray-300 hover:bg-gray-500 dark:hover:bg-gray-400 dark:bg-gray-600/50":!a.active},{"bg-linear-to-br from-gray-500 to-gray-800 ring-1 ring-gray-800 dark:from-gray-200 dark:to-gray-400 dark:ring-gray-200":a.active}),onClick:()=>e(e=>({...e,watermark:{...e.watermark,active:!0,position:a.value}}))},a.title))})]}),(0,t.jsxs)("div",{className:"grid grid-cols-2 gap-5 py-3",children:[(0,t.jsx)(g.pd,{label:"Text without icon",className:"text-sm",value:a?.watermark?.socials?.text||"",placeholder:"Enter text",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,text:a.target.value}}}))}),(0,t.jsx)(g.pd,{label:"Link",className:"text-sm",value:a?.watermark?.socials?.link||"",placeholder:"Enter link",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,link:a.target.value}}}))}),(0,t.jsx)(g.pd,{label:"Twitter",className:"text-sm",value:a?.watermark?.socials?.twitter||"",placeholder:"Twitter handle",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,twitter:a.target.value}}}))}),(0,t.jsx)(g.pd,{label:"LinkedIn",className:"text-sm",value:a?.watermark?.socials?.linkedin||"",placeholder:"LinkedIn ID",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,linkedin:a.target.value}}}))}),(0,t.jsx)(g.pd,{label:"YouTube",className:"text-sm",value:a?.watermark?.socials?.youtube||"",placeholder:"YouTube ID",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,youtube:a.target.value}}}))}),(0,t.jsx)(g.pd,{label:"Instagram",className:"text-sm",value:a?.watermark?.socials?.instagram||"",placeholder:"Instagram handle",onChange:a=>e(e=>({...e,watermark:{...e.watermark,active:!0,socials:{...e.watermark.socials,instagram:a.target.value}}}))})]}),(0,t.jsxs)("div",{className:"py-3 flex items-center",children:[(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)("label",{className:"flex mb-px text-sm font-semibold md:text-base dark:text-white",children:"Add icon or image"}),a?.watermark?.logo?(0,t.jsx)(g.$n,{variant:"side",className:"ml-2",onClick:a=>{a.stopPropagation(),e(e=>({...e,watermark:{...e.watermark,logo:""}}))},children:"Clear"}):""]}),(0,t.jsx)("div",{className:"ml-auto max-w-[100px] w-full",children:(0,t.jsxs)("label",{className:"py-2 w-full h-full overflow-hidden rounded-xl flex items-center justify-center text-xl dark:bg-gray-800 text-white bg-linear-to-br from-gray-600 to-gray-800 duration-100 cursor-pointer flex-col relative group dark:shadow-[rgba(0,0,0,0.2)]",style:a?.watermark?.logo?{backgroundImage:`url(${a?.watermark?.logo})`,backgroundSize:"cover",backgroundPosition:"center"}:{},htmlFor:"customBgImage",children:[a?.watermark?.logo?(0,t.jsx)("div",{className:"inset-0 w-full h-full bg-black/60 backdrop-blur rounded-xl absolute"}):"",(0,t.jsxs)("div",{className:"relative flex flex-col items-center justify-center drop-shadow",children:[(0,t.jsx)("input",{className:"hidden",id:"customBgImage",type:"file",onChange:a=>{var r=(a?.clipboardData||a?.originalEvent?.clipboardData)?.items||a?.target?.files||a?.dataTransfer?.files,t=0;for(t in r){var s=r[t];if("file"===s.kind||s?.type?.includes("image")){var l=s?.kind?s.getAsFile():s,i=new FileReader;i.onload=a=>{e(e=>({...e,watermark:{...e.watermark,active:!0,logo:a.target.result}}))},i.readAsDataURL(l)}}}}),(0,t.jsx)("span",{className:"duration-100 group-hover:scale-[1.2]",children:"+"}),(0,t.jsx)("span",{className:"text-xs text-center font-semibold leading-none",children:a?.watermark?.logo?"Change":"Add"})]})]})})]})]})]})}))]})};var P=r(96636),T=r(17942),$=r(41075);let F=({options:e,setOptions:a})=>{let{isPro:r,c_HandleNonPro:i,c_Session:n}=(0,s.useContext)(l.A),p=[{title:"Top left",set:{x:-15,y:-20},active:e?.positionX===-15&&e?.positionY===-20},{title:"Top center",set:{x:0,y:-20},active:e?.positionX===0&&e?.positionY===-20},{title:"Top right",set:{x:15,y:-20},active:e?.positionX===15&&e?.positionY===-20},{title:"Left center",set:{x:-15,y:0},active:e?.positionX===-15&&e?.positionY===0},{title:"Center",set:{x:0,y:0},active:e?.positionX===0&&e?.positionY===0},{title:"Right center",set:{x:15,y:0},active:e?.positionX===15&&e?.positionY===0},{title:"Bottom left",set:{x:-15,y:20},active:e?.positionX===-15&&e?.positionY===20},{title:"Bottom center",set:{x:0,y:20},active:e?.positionX===0&&e?.positionY===20},{title:"Bottom right",set:{x:15,y:20},active:e?.positionX===15&&e?.positionY===20}];return(0,t.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-2",children:[(0,t.jsx)("div",{children:(0,t.jsx)(g.AM,{noSpacing:!0,trigger:(0,t.jsx)(g.m_,{text:"Select custom position",children:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Position"}),(0,t.jsx)($.A,{size:15,className:"ml-[3px]"})]})}),content:(0,t.jsx)("div",{className:"p-5",children:r?(0,t.jsxs)("div",{className:"max-w-[95vw] md:max-w-[400px] w-full space-y-2",children:[(0,t.jsx)(g.Ap,{noSpacing:!0,label:(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)(P.A,{size:18,className:"mr-1"}),"X-Axis Position"]}),stepValue:e?.positionX,min:-150,max:150,value:e?.positionX,onChange:e=>{a(a=>({...a,positionX:e}))}}),(0,t.jsx)(g.Ap,{noSpacing:!0,label:(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)(T.A,{size:18,className:"mr-1"}),"Y-Axis Position"]}
1),stepValue:e?.positionY,min:-150,max:150,value:e?.positionY,onChange:e=>{a(a=>({...a,positionY:e}))}}),(0,t.jsxs)("div",{className:"grid grid-cols-2 gap-x-2 mt-5!",children:[(0,t.jsxs)(g.$n,{variant:"secondary",onClick:()=>{a(e=>({...e,positionX:0}))},children:[(0,t.jsx)(P.A,{size:14,className:"mr-1 opacity-50"}),"Reset X-Axis Position"]}),(0,t.jsxs)(g.$n,{variant:"secondary",onClick:()=>{a(e=>({...e,positionY:0}))},children:[(0,t.jsx)(T.A,{size:14,className:"mr-1 opacity-50"}),"Reset Y-Axis Position"]})]})]}):(0,t.jsxs)("div",{className:"max-w-[90vw] md:w-[400px] space-y-2 flex items-center justify-center flex-col",children:[(0,t.jsx)("div",{className:"flex flex-col w-full items-center justify-center h-full text-sm text-center opacity-60 mb-4 max-w-[90%] mx-auto",children:"Please upgrade to Pika Pro to set custom position for your screenshot"}),(0,t.jsx)(g.$n,{variant:"primary",className:"font-semibold rounded-xl",onClick:()=>{i({showModal:!0}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:n?.email?`Advanced Position Option â Signup modal(${n?.email})`:"Advanced Position Option â Signup modal"})},children:"Switch to Pro â"})]})})})}),(0,t.jsx)("div",{className:"relative grid w-12 h-12 grid-cols-3 p-1 bg-white border border-gray-200 rounded-lg dark:border-gray-700 place-content-around place-items-center aspect-square dark:bg-gray-900 shadow hover:scale-[1.4] duration-300 ease-[cubic-bezier(.75,-0.5,0,1.75)]",children:p?.map(e=>(0,t.jsx)("div",{title:e.title,className:o()("w-[8px] h-[8px] rounded-full cursor-pointer",{"bg-gray-300 hover:bg-gray-500 dark:hover:bg-gray-400 dark:bg-gray-600/50":!e.active},{"bg-linear-to-br from-gray-500 to-gray-800 ring-1 ring-gray-800 dark:from-gray-200 dark:to-gray-400 dark:ring-gray-200":e.active}),onClick:()=>{a(a=>({...a,positionX:e.set.x,positionY:e.set.y})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Basic Position Changed"})}},e.title))})]})};var q=r(29396),B=r(8557),R=r(84506),I=r(98515),D=r(15212),E=r(74954),Y=r(45609),L=r.n(Y);let M=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"absolute top-0 left-0 flex justify-around w-full",children:Array(100).fill()?.map((e,a)=>(0,t.jsx)("div",{className:"min-w-[7px]",children:(0,t.jsx)("div",{className:"w-px bg-gray-400/60 h-[3px]"})},"set-1-"+a))}),(0,t.jsx)("div",{className:"absolute bottom-0 left-0 flex justify-around w-full",children:Array(100).fill()?.map((e,a)=>(0,t.jsx)("div",{className:"min-w-[7px]",children:(0,t.jsx)("div",{className:"w-px bg-gray-400/60 h-[3px]"})},"set-2-"+a))}),(0,t.jsx)("div",{className:"absolute top-0 left-0 flex flex-col justify-around h-full",children:Array(100).fill()?.map((e,a)=>(0,t.jsx)("div",{className:"min-h-[7px]",children:(0,t.jsx)("div",{className:"w-[3px] bg-gray-400/60 h-
1px"})},"set-3-"+a))}),(0,t.jsx)("div",{className:"absolute top-0 right-0 flex flex-col justify-around h-full",children:Array(100).fill()?.map((e,a)=>(0,t.jsx)("div",{className:"min-h-[7px]",children:(0,t.jsx)("div",{className:"w-[3px] bg-gray-400/60 h-px"})},"set-4-"+a))})]}),O=({color:e})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:(0,f.A)("w-[4px] h-[4px] rounded-full shadow md:w-[4px] md:h-[4px]",e??"bg-[#EB6B5E]")}),(0,t.jsx)("div",{className:(0,f.A)("w-[4px] h-[4px] rounded-full shadow md:w-[4px] md:h-[4px]",e??"bg-[#F3BD50]")}),(0,t.jsx)("div",{className:(0,f.A)("w-[4px] h-[4px] rounded-full shadow md:w-[4px] md:h-[4px]",e??"bg-[#62C454]")})]}),X=(0,t.jsxs)("div",{className:"space-x-[7px] flex",children:[(0,t.jsx)("div",{className:"relative flex items-center leading-none",children:(0,t.jsx)(q.A,{size:7,weight:"bold"})}),(0,t.jsx)("div",{className:"relative flex items-center justify-center font-semibold",children:(0,t.jsx)(B.A,{size:7,weight:"bold"})}),(0,t.jsx)("div",{className:"relative flex items-center leading-none",children:(0,t.jsx)(d.A,{size:7,weight:"bold"})})]}),V=({options:e,setOptions:a})=>{let{isPro:r,c_HandleNonPro:i,c_Session:o}=(0,s.useContext)(l.A),n=[{title:"None",value:"none",preview:(0,t.jsx)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/30 to-white/60 w-full h-full rounded-xl",children:(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})})},{title:"Arc",value:"arc",preview:(0,t.jsx)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/30 to-white/60 p-[4px] w-full h-full rounded-xl",children:(0,t.jsx)("div",{className:"bg-white h-full w-full shadow rounded-lg flex items-center justify-center",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})})},{title:"Stack Light",value:"stack_light",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 w-full h-full rounded-xl relative z-4",children:[(0,t.jsx)("div",{className:(0,f.A)("absolute w-[88%] h-full left-[6%] top-[-4px] backdrop-blur-xl bg-white/50 rounded-lg shadow-xl z-[-1]")}),(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center shadow-[0_0_5px_rgba(0,0,0,0.2)] relative z-3",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Stack Dark",value:"stack_dark",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 w-full h-full rounded-xl relative z-4",children:[(0,t.jsx)("div",{className:(0,f.A)("absolute w-[88%] h-full left-[6%] top-[-4px] backdrop-blur-xl bg-gray-800/50 rounded-lg shadow-xl z-[-1]")}),(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center shadow-[0_0_5px_rgba(0,0,0,0.2)] relative z-3",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"macOS Light",value:"macos_light",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-gray-100 w-full h-full rounded-md relative overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-2",children:(0,t.jsx)(O,{})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"macOS Dark",value:"macos_dark",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-gray-700 w-full h-full rounded-md relative overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-2",children:(0,t.jsx)(O,{})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"macOS Subtle",value:"macos_subtle",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] w-full h-full rounded-md relative overflow-hidden bg-transparent",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-2 bg-white",children:(0,t.jsx)(O,{})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"macOS Adaptive",value:"macos_adaptive",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-gray-700/50 to-gray-700/80 w-full h-full rounded-md relative overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-2",children:(0,t.jsx)(O,{color:"bg-white/30"})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Eclipse",value:"eclipse",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 w-full h-full rounded-xl relative",children:[(0,t.jsx)("div",{className:"absolute right-[-3px] bottom-[-3px] w-full h-full bg-black/80 rounded-lg"}),(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Silver Back",value:"silverback",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-gray-200/50 to-gray-200/80 w-full h-full rounded-lg relative px-[3px] overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-1",children:(0,t.jsx)(O,{color:"bg-white/70"})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Shadow Back",value:"shadowback",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-gray-700/50 to-gray-700/80 w-full h-full rounded-lg relative px-[3px] overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center space-x-[4px] py-[4px] px-1",children:(0,t.jsx)(O,{color:"bg-white/70"})}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Windows Light",value:"win_light",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-gray-200 w-full h-full rounded-md relative overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center justify-end space-x-[4px] py-[3px] px-2 text-gray-500",children:X}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Windows Dark",value:"win_dark",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-gray-800 w-full h-full rounded-md relative overflow-hidden",children:[(0,t.jsx)("div",{className:"flex items-center justify-end space-x-[4px] py-[3px] px-2 text-gray-400",children:X}),(0,t.jsx)("div",{className:"bg-white w-full h-full rounded-b-lg flex items-center justify-center shadow relative",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Shortboard",value:"shortboard",preview:(0,t.jsx)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 w-full h-full rounded-xl relative z-4",children:(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center shadow-[0_0_5px_rgba(0,0,0,0.2)] relative z-3 border-[3px] border-gray-700 ring-[1px] ring-white/40",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})})},{title:"Ruler",value:"ruler",preview:(0,t.jsxs)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 p-[4px] w-full h-full rounded-xl relative overflow-hidden",children:[M,(0,t.jsx)("div",{className:"bg-white h-full w-full shadow rounded-lg flex items-center justify-center ",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})]})},{title:"Emotion",value:"emotion",preview:(0,t.jsx)("div",{className:"shadow-[0_0_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] ease-[cubic-bezier(.75,-0.5,0,1.75)] bg-linear-to-br from-white/80 to-white/80 w-full h-full rounded-xl relative",children:(0,t.jsx)("div",{className:"bg-white h-full w-full rounded-lg flex items-center justify-center shadow-[3px_3px_rgba(0,0,0,0.2),5px_5px_rgba(0,0,0,0.1),7px_7px_rgba(0,0,0,0.06)]",children:(0,t.jsx)(R.A,{size:16,className:"opacity-[0.05] dark:opacity-40"})})})}];return(0,t.jsx)(g.AM,{noSpacing:!0,trigger:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center px-4 py-4 hover:bg-gray-50 dark:hover:bg-[#222] w-full",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Frame"}),n?.filter(a=>a?.value===e?.browserFrame)?.length?(0,t.jsx)(g.$n,{className:"ml-3",variant:"side",children:n?.filter(a=>a?.value===e?.browserFrame)[0]?.title}):"",(0,t.jsx)("div",{className:"flex ml-auto",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]}),content:(0,t.jsxs)("div",{className:"max-w-[95vw] md:max-w-[520px] w-full max-h-[400px] overflow-hidden rounded-xl",children:[(0,t.jsxs)("div",{className:"bg-white/70 z-20 px-2 flex py-2 text-xs dar
1k:bg-gray-800/40 backdrop-blur-md text-gray-500 dark:text-gray-400 border-b dark:border-gray-700",children:[(0,t.jsxs)("h3",{className:"flex items-center",children:[(0,t.jsx)(I.A,{size:16,className:"mr-2"}),"Select screenshot frame"]}),r?"":(0,t.jsxs)("div",{className:"ml-2 opacity-60",children:["(",(0,t.jsx)(L(),{href:"/articles/browser-device-frames",children:(0,t.jsx)("span",{className:"hover:underline cursor-pointer",children:"Preview all frames"})}),")"]})]}),(0,t.jsxs)("div",{className:"overflow-y-auto overscroll-none h-[365px]",children:[(0,t.jsxs)("div",{className:"px-4 mt-4 flex items-center space-x-3",children:[(0,t.jsx)(g.pd,{placeholder:"Enter URL to show in frame",className:"text-sm",value:e?.frameURL,onChange:e=>{a(a=>({...a,frameURL:e.target.value}))}}),(0,t.jsx)(g.$n,{variant:"secondary",className:"h-[34px]",onClick:()=>a(e=>({...e,frameURL:""})),children:"Clear"})]}),(0,t.jsx)("div",{className:"grid grid-cols-3 md:grid-cols-4 gap-5 px-4 py-4",children:n?.map(s=>(0,t.jsx)(g.$n,{className:"relative group",onClick:()=>{if(!r&&s?.pro){i({text:"Please upgrade to Pro to use this frame"}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:o?.email?`Browser Frame Option â Signup modal(${o?.email})`:"Browser Frame Option â Signup modal"});return}a(e=>({...e,browserFrame:s.value}))},children:(0,t.jsx)("div",{children:(0,t.jsxs)(t.Fragment,{children:[s.value===e?.browserFrame?(0,t.jsx)("div",{className:"w-4 h-4 rounded-full flex items-center justify-center absolute top-[-6px] right-[-6px] bg-pink-100 dark:bg-pink-500 border border-pink-300 z-10 text-pink-500 dark:text-pink-100 dark:border-pink-400",children:(0,t.jsx)(D.A,{size:12,weight:"bold"})}):"",(0,t.jsx)("div",{className:(0,f.A)("w-full aspect-1.25/1 border bg-linear-to-br rounded-xl flex items-center justify-center overflow-hidden flex-col p-[12px] group duration-150",s?.value==e?.browserFrame?"border-pink-400 from-pink-200 to-red-200 dark:from-pink-500 dark:to-red-400":"border-gray-200 dark:border-gray-600 hover:border-pink-400 dark:hover:border-pink-500 from-gray-200 via-gray-100 to-gray-200 dark:from-gray-600 dark:to-gray-700"),children:s?.preview}),(0,t.jsxs)("div",{className:(0,f.A)("text-[0.7rem] flex items-center justify-center rounded-full mt-1 duration-150",s?.value==e?.browserFrame?"":"opacity-70 dark:opacity-70 group-hover:opacity-100"),children:[s?.pro&&!r?(0,t.jsx)(m.A,{size:14,className:"mr-1"}):"",s.title]})]})})},s.value))}),(0,t.jsxs)("div",{className:"text-xs w-full font-code opacity-40 border-t border-gray-300 dark:border-gray-700 py-4 px-4 flex items-center",children:[(0,t.jsx)(E.A,{size:20,className:"flex flex-none"}),(0,t.jsx)("div",{className:"pl-3",children:"Some frames might look tad bit different in Safari because of some browser limitations, for best results use any non-Safari browser"})]})]})]})})};var G=r(42443);let U=({options:e,setOptions:a,hideSizes:r=[],label:s}={})=>(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(g.AM,{noSpacing:!0,asModal:!1,trigger:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center px-4 py-4 hover:bg-gray-50 dark:hover:bg-[#222] w-full",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Canvas Size"}),(0,t.jsx)(g.$n,{className:"ml-2",variant:"side",children:e?.canvasAspectRatio?.name??"Auto"}),(0,t.jsx)("div",{className:"flex ml-auto",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]}),content:(0,t.jsxs)("div",{className:"max-w-[95vw] md:max-w-[500px] w-full rounded-xl overflow-hidden overscroll-none pb-3",children:[(0,t.jsx)("div",{className:"bg-white/70 z-20 px-2 flex py-2 text-xs dark:bg-gray-800/40 backdrop-blur-md text-gray-500 dark:text-gray-400 border-b dark:border-gray-700 rounded-t-xl",children:(0,t.jsxs)("h3",{className:"flex items-center",children:[(0,t.jsx)(G.A,{size:16,className:"mr-2"}),s??"Select Canvas size"]})}),(0,t.jsx)("div",{className:"flex flex-wrap gap-3 max-h-[300px] overscroll-none h-full w-full px-3 py-4",children:[{name:"Auto",value:"auto",key:"aspect-auto"},{name:"YouTube Thumbnail",value:"1280 / 720",key:"aspect-youtube-thumbnail",icon:"/size-icons/youtube.png"},{name:"Tweet",key:"aspect-tweet-post",value:"1 / 0.875",icon:"/size-icons/twitter.png"},{name:"Insta Post",value:"4 / 5",key:"aspect-insta-post",icon:"/size-icons/instagram.png"},{name:"Insta Story",value:"9 / 16",key:"aspect-insta-story",icon:"/size-icons/instagram.png"},{name:"Dribbble",value:"1.3 / 1",key:"aspect-dribbble",icon:"/size-icons/dribbble.png"}
1,{name:"App Store(6.5 inch)",value:"0.4622030238",key:"aspect-app-store",icon:"/size-icons/app-store.png"},{name:"App Store(5.8 inch)",value:"0.4620853081",key:"aspect-app-store-5-8",icon:"/size-icons/app-store.png"},{name:"App Store(5.5 inch)",value:"0.5625",key:"aspect-app-store-5-5",icon:"/size-icons/app-store.png"},{name:"App Store(4.7 inch)",value:"0.5622188906",key:"aspect-app-store-4-7",icon:"/size-icons/app-store.png"},{name:"Product Hunt",value:"1.67 / 1",key:"aspect-ph",icon:"/size-icons/ph.png"},{name:"Pinterest Pin",value:"2 / 3",key:"aspect-pinterest",icon:"/size-icons/pinterest.png"},{name:"LinkedIn Post",value:"1.91 / 1",key:"aspect-linkedin",icon:"/size-icons/linkedin.png"},{name:"Chrome Extension Store Image",value:"1.6 / 1",key:"aspect-chrome-store",icon:"/size-icons/google-chrome.png"},{name:"Adapt screenshot",value:"1 / 1",key:"aspect-adapt"},{name:"Open Graph",value:"1.90476190 / 1",key:"aspect-og"},{name:"Square (1:1)",value:"1 / 1",key:"aspect-square"},{name:"Wide (16:9)",value:"16 / 9",key:"aspect-widescreen"}].map(s=>r.includes(s.key)?"":(0,t.jsxs)(g.$n,{onClick:()=>{(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:`Canvas Size â ${s.name}`}),a(s)},className:o()("snap-center whitespace-nowrap cursor-pointer flex-none px-3 py-2 text-[0.8rem] text-center border rounded-xl flex items-center justify-center relative",{"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":s.key!=e?.canvasAspectRatio?.key},{"bg-pink-100 text-pink-500 border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400":s.key===e?.canvasAspectRatio?.key}),children:[s.icon?(0,t.jsx)("div",{className:"mr-2 w-[18px] h-[18px] shadow rounded-full flex-none",children:(0,t.jsx)("img",{src:s.icon,className:"rounded-md",alt:s?.name,width:"32",height:"32"})}):"",s.name]},s.name))})]})})});var W=r(38920);let H=({options:e,setOptions:a})=>{let r=e?.imageTilt?.angleX!=0||e?.imageTilt?.angleY!=0,s=e=>{a({angleX:(e.y??0)*16,angleY:(e.x??0)*16})};return(0,t.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-[6px]",children:[(0,t.jsxs)("div",{className:"flex text-sm font-semibold dark:text-gray-200 items-center",children:["Tilt",(0,t.jsx)("div",{className:"group mx-2 relative hidden lg:flex items-center justify-center hover:z-1",children:(0,t.jsx)(g.m_,{text:(0,t.jsxs)("div",{className:"max-w-[200px]",children:[(0,t.jsx)("strong",{children:"Hold and move the Joystick"})," to tilt the screenshot.",(0,t.jsx)("br",{}),(0,t.jsx)("br",{}),(0,t.jsx)("strong",{children:"For best results"}),", use Chrome, Edge or other Chromium based browsers."]}),children:(0,t.jsx)("span",{className:"text-xs opacity-40 cursor-help w-4 h-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 rounded-full",children:"?"})})}),r?(0,t.jsx)(g.m_,{text:"Reset tilt",children:(0,t.jsx)(g.$n,{as:"div",variant:"side",className:"ml-1",onClick:()=>{a({angleX:0,angleY:0})},children:"Reset"})}):""]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:"dark:hidden border-gray-200 duration-100 hover:scale-[1.1] border shadow-xl rounded-full",children:(0,t.jsx)(W.ZN,{size:32,stickColor:"linear-gradient(to bottom right, #737373, #262626)",baseColor:"#fff",move:s})}),(0,t.jsx)("div",{className:"dark:block hidden border-gray-900 duration-100 hover:scale-[1.1] border shadow-xl shadow-black/400 rounded-full",children:(0,t.jsx)(W.ZN,{size:32,stickColor:"linear-gradient(to bottom right, #e5e5e5, #a3a3a3)",baseColor:"#444",move:s})})]})]})};var Z=r(81417);let Q=({options:e,setOptions:a})=>{let{isPro:r,c_Session:i,c_OpenPricing:o}=(0,s.useContext)(l.A),n=["arc","ruler","emotion","eclipse"],p=({text:e})=>{if(b.oR.error((0,t.jsx)("div",{className:"flex items-center",children:(0,t.jsx)("div",{children:e||"Please upgrade to Pro to use this feature"})})),!i||!r)return void o({newTab:!0})};return(0,t.jsx)(g.AM,{noSpacing:!0,trigger:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center px-4 py-4 hover:bg-gray-50 dark:hover:bg-[#222] w-full",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Frame"}),(0,t.jsx)(g.$n,{className:"ml-3",variant:"side",children:e?.mobileFrame?.title}),(0,t.jsx)("div",{className:"flex ml-auto",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]}),content:(0,t.jsxs)("div",{className:"max-w-[95vw] md:w-[380px] w-full max-h-[400px] overflow-hidden rounded-xl",children:[(0,t.jsx)("div",{className:"bg-white/70 z-20 px-2 flex py-2 text-xs dar
1k:bg-gray-800/40 backdrop-blur-md text-gray-500 dark:text-gray-400 border-b dark:border-gray-700",children:(0,t.jsxs)("h3",{className:"flex items-center",children:[(0,t.jsx)(I.A,{size:16,className:"mr-2"}),"Select mobile frame"]})}),(0,t.jsx)("div",{className:"overflow-y-auto overscroll-none py-4 px-4",children:[{title:"None",value:"none"},{title:"iPhone 14",variants:[{variantName:"Red",title:"iPhone 14 / Red",value:"iphone-14-red"},{variantName:"Starlight",title:"iPhone 14 / Starlight",value:"iphone-14-starlight"},{variantName:"Midnight",title:"iPhone 14 / Midnight",value:"iphone-14-midnight"},{variantName:"Purple",title:"iPhone 14 / Purple",value:"iphone-14-purple"},{variantName:"Blue",title:"iPhone 14 / Blue",value:"iphone-14-blue"}]},{title:"iPhone 14 Pro",variants:[{variantName:"Silver",title:"iPhone 14 Pro / Silver",value:"iphone-14-pro-silver"},{variantName:"Gold",title:"iPhone 14 Pro / Gold",value:"iphone-14-pro-gold"},{variantName:"Purple",title:"iPhone 14 Pro / Purple",value:"iphone-14-pro-purple"},{variantName:"Black",title:"iPhone 14 Pro / Black",value:"iphone-14-pro-black"}]},{title:"Google Pixel",variants:[{variantName:"Dark",title:"Pixel 5",value:"google-pixel-5-dark"}]}].map(s=>(0,t.jsx)("div",{className:"mb-4 last:mb-0",children:s?.variants?.length?(0,t.jsxs)("div",{className:"",children:[(0,t.jsxs)("h3",{className:"font-semibold mb-2 text-sm flex items-center",children:[(0,t.jsx)(Z.A,{size:15,className:"mr-1"}),s?.title]}),(0,t.jsx)("div",{className:"grid grid-cols-4 gap-2",children:s?.variants?.map(s=>(0,t.jsx)(g.$n,{className:(0,f.A)("snap-center whitespace-nowrap cursor-pointer flex-none px-2 py-2 text-[0.8rem] text-center border rounded-xl flex items-center justify-center relative",s.value!=e?.mobileFrame?.value?"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":"bg-pink-100 text-pink-500 border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400"),onClick:()=>{!r&&n?.includes(s.value)?p({text:"Please upgrade to Pro to use this frame"}):(a(s),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:`Mobile Frame Selected â ${s.value}`}))},children:s?.variantName},s.value))})]}):(0,t.jsx)("div",{className:"grid grid-cols-4 gap-2",children:(0,t.jsx)(g.$n,{className:(0,f.A)("snap-center whitespace-nowrap cursor-pointer flex-none px-2 py-2 text-[0.8rem] text-center border rounded-xl flex items-center justify-center relative",s.value!=e?.mobileFrame?.value?"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":"bg-pink-100 text-pink-500 border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400"),onClick:()=>{!r&&n?.includes(s.value)?p({text:"Please upgrade to Pro to use this frame"}):(a(s),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:`Mobile Frame Selected â ${s.value}`}))},children:s?.title},s.value)})},s?.title))})]})})},J=({options:e,setOptions:a})=>{let r=(0,s.useRef)(null),{isPro:i,c_HandleNonPro:o,c_Session:n}=(0,s.useContext)(l.A),[p,c]=(0,s.useState)(null);return((0,s.useEffect)(()=>{c(/^((?!chrome|android).)*safari/i.test(navigator?.userAgent))},[]),p)?(0,t.jsx)(g.Ap,{label:"Shadow",min:0,max:10,stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>a(a=>({...a,customShadow:{...a.customShadow,active:!1},imageShadow:e}))}):(0,t.jsxs)("div",{className:"w-full px-4 py-2 flex items-center justify-between",children:[(0,t.jsx)(g.AM,{noSpacing:!0,trigger:(0,t.jsx)(g.m_,{text:"Customize shadow intensity, color and more",show:!p,children:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Shadow"}),(0,t.jsx)($.A,{size:15,className:"ml-[3px]"}),parseInt(e?.imageShadow)?(0,t.jsx)(g.$n,{variant:"side",as:"div",className:"ml-2",children:(0,t.jsx)("span",{className:"font-mono",children:e?.imageShadow})}):""]})}),content:(0,t.jsx)("div",{className:"p-5",children:i?(0,t.jsxs)("div",{className:"max-w-[90vw] md:w-[320px] space-y-2 max-h-[250px] md:max-h-full overflow-auto z-12 relative",children:[(0,t.jsxs)("div",{className:"grid grid-cols-2",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200",children:"Enable"}),(0,t.jsx)(g.dO,{value:e?.customShadow?.active,onChange:()=>{a(e=>({...e,customShadow:{...e.customShadow,active:!e?.customShadow?.active}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Custom Shadow Toggled"})}})]}),(0,t.jsx)(g.Ap,{noSpacing:!0,label:(0,t.jsxs)("div",{className:"flex items-center space-x-2",children:["X-offset",(0,t.jsx)(g.$n,{variant:"side",className:"ml-2 cursor-pointer!",onClick:()=>a(e=>({...e,customShadow:{...e.customShadow,x:0}})),children:"Reset"})]}),name:"X-offset",min:-100,max:100,steps:1,value:e?.customShadow?.x,onChange:e=>{a(a=>({...a,customShadow:{...a.customShadow,x:e}}))}}),(0,t.jsx)(g.Ap,{noSpacing:!0,min:-100,max:100,steps:1,name:"Y-offset",label:(0,t.jsxs)("div",{className:"flex items-center space-x-2",children:["Y-offset",(0,t.jsx)(g.$n,{variant:"side",className:"ml-2 cursor-pointer!",onClick:()=>a(e=>({...e,customShadow:{...e.customShadow,y:0}})),children:"Reset"})]}),value:e?.customShadow?.y,onChange:e=>a(a=>({...a,customShadow:{...a.customShadow,y:e}}))}),(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:100,steps:1,name:"Blur",label:(0,t.jsxs)("div",{className:"flex items-center space-x-2",children:["Blur",(0,t.jsx)(g.$n,{variant:"side",className:"ml-2 cursor-pointer!",onClick:()=>a(e=>({...e,customShadow:{...e.customShadow,blur:0}})),children:"Reset"})]}),value:e?.customShadow?.blur,onChange:e=>a(a=>({...a,customShadow:{...a.customShadow,blur:e}}))}),(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:100,steps:1,name:"Spread",label:(0,t.jsxs)("div",{className:"flex items-center space-x-2",children:["Spread",(0,t.jsx)(g.$n,{variant:"side",className:"ml-2 cursor-pointer!",onClick:()=>a(e=>({...e,customShadow:{...e.customShadow,spread:0}})),children:"Reset"})]}),value:e?.customShadow?.spread,onChange:e=>a(a=>({...a,customShadow:{...a.customShadow,spread:e}}))}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-1",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200",children:"Shadow color"}),(0,t.jsx)("div",{className:"inline-flex max-w-[50%] w-full",children:(0,t.jsx)(g.sk,{value:e?.customShadow?.color,onChange:e=>a(a=>({...a,customShadow:{...a.customShadow,color:e}}))})})]})]}):(0,t.jsxs)("div",{className:"max-w-[90vw] md:w-[320px] space-y-2 flex items-center justify-center flex-col",children:[(0,t.jsx)("div",{className:"flex flex-col w-full items-center justify-center h-full text-sm text-center opacity-60 mb-4 max-w-[90%] mx-auto",children:"Please upgrade to Pika Pro to set custom position for your screenshot"}),(0,t.jsx)(g.$n,{variant:"primary",className:"font-semibold",onClick:()=>{o({showModal:!0}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:n?.email?`Advanced Shadow Option â Signup modal(${n?.email})`:"Advanced Shadow Option â Signup modal"})},children:"Switch to Pro â"})]})})}),(0,t.jsx)("div",{className:"w-full max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:0,max:10,value:e?.imageShadow,onChange:e=>{a(a=>({...a,customShadow:{...a.customShadow,active:!1},imageShadow:e})),clearTimeout(r.current),r.current=setTimeout(()=>{(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Basic Shadow Changed"})},2500)}})})]})};var K=r(80998);let ee=({options:e,setOptions:a})=>{let{isPro:r,c_HandleNonPro:i,c_Session:o}=(0,s.useContext)(l.A),n=e?.pattern?.value=="waves"||e?.pattern?.value=="confetti"||e?.pattern?.value=="harmony"||e?.pattern?.value=="sight"||e?.pattern?.value=="chimes"||e?.pattern?.value=="dots",p=e?.pattern?.value=="gridLines"||e?.pattern?.value=="atmosphere",h=e?.pattern?.value=="circles"||e?.pattern?.value=="diamond"||e?.pattern?.value=="mixedShapes";return(0,t.jsx)(g.AM,{noSpacing:!0,trigger:(0,t.jsxs)("div",{className:"cursor-pointer flex items-center px-4 py-4 hover:bg-gray-50 dark:hover:bg-[#222] w-full",children:[(0,t.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200",children:"Pattern"}),(0,t.jsx)(g.$n,{className:"ml-2",variant:"side",children:e?.pattern?.name}),(0,t.jsx)("div",{className:"flex ml-auto",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]}),content:(0,t.jsxs)("div",{className:"w-[95vw] md:w-[520px] rounded-xl overflow-hidden overscroll-none",children:[(0,t.jsx)("div",{className:"bg-white/70 z-20 px-2 flex py-2 text-xs dar
1k:bg-gray-800/40 backdrop-blur-md text-gray-500 dark:text-gray-400 border-b dark:border-gray-700",children:(0,t.jsxs)("h3",{className:"flex items-center",children:[(0,t.jsx)(K.A,{size:16,className:"mr-2"}),"Customize background pattern",(0,t.jsx)(g.$n,{className:"ml-2 text-xs",target:"_blank",as:"a",href:"/articles/using-patterns",variant:"secondary",children:"Learn more â"})]})}),(0,t.jsxs)("div",{className:"grid grid-cols-[120px_calc(100vw-150px)] md:grid-cols-[160px_360px] max-h-[300px] overscroll-none h-full w-full",children:[(0,t.jsx)("div",{className:"flex flex-col dark:border-gray-700/80 border-r border-gray-200 max-h-[300px] overflow-y-auto overscroll-none px-2 py-2 bg-linear-to-br from-red-300/20 to-yellow-100/10 dark:from-gray-800/70 dark:to-gray-900 space-y-2",children:[{title:"None",value:"none"},{title:"Circles",value:"circles",pro:!1},{title:"Waves",value:"waves",pro:!1},{title:"Dots",value:"dots",pro:!1},{title:"Harmony",value:"harmony",pro:!1},{title:"Grid",value:"gridLines",pro:!1},{title:"Sight",value:"sight",pro:!1},{title:"Chimes",value:"chimes",pro:!1},{title:"Diamonds",value:"diamond",pro:!1},{title:"Mixed Shapes",value:"mixedShapes",pro:!1},{title:"Atmosphere",value:"atmosphere",pro:!1},{title:"Confetti",value:"confetti",pro:!1}].map(s=>(0,t.jsx)(g.$n,{className:"relative group",onClick:()=>{if(!r&&s?.pro){i({text:"Please upgrade to Pro to use this pattern"}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:o?.email?`Pattern Option â Signup modal(${o?.email})`:"Pattern Option â Signup modal"});return}a(e=>({...e,pattern:{...e.pattern,value:s.value,name:s.title}})),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:`Pattern â ${s?.title}`})},children:(0,t.jsx)(g.T8,{type:"custom",initial:{opacity:0,scale:.6},animate:{opacity:1,scale:1,transition:{duration:.08}},children:(0,t.jsxs)("div",{className:(0,f.A)("text-xs md:text-sm px-3 py-2 flex items-center duration-150 rounded-full",s?.value==e?.pattern?.value?"bg-white dark:bg-gray-700 dark:text-white shadow dark:shadow-black/20 font-semibold":"opacity-60 dark:opacity-70 group-hover:opacity-100"),children:[!r&&s?.pro&&"None"!==s.title?(0,t.jsx)(m.A,{size:12,weight:"bold",className:"inline-flex mr-1"}):"",(0,t.jsx)("span",{children:s.title})]})})},s.value))}),(0,t.jsx)("div",{className:"w-full max-h-[300px] min-w-[320px] overscroll-none overflow-y-auto",children:e?.pattern?.value==="none"?(0,t.jsxs)("div",{className:"flex flex-col w-full items-center justify-center p-5 h-full text-sm text-center",children:[(0,t.jsx)("p",{className:"opacity-60",children:"Gradient backgrounds look cool, mixing it with a Pattern will make your screenshot stand out and look more professional"}),(0,t.jsx)("br",{}),(0,t.jsxs)("p",{children:["Get started"," ",(0,t.jsx)("span",{className:"opacity-60",children:"by selecting a Pattern from the left, Patterns are also saved in your Presets"})]}),(0,t.jsx)("br",{}),(0,t.jsx)("p",{children:(0,t.jsxs)(L(),{href:"/articles/using-patterns",children:[(0,t.jsx)("span",{className:"hover:underline cursor-pointer",children:"Learn more about Patterns"}),"â"]})})]}):(0,t.jsxs)("div",{className:"space-y-3 px-5 py-5 w-full",children:[p?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(g.Ap,{noSpacing:!0,min:2,max:32,label:"Intensity",defaultValue:5,value:e?.pattern?.linesIntensity,stepValue:e?.pattern?.linesIntensity,onChange:e=>a(a=>({...a,pattern:{...a.pattern,linesIntensity:e}}))}),(0,t.jsx)("div",{children:(0,t.jsx)(g.s3,{items:[{value:"#ffffff",content:"Light"},{value:"#111111",content:"Dark"}],label:"Color",value:e?.pattern?.gridColor,onChange:e=>a(a=>({...a,pattern:{...a.pattern,gridColor:e}}))})})]}):"",n?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:100,label:"Intensity",defaultValue:100,value:e?.pattern?.patternIntensity,stepValue:e?.pattern?.patternIntensity,onChange:e=>a(a=>({...a,pattern:{...a.pattern,patternIntensity:e}}))}),(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:360,label:"Rotation",defaultValue:0,value:e?.pattern?.patternRotation,stepValue:e?.pattern?.patternRotation,onChange:e=>a(a=>({...a,pattern:{...a.pattern,patternRotation:e}}))})]}):"",(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:100,label:"Opacity",defaultValue:50,value:e?.pattern?.opacity,stepValue:e?.pattern?.opacity,onChange:e=>a(a=>({...a,pattern:{...a.pattern,opacity:e}}))}),h?(0,t.jsx)(g.Ap,{noSpacing:!0,min:10,max:150,label:"Shapes size",defaultValue:100,stepValue:e?.pattern?.shapeSize,value:e?.pattern?.shapeSize,onChange:e=>a(a=>({...a,pattern:{...a.pattern,shapeSize:e}}))}):"",(0,t.jsx)(g.Ap,{noSpacing:!0,min:0,max:200,label:"Blur",defaultValue:50,stepValue:e?.pattern?.blur,value:e?.pattern?.blur,onChange:e=>a(a=>({...a,pattern:{...a.pattern,blur:e}}))}),(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center whitespace-nowrap",children:"Blending"}),(0,t.jsx)("div",{className:"max-w-[50%] w-full",children:(0,t.jsx)(g.l
16,{inputClassName:"text-sm",options:[{value:"normal",title:"Normal"},{value:"overlay",title:"Overlay"},{value:"luminosity",title:"Luminosity"},{value:"screen",title:"Screen"},{value:"darken",title:"Darken"}],value:e?.pattern?.blending,onChange:e=>a(a=>({...a,pattern:{...a.pattern,blending:e.target.value}}))})})]}),h?(0,t.jsxs)("div",{className:"grid gap-2 grid-cols-1 md:grid-cols-2 md:gap-4 mt-5!",children:[(0,t.jsx)(g.$n,{variant:"secondary",onClick:()=>a(e=>({...e,pattern:{...e.pattern,colors:(0,x.fN)(0,20)}})),disabled:!h,children:"Randomize colors"}),(0,t.jsx)(g.$n,{disabled:!h,variant:"secondary",onClick:()=>a(e=>({...e,pattern:{...e.pattern,positions:e.pattern.positions+1>2?0:e.pattern.positions+1||0}})),children:"Randomize positions"})]}):""]})})]})]})})};var ea=r(12350),er=r(34023),et=r(85994),es=r(31605);function el({options:e,setOptions:a,label:r}){let{isPro:i,c_HandleNonPro:o,c_Session:n}=(0,s.useContext)(l.A),[p,h]=(0,s.useState)(!1),d=[{key:"top",title:"Show text on top",icon:(0,t.jsx)(ea.A,{size:24}),show:!0},{key:"bottom",title:"Show text on bottom",icon:(0,t.jsx)(er.A,{size:24}),show:!0},{key:"left",title:"Show text on left",icon:(0,t.jsx)(et.A,{size:24}),show:!0},{key:"right",title:"Show text on right",icon:(0,t.jsx)(es.A,{size:24}),show:!0}];return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:(0,f.A)("w-full px-4 py-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-[#222]"),onClick:()=>{if(!i){o({text:"Upgrade to Pro to add text on your screenshot"}),(0,x.u4)({event:"\uD83E\uDD16 Flow",meta:n?.email?`Custom text option â Signup modal(${n?.email})`:"Custom text option â Signup modal"});return}h(!0)},children:(0,t.jsxs)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white",children:[i?"":(0,t.jsx)(m.A,{size:15,className:"mr-1 opacity-40"}),r||(e?.imageText?.active?"Edit Text":"Add Text"),i?(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(g.$n,{variant:"side",onClick:r=>{r.stopPropagation(),a({active:!e?.imageText?.active})},className:"ml-2",children:e?.imageText?.active?"Hide":"Show"})}):"",(0,t.jsx)("div",{className:"flex ml-auto",children:(0,t.jsx)("div",{className:"opacity-60 dark:text-gray-300 group-hover:opacity-100",children:(0,t.jsx)(c.A,{size:16})})})]})}),(0,t.jsx)(g.Zv,{show:p,children:(0,t.jsxs)("div",{className:"p-4 bg-white/90 backdrop-blur duration-200 dark:bg-gray-900/90 rounded-2xl border-gray-300 w-full shadow-xl border overflow-y-auto max-h-full dark:border-gray-800 h-full",children:[(0,t.jsx)(g.QM,{title:"Add text",onBack:()=>h(!1)}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)("div",{className:"flex justify-start py-2",children:(0,t.jsx)(g.Sc,{checked:e?.imageText?.active||!1,id:"toggleText",label:"Show Text",onChange:()=>{a({active:!e?.imageText?.active}),(0,x.u4)({event:"\uD83D\uDC7B Feature",meta:"Custom Text Toggled"})}})}),(0,t.jsxs)("div",{className:"w-full items-center py-1 flex",children:[(0,t.jsx)("div",{className:"relative font-semibold dark:text-white",children:"Add icon or logo"}),(0,t.jsx)("div",{className:"flex items-center space-x-4 ml-auto py-1",children:(0,t.jsx)(g.m_,{text:`${e?.imageText?.logo?"Replace":"Add"} logo`,children:(0,t.jsx)(z,{image:e?.imageText?.logo,setImage:e=>a({active:!0,logo:e}),id:"logoImage"})})})]}),e?.imageText?.logo?(0,t.jsxs)("div",{className:"flex items-center justify-between w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"Icon Size"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:30,max:100,defaultValue:90,value:e?.imageText?.iconSize,onChange:e=>{a({active:!0,iconSize:e})}})})]}):"",(0,t.jsx)(g.TM,{label:"Title",value:e?.imageText?.title||"",placeholder:"Enter title",onChange:e=>a({active:!0,title:e.target.value})}),(0,t.jsx)(g.TM,{label:"Subtext",value:e?.imageText?.subTitle||"",placeholder:"Enter subtitle",onChange:e=>a({active:!0,subTitle:e.target.value})}),(0,t.jsxs)("div",{className:"flex items-center my-5",children:[(0,t.jsx)("div",{className:"relative flex items-center text-sm font-semibold dark:text-white",children:"Text Color"}),(0,t.jsx)("div",{className:"ml-auto flex items-center space-x-4",children:(0,t.jsx)(g.sk,{value:e?.imageText?.textColor||"#111",onChange:e=>{a({textColor:e})},trigger:(0,t.jsx)("div",{className:"p-[2px] border border-gray-300 dark:border-white/30 rounded-[10px] cursor-pointer hover:border-gray-600 dark:hover:border-white/60",children:(0,t.jsx)("div",{className:"w-8 h-8 rounded-[8px]",style:{backgroundColor:`${e?.imageText?.textColor||"#111"}`}})})})})]}),(0,t.jsxs)("div",{className:"w-full items-center py-1 flex",children:[(0,t.jsx)("div",{className:"text-sm relative font-semibold dark:text-white",children:"Text Alignment"}),(0,t.jsx)("div",{className:"flex items-center space-x-4 ml-auto py-1",children:(0,t.jsx)(g.s3,{items:[{value:"left",content:"Left"},{value:"center",content:"Center"},{value:"right",content:"Right"}],value:e?.imageText?.textAlignment,onChange:e=>a({textAlignment:e})})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-1 w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"Text Size"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:0,max:9,defaultValue:3,value:e?.imageText?.size,onChange:e=>{a({size:e})}})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-1 w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"Line-height"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:.2,max:3.2,steps:.1,defaultValue:1.1,value:e?.imageText?.lineHeight,onChange:e=>{a({lineHeight:e})}})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-1 w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"Text width"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:10,max:100,defaultValue:100,value:e?.imageText?.textWidth,onChange:e=>{a({textWidth:e})}})})]}),(0,t.jsxs)("div",{className:"flex items-center py-2",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white",children:"Text Position"}),(0,t.jsx)("div",{className:"grid grid-cols-4 gap-x-2 max-w-[70%] ml-auto",children:d?.map(r=>(0,t.jsx)(g.m_,{text:r.title,children:(0,t.jsx)("div",{onClick:()=>{a({position:r.key})},className:(0,f.A)("relative w-8 h-8 rounded-lg cursor-pointer flex items-center justify-center",e?.imageText?.position===r.key?"bg-linear-to-br from-gray-500 to-gray-800 ring-1 ring-gray-800 dark:from-gray-200 dark:to-gray-400 dark:ring-gray-200 text-white dark:text-black":"border border-gray-400 bg-white dark:bg-gray-800 dark:border-gray-600 hover:border-gray-600 dark:hover:border-gray-500 text-gray-400 dark:text-gray-500"),children:r.icon})},r.key))})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-2 w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"X-Axis Position"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:-500,max:500,defaultValue:0,value:e?.imageText?.positionX||0,onChange:e=>{a({positionX:e})}})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between py-2 w-full",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-white whitespace-nowrap",children:"Y-Axis Position"}),(0,t.jsx)("div",{className:"flex w-full justify-end max-w-[50%]",children:(0,t.jsx)(g.Ap,{min:-500,max:550,defaultValue:0,value:e?.imageText?.positionY||0,onChange:e=>{a({positionY:e})}})})]})]}),(0,t.jsxs)("div",{className:"grid grid-cols-2 mt-4 gap-x-3 text-sm",children:[(0,t.jsx)(g.m_,{text:"Reset custom X-Axis and Y-Axis positions",children:(0,t.jsx)(g.$n,{variant:"secondary",className:"w-full",onClick:()=>{a({positionX:0,positionY:0})},children:"Reset Axis Position"})}),(0,t.jsx)(g.$n,{variant:"secondary",className:"w-full",onClick:()=>{a({title:null,subTitle:null,logo:null,size:3,position:"top"}),h(!1)},children:"Clear text"})]}),(0,t.jsx)("div",{className:"p-2 opacity-50 mt-2 text-sm",children:"If you can't see text in the canvas, it could be outside the canvas, try playing with X-Axis and Y-Axis positions"})]})})]})}let ei=["ph-address-book","ph-airplane-in-flight","ph-airplane-landing","ph-airplane-takeoff","ph-airplane","ph-airplane-tilt","ph-airplay","ph-air-traffic-control","ph-alarm","ph-alien","ph-align-bottom-simple","ph-align-bottom","ph-align-center-horizontal-simple","ph-align-center-horizontal","ph-align-center-vertical-simple","ph-align-center-vertical","ph-align-left-simple","ph-align-left","ph-align-right-simple","ph-align-right","ph-align-top-simple","ph-align-top","ph-amazon-logo","ph-anchor-simple","ph-anchor","ph-android-logo","ph-angular-logo","ph-aperture","ph-apple-logo","ph-apple-podcasts-logo","ph-app-store-logo","ph-app-window","ph-archive-box","ph-archive","ph-archive-tray","ph-armchair","ph-arrow-arc-left","ph-arrow-arc-right","ph-arrow-bend-double-up-left","ph-arrow-bend-double-up-right","ph-arrow-bend-down-left","ph-arrow-bend-down-right","ph-arrow-bend-left-down","ph-arrow-bend-left-up","ph-arrow-bend-right-down","ph-arrow-bend-right-up","ph-arrow-bend-up-left","ph-arrow-bend-up-right","ph-arrow-circle-down-left","ph-arrow-circle-down-right","ph-arrow-circle-down","ph-arrow-circle-left","ph-arrow-circle-right","ph-arrow-circle-up-left","ph-arrow-circle-up-right","ph-arrow-circle-up","ph-arrow-clockwise","ph-arrow-counter-clockwise","ph-arrow-down-left","ph-arrow-down-right","ph-arrow-down","ph-arrow-elbow-down-left","ph-arrow-elbow-down-right","ph-arrow-elbow-left-down","ph-arrow-elbow-left","ph-arrow-elbow-left-up","ph-arrow-elbow-right-down","ph-arrow-elbow-right","ph-arrow-elbow-right-up","ph-arrow-elbow-up-left","ph-arrow-elbow-up-right","ph-arrow-fat-down","ph-arrow-fat-left","ph-arrow-fat-line-down","ph-arrow-fat-line-left","ph-arrow-fat-line-right","ph-arrow-fat-lines-down","ph-arrow-fat-lines-left","ph-arrow-fat-lines-right","ph-arrow-fat-lines-up","ph-arrow-fat-line-up","ph-arrow-fat-right","ph-arrow-fat-up","ph-arrow-left","ph-arrow-line-down-left","ph-arrow-line-down-right","ph-arrow-line-down","ph-arrow-line-left","ph-arrow-line-right","ph-arrow-line-up-left","ph-arrow-line-up-right","ph-arrow-line-up","ph-arrow-right","ph-arrows-clockwise","ph-arrows-counter-clockwise","ph-arrows-down-up","ph-arrows-horizontal","ph-arrows-in-cardinal","ph-arrows-in-line-horizontal","ph-arrows-in-line-vertical","ph-arrows-in-simple","ph-arrows-in","ph-arrows-left-right","ph-arrows-merge","ph-arrows-out-cardinal","ph-arrows-out-line-horizontal","ph-arrows-out-line-vertical","ph-arrows-out-simple","ph-arrows-out","ph-arrow-square-down-left","ph-arrow-square-down-right","ph-arrow-square-down","ph-arrow-square-in","ph-arrow-square-left","ph-arrow-square-out","ph-arrow-square-right","ph-arrow-square-up-left","ph-arrow-square-up-right","ph-arrow-square-up","ph-arrows-split","ph-arrows-vertical","ph-arrow-u-down-left","ph-arrow-u-down-right","ph-arrow-u-left-down","ph-arrow-u-left-up","ph-arrow-up-left","ph-arrow-up-right","ph-arrow-up","ph-arrow-u-right-down","ph-arrow-u-right-up","ph-arrow-u-up-left","ph-arrow-u-up-right","ph-article-medium","ph-article-ny-times","ph-article","ph-asterisk-simple","ph-asterisk","ph-atom","ph-at","ph-baby","ph-backpack","ph-backspace","ph-bag-simple","ph-bag","ph-balloon","ph-bandaids","ph-bank","ph-barbell","ph-barcode","ph-barricade","ph-baseball-cap","ph-baseball","ph-basketball","ph-basket","ph-bathtub","ph-battery-charging","ph-battery-charging-vertical","ph-battery-empty","ph-battery-full","ph-battery-high","ph-battery-low","ph-battery-medium","ph-battery-plus","ph-battery-plus-vertical","ph-battery-vertical-empty","ph-battery-vertical-full","ph-battery-vertical-high","ph-battery-vertical-low","ph-battery-vertical-medium","ph-battery-warning","ph-battery-warning-vertical","ph-bed","ph-beer-bottle","ph-beer-stein","ph-behance-logo","ph-bell-ringing","ph-bell-simple-ringing","ph-bell-simple-slash","ph-bell-simple","ph-bell-simple-z","ph-bell-slash","ph-bell","ph-bell-z","ph-bezier-curve","ph-bicycle","ph-binoculars","ph-bird","ph-bluetooth-connected","ph-bluetooth-slash","ph-bluetooth","ph-bluetooth-x","ph-boat","ph-bone","ph-book-bookmark","ph-bookmark-simple","ph-bookmarks-simple","ph-bookmarks","ph-bookmark","ph-book-open-text","ph-book-open","ph-books","ph-book","ph-boot","ph-bounding-box","ph-bowl-food","ph-brackets-angle","ph-brackets-curly","ph-brackets-round","ph-brackets-square","ph-brain","ph-brandy","ph-bridge","ph-briefcase-metal","ph-briefcase","ph-broadcast","ph-broom","ph-browsers","ph-browser","ph-bug-beetle","ph-bug-droid","ph-bug","ph-buildings","ph-bus","ph-butterfly","ph-cactus","ph-cake","ph-calculator","ph-calendar-blank","ph-calendar-check","ph-calendar-plus","ph-calendar","ph-calendar-x","ph-call-bell","ph-camera-plus","ph-camera-rotate","ph-camera-slash","ph-camera","ph-campfire","ph-cardholder","ph-cards","ph-caret-circle-double-down","ph-caret-circle-double-left","ph-caret-circle-double-right","ph-caret-circle-double-up","ph-caret-circle-down","ph-caret-circle-left","ph-caret-circle-right","ph-caret-circle-up-down","ph-caret-circle-up","ph-caret-double-down","ph-caret-double-left","ph-caret-double-right","ph-caret-double-up","ph-caret-down","ph-caret-left","ph-caret-right","ph-caret-up-down","ph-caret-up","ph-car-profile","ph-carrot","ph-car-simple","ph-car","ph-cassette-tape","ph-castle-turret","ph-cat","ph-cell-signal-full","ph-cell-signal-high","ph-cell-signal-low","ph-cell-signal-medium","ph-cell-signal-none","ph-cell-signal-slash","ph-cell-signal-x","ph-certificate","ph-chair","ph-chalkboard-simple","ph-chalkboard-teacher","ph-chalkboard","ph-champagne","ph-charging-station","ph-chart-bar-horizontal","ph-chart-bar","ph-chart-donut","ph-chart-line-down","ph-chart-line","ph-chart-line-up","ph-chart-pie-slice","ph-chart-pie","ph-chart-polar","ph-chart-scatter","ph-chat-centered-dots","ph-chat-centered-text","ph-chat-centered","ph-chat-circle-dots","ph-chat-circle-text","ph-chat-circle","ph-chat-dots","ph-chats-circle","ph-chats-teardrop","ph-chats","ph-chat-teardrop-dots","ph-chat-teardrop-text","ph-chat-teardrop","ph-chat-text","ph-chat","ph-check-circle","ph-check-fat","ph-check-square-offset","ph-check-square","ph-checks","ph-check","ph-church","ph-circle-dashed","ph-circle-half","ph-circle-half-tilt","ph-circle-notch","ph-circles-four","ph-circles-three-plus","ph-circles-three","ph-circle","ph-circuitry","ph-clipboard-text","ph-clipboard","ph-clock-afternoon","ph-clock-clockwise","ph-clock-countdown","ph-clock-counter-clockwise","ph-clock","ph-closed-captioning","ph-cloud-arrow-down","ph-cloud-arrow-up","ph-cloud-check","ph-cloud-fog","ph-cloud-lightning","ph-cloud-moon","ph-cloud-rain","ph-cloud-slash","ph-cloud-snow","ph-cloud-sun","ph-cloud","ph-cloud-warning","ph-cloud-x","ph-club","ph-coat-hanger","ph-coda-logo","ph-code-block","ph-codepen-logo","ph-codes
1andbox-logo","ph-code-simple","ph-code","ph-coffee","ph-coins","ph-coin","ph-coin-vertical","ph-columns","ph-command","ph-compass","ph-compass-tool","ph-computer-tower","ph-confetti","ph-contactless-payment","ph-control","ph-cookie","ph-cooking-pot","ph-copyleft","ph-copyright","ph-copy-simple","ph-copy","ph-corners-in","ph-corners-out","ph-couch","ph-cpu","ph-credit-card","ph-crop","ph-crosshair-simple","ph-crosshair","ph-cross","ph-crown-simple","ph-crown","ph-cube-focus","ph-cube","ph-cube-transparent","ph-currency-btc","ph-currency-circle-dollar","ph-currency-cny","ph-currency-dollar-simple","ph-currency-dollar","ph-currency-eth","ph-currency-eur","ph-currency-gbp","ph-currency-inr","ph-currency-jpy","ph-currency-krw","ph-currency-kzt","ph-currency-ngn","ph-currency-rub","ph-cursor-click","ph-cursor-text","ph-cursor","ph-cylinder","ph-database","ph-desktop","ph-desktop-tower","ph-detective","ph-device-mobile-camera","ph-device-mobile-speaker","ph-device-mobile","ph-devices","ph-device-tablet-camera","ph-device-tablet-speaker","ph-device-tablet","ph-dev-to-logo","ph-diamonds-four","ph-diamond","ph-dice-five","ph-dice-four","ph-dice-one","ph-dice-six","ph-dice-three","ph-dice-two","ph-discord-logo","ph-disc","ph-divide","ph-dna","ph-dog","ph-door-open","ph-door","ph-dot-outline","ph-dots-nine","ph-dots-six","ph-dots-six-vertical","ph-dots-three-circle","ph-dots-three-circle-vertical","ph-dots-three-outline","ph-dots-three-outline-vertical","ph-dots-three","ph-dots-three-vertical","ph-dot","ph-download-simple","ph-download","ph-dress","ph-dribbble-logo","ph-dropbox-logo","ph-drop-half-bottom","ph-drop-half","ph-drop","ph-ear-slash","ph-ear","ph-egg-crack","ph-egg","ph-eject-simple","ph-eject","ph-elevator","ph-engine","ph-envelope-open","ph-envelope-simple-open","ph-envelope-simple","ph-envelope","ph-equalizer","ph-equals","ph-eraser","ph-escalator-down","ph-escalator-up","ph-exam","ph-exclude-square","ph-exclude","ph-export","ph-eye-closed","ph-eyedropper-sample","ph-eyedropper","ph-eyeglasses","ph-eye-slash","ph-eye","ph-facebook-logo","ph-face-mask","ph-factory","ph-faders-horizontal","ph-faders","ph-fan","ph-fast-forward-circle","ph-fast-forward","ph-feather","ph-figma-logo","ph-file-archive","ph-file-arrow-down","ph-file-arrow-up","ph-file-audio","ph-file-cloud","ph-file-code","ph-file-css","ph-file-csv","ph-file-dashed:before, .ph-file-dotted","ph-file-doc","ph-file-html","ph-file-image","ph-file-jpg","ph-file-js","ph-file-jsx","ph-file-lock","ph-file-magnifying-glass:before, .ph-file-search","ph-file-minus","ph-file-pdf","ph-file-plus","ph-file-png","ph-file-ppt","ph-file-rs","ph-file-sql","ph-files","ph-file-svg","ph-file-text","ph-file","ph-file-ts","ph-file-tsx","ph-file-video","ph-file-vue","ph-file-xls","ph-file-x","ph-file-zip","ph-film-reel","ph-film-script","ph-film-slate","ph-film-strip","ph-fingerprint-simple","ph-fingerprint","ph-finn-the-human","ph-fire-extinguisher","ph-fire-simple","ph-fire","ph-first-aid-kit","ph-first-aid","ph-fish-simple","ph-fish","ph-flag-banner","ph-flag-checkered","ph-flag-pennant","ph-flag","ph-flame","ph-flashlight","ph-flask","ph-floppy-disk-back","ph-floppy-disk","ph-flow-arrow","ph-flower-lotus","ph-flower","ph-flower-tulip","ph-flying-saucer","ph-folder-dashed:before, .ph-folder-dotted","ph-folder-lock","ph-folder-minus","ph-folder-notch-minus","ph-folder-notch-open","ph-folder-notch-plus","ph-folder-notch","ph-folder-open","ph-folder-plus","ph-folder-simple-dashed:before, .ph-folder-simple-dotted","ph-folder-simple-lock","ph-folder-simple-minus","ph-folder-simple-plus","ph-folder-simple-star","ph-folder-simple","ph-folder-simple-user","ph-folder-star","ph-folders","ph-folder","ph-folder-user","ph-football","ph-footprints","ph-fork-knife","ph-frame-corners","ph-framer-logo","ph-function","ph-funnel-simple","ph-funnel","ph-game-controller","ph-garage","ph-gas-can","ph-gas-pump","ph-gauge","ph-gavel","ph-gear-fine","ph-gear-six","ph-gear","ph-gender-female","ph-gender-intersex","ph-gender-male","ph-gender-neuter","ph-gender-nonbinary","ph-gender-transgender","ph-ghost","ph-gif","ph-gift","ph-git-branch","ph-git-commit","ph-git-diff","ph-git-fork","ph-github-logo","ph-gitlab-logo-simple","ph-gitlab-logo","ph-git-merge","ph-git-pull-request","ph-globe-hemisphere-east","ph-globe-hemisphere-west","ph-globe-simple","ph-globe-stand","ph-globe","ph-goggles","ph-goodreads-logo","ph-google-cardboard-logo","ph-google-chrome-logo","ph-google-drive-logo","ph-google-logo","ph-google-photos-logo","ph-google-play-logo","ph-google-podcasts-logo","ph-gradient","ph-graduation-cap","ph-grains-slash","ph-grains","ph-graph","ph-grid-four","ph-grid-nine","ph-guitar","ph-hamburger","ph-hammer","ph-handbag-simple","ph-handbag","ph-hand-coins","ph-hand-eye","ph-hand-fist","ph-hand-grabbing","ph-hand-heart","ph-hand-palm","ph-hand-pointing","ph-hands-clapping","ph-handshake","ph-hand-soap","ph-hands-praying","ph-hand-swipe-left","ph-hand-swipe-right","ph-hand-tap","ph-hand","ph-hand-waving","ph-hard-drives","ph-hard-drive","ph-hash-straight","ph-hash","ph-headlights","ph-headphones","ph-headset","ph-heartbeat","ph-heart-break","ph-heart-half","ph-heart-straight-break","ph-heart-straight","ph-heart","ph-hexagon","ph-high-heel","ph-highlighter-circle","ph-hoodie","ph-horse","ph-hourglass-high","ph-hourglass-low","ph-hourglass-medium","ph-hourglass-simple-high","ph-hourglass-simple-low","ph-hourglass-simple-medium","ph-hourglass-simple","ph-hourglass","ph-house-line","ph-house-simple","ph-house","ph-ice-cream","ph-identification-badge","ph-identification-card","ph-image-square","ph-images-square","ph-images","ph-image","ph-infinity","ph-info","ph-instagram-logo","ph-intersect-square","ph-intersect","ph-intersect-three","ph-jeep","ph-kanban","ph-keyboard","ph-keyhole","ph-key-return","ph-key","ph-knife","ph-ladder-simple","ph-ladder","ph-lamp","ph-laptop","ph-layout","ph-leaf","ph-lifebuoy","ph-lightbulb-filament","ph-lightbulb","ph-lighthouse","ph-lightning-a","ph-lightning-slash","ph-lightning","ph-line-segments","ph-line-segment","ph-link-break","ph-linkedin-logo","ph-link-simple-break","ph-link-simple-horizontal-break","ph-link-simple-horizontal","ph-link-simple","ph-link","ph-linux-logo","ph-list-bullets","ph-list-checks","ph-list-dashes","ph-list-magnifying-glass","ph-list-numbers","ph-list-plus","ph-list","ph-lockers","ph-lock-key-open","ph-lock-key","ph-lock-laminated-open","ph-lock-laminated","ph-lock-open","ph-lock-simple-open","ph-lock-simple","ph-lock","ph-magic-wand","ph-magnet-straight","ph-magnet","ph-magnifying-glass-minus","ph-magnifying-glass-plus","ph-magnifying-glass","ph-map-pin-line","ph-map-pin","ph-map-trifold","ph-marker-circle","ph-martini","ph-mask-happy","ph-mask-sad","ph-math-operations","ph-medal-military","ph-medal","ph-medium-logo","ph-megaphone-simple","ph-megaphone","ph-messenger-logo","ph-meta-logo","ph-metronome","ph-microphone-slash","ph-microphone-stage","ph-microphone","ph-microsoft-excel-logo","ph-microsoft-outlook-logo","ph-microsoft-powerpoint-logo","ph-microsoft-teams-logo","ph-microsoft-word-logo","ph-minus-circle","ph-minus-square","ph-minus","ph-money","ph-monitor-play","ph-monitor","ph-moon-stars","ph-moon","ph-moped-front","ph-moped","ph-mosque","ph-motorcycle","ph-mountains","ph-mouse-simple","ph-mouse","ph-music-note-simple","ph-music-notes-plus","ph-music-notes-simple","ph-music-notes","ph-music-note","ph-navigation-arrow","ph-needle","ph-newspaper-clipping","ph-newspaper","ph-notches","ph-note-blank","ph-notebook","ph-notepad","ph-note-pencil","ph-note","ph-notification","ph-notion-logo","ph-number-circle-eight","ph-number-circle-five","ph-number-circle-four","ph-number-circle-nine","ph-number-circle-one","ph-number-circle-seven","ph-number-circle-six","ph-number-circle-three","ph-number-circle-two","ph-number-circle-zero","ph-number-eight","ph-number-five","ph-number-four","ph-number-nine","ph-number-one","ph-number-seven","ph-number-six","ph-number-square-eight","ph-number-square-five","ph-number-square-four","ph-number-square-nine","ph-number-square-one","ph-number-square-seven","ph-number-square-six","ph-number-square-three","ph-number-square-two","ph-number-square-zero","ph-number-three","ph-number-two","ph-number-zero","ph-nut","ph-ny-times-logo","ph-octagon","ph-office-chair","ph-option","ph-orange-slice","ph-package","ph-paint-brush-broad","ph-paint-brush-household","ph-paint-brush","ph-paint-bucket","ph-paint-roller","ph-palette","ph-pants","ph-paperclip-horizontal","ph-paperclip","ph-paper-plane-right","ph-paper-plane","ph-paper-plane-tilt","ph-parachute","ph-paragraph","ph-parallelogram","ph-park","ph-password","ph-path","ph-patreon-logo","ph-pause-circle","ph-pause","ph-paw-print","ph-paypal-logo","ph-peace","ph-pencil-circle","ph-pencil-line","ph-pencil-simple-line","ph-pencil-simple-slash","ph-pencil-simple","ph-pencil-slash","ph-pencil","ph-pen-nib-straight","ph-pen-nib","ph-pentagram","ph-pen","ph-pepper","ph-percent","ph-person-arms-spread","ph-person-simple-bike","ph-person-simple-run","ph-person-simple","ph-person-simple-throw","ph-person-simple-walk","ph-person","ph-perspective","ph-phone-call","ph-phone-disconnect","ph-phone-incoming","ph-phone-outgoing","ph-phone-plus","ph-phone-slash","ph-phone","ph-phone-x","ph-phosphor-logo","ph-piano-keys","ph-picture-in-picture","ph-piggy-bank","ph-pill","ph-pinterest-logo","ph-pinwheel","ph-pi","ph-pizza","ph-placeholder","ph-planet","ph-plant","ph-play-circle","ph-playlist","ph-play-pause","ph-play","ph-plug-charging","ph-plugs-connected","ph-plugs","ph-plug","ph-plus-circle","ph-plus-minus","ph-plus-square","ph-plus","ph-poker-chip","ph-police-car","ph-polygon","ph-popcorn","ph-potted-plant","ph-power","ph-prescription","ph-presentation-chart","ph-presentation","ph-printer","ph-prohibit-inset","ph-prohibit","ph-projector-screen-chart","ph-projector-screen","ph-pulse:before, .ph-activity","ph-push-pin-simple-slash","ph-push-pin-simple","ph-push-pin-slash","ph-push-pin","ph-puzzle-piece","ph-qr-code","ph-question","ph-queue","ph-quotes","ph-radical","ph-radioactive","ph-radio-button","ph-radio","ph-rainbow-cloud","ph-rainbow","ph-read-cv-logo","ph-receipt","ph-receipt-x","ph-record","ph-rectangle","ph-recycle","ph-reddit-logo","ph-repeat-once","ph-repeat","ph-rewind-circle","ph-rewind","ph-road-horizon","ph-robot","ph-rocket-launch","ph-rocket","ph-rows","ph-rss-simple","ph-rss","ph-rug","ph-ruler","ph-scales","ph-scan","ph-scissors","ph-scooter","ph-screencast","ph-scribble-loop","ph-scroll","ph-seal-check:before, .ph-circle-wavy-check","ph-seal-question:before, .ph-circle-wavy-question","ph-seal
1:before, .ph-circle-wavy","ph-seal-warning:before, .ph-circle-wavy-warning","ph-selection-all","ph-selection-background","ph-selection-foreground","ph-selection-inverse","ph-selection-plus","ph-selection-slash","ph-selection","ph-shapes","ph-share-fat","ph-share-network","ph-share","ph-shield-checkered","ph-shield-check","ph-shield-chevron","ph-shield-plus","ph-shield-slash","ph-shield-star","ph-shield","ph-shield-warning","ph-shirt-folded","ph-shooting-star","ph-shopping-bag-open","ph-shopping-bag","ph-shopping-cart-simple","ph-shopping-cart","ph-shower","ph-shrimp","ph-shuffle-angular","ph-shuffle-simple","ph-shuffle","ph-sidebar-simple","ph-sidebar","ph-sigma","ph-signature","ph-sign-in","ph-sign-out","ph-signpost","ph-sim-card","ph-siren","ph-sketch-logo","ph-skip-back-circle","ph-skip-back","ph-skip-forward-circle","ph-skip-forward","ph-skull","ph-slack-logo","ph-sliders-horizontal","ph-sliders","ph-slideshow","ph-smiley-angry","ph-smiley-blank","ph-smiley-meh","ph-smiley-nervous","ph-smiley-sad","ph-smiley-sticker","ph-smiley","ph-smiley-wink","ph-smiley-x-eyes","ph-snapchat-logo","ph-sneaker-move","ph-sneaker","ph-snowflake","ph-soccer-ball","ph-sort-ascending","ph-sort-descending","ph-soundcloud-logo","ph-spade","ph-sparkle","ph-speaker-hifi","ph-speaker-high","ph-speaker-low","ph-speaker-none","ph-speaker-simple-high","ph-speaker-simple-low","ph-speaker-simple-none","ph-speaker-simple-slash","ph-speaker-simple-x","ph-speaker-slash","ph-speaker-x","ph-spinner-gap","ph-spinner","ph-spiral","ph-split-horizontal","ph-split-vertical","ph-spotify-logo","ph-square-half-bottom","ph-square-half","ph-square-logo","ph-squares-four","ph-square-split-horizontal","ph-square-split-vertical","ph-square","ph-stack-overflow-logo","ph-stack-simple","ph-stack","ph-stairs","ph-stamp","ph-star-and-crescent","ph-star-four","ph-star-half","ph-star-of-david","ph-star","ph-steering-wheel","ph-steps","ph-stethoscope","ph-sticker","ph-stool","ph-stop-circle","ph-stop","ph-storefront","ph-strategy","ph-stripe-logo","ph-student","ph-subtitles","ph-subtract-square","ph-subtract","ph-suitcase-rolling","ph-suitcase-simple","ph-suitcase","ph-sun-dim","ph-sunglasses","ph-sun-horizon","ph-sun","ph-swap","ph-swatches","ph-swimming-pool","ph-sword","ph-synagogue","ph-syringe","ph-table","ph-tabs","ph-tag-chevron","ph-tag-simple","ph-tag","ph-target","ph-taxi","ph-telegram-logo","ph-television-simple","ph-television","ph-tennis-ball","ph-tent","ph-terminal","ph-terminal-window","ph-test-tube","ph-text-aa","ph-text-align-center","ph-text-align-justify","ph-text-align-left","ph-text-align-right","ph-text-a-underline","ph-textbox","ph-text-b:before, .ph-text-bolder","ph-text-columns","ph-text-h-five","ph-text-h-four","ph-text-h-one","ph-text-h-six","ph-text-h","ph-text-h-three","ph-text-h-two","ph-text-indent","ph-text-italic","ph-text-outdent","ph-text-strikethrough","ph-text-t","ph-text-underline","ph-thermometer-cold","ph-thermometer-hot","ph-thermometer-simple","ph-thermometer","ph-thumbs-down","ph-thumbs-up","ph-ticket","ph-tidal-logo","ph-tiktok-logo","ph-timer","ph-tipi","ph-toggle-left","ph-toggle-right","ph-toilet-paper","ph-toilet","ph-toolbox","ph-tooth","ph-tote-simple","ph-tote","ph-trademark-registered","ph-trademark","ph-traffic-cone","ph-traffic-signal","ph-traffic-sign","ph-train-regional","ph-train-simple","ph-train","ph-tram","ph-translate","ph-trash-simple","ph-trash","ph-tray","ph-tree-evergreen","ph-tree-palm","ph-tree-structure","ph-tree","ph-trend-down","ph-trend-up","ph-triangle","ph-trophy","ph-truck","ph-t-shirt","ph-twitch-logo","ph-twitter-logo","ph-umbrella-simple","ph-umbrella","ph-unite-square","ph-unite","ph-upload-simple","ph-upload","ph-usb","ph-user-circle-gear","ph-user-circle-minus","ph-user-circle-plus","ph-user-circle","ph-user-focus","ph-user-gear","ph-user-list","ph-user-minus","ph-user-plus","ph-user-rectangle","ph-users-four","ph-user-square","ph-users","ph-users-three","ph-user-switch","ph-user","ph-van","ph-vault","ph-vibrate","ph-video-camera-slash","ph-video-camera","ph-video","ph-vignette","ph-vinyl-record","ph-virtual-real
1ity","ph-virus","ph-voicemail","ph-volleyball","ph-wallet","ph-wall","ph-warehouse","ph-warning-circle","ph-warning-diamond","ph-warning-octagon","ph-warning","ph-watch","ph-waveform","ph-wave-sawtooth","ph-wave-sine","ph-wave-square","ph-waves","ph-wave-triangle","ph-webcam-slash","ph-webcam","ph-webhooks-logo","ph-wechat-logo","ph-whatsapp-logo","ph-wheelchair-motion","ph-wheelchair","ph-wifi-high","ph-wifi-low","ph-wifi-medium","ph-wifi-none","ph-wifi-slash","ph-wifi-x","ph-windows-logo","ph-wind","ph-wine","ph-wrench","ph-x-circle","ph-x-square","ph-x","ph-yin-yang","ph-youtube-logo"],eo=({trigger:e,setIcon:a})=>{let[r,l]=(0,s.useState)(),[i,o]=(0,s.useState)(ei),[n,p]=(0,s.useState)({opacity:1,blending:"normal",rotate:0,style:""});return(0,s.useEffect)(()=>{let e=r?.trim()?.toLowerCase(),a=e?ei.filter(a=>a.includes(e)):ei;o(n?.style?a.map(e=>`${e}-${n?.style}`):a)},[r,n?.style]),(0,t.jsx)("div",{children:(0,t.jsx)(g.AM,{trigger:(0,t.jsx)("div",{style:{mixBlendMode:`${n?.blending||"normal"}`,opacity:`${n?.opacity||"1"}`,transform:`rotate(${n?.rotate||0}deg)`},children:e}),content:(0,t.jsx)("div",{className:"w-[420px] max-w-full",children:(0,t.jsx)(g.tU,{defaultValue:"icon",items:[{key:"icon",trigger:"Icon",content:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(g.pd,{placeholder:"Search icons...",className:"text-sm",onChange:e=>l(e.target.value)}),(0,t.jsx)("div",{className:"text-sm font-semibold my-2",children:i?.length?"Icons":"No matching icons found"}),i?.length?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(g.s3,{value:n?.style,onChange:e=>{p(a=>({...a,style:e}))},items:[{value:"thin",content:"Thin"},{value:"",content:"Regular"},{value:"bold",content:"Bold"},{value:"fill",content:"Filled"}]}),(0,t.jsx)("div",{className:"grid grid-cols-8 gap-4 mt-4 max-h-[200px] overflow-auto",children:i.map(e=>(0,t.jsx)("div",{className:"flex items-center justify-center",children:(0,t.jsx)("i",{className:(0,f.A)("ph-fill text-3xl cursor-pointer",e),onClick:()=>{a(a=>({...a,key:e}))}})},e))})]}):""]})},{key:"options",trigger:"Options",content:(0,t.jsxs)("div",{className:"py-2 space-y-2",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center whitespace-nowrap",children:"Blending"}),(0,t.jsx)("div",{className:"max-w-[50%] w-full",children:(0,t.jsx)(g.l6,{inputClassName:"text-sm",options:[{value:"normal",title:"Normal"},{value:"overlay",title:"Overlay"},{value:"luminosity",title:"Luminosity"},{value:"screen",title:"Screen"},{value:"darken",title:"Darken"}],value:n.blending,onChange:e=>p(a=>({...a,blending:e.target.value}))})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center whitespace-nowrap",children:"Opacity"}),(0,t.jsx)("div",{className:"max-w-[50%] w-full",children:(0,t.jsx)(g.Ap,{min:.1,max:1,steps:.1,stepValue:n?.opacity,value:n?.opacity,onChange:e=>p(a=>({...a,opacity:e}))})})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center whitespace-nowrap",children:"Rotate"}),(0,t.jsx)("div",{className:"max-w-[50%] w-full",children:(0,t.jsx)(g.Ap,{min:0,max:360,steps:1,stepValue:n?.rotate,value:n?.rotate,onChange:e=>p(a=>({...a,rotate:e}))})})]})]})}]})})})})}},61498:(e,a,r)=>{r.d(a,{Bu:()=>t,Nz:()=>s,fL:()=>l});let t=e=>{let a=e?.customColor;return a?.css?a.css:`linear-gradient(${e?.gradientDirection?.css??"to bottom right"}, ${a?.colorStart} 0%, ${a?.colorEnd} 100%)`},s={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315},l=(e,a="to bottom right")=>{let r=String(e||"").match(/#(?:[0-9a-fA-F]{3}){1,2}\b/g);return r?.length?`linear-gradient(${a}, ${r.join(", ")})`:null}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.