https://21st.dev/_next/static/chunks/84927-55926c6fb19028e5.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[84927],{33460:(e,t,a)=>{a.d(t,{S:()=>n});var r=a(465915),s=a(981452),o=a(882315),i=a(528688);let n=o.forwardRef(({className:e,...t},a)=>(0,r.jsx)(s.bL,{ref:a,className:(0,i.cn)("peer size-4 shrink-0 rounded border border-input shadow-sm shadow-black/5 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground",e),...t,children:(0,r.jsx)(s.C1,{className:"flex items-center justify-center text-current",children:"indeterminate"===t.checked?(0,r.jsx)("svg",{width:"9",height:"9",viewBox:"0 0 9 9",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"})}):(0,r.jsx)("svg",{width:"9",height:"9",viewBox:"0 0 9 9",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"})})})}));n.displayName=s.bL.displayName},133227:(e,t,a)=>{a.d(t,{y:()=>s});var r=a(852093);let s=(0,r.createServerReference)("00d80ed69dc86a4528637d5a4e58676367a24decbb",r.callServer,void 0,r.findSourceMapURL,"invalidateCacheAction")},264471:(e,t,a)=>{a.d(t,{Je:()=>n,U3:()=>l,VU:()=>i});var r=a(882315);let s="previewDemo",o="reopen-preview-demo";function i(e,t=!1){try{window.sessionStorage.setItem(o,JSON.stringify({demo:e,useCommunityPaths:t}))}catch{}let a=new URL(window.location.href);return a.searchParams.set(s,String(e.id)),`${a.pathname}${a.search}${a.hash}`}function n(){let e=new URL(window.location.href),t=e.searchParams.get(s);if(!t)return null;e.searchParams.delete(s),window.history.replaceState(window.history.state,"",`${e.pathname}${e.search}${e.hash}`);try{let e=window.sessionStorage.getItem(o);if(window.sessionStorage.removeItem(o),!e)return null;let a=JSON.parse(e);if(a&&function(e,t){if(!e||"object"!=typeof e)return!1;let a=e.component;return String(e.id)===t&&!!a&&"object"==typeof a&&!!a.user&&"object"==typeof a.user}(a.demo,t))return{demo:a.demo,useCommunityPaths:!!a.useCommunityPaths}}catch{}return null}function l({onReopen:e}){let t=r.useRef(!1);r.useEffect(()=>{if(t.current)return;t.current=!0;let a=n();a&&e(a.demo)},[e])}},320652:(e,t,a)=>{let r;a.d(t,{V:()=>d,l:()=>u});var s=a(465915),o=a(501277),i=a(882315),n=a(530794),l=a(528688);let d=i.createContext(!1);function c(e,t='12px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'){let a=Math.ceil(6.5*e.length)+22;return"u"<typeof document?a:(void 0===r&&(r=document.createElement("canvas").getContext("2d")),r)?(r.font=t,Math.ceil(r.measureText(e).width)+22):a}let m={text:"",kbd:"",detail:"",x:0,y:0,w:0,visible:!1,suppress:!0,side:"top"},u=i.forwardRef(function(e,t){let a,r,u,f,w,v,y,g,b,j,N,k,_,C,S,$=(0,o.c)(37),{children:E,className:T}=e,[I,O]=i.useState(!1);$[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>O(!0),r=[],$[0]=a,$[1]=r):(a=$[0],r=$[1]),i.useEffect(a,r);let D=i.useRef(null),[R,B]=i.useState(m),P=i.useRef(""),z=i.useRef(null),F=i.useRef(null);$[2]!==t?(u=e=>{D.current=e,"function"==typeof t?t(e):t&&(t.current=e)},$[2]=t,$[3]=u):u=$[3];let A=u;$[4]===Symbol.for("react.memo_cache_sentinel")?(f=e=>{if(!(e instanceof Element))return null;let t=e.closest("[data-morph-tip]");return t&&D.current?.contains(t)?t:null},$[4]=f):f=$[4];let L=f;$[5]!==R.visible?(w=(e,t)=>{let a=e.getAttribute("data-morph-tip");if(!a)return;let r=e.getAttribute("data-morph-kbd")??"",s=e.getAttribute("data-morph-detail")??"",o=e.getBoundingClientRect(),i=Math.max(c(a),s?c(s,'11px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'):0),n=o.top-8-28>=6?"top":"bottom",l=i/2,d={x:Math.min(Math.max(o.left+o.width/2,6+l),window.innerWidth-6-l),y:"top"===n?o.top-8:o.bottom+8,w:i,text:a,kbd:r,detail

