1import{c as gt,d as l,x as ro,r as P,u as Ue,b5 as W,a as Ie,j as o,I as ao,V as no,s as k,J as ee,bb as ve,H as fe,b6 as Et,Y as Fe,K as ze,N as Me,W as ge,O as Le,Q as Ve,T as Re,Z as st,bc as lt,bd as io,be as ct,a6 as dt,aF as so,F as lo,bf as co,bg as uo,bh as fo,bi as go,bj as ho,bk as po,bl as mo,ad as bo,ai as xo,ah as yo,ap as wo,ba as vo,z as Ct,D as kt,$ as He,a9 as We,aB as Bt,a0 as Ke,a3 as Be,a4 as jt,a5 as Ne,a7 as Ze,a8 as Je}from"./index-CMO3mc9n.js";import{t as it,P as Co}from"./ProfileCoverImage-iBiqVA2S.js";import{S as ko}from"./react-select.esm-BW3th5eL.js";import{u as Pe,j as jo,s as At,l as Nt,c as So,e as Ft,f as Po,g as zt,d as Io,h as To}from"./supabaseUtils-BdzVR_Fc.js";import{C as _o}from"./chevron-right-FN9b-vec.js";import{U as $o}from"./user-round-trTFRRha.js";import{T as Ao}from"./trash-2-ykhZrwY_.js";/** 2 * @license lucide-react v0.454.0 - ISC 3 * 4 * This source code is licensed under the ISC license. 5 * See the LICENSE file in the root directory of this source tree. 6 */const Do=gt("Camera",[["path",{d:"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z",key:"1tc9qg"}],["circle",{cx:"12",cy:"13",r:"3",key:"1vg3eu"}]]);/** 7 * @license lucide-react v0.454.0 - ISC 8 * 9 * This source code is licensed under the ISC license. 10 * See the LICENSE file in the root directory of this source tree. 11 */const Eo=gt("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]);/** 12 * @license lucide-react v0.454.0 - ISC 13 * 14 * This source code is licensed under the ISC license. 15 * See the LICENSE file in the root directory of this source tree. 16 */const Bo=gt("ImagePlus",[["path",{d:"M16 5h6",key:"1vod17"}],["path",{d:"M19 2v6",key:"4bpg5p"}],["path",{d:"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5",key:"1ue2ih"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}]]);/** 17 * @license lucide-react v0.454.0 - ISC 18 * 19 * This source code is licensed under the ISC license. 20 * See the LICENSE file in the root directory of this source tree. 21 */const No=gt("Play",[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]]),$e=l.div` 22 width: 100%; 23 border-radius: 1.5rem; 24 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); 25 background-color: white; 26 display: flex; 27 flex-direction: column; 28 padding-bottom: 1.5rem; 29 margin-bottom:1.5rem; 30 `,Fo=ro` 31 width: 100%; 32 height: 140px; 33 position: relative; 34 cursor: pointer; 35 transition: border 0.3s ease-in-out; 36 border-radius: 10px; 37 38 @media (min-width: 1024px) { 39 width: 7rem; 40 height: 10rem; 41 } 42`,zo=l.div` 43 display: grid; 44 grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); 45 gap: 0.85rem; 46 margin: 0.5rem; 47 min-width: 0; 48 49 @media (min-width: 1024px) { 50 grid-template-columns: repeat(auto-fit, minmax(7rem, 7rem)); 51 gap: 1.5rem; 52 margin: 1rem; 53 } 54`,Qe=l.div` 55 display: flex; 56 flex-direction: column; 57 align-items: center; 58 width: 100%; 59`,et=l.div` 60 ${Fo} 61 padding: 0.5rem; 62 border: ${({selected:t})=>t?"2px solid #000":"none"}; 63 box-sizing: border-box; 64 width: 100%; 65 66 @media (min-width: 1024px) { 67 width: 7rem; 68 } 69`,tt=l.div` 70 margin-top: 0.5rem; 71 font-size: 0.85rem; 72 color: #333; 73 text-align: center; 74`,Mo=l.div` 75 width: 100%; 76 height: 100%; 77 background-color: ${({color:t})=>t||"grey"}; 78 border-radius: 8px; 79`,Lo=l.div` 80 width: 100%; 81 height: 100%; 82 background: ${({value:t,color:y,direction:d})=>t||`linear-gradient(${d}, ${y}, ${it(y).lighten(40).toString()})`}; 83 border-radius: 8px; 84`,Vo=l.div` 85 width: 100%; 86 height: 100%; 87 background-size: cover; 88 background-position: center; 89 background-image: ${({imageUrl:t})=>t?`url(${t})`:"linear-gradient(145deg, #f8fafc 0%, #dbeafe 52%, #a78bfa 100%)"}; 90 background-color: transparent; 91 display: flex; 92 justify-content: center; 93 align-items: center; 94 border-radius: 8px; 95 color: #172554; 96 border: 1px solid rgba(99, 102, 241, 0.28); 97`,Ro=l.div` 98 width: 100%; 99 height: 100%; 100 background: linear-gradient(145deg, #111827 0%, #4338ca 52%, #06b6d4 100%); 101 display: flex; 102 justify-content: center; 103 align-items: center; 104 border-radius: 8px; 105 color: #ffffff; 106 border: 1px solid rgba(14, 165, 233, 0.32); 107 108 video { 109 width: 100%; 110 height: 100%; 111 object-fit: cover; 112 border-radius: 8px; 113 } 114`,St=l.div` 115 position: absolute; 116 inset: 0; 117 display: flex; 118 flex-direction: column; 119 align-items: center; 120 justify-content: center; 121 gap: 0.45rem; 122 padding: 0.75rem; 123 text-align: center; 124 color: ${({$light:t})=>
124t?"#ffffff":"#172554"}; 125 background: ${({$hasMedia:t})=>t?"linear-gradient(180deg, rgba(15,23,42,0.08), rgba(15,23,42,0.34))":"transparent"}; 126 border-radius: 8px; 127 pointer-events: none; 128 129 svg { 130 width: 1.65rem; 131 height: 1.65rem; 132 filter: ${({$light:t})=>t?"drop-shadow(0 5px 10px rgba(15, 23, 42, 0.28))":"none"}; 133 } 134 135 strong { 136 font-size: 0.78rem; 137 line-height: 1.1; 138 } 139 140 small { 141 font-size: 0.64rem; 142 font-weight: 700; 143 opacity: 0.78; 144 } 145`,Mt=l.button` 146 margin-top: 0.45rem; 147 border: 1px solid rgba(220, 38, 38, 0.18); 148 border-radius: 999px; 149 padding: 0.28rem 0.65rem; 150 color: #b91c1c; 151 background: rgba(254, 242, 242, 0.92); 152 font-size: 0.72rem; 153 font-weight: 800; 154 cursor: pointer; 155 156 &:hover { 157 background: #fee2e2; 158 } 159`,Pt=l.input` 160 position: absolute; 161 opacity: 0; 162 width: 50px; 163 height: 25px; 164 cursor: pointer; 165`,Uo=l.div` 166 display: ${({show:t})=>t?"flex":"none"}; 167 flex-direction: column; 168 align-items: center; 169 margin-top: 1rem; 170 position: relative; 171 width: 100%; 172 padding: 0 1rem; 173 174 @media (min-width: 480px) { 175 padding: 0; 176 } 177`,Oo=l.div` 178 width: 100%; 179 max-width: 200px; 180 height: 40px; 181 background-color: ${({color:t})=>t||"grey"}; 182 border: 1px solid #000; 183 margin-bottom: 0.5rem; 184 position: relative; 185 border-radius: 4px; 186 187 @media (min-width: 480px) { 188 width: 50px; 189 height: 25px; 190 } 191`,qo=l.button` 192 padding: 0.75rem 1.5rem; 193 font-size: 0.9rem; 194 cursor: pointer; 195 background-color: #007BFF; 196 color: white; 197 border: none; 198 border-radius: 4px; 199 width: 100%; 200 max-width: 200px; 201 202 @media (min-width: 480px) { 203 padding: 0.25rem 0.75rem; 204 font-size: 0.85rem; 205 width: auto; 206 } 207`,Yo=l.div` 208 margin-top: 1rem; 209 display: flex; 210 align-items: center; 211 justify-content: center; 212 width: 100%; 213`,Xo=l.label` 214 margin-left: 0.5rem; 215 font-size: 0.9rem; 216 217 @media (min-width: 480px) { 218 font-size: 0.85rem; 219 } 220`,Go=()=>{const[t,y]=P.useState(!0),d=Ue(),h={type:W.backgroundType,solidColor:"#fdf2f8",gradientColor:"#fdf2f8",gradientDirection:"135deg",gradientValue:W.bgValue},[w,V]=P.useState(h.type),[q,j]=P.useState(h.solidColor),[_,Y]=P.useState(h.gradientColor),[J,E]=P.useState(""),[$,S]=P.useState(h.gradientDirection),[I,T]=P.useState(null),[B,ae]=P.useState(null),ne=P.useRef(null),z=P.useRef(null),G=P.useRef(null),f=(p,m=h.gradientColor)=>{if(!p||typeof p!="string"||!p.includes("linear-gradient"))return{color:m,direction:h.gradientDirection};const c=p.match(/linear-gradient\((.*?),/);return{color:p.match(/,\s*(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|[a-zA-Z]+)(?:\s+\d+%?)?\s*(?:,|\))/)?.[1]?.trim()||m,direction:c?.[1]?.trim()||h.gradientDirection}},M=async(p,m)=>{const c=m==="video",g=`${p}/${c?"videos":"images"}`,C=c?"background.mp4":"background.png",{data:N,error:U}=await k.storage.from("backgrounds").list(g,{limit:100});if(U)return console.warn(`Could not inspect saved ${m} background:`,U),null;const F=(N||[]).find(X=>X.name===C);if(!F)return null;const{data:{publicUrl:K}}=k.storage.from("backgrounds").getPublicUrl(`${g}/${C}`),Z=F.updated_at||F.created_at||F.id||"";return Z?`${K}?t=${encodeURIComponent(Z)}`:K},H=async({userProfileId:p,mediaType:m,mediaUrl:c})=>{const g=m==="video"?"video":"image";V(g),g==="image"?T(c):ae(c),d(fe(g)),d(ee(c));const{error:C}=await k.from("design_preferences").update({background_type:g,bg_value:c,updated_at:new Date().toISOString()}).eq("user_profile_id",p);if(C)throw C},R=()=>{const p=f(W.bgValue,h.gradientColor);V(W.backgroundType),j(h.solidColor),Y(p.color),E(W.bgValue),S(p.direction),T(null),ae(null),d(fe(W.backgroundType)),d(ee(W.bgValue)),d(ve(W.bgColor)),d(Fe(W.textColor)),d(ze(W.buttonColor)),d(Me(W.buttonTextColor)),d(ge(W.font)),d(Le(W.buttonType)),d(Ve(W.buttonStyle)),d(Re(W.buttonShadow)),d(st(W.iconColor)),d(lt(io)),d(ct(W)),d(dt(W.productCardLayout))};P.useEffect(()=>{(async()=>{try{y(!0);const{data:{user:m}}=await k.auth.getUser();if(!m)throw new Error("No authenticated user");const{data:c}=await k.from("user_profiles").select("id").eq("user_id",m.id).eq("is_primary",!0).single();if(!c)throw new Error("No user profile found");const{data:g,error:C}=await k.from("design_preferences").select("*").eq("user_profile_id",c.id).single();if(C&&C.code!=="PGRST116")throw C;if(g){const N=typeof g.custom_design=="string"?(()=>{try{return JSON.parse(g.custom_design)}catch{return{}}})():g.custom_design||{},[U,F]=await Promise.all([M(c.id,"image"),M(c.id,"video")]),K=g.bg_value||N.bgValue||"",Z=K||W.bgValue,X=g.bg_color||N.bgColor||Z,te=g.background_type||N.backgroundType||h.type,ie=te==="flatColor"?Z:X&&!String(X).includes("linear-gradient")?X:h.solidColor,oe
220=te==="gradient"?Z:String(X||"").includes("linear-gradient")?X:"",re=f(oe,h.gradientColor);if(j(ie||h.solidColor),Y(re.color),E(oe||""),S(re.direction),T(U),ae(F),V(te),te==="flatColor")d(ee(Z)),d(ve(Z));else if(te==="gradient")d(ee(Z));else if(te==="image"){const se=K||U;T(se),d(ee(se))}else if(te==="video"){const se=K||F;ae(se),d(ee(se))}d(fe(te))}else R(),await k.from("design_preferences").upsert({user_profile_id:c.id,...Et,updated_at:new Date().toISOString()})}catch(m){console.error("Error loading background settings:",m),R()}finally{y(!1)}})()},[d]);const{backgroundType:be,bgValue:xe,bgColor:ye}=Ie(p=>p.profile);P.useEffect(()=>{if(t)return;const p=be||h.type,m=xe||ye||"",c=ye||xe||"";if(p==="flatColor"){j(m||h.solidColor),V("flatColor");return}if(p==="gradient"){const g=m||c,C=f(g,h.gradientColor);E(g||""),Y(C.color),S(C.direction),V("gradient");return}if(p==="image"){T(m||null),V("image");return}p==="video"&&(ae(m||null),V("video"))},[be,xe,ye,t]);const ce=async p=>{V(p),d(fe(p));try{const{data:{user:m}}=await k.auth.getUser();if(!m)throw new Error("No authenticated user");const{data:c}=await k.from("user_profiles").select("id").eq("user_id",m.id).eq("is_primary",!0).single();if(!c)throw new Error("No user profile found");if(p==="flatColor")d(ve(q)),d(ee(q)),await k.from("design_preferences").update({background_type:"flatColor",bg_value:q,bg_color:q,updated_at:new Date().toISOString()}).eq("user_profile_id",c.id);else if(p==="gradient"){const g=`linear-gradient(${$}, ${_}, ${it(_).lighten(40).toString()})`;d(ee(g)),await k.from("design_preferences").update({background_type:"gradient",bg_value:g,bg_color:g,updated_at:new Date().toISOString()}).eq("user_profile_id",c.id)}else p==="image"?w!=="image"&&I?await H({userProfileId:c.id,mediaType:"image",mediaUrl:I}):ne.current.click():p==="video"&&(w!=="video"&&B?await H({userProfileId:c.id,mediaType:"video",mediaUrl:B}):z.current.click())}catch(m){console.error("Error updating background type:",m)}},de=5*1024*1024,Ce=20*1024*1024,ke=async p=>{const m=p.target.files[0];if(m)try{if(m.size>de){alert("Image size exceeds 5MB limit. Please choose a smaller file."),p.target.value="";return}const{data:{session:c},error:g}=await k.auth.getSession();if(g||!c)throw new Error("Not authenticated");console.log("Authentication check:",{isAuthenticated:!!c,userId:c.user.id,role:c.user.role});const{data:C,error:N}=await k.from("user_profiles").select("id").eq("user_id",c.user.id).eq("is_primary",!0).single();if(N)throw console.error("Profile error:",N),N;if(!C)throw new Error("No user profile found");const U=`${C.id}/images`;try{const{data:re,error:se}=await k.storage.from("backgrounds").list(U);console.log("Directory check:",{listData:re,listError:se})}catch(re){console.log("Directory check error (this might be expected):",re)}const F=`${U}/background.png`,K=Date.now();console.log("Upload attempt details:",{bucket:"backgrounds",filePath:F,userId:c.user.id,profileId:C.id});const{data:Z,error:X}=await k.storage.from("backgrounds").upload(F,m,{cacheControl:"0",upsert:!0});if(X)throw console.error("Upload error details:",X),X;const{data:{publicUrl:te}}=k.storage.from("backgrounds").getPublicUrl(F),ie=`${te}?t=${K}`;T(ie),d(ee(ie)),d(fe("image"));const{error:oe}=await k.from("design_preferences").update({background_type:"image",bg_value:ie,updated_at:new Date().toISOString()}).eq("user_profile_id",C.id);if(oe)throw console.error("Design preferences update error:",oe),oe}catch(c){if(console.error("Full error object:",c),c.message?.includes("row-level security policy")){const{data:{session:g}}=await k.auth.getSession();
220console.log("Detailed session state:",{hasSession:!!g,user:g?.user,expiresAt:g?.expires_at})}c.message?.includes("Unauthorized")?alert("Permission denied. Please ensure you are logged in with the correct account."):c.message?.includes("row-level security policy")?alert("Access restricted. Please contact support if this persists."):alert(`Upload failed: ${c.message}`)}finally{p.target&&(p.target.value="")}},he=async p=>{const m=p.target.files[0];if(m)try{if(m.size>Ce){alert("Video size exceeds 20MB limit. Please choose a smaller file."),p.target.value="";return}const{data:{session:c},error:g}=await k.auth.getSession();if(g||!c)throw new Error("Not authenticated");console.log("Authentication check:",{isAuthenticated:!!c,userId:c.user.id,role:c.user.role});const{data:C,error:N}=await k.from("user_profiles").select("id").eq("user_id",c.user.id).eq("is_primary",!0).single();if(N)throw console.error("Profile error:",N),N;if(!C)throw new Error("No user profile found");const U=`${C.id}/videos`;try{const{data:re,error:se}=await k.storage.from("backgrounds").list(U);console.log("Directory check:",{listData:re,listError:se})}catch(re){console.log("Directory check error (this might be expected):",re)}const F=`${U}/background.mp4`,K=Date.now();console.log("Upload attempt details:",{bucket:"backgrounds",filePath:F,userId:c.user.id,profileId:C.id});const{data:Z,error:X}=await k.storage.from("backgrounds").upload(F,m,{cacheControl:"0",upsert:!0});if(X)throw console.error("Upload error details:",X),X;const{data:{publicUrl:te}}=k.storage.from("backgrounds").getPublicUrl(F),ie=`${te}?t=${K}`;ae(ie),d(ee(ie)),d(fe("video"));const{error:oe}=await k.from("design_preferences").update({background_type:"video",bg_value:ie,updated_at:new Date().toISOString()}).eq("user_profile_id",C.id);if(oe)throw console.error("Design preferences update error:",oe),oe}catch(c){if(console.error("Full error object:",c),c.message?.includes("row-level security policy")){const{data:{session:g}}=await k.auth.getSession();
220console.log("Detailed session state:",{hasSession:!!g,user:g?.user,expiresAt:g?.expires_at})}c.message?.includes("Unauthorized")?alert("Permission denied. Please ensure you are logged in with the correct account."):c.message?.includes("row-level security policy")?alert("Access restricted. Please contact support if this persists."):alert(`Upload failed: ${c.message}`)}finally{p.target&&(p.target.value="")}},pe=async p=>{const m=p.target.value;if(j(m),w==="flatColor"){d(ee(m)),d(ve(m));try{const{data:{user:c}}=await k.auth.getUser();if(!c)throw new Error("No authenticated user");const{data:g}=await k.from("user_profiles").select("id").eq("user_id",c.id).eq("is_primary",!0).single();if(!g)throw new Error("No user profile found");const{error:C}=await k.from("design_preferences").update({background_type:"flatColor",bg_value:m,bg_color:m,updated_at:new Date().toISOString()}).eq("user_profile_id",g.id);if(C)throw C}catch(c){console.error("Error updating solid color:",c)}}},me=async p=>{const m=p.target.value;if(Y(m),w==="gradient"){const c=`linear-gradient(${$}, ${m}, ${it(m).lighten(40).toString()})`;E(c),d(ee(c));try{const{data:{user:g}}=await k.auth.getUser();if(!g)throw new Error("No authenticated user");const{data:C}=await k.from("user_profiles").select("id").eq("user_id",g.id).eq("is_primary",!0).single();if(!C)throw new Error("No user profile found");const{error:N}=await k.from("design_preferences").update({background_type:"gradient",bg_value:c,bg_color:c,updated_at:new Date().toISOString()}).eq("user_profile_id",C.id);if(N)throw N}catch(g){console.error("Error updating gradient color:",g)}}},je=async p=>{const m=p.target.checked?"to top":"to bottom";if(S(m),w==="gradient"){const c=`linear-gradient(${m}, ${_}, ${it(_).lighten(40).toString()})`;E(c),d(ee(c));try{const{data:{user:g}}=await k.auth.getUser();if(!g)throw new Error("No authenticated user");const{data:C}=await k.from("user_profiles").select("id").eq("user_id",g.id).eq("is_primary",!0).single();if(!C)throw new Error("No user profile found");const{error:N}=await k.from("design_preferences").update({background_type:"gradient",bg_value:c,bg_color:c,updated_at:new Date().toISOString()}).eq("user_profile_id",C.id);if(N)throw N}catch(g){console.error("Error updating gradient direction:",g)}}},we=async p=>{try{const{data:{user:m}}=await k.auth.getUser();if(!m)throw new Error("No authenticated user");const{data:c}=await k.from("user_profiles").select("id").eq("user_id",m.id).eq("is_primary",!0).single();if(!c)throw new Error("No user profile found");R();const{error:g}=await k.from("design_preferences").update({...Et,updated_at:new Date().toISOString()}).eq("user_profile_id",c.id);if(g)throw g}catch(m){console.error(`Error removing ${p} background:`,m),alert(`Could not remove ${p} background. Please try again.`)}};return o.jsx(o.Fragment,{children:t?o.jsx("div",{className:"flex justify-center items-center p-4",children:o.jsx("div",{className:"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"})}):o.jsxs(o.Fragment,{children:[o.jsxs(zo,{children:[o.jsxs(Qe,{children:[o.jsx(et,{selected:w==="flatColor",onClick:()=>ce("flatColor"),children:o.jsx(Mo,{color:q})}),o.jsx(tt,{children:"Solid"})]}),o.jsxs(Qe,{children:[o.jsx(et,{selected:w==="gradient",onClick:()=>ce("gradient"),children:o.jsx(Lo,{value:J,color:_,direction:$})}),o.jsx(tt,{children:"Gradient"})]}),o.jsxs(Qe,{children:[o.jsx(et,{selected:w==="image",onClick:()=>ce("image"),style:{position:"relative"},children:o.jsx(Vo,{imageUrl:I,children:o.jsxs(St,{$hasMedia:!!I,$light:!!I,children:[o.jsx(ao,{}),o.jsx("strong",{children:I?"Image background":"Photo background"}),o.jsx("small",{children:I?w==="image"?"Change image":"Use saved image":"Upload image"})]})})}),o.jsx(tt,{children:"Image"}),I&&o.jsx(Mt,{type:"button",onClick:p=>{p.stopPropagation(),we("image")},children:"Remove image"})]}),o.jsxs(Qe,{children:[o.jsxs(et,{selected:w==="video",onClick:()=>ce("video"),style:{position:"relative"},children:[o.jsx(Ro,{children:B?o.jsx("video",{src:B,autoPlay:!0,loop:!0,muted:!0}):o.jsxs(St,{$light:!0,children:[o.jsx(no,{}),o.jsx("strong",{children:"Video background"}),o.jsx("small",{children:"Upload video"})]})}),B&&o.jsxs(St,{$hasMedia:!0,$light:!0,children:[o.jsx(No,{}),o.jsx("strong",{children:"Video background"}),o.jsx("small",{children:w==="video"?"Change video":"Use saved video"})]})]}),o.jsx(tt,{children:"Video"}),B&&o.jsx(Mt,{type:"button",onClick:p=>{p.stopPropagation(),we("video")},children:"Remove video"})]})]}),o.jsxs(Uo,{show:w==="flatColor"||w==="gradient",children:[o.jsx(Oo,{color:w==="flatColor"?q:_,children:o.jsx(Pt,{type:"color",ref:G,onChange:w==="flatColor"?pe:me})}),o.jsx(qo,{onClick:()=>G.current.click(),children:"Select Color"}),w==="gradient"&&o.jsxs(Yo,{children:[o.jsx("input",{type:"checkbox",id:"gradientDirection",checked:$==="to top",onChange:je}),o.jsx(Xo,{htmlFor:"gradientDirection",children:"Gradient Up"})]})]}),o.jsx(Pt,{type:"file",accept:"image/*",ref:ne,onChange:ke}),o.jsx(Pt,{type:"file",accept:"video/*",ref:z,onChange:he})]})})};var Qt={exports:{}};
220(function(t){(function(){function y(e,r,i){return e.call.apply(e.bind,arguments)}function d(e,r,i){if(!e)throw Error();if(2<arguments.length){var n=Array.prototype.slice.call(arguments,2);return function(){var u=Array.prototype.slice.call(arguments);return Array.prototype.unshift.apply(u,n),e.apply(r,u)}}return function(){return e.apply(r,arguments)}}function h(e,r,i){return h=Function.prototype.bind&&Function.prototype.bind.toString().indexOf("native code")!=-1?y:d,h.apply(null,arguments)}var w=Date.now||function(){return+new Date};function V(e,r){this.a=e,this.o=r||e,this.c=this.o.document}var q=!!window.FontFace;function j(e,r,i,n){if(r=e.c.createElement(r),i)for(var u in i)i.hasOwnProperty(u)&&(u=="style"?r.style.cssText=i[u]:r.setAttribute(u,i[u]));return n&&r.appendChild(e.c.createTextNode(n)),r}function _(e,r,i){e=e.c.getElementsByTagName(r)[0],e||(e=document.documentElement),e.insertBefore(i,e.lastChild)}function Y(e){e.parentNode&&e.parentNode.removeChild(e)}function J(e,r,i){r=r||[],i=i||[];for(var n=e.className.split(/\s+/),u=0;u<r.length;u+=1){for(var b=!1,x=0;x<n.length;x+=1)if(r[u]===n[x]){b=!0;break}b||n.push(r[u])}for(r=[],u=0;u<n.length;u+=1){for(b=!1,x=0;x<i.length;x+=1)if(n[u]===i[x]){b=!0;break}b||r.push(n[u])}e.className=r.join(" ").replace(/\s+/g," ").replace(/^\s+|\s+$/,"")}function E(e,r){for(var i=e.className.split(/\s+/),n=0,u=i.length;n<u;n++)if(i[n]==r)return!0;return!1}function $(e){return e.o.location.hostname||e.a.location.hostname}function S(e,r,i){function n(){A&&u&&b&&(A(x),A=null)}r=j(e,"link",{rel:"stylesheet",href:r,media:"all"});var u=!1,b=!0,x=null,A=i||null;q?(r.onload=function(){u=!0,n()},r.onerror=function(){u=!0,x=Error("Stylesheet failed to load"),n()}):setTimeout(function(){u=!0,n()},0),_(e,"head",r)}function I(e,r,i,n){var u=e.c.getElementsByTagName("head")[0];if(u){var b=j(e,"script",{src:r}),x=!1;return b.onload=b.onreadystatechange=function(){x||this.readyState&&this.readyState!="loaded"&&this.readyState!="complete"||(x=!0,i&&i(null),b.onload=b.onreadystatechange=null,b.parentNode.tagName=="HEAD"&&u.removeChild(b))},u.appendChild(b),setTimeout(function(){x||(x=!0,i&&i(Error("Script load timeout")))},n||5e3),b}return null}function T(){this.a=0,this.c=null}function B(e){return e.a++,function(){e.a--,ne(e)}}function ae(e,r){e.c=r,ne(e)}function ne(e){e.a==0&&e.c&&(e.c(),e.c=null)}function z(e){this.a=e||"-"}z.prototype.c=function(e){for(var r=[],i=0;i<arguments.length;i++)r.push(arguments[i].replace(/[\W_]+/g,"").toLowerCase());return r.join(this.a)};function G(e,r){this.c=e,this.f=4,this.a="n";var i=(r||"n4").match(/^([nio])([1-9])$/i);i&&(this.a=i[1],this.f=parseInt(i[2],10))}function f(e){return R(e)+" "+(e.f+"00")+" 300px "+M(e.c)}function M(e){var r=[];e=e.split(/,\s*/);for(var i=0;i<e.length;i++){var n=e[i].replace(/['"]/g,"");n.indexOf(" ")!=-1||/^\d/.test(n)?r.push("'"+n+"'"):r.push(n)}return r.join(",")}function H(e){return e.a+e.f}function R(e){var r="normal";return e.a==="o"?r="oblique":e.a==="i"&&(r="italic"),r}function be(e){var r=4,i="n",n=null;return e&&((n=e.match(/(normal|oblique|italic)/i))&&n[1]&&(i=n[1].substr(0,1).toLowerCase()),(n=e.match(/([1-9]00|normal|bold)/i))&&n[1]&&(/bold/i.test(n[1])?r=7:/[1-9]00/.test(n[1])&&(r=parseInt(n[1].substr(0,1),10)))),i+r}function xe(e,r){this.c=e,this.f=e.o.document.documentElement,this.h=r,this.a=new z("-"),this.j=r.events!==!1,this.g=r.classes!==!1}function ye(e){e.g&&J(e.f,[e.a.c("wf","loading")]),de(e,"loading")}function ce(e){if(e.g){var r=E(e.f,e.a.c("wf","active")),i=[],n=[e.a.c("wf","loading")];r||i.push(e.a.c("wf","inactive")),J(e.f,i,n)}de(e,"inactive")}function de(e,r,i){e.j&&e.h[r]&&(i?e.h[r](i.c,H(i)):e.h[r]())}function Ce(){this.c={}}function ke(e,r,i){var n=[],u;for(u in r)if(r.hasOwnProperty(u)){var b=e.c[u];b&&n.push(b(r[u],i))}return n}function he(e,r){this.c=e,this.f=r,this.a=j(this.c,"span",{"aria-hidden":"true"},this.f)}function pe(e){_(e.c,"body",e.a)}function me(e){return"display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:"+M(e.c)+";"+("font-style:"+R(e)+";font-weight:"+(e.f+"00")+";")}function je(e,r,i,n,u,b){this.g=e,this.j=r,this.a=n,this.c=i,this.f=u||3e3,this.h=b||void 0}je.prototype.start=function(){var e=this.c.o.document,r=this,i=w(),n=new Promise(function(x,A){function D(){w()-i>=r.f?A():e.fonts.load(f(r.a),r.h).then(function(O){1<=O.length?x():setTimeout(D,25)},function(){A()})}D()}),u=null,b=new Promise(function(x,A){u=setTimeout(A,r.f)});Promise.race([b,n]).then(function(){u&&(clearTimeout(u),u=null),r.g(r.a)},function(){r.j(r.a)})};function we(e,r,i,n,u,b,x){this.v=e,this.B=r,this.c=i,this.a=n,this.s=x||"BESbswy",this.f={},this.w=u||3e3,this.u=b||null,this.m=this.j=this.h=this.g=null,this.g=new he(this.c,this.s),this.h=new he(this.c,this.s),this.j=new he(this.c,this.s),this.m=new he(this.c,this.s),e=new G(this.a.c+",serif",H(this.a)),e=me(e),this.g.a.style.cssText=e,e=new G(this.a.c+",sans-serif",H(this.a)),e=me(e),this.h.a.style.cssText=e,e=new G("serif",H(this.a)),e=me(e),this.j.a.style.cssText=e,e=new G("sans-serif",H(this.a)),e=me(e),this.m.a.style.cssText=e,pe(this.g),pe(this.h),pe(this.j),pe(this.m)}var p={D:"serif",C:"sans-serif"},m=null;
220function c(){if(m===null){var e=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);m=!!e&&(536>parseInt(e[1],10)||parseInt(e[1],10)===536&&11>=parseInt(e[2],10))}return m}we.prototype.start=function(){this.f.serif=this.j.a.offsetWidth,this.f["sans-serif"]=this.m.a.offsetWidth,this.A=w(),C(this)};function g(e,r,i){for(var n in p)if(p.hasOwnProperty(n)&&r===e.f[p[n]]&&i===e.f[p[n]])return!0;return!1}function C(e){var r=e.g.a.offsetWidth,i=e.h.a.offsetWidth,n;(n=r===e.f.serif&&i===e.f["sans-serif"])||(n=c()&&g(e,r,i)),n?w()-e.A>=e.w?c()&&g(e,r,i)&&(e.u===null||e.u.hasOwnProperty(e.a.c))?U(e,e.v):U(e,e.B):N(e):U(e,e.v)}function N(e){setTimeout(h(function(){C(this)},e),50)}function U(e,r){setTimeout(h(function(){Y(this.g.a),Y(this.h.a),Y(this.j.a),Y(this.m.a),r(this.a)},e),0)}function F(e,r,i){this.c=e,this.a=r,this.f=0,this.m=this.j=!1,this.s=i}var K=null;F.prototype.g=function(e){var r=this.a;r.g&&J(r.f,[r.a.c("wf",e.c,H(e).toString(),"active")],[r.a.c("wf",e.c,H(e).toString(),"loading"),r.a.c("wf",e.c,H(e).toString(),"inactive")]),de(r,"fontactive",e),this.m=!0,Z(this)},F.prototype.h=function(e){var r=this.a;if(r.g){var i=E(r.f,r.a.c("wf",e.c,H(e).toString(),"active")),n=[],u=[r.a.c("wf",e.c,H(e).toString(),"loading")];i||n.push(r.a.c("wf",e.c,H(e).toString(),"inactive")),J(r.f,n,u)}de(r,"fontinactive",e),Z(this)};function Z(e){--e.f==0&&e.j&&(e.m?(e=e.a,e.g&&J(e.f,[e.a.c("wf","active")],[e.a.c("wf","loading"),e.a.c("wf","inactive")]),de(e,"active")):ce(e.a))}function X(e){this.j=e,this.a=new Ce,this.h=0,this.f=this.g=!0}X.prototype.load=function(e){this.c=new V(this.j,e.context||this.j),this.g=e.events!==!1,this.f=e.classes!==!1,ie(this,new xe(this.c,e),e)};function te(e,r,i,n,u){var b=--e.h==0;(e.f||e.g)&&setTimeout(function(){var x=u||null,A=n||null||{};if(i.length===0&&b)ce(r.a);else{r.f+=i.length,b&&(r.j=b);var D,O=[];for(D=0;D<i.length;D++){var L=i[D],Q=A[L.c],le=r.a,a=L;if(le.g&&J(le.f,[le.a.c("wf",a.c,H(a).toString(),"loading")]),de(le,"fontloading",a),le=null,K===null)if(window.FontFace){var a=/Gecko.*Firefox\/(\d+)/.exec(window.navigator.userAgent),s=/OS X.*Version\/10\..*Safari/.exec(window.navigator.userAgent)&&/Apple/.exec(window.navigator.vendor);K=a?42<parseInt(a[1],10):!s}else K=!1;K?le=new je(h(r.g,r),h(r.h,r),r.c,L,r.s,Q):le=new we(h(r.g,r),h(r.h,r),r.c,L,r.s,x,Q),O.push(le)}for(D=0;D<O.length;D++)O[D].start()}},0)}function ie(e,r,i){var u=[],n=i.timeout;ye(r);var u=ke(e.a,i,e.c),b=new F(e.c,r,n);for(e.h=u.length,r=0,i=u.length;r<i;r++)u[r].load(function(x,A,D){te(e,b,x,A,D)})}function oe(e,r){this.c=e,this.a=r}oe.prototype.load=function(e){function r(){if(b["__mti_fntLst"+n]){var x=b["__mti_fntLst"+n](),A=[],D;if(x)for(var O=0;O<x.length;O++){var L=x[O].fontfamily;x[O].fontStyle!=null&&x[O].fontWeight!=null?(D=x[O].fontStyle+x[O].fontWeight,A.push(new G(L,D))):A.push(new G(L))}e(A)}else setTimeout(function(){r()},50)}var i=this,n=i.a.projectId,u=i.a.version;if(n){var b=i.c.o;I(this.c,(i.a.api||"https://fast.fonts.net/jsapi")+"/"+n+".js"+(u?"?v="+u:""),function(x){x?e([]):(b["__MonotypeConfiguration__"+n]=function(){return i.a},r())}).id="__MonotypeAPIScript__"+n}else e([])};function re(e,r){this.c=e,this.a=r}re.prototype.load=function(e){var r,i,n=this.a.urls||[],u=this.a.families||[],b=this.a.testStrings||{},x=new T;for(r=0,i=n.length;r<i;r++)S(this.c,n[r],B(x));var A=[];for(r=0,i=u.length;r<i;r++)if(n=u[r].split(":"),n[1])for(var D=n[1].split(","),O=0;O<D.length;O+=1)A.push(new G(n[0],D[O]));else A.push(new G(n[0]));ae(x,function(){e(A,b)})};function se(e,r){e?this.c=e:this.c=pt,this.a=[],this.f=[],this.g=r||""}var pt="https://fonts.googleapis.com/css";function Ae(e,r){for(var i=r.length,n=0;n<i;n++){var u=r[n].split(":");u.length==3&&e.f.push(u.pop());var b="";u.length==2&&u[1]!=""&&(b=":"),e.a.push(u.join(b))}}function mt(e){if(e.a.length==0)throw Error("No fonts to load!");if(e.c.indexOf("kit=")!=-1)return e.c;for(var r=e.a.length,i=[],n=0;n<r;n++)i.push(e.a[n].replace(/ /g,"+"));return r=e.c+"?family="+i.join("%7C"),0<e.f.length&&(r+="&subset="+e.f.join(",")),0<e.g.length&&(r+="&text="+encodeURIComponent(e.g)),r}function bt(e){this.f=e,this.a=[],this.c={}}var Oe={latin:"BESbswy","latin-ext":"çöüÄÅ",cyrillic:"йÑÐ",greek:"αβΣ",khmer:"ááá",Hanuman:"ááá"},xt={thin:"1",extralight:"2","extra-light":"2",ultralight:"2","ultra-light":"2",light:"3",regular:"4",book:"4",medium:"5","semi-bold":"6",semibold:"6","demi-bold":"6",demibold:"6",bold:"7","extra-bold":"8",extrabold:"8","ultra-bold":"8",ultrabold:"8",black:"9",heavy:"9",l:"3",r:"4",b:"7"},qe={i:"i",italic:"i",n:"n",normal:"n"},yt=/^(thin|(?:(?:extra|ultra)-?)?light|regular|book|medium|(?:(?:semi|demi|extra|ultra)-?)?bold|black|heavy|l|r|b|[1-9]00)?(n|i|normal|italic)?$/;function wt(e){for(var r=e.f.length,i=0;i<r;i++){var n=e.f[i].split(":"),u=n[0].replace(/\+/g," "),b=["n4"];if(2<=n.length){var x,A=n[1];if(x=[],A)for(var A=A.split(","),D=A.length,O=0;O<D;O++){var L;if(L=A[O],L.match(/^[\w-]+$/)){var Q=yt.exec(L.toLowerCase());if(Q==null)L="";else{if(L=Q[2],L=L==null||L==""?"n":qe[L],Q=Q[1],Q==null||Q=="")Q="4";else var le=xt[Q],Q=le||(isNaN(Q)?"4":Q.substr(0,1));L=[L,Q].join("")}}else L="";L&&x.push(L)}0<x.length&&(b=x),n.length==3&&(n=n[2],x=[],n=n?n.split(","):x,0<n.length&&(n=Oe[n[0]])&&(e.c[u]=n))}for(e.c[u]||(n=Oe[u])&&(e.c[u]=n),n=0;n<b.length;n+=1)e.a.push(new G(u,b[n]))}}function Te(e,r){this.c=e,this.a=r}var Ye={Arimo:!0,Cousine:!0,Tinos:!0};Te.prototype.load=function(e){var r=new T,i=this.c,n=new se(this.a.api,this.a.text),u=this.a.families;Ae(n,u);var b=new bt(u);wt(b),S(i,mt(n),B(r)),ae(r,function(){e(b.a,b.c,Ye)})};function De(e,r){this.c=e,this.a=r}De.prototype.load=function(e){var r=this.a.id,i=this.c.o;r?I(this.c,(this.a.api||"https://use.typekit.net")+"/"+r+".js",function(n){if(n)e([]);else if(i.Typekit&&i.Typekit.config&&i.Typekit.config.fn){n=i.Typekit.config.fn;for(var u=[],b=0;b<n.length;b+=2)for(var x=n[b],A=n[b+1],D=0;D<A.length;D++)u.push(new G(x,A[D]));try{i.Typekit.load({events:!1,classes:!1,async:!0})}catch{}e(u)}},2e3):e([])};function Se(e,r){this.c=e,this.f=r,this.a=[]}Se.prototype.load=function(e){var r=this.f.id,i=this.c.o,n=this;r?(i.__webfontfontdeckmodule__||(i.__webfontfontdeckmodule__={}),i.__webfontfontdeckmodule__[r]=function(u,b){for(var x=0,A=b.fonts.length;x<A;++x){var D=b.fonts[x];n.a.push(new G(D.name,be("font-weight:"+D.weight+";font-style:"+D.style)))}e(n.a)},I(this.c,(this.f.api||"https://f.fontdeck.com/s/css/js/")+$(this.c)+"/"+r+".js",function(u){u&&e([])})):e([])};var ue=new X(window);ue.a.c.custom=function(e,r){return new re(r,e)},ue.a.c.fontdeck=function(e,r){return new Se(r,e)},ue.a.c.monotype=function(e,r){return new oe(r,e)},ue.a.c.typekit=function(e,r){return new De(r,e)},ue.a.c.google=function(e,r){return new Te(r,e)};var Xe={load:h(ue.load,ue)};t.exports?t.exports=Xe:(window.WebFont=Xe,window.WebFontConfig&&ue.load(window.WebFontConfig))})()})(Qt);var Ho=Qt.exports;const eo=so(Ho),Lt=[{value:"Roboto",label:"Roboto"},{value:"Open Sans",label:"Open Sans"},{value:"Lato",label:"Lato"},{value:"Montserrat",label:"Montserrat"},{value:"Oswald",label:"Oswald"},{value:"Raleway",label:"Raleway"},{value:"Playfair Display",label:"Playfair Display"},{value:"Merriweather",label:"Merriweather"},{value:"Poppins",label:"Poppins"},{value:"Nunito",label:"Nunito"}],ot="Arial",Wo=({onFontChange:t,disabled:y=!1})=>{const d=Ue(),h=Ie($=>$.profile.font),[w,V]=P.useState(!0),[q,j]=P.useState(!1),[_,Y]=P.useState(null),J=async $=>{try{j(!0),Y(null);const{data:{user:S}}=await k.auth.getUser();if(!S)throw new Error("No authenticated user");const{data:I}=await k.from("user_profiles").select("id").eq("user_id",S.id).eq("is_primary",!0).single();if(!I)throw new Error("No user profile found");const{error:T}=await k.from("design_preferences").update({font:$,updated_at:new Date().toISOString()}).eq("user_profile_id",I.id);if(T)throw T}catch(S){console.error("Error saving font:",S),Y("Failed to save font preference")}finally{j(!1)}};P.useEffect(()=>{(async()=>{try{V(!0),Y(null);const{data:{user:S}}=await k.auth.getUser();if(!S){d(ge(ot));return}const{data:I}=await k.from("user_profiles").select("id").eq("user_id",S.id).eq("is_primary",!0).single();if(!I){d(ge(ot));return}const{data:T}=await k.from("design_preferences").select("font").eq("user_profile_id",I.id).single(),B=T?.font||ot;d(ge(B))}catch(S){console.error("Error loading saved font:",S),Y("Failed to load font preference"),d(ge(ot))}finally{V(!1)}})()},[d]),P.useEffect(()=>{h&&eo.load({google:{families:[h]}})},[h]);const E=async $=>{const S=$.value;d(ge(S)),t?.(S),await J(S)};return w?o.jsx("div",{className:"m-4",children:"Loading font preferences..."}):o.jsxs("div",{className:"m-4",children:[o.jsx("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Select Font Family"}),o.jsx(ko,{options:Lt,onChange:E,value:Lt.find($=>$.value===h)||{value:h,label:h},className:"basic-single",classNamePrefix:"select",isSearchable:!0,isDisabled:q||y,placeholder:"Choose a font..."}),q&&o.jsx("p",{className:"mt-2 text-sm text-gray-500",children:"Saving..."}),_&&o.jsx("p",{className:"mt-2 text-sm text-red-600",children:_})]})},Ko=l.div` 221 width: 100%; 222 height: auto; 223 padding: 0.5rem; 224 225 226 @media (min-width: 768px) { 227 height: auto; 228 padding: 1rem; 229 } 230`,rt=l.div` 231 display: grid; 232 grid-template-columns: 1fr; 233 gap: 0.75rem; 234 margin-bottom: 1rem; 235 236 @media (min-width: 480px) { 237 grid-template-columns: repeat(2, 1fr); 238 } 239 240 @media (min-width: 1024px) { 241 grid-template-columns: repeat(3, 1fr); 242 gap: 20px; 243 margin-bottom: 1.5rem; 244 } 245`,ht=l.button` 246 box-sizing: border-box; 247 width: 100%; 248 padding: 0.75rem 0.5rem; 249 margin: 0; 250 font-size: 0.9rem; 251 cursor: pointer;
252 color: ${({buttonTextColor:t})=>t}; 253 background-color: ${({buttonColor:t})=>t}; 254 border: ${({border:t})=>t||"none"}; 255 ${({rounded:t})=>t&&"border-radius: 8px;"} 256 ${({pill:t})=>t&&"border-radius: 50px;"} 257 transition: transform 0.2s; 258 259 &:active { 260 transform: scale(0.98); 261 } 262 263 ${t=>t.className==="active"&&` 264 outline: 2px solid blue; 265 outline-offset: 2px; 266 `} 267 268 @media (min-width: 1024px) { 269 font-size: 1rem; 270 padding: 0.5rem; 271 margin: 10px; 272 } 273`,It=l(ht)` 274 background-color: ${({buttonColor:t})=>t}; 275 color: ${({buttonTextColor:t})=>t}; 276`,Tt=l(ht)` 277 background-color: transparent; 278 border: 2px solid black; 279 border-color: ${({buttonColor:t})=>t}; 280 color: ${({buttonTextColor:t})=>t}; 281`,_t=l(ht)` 282 background-color: ${({buttonColor:t})=>t}; 283 color: ${({buttonTextColor:t})=>t}; 284 border: 1px solid transparent; 285 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 286`,$t=l(ht)` 287 background-color: ${({buttonColor:t})=>t}; 288 color: ${({buttonTextColor:t})=>t}; 289 border: 2px solid black; 290 border-color: ${({buttonColor:t})=>t}; 291 box-shadow: 4px 4px black; 292`,at=l.h3` 293 margin: 1rem 0; 294 font-size: 1.1rem; 295 color: #333; 296 font-weight: 600; 297 298 @media (min-width: 1024px) { 299 margin: 1.3rem; 300 font-size: 1.2rem; 301 } 302`,Zo=l.div` 303 display: flex; 304 flex-direction: column; 305 gap: 1rem; 306 padding: 1rem 0; 307 margin-top: 1rem; 308 border-top: 1px solid #eee; 309 310 @media (min-width: 1024px) { 311 flex-direction: row; 312 gap: 2rem; 313 padding: 1rem; 314 } 315`,Vt=l.div` 316 display: flex; 317 align-items: center; 318 gap: 0.75rem; 319 320 label { 321 font-size: 0.9rem; 322 color: #666; 323 } 324 325 input[type="color"] { 326 width: 40px; 327 height: 40px; 328 padding: 0; 329 border: 1px solid #ddd; 330 border-radius: 4px; 331 cursor: pointer; 332 333 &::-webkit-color-swatch-wrapper { 334 padding: 2px; 335 } 336 337 &::-webkit-color-swatch { 338 border-radius: 2px; 339 border: none; 340 } 341 } 342`,Jo=({onChange:t})=>{const y=Ue(),{buttonColor:d,buttonTextColor:h,buttonType:w,buttonStyle:V,buttonShadow:q}=Ie($=>$.profile),j=Ie($=>$.profile),_=async($,S="default",I="none")=>{try{y(Le($)),y(Ve(S)),y(Re(I));const T={...j,buttonType:$,buttonStyle:S,buttonShadow:I};await Pe(T),t?.()}catch(T){console.error("Error saving button selection:",T)}},Y=async $=>{try{const S=$.target.value;y(ze(S)),await Pe({...j,buttonColor:S}),t?.()}catch(S){console.error("Error saving button color:",S)}},J=async $=>{try{const S=$.target.value;y(Me(S)),await Pe({...j,buttonTextColor:S}),t?.()}catch(S){console.error("Error saving button text color:",S)}},E=($,S="default",I="none")=>w===$&&V===S&&q===I?"active":"";return o.jsxs(Ko,{children:[o.jsx(at,{children:"Fill"}),o.jsxs(rt,{children:[o.jsx(It,{buttonColor:d,buttonTextColor:h,buttonShadow:q,onClick:()=>_("fill","default","none"),className:E("fill","default","none"),children:"Fill"}),o.jsx(It,{rounded:!0,buttonColor:d,buttonTextColor:h,buttonShadow:q,onClick:()=>_("fill","rounded","none"),className:E("fill","rounded","none"),children:"Fill Rounded"}),o.jsx(It,{pill:!0,buttonColor:d,buttonTextColor:h,buttonShadow:q,onClick:()=>_("fill","pill","none"),className:E("fill","pill","none"),children:"Fill Pill"})]}),o.jsx(at,{children:"Outline"}),o.jsxs(rt,{children:[o.jsx(Tt,{buttonColor:d,buttonTextColor:h,onClick:()=>_("outline","default","none"),className:E("outline","default","none"),children:"Outline"}),o.jsx(Tt,{rounded:!0,buttonColor:d,buttonTextColor:h,onClick:()=>_("outline","rounded","none"),className:E("outline","rounded","none"),children:"Outline Rounded"}),o.jsx(Tt,{pill:!0,buttonColor:d,buttonTextColor:h,onClick:()=>_("outline","pill","none"),className:E("outline","pill","none"),children:"Outline Pill"})]}),o.jsx(at,{children:"Soft shadow"}),o.jsxs(rt,{children:[o.jsx(_t,{buttonColor:d,buttonTextColor:h,buttonShadow:"soft",onClick:()=>_("fill","default","soft"),className:E("fill","default","soft"),children:"Soft Shadow"}),o.jsx(_t,{rounded:!0,buttonColor:d,buttonTextColor:h,buttonShadow:"soft",onClick:()=>_("fill","rounded","soft"),className:E("fill","rounded","soft"),children:"Soft Rounded"}),o.jsx(_t,{pill:!0,buttonColor:d,buttonTextColor:h,buttonShadow:"soft",onClick:()=>_("fill","pill","soft"),className:E("fill","pill","soft"),children:"Soft Pill"})]}),o.jsx(at,{children:"Hard shadow"}),o.jsxs(rt,{children:[o.jsx($t,{buttonColor:d,buttonTextColor:h,buttonShadow:"hard",onClick:()=>
342_("fill","default","hard"),className:E("fill","default","hard"),children:"Hard Shadow"}),o.jsx($t,{rounded:!0,buttonColor:d,buttonTextColor:h,buttonShadow:"hard",onClick:()=>_("fill","rounded","hard"),className:E("fill","rounded","hard"),children:"Hard Rounded"}),o.jsx($t,{pill:!0,buttonColor:d,buttonTextColor:h,buttonShadow:"hard",onClick:()=>_("fill","pill","hard"),className:E("fill","pill","hard"),children:"Hard Pill"})]}),o.jsxs(Zo,{children:[o.jsxs(Vt,{children:[o.jsx("label",{children:"Button Color"}),o.jsx("input",{type:"color",value:j.buttonColor,onChange:Y})]}),o.jsxs(Vt,{children:[o.jsx("label",{children:"Button Font Color"}),o.jsx("input",{type:"color",value:j.buttonTextColor,onChange:J})]})]})]})},Qo=[{id:"minima",name:"Bright Desk",design:{backgroundType:"flatColor",bgValue:"#ffffff",bgColor:"#ffffff",textColor:"#0b1220",buttonColor:"#0d47d9",buttonTextColor:"#ffffff",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"soft",font:"Inter",buttonFont:"Inter",iconColor:"#2563eb",productCardLayout:"stacked"}},{id:"noir",name:"Blackout",design:{backgroundType:"gradient",bgValue:"linear-gradient(180deg, #ef1d2b 0%, #120607 38%, #000000 100%)",bgColor:"linear-gradient(180deg, #ef1d2b 0%, #120607 38%, #000000 100%)",textColor:"#ffffff",buttonColor:"#ffffff",buttonTextColor:"#050505",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"none",font:"Plus Jakarta Sans",buttonFont:"Plus Jakarta Sans",iconColor:"#ffffff",productCardLayout:"editorial"}},{id:"bloom",name:"Rosette",design:{backgroundType:"flatColor",bgValue:"#f9cfe0",bgColor:"#f9cfe0",textColor:"#12070b",buttonColor:"#ff1f73",buttonTextColor:"#ffffff",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"soft",font:"Libre Baskerville",buttonFont:"Libre Baskerville",iconColor:"#ff1f73",productCardLayout:"stacked"}},{id:"sage",name:"Evergreen",design:{backgroundType:"flatColor",bgValue:"#ffffff",bgColor:"#ffffff",textColor:"#0f172a",buttonColor:"#08796b",buttonTextColor:"#ffffff",buttonType:"fill",buttonStyle:"pill",buttonShadow:"soft",font:"Plus Jakarta Sans",buttonFont:"Plus Jakarta Sans",iconColor:"#08796b",productCardLayout:"split"}},{id:"sunset",name:"Coral Blocks",design:{backgroundType:"gradient",bgValue:"linear-gradient(90deg, #ffeaf7 0%, #ffeaf7 42%, #ff5e64 42%, #ff5e64 100%)",bgColor:"linear-gradient(90deg, #ffeaf7 0%, #ffeaf7 42%, #ff5e64 42%, #ff5e64 100%)",textColor:"#ffffff",buttonColor:"#ffffff",buttonTextColor:"#111111",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"soft",font:"Plus Jakarta Sans",buttonFont:"Plus Jakarta Sans",iconColor:"#ffffff",productCardLayout:"split"}},{id:"ocean",name:"Blue Note",design:{backgroundType:"flatColor",bgValue:"#f7fbff",bgColor:"#f7fbff",textColor:"#111827",buttonColor:"#0d47d9",buttonTextColor:"#ffffff",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"soft",font:"Inter",buttonFont:"Inter",iconColor:"#0d47d9",productCardLayout:"compact"}},{id:"mono",name:"Modern Fold",design:{backgroundType:"flatColor",bgValue:"#ffffff",bgColor:"#ffffff",textColor:"#111827",buttonColor:"#4f83f1",buttonTextColor:"#ffffff",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"none",font:"Poppins",buttonFont:"Poppins",iconColor:"#4f83f1",productCardLayout:"imageTop"}},{id:"lux",name:"Ivory Serif",design:{backgroundType:"flatColor",bgValue:"#fbf8f4",bgColor:"#fbf8f4",textColor:"#120b08",buttonColor:"#4a423b",buttonTextColor:"#fbf8f4",buttonType:"fill",buttonStyle:"rounded",buttonShadow:"soft",font:"Noto Serif Display",buttonFont:"Noto Serif Display",iconColor:"#9a7f64",productCardLayout:"editorial"}},{id:"candy",name:"Candy",design:W},{id:"studio",name:"Violet Beam",design:{backgroundType:"gradient",bgValue:"radial-gradient(circle at 50% 14%, #d946ef 0%, #9400ff 44%, #6d28d9 100%)",bgColor:"radial-gradient(circle at 50% 14%, #d946ef 0%, #9400ff 44%, #6d28d9 100%)",textColor:"#ffffff",buttonColor:"#e0d7ff",buttonTextColor:"#3b0764",buttonType:"fill",buttonStyle:"pill",buttonShadow:"soft",font:"Urbanist",buttonFont:"Urbanist",iconColor:"#ffffff",productCardLayout:"imageTop"}}],ut=(t,y={})=>({backgroundType:y.backgroundType??t.backgroundType??"flatColor",bgValue:y.bgValue??t.bgValue??"#ffffff",bgColor:y.bgColor??t.bgColor??"#ffffff",textColor:y.textColor??t.textColor??"#000000",buttonColor:y.buttonColor??t.buttonColor??"#000000",buttonTextColor:y.buttonTextColor??t.buttonTextColor??"#ffffff",buttonType:y.buttonType??t.buttonType??"f
342ill",buttonStyle:y.buttonStyle??t.buttonStyle??"default",buttonShadow:y.buttonShadow??t.buttonShadow??"none",font:y.font??t.font??"Arial",buttonFont:y.buttonFont??y.font??t.font??"Arial",iconColor:y.iconColor??t.socialIconColor??t.iconColor??"#000000",profileImageAsHero:y.profileImageAsHero??t.profileImageAsHero??t.customDesign?.profileImageAsHero??!1,profileImageCoverX:y.profileImageCoverX??t.profileImageCoverX??t.customDesign?.profileImageCoverX??50,profileImageCoverY:y.profileImageCoverY??t.profileImageCoverY??t.customDesign?.profileImageCoverY??50,profileImageCoverZoom:y.profileImageCoverZoom??t.profileImageCoverZoom??t.customDesign?.profileImageCoverZoom??1,profileImageAvatarX:y.profileImageAvatarX??t.profileImageAvatarX??t.customDesign?.profileImageAvatarX??50,profileImageAvatarY:y.profileImageAvatarY??t.profileImageAvatarY??t.customDesign?.profileImageAvatarY??50,productCardLayout:y.productCardLayout??t.productCardLayout??"stacked",productCardBackgroundColor:y.productCardBackgroundColor??t.productCardBackgroundColor??t.customDesign?.productCardBackgroundColor??null,productCardTextColor:y.productCardTextColor??t.productCardTextColor??t.customDesign?.productCardTextColor??null}),Rt=[uo,fo,go,ho,po,mo],er=[bo,xo,yo,wo],Ut=[{title:"Free Creator Toolkit",meta:"Collects name and email without payment.",cta:"Send Me the Toolkit",price:"Free download",art:"linear-gradient(135deg, #fce7f3, #db2777)"},{title:"Content Planner Template",meta:"A ready-to-use planner delivered straight to your inbox.",cta:"Download Template",price:"$9.99",art:"linear-gradient(135deg, #dff5ff, #0284c7)"},{title:"Book a 1:1 Call with Me",meta:"Book a private coaching session with me!",cta:"Book a 1:1 Call with Me",price:"$9.99",art:"linear-gradient(135deg, #dcfce7, #16a34a)"},{title:"Profile Audit",meta:"Get a personalized review of your profile, content, or offer.",cta:"Request My Audit",price:"$9.99",art:"linear-gradient(135deg, #fef3c7, #b45309)"},{title:"30-Day Content System",meta:"Build a repeatable system to plan, batch, and publish content consistently.",cta:"Start the Course",price:"$9.99",art:"linear-gradient(135deg, #e0f2fe, #0369a1)"},{title:"Creator Growth Studio",meta:"Monthly creator support with audits, strategy sessions, templates, and accountability.",cta:"Join the Studio",price:"$9.99 / month",art:"linear-gradient(135deg, #ede9fe, #7c3aed)"},{title:"Content Calendar Live Workshop",meta:"Plan your next 30 days of content in one focused live workshop.",cta:"Save My Seat",price:"$9.99",art:"linear-gradient(135deg, #fee2e2, #dc2626)"},{title:"Click Me!",meta:"Visit my link",cta:"Click Me!",price:"URL or media",art:"linear-gradient(135deg, #fee2e2, #ef4444)"}],tr={minima:{name:"Maya Chen",handle:"launch strategist",avatarIndex:0,avatarStyle:"round",productOffset:0},noir:{name:"Andre Fox",handle:"music curator",avatarIndex:5,avatarStyle:"cover",productOffset:7},bloom:{name:"Nia Rose",handle:"beauty creator",avatarIndex:2,avatarStyle:"round",productOffset:1},sage:{name:"Theo Green",handle:"wellness coach",avatarIndex:3,avatarStyle:"square",productOffset:2},sunset:{name:"Lena Park",handle:"creative director",avatarIndex:4,avatarStyle:"cover",productOffset:3},ocean:{name:"Kai Brooks",handle:"systems educator",avatarIndex:1,avatarStyle:"square",productOffset:4},mono:{name:"Ava Stone",handle:"brand designer",avatarIndex:4,avatarStyle:"square",productOffset:5},lux:{name:"Sofia Vale",handle:"style consultant",avatarIndex:0,avatarStyle:"square",productOffset:6},candy:{name:"Jordan Lee",handle:"fitness creator",avatarIndex:1,avatarStyle:"round",productOffset:0},studio:{name:"Riley Nova",handle:"digital artist",avatarIndex:3,avatarStyle:"cover",productOffset:5}},to=t=>tr[t?.id]||{name:"Creator Name",handle:"creator profile",avatarIndex:0,avatarStyle:"round",productOffset:0},or=t=>{const{productOffset:y}=to(t);return[0,1].map(d=>Ut[(y+d)%Ut.length])},rr=l.div` 343 padding: clamp(1rem, 2vw, 1.4rem); 344`,ar=l.div` 345 display: grid; 346 grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; 347 align-items: center; 348 gap: 1rem; 349`,Ot=l.button` 350 width: 2.75rem; 351 height: 2.75rem; 352 border: 1px solid rgba(99, 102, 241, 0.22); 353 border-radius: 999px; 354 background: #ffffff; 355 color: #18215f; 356 display: grid; 357 place-items: center; 358 cursor: pointer; 359 box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); 360`,nr=l.div` 361 min-width: 0; 362 display: grid; 363 justify-items: center; 364`,ir=l.button` 365 width: min(100%, 17rem); 366 aspect-ratio: 9 / 15.7; 367 border: 0; 368 border-radius: 1.65rem; 369 padding: 0.65rem; 370 background: ${({$background:t})=>t}; 371 color: ${({$textColor:t})=>t}; 372 box-shadow: 0 24px 52px rgba(15, 23, 42, 0.14); 373 cursor: pointer; 374 overflow: hidden; 375 outline: ${({$active:t})=>
375t?"3px solid #6d5dfc":"1px solid rgba(15, 23, 42, 0.08)"}; 376 outline-offset: 0.35rem; 377`,sr=l.div` 378 height: 100%; 379 border-radius: 1.2rem; 380 padding: 0.7rem; 381 display: flex; 382 flex-direction: column; 383 align-items: center; 384 gap: 0.44rem; 385 background: rgba(255, 255, 255, 0.18); 386`,lr=l.div` 387 width: calc(100% + 1.4rem); 388 height: 4.65rem; 389 margin: -0.7rem -0.7rem 0.2rem; 390 overflow: hidden; 391 border-radius: 1.2rem 1.2rem 0.75rem 0.75rem; 392 393 img { 394 width: 100%; 395 height: 100%; 396 object-fit: cover; 397 object-position: center 32%; 398 display: block; 399 } 400`,cr=l.img` 401 width: ${({$shape:t})=>t==="square"?"3.8rem":"3.5rem"}; 402 height: ${({$shape:t})=>t==="square"?"3.8rem":"3.5rem"}; 403 border-radius: ${({$shape:t})=>t==="square"?"0.8rem":"999px"}; 404 object-fit: cover; 405 object-position: center; 406 border: 3px solid rgba(255, 255, 255, 0.72); 407 box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18); 408 margin-bottom: 0.05rem; 409`,dr=l.div` 410 max-width: 100%; 411 font-size: 0.78rem; 412 line-height: 1; 413 font-weight: 900; 414 color: currentColor; 415 text-align: center; 416 overflow-wrap: anywhere; 417`,ur=l.div` 418 max-width: 100%; 419 font-size: 0.52rem; 420 line-height: 1.15; 421 font-weight: 800; 422 color: currentColor; 423 text-align: center; 424 opacity: 0.68; 425 overflow-wrap: anywhere; 426`,fr=l.div` 427 display: flex; 428 justify-content: center; 429 gap: 0.34rem; 430 margin: 0.08rem 0 0.2rem; 431`,gr=l.div` 432 width: 1.12rem; 433 height: 1.12rem; 434 border-radius: 999px; 435 display: grid; 436 place-items: center; 437 color: ${({$iconColor:t})=>t}; 438 background: ${({$iconColor:t})=>`${t}18`}; 439 border: 1px solid ${({$iconColor:t})=>`${t}52`}; 440 font-size: 0.48rem; 441`,hr=l.div` 442 width: 100%; 443 border-radius: ${({$layout:t})=>t==="editorial"?"0.25rem":"0.85rem"}; 444 background: rgba(255, 255, 255, 0.8); 445 color: #111827; 446 padding: ${({$layout:t})=>t==="compact"?"0.36rem":"0.5rem"}; 447 display: ${({$layout:t})=>t==="split"||t==="compact"?"grid":"block"}; 448 grid-template-columns: ${({$layout:t})=>t==="split"?"35% 1fr":t==="compact"?"2.15rem 1fr":"1fr"}; 449 gap: 0.42rem; 450 border: 1px solid rgba(255, 255, 255, 0.46); 451 box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1); 452`,pr=l.div` 453 width: 100%; 454 aspect-ratio: ${({$layout:t})=>t==="compact"?"1 / 1":t==="imageTop"?"1.8 / 1":"1.45 / 1"}; 455 border-radius: 0.55rem; 456 background: ${({$art:t})=>t||"linear-gradient(135deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.42))"}; 457`,mr=l.div` 458 display: grid; 459 align-content: center; 460 gap: 0.2rem; 461 min-width: 0; 462`,br=l.div` 463 color: #111827; 464 font-size: ${({$layout:t})=>t==="compact"?"0.5rem":"0.58rem"}; 465 line-height: 1.08; 466 font-weight: 900; 467 text-align: left; 468 display: -webkit-box; 469 -webkit-line-clamp: ${({$layout:t})=>t==="compact"?2:1}; 470 -webkit-box-orient: vertical; 471 overflow: hidden; 472`,xr=l.div` 473 color: rgba(17, 24, 39, 0.62); 474 font-size: 0.42rem; 475 line-height: 1.12; 476 font-weight: 700; 477 text-align: left; 478 display: -webkit-box; 479 -webkit-line-clamp: 2; 480 -webkit-box-orient: vertical; 481 overflow: hidden; 482`,yr=l.div` 483 color: rgba(17, 24, 39, 0.72); 484 font-size: 0.38rem; 485 line-height: 1; 486 font-weight: 900; 487 text-align: left; 488 text-transform: uppercase; 489 letter-spacing: 0; 490`,wr=l.div` 491 min-height: 1.06rem; 492 border-radius: ${({$style:t})=>t==="pill"?"999px":t==="rounded"?"0.45rem":"0.16rem"}; 493 background: ${({$buttonColor:t})=>t}; 494 color: ${({$buttonTextColor:t})=>t}; 495 box-shadow: ${({$shadow:t})=>t==="hard"?"2px 2px #111827":t==="soft"?"0 5px 12px rgba(15, 23, 42, 0.16)":"none"}; 496 display: grid; 497 place-items: center; 498 padding: 0 0.42rem; 499 margin-top: 0.12rem; 500 font-size: 0.42rem; 501 line-height: 1; 502 font-weight: 900; 503 text-align: center; 504 overflow-wrap: anywhere; 505`,vr=l.div` 506 width: 100%; 507 min-height: 1.65rem; 508 border-radius: ${({$style:t})=>t==="pill"?"999px":t==="rounded"?"0.55rem":"0.18rem"}; 509 background: ${({$buttonColor:t})=>t}; 510 color: ${({$buttonTextColor:t})=>t}; 511 margin-top: auto; 512 display: grid; 513 place-items: center; 514 box-shadow: ${({$shadow:t})=>t==="hard"?"4px 4px #111827":t==="soft"?"0 8px 18px rgba(15, 23, 42, 0.18)":"none"}; 515 516 span { 517 width: 42%; 518 height: 0.38rem; 519 border-radius: 999px; 520 background: currentColor; 521 } 522`,Cr=l.div` 523 display: inline-flex; 524 align-items: center; 525 gap: 0.45rem; 526 margin-top: 1.35rem; 527 color: #18215f; 528 font-size: 1.05rem; 529 font-weight: 900; 530`,kr=l.button` 531 margin-top: 0.85rem; 532 min-height: 2.65rem; 533 border: 1px solid #6d5dfc; 534 border-radius: 999px; 535 padding: 0 1.25rem; 536 background: ${({$active:t})=>t?"#6d5dfc":"#ffffff"}; 537 color: ${({$active:t})=>
537t?"#ffffff":"#5b4bff"}; 538 font-weight: 900; 539 cursor: pointer; 540`,jr=l.div` 541 min-height: 1.3rem; 542 margin-top: 0.75rem; 543 color: ${({$error:t})=>t?"#b91c1c":"#64748b"}; 544 font-size: 0.82rem; 545 font-weight: 700; 546 text-align: center; 547`,Sr=t=>t.backgroundType==="gradient"?t.bgValue||t.bgColor:t.bgValue||t.bgColor||"#ffffff",Pr=({disabled:t=!1,onApplied:y})=>{const d=Ue(),h=Ie(f=>f.profile),[w,V]=P.useState(Qo),[q,j]=P.useState(0),[_,Y]=P.useState(!1),[J,E]=P.useState(""),[$,S]=P.useState("");P.useEffect(()=>{let f=!0;return jo().then(M=>{f&&M.length>0&&V(M)}).catch(M=>{console.warn("Using local theme presets until the themes table is available.",M)}),()=>{f=!1}},[]),P.useEffect(()=>{const f=w.findIndex(M=>M.id===h.selectedThemeId);f>=0&&j(f)},[w,h.selectedThemeId]);const I=w[q]||w[0],T=P.useMemo(()=>ut(h,I?.design||{}),[I,h]),B=P.useMemo(()=>to(I),[I]),ae=P.useMemo(()=>or(I),[I]),ne=I?.id===h.selectedThemeId;P.useEffect(()=>{T.font&&eo.load({google:{families:[T.font]}})},[T.font]);const z=f=>{E(""),S(""),j(M=>(M+f+w.length)%w.length)},G=async()=>{if(!I||t||_)return;const f=ut(h,I.design||{});try{Y(!0),E(""),S(""),d(fe(f.backgroundType)),d(ee(f.bgValue)),d(ve(f.bgColor)),d(Fe(f.textColor)),d(ze(f.buttonColor)),d(Me(f.buttonTextColor)),d(ge(f.font)),d(Le(f.buttonType)),d(Ve(f.buttonStyle)),d(Re(f.buttonShadow)),d(st(f.iconColor)),d(lt(I.id)),d(ct(f)),d(dt(f.productCardLayout));const M={...h,...f,iconColor:f.iconColor};await Pe(M),await At({selectedThemeId:I.id,customDesign:f,productCardLayout:f.productCardLayout}),y?.(I,f),E("Applied")}catch(M){console.error("Error applying theme:",M),S("Theme could not be saved")}finally{Y(!1)}};return I?o.jsx(rr,{children:o.jsxs(ar,{children:[o.jsx(Ot,{type:"button",onClick:()=>z(-1),disabled:t||_,"aria-label":"Previous theme",children:o.jsx(Eo,{size:22})}),o.jsxs(nr,{children:[o.jsx(ir,{type:"button",onClick:G,disabled:t||_,$active:ne,$background:Sr(T),$textColor:T.textColor,style:{fontFamily:T.font},"aria-label":`Apply ${I.name} theme`,children:o.jsxs(sr,{children:[B.avatarStyle==="cover"?o.jsx(lr,{children:o.jsx("img",{src:Rt[B.avatarIndex],alt:`${B.name} preview cover`})}):o.jsx(cr,{src:Rt[B.avatarIndex],alt:`${B.name} preview avatar`,$shape:B.avatarStyle}),o.jsx(dr,{children:B.name}),o.jsx(ur,{children:B.handle}),o.jsx(fr,{"aria-label":"Theme social icon color preview",children:er.map((f,M)=>o.jsx(gr,{$iconColor:T.iconColor||T.buttonColor,children:o.jsx(lo,{icon:f})},M))}),ae.map(f=>o.jsxs(hr,{$layout:T.productCardLayout,children:[o.jsx(pr,{$layout:T.productCardLayout,$art:f.art}),o.jsxs(mr,{children:[o.jsx(br,{$layout:T.productCardLayout,children:f.title}),o.jsx(xr,{children:f.meta}),o.jsx(yr,{children:f.price}),o.jsx(wr,{$buttonColor:T.buttonColor,$buttonTextColor:T.buttonTextColor,$style:T.buttonStyle,$shadow:T.buttonShadow,children:f.cta})]})]},f.title)),o.jsx(vr,{$buttonColor:T.buttonColor,$buttonTextColor:T.buttonTextColor,$style:T.buttonStyle,$shadow:T.buttonShadow,children:o.jsx("span",{})})]})}),o.jsxs(Cr,{children:[ne&&o.jsx(co,{size:18}),I.name]}),o.jsx(kr,{type:"button",onClick:G,disabled:t||_,$active:ne,children:_?"Saving...":ne?"Selected":"Apply"}),o.jsx(jr,{$error:!!$,children:$||J})]}),o.jsx(Ot,{type:"button",onClick:()=>z(1),disabled:t||_,"aria-label":"Next theme",children:o.jsx(_o,{size:22})})]})}):null},Ir=l.div` 548 box-sizing: border-box; 549 display: flex; 550 flex-direction: column; 551 min-height: 0; 552 width: auto; 553 max-width: calc(100% - 2rem); 554 margin: 1rem; 555 556 @media (min-width: 768px) { 557 flex-direction: row; 558 } 559`,Tr=l.div` 560 width: 100%; 561 padding: 1rem; 562 display: flex; 563 flex-direction: column; 564 565 @media (min-width: 768px) { 566 width: 96%; 567 max-width: 64rem; 568 padding-right: 1rem; 569 } 570 571 @media (min-width: 1024px) { 572 padding-right: 3rem; 573 border-right: 2px solid #E8E8E6; 574 } 575 576 & > ${$e}:last-child { 577 margin-bottom: 0; 578 padding-bottom: 0; 579 } 580`,_e=l.label` 581 font-size: 1.7rem; 582 font-weight: 700; 583 margin: 1rem 0 1rem 0; 584 display: block; 585`,_r=l.div` 586 position: relative; 587 display: flex; 588 flex-direction: column; 589 width: 100%; 590 height: auto; 591 min-height: ${({$expanded:t})=>t?"43rem":"27rem"}; 592 overflow: hidden; 593 padding: 0; 594 margin-bottom: 2.5rem;
595 border: 1px solid rgba(148, 163, 184, 0.18); 596 border-radius: 28px; 597 box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08); 598 background: 599 radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 34rem), 600 linear-gradient(135deg, #ffffff 0%, #fbfbff 48%, #f8fafc 100%); 601 602 @media (max-width: 1180px) { 603 min-height: 0; 604 } 605`,$r=l.div` 606 display: flex; 607 align-items: center; 608 justify-content: space-between; 609 gap: 1rem; 610 padding: 1.4rem 1.6rem 0; 611 min-height: 3.25rem; 612`,Ar=l.div` 613 display: inline-flex; 614 align-items: center; 615 gap: 0.45rem; 616 width: fit-content; 617 border: 1px solid rgba(124, 58, 237, 0.16); 618 border-radius: 999px; 619 padding: 0.38rem 0.7rem; 620 color: #6d28d9; 621 background: rgba(255, 255, 255, 0.78); 622 font-size: 0.78rem; 623 font-weight: 700; 624`,Dr=l.span` 625 color: ${({$error:t})=>t?"#dc2626":"#64748b"}; 626 font-size: 0.82rem; 627 font-weight: 600; 628`,Er=l.div` 629 display: grid; 630 grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); 631 gap: clamp(1.5rem, 4vw, 3.25rem); 632 align-items: start; 633 padding: 1.45rem clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 3.25rem); 634 flex: 1; 635 636 @media (max-width: 1180px) { 637 grid-template-columns: 1fr; 638 gap: 1.25rem; 639 padding: 1.25rem 1rem 1.5rem; 640 } 641`,Br=l.div` 642 display: flex; 643 flex-direction: column; 644 align-items: center; 645 gap: 1rem; 646`,Nr=l.div` 647 position: relative; 648 width: 11rem; 649 height: 11rem; 650 min-width: 11rem; 651 min-height: 11rem; 652 border-radius: 999px; 653 padding: 0.45rem; 654 background: linear-gradient(135deg, #7c3aed, #ec4899 48%, #06b6d4); 655 box-shadow: 0 20px 48px rgba(79, 70, 229, 0.28); 656 657 @media (max-width: 1180px) { 658 width: 9.5rem; 659 height: 9.5rem; 660 min-width: 9.5rem; 661 min-height: 9.5rem; 662 } 663`,Dt=l.label` 664 position: relative; 665 display: flex; 666 width: 100%; 667 height: 100%; 668 aspect-ratio: 1 / 1; 669 align-items: center; 670 justify-content: center; 671 overflow: hidden; 672 border: 5px solid white; 673 border-radius: inherit; 674 background: linear-gradient(135deg, #f8fafc, #eef2ff); 675 color: #7c3aed; 676 cursor: pointer; 677 678 input { 679 display: none; 680 pointer-events: none; 681 } 682 683 &:focus-within { 684 outline: 3px solid rgba(124, 58, 237, 0.28); 685 outline-offset: 4px; 686 } 687`,qt=l.img` 688 width: 100%; 689 height: 100%; 690 aspect-ratio: 1 / 1; 691 object-fit: cover; 692 object-position: ${({$x:t=50,$y:y=50})=>`${t}% ${y}%`}; 693 border-radius: 999px; 694 transform: scale(1.08); 695`,Fr=l.div` 696 display: flex; 697 width: 100%; 698 height: 100%; 699 align-items: center; 700 justify-content: center; 701 font-size: 3rem; 702 font-weight: 800; 703`,zr=l.div` 704 position: absolute; 705 inset: 0; 706 display: flex; 707 flex-direction: column; 708 align-items: center; 709 justify-content: center; 710 gap: 0.35rem; 711 border-radius: inherit; 712 background: rgba(15, 23, 42, 0.62); 713 color: white; 714 opacity: 0; 715 transition: opacity 180ms ease; 716 text-align: center; 717 font-weight: 800; 718 719 ${Dt}:hover &, 720 ${Dt}:focus-within & { 721 opacity: 1; 722 } 723`,Mr=l.button` 724 display: inline-flex; 725 align-items: center; 726 gap: 0.45rem; 727 min-height: 2.5rem; 728 border: 1px solid rgba(220, 38, 38, 0.18); 729 border-radius: 999px; 730 padding: 0 0.9rem; 731 color: #b91c1c; 732 background: rgba(254, 242, 242, 0.9); 733 font-size: 0.86rem; 734 font-weight: 800; 735 cursor: pointer; 736 transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; 737 738 &:hover:not(:disabled) { 739 transform: translateY(-1px); 740 background: #fee2e2; 741 box-shadow: 0 10px 24px rgba(220, 38, 38, 0.12); 742 } 743 744 &:disabled { 745 cursor: not-allowed; 746 opacity: 0.55; 747 } 748`,Lr=l.label` 749 display: flex; 750 align-items: flex-start; 751 gap: 0.65rem; 752 max-width: 17rem; 753 color: #334155; 754 font-size: 0.9rem; 755 font-weight: 800; 756 line-height: 1.3; 757 cursor: pointer; 758 759 input { 760 width: 1rem; 761 height: 1rem; 762 margin-top: 0.12rem; 763 accent-color: #7c3aed; 764 flex: 0 0 auto; 765 } 766 767 span { 768 color: #64748b; 769 display: block; 770 font-size: 0.78rem; 771 font-weight: 700; 772 line-height: 1.38; 773 margin-top: 0.42rem; 774 } 775`,Vr=l.label` 776 display: flex; 777 align-items: center; 778 justify-content: space-between; 779 gap: 0.9rem; 780 width: min(100%, 18rem); 781 color: #334155; 782 font-size: 0.9rem; 783 font-weight: 800; 784 line-height: 1.3; 785 cursor: pointer; 786 787 input { 788 position: absolute; 789 opacity: 0; 790 pointer-events: none; 791 } 792 793 span { 794 color: #64748b; 795 display: block; 796 font-size: 0.78rem; 797 font-weight: 700; 798 line-height: 1.38; 799 margin-top: 0.35rem; 800 } 801`,Rr=l.div` 802 position: relative; 803 flex: 0 0 auto; 804 width: 2.85rem; 805 height: 1.55rem; 806 border-radius: 999px; 807 background: ${({$checked:t})=>t?"#7c3aed":"#cbd5e1"}; 808 box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); 809 transition: background 160ms ease, opacity 160ms ease; 810 811 &::after { 812 content: ''; 813 position: absolute; 814 top: 0.2rem; 815 left: ${({$checked:t})=>t?"1.5rem":"0.2rem"}; 816 width: 1.15rem; 817 height: 1.15rem; 818 border-radius: 999px; 819 background: #ffffff; 820 box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); 821 transition: left 160ms ease; 822 } 823`,oo=l.div` 824 width: min(100%, 18rem); 825 display: grid; 826 gap: 0.55rem; 827 828 @media (max-width: 900px) { 829 width: min(100%, 22rem); 830 } 831`,ft=l.div` 832 position: relative; 833 width: 100%; 834 aspect-ratio: 16 / 7; 835 overflow: hidden;
836 border: 1px solid rgba(148, 163, 184, 0.32); 837 border-radius: 14px; 838 background: 839 linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(124, 58, 237, 0.08)); 840 cursor: ${({$dragging:t})=>t?"grabbing":"grab"}; 841 touch-action: none; 842 user-select: none; 843 844 &:focus-visible { 845 outline: 3px solid rgba(124, 58, 237, 0.28); 846 outline-offset: 3px; 847 } 848`,Ur=l(oo)` 849 width: min(100%, 13rem); 850`,Or=l(ft)` 851 width: min(100%, 9rem); 852 aspect-ratio: 1 / 1; 853 margin: 0 auto; 854 border-radius: 999px; 855 background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(124, 58, 237, 0.08)); 856`,Yt=l.div` 857 position: absolute; 858 inset: 0; 859 pointer-events: none; 860 background: 861 linear-gradient(90deg, rgba(255,255,255,0.28) 1px, transparent 1px), 862 linear-gradient(0deg, rgba(255,255,255,0.28) 1px, transparent 1px); 863 background-size: 33.333% 100%, 100% 50%; 864 opacity: 0; 865 transition: opacity 160ms ease; 866 867 ${ft}:hover &, 868 ${ft}:focus-visible & { 869 opacity: 1; 870 } 871`,Xt=l.div` 872 display: flex; 873 align-items: center; 874 justify-content: space-between; 875 gap: 0.75rem; 876 color: #64748b; 877 font-size: 0.72rem; 878 font-weight: 800; 879`,Gt=l.button` 880 border: 0; 881 padding: 0; 882 color: #6d28d9; 883 background: transparent; 884 font: inherit; 885 cursor: pointer; 886 887 &:hover { 888 color: #4c1d95; 889 } 890`,qr=l.label` 891 display: grid; 892 gap: 0.45rem; 893 color: #334155; 894 font-size: 0.78rem; 895 font-weight: 800; 896 897 input { 898 width: 100%; 899 accent-color: #7c3aed; 900 } 901`,Yr=l.div` 902 display: grid; 903 gap: 1rem; 904 width: 100%; 905 max-width: 28rem; 906`,Ht=l.div` 907 position: relative; 908 display: flex; 909 flex-direction: column; 910 gap: 0.45rem; 911 padding: 0.95rem 1rem; 912 border: 1px solid ${t=>t.$hasError?"#ef4444":"rgba(148, 163, 184, 0.28)"}; 913 border-radius: 18px; 914 background: rgba(255, 255, 255, 0.86); 915 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); 916 transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; 917 918 &:focus-within { 919 border-color: #8b5cf6; 920 background: #ffffff; 921 box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); 922 } 923`,nt=l.label` 924 color: #64748b; 925 font-size: 0.76rem; 926 font-weight: 800; 927 letter-spacing: 0; 928 text-transform: uppercase; 929`,Xr=l.input` 930 width: 100%; 931 border: 0; 932 outline: 0; 933 color: #0f172a; 934 background: transparent; 935 font-size: clamp(1.05rem, 2vw, 1.45rem); 936 font-weight: 700; 937 938 &::placeholder { 939 color: #94a3b8; 940 } 941`,Gr=l.textarea` 942 width: 100%; 943 min-height: 4.9rem; 944 max-height: 7.5rem; 945 resize: none; 946 border: 0; 947 outline: 0; 948 color: #0f172a; 949 background: transparent; 950 font-size: clamp(1rem, 1.7vw, 1.22rem); 951 font-weight: 600; 952 line-height: 1.45; 953 954 &::placeholder { 955 color: #94a3b8; 956 } 957`,Hr=l.div` 958 display: flex; 959 justify-content: flex-end; 960 color: ${({$isNearLimit:t})=>t?"#b45309":"#64748b"}; 961 font-size: 0.8rem; 962 font-weight: 800; 963`,Wr=l.div` 964 display: grid; 965 gap: 1rem; 966 grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); 967 padding: 0.75rem 1rem 0; 968`,Wt=l.div` 969 display: grid; 970 gap: 0.65rem; 971 padding: 1rem; 972 border: 1px solid rgba(148, 163, 184, 0.28); 973 border-radius: 8px; 974 background: #ffffff; 975`,Kt=l.div` 976 display: flex; 977 align-items: flex-start; 978 justify-content: space-between; 979 gap: 0.75rem; 980 981 span { 982 display: block; 983 margin-top: 0.25rem; 984 color: #64748b; 985 font-size: 0.78rem; 986 font-weight: 700; 987 line-height: 1.35; 988 } 989`,Zt=l.button` 990 border: 0; 991 background: transparent; 992 color: #7c3aed; 993 cursor: pointer; 994 flex: 0 0 auto; 995 font-size: 0.78rem; 996 font-weight: 850; 997 padding: 0; 998 999 &:disabled { 1000 color: #94a3b8; 1001 cursor: not-allowed; 1002 } 1003`,Jt=l.div` 1004 display: flex; 1005 align-items: center; 1006 gap: 0.75rem; 1007 1008 input[type='color'] { 1009 width: 3rem; 1010 height: 3rem; 1011 border: 0; 1012 padding: 0; 1013 background: transparent; 1014 cursor: pointer; 1015 1016 &:disabled { 1017 cursor: not-allowed; 1018 opacity: 0.55; 1019 } 1020 } 1021 1022 code { 1023 color: #334155; 1024 font-size: 0.82rem; 1025 font-weight: 800; 1026 } 1027`,Kr=l.p` 1028 color: #dc2626; 1029 font-size: 0.78rem; 1030 font-weight: 700; 1031 margin: 0; 1032`,Zr=()=>{const t=Ue(),y=P.useRef(null),d=P.useRef(null),h=P.useRef(null),[w,V]=P.useState(!1),[q,j]=P.useState(null),[_,Y]=P.useState(""),[J,E]=P.useState(!1),[$,S]=P.useState(!1),[I,T]=P.useState(!1),[B,ae]=P.useState(!1),[ne,z]=P.useState(!1),{updateProfileImage:G}=vo(),f=Ie(a=>a.profile),{profileName:M,bio:H,profileImage:R,textColor:be,buttonColor:xe,buttonTextColor:ye,font:ce,backgroundType:de,bgValue:Ce,bgColor:ke,buttonType:he,buttonStyle:pe,buttonShadow:me,socialDisplayPosition:je,socialIconColor:we,selectedThemeId:p,profileImageVisible:m,profileImageAsHero:c,profileImageCoverX:g,profileImageCoverY:C,profileImageCoverZoom:N,profileImageAvatarX:U,profileImageAvatarY:F,productCardLayout:K,productCardBackgroun
1032dColor:Z,productCardTextColor:X}=Ie(a=>a.profile);P.useEffect(()=>{(async()=>{try{const{data:{session:s},error:v}=await k.auth.getSession();if(v)throw v;if(!s?.user){j("Please login to access this page");return}B||await te()}catch(s){console.error("Auth check error:",s),j("Authentication error")}})()},[B,t]);const te=async()=>{try{V(!0),j(null);const a=await Nt();a?(t(Ct(a.profileName||"")),t(kt(a.bio||"")),t(He(a.profileImageVisible!==!1)),t(We(a.profileImage||null)),t(fe(a.backgroundType||"solid")),t(ee(a.bgValue||"#ffffff")),t(ve(a.bgColor||"linear-gradient(135deg, #00aaff, #ff00aa)")),t(Fe(a.textColor||"#000000")),t(ze(a.buttonColor||"#000000")),t(Me(a.buttonTextColor||"#ffffff")),t(ge(a.font||"Arial")),t(Le(a.buttonType||"fill")),t(Ve(a.buttonStyle||"default")),t(Re(a.buttonShadow||"none")),t(Bt(a.socialDisplayPosition||"bottom")),t(st(a.iconColor||"#000000")),t(lt(a.selectedThemeId||null)),t(ct(a.customDesign||{})),t(Ke(a.profileImageAsHero||!1)),t(Be({x:a.profileImageCoverX??50,y:a.profileImageCoverY??50})),t(jt(a.profileImageCoverZoom??1)),t(Ne({x:a.profileImageAvatarX??50,y:a.profileImageAvatarY??50})),t(dt(a.productCardLayout||"stacked")),t(Ze(a.productCardBackgroundColor||null)),t(Je(a.productCardTextColor||null)),ae(!0)):j("No profile data found")}catch(a){console.error("Error loading profile:",a),j("Failed to load profile data")}finally{V(!1)}};P.useEffect(()=>{B||(async()=>{try{V(!0),j(null);const s=await Nt();s&&(t(Ct(s.profileName)),t(kt(s.bio)),t(He(s.profileImageVisible!==!1)),t(We(s.profileImage||null)),t(fe(s.backgroundType)),t(ee(s.bgValue)),t(ve(s.bgColor)),t(Fe(s.textColor)),t(ze(s.buttonColor)),t(Me(s.buttonTextColor)),t(ge(s.font)),t(Le(s.buttonType)),t(Ve(s.buttonStyle)),t(Re(s.buttonShadow)),t(Bt(s.socialDisplayPosition)),t(st(s.iconColor||"#000000")),t(lt(s.selectedThemeId||null)),t(ct(s.customDesign||{})),t(Ke(s.profileImageAsHero||!1)),t(Be({x:s.profileImageCoverX??50,y:s.profileImageCoverY??50})),t(jt(s.profileImageCoverZoom??1)),t(Ne({x:s.profileImageAvatarX??50,y:s.profileImageAvatarY??50})),t(dt(s.productCardLayout||"stacked")),t(Ze(s.productCardBackgroundColor||null)),t(Je(s.productCardTextColor||null))),ae(!0)}catch(s){console.error("Error loading profile:",s),j(s.message||"Error loading profile data")}finally{V(!1)}})()},[t,B]);const ie=a=>{const s=a.target.value;s.length<=30?(t(Ct(s)),Y(""),z(!0)):Y("Title cannot be longer than 30 characters")},oe=a=>{const s=a.target.value;s.length<=80&&(t(kt(s)),z(!0))},re=async a=>{const s=a.target.files[0];if(s)try{V(!0),j(null);const v=await So(s);t(We(v)),G(v),z(!0)}catch(v){console.error("Upload error:",v),j(v.message)}finally{V(!1),y.current&&(y.current.value="")}},se=async a=>{const s=a.target.checked;t(Ke(s)),z(!0);try{await Ft(s)}catch(v){console.error("Error saving hero image setting:",v),j("Failed to save hero image setting"),z(!0)}},pt=async a=>{const s=a.target.checked;t(He(s)),z(!0);try{await Po(s)}catch(v){console.error("Error saving avatar visibility setting:",v),t(He(!s)),j("Failed to save avatar visibility setting")}},Ae=async a=>{try{j(null),await zt({...a,zoom:N??1})}catch(s){console.error("Error saving cover image position:",s),j("Failed to save cover image position")}},mt=a=>{const s=d.current;if(!s)return null;const v=a.currentTarget.getBoundingClientRect(),Ge=(a.clientX-s.startClientX)/v.width*100,vt=(a.clientY-s.startClientY)/v.height*100,Ee={x:Math.min(100,Math.max(0,Number((s.startX-Ge).toFixed(1)))),y:Math.min(100,Math.max(0,Number((s.startY-vt).toFixed(1))))};return t(Be(Ee)),Ee},bt=a=>{const s=h.current;if(!s)return null;const v=a.currentTarget.getBoundingClientRect(),Ge=(a.clientX-s.startClientX)/v.width*100,vt=(a.clientY-s.startClientY)/v.height*100,Ee={x:Math.min(100,Math.max(0,Number((s.startX-Ge*1.8).toFixed(1)))),y:Math.min(100,Math.max(0,Number((s.startY-vt*1.8).toFixed(1))))};return t(Ne(Ee)),Ee},Oe=a=>{!R||!c||(a.currentTarget.setPointerCapture(a.pointerId),d.current={startClientX:a.clientX,startClientY:a.clientY,startX:g??50,startY:C??50,latest:{x:g??50,y:C??50}},S(!0))},xt=a=>
1032{d.current&&(d.current.latest=mt(a))},qe=async a=>{if(!d.current)return;const s=d.current.latest||{x:g??50,y:C??50};d.current=null,S(!1),a.currentTarget.hasPointerCapture?.(a.pointerId)&&a.currentTarget.releasePointerCapture(a.pointerId),await Ae(s)},yt=async()=>{const a={x:50,y:50};t(Be(a)),await Ae(a)},wt=async a=>{const s=Number(a.target.value);t(jt(s)),z(!0);try{await zt({x:g??50,y:C??50,zoom:s})}catch(v){console.error("Error saving cover image zoom:",v),j("Failed to save cover image zoom")}},Te=async a=>{try{j(null),await To(a)}catch(s){console.error("Error saving avatar image position:",s),j("Failed to save profile image position")}},Ye=a=>{!R||c||(a.preventDefault(),a.currentTarget.setPointerCapture(a.pointerId),h.current={startClientX:a.clientX,startClientY:a.clientY,startX:U??50,startY:F??50,latest:{x:U??50,y:F??50}},T(!0))},De=a=>{h.current&&(h.current.latest=bt(a))},Se=async a=>{if(!h.current)return;const s=h.current.latest||{x:U??50,y:F??50};h.current=null,T(!1),a.currentTarget.hasPointerCapture?.(a.pointerId)&&a.currentTarget.releasePointerCapture(a.pointerId),await Te(s)},ue=async()=>{const a={x:50,y:50};t(Ne(a)),await Te(a)},Xe=async a=>{const s=a.shiftKey?10:2;let v={x:g??50,y:C??50};if(a.key==="ArrowLeft")v.x=Math.max(0,v.x-s);else if(a.key==="ArrowRight")v.x=Math.min(100,v.x+s);else if(a.key==="ArrowUp")v.y=Math.max(0,v.y-s);else if(a.key==="ArrowDown")v.y=Math.min(100,v.y+s);else return;a.preventDefault(),t(Be(v)),await Ae(v)},e=async a=>{const s=a.shiftKey?10:2;let v={x:U??50,y:F??50};if(a.key==="ArrowLeft")v.x=Math.max(0,v.x-s);else if(a.key==="ArrowRight")v.x=Math.min(100,v.x+s);else if(a.key==="ArrowUp")v.y=Math.max(0,v.y-s);else if(a.key==="ArrowDown")v.y=Math.min(100,v.y+s);else return;a.preventDefault(),t(Ne(v)),await Te(v)},r=async()=>{if(R)try{E(!0),j(null),await Io(R),await Ft(!1),t(We(null)),t(Ke(!1)),G(null),z(!0)}catch(a){console.error("Remove error:",a),j("Error removing profile image")}finally{E(!1)}},i=async(a,s)=>{try{t(fe(a)),t(a==="solid"?ve(s):ee(s)),await Pe({profileName:M,bio:H,profileImage:R,textColor:be,font:ce,backgroundType:a,bgValue:s}),await At({selectedThemeId:p,productCardLayout:K,customDesign:ut({...f,backgroundType:a,bgValue:s,bgColor:a==="solid"?s:ke})})}catch(v){console.error("Error updating background:",v),j("Error updating background")}},n=async a=>{try{const s=a.target.value;t(Fe(s)),await Pe({profileName:M,bio:H,profileImage:R,backgroundType:de,bgValue:Ce,font:ce,textColor:s}),z(!0)}catch(s){console.error("Error updating font color:",s),j("Error updating font color")}},u=a=>{t(Ze(a.target.value)),z(!0)},b=a=>{t(Je(a.target.value)),z(!0)},x=()=>{t(Ze(null)),z(!0)},A=()=>{t(Je(null)),z(!0)},D=a=>{a.target.value.length>=80&&a.key!=="Backspace"&&a.key!=="Delete"&&a.key!=="ArrowLeft"&&a.key!=="ArrowRight"&&a.preventDefault()};P.useEffect(()=>{if(!B||!ne)return;const a=setTimeout(async()=>{try{j(null),await Pe({profileName:M,bio:H,profileImage:R,backgroundType:de,bgValue:Ce,bgColor:ke,textColor:be,buttonColor:xe,buttonTextColor:ye,font:ce,buttonType:he,buttonStyle:pe,buttonShadow:me,socialDisplayPosition:je,iconColor:we,productCardBackgroundColor:Z,productCardTextColor:X}),await At({selectedThemeId:p,productCardLayout:K,customDesign:ut({...f,profileImageAsHero:c,profileImageCoverX:g,profileImageCoverY:C,profileImageCoverZoom:N,profileImageAvatarX:U,profileImageAvatarY:F,productCardBackgroundColor:Z,productCardTextColor:X})}),z(!1)}catch(s){console.error("Error saving profile:",s),j("Failed to save changes. Please try again.")}},1e3);return()=>clearTimeout(a)},[ne,B,M,H,R,de,Ce,ke,be,xe,ye,ce,he,pe,me,je,we,p,c,g,C,N,U,F,K,Z,X,f]);const O=(f.profileName||"Profile").trim().charAt(0).toUpperCase()||"P",L=80-(f.bio?.length||0),Q=f.productCardBackgroundColor||"#15112e",le=f.productCardTextColor||"#ffffff";return o.jsx(Ir,{children:o.jsxs(Tr,{children:[q&&o.jsx("div",{className:"text-red-500 mb-4",children:q}),o.jsx(_e,{children:"Profile"}),o.jsxs(_r,{$expanded:!!R,children:[o.jsxs($r,{children:[o.jsxs(Ar,{children:[o.jsx($o,{size:15}),"Public identity"]}),o.jsx(Dr,{$error:!!q,children:w?"Updating...":ne?"Saving changes...":"Autosaved"})]}),o.jsxs(Er,{children:[o.jsxs(Br,{children:[o.jsx(Nr,{children:o.jsxs(Dt,{"aria-label":f.profileImage&&!c?"Drag to adjust profile image position":"Upload or change profile image",onPointerDown:f.profileImage&&!c?Ye:void 0,onPointerMove:f.profileImage&&!c?De:void 0,onPointerUp:f.profileImage&&!c?Se:void 0,onPointerCancel:f.profileImage&&!c?Se:void 0,onKeyDown:f.profileImage&&!c?e:void 0,tabIndex:f.profileImage&&!c?0:void 0,style:{cursor:f.profileImage&&!c?I?"grabbing":"grab":"pointer"},children:[f.profileImage?o.jsx(qt,{src:f.profileImage,alt:"Profile preview",$x:U??50,$y:F??50}):o.jsx(Fr,{"aria-hidden":"true",children:O}),o.jsxs(zr,{children:[w?o.jsx(Do,{size:24}):o.jsx(Bo,{size:24}),o.jsx("span",{children:f.profileImage?"Change photo":"Add photo"})]}),o.jsx("input",{type:"file",accept:"image/jpeg,image/png,image/gif,image/webp",onChange:re,ref:y,disabled:w})]})}),R&&o.jsxs(Mr,{type:"button",onClick:r,disabled:J,children:[o.jsx(Ao,{size:15}),J?"Removing image...":"Remove image"]}),R&&B&&o.jsxs(Vr,{children:[o.jsxs("div",{children:["Show avatar picture",o.jsx("span",{children:"Display your profile photo on your public profile."})]}),o.jsx("input",{type:"checkbox",role:"switch",checked:m!==!1,onChange:pt}),o.jsx(Rr,{$checked:m!==!1,"aria-hidden":"true"})]}),o.jsxs(Lr,{children:[o.jsx("input",{type:"checkbox",checked:!!c,onChange:se,disabled:!R||m===!1}),o.jsxs("div",{children:["Show profile picture as hero image",o.jsx("span",{children:"Use this image as a cover at the top of your public profile."})]})]}),R&&m!==!1&&c&&o.jsxs(oo,{children:[o.jsxs(ft,{role:"img","aria-label":"Cover image position",tabIndex:0,$src:R,$x:g??50,$y:C??50,$dragging:$,onPointerDown:Oe,onPointerMove:xt,onPointerUp:qe,onPointerCancel:qe,onKeyDown:Xe,children:[o.jsx(Co,{src:R,alt:"","aria-hidden":"true",coverX:g??50,coverY:C??50,coverZoom:N??1}),o.jsx(Yt,{})]}),o.jsxs(qr,{children:["Image zoom (",Math.round((N??1)*100),"%)",o.jsx("input",{type:"range",min:"0.5",max:"2.5",step:"0.05",value:N??1,onChange:wt})]}),o.jsxs(Xt,{children:[o.jsx("span",{children:"Drag image to adjust cover"}),o.jsx(Gt,{type:"button",onClick:yt,children:"Reset"})]})]}),R&&m!==!1&&!c&&o.jsxs(Ur,{children:[o.jsxs(Or,{role:"img","aria-label":"Profile image position",tabIndex:0,$dragging:I,onPointerDown:Ye,onPointerMove:De,onPointerUp:Se,onPointerCancel:Se,onKeyDown:e,children:[o.jsx(qt,{src:R,alt:"","aria-hidden":"true",$x:U??50,$y:F??50}),o.jsx(Yt,{})]}),o.jsxs(Xt,{children:[o.jsx("span",{children:"Drag image to adjust avatar"}),o.jsx(Gt,{type:"button",onClick:ue,children:"Reset"})]})]})]}),o.jsxs(Yr,{children:[o.jsxs(Ht,{$hasError:_!=="",children:[o.jsx(nt,{children:"Profile Title"}),o.jsx(Xr,{type:"text",value:f.profileName||"",onChange:ie,disabled:w,placeholder:"Add a profile title"})]}),_&&o.jsx(Kr,{children:_}),o.jsxs(Ht,{children:[o.jsx(nt,{children:"Bio"}),o.jsx(Gr,{value:f.bio||"",onChange:oe,onKeyDown:D,disabled:w,placeholder:"Write a short bio for your page",maxLength:80}),o.jsxs(Hr,{$isNearLimit:L<=12,children:[L,"/80"]})]})]})]})]}),o.jsx(_e,{children:"Themes"}),o.jsx($e,{children:o.jsx(Pr,{disabled:w,onApplied:()=>{z(!1)}})}
1032),o.jsx(_e,{children:"Backgrounds"}),o.jsx($e,{children:o.jsx(Go,{onChange:i,disabled:w,currentType:f.backgroundType,currentValue:f.bgValue,currentColor:f.bgColor})}),o.jsx(_e,{children:"Product Card"}),o.jsx($e,{children:o.jsxs(Wr,{children:[o.jsxs(Wt,{children:[o.jsxs(Kt,{children:[o.jsxs("div",{children:[o.jsx(nt,{children:"Card background"}),o.jsx("span",{children:"Overrides the product card surface color."})]}),o.jsx(Zt,{type:"button",onClick:x,disabled:w||!f.productCardBackgroundColor,children:"Reset"})]}),o.jsxs(Jt,{children:[o.jsx("input",{type:"color",value:Q,onChange:u,disabled:w,"aria-label":"Product card background color"}),o.jsx("code",{children:f.productCardBackgroundColor||"Theme default"})]})]}),o.jsxs(Wt,{children:[o.jsxs(Kt,{children:[o.jsxs("div",{children:[o.jsx(nt,{children:"Card text"}),o.jsx("span",{children:"Overrides titles, descriptions, and prices inside cards."})]}),o.jsx(Zt,{type:"button",onClick:A,disabled:w||!f.productCardTextColor,children:"Reset"})]}),o.jsxs(Jt,{children:[o.jsx("input",{type:"color",value:le,onChange:b,disabled:w,"aria-label":"Product card text color"}),o.jsx("code",{children:f.productCardTextColor||"Theme default"})]})]})]})}),o.jsx(_e,{children:"Font"}),o.jsxs($e,{children:[o.jsx(Wo,{selectedFont:f.font,onFontChange:a=>{t(ge(a)),z(!0)},disabled:w}),o.jsx("div",{children:o.jsxs("div",{className:"flex flex-col space-y-2",children:[o.jsx("label",{className:"text-lg m-4",children:"Font Color"}),o.jsx("div",{className:"flex justify-center w-20 mx-2 space-x-4 bg-gray-100 p-1 rounded-lg",children:o.jsxs("div",{className:"relative",children:[o.jsx("div",{className:"m-4 w-12 h-12 rounded-md cursor-pointer",style:{backgroundColor:f.textColor,border:"2px solid black"},onClick:()=>!w&&document.getElementById("fontColorInput").click()}),o.jsx("input",{type:"color",id:"fontColorInput",value:f.textColor,onChange:n,className:"absolute inset-0 opacity-0 w-full h-full cursor-pointer",disabled:w})]})})]})})]}),o.jsx(_e,{children:"Buttons"}),o.jsx($e,{children:o.jsx(Jo,{disabled:w,onChange:()=>z(!0),currentValues:{buttonColor:f.buttonColor,buttonTextColor:f.buttonTextColor,buttonType:f.buttonType,buttonStyle:f.buttonStyle,buttonShadow:f.buttonShadow}})})]})})},na=Object.freeze(Object.defineProperty({__proto__:null,default:Zr},Symbol.toStringTag,{value:"Module"}));export{Zr as A,Go as B,Do as C,Wo as F,Bo as I,$e as S,Pr as T,Jo as a,na as b};
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.