@uniformdev/csk-components 6.0.44 → 6.0.77-alpha.1

package/dist/components/canvas/index.mjs

@@ -1 +1,2 @@
-import{B as re,D as te,E as Yo,G as ae,H as qo,I as Ko,K as pe,L as Qo,M as Zo,N as jo,P as me,Q as er,S as ie,T as tr,U as ar,a as O,b as Go,d as Y,e as Ro,f as Do,h as Ho,i as q,k as Mo,l as $o,m as zo,n as F,p as Eo,q as Q,s as _o,t as Jo,u as Z,w as Oo,x as j,z as oe}from"../../chunk-DBSKI4UW.mjs";import{b as Xo,c as ee}from"../../chunk-HDWSBDVE.mjs";import{a as or,b as rr,c as ne}from"../../chunk-PC5W2GRG.mjs";import{a as Ne,b as Re,c as De}from"../../chunk-JTRZPR2Q.mjs";import{a as S}from"../../chunk-VEUVLMJO.mjs";import{a as I,b as B,d as w}from"../../chunk-26BSLQVU.mjs";import"../../chunk-3TBBNSCU.mjs";import{a as y}from"../../chunk-EIQPM3DQ.mjs";import{a as b}from"../../chunk-QHIWJPL6.mjs";import{a as Lo,b as No,c as X}from"../../chunk-CLSZO62H.mjs";import{a as Wo,b as Uo,c as K}from"../../chunk-UDP47PNB.mjs";import{a as Ge,b as Le}from"../../chunk-VZCFPWET.mjs";import{a as Ve}from"../../chunk-RZFK2OR7.mjs";import"../../chunk-6POLDE2K.mjs";import{a as n}from"../../chunk-HDKBSM4X.mjs";import{a as u}from"../../chunk-JNIJ5N3Y.mjs";import{a as Se}from"../../chunk-56OQGKRM.mjs";import"../../chunk-MSXDLSXH.mjs";import{a as Ae,c as g,d as ke}from"../../chunk-2OD4OVSF.mjs";import{c as d}from"../../chunk-S7CSCIW4.mjs";import pr from"next/dynamic";var He=(e=>(e.AccordionItemContent="accordionItemContent",e))(He||{}),se=pr(()=>import("../../accordion-item-ZS3TSISI.mjs").then(o=>o.AccordionItem));import{UniformText as mr}from"@uniformdev/canvas-next-rsc/component";import{jsx as We}from"react/jsx-runtime";var Ue=({className:o,...e})=>We("svg",{viewBox:"0 0 6 6","aria-hidden":"true",className:d("w-1.5 h-1.5",o),...e,children:We("circle",{r:"3",cx:"3",cy:"3"})});var Me=({pill:o,size:e,dotColor:r,borderColor:t,backgroundColor:a})=>d("inline-flex items-center w-fit",{"rounded-full":o,"rounded-md":!o,"gap-x-1.5":!!r,[`ring-1 ring-inset ring-${t}`]:!!t,[`bg-${a}`]:!!a,[`p-${e}`]:e});import{jsx as le,jsxs as nr}from"react/jsx-runtime";var $e=({component:o,context:e,textColor:r,backgroundColor:t,borderColor:a,dotColor:p,pill:i=!1,size:m})=>nr("div",{className:Me({pill:i,size:m,dotColor:p,borderColor:a,backgroundColor:t}),children:[p&&le(Ue,{className:d({[`fill-${p}`]:p})}),le(b,{color:r,size:"xs",children:le(mr,{placeholder:"Badge text goes here",parameterId:"text",component:o,context:e})})]});var de=n($e);import{flattenValues as ir}from"@uniformdev/canvas";import{jsx as A}from"react/jsx-runtime";var ze=o=>{switch(o){case"slash":return A("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:A("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m9 20.247 6-16.5"})});case"chevron":default:return A("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:A("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})})}};import{jsx as k,jsxs as sr}from"react/jsx-runtime";var Ee=({separator:o,links:e,size:r,color:t,font:a,transform:p})=>{let i=e?.reduce((m,s)=>{let{title:l,link:f}=ir(s)||{};return l?[...m,{title:l,link:g(f)}]:m},[])||[];return i.length?k("ul",{className:d("flex items-center",{[`text-${r}`]:!!r,[`text-${t}`]:!!t}),children:i.map(({title:m,link:s},l)=>sr("li",{className:"flex items-center",children:[!!l&&k("div",{className:"mx-2 size-[1em]",children:ze(o)}),s?k(B,{variant:"link",textColor:t,className:d({[`font-${a}`]:!!a,[`text-${r}`]:!!r,[p||""]:!!p}),href:s,children:m}):k(b,{size:r,font:a,color:t,transform:p,children:m})]},`${m}-${l}`))}):null};var fe=n(Ee);import{useMemo as lr}from"react";import{UniformText as dr}from"@uniformdev/canvas-next-rsc/component";import{jsx as V}from"react/jsx-runtime";var _e=({component:o,context:e,link:r,textColor:t,textFont:a,textWeight:p,textTransform:i,buttonColor:m,icon:s,iconPosition:l,border:f,size:P,textSize:x,hoverButtonColor:c,hoverTextColor:C,className:T,onClick:h,text:E})=>{let Fe=g(r),Ao=e.previewMode==="editor"&&e?.isContextualEditing,_=lr(()=>{let[J]=u(s),{url:v,title:Vo=""}=J||{};if(v)return{url:v,title:Vo}},[s]),ko=()=>{if(!_)return;let{url:J,title:v}=_;return V(y,{src:J,alt:v,width:20,height:20,containerStyle:{width:"20px",height:"20px"}})};return!(!!E||!!_)&&!Ao?null:V(B,{variant:o.variant,href:Fe,border:f,size:P,onClick:h,className:T,textSize:x,isActive:e.matchedRoute===Fe,textColor:t,textFont:a,textWeight:p,textTransform:i,buttonColor:m,hoverButtonColor:c,hoverTextColor:C,icon:V(ko,{}),iconPosition:l,children:V(dr,{placeholder:"Button text goes here",parameterId:"text",component:o,context:e})})};var Pe=n(_e);import{UniformSlot as fr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Je}from"react/jsx-runtime";var G=({displayName:o,anchor:e,slots:r,component:t,context:a,backgroundColor:p,spacing:i,border:m,fluidContent:s,fullHeight:l,className:f})=>Je(Ve,{title:o,id:e,backgroundColor:p,spacing:i,border:m,fluidContent:s,fullHeight:l,className:f,children:Je(fr,{data:t,context:a,slot:r.containerContent})});var Oe=(e=>(e.ContainerContent="containerContent",e))(Oe||{});import{jsx as Xe}from"react/jsx-runtime";var L=({color:o,thickness:e,width:r,alignment:t})=>Xe("div",{className:d("flex w-full",`justify-${t||"center"}`),children:Xe("div",{className:d({[`bg-${o}`]:!!o}),style:{width:r,height:e}})});import{UniformSlot as Pr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ye}from"react/jsx-runtime";var qe=({direction:o,justifyContent:e,gap:r,alignItems:t,backgroundColor:a,spacing:p,border:i,fluidContent:m,fullHeight:s,slots:l,component:f,context:P,className:x,wrapperClassName:c})=>Ye(Ne,{direction:o,justifyContent:e,gap:r,alignItems:t,backgroundColor:a,spacing:p,border:i,fluidContent:m,fullHeight:s,wrapperClassName:c,className:x,children:Ye(Pr,{data:f,context:P,slot:l.flexItem})});var ce=n(qe);import{UniformSlot as cr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ke}from"react/jsx-runtime";var N=({alignSelf:o,shrink:e,context:r,component:t,slots:a})=>Ke(Re,{alignSelf:o,shrink:e,children:Ke(cr,{data:t,context:r,slot:a.inner})});import{UniformSlot as xr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Qe}from"react/jsx-runtime";var Ze=({columnsCount:o,gapX:e,gapY:r,backgroundColor:t,spacing:a,border:p,fluidContent:i,fullHeight:m,slots:s,component:l,context:f,className:P})=>Qe(Ge,{className:P,columnsCount:o,gapX:e,gapY:r,backgroundColor:t,spacing:a,border:p,fluidContent:i,fullHeight:m,children:Qe(xr,{data:l,context:f,slot:s.gridInner})});var je=(e=>(e.GridInner="gridInner",e))(je||{}),xe=n(Ze);import{UniformSlot as ur}from"@uniformdev/canvas-next-rsc/component";import{jsx as eo}from"react/jsx-runtime";var oo=({columnStart:o,columnSpan:e,rowStart:r,className:t,rowSpan:a,context:p,component:i,slots:m})=>eo(Le,{columnStart:o,columnSpan:e,rowStart:r,rowSpan:a,className:t,children:eo(ur,{data:i,context:p,slot:m.inner})});var ro=(e=>(e.Inner="inner",e))(ro||{}),ue=n(oo);import{UniformText as Cr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ce}from"react/jsx-runtime";var to=({icon:o,size:e,tag:r,color:t,weight:a,font:p,transform:i,decoration:m,letterSpacing:s,alignment:l,component:f,context:P})=>{let[x]=u(o),{url:c,title:C=""}=x||{};return Ce(S,{icon:c?Ce(y,{src:c,alt:C,fill:!0}):void 0,size:e,tag:r,color:t,weight:a,font:p,transform:i,decoration:m,letterSpacing:s,alignment:l,children:Ce(Cr,{placeholder:"Text goes here",parameterId:"text",component:f,context:P})})};var ge=n(to);import{jsx as ao}from"react/jsx-runtime";var po=({context:o,component:e,width:r,height:t})=>{let a=o.previewMode==="editor"&&o.isContextualEditing,p=e?._id?.includes("placeholder_");return!a||p?null:ao("div",{style:{width:r?`${r}px`:"auto",height:t?`${t}px`:"auto"},children:ao(w,{type:"image",placeholder:"Please add an asset to display an image"})})};import{jsx as mo}from"react/jsx-runtime";var R=({image:o,objectFit:e,width:r,height:t,overlayColor:a,overlayOpacity:p,border:i,priority:m,unoptimized:s,context:l,component:f})=>{let[P]=u(o);if(!P)return mo(po,{context:l,component:f,width:r,height:t});let{url:x,title:c=""}=P;return mo(y,{containerStyle:{...r?{width:`${r}px`}:{},...t?{height:`${t}px`}:{}},src:x,alt:c,fill:!0,unoptimized:s,priority:m,sizes:"100%",style:{objectFit:e},overlayColor:a,overlayOpacity:p,border:i})};import{UniformSlot as gr}from"@uniformdev/canvas-next-rsc/component";import{jsx as no}from"react/jsx-runtime";var io=({component:o,context:e,slots:r,link:t,openInNewTab:a})=>no(I,{link:g(t),openInNewTab:a,children:no(gr,{data:o,context:e,slot:r.linkContent})});var so=(e=>(e.LinkContent="linkContent",e))(so||{}),ye=n(io);import{UniformText as br}from"@uniformdev/canvas-next-rsc/component";var lo=({activeState:o,context:e,href:r})=>d("hover:underline",{underline:o&&Ae(e.matchedRoute,e.dynamicInputs)===r});import{Fragment as yr}from"react";import{jsx as fo}from"react/jsx-runtime";var Po=({href:o,isExternalLink:e,children:r})=>o?fo(I,{link:o,openInNewTab:e,rel:e?"noopener noreferrer":"",children:r}):fo(yr,{children:r});import{jsx as D}from"react/jsx-runtime";var co=({icon:o,link:e,activeState:r,size:t,tag:a,color:p,weight:i,font:m,transform:s,decoration:l,letterSpacing:f,alignment:P,component:x,context:c})=>{let C=g(e),[T]=u(o),{url:h,title:E=""}=T||{};return D(Po,{href:C,isExternalLink:ke(C),children:D(S,{textClassName:lo({activeState:r,context:c,href:C}),icon:h&&D(y,{src:h,alt:E,fill:!0}),size:t,tag:a,color:p,weight:i,font:m,transform:s,decoration:l,letterSpacing:f,alignment:P,children:D(br,{placeholder:"Text goes here",parameterId:"text",className:"whitespace-nowrap",component:x,context:c})})})};var be=n(co);import{UniformRichText as Tr}from"@uniformdev/canvas-next-rsc/component";import{jsx as xo}from"react/jsx-runtime";var uo=({color:o,lineCountRestrictions:e,font:r,component:t,className:a})=>xo(b,{lineCountRestrictions:e,color:o,font:r,children:xo(Tr,{className:d("prose max-w-full marker:text-current [&_*:not(pre)]:text-current",a),parameterId:"text",component:t,placeholder:"Rich text content goes here..."})});var Te=n(uo);import{jsx as hr}from"react/jsx-runtime";var H=({size:o,component:{variant:e}})=>{let r=e==="horizontal";return hr("div",{className:d({[`w-${o}`]:r,[`h-${o}`]:!r})})};var he=(e=>(e.Horizontal="horizontal",e))(he||{});import{UniformSlot as vr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ir}from"react/jsx-runtime";var Co=({slots:o,component:e,context:r})=>Ir(vr,{data:e,context:r,slot:o.tabContent});var go=(e=>(e.TabContent="tabContent",e))(go||{}),ve=n(Co);import{UniformSlot as Br}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ie}from"react/jsx-runtime";var W=({component:o,context:e,slots:r,alignment:t})=>Ie("td",{children:Ie("div",{className:d("w-fit",yo[t||"left"]),children:Ie(Br,{slot:r.tableCustomCellContent,context:e,data:o})})});var yo={left:"ml-0",center:"mx-auto",right:"ml-auto"},bo=(e=>(e.TableCustomCellContent="tableCustomCellContent",e))(bo||{});import{UniformText as wr}from"@uniformdev/canvas-next-rsc/component";import{jsx as To}from"react/jsx-runtime";var U=({component:o,context:e})=>To("td",{children:To(wr,{component:o,context:e,parameterId:"value",placeholder:"Value"})});import{UniformText as Fr}from"@uniformdev/canvas-next-rsc/component";import{jsx as ho}from"react/jsx-runtime";var M=({component:o,context:e})=>ho("th",{children:ho(Fr,{component:o,context:e,parameterId:"value",placeholder:"Value"})});import{UniformSlot as Sr}from"@uniformdev/canvas-next-rsc/component";import{jsx as vo}from"react/jsx-runtime";var $=({slots:o,component:e,context:r})=>vo("tr",{children:vo(Sr,{data:e,context:r,slot:o.tableRowCells})});import{UniformText as Ar}from"@uniformdev/canvas-next-rsc/component";import{jsx as Io}from"react/jsx-runtime";var Bo=({tag:o,size:e,color:r,weight:t,font:a,transform:p,decoration:i,letterSpacing:m,lineCountRestrictions:s,alignment:l,component:f,context:P})=>Io(b,{color:r,size:e,font:a,weight:t,transform:p,decoration:i,letterSpacing:m,alignment:l,lineCountRestrictions:s,children:Io(Ar,{placeholder:"Text goes here",parameterId:"text",as:o||void 0,component:f,context:P})});var Be=n(Bo);import kr from"next/dynamic";var we=kr(()=>import("../../theme-switcher-JE6MRNXM.mjs").then(o=>n(o.ThemeSwitcher)));import{jsx as Vr}from"react/jsx-runtime";var wo=({context:o,component:e})=>{let r=o.previewMode==="editor"&&o.isContextualEditing,t=e?._id?.includes("placeholder_");return!r||t?null:Vr(w,{type:"video",placeholder:"Please add video link to display a video"})};import{jsx as Fo}from"react/jsx-runtime";var z=({video:o,url:e,placeholderImage:r,autoPlay:t,lazyLoad:a,loop:p,controls:i,muted:m,overlayColor:s,overlayOpacity:l,border:f,component:P,context:x})=>{let[c]=u(o),[C]=u(r),T=c?.url||(e?.type==="url"?e.path:void 0);return T?Fo(De,{url:T,placeholderImageUrl:C?.url,autoPlay:t,lazyLoad:a,loop:p,controls:i,muted:m,overlayColor:s,overlayOpacity:l,border:f}):Fo(wo,{component:P,context:x})};var So={accordion:{component:O},accordionItem:{component:se},badge:{component:de},banner:{component:X},button:{component:Pe},card:{component:Y},carousel:{component:q},container:{component:G},countdown:{component:K},divider:{component:L},grid:{component:xe},gridItem:{component:ue},flex:{component:ce},flexItem:{component:N},header:{component:Z},section:{component:pe},iconLabel:{component:ge},image:{component:R},page:{component:te},richText:{component:Te},spacer:{component:H},text:{component:Be},video:{component:z},tabs:{component:ne},tab:{component:ve},table:{component:me},tableRow:{component:$},tableHeaderCell:{component:M},tableDataCell:{component:U},tableCustomCell:{component:W},modal:{component:ee},imageGallery:{component:j},testimonial:{component:ie},breadcrumbs:{component:fe},review:{component:ae},navigationLink:{component:be},navigationGroup:{component:re},navigationFlyout:{component:oe},footer:{component:Q},themeSwitcher:{component:we},link:{component:ye},fixedHero:{component:F.FixedHero},flexibleHero:{component:F.FlexibleHero}},an=So,pn=Se(So);export{O as Accordion,se as AccordionItem,He as AccordionItemSlots,Go as AccordionSlots,de as Badge,X as Banner,Lo as BannerContentAlignment,No as BannerSlots,fe as Breadcrumbs,Pe as Button,Y as Card,Do as CardSlots,Ro as CardVariants,q as Carousel,Ho as CarouselSlots,Yo as CommonPageSlots,G as Container,Oe as ContainerSlots,K as Countdown,Wo as CountdownSlots,Uo as CountdownVariants,F as DemoHero,Mo as DemoHeroContentAlignment,$o as DemoHeroVariants,L as Divider,ce as Flex,N as FlexItem,zo as FlexibleHeroSlots,Q as Footer,Eo as FooterSlots,xe as Grid,ue as GridItem,ro as GridItemSlots,je as GridSlots,Z as Header,_o as HeaderSlots,Jo as HeaderVariants,ge as IconLabel,R as Image,j as ImageGallery,Oo as ImageGallerySlots,ye as Link,so as LinkSlots,ee as Modal,Xo as ModalSlots,oe as NavigationFlyout,re as NavigationGroup,be as NavigationLink,te as Page,ae as Review,Ko as ReviewSlots,qo as ReviewVariants,Te as RichText,pe as Section,Qo as SectionContentAlignment,jo as SectionSlots,Zo as SectionVariants,H as Spacer,he as SpacerVariants,ve as Tab,go as TabSlots,me as Table,W as TableCustomCell,bo as TableCustomCellSlots,U as TableDataCell,M as TableHeaderCell,$ as TableRow,er as TableSlots,ne as Tabs,rr as TabsSlots,or as TabsVariants,ie as Testimonial,ar as TestimonialSlots,tr as TestimonialVariants,Be as Text,we as ThemeSwitcher,z as Video,pn as componentResolver,So as cskComponentsMapping,an as default};
+import{a as ut}from"../../chunk-TM7Q5NMH.mjs";import{a as ft,b as ht,c as Pt}from"../../chunk-HLLKGZN6.mjs";import{a as z}from"../../chunk-AKRWCDDG.mjs";import{a as pt}from"../../chunk-56OQGKRM.mjs";import{B as Ae,D as Ne,E as Mr,G as Be,H as Or,I as jr,K as ke,L as $r,M as Wr,N as Hr,P as Fe,Q as zr,S as _e,T as Kr,U as Qr,a as Ce,b as wr,d as xe,e as Ar,f as Nr,h as Br,i as ge,k as Ur,l as _r,m as Vr,n as H,p as Lr,q as be,s as Rr,t as Gr,u as Ie,w as Dr,x as we,z as Se}from"../../chunk-GU776XBS.mjs";import{b as Er,c as Te}from"../../chunk-2SEOCBRK.mjs";import{a as qr,b as Jr,c as Ue}from"../../chunk-CBZWZSQW.mjs";import{a as j,b as $,d as W}from"../../chunk-H3OSPGNK.mjs";import"../../chunk-6TUDWIYU.mjs";import{a as b}from"../../chunk-QHIWJPL6.mjs";import{a as Tr,b as Sr,c as ye}from"../../chunk-T6HZMAEP.mjs";import{a as kr,b as Fr,c as ve}from"../../chunk-2UV7TQNF.mjs";import{a as ct,b as dt}from"../../chunk-VZCFPWET.mjs";import{a as v}from"../../chunk-EIQPM3DQ.mjs";import{a as lt}from"../../chunk-RZFK2OR7.mjs";import"../../chunk-3PDY7RJC.mjs";import{a as C}from"../../chunk-JNIJ5N3Y.mjs";import"../../chunk-MSXDLSXH.mjs";import{a as O,c as g,d as mt}from"../../chunk-RX4IAAQQ.mjs";import{a as Pe,c as f}from"../../chunk-S7CSCIW4.mjs";import{a as st,b as Ir}from"../../chunk-YEKQJ4YC.mjs";var It=st((aa,bt)=>{"use strict";var Ge=class{constructor(e){this.value=e,this.next=void 0}},De=class{constructor(){this.clear()}enqueue(e){let t=new Ge(e);this._head?(this._tail.next=t,this._tail=t):(this._head=t,this._tail=t),this._size++}dequeue(){let e=this._head;if(e)return this._head=this._head.next,this._size--,e.value}clear(){this._head=void 0,this._tail=void 0,this._size=0}get size(){return this._size}*[Symbol.iterator](){let e=this._head;for(;e;)yield e.value,e=e.next}};bt.exports=De});var Tt=st((na,wt)=>{"use strict";var eo=It(),to=r=>{if(!((Number.isInteger(r)||r===1/0)&&r>0))throw new TypeError("Expected `concurrency` to be a number from 1 and up");let e=new eo,t=0,o=()=>{t--,e.size>0&&e.dequeue()()},a=async(s,n,...m)=>{t++;let l=(async()=>s(...m))();n(l);try{await l}catch{}o()},p=(s,n,...m)=>{e.enqueue(a.bind(null,s,n,...m)),(async()=>(await Promise.resolve(),t<r&&e.size>0&&e.dequeue()()))()},i=(s,...n)=>new Promise(m=>{p(s,m,...n)});return Object.defineProperties(i,{activeCount:{get:()=>t},pendingCount:{get:()=>e.size},clearQueue:{value:()=>{e.clear()}}}),i};wt.exports=to});import Yr from"next/dynamic";var Ct=(e=>(e.AccordionItemContent="accordionItemContent",e))(Ct||{}),Ve=Yr(()=>import("../../accordion-item-A2CU5OKG.mjs").then(r=>r.AccordionItem));import{UniformText as Xr}from"@uniformdev/canvas-next-rsc/component";import{jsx as yt}from"react/jsx-runtime";var xt=({className:r,...e})=>yt("svg",{viewBox:"0 0 6 6","aria-hidden":"true",className:f("w-1.5 h-1.5",r),...e,children:yt("circle",{r:"3",cx:"3",cy:"3"})});var gt=({pill:r,size:e,dotColor:t,borderColor:o,backgroundColor:a})=>f("inline-flex items-center w-fit",{"rounded-full":r,"rounded-md":!r,"gap-x-1.5":!!t,[`ring-1 ring-inset ring-${o}`]:!!o,[`bg-${a}`]:!!a,[`p-${e}`]:e});import{jsx as Le,jsxs as Zr}from"react/jsx-runtime";var vt=({component:r,context:e,textColor:t,backgroundColor:o,borderColor:a,dotColor:p,pill:i=!1,size:s})=>Zr("div",{className:gt({pill:i,size:s,dotColor:p,borderColor:a,backgroundColor:o}),children:[p&&Le(xt,{className:f({[`fill-${p}`]:p})}),Le(b,{color:t,size:"xs",children:Le(Xr,{placeholder:"Badge text goes here",parameterId:"text",component:r,context:e})})]});var Re=vt;import{flattenValues as Gt,CanvasClient as xo}from"@uniformdev/canvas";var At=Ir(Tt(),1),ro=Object.defineProperty,St=r=>{throw TypeError(r)},oo=(r,e,t)=>e in r?ro(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ao=(r,e,t)=>oo(r,typeof e!="symbol"?e+"":e,t),no=(r,e,t)=>e.has(r)||St("Cannot "+t),h=(r,e,t)=>(no(r,e,"read from private field"),t?t.call(r):e.get(r)),I=(r,e,t)=>e.has(r)?St("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t);var io=(0,At.default)(6),so=class Nt extends Error{constructor(e,t,o,a,p,i){super(`${e}
+ ${a}${p?" "+p:""} (${t} ${o}${i?` Request ID: ${i}`:""})`),this.errorMessage=e,this.fetchMethod=t,this.fetchUri=o,this.statusCode=a,this.statusText=p,this.requestId=i,Object.setPrototypeOf(this,Nt.prototype)}},y=class Bt{constructor(e){ao(this,"options");var t,o,a,p,i;if(!e.apiKey&&!e.bearerToken)throw new Error("You must provide an API key or a bearer token");let s=e.fetch;if(!s)if(typeof window<"u")s=window.fetch.bind(window);else if(typeof fetch<"u")s=fetch;else throw new Error("You must provide or polyfill a fetch implementation when not in a browser");this.options={...e,fetch:s,apiHost:this.ensureApiHost(e.apiHost),apiKey:(t=e.apiKey)!=null?t:null,projectId:(o=e.projectId)!=null?o:null,bearerToken:(a=e.bearerToken)!=null?a:null,limitPolicy:(p=e.limitPolicy)!=null?p:io,bypassCache:(i=e.bypassCache)!=null?i:!1}}async apiClient(e,t){return(await this.apiClientWithResponse(e,t)).body}async apiClientWithResponse(e,t){return this.options.limitPolicy(async()=>{var o;let a=this.options.apiKey?{"x-api-key":this.options.apiKey}:{Authorization:`Bearer ${this.options.bearerToken}`};this.options.bypassCache&&(a["x-bypass-cache"]="true");let{fetch:p,signal:i}=this.options,n=await po(()=>p(e.toString(),{...t,signal:i,headers:{...t?.headers,...a}}));if(!n.ok){let m="";try{let l=await n.text();try{let c=JSON.parse(l);c.errorMessage?m=Array.isArray(c.errorMessage)?c.errorMessage.join(", "):c.errorMessage:m=l}catch{m=l}}catch{m="General error"}throw new so(m,(o=t?.method)!=null?o:"GET",e.toString(),n.status,n.statusText,Bt.getRequestId(n))}return t?.expectNoContent?{response:n,body:null}:{response:n,body:await n.json()}})}createUrl(e,t,o){let a=new URL(`${o??this.options.apiHost}${e}`);return Object.entries(t??{}).forEach(([p,i])=>{var s;typeof i<"u"&&i!==null&&a.searchParams.append(p,Array.isArray(i)?i.join(","):(s=i?.toString())!=null?s:"")}),a}ensureApiHost(e){if(!e)return"https://uniform.app";if(!e?.startsWith("http"))throw new Error('Your apiHost must start with "http"');if(e.indexOf("/",8)>-1)throw new Error("Your apiHost must not contain a path element after the domain");if(e.indexOf("?")>-1)throw new Error("Your apiHost must not contain a query string");return e?.endsWith("/")&&(e=e.substring(0,e.length-1)),e}static getRequestId(e){let t=e.headers.get("apigw-requestid");if(t)return t}};async function po(r){var e;let o=5,a;for(;o>0&&(a=await r(),a.status===429);){let p=0;try{let n=a.clone(),m=n.headers.get("date"),l=m?new Date(m).getTime():void 0,c=await n.json(),u=(e=c?.info)==null?void 0:e.reset;typeof l=="number"&&typeof u=="number"&&(p=Math.max(0,Math.min(Math.round(1.1*(u-l)),1e4)))}catch{}let i=Math.pow(2,5-o)*333,s=i+Math.round(Math.random()*(i/2))*(Math.random()>.5?1:-1);await new Promise(n=>setTimeout(n,p+s)),o-=1}return a}var _,mo=class q extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(q,_),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(q,_));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async remove(e){let t=this.createUrl(h(q,_));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};_=new WeakMap;I(mo,_,"/api/v2/aggregate");var Ee,lo=class kt extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(kt,Ee),{...e,projectId:t});return await this.apiClient(o)}};Ee=new WeakMap;I(lo,Ee,"/api/v2/dimension");var V,Y,Ft=class F extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(F,V),{...e,projectId:t});return await this.apiClient(o)}async upsertCategory(e){let t=this.createUrl(h(F,V));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async removeCategory(e){let t=this.createUrl(h(F,V));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async upsertValue(e){let t=this.createUrl(h(F,Y));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async removeValue(e){let t=this.createUrl(h(F,Y));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};V=new WeakMap;Y=new WeakMap;I(Ft,V,"/api/v1/enrichments");I(Ft,Y,"/api/v1/enrichment-values");var Me,co=class Ut extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Ut,Me),{...e,projectId:t});return await this.apiClient(o)}async publish(){let{projectId:e}=this.options,t=this.createUrl("/api/v1/publish",{siteId:e});await this.apiClient(t,{method:"POST",expectNoContent:!0})}};Me=new WeakMap;I(co,Me,"/api/v2/manifest");var L,uo=class J extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(J,L),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(J,L));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async remove(e){let t=this.createUrl(h(J,L));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};L=new WeakMap;I(uo,L,"/api/v2/quirk");var R,fo=class K extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(K,R),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(K,R));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async remove(e){let t=this.createUrl(h(K,R));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};R=new WeakMap;I(fo,R,"/api/v2/signal");var G,ho=class Q extends y{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Q,G),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(Q,G));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async remove(e){let t=this.createUrl(h(Q,G));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};G=new WeakMap;I(ho,G,"/api/v2/test");import{createVariableReference as Co,parseVariableExpression as yo}from"@uniformdev/canvas";var _t=r=>{throw TypeError(r)},We=(r,e,t)=>e.has(r)||_t("Cannot "+t),X=(r,e,t)=>(We(r,e,"read from private field"),t?t.call(r):e.get(r)),Vt=(r,e,t)=>e.has(r)?_t("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t),Po=(r,e,t,o)=>(We(r,e,"write to private field"),o?o.call(r,t):e.set(r,t),t),D=(r,e,t)=>(We(r,e,"access private method"),t);var Lt=class extends y{constructor(r){super(r),this.getProjectMapDefinitions=async()=>{let{projectId:e}=this.options,t=this.createUrl("/api/v1/project-map",{projectId:e});return await this.apiClient(t)},this.getProjectMapDefinition=async e=>{let{projectId:t}=this.options,o=this.createUrl("/api/v1/project-map",{...e,projectId:t});return await this.apiClient(o)},this.upsertProjectMap=async e=>{let{projectId:t}=this.options,o=this.createUrl("/api/v1/project-map");return(await this.apiClient(o,{method:"PUT",body:JSON.stringify({...e,projectId:t})})).projectMapId},this.deleteProjectMap=async e=>{let{projectId:t}=this.options,o=this.createUrl("/api/v1/project-map");await this.apiClient(o,{method:"DELETE",body:JSON.stringify({...e,projectId:t}),expectNoContent:!0})},this.upsertProjectMapNodes=async e=>{let{projectId:t}=this.options,o=this.createUrl("/api/v1/project-map-nodes");await this.apiClient(o,{method:"PUT",body:JSON.stringify({...e,projectId:t,nodes:e.nodes.map(a=>({...a,node:{...this.cleanProjectMapNode(a.node)}}))}),expectNoContent:!0})},this.deleteProjectMapNode=async e=>{let{projectId:t}=this.options,o=this.createUrl("/api/v1/project-map-nodes");await this.apiClient(o,{method:"DELETE",body:JSON.stringify({...e,projectId:t}),expectNoContent:!0})},this.getSubtree=async e=>{var t;let o=this.setFetchOptions(e);o.tree="true";let a=this.createUrl("/api/v1/project-map-nodes",o),i={...(await this.apiClient(a)).tree},s=[i];for(;s&&s.length>0;){let n=s.pop(),m;(t=n?.children)==null||t.forEach(l=>{l.parent=Oe(n),l.previousSibling=Oe(m),m&&(m.nextSibling=Oe(l)),m=l,s.push(l)})}return i},this.getNodes=async e=>{let t=this.setFetchOptions(e),o=this.createUrl("/api/v1/project-map-nodes",t);return await this.apiClient(o)}}setFetchOptions(r){let{projectId:e}=this.options,t={projectId:e};return Object.entries(r).forEach(([o,a])=>{if(a!==void 0){if(typeof a=="boolean"){if(!a)return;t[o]="true";return}if(typeof a=="number"){t[o]=a.toString(10);return}t[o]=a}}),t}cleanProjectMapNode(r){var e,t,o;return{id:((o=(t=(e=r.id)==null?void 0:e.match(/^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i))==null?void 0:t.length)!=null?o:0)==1?r.id:void 0,path:r.path,name:r.name,type:r.type,order:r.order,data:r.data,compositionId:r.compositionId,description:r.description,locales:r.locales}}};var Oe=r=>r?{...r,parent:void 0,children:void 0}:void 0;var S,A,$e,Z,He=class w{constructor(e){this.route=e,Vt(this,S);var t;Po(this,S,D(t=w,A,$e).call(t,this.route))}get dynamicSegmentCount(){return X(this,S).segments.reduce((e,t)=>{var o;return D(o=w,A,Z).call(o,t)?e+1:e},0)}matches(e){var t,o;let{segments:a,queryParams:p}=D(t=w,A,$e).call(t,e),{segments:i}=X(this,S);if(a.length!==i.length)return{match:!1};let s={match:!0,dynamicSegmentCount:0,pathParams:{},queryParams:{}};for(let n=0;n<i.length;n++){let m=i[n],l=a[n];if(D(o=w,A,Z).call(o,m)){let c=m.slice(1);s.pathParams[c]=l,s.dynamicSegmentCount++}else if(m!==l)return{match:!1}}for(let[n,m]of X(this,S).queryParams)s.queryParams[n]=p.has(n)?p.get(n):m;return s}expand(e){let{dynamicInputValues:t={},allowedQueryParams:o=[],doNotEscapeVariables:a=!1}=e??{},p=X(this,S).segments.map(n=>{let m=w.getDynamicRouteSegmentName(n);if(!m)return n;let l=t[m];return l?je(l,a):n}).join("/"),i=o.filter(n=>{let m=typeof t[n];return m==="string"||m==="number"||m==="boolean"}).map(n=>`${je(n,a)}=${je(t[n],a)}`),s=i.length?`?${i.join("&")}`:"";return`/${p}${s}`}static getDynamicRouteSegmentName(e){var t;if(D(t=w,A,Z).call(t,e))return e.slice(w.dynamicSegmentPrefix.length)}};S=new WeakMap;A=new WeakSet;$e=function(r){if(!r.startsWith("/")||r==="")throw new Error(`Path must start with a slash: ${r}`);let[e,t]=r.split("?"),o=e.substring(1).split("/");o[o.length-1]===""&&o.pop();let a=new URLSearchParams(t);return{segments:o,queryParams:a}};Z=function(r){return r?r.startsWith(He.dynamicSegmentPrefix):!1};Vt(He,A);He.dynamicSegmentPrefix=":";function je(r,e){if(!e)return encodeURIComponent(r);let t=[];return yo(r.toString(10),(o,a)=>{a==="variable"?t.push(Co(o)):t.push(encodeURIComponent(o))}),t.join("")}import{jsx as ee}from"react/jsx-runtime";var Rt=r=>{switch(r){case"slash":return ee("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:ee("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m9 20.247 6-16.5"})});case"chevron":default:return ee("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:ee("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})})}};import{jsx as te,jsxs as go}from"react/jsx-runtime";var Dt=async({separator:r,links:e,size:t,color:o,font:a,transform:p,autoGenerate:i,context:s})=>{let l=i?await(async()=>{let c=new Lt({projectId:process.env.UNIFORM_PROJECT_ID,apiKey:process.env.UNIFORM_API_KEY}),{nodes:u}=await c.getNodes({path:s?.matchedRoute,includeAncestors:!0});return u?.length?Promise.all(u.map(async d=>{let x=d.pathSegment?.includes(":")&&d.compositionId?await new xo({projectId:process.env.UNIFORM_PROJECT_ID,apiKey:process.env.UNIFORM_API_KEY}).getCompositionById({compositionId:d.compositionId}).then(({composition:N})=>N&&Gt(N)?.pageTitle||d.name).catch(()=>d.name):d.name,T=d.type==="placeholder"?void 0:O(d.path,s.dynamicInputs);return{title:x,link:T}})):[]})():await(async()=>e?.reduce((c,u)=>{let{title:d,link:P}=Gt(u);return d?[...c,{title:d,link:g(P)}]:c},[])||[])();return l.length?te("ul",{className:f("flex items-center",{[`text-${t}`]:!!t,[`text-${o}`]:!!o}),children:l.map(({title:c,link:u},d)=>go("li",{className:"flex items-center",children:[!!d&&te("div",{className:"mx-2 size-[1em]",children:Rt(r)}),u?te($,{variant:"link",textColor:o,className:f({[`font-${a}`]:!!a,[`text-${t}`]:!!t,[p||""]:!!p}),href:u,children:c}):te(b,{size:t,font:a,color:o,transform:p,children:c})]},`${c}-${d}`))}):null};var ze=Dt;import{useMemo as vo}from"react";import{UniformText as bo}from"@uniformdev/canvas-next-rsc/component";import{jsx as re}from"react/jsx-runtime";var Et=({component:r,context:e,link:t,textColor:o,textFont:a,textWeight:p,textTransform:i,buttonColor:s,icon:n,iconPosition:m,border:l,size:c,textSize:u,hoverButtonColor:d,hoverTextColor:P,className:x,onClick:T,text:N})=>{let U=g(t),B=e.previewMode==="editor"&&e?.isContextualEditing,k=vo(()=>{let[he]=C(n),{url:M,title:br=""}=he||{};if(M)return{url:M,title:br}},[n]),ue=()=>{if(!k)return;let{url:he,title:M}=k;return re(v,{src:he,alt:M,width:20,height:20,containerStyle:{width:"20px",height:"20px"}})};return!(!!N||!!k)&&!B?null:re($,{variant:r.variant,href:U,border:l,size:c,onClick:T,className:x,textSize:u,isActive:e.matchedRoute===U,textColor:o,textFont:a,textWeight:p,textTransform:i,buttonColor:s,hoverButtonColor:d,hoverTextColor:P,icon:re(ue,{}),iconPosition:m,children:re(bo,{placeholder:"Button text goes here",parameterId:"text",component:r,context:e})})};var qe=Et;import{UniformSlot as Io}from"@uniformdev/canvas-next-rsc/component";import{jsx as Mt}from"react/jsx-runtime";var oe=({displayName:r,anchor:e,slots:t,component:o,context:a,backgroundColor:p,spacing:i,border:s,fluidContent:n,fullHeight:m,className:l})=>Mt(lt,{title:r,id:e,backgroundColor:p,spacing:i,border:s,fluidContent:n,fullHeight:m,className:l,children:Mt(Io,{data:o,context:a,slot:t.containerContent})});var Ot=(e=>(e.ContainerContent="containerContent",e))(Ot||{});import{jsx as jt}from"react/jsx-runtime";var ae=({color:r,thickness:e,width:t,alignment:o})=>jt("div",{className:f("flex w-full",`justify-${o||"center"}`),children:jt("div",{className:f({[`bg-${r}`]:!!r}),style:{width:t,height:e}})});import{UniformSlot as wo}from"@uniformdev/canvas-next-rsc/component";import{jsx as $t}from"react/jsx-runtime";var Wt=({direction:r,justifyContent:e,gap:t,alignItems:o,backgroundColor:a,spacing:p,border:i,fluidContent:s,fullHeight:n,slots:m,component:l,context:c,className:u,wrapperClassName:d})=>$t(ft,{direction:r,justifyContent:e,gap:t,alignItems:o,backgroundColor:a,spacing:p,border:i,fluidContent:s,fullHeight:n,wrapperClassName:d,className:u,children:$t(wo,{data:l,context:c,slot:m.flexItem})});var Je=Wt;import{UniformSlot as To}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ht}from"react/jsx-runtime";var ne=({alignSelf:r,shrink:e,context:t,component:o,slots:a})=>Ht(ht,{alignSelf:r,shrink:e,children:Ht(To,{data:o,context:t,slot:a.inner})});import{UniformSlot as So}from"@uniformdev/canvas-next-rsc/component";import{jsx as zt}from"react/jsx-runtime";var qt=({columnsCount:r,gapX:e,gapY:t,backgroundColor:o,spacing:a,border:p,fluidContent:i,fullHeight:s,slots:n,component:m,context:l,className:c})=>zt(ct,{className:c,columnsCount:r,gapX:e,gapY:t,backgroundColor:o,spacing:a,border:p,fluidContent:i,fullHeight:s,children:zt(So,{data:m,context:l,slot:n.gridInner})});var Jt=(e=>(e.GridInner="gridInner",e))(Jt||{}),Ke=qt;import{UniformSlot as Ao}from"@uniformdev/canvas-next-rsc/component";import{jsx as Kt}from"react/jsx-runtime";var Qt=({columnStart:r,columnSpan:e,rowStart:t,className:o,rowSpan:a,context:p,component:i,slots:s})=>Kt(dt,{columnStart:r,columnSpan:e,rowStart:t,rowSpan:a,className:o,children:Kt(Ao,{data:i,context:p,slot:s.inner})});var Yt=(e=>(e.Inner="inner",e))(Yt||{}),Qe=Qt;import{UniformText as No}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ye}from"react/jsx-runtime";var Xt=({icon:r,size:e,tag:t,color:o,weight:a,font:p,transform:i,decoration:s,letterSpacing:n,alignment:m,component:l,context:c})=>{let[u]=C(r),{url:d,title:P=""}=u||{};return Ye(z,{icon:d?Ye(v,{src:d,alt:P,fill:!0}):void 0,size:e,tag:t,color:o,weight:a,font:p,transform:i,decoration:s,letterSpacing:n,alignment:m,children:Ye(No,{placeholder:"Text goes here",parameterId:"text",component:l,context:c})})};var Xe=Xt;import{jsx as Zt}from"react/jsx-runtime";var er=({context:r,component:e,width:t,height:o})=>{let a=r.previewMode==="editor"&&r.isContextualEditing,p=e?._id?.includes("placeholder_");return!a||p?null:Zt("div",{style:{width:t?`${t}px`:"auto",height:o?`${o}px`:"auto"},children:Zt(W,{type:"image",placeholder:"Please add an asset to display an image"})})};import{jsx as tr}from"react/jsx-runtime";var ie=({image:r,objectFit:e,width:t,height:o,overlayColor:a,overlayOpacity:p,border:i,priority:s,unoptimized:n,context:m,component:l})=>{let[c]=C(r);if(!c)return tr(er,{context:m,component:l,width:t,height:o});let{url:u,title:d=""}=c;return tr(v,{containerStyle:{...t?{width:`${t}px`}:{},...o?{height:`${o}px`}:{}},src:u,alt:d,fill:!0,unoptimized:n,priority:s,sizes:"100%",style:{objectFit:e},overlayColor:a,overlayOpacity:p,border:i})};import{UniformSlot as Bo}from"@uniformdev/canvas-next-rsc/component";import{jsx as rr}from"react/jsx-runtime";var or=({component:r,context:e,slots:t,link:o,openInNewTab:a})=>rr(j,{link:g(o),openInNewTab:a,children:rr(Bo,{data:r,context:e,slot:t.linkContent})});var ar=(e=>(e.LinkContent="linkContent",e))(ar||{}),Ze=or;import{UniformText as ko}from"@uniformdev/canvas-next-rsc/component";import{jsx as nr}from"react/jsx-runtime";var ir=({href:r,isExternalLink:e,children:t})=>r?nr(j,{className:"cursor-pointer hover:no-underline",link:r,openInNewTab:e,rel:e?"noopener noreferrer":"",children:t}):nr("div",{className:"cursor-pointer",children:t});import{jsx as E}from"react/jsx-runtime";var sr=({icon:r,link:e,activeState:t,size:o,tag:a,color:p,weight:i,font:s,transform:n,decoration:m,letterSpacing:l,alignment:c,component:u,context:d,hoverEffect:P="",className:x})=>{let T=g(e),N=t&&O(d.matchedRoute,d.dynamicInputs)===T,[U]=C(r),{url:B,title:k=""}=U||{},ue=()=>B?B.endsWith(".svg")?E(ut,{src:B,alt:k,fill:!0}):E(v,{src:B,alt:k,fill:!0}):null,fe=f("transition-all duration-150",{[Pe(P,"group-hover:{value}")]:!!P,[Pe(P,"{value}")]:!!P&&N});return E(ir,{href:T,isExternalLink:mt(T),children:E(z,{icon:ue(),className:f("group",x),iconClassName:fe,textClassName:fe,size:o,tag:a,color:p,weight:i,font:s,transform:n,decoration:m,letterSpacing:l,alignment:c,children:E(ko,{placeholder:"Text goes here",parameterId:"text",className:"whitespace-nowrap",component:u,context:d})})})};var et=sr;import{UniformRichText as Fo}from"@uniformdev/canvas-next-rsc/component";import{jsx as pr}from"react/jsx-runtime";var mr=({color:r,lineCountRestrictions:e,font:t,component:o,className:a})=>pr(b,{lineCountRestrictions:e,color:r,font:t,children:pr(Fo,{className:f("prose max-w-full marker:text-current [&_*:not(pre)]:text-current",a),parameterId:"text",component:o,placeholder:"Rich text content goes here..."})});var tt=mr;import{jsx as Uo}from"react/jsx-runtime";var se=({size:r,component:{variant:e}})=>{let t=e==="horizontal";return Uo("div",{className:f({[`w-${r}`]:t,[`h-${r}`]:!t})})};var rt=(e=>(e.Horizontal="horizontal",e))(rt||{});import{UniformSlot as _o}from"@uniformdev/canvas-next-rsc/component";import{jsx as Vo}from"react/jsx-runtime";var lr=({slots:r,component:e,context:t})=>Vo(_o,{data:e,context:t,slot:r.tabContent});var cr=(e=>(e.TabContent="tabContent",e))(cr||{}),ot=lr;import{UniformSlot as Lo}from"@uniformdev/canvas-next-rsc/component";import{jsx as at}from"react/jsx-runtime";var pe=({component:r,context:e,slots:t,alignment:o})=>at("td",{children:at("div",{className:f("w-fit",dr[o||"left"]),children:at(Lo,{slot:t.tableCustomCellContent,context:e,data:r})})});var dr={left:"ml-0",center:"mx-auto",right:"ml-auto"},ur=(e=>(e.TableCustomCellContent="tableCustomCellContent",e))(ur||{});import{UniformText as Ro}from"@uniformdev/canvas-next-rsc/component";import{jsx as fr}from"react/jsx-runtime";var me=({component:r,context:e})=>fr("td",{children:fr(Ro,{component:r,context:e,parameterId:"value",placeholder:"Value"})});import{UniformText as Go}from"@uniformdev/canvas-next-rsc/component";import{jsx as hr}from"react/jsx-runtime";var le=({component:r,context:e})=>hr("th",{children:hr(Go,{component:r,context:e,parameterId:"value",placeholder:"Value"})});import{UniformSlot as Do}from"@uniformdev/canvas-next-rsc/component";import{jsx as Pr}from"react/jsx-runtime";var ce=({slots:r,component:e,context:t})=>Pr("tr",{children:Pr(Do,{data:e,context:t,slot:r.tableRowCells})});import{UniformText as Eo}from"@uniformdev/canvas-next-rsc/component";import{jsx as Cr}from"react/jsx-runtime";var yr=({tag:r,size:e,color:t,weight:o,font:a,transform:p,decoration:i,letterSpacing:s,lineCountRestrictions:n,alignment:m,component:l,context:c})=>Cr(b,{color:t,size:e,font:a,weight:o,transform:p,decoration:i,letterSpacing:s,alignment:m,lineCountRestrictions:n,children:Cr(Eo,{placeholder:"Text goes here",parameterId:"text",as:r||void 0,component:l,context:c})});var nt=yr;import Mo from"next/dynamic";var it=Mo(()=>import("../../theme-switcher-WO5JIV2W.mjs").then(r=>r.ThemeSwitcher));import{jsx as Oo}from"react/jsx-runtime";var xr=({context:r,component:e})=>{let t=r.previewMode==="editor"&&r.isContextualEditing,o=e?._id?.includes("placeholder_");return!t||o?null:Oo(W,{type:"video",placeholder:"Please add video link to display a video"})};import{jsx as gr}from"react/jsx-runtime";var de=({video:r,url:e,placeholderImage:t,autoPlay:o,lazyLoad:a,loop:p,controls:i,muted:s,overlayColor:n,overlayOpacity:m,border:l,component:c,context:u})=>{let[d]=C(r),[P]=C(t),x=d?.url||(e?.type==="url"?e.path:void 0);return x?gr(Pt,{url:x,placeholderImageUrl:P?.url,autoPlay:o,lazyLoad:a,loop:p,controls:i,muted:s,overlayColor:n,overlayOpacity:m,border:l}):gr(xr,{component:c,context:u})};var vr={accordion:{component:Ce},accordionItem:{component:Ve},badge:{component:Re},banner:{component:ye},button:{component:qe},card:{component:xe},carousel:{component:ge},container:{component:oe},countdown:{component:ve},divider:{component:ae},grid:{component:Ke},gridItem:{component:Qe},flex:{component:Je},flexItem:{component:ne},header:{component:Ie},section:{component:ke},iconLabel:{component:Xe},image:{component:ie},page:{component:Ne},richText:{component:tt},spacer:{component:se},text:{component:nt},video:{component:de},tabs:{component:Ue},tab:{component:ot},table:{component:Fe},tableRow:{component:ce},tableHeaderCell:{component:le},tableDataCell:{component:me},tableCustomCell:{component:pe},modal:{component:Te},imageGallery:{component:we},testimonial:{component:_e},breadcrumbs:{component:ze},review:{component:Be},navigationLink:{component:et},navigationGroup:{component:Ae},navigationFlyout:{component:Se},footer:{component:be},themeSwitcher:{component:it},link:{component:Ze},fixedHero:{component:H.FixedHero},flexibleHero:{component:H.FlexibleHero}},ap=vr,np=pt(vr);export{Ce as Accordion,Ve as AccordionItem,Ct as AccordionItemSlots,wr as AccordionSlots,Re as Badge,ye as Banner,Tr as BannerContentAlignment,Sr as BannerSlots,ze as Breadcrumbs,qe as Button,xe as Card,Nr as CardSlots,Ar as CardVariants,ge as Carousel,Br as CarouselSlots,Mr as CommonPageSlots,oe as Container,Ot as ContainerSlots,ve as Countdown,kr as CountdownSlots,Fr as CountdownVariants,H as DemoHero,Ur as DemoHeroContentAlignment,_r as DemoHeroVariants,ae as Divider,Je as Flex,ne as FlexItem,Vr as FlexibleHeroSlots,be as Footer,Lr as FooterSlots,Ke as Grid,Qe as GridItem,Yt as GridItemSlots,Jt as GridSlots,Ie as Header,Rr as HeaderSlots,Gr as HeaderVariants,Xe as IconLabel,ie as Image,we as ImageGallery,Dr as ImageGallerySlots,Ze as Link,ar as LinkSlots,Te as Modal,Er as ModalSlots,Se as NavigationFlyout,Ae as NavigationGroup,et as NavigationLink,Ne as Page,Be as Review,jr as ReviewSlots,Or as ReviewVariants,tt as RichText,ke as Section,$r as SectionContentAlignment,Hr as SectionSlots,Wr as SectionVariants,se as Spacer,rt as SpacerVariants,ot as Tab,cr as TabSlots,Fe as Table,pe as TableCustomCell,ur as TableCustomCellSlots,me as TableDataCell,le as TableHeaderCell,ce as TableRow,zr as TableSlots,Ue as Tabs,Jr as TabsSlots,qr as TabsVariants,_e as Testimonial,Qr as TestimonialSlots,Kr as TestimonialVariants,nt as Text,it as ThemeSwitcher,de as Video,np as componentResolver,vr as cskComponentsMapping,ap as default};

package/dist/components/ui/index.d.mts

@@ -20,8 +20,6 @@ declare const Header: FC<HeaderProps>;
 
 declare const Arrow: FC<SVGProps<SVGElement>>;
 
-declare const ChevronDown: FC<SVGProps<SVGElement>>;
-
 declare const ImageIcon: FC<SVGProps<SVGSVGElement>>;
 
 declare const VideoIcon: FC<SVGProps<SVGSVGElement>>;
@@ -85,6 +83,8 @@ type IconLabelProps = {
     icon?: ReactNode;
     children: ReactElement | string;
     textClassName?: string;
+    iconClassName?: string;
+    className?: string;
     text?: string;
     tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
     size?: TextProps['size'];
@@ -156,4 +156,4 @@ type VideoProps = ReactPlayerProps & {
 };
 declare const _default: react.ComponentType<VideoProps>;
 
-export { Arrow as ArrowIcon, Button, ButtonProps, _default$2 as Carousel, type CarouselProps, ChevronDown as ChevronDownIcon, Container, ContainerProps, Flex, FlexItem, type FlexItemProps, type FlexProps, Footer, FooterProps, Grid, GridItem, type GridItemProps, type GridProps, Header, HeaderProps, IconLabel, type IconLabelProps, Image, ImageIcon, type ImageProps, Link, type LinkProps, MediaPlaceholder, type MediaPlaceholderType, Page, type PageProps, Rating, type RatingProps, Text, TextProps, _default$1 as ThemeSwitcher, type ThemeSwitcherProps, _default as Video, VideoIcon, type VideoProps };
+export { Arrow as ArrowIcon, Button, ButtonProps, _default$2 as Carousel, type CarouselProps, Container, ContainerProps, Flex, FlexItem, type FlexItemProps, type FlexProps, Footer, FooterProps, Grid, GridItem, type GridItemProps, type GridProps, Header, HeaderProps, IconLabel, type IconLabelProps, Image, ImageIcon, type ImageProps, Link, type LinkProps, MediaPlaceholder, type MediaPlaceholderType, Page, type PageProps, Rating, type RatingProps, Text, TextProps, _default$1 as ThemeSwitcher, type ThemeSwitcherProps, _default as Video, VideoIcon, type VideoProps };

package/dist/components/ui/index.mjs

@@ -1 +1 @@
-import{a as F}from"../../chunk-ZWDCDE5W.mjs";import{a as g,b as h,c as C}from"../../chunk-JTRZPR2Q.mjs";import{a as i}from"../../chunk-VEUVLMJO.mjs";import{a as t,b as r,c as a,d as x,e as u,f as y,g as I,h as c}from"../../chunk-26BSLQVU.mjs";import{a as f,b as s,c as d,d as l}from"../../chunk-3TBBNSCU.mjs";import{a as p}from"../../chunk-EIQPM3DQ.mjs";import{a as m}from"../../chunk-QHIWJPL6.mjs";import{a as o}from"../../chunk-J2GMOCYV.mjs";import{a as P,b as n}from"../../chunk-VZCFPWET.mjs";import{a as e}from"../../chunk-RZFK2OR7.mjs";import"../../chunk-2OD4OVSF.mjs";import"../../chunk-S7CSCIW4.mjs";export{f as ArrowIcon,r as Button,a as ButtonVariant,o as Carousel,s as ChevronDownIcon,e as Container,g as Flex,h as FlexItem,u as Footer,P as Grid,n as GridItem,y as Header,i as IconLabel,p as Image,d as ImageIcon,t as Link,x as MediaPlaceholder,I as Page,c as Rating,m as Text,F as ThemeSwitcher,C as Video,l as VideoIcon};
+import{a as h}from"../../chunk-V4EBWEG4.mjs";import{a as c,b as g,c as F}from"../../chunk-HLLKGZN6.mjs";import{a as i}from"../../chunk-AKRWCDDG.mjs";import{a as o}from"../../chunk-P2OOJTJ2.mjs";import{a as t,b as r,c as a,d as m,e as x,f as y,g as n,h as I}from"../../chunk-H3OSPGNK.mjs";import{a as f,b as s,c as d}from"../../chunk-6TUDWIYU.mjs";import{a as l}from"../../chunk-QHIWJPL6.mjs";import{a as u,b as P}from"../../chunk-VZCFPWET.mjs";import{a as p}from"../../chunk-EIQPM3DQ.mjs";import{a as e}from"../../chunk-RZFK2OR7.mjs";import"../../chunk-RX4IAAQQ.mjs";import"../../chunk-S7CSCIW4.mjs";import"../../chunk-YEKQJ4YC.mjs";export{f as ArrowIcon,r as Button,a as ButtonVariant,o as Carousel,e as Container,c as Flex,g as FlexItem,x as Footer,u as Grid,P as GridItem,y as Header,i as IconLabel,p as Image,s as ImageIcon,t as Link,m as MediaPlaceholder,n as Page,I as Rating,l as Text,h as ThemeSwitcher,F as Video,d as VideoIcon};

package/dist/content/components/canvas/Badge/index.tsx

@@ -1,5 +1,4 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { Badge } from './badge';
 
 export type BadgeParameters = {
@@ -14,4 +13,4 @@ export type BadgeParameters = {
 
 export type BadgeProps = ComponentProps<BadgeParameters>;
 
-export default withPlaygroundWrapper(Badge);
+export default Badge;

package/dist/content/components/canvas/Breadcrumbs/breadcrumbs.tsx

@@ -1,19 +1,76 @@
 import { FC } from 'react';
-import { flattenValues, LinkParamValue } from '@uniformdev/canvas';
+import { flattenValues, LinkParamValue, CanvasClient } from '@uniformdev/canvas';
+import { ProjectMapClient } from '@uniformdev/project-map';
 import BaseButton, { ButtonVariant } from '@/components/ui/Button';
 import BaseText from '@/components/ui/Text';
-import { formatUniformLink } from '@/utils/routing';
+import { formatUniformLink, resolveRouteToPath } from '@/utils/routing';
 import { cn } from '@/utils/styling';
 import { BreadcrumbLink, BreadcrumbsProps } from '.';
 import { getSeparator } from './helpers';
 
-export const Breadcrumbs: FC<BreadcrumbsProps> = ({ separator, links, size, color, font, transform }) => {
-  const itemToDisplay =
-    links?.reduce<BreadcrumbLink[]>((acc, linkItem) => {
-      const { title, link } = (flattenValues(linkItem) as { title?: string; link?: LinkParamValue } | undefined) || {};
-      return title ? [...acc, { title, link: formatUniformLink(link) }] : acc;
+export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
+  separator,
+  links,
+  size,
+  color,
+  font,
+  transform,
+  autoGenerate,
+  context,
+}) => {
+  const getManualBreadcrumbs = async (): Promise<BreadcrumbLink[]> =>
+    links?.reduce<BreadcrumbLink[]>((acc, item) => {
+      const { title, link } = flattenValues(item) as {
+        title?: string;
+        link?: LinkParamValue;
+      };
+
+      if (!title) return acc;
+
+      return [...acc, { title, link: formatUniformLink(link) }];
     }, []) || [];
 
+  const getAutoBreadcrumbs = async (): Promise<BreadcrumbLink[]> => {
+    const client = new ProjectMapClient({
+      projectId: process.env.UNIFORM_PROJECT_ID,
+      apiKey: process.env.UNIFORM_API_KEY,
+    });
+
+    const { nodes } = await client.getNodes({
+      path: context?.matchedRoute,
+      includeAncestors: true,
+    });
+
+    if (!nodes?.length) return [];
+
+    return Promise.all(
+      nodes.map(async node => {
+        const isDynamic = node.pathSegment?.includes(':');
+
+        const title =
+          isDynamic && node.compositionId
+            ? await new CanvasClient({
+                projectId: process.env.UNIFORM_PROJECT_ID,
+                apiKey: process.env.UNIFORM_API_KEY,
+              })
+                .getCompositionById({ compositionId: node.compositionId })
+                .then(({ composition }) => {
+                  if (!composition) return node.name;
+                  const flattened = flattenValues(composition);
+                  return (flattened?.pageTitle as string) || node.name;
+                })
+                .catch(() => node.name)
+            : node.name;
+
+        const link = node.type === 'placeholder' ? undefined : resolveRouteToPath(node.path, context.dynamicInputs);
+
+        return { title, link };
+      })
+    );
+  };
+
+  const itemToDisplay = autoGenerate ? await getAutoBreadcrumbs() : await getManualBreadcrumbs();
+
   if (!itemToDisplay.length) {
     // ToDo: Add breadcrumbs placeholder
     return null;

package/dist/content/components/canvas/Breadcrumbs/index.tsx

@@ -1,7 +1,6 @@
 import { DataWithProperties } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { Breadcrumbs } from './breadcrumbs';
 
 export type BreadcrumbLink = {
@@ -13,10 +12,11 @@ export type BreadcrumbsParameters = {
   title?: string;
   separator?: 'slash' | 'chevron';
   links?: DataWithProperties[];
+  autoGenerate?: boolean;
 };
 
 export type BreadcrumbsProps = ComponentProps<
   BreadcrumbsParameters & Pick<TextParameters, 'size' | 'color' | 'font' | 'transform'>
 >;
 
-export default withPlaygroundWrapper(Breadcrumbs);
+export default Breadcrumbs;

package/dist/content/components/canvas/Button/index.tsx

@@ -3,7 +3,6 @@ import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ButtonProps as BaseButtonProps } from '@/components/ui/Button';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 import { Button } from './button';
 
@@ -32,4 +31,4 @@ export type ButtonAdditionalProps = {
 
 export type ButtonProps = ComponentProps<ButtonParameters & ButtonAdditionalProps>;
 
-export default withPlaygroundWrapper(Button);
+export default Button;

package/dist/content/components/canvas/DemoHero/fixed-hero.tsx

@@ -18,7 +18,7 @@ export const FixedHero: FC<DemoHeroProps> = props => (
     titleSize={{
       mobile: '3xl',
       tablet: '5xl',
-      desktop: '7xl',
+      desktop: '5xl',
     }}
     titleWeight="bold"
     // Description Text Parameters

package/dist/content/components/canvas/Flex/index.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 import { Flex } from './flex';
 
@@ -27,4 +26,4 @@ enum FlexSlots {
 
 export type FlexProps = ComponentProps<FlexParameters & FlexAdditionalProps, FlexSlots>;
 
-export default withPlaygroundWrapper(Flex);
+export default Flex;

package/dist/content/components/canvas/Footer/index.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { FooterProps as BaseFooterProps } from '@/components/ui/Footer';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { Footer } from './footer';
 
 export type FooterParameters = BaseFooterProps;
@@ -13,5 +12,5 @@ export enum FooterSlots {
 
 export type FooterProps = ComponentProps<FooterParameters, FooterSlots>;
 
-export default withPlaygroundWrapper(Footer);
+export default Footer;
 export { FooterEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Grid/index.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 import { Grid } from './grid';
 
@@ -23,4 +22,4 @@ export enum GridSlots {
 
 export type GridProps = ComponentProps<GridParameters & GridAdditionalProps, GridSlots>;
 
-export default withPlaygroundWrapper(Grid);
+export default Grid;

package/dist/content/components/canvas/GridItem/index.tsx

@@ -1,5 +1,4 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 import { GridItem } from './grid-item';
 
@@ -40,4 +39,4 @@ export enum GridItemSlots {
 
 export type GridItemProps = ComponentProps<GridItemParameters & GridItemAdditionalProps, GridItemSlots>;
 
-export default withPlaygroundWrapper(GridItem);
+export default GridItem;

package/dist/content/components/canvas/Header/index.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { HeaderProps as BaseHeaderProps } from '@/components/ui/Header';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { Header } from './header';
 
 export type HeaderParameters = Omit<BaseHeaderProps, 'sticky'>;
@@ -17,5 +16,5 @@ export enum HeaderVariants {
 
 export type HeaderProps = ComponentProps<HeaderParameters, HeaderSlots>;
 
-export default withPlaygroundWrapper(Header);
+export default Header;
 export { HeaderEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/IconLabel/index.tsx

@@ -1,7 +1,6 @@
 import { AssetParamValue } from '@uniformdev/assets';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { IconLabel } from './icon-label';
 
 export type IconLabelParameters = TextParameters & {
@@ -10,4 +9,4 @@ export type IconLabelParameters = TextParameters & {
 
 export type IconLabelProps = ComponentProps<IconLabelParameters>;
 
-export default withPlaygroundWrapper(IconLabel);
+export default IconLabel;

package/dist/content/components/canvas/Link/index.tsx

@@ -1,6 +1,5 @@
 import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { Link } from './link';
 
 export type LinkParameters = {
@@ -15,4 +14,4 @@ export enum LinkSlots {
 
 export type LinkProps = ComponentProps<LinkParameters, LinkSlots>;
 
-export default withPlaygroundWrapper(Link);
+export default Link;

package/dist/content/components/canvas/NavigationFlyout/index.tsx

@@ -3,7 +3,6 @@ import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 
 export type NavigationFlyoutParameters = TextParameters & {
@@ -11,6 +10,9 @@ export type NavigationFlyoutParameters = TextParameters & {
   link?: LinkParamValue;
   backgroundColor?: string;
   border?: string | ViewPort<string>;
+  caretIcon?: AssetParamValue;
+  hoverEffect?: string | ViewPort<string>;
+  className?: string;
 };
 
 export enum NavigationFlyoutSlots {
@@ -20,5 +22,5 @@ export enum NavigationFlyoutSlots {
 
 export type NavigationFlyoutProps = ComponentProps<NavigationFlyoutParameters, NavigationFlyoutSlots>;
 
-export default dynamic(() => import('./navigation-flyout').then(mod => withPlaygroundWrapper(mod.NavigationFlyout)));
+export default dynamic(() => import('./navigation-flyout').then(mod => mod.NavigationFlyout));
 export { NavigationFlyoutEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/NavigationFlyout/navigation-flyout.tsx

@@ -2,17 +2,19 @@
 
 import { FC, useCallback, useMemo, useState } from 'react';
 import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { ChevronDownIcon } from '@/components/ui/_icons';
 import BaseIconLabel from '@/components/ui/IconLabel';
 import BaseImage from '@/components/ui/Image';
+import InlineSVG from '@/components/ui/InlineSVG';
 import { resolveAsset } from '@/utils/assets';
+import { cn, resolveViewPort } from '@/utils/styling';
 import { NavigationFlyoutProps } from '.';
 import { NavigationFlyoutPropsDesktopContent } from './desktop';
 import { NavigationFlyoutPropsMobileContent } from './mobile';
-import { getButtonClasses, getChevronClasses } from './style-utils';
+import { getButtonClasses, getCaretClasses } from './style-utils';
 
 export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   icon,
+  caretIcon,
   backgroundColor,
   border,
   size,
@@ -27,6 +29,8 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   component,
   context,
   slots,
+  hoverEffect = '',
+  className,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -41,18 +45,40 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   const [resolvedImage] = resolveAsset(icon);
   const { url, title = '' } = resolvedImage || {};
 
+  const renderUrl = () => {
+    if (!url) return null;
+
+    return url.endsWith('.svg') ? <InlineSVG src={url} alt={title} fill /> : <BaseImage src={url} alt={title} fill />;
+  };
+
+  const actionClassName = cn('transition-all duration-150', {
+    [resolveViewPort(hoverEffect, 'group-hover:{value}')]: !!hoverEffect,
+  });
+
+  const [resolvedCaretIcon] = resolveAsset(caretIcon);
+  const { url: caretUrl, title: caretTitle = '' } = resolvedCaretIcon || {};
+
   return (
     <div className="relative" onMouseLeave={closeFlyout}>
       <button onMouseEnter={openFlyout} className={getButtonClasses({ color })}>
         <BaseIconLabel
-          icon={url && <BaseImage src={url} alt={title} fill />}
+          icon={renderUrl()}
+          className={cn('group', className)}
+          iconClassName={actionClassName}
+          textClassName={actionClassName}
           {...{ size, tag, color, weight, font, transform, decoration, letterSpacing, alignment }}
         >
           <UniformText placeholder="Text goes here" parameterId="text" component={component} context={context} />
         </BaseIconLabel>
-        <div className={getChevronClasses({ isOpen })}>
-          <ChevronDownIcon />
-        </div>
+        {caretUrl && (
+          <div
+            className={cn('relative size-[1em]', getCaretClasses({ isOpen }), {
+              [`text-${size}`]: !!size,
+            })}
+          >
+            <BaseImage src={caretUrl} alt={caretTitle} fill />
+          </div>
+        )}
       </button>
 
       <div className="hidden md:block">

package/dist/content/components/canvas/NavigationFlyout/style-utils.ts

@@ -1,10 +1,10 @@
 import { cn } from '@/utils/styling';
 import { NavigationFlyoutParameters } from '.';
 
-type ChevronClassesProps = {
+type CaretClassesProps = {
   isOpen?: boolean;
 };
-export const getChevronClasses = ({ isOpen }: ChevronClassesProps) =>
+export const getCaretClasses = ({ isOpen }: CaretClassesProps) =>
   cn('transition transform hidden md:block', {
     'rotate-180': isOpen,
     'rotate-0': !isOpen,

package/dist/content/components/canvas/NavigationGroup/index.tsx

@@ -3,14 +3,16 @@ import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { withPlaygroundWrapper } from '@/hocs/withPlaygroundWrapper';
 import { ViewPort } from '@/types/cskTypes';
 
 export type NavigationGroupParameters = TextParameters & {
   icon?: AssetParamValue;
+  caretIcon?: AssetParamValue;
   link?: LinkParamValue;
   backgroundColor?: string;
   border?: string | ViewPort<string>;
+  hoverEffect?: string | ViewPort<string>;
+  className?: string;
 };
 
 export enum NavigationGroupSlots {
@@ -19,5 +21,5 @@ export enum NavigationGroupSlots {
 
 export type NavigationGroupProps = ComponentProps<NavigationGroupParameters, NavigationGroupSlots>;
 
-export default dynamic(() => import('./navigation-group').then(mod => withPlaygroundWrapper(mod.NavigationGroup)));
+export default dynamic(() => import('./navigation-group').then(mod => mod.NavigationGroup));
 export { NavigationGroupEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/NavigationGroup/navigation-group.tsx

@@ -2,17 +2,19 @@
 
 import { FC, useCallback, useState } from 'react';
 import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { ChevronDownIcon } from '@/components/ui/_icons';
 import BaseIconLabel from '@/components/ui/IconLabel';
 import BaseImage from '@/components/ui/Image';
+import InlineSVG from '@/components/ui/InlineSVG';
 import { resolveAsset } from '@/utils/assets';
+import { cn, resolveViewPort } from '@/utils/styling';
 import { NavigationGroupProps } from '.';
 import { NavigationGroupDesktopContent } from './desktop';
 import { NavigationGroupMobileContent } from './mobile';
-import { getButtonClasses, getChevronClasses } from './style-utils';
+import { getButtonClasses, getCaretClasses } from './style-utils';
 
 export const NavigationGroup: FC<NavigationGroupProps> = ({
   icon,
+  caretIcon,
   backgroundColor,
   border,
   size,
@@ -27,6 +29,8 @@ export const NavigationGroup: FC<NavigationGroupProps> = ({
   component,
   context,
   slots,
+  hoverEffect = '',
+  className,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -36,18 +40,40 @@ export const NavigationGroup: FC<NavigationGroupProps> = ({
   const [resolvedImage] = resolveAsset(icon);
   const { url, title = '' } = resolvedImage || {};
 
+  const renderUrl = () => {
+    if (!url) return null;
+
+    return url.endsWith('.svg') ? <InlineSVG src={url} alt={title} fill /> : <BaseImage src={url} alt={title} fill />;
+  };
+
+  const actionClassName = cn('transition-all duration-150', {
+    [resolveViewPort(hoverEffect, 'group-hover:{value}')]: !!hoverEffect,
+  });
+
+  const [resolvedCaretIcon] = resolveAsset(caretIcon);
+  const { url: caretUrl, title: caretTitle = '' } = resolvedCaretIcon || {};
+
   return (
     <div className="relative" onMouseLeave={closeFlyout}>
       <button onMouseEnter={openFlyout} onClick={openFlyout} className={getButtonClasses({ color })}>
         <BaseIconLabel
-          icon={url && <BaseImage src={url} alt={title} fill />}
+          icon={renderUrl()}
+          className={cn('group', className)}
+          iconClassName={actionClassName}
+          textClassName={actionClassName}
           {...{ size, tag, color, weight, font, transform, decoration, letterSpacing, alignment }}
         >
           <UniformText placeholder="Text goes here" parameterId="text" component={component} context={context} />
         </BaseIconLabel>
-        <div className={getChevronClasses({ isOpen })}>
-          <ChevronDownIcon />
-        </div>
+        {caretUrl && (
+          <div
+            className={cn('relative size-[1em]', getCaretClasses({ isOpen }), {
+              [`text-${size}`]: !!size,
+            })}
+          >
+            <BaseImage src={caretUrl} alt={caretTitle} fill />
+          </div>
+        )}
       </button>
 
       <div className="hidden md:block">

package/dist/content/components/canvas/NavigationGroup/style-utils.ts

@@ -1,10 +1,10 @@
 import { cn } from '@/utils/styling';
 import { NavigationGroupParameters } from '.';
 
-type ChevronClassesProps = {
+type CaretClassesProps = {
   isOpen?: boolean;
 };
-export const getChevronClasses = ({ isOpen }: ChevronClassesProps) =>
+export const getCaretClasses = ({ isOpen }: CaretClassesProps) =>
   cn('transition transform hidden md:block', {
     'rotate-180': isOpen,
     'rotate-0': !isOpen,