1:s,side:n},m=`${a}|${r}|${s}|${Math.round(d.x)}|${Math.round(d.y)}|${d.w}|${n}`;if(F.current&&(clearTimeout(F.current),F.current=null),R.visible){m!==P.current&&(P.current=m,B({...d,visible:!0,suppress:!1}));return}m!==P.current&&(P.current=m,B({...d,visible:!1,suppress:!0})),z.current||(z.current=setTimeout(()=>{z.current=null,B(p)},250*!t))},$[5]=R.visible,$[6]=w):w=$[6];let M=w;$[7]===Symbol.for("react.memo_cache_sentinel")?(v=()=>{z.current&&(clearTimeout(z.current),z.current=null),F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{P.current="",B(h)},80)},$[7]=v):v=$[7];let U=v;return($[8]===Symbol.for("react.memo_cache_sentinel")?(y=()=>()=>{z.current&&clearTimeout(z.current),F.current&&clearTimeout(F.current)},g=[],$[8]=y,$[9]=g):(y=$[8],g=$[9]),i.useEffect(y,g),$[10]!==R.visible?(j=()=>{if(!R.visible)return;let e=()=>{P.current="",B(x)};return window.addEventListener("scroll",e,{capture:!0,passive:!0}),window.addEventListener("resize",e,{passive:!0}),()=>{window.removeEventListener("scroll",e,{capture:!0}),window.removeEventListener("resize",e)}},b=[R.visible],$[10]=R.visible,$[11]=b,$[12]=j):(b=$[11],j=$[12]),i.useEffect(j,b),$[13]!==M?(N=e=>{if("mouse"!==e.pointerType)return;let t=L(document.elementFromPoint(e.clientX,e.clientY));t?M(t,!1):U()},$[13]=M,$[14]=N):N=$[14],$[15]!==M?(k=e=>{let t=L(e.target);t&&t.matches(":focus-visible")&&M(t,!0)},$[15]=M,$[16]=k):k=$[16],$[17]!==E||$[18]!==T||$[19]!==A||$[20]!==N||$[21]!==k?(_=(0,s.jsx)("div",{ref:A,className:T,onPointerMove:N,onPointerLeave:U,onFocusCapture:k,onBlurCapture:U,children:E}),$[17]=E,$[18]=T,$[19]=A,$[20]=N,$[21]=k,$[22]=_):_=$[22],$[23]!==I||$[24]!==R.detail||$[25]!==R.kbd||$[26]!==R.side||$[27]!==R.suppress||$[28]!==R.text||$[29]!==R.visible||$[30]!==R.w||$[31]!==R.x||$[32]!==R.y)?(C=I&&(0,n.createPortal)((0,s.jsxs)("div",{className:(0,l.cn)("morph-tip rounded-md border border-border bg-popover text-popover-foreground shadow-lg dark","bottom"===R.side&&"morph-tip--below",(R.kbd||R.detail)&&"morph-tip--stacked",R.visible&&"is-visible",R.suppress&&"is-suppressed"),style:{"--morph-x":`${R.x}px`,"--morph-y":`${R.y}px`,"--morph-w":`${R.w}px`},"aria-hidden":!0,children:[(0,s.jsx)("span",{className:"morph-tip__text",children:R.text}),R.kbd&&(0,s.jsx)("span",{className:"morph-tip__kbd",children:R.kbd}),R.detail&&(0,s.jsx)("span",{className:"morph-tip__detail",children:R.detail.split(/(,\s|\s·\s)/).map((e,t)=>{let a=e.startsWith("+")?"morph-tip__in":e.startsWith("-")?"morph-tip__out":null;return a?(0,s.jsx)("span",{className:a,children:e},t):e})})]}),document.body),$[23]=I,$[24]=R.detail,$[25]=R.kbd,$[26]=R.side,$[27]=R.suppress,$[28]=R.text,$[29]=R.visible,$[30]=R.w,$[31]=R.x,$[32]=R.y,$[33]=C):C=$[33],$[34]!==_||$[35]!==C?(S=(0,s.jsxs)(d.Provider,{value:!0,children:[_,C]}),$[34]=_,$[35]=C,$[36]=S):S=$[36],S});function p(e){return{...e,visible:!0,suppress:!1}}function h(e){return{...e,visible:!1}}function x(e){return{...e,visible:!1}}},510468:(e,t,a)=>{a.d(t,{v:()=>d});var r=a(501277),s=a(17660),o=a(882315),i=a(890754),n=a(991583),l=a(201147);function d(e){let t,a,d,c,m,u,p=(0,r.c)(20),{isSignedIn:h,isLoaded:x}=(0,s.Jd)(),{track:f}=(0,l.n)(),[w,v]=(0,o.useState)(null),[y,g]=(0,o.useState)(!1),b=(0,o.useRef)(null),{isOpen:j}=e,N=null===e.entityId||void 0===e.entityId?null:String(e.entityId);p[0]!==x||p[1]!==h?(t=()=>{x?v(h?{audience:"signed-in",arm:null}:{audience:"anonymous",arm:(0,n.Bg)((0,i.Ck)())}):v(null)},a=[x,h],p[0]=x,p[1]=h,p[2]=t,p[3]=a):(t=p[2],a=p[3]),(0,o.useEffect)(t,a),p[4]!==x||p[5]!==h||p[6]!==w?(d=(0,n.uJ)(x,h,w),p[4]=x,p[5]=h,p[6]=w,p[7]=d):d=p[7];let k=d,_=e.disabled?null:k.arm,C=k.ready;return p[8]!==_||p[9]!==N||p[10]!==x||p[11]!==j||p[12]!==h||p[13]!==f?(c=()=>{if(!j){b.current=null,g(!1);return}if(h)return void g(!1);if(!x||!N||!_||b.current===N)return;b.current=N;let e=(0,n.OT)(),t=(0,n.Ek)(_,e);g(t),e<=n.qD||f("auth_gate.shown",{entityType:"component",entityId:N,surface:"preview_dialog",properties:{experiment:n.Q1,arm:_,opens:e,free:n.qD,walled:t}})},m=[j,x,h,N,_,f],p[8]=_,p[9]=N,p[10]=x,p[11]=j,p[12]=h,p[13]=f,p[14]=c,p[15]=m):(c=p[14],m=p[15]),(0,o.useEffect)(c,m),p[16]!==_||p[17]!==y||p[18]!==C?(u={gated:y,arm:_,ready:C},p[16]=_,p[17]=y,p[18]=C,p[19]=u):u=p[19],u}},621877:(e,t,a)=>{a.d(t,{Bc:()=>n,ZI:()=>c,k$:()=>d,m_:()=>l});var r=a(465915),s=a(792900),o=a(882315),i=a(528688);let n=s.Kq,l=s.bL,d=s.l9,c=o.forwardRef(({className:e,sideOffset:t=4,showArrow:a=!1,...o},n)=>(0,r.jsx)(s.ZL,{children:(0,r.jsxs)(s.UC,{ref:n,sideOffset:t,"data-tooltip":"true",className:(0,i.cn)("relative z-50 max-w-[280px] flex flex-col items-start gap-0.5 rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:sli

1de-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark",e),...o,children:[o.children,a&&(0,r.jsx)(s.i3,{className:"-my-px fill-popover drop-shadow-[0_1px_0_oklch(var(--border))]"})]})}));c.displayName=s.UC.displayName},791807:(e,t,a)=>{a.d(t,{A:()=>r});let r=async e=>{let t=e.split("/").slice(-1)[0];try{let a=await fetch(e);if(!a.ok)throw console.error(`Error response in fetching file ${t}`,a),Error(`Error response in fetching file ${t}: ${a.statusText}`);return{data:await a.text(),error:null}}catch(e){return console.error(`Failed to fetch file ${t}`,e),{error:Error(`Failed to fetch file ${t}: ${e}`),data:null}}}},802467:(e,t,a)=>{a.r(t),a.d(t,{LandingComponentsPreviewDialog:()=>ee});var r=a(465915),s=a(373277),o=a(882315),i=a(800779),n=a(987460),l=a(621877),d=a(320652),c=a(942005),m=a(515955),u=a(423732),p=a(578560),h=a(682749),x=a(815186),f=a(510468),w=a(528688),v=a(873588),y=a(543926),g=a(27786),b=a(320462),j=a(675804),N=a(639969),k=a(71500),_=a(906577),C=a(791807),S=a(17660),$=a(124730),E=a(398590),T=a(93228),I=a(81141),O=a(856151),D=a(415835),R=a(322203),B=a(230192),P=a(312691),z=a(910410),F=a.n(z),A=a(851472),L=a(264471),M=a(799684),U=a(641028),K=a(399598),H=a(678538),J=a(518367),V=a(503993),X=a(15356),Z=a(201147),q=a(216196),Y=a(522074);let Q=(0,O.tG)("previewDialogSelectedPromptType",y.JQ.EXTENDED),W=(0,O.tG)("previewDialogCopyAction","prompt"),G={prompt:"Copy prompt",code:"Copy code","code-with-demo":"Copy code + demo"};function ee({isOpen:e,onClose:t,demo:a,onPrevious:O,onNext:z,hasPrevious:et=!1,hasNext:ea=!1,isLoadingNext:er=!1,useCommunityPaths:es=!1,winnerBadges:eo,sourceContext:ei}){let[en,el]=(0,o.useState)("dark"),[ed,ec]=(0,o.useState)(!1),[em,eu]=(0,o.useState)(!1),[ep,eh]=(0,o.useState)(!1),[ex,ef]=(0,o.useState)(!1),ew=(0,q.j)(e),ev=(0,I.Xr)(U.a),ey=a.component?.user||a.user,eg=(0,X.o)(a),{data:eb}=v.api.libraries.getPublicBrandById.useQuery({id:eg},{enabled:ew&&!!eg,staleTime:1/0}),{data:ej}=v.api.libraries.getPublicBrandForComponent.useQuery({componentId:a.component.id},{enabled:ew&&!eg&&a.component.id>0,staleTime:1/0}),eN=eb??ej,ek=ey?.username||"",e_=eN?.kind==="team"?eN.slug:eN?.kind==="library"?eN.ownerHandle:ek,eC=eN?eN.name||eN.slug:ey?.name||ey?.username||"21st",eS=eN?.kind==="team"?`/@${eN.slug}`:eN?.kind==="library"?`/@${eN.ownerHandle}/library/${eN.slug}`:es?`/@${ek}`:`/${ek}`,e$=eN?"team"===eN.kind?(0,r.jsx)(b.n,{brand:eN,size:28,className:"shrink-0"}):(0,r.jsx)(g.f,{brand:eN,size:28,className:"shrink-0"}):(0,r.jsx)(j.H,{src:ey?.display_image_url||ey?.image_url||"/placeholder.svg",alt:eC,size:28,isClickable:!0,user:ey,className:"shrink-0",style:{width:28,height:28,borderRadius:"30%",cornerShape:"superellipse(1.25)",boxShadow:"0 1px 2px -0.5px rgba(0,0,0,0.18)"}}),[eE,eT]=(0,o.useState)(!1),[eI,eO]=(0,o.useState)(!1),[eD,eR]=(0,o.useState)(0),{showDialog:eB,setShowDialog:eP,incrementUsage:ez}=(0,p.p)("21st"),{user:eF}=(0,S.Jd)(),eA=(0,E.KX)(),{capture:eL}=(0,u.S)(),{track:eM}=(0,Z.n)(),eU=(0,I.md)(Q),[eK,eH]=(0,I.fp)(W),eJ=(0,h.al)(),{gatedCopy:eV,revealCopy:eX}=(0,x.S)({onMembershipRequired:(e={entityType:"component"})=>{ev({open:!0,returnTo:(0,L.VU)(a,es),source:"preview-dialog",...e})}}),eZ=a.component?.id??a.component_id,eq=e=>{eZ&&ei?.search&&eM("search.success",{entityType:"component",entityId:eZ,source:"search",surface:"preview_dialog",flowId:ei.search.flowId,properties:(0,Y.n)(ei.search,{success_kind:e,demo_id:a.id})})},eY=(0,f.v)({isOpen:e,entityId:eZ,disabled:!0}),eQ=o.useRef(null);(0,o.useEffect)(()=>{if(!e){eQ.current=null;return}if(!eZ||!eY.ready)return;let t=String(eZ);eQ.current!==t&&(eQ.current=t,eL(eZ,y.oC.COMPONENT_VIEW,eF?.id,{source:ei?.source||"direct",surface:"preview_dialog",sourceDetail:ei?.sourceDetail}),eM("entity.preview_open",{entityType:"component",entityId:eZ,surface:"preview_dialog",...ei?.search?{source:"search",flowId:ei.search.flowId,properties:(0,Y.n)(ei.search,{demo_id:a.id,anon_gate_arm:eY.arm??""})}:{source:ei?.source||"landing",properties:{demo_id:a.id,anon_gate_arm:eY.arm??""}}}

1))},[e,eZ,eF?.id,eL,eM,eY.ready]);let eW=()=>{eT(!0),eZ&&eL(eZ,y.oC.DONATION_SUPPORT_CLICK,eF?.id)},eG=a.bundle_html_url||a.bundle_url?.html,e0=(0,N.b)(),e1=v.api.demos.myBookmarkIds.useQuery(void 0,{enabled:ew&&!!eF?.id,staleTime:3e5}),e4=o.useMemo(()=>{let e=Number(a?.id);return(e1.data||[]).map(e=>Number(e)).includes(e)},[e1.data,e1.isFetching,e1.isStale,a?.id]),e5=v.api.useUtils(),e2=v.api.demos.toggleBookmark.useMutation({onMutate:async({demoId:e,bookmarked:t})=>{await e5.demos.myBookmarkIds.cancel();let a=e5.demos.myBookmarkIds.getData(),r=Number(e);if(t){let e=(a||[]).filter(e=>Number(e)!==r);e5.demos.myBookmarkIds.setData(void 0,e)}else{let e=[...a||[],r];e5.demos.myBookmarkIds.setData(void 0,e)}return{previousBookmarks:a}},onSuccess:async()=>{await e5.demos.myBookmarkIds.invalidate()},onError:(e,t,a)=>{console.error("[preview-dialog][bookmark] toggle error",e),a?.previousBookmarks&&e5.demos.myBookmarkIds.setData(void 0,a.previousBookmarks)}}),e8=async()=>{if(eF)try{await e2.mutateAsync({demoId:a.id,bookmarked:e4,source:ei?.source||"landing",surface:"preview_dialog"}),e4||eq("bookmark"),J.toast.success(e4?"Removed from bookmarks":"Added to bookmarks")}catch(e){console.error("Bookmark error:",e),J.toast.error("Failed to update bookmark")}};if(!eG)return null;let e3=async()=>{let e=a.component?.id??a.component_id;if(!e)return void J.toast.error("Failed to copy prompt");ec(!0);try{await eV({subjectType:"prompt",componentId:e,demoId:a.id},async()=>{let e=await fetch("/api/prompts",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt_type:eU,demo_id:a.id})});if(!e.ok){let t=await e.json();throw Error(t.error||"Failed to generate prompt")}let{prompt:t}=await e.json();return t})&&(eL&&eL(e,y.oC.COMPONENT_PROMPT_COPY,eF?.id,{source:ei?.source||"direct",sourceDetail:{...ei?.sourceDetail??{},prompt_type:eU},surface:"preview_dialog"}),eq("prompt_copy"),eh(!0),setTimeout(()=>eh(!1),2e3),ez())}catch(e){console.error("Error copying prompt:",e),J.toast.error(e instanceof Error?e.message:"Failed to copy prompt")}finally{ec(!1)}},e9=async()=>{let e=a.component?.id??a.component_id;if(!e)return void J.toast.error("Failed to copy code");ec(!0);try{await eX({componentId:e,demoId:a.id})&&(eL&&eL(e,y.oC.COMPONENT_CODE_COPY,eF?.id,{source:ei?.source||"direct",sourceDetail:ei?.sourceDetail,surface:"preview_dialog"}),eq("code_copy"),eh(!0),setTimeout(()=>eh(!1),2e3),ez())}catch(e){console.error("Error copying code:",e),J.toast.error(e instanceof Error?e.message:"Failed to copy code")}finally{ec(!1)}},e7=async()=>{let e=a.component?.id??a.component_id,t=a.demo_code;if(!e||!t)return void J.toast.error("Failed to copy code + demo");ec(!0);try{await eX({componentId:e,demoId:a.id},async e=>{let a=await (0,C.A)(t);if(a.error||!a.data)throw Error("Failed to fetch demo code");return`// --- Component ---
2${e}
3
4// --- Demo ---
5${a.data}`})&&(eL&&eL(e,y.oC.COMPONENT_CODE_COPY,eF?.id,{source:ei?.source||"direct",sourceDetail:ei?.sourceDetail,surface:"preview_dialog"}),eq("code_with_demo_copy"),eh(!0),setTimeout(()=>eh(!1),2e3),ez())}catch(e){console.error("Error copying code + demo:",e),J.toast.error(e instanceof Error?e.message:"Failed to copy code + demo")}finally{ec(!1)}},e6=e=>{if(!eF){eM("copy_gate.hit",{entityType:"component",entityId:eZ??a.id,source:"landing",surface:"preview_dialog",properties:{action:e,demo_id:a.id}}),eA(T.SE);return}"code"===e?e9():"code-with-demo"===e?e7():e3()},te=()=>e6(eK),tt=()=>{eu(!0);let e=(0,V.ZZ)(e_,a.component.component_slug,a.demo_slug);window.location.href=e},ta=async()=>{let e=`${window.location.origin}${(0,V.ZZ)(e_,a.component.component_slug,a.demo_slug)}`;await navigator.clipboard.writeText(e),ef(!0),setTimeout(()=>ef(!1),2e3)},tr=()=>{if(eG){let e=`${eG}?theme=${en}${"dark"===en?"&dark=true":""}`;window.open(e,"_blank")}},ts=()=>{el(e=>"dark"===e?"light":"dark")},to=()=>{eR(e=>e+1),(0,J.toast)("Refreshing preview..."),setTimeout(()=>eO(!1),300)},ti=(0,r.jsxs)("div",{className:"mx-auto flex items-center gap-1",children:[(0,r.jsx)(i.$,{onClick:tt,variant:"ghost",disabled:em,className:"h-9 gap-1.5 rounded-full px-3.5 text-sm text-white hover:bg-white/10 hover:text-white hover:backdrop-blur-md active:bg-white/15 active:backdrop-blur-md [&_svg]:!text-white",children:"Open"}),(0,r.jsxs)("div",{className:"inline-flex items-center",children:[(0,r.jsxs)(i.$,{onClick:te,variant:"default",className:"h-9 px-4 roun

5ded-full rounded-r-none relative overflow-hidden",autoFocus:!0,disabled:ed,"data-test":"prompt"===eK?"copy-prompt-button":"code"===eK?"copy-code-button":"copy-code-with-demo-button",size:"sm",children:[(0,r.jsxs)("div",{className:(0,w.cn)("flex items-center gap-1.5 transition-[opacity,transform] duration-200 ease-out",ep?"opacity-0 -translate-y-full":"opacity-100 translate-y-0"),children:[(0,r.jsxs)("div",{className:"relative w-4 h-4",children:[(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300 ease-in-out",ed?"scale-100 opacity-100":"scale-0 opacity-0"),children:(0,r.jsx)(k.X1U,{className:"w-4 h-4"})}),(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300 ease-in-out",ed?"scale-0 opacity-0":"scale-100 opacity-100"),children:"prompt"===eK?(0,r.jsx)(k.F1M,{className:"w-4 h-4"}):(0,r.jsx)(B.A,{className:"w-4 h-4"})})]}),(0,r.jsx)("span",{className:"whitespace-nowrap",children:G[eK]})]}),(0,r.jsxs)("div",{className:(0,w.cn)("absolute inset-0 flex items-center justify-center gap-1.5 transition-[opacity,transform] duration-200 ease-out",ep?"opacity-100 translate-y-0":"opacity-0 translate-y-full"),children:[(0,r.jsx)(k.ODX,{className:"w-4 h-4"}),(0,r.jsx)("span",{className:"whitespace-nowrap",children:"Copied!"})]})]}),(0,r.jsxs)(_.rI,{children:[(0,r.jsx)(_.ty,{asChild:!0,children:(0,r.jsx)(i.$,{variant:"default",size:"icon",disabled:ed,"aria-label":"Change copy action",className:"h-9 w-8 rounded-full rounded-l-none border-l border-primary-foreground/30 px-0",children:(0,r.jsx)(P.A,{className:"w-4 h-4"})})}),(0,r.jsx)(_.SQ,{align:"end",sideOffset:4,className:"dark max-w-64 md:max-w-xs",children:(0,r.jsxs)(_.Hr,{value:eK,onValueChange:e=>{eH(e),e6(e)},children:[(0,r.jsx)(_.Ht,{value:"prompt",className:"items-start [&>span]:pt-1.5",children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsx)("span",{className:"text-sm font-medium",children:"Copy prompt"}),(0,r.jsx)("span",{className:"text-xs text-muted-foreground",children:"AI-ready prompt with full component context."})]})}),(0,r.jsx)(_.Ht,{value:"code",className:"items-start [&>span]:pt-1.5",children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsx)("span",{className:"text-sm font-medium",children:"Copy code"}),(0,r.jsx)("span",{className:"text-xs text-muted-foreground",children:"Raw source code of the component."})]})}),(0,r.jsx)(_.Ht,{value:"code-with-demo",className:"items-start [&>span]:pt-1.5",disabled:!a.demo_code,children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsx)("span",{className:"text-sm font-medium",children:"Copy code + demo"}),(0,r.jsx)("span",{className:"text-xs text-muted-foreground",children:"Component source together with its demo usage."})]})})]})})]})]})]});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(c.LO,{isOpen:e,onClose:t,onPrevious:O,onNext:z,hasPrevious:et,hasNext:ea,nextLoading:er,preventInitialFocus:!0,onExtraKeyDown:e=>{let t;"KeyF"===e.code?(e.preventDefault(),tr()):"Enter"===e.code?(e.preventDefault(),te()):"KeyO"===e.code?(e.preventDefault(),t=(0,V.ZZ)(e_,a.component.component_slug,a.demo_slug),window.open(t,"_blank")):"KeyB"!==e.code||e.shiftKey?"KeyR"!==e.code||e.shiftKey?"KeyT"!==e.code||e.shiftKey?"KeyS"!==e.code||e.shiftKey||(e.preventDefault(),ta()):(e.preventDefault(),ts()):(e.preventDefault(),eI||(eO(!0),to())):(e.preventDefault(),eF&&e8())},lightboxActions:ti,contentClassName:"flex flex-col bg-background",dialogContentProps:{"data-test":"component-preview-dialog","data-demo-id":a.id},toolbar:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"flex items-center gap-2.5 min-w-0 text-left",children:[e$,(0,r.jsxs)(n.L3,{className:"text-sm font-medium truncate flex items-center gap-1.5",children:[a.component.name,eo&&eo.length>0&&(0,r.jsx)(K.q,{badges:eo,size:14,maxBadges:1})]}),a.user?.donation_url&&(0,r.jsxs)(l.m_,{children:[(0,r.jsx)(l.k$,{asChild:!0,children:(0,r.jsxs)(i.$,{variant:"ghost",size:"sm",className:"h-5 px-1.5 gap-1 text-xs rounded-md flex-shrink-0 text-muted-foreground hover:text-foreground",onClick:eW,children:[(0,r.jsx)(H.VA,{className:"w-3.5 h-3.5 text-rose-500"}

5),"Support"]})}),(0,r.jsx)(l.ZI,{className:"dark",children:"Support the author"})]})]}),(0,r.jsx)("div",{className:"flex items-center gap-1",children:(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(d.l,{className:"flex items-center gap-1",children:[(0,r.jsx)(i.$,{variant:"ghost",size:"icon",onClick:ts,className:"h-8 w-8 rounded-md","data-morph-tip":"Toggle theme","data-morph-kbd":"T",children:(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsx)("div",{className:(0,w.cn)("transition-all duration-300 ease-in-out","dark"===en?"scale-100 opacity-100":"scale-0 opacity-0"),children:(0,r.jsx)(k.mTD,{className:"w-4 h-4"})}),(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300 ease-in-out","dark"===en?"scale-0 opacity-0":"scale-100 opacity-100"),children:(0,r.jsx)(k.l05,{className:"w-4 h-4"})})]})}),(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8 rounded-md",onClick:()=>{eI||(eO(!0),to())},disabled:eI,"data-morph-tip":"Refresh preview","data-morph-kbd":"R",children:(0,r.jsx)("div",{className:"relative w-4 h-4",children:(0,r.jsx)(D.A,{className:"h-4 w-4 will-change-transform transition-transform duration-300 ease-[cubic-bezier(0.12,0,0.39,0)] "+(eI?"rotate-90":"rotate-0")})})}),(0,r.jsx)(i.$,{variant:"ghost",size:"icon",onClick:ta,className:"h-8 w-8 rounded-md","data-morph-tip":ex?"Link copied!":"Share component","data-morph-kbd":"S",children:(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsx)("div",{className:(0,w.cn)("transition-all duration-300 ease-in-out",ex?"scale-100 opacity-100":"scale-0 opacity-0"),children:(0,r.jsx)(k.ODX,{className:"w-4 h-4"})}),(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300 ease-in-out",ex?"scale-0 opacity-0":"scale-100 opacity-100"),children:(0,r.jsx)(k.qYV,{className:"w-4 h-4"})})]})}),!e0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)($.iB,{children:(0,r.jsx)(A.a,{demoId:a.id,bookmarked:e4,onBookmarkToggle:e8,children:(0,r.jsx)(i.$,{variant:"ghost",size:"icon",disabled:e2.isPending,className:"h-8 w-8 rounded-md","data-morph-tip":e4?"Remove bookmark":"Bookmark","data-morph-kbd":"B",children:(0,r.jsx)("div",{className:"relative w-4 h-4",children:e4?(0,r.jsx)(k.ysM,{className:"w-4 h-4"}):(0,r.jsx)(k.YcO,{className:"w-4 h-4"})})})})}),(0,r.jsx)($.Bl,{children:(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8 rounded-md","data-morph-tip":"Sign in to bookmark",onClick:()=>eA(T.SE),children:(0,r.jsx)(k.YcO,{className:"w-4 h-4"})})})]}),(0,r.jsx)(i.$,{variant:"ghost",size:"icon",onClick:tr,className:"h-8 w-8 rounded-md","data-morph-tip":"Open preview in new tab","data-morph-kbd":"F",children:(0,r.jsx)(k.pTT,{className:"w-4 h-4"})}),(0,r.jsx)(i.$,{variant:"ghost",size:"icon",onClick:t,className:"h-8 w-8 rounded-md","data-morph-tip":"Close","data-morph-kbd":"Esc",children:(0,r.jsx)(R.A,{className:"w-4 h-4"})})]})})})]}),mobileHeader:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"flex items-center gap-3 min-w-0 max-w-[70%] overflow-hidden",children:[e$,(0,r.jsxs)("div",{className:"flex flex-col min-w-0 overflow-hidden",children:[(0,r.jsxs)(n.L3,{className:"text-md font-medium flex gap-1 items-center truncate",children:[(0,r.jsx)("span",{className:"truncate",children:a.component.name}),eo&&eo.length>0&&(0,r.jsx)(K.q,{badges:eo,size:14,maxBadges:1}),"Default"!=a.name&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.Fb,{className:"text-border w-[12px] h-[12px] flex-shrink-0"}),(0,r.jsx)("span",{className:"truncate",children:a.name})]})]}),(0,r.jsx)(F(),{href:eS,className:"text-xs text-muted-foreground hover:underline truncate",children:eC})]})]}),(0,r.jsxs)("div",{className:"flex items-center h-full gap-1",children:[(0,r.jsx)($.iB,{children:(0,r.jsx)(A.a,{demoId:a.id,bookmarked:e4,onBookmarkToggle:e8,children:(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8",disabled:e2.isPending,children:(0,r.jsx)("div",{className:"relative w-4 h-4",children:e4?(0,r.jsx)(k.ysM,{className:"w-4 h-4"}):(0,r.jsx)(k.YcO,{className:"w-4 h-4"})})})})}),(0,r.jsx)($.Bl,{children:(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8",onClick:()=>eA(T.SE),children:(0,r.jsx)(k.YcO,{className:"w-4 h-4"})})}),a.user?.donation_url&&(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8",onClick:eW,children:(0,r.jsx)(H.VA,{className:"w-4 h-4 text-rose-500"})}),(0,r.jsx)(i.$,{variant:"ghost",size:"icon",className:"h-8 w-8",onClick:e=>{e.preventDefault(),t()},children:(0,r.jsx)(R.A,{className:"w-4 h-4"})})]})]}),children:[(0,r.jsx)(m.q,{frameKey:`preview-dialog-${a.id}-${eD}-${en}`,src:`${eG}?theme=${en}${"dark"===en?"&dark=true":""}`,title:a.component.name}),eJ&&(0,r.jsxs)("div",{className:"flex-shrink-0 border-t border-border/50 p-3 flex items-center gap-2 bg-background",children:[(0,r.jsxs)(i.$,{variant:"outline",size:"sm",className:"h-9 flex-1",onClick:ta,children:[(0,r.jsxs)("div",{className:"relative w-4 h-4 mr-1.5",children:[(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300",ex?"scale-100 opacity-100":"scale-0 opacity-0"),children:(0,r.jsx)(k.ODX,{className:"w-4 h-4"})}),(0,r.jsx)("div",{className:(0,w.cn)("absolute inset-0 transition-all duration-300",ex?"scale-0 opacity-0":"scale-100 opacity-100"),children:(0,r.jsx)(k.qYV,{className:"w-4 h-4"})})]}),"Share"]}),(0,r.jsx)(i.$,{variant:"outline",size:"sm",className:"h-9 flex-1",onClick:tt,disabled:em,children:"Open"}),(0,r.jsxs)("div",{className:"inline-flex flex-[2] items-center",children:[(0,r.jsxs)(i.$,{variant:"default",size:"sm",className:"h-9 flex-1 relative overflow-hidden rounded-r-none",onClick:te,disabled:ed,children:[(0,r.jsxs)("div",{className:(0,w.cn)("flex items-center gap-1.5 transition-[opacity,transform] duration-200 ease-out",ep?"opacity-0 -translate-y-full":"opacity-100 translate-y-0"),children:[ed?(0,r.jsx)(k.X1U,{className:"w-4 h-4 animate-spin"}):"code"===eK?(0,r.jsx)(B.A,{className:"w-4 h-4"}):(0,r.jsx)(k.F1M,{className:"w-4 h-4"}),(0,r.jsx)("span",{children:"code"===eK?"Copy code":"Copy prompt"})]}),(0,r.jsxs)("div",{className:(0,w.cn)("absolute inset-0 flex items-center justify-center gap-1.5 transition-[opacity,transform] duration-200 ease-out",ep?"opacity-100 translate-y-0":"opacity-0 translate-y-full"),children:[(0,r.jsx)(k.ODX,{className:"w-4 h-4"}),(0,r.jsx)("span",{children:"Copied!"})]})]}),(0,r.jsxs)(_.rI,{children:[(0,r.jsx)(_.ty,{asChild:!0,children:(0,r.jsx)(i.$,{variant:"default",size:"sm",disabled:ed,"aria-label":"Change copy action",className:"h-9 w-9 px-0 rounded-l-none border-l border-primary-foreground

5/30",children:(0,r.jsx)(P.A,{className:"w-4 h-4"})})}),(0,r.jsx)(_.SQ,{align:"end",sideOffset:4,className:"dark max-w-64",children:(0,r.jsxs)(_.Hr,{value:eK,onValueChange:e=>{eH(e),e6(e)},children:[(0,r.jsx)(_.Ht,{value:"prompt",className:"items-start [&>span]:pt-1.5",children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsx)("span",{className:"text-sm font-medium",children:"Copy prompt"}),(0,r.jsx)("span",{className:"text-xs text-muted-foreground",children:"AI-ready prompt with full context."})]})}),(0,r.jsx)(_.Ht,{value:"code",className:"items-start [&>span]:pt-1.5",children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsx)("span",{className:"text-sm font-medium",children:"Copy code"}),(0,r.jsx)("span",{className:"text-xs text-muted-foreground",children:"Raw source code."})]})})]})})]})]})]})]}),(0,r.jsx)(M.a,{open:eB,onOpenChange:eP,product:"21st"}),a.user?.donation_url&&(0,r.jsx)(H.pB,{open:eE,onOpenChange:eT,user:a.user,donationUrl:a.user.donation_url})]})}},848106:(e,t,a)=>{a.d(t,{A:()=>s});var r=a(852093);let s=(0,r.createServerReference)("0033e325b9a4b9ae0bfaf0bca8dbc995f392f5862f",r.callServer,void 0,r.findSourceMapURL,"detectKeylessEnvDriftAction")},991583:(e,t,a)=>{a.d(t,{Bg:()=>d,Ek:()=>c,OT:()=>m,Q1:()=>s,qD:()=>i,uJ:()=>l});var r=a(75824);let s="anon-preview-gate",o="off"===r.env.NEXT_PUBLIC_ANON_PREVIEW_GATE,i=2,n="21st_anon_preview_meter";function l(e,t,a){return e&&a&&a.audience===(t?"signed-in":"anonymous")?{ready:!0,arm:a.arm}:{ready:!1,arm:null}}function d(e){return!e||o?null:"gated"}function c(e,t){return"gated"===e&&t>i}function m(e=Date.now(),t=function(){try{return window.localStorage}catch{return null}}()){if(!t)return 0;try{var a;let r=(a=function(e){if(!e)return null;try{let t=JSON.parse(e);if(!t||"number"!=typeof t.windowStart||"number"!=typeof t.opens||!Number.isFinite(t.windowStart)||!Number.isFinite(t.opens))return null;return{windowStart:t.windowStart,opens:t.opens}}catch{return null}}(t.getItem(n)),!a||e-a.windowStart>=864e5?{windowStart:e,opens:1}:{windowStart:a.windowStart,opens:a.opens+1});return t.setItem(n,JSON.stringify(r)),r.opens}catch{return 0}}}}]);