@uniformdev/csk-components 6.0.44-alpha.1 → 6.0.76-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 dt}from"../../chunk-TM7Q5NMH.mjs";import{a as ut,b as ft,c as ht}from"../../chunk-HLLKGZN6.mjs";import{a as q}from"../../chunk-AKRWCDDG.mjs";import{a as st}from"../../chunk-56OQGKRM.mjs";import{B as Se,D as Ae,E as Er,G as Ne,H as Mr,I as Or,K as Be,L as jr,M as $r,N as Wr,P as ke,Q as Hr,S as Ue,T as Jr,U as Kr,a as Pe,b as Ir,d as ye,e as Sr,f as Ar,h as Nr,i as xe,k as Fr,l as Ur,m as _r,n as z,p as Vr,q as ve,s as Lr,t as Rr,u as be,w as Gr,x as Ie,z as Te}from"../../chunk-T5V5WTTI.mjs";import{b as Dr,c as we}from"../../chunk-2SEOCBRK.mjs";import{a as zr,b as qr,c as Fe}from"../../chunk-CBZWZSQW.mjs";import{a as $,b as W,d as H}from"../../chunk-H3OSPGNK.mjs";import"../../chunk-6TUDWIYU.mjs";import{a as I}from"../../chunk-QHIWJPL6.mjs";import{a as wr,b as Tr,c as Ce}from"../../chunk-T6HZMAEP.mjs";import{a as Br,b as kr,c as ge}from"../../chunk-2UV7TQNF.mjs";import{a as lt,b as ct}from"../../chunk-VZCFPWET.mjs";import{a as b}from"../../chunk-EIQPM3DQ.mjs";import{a as mt}from"../../chunk-RZFK2OR7.mjs";import"../../chunk-3PDY7RJC.mjs";import{a as C}from"../../chunk-JNIJ5N3Y.mjs";import"../../chunk-MSXDLSXH.mjs";import{a as j,c as v,d as pt}from"../../chunk-RX4IAAQQ.mjs";import{a as he,c as f}from"../../chunk-S7CSCIW4.mjs";import{a as it,b as br}from"../../chunk-YEKQJ4YC.mjs";var bt=it((aa,vt)=>{"use strict";var Re=class{constructor(e){this.value=e,this.next=void 0}},Ge=class{constructor(){this.clear()}enqueue(e){let t=new Re(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}};vt.exports=Ge});var wt=it((na,It)=>{"use strict";var Zr=bt(),eo=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 Zr,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};It.exports=eo});import Qr from"next/dynamic";var Pt=(e=>(e.AccordionItemContent="accordionItemContent",e))(Pt||{}),_e=Qr(()=>import("../../accordion-item-A2CU5OKG.mjs").then(r=>r.AccordionItem));import{UniformText as Yr}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ct}from"react/jsx-runtime";var yt=({className:r,...e})=>Ct("svg",{viewBox:"0 0 6 6","aria-hidden":"true",className:f("w-1.5 h-1.5",r),...e,children:Ct("circle",{r:"3",cx:"3",cy:"3"})});var xt=({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 Ve,jsxs as Xr}from"react/jsx-runtime";var gt=({component:r,context:e,textColor:t,backgroundColor:o,borderColor:a,dotColor:p,pill:i=!1,size:s})=>Xr("div",{className:xt({pill:i,size:s,dotColor:p,borderColor:a,backgroundColor:o}),children:[p&&Ve(yt,{className:f({[`fill-${p}`]:p})}),Ve(I,{color:t,size:"xs",children:Ve(Yr,{placeholder:"Badge text goes here",parameterId:"text",component:r,context:e})})]});var Le=gt;import{flattenValues as Rt,CanvasClient as yo}from"@uniformdev/canvas";var St=br(wt(),1),to=Object.defineProperty,Tt=r=>{throw TypeError(r)},ro=(r,e,t)=>e in r?to(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,oo=(r,e,t)=>ro(r,typeof e!="symbol"?e+"":e,t),ao=(r,e,t)=>e.has(r)||Tt("Cannot "+t),h=(r,e,t)=>(ao(r,e,"read from private field"),t?t.call(r):e.get(r)),w=(r,e,t)=>e.has(r)?Tt("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t);var no=(0,St.default)(6),io=class At 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,At.prototype)}},x=class Nt{constructor(e){oo(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:no,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 so(()=>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 io(m,(o=t?.method)!=null?o:"GET",e.toString(),n.status,n.statusText,Nt.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 so(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 U,po=class J extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(J,U),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(J,U));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,U));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};U=new WeakMap;w(po,U,"/api/v2/aggregate");var De,mo=class Bt extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Bt,De),{...e,projectId:t});return await this.apiClient(o)}};De=new WeakMap;w(mo,De,"/api/v2/dimension");var _,X,kt=class B extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(B,_),{...e,projectId:t});return await this.apiClient(o)}async upsertCategory(e){let t=this.createUrl(h(B,_));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async removeCategory(e){let t=this.createUrl(h(B,_));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async upsertValue(e){let t=this.createUrl(h(B,X));await this.apiClient(t,{method:"PUT",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}async removeValue(e){let t=this.createUrl(h(B,X));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};_=new WeakMap;X=new WeakMap;w(kt,_,"/api/v1/enrichments");w(kt,X,"/api/v1/enrichment-values");var Ee,lo=class Ft extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Ft,Ee),{...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})}};Ee=new WeakMap;w(lo,Ee,"/api/v2/manifest");var V,co=class K extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(K,V),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(K,V));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,V));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};V=new WeakMap;w(co,V,"/api/v2/quirk");var L,uo=class Q extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Q,L),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(Q,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(Q,L));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};L=new WeakMap;w(uo,L,"/api/v2/signal");var R,fo=class Y extends x{constructor(e){super(e)}async get(e){let{projectId:t}=this.options,o=this.createUrl(h(Y,R),{...e,projectId:t});return await this.apiClient(o)}async upsert(e){let t=this.createUrl(h(Y,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(Y,R));await this.apiClient(t,{method:"DELETE",body:JSON.stringify({...e,projectId:this.options.projectId}),expectNoContent:!0})}};R=new WeakMap;w(fo,R,"/api/v2/test");import{createVariableReference as Po,parseVariableExpression as Co}from"@uniformdev/canvas";var Ut=r=>{throw TypeError(r)},$e=(r,e,t)=>e.has(r)||Ut("Cannot "+t),Z=(r,e,t)=>($e(r,e,"read from private field"),t?t.call(r):e.get(r)),_t=(r,e,t)=>e.has(r)?Ut("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t),ho=(r,e,t,o)=>($e(r,e,"write to private field"),o?o.call(r,t):e.set(r,t),t),G=(r,e,t)=>($e(r,e,"access private method"),t);var Vt=class extends x{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=Me(n),l.previousSibling=Me(m),m&&(m.nextSibling=Me(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 Me=r=>r?{...r,parent:void 0,children:void 0}:void 0;var S,A,je,ee,We=class T{constructor(e){this.route=e,_t(this,S);var t;ho(this,S,G(t=T,A,je).call(t,this.route))}get dynamicSegmentCount(){return Z(this,S).segments.reduce((e,t)=>{var o;return G(o=T,A,ee).call(o,t)?e+1:e},0)}matches(e){var t,o;let{segments:a,queryParams:p}=G(t=T,A,je).call(t,e),{segments:i}=Z(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(G(o=T,A,ee).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 Z(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=Z(this,S).segments.map(n=>{let m=T.getDynamicRouteSegmentName(n);if(!m)return n;let l=t[m];return l?Oe(l,a):n}).join("/"),i=o.filter(n=>{let m=typeof t[n];return m==="string"||m==="number"||m==="boolean"}).map(n=>`${Oe(n,a)}=${Oe(t[n],a)}`),s=i.length?`?${i.join("&")}`:"";return`/${p}${s}`}static getDynamicRouteSegmentName(e){var t;if(G(t=T,A,ee).call(t,e))return e.slice(T.dynamicSegmentPrefix.length)}};S=new WeakMap;A=new WeakSet;je=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}};ee=function(r){return r?r.startsWith(We.dynamicSegmentPrefix):!1};_t(We,A);We.dynamicSegmentPrefix=":";function Oe(r,e){if(!e)return encodeURIComponent(r);let t=[];return Co(r.toString(10),(o,a)=>{a==="variable"?t.push(Po(o)):t.push(encodeURIComponent(o))}),t.join("")}import{jsx as te}from"react/jsx-runtime";var Lt=r=>{switch(r){case"slash":return te("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:te("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m9 20.247 6-16.5"})});case"chevron":default:return te("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",children:te("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})})}};import{jsx as re,jsxs as xo}from"react/jsx-runtime";var Gt=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 Vt({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 y=d.pathSegment?.includes(":")&&d.compositionId?await new yo({projectId:process.env.UNIFORM_PROJECT_ID,apiKey:process.env.UNIFORM_API_KEY}).getCompositionById({compositionId:d.compositionId}).then(({composition:N})=>N&&Rt(N)?.pageTitle||d.name).catch(()=>d.name):d.name,k=d.type==="placeholder"?void 0:j(d.path,s.dynamicInputs);return{title:y,link:k}})):[]})():await(async()=>e?.reduce((c,u)=>{let{title:d,link:P}=Rt(u);return d?[...c,{title:d,link:v(P)}]:c},[])||[])();return l.length?re("ul",{className:f("flex items-center",{[`text-${t}`]:!!t,[`text-${o}`]:!!o}),children:l.map(({title:c,link:u},d)=>xo("li",{className:"flex items-center",children:[!!d&&re("div",{className:"mx-2 size-[1em]",children:Lt(r)}),u?re(W,{variant:"link",textColor:o,className:f({[`font-${a}`]:!!a,[`text-${t}`]:!!t,[p||""]:!!p}),href:u,children:c}):re(I,{size:t,font:a,color:o,transform:p,children:c})]},`${c}-${d}`))}):null};var He=Gt;import{useMemo as go}from"react";import{UniformText as vo}from"@uniformdev/canvas-next-rsc/component";import{jsx as oe}from"react/jsx-runtime";var Dt=({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:y,onClick:k,text:N})=>{let g=v(t),E=e.previewMode==="editor"&&e?.isContextualEditing,F=go(()=>{let[fe]=C(n),{url:O,title:vr=""}=fe||{};if(O)return{url:O,title:vr}},[n]),M=()=>{if(!F)return;let{url:fe,title:O}=F;return oe(b,{src:fe,alt:O,width:20,height:20,containerStyle:{width:"20px",height:"20px"}})};return!(!!N||!!F)&&!E?null:oe(W,{variant:r.variant,href:g,border:l,size:c,onClick:k,className:y,textSize:u,isActive:e.matchedRoute===g,textColor:o,textFont:a,textWeight:p,textTransform:i,buttonColor:s,hoverButtonColor:d,hoverTextColor:P,icon:oe(M,{}),iconPosition:m,children:oe(vo,{placeholder:"Button text goes here",parameterId:"text",component:r,context:e})})};var ze=Dt;import{UniformSlot as bo}from"@uniformdev/canvas-next-rsc/component";import{jsx as Et}from"react/jsx-runtime";var ae=({displayName:r,anchor:e,slots:t,component:o,context:a,backgroundColor:p,spacing:i,border:s,fluidContent:n,fullHeight:m,className:l})=>Et(mt,{title:r,id:e,backgroundColor:p,spacing:i,border:s,fluidContent:n,fullHeight:m,className:l,children:Et(bo,{data:o,context:a,slot:t.containerContent})});var Mt=(e=>(e.ContainerContent="containerContent",e))(Mt||{});import{jsx as Ot}from"react/jsx-runtime";var ne=({color:r,thickness:e,width:t,alignment:o})=>Ot("div",{className:f("flex w-full",`justify-${o||"center"}`),children:Ot("div",{className:f({[`bg-${r}`]:!!r}),style:{width:t,height:e}})});import{UniformSlot as Io}from"@uniformdev/canvas-next-rsc/component";import{jsx as jt}from"react/jsx-runtime";var $t=({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})=>jt(ut,{direction:r,justifyContent:e,gap:t,alignItems:o,backgroundColor:a,spacing:p,border:i,fluidContent:s,fullHeight:n,wrapperClassName:d,className:u,children:jt(Io,{data:l,context:c,slot:m.flexItem})});var qe=$t;import{UniformSlot as wo}from"@uniformdev/canvas-next-rsc/component";import{jsx as Wt}from"react/jsx-runtime";var ie=({alignSelf:r,shrink:e,context:t,component:o,slots:a})=>Wt(ft,{alignSelf:r,shrink:e,children:Wt(wo,{data:o,context:t,slot:a.inner})});import{UniformSlot as To}from"@uniformdev/canvas-next-rsc/component";import{jsx as Ht}from"react/jsx-runtime";var zt=({columnsCount:r,gapX:e,gapY:t,backgroundColor:o,spacing:a,border:p,fluidContent:i,fullHeight:s,slots:n,component:m,context:l,className:c})=>Ht(lt,{className:c,columnsCount:r,gapX:e,gapY:t,backgroundColor:o,spacing:a,border:p,fluidContent:i,fullHeight:s,children:Ht(To,{data:m,context:l,slot:n.gridInner})});var qt=(e=>(e.GridInner="gridInner",e))(qt||{}),Je=zt;import{UniformSlot as So}from"@uniformdev/canvas-next-rsc/component";import{jsx as Jt}from"react/jsx-runtime";var Kt=({columnStart:r,columnSpan:e,rowStart:t,className:o,rowSpan:a,context:p,component:i,slots:s})=>Jt(ct,{columnStart:r,columnSpan:e,rowStart:t,rowSpan:a,className:o,children:Jt(So,{data:i,context:p,slot:s.inner})});var Qt=(e=>(e.Inner="inner",e))(Qt||{}),Ke=Kt;import{UniformText as Ao}from"@uniformdev/canvas-next-rsc/component";import{jsx as Qe}from"react/jsx-runtime";var Yt=({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 Qe(q,{icon:d?Qe(b,{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:Qe(Ao,{placeholder:"Text goes here",parameterId:"text",component:l,context:c})})};var Ye=Yt;import{jsx as Xt}from"react/jsx-runtime";var Zt=({context:r,component:e,width:t,height:o})=>{let a=r.previewMode==="editor"&&r.isContextualEditing,p=e?._id?.includes("placeholder_");return!a||p?null:Xt("div",{style:{width:t?`${t}px`:"auto",height:o?`${o}px`:"auto"},children:Xt(H,{type:"image",placeholder:"Please add an asset to display an image"})})};import{jsx as er}from"react/jsx-runtime";var se=({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 er(Zt,{context:m,component:l,width:t,height:o});let{url:u,title:d=""}=c;return er(b,{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 No}from"@uniformdev/canvas-next-rsc/component";import{jsx as tr}from"react/jsx-runtime";var rr=({component:r,context:e,slots:t,link:o,openInNewTab:a})=>tr($,{link:v(o),openInNewTab:a,children:tr(No,{data:r,context:e,slot:t.linkContent})});var or=(e=>(e.LinkContent="linkContent",e))(or||{}),Xe=rr;import{UniformText as Bo}from"@uniformdev/canvas-next-rsc/component";import{jsx as ar}from"react/jsx-runtime";var nr=({href:r,isExternalLink:e,children:t})=>r?ar($,{className:"cursor-pointer hover:no-underline",link:r,openInNewTab:e,rel:e?"noopener noreferrer":"",children:t}):ar("div",{className:"cursor-pointer",children:t});import{jsx as D}from"react/jsx-runtime";var ir=({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=""})=>{let y=v(e),k=t&&j(d.matchedRoute,d.dynamicInputs)===y,[N]=C(r),{url:g,title:E=""}=N||{},F=()=>g?g.endsWith(".svg")?D(dt,{src:g,alt:E,fill:!0}):D(b,{src:g,alt:E,fill:!0}):null,M=f("transition-all duration-150",{[he(P,"group-hover:{value}")]:!!P,[he(P,"{value}")]:!!P&&k});return D(nr,{href:y,isExternalLink:pt(y),children:D(q,{icon:F(),className:"group",iconClassName:M,textClassName:M,size:o,tag:a,color:p,weight:i,font:s,transform:n,decoration:m,letterSpacing:l,alignment:c,children:D(Bo,{placeholder:"Text goes here",parameterId:"text",className:"whitespace-nowrap",component:u,context:d})})})};var Ze=ir;import{UniformRichText as ko}from"@uniformdev/canvas-next-rsc/component";import{jsx as sr}from"react/jsx-runtime";var pr=({color:r,lineCountRestrictions:e,font:t,component:o,className:a})=>sr(I,{lineCountRestrictions:e,color:r,font:t,children:sr(ko,{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 et=pr;import{jsx as Fo}from"react/jsx-runtime";var pe=({size:r,component:{variant:e}})=>{let t=e==="horizontal";return Fo("div",{className:f({[`w-${r}`]:t,[`h-${r}`]:!t})})};var tt=(e=>(e.Horizontal="horizontal",e))(tt||{});import{UniformSlot as Uo}from"@uniformdev/canvas-next-rsc/component";import{jsx as _o}from"react/jsx-runtime";var mr=({slots:r,component:e,context:t})=>_o(Uo,{data:e,context:t,slot:r.tabContent});var lr=(e=>(e.TabContent="tabContent",e))(lr||{}),rt=mr;import{UniformSlot as Vo}from"@uniformdev/canvas-next-rsc/component";import{jsx as ot}from"react/jsx-runtime";var me=({component:r,context:e,slots:t,alignment:o})=>ot("td",{children:ot("div",{className:f("w-fit",cr[o||"left"]),children:ot(Vo,{slot:t.tableCustomCellContent,context:e,data:r})})});var cr={left:"ml-0",center:"mx-auto",right:"ml-auto"},dr=(e=>(e.TableCustomCellContent="tableCustomCellContent",e))(dr||{});import{UniformText as Lo}from"@uniformdev/canvas-next-rsc/component";import{jsx as ur}from"react/jsx-runtime";var le=({component:r,context:e})=>ur("td",{children:ur(Lo,{component:r,context:e,parameterId:"value",placeholder:"Value"})});import{UniformText as Ro}from"@uniformdev/canvas-next-rsc/component";import{jsx as fr}from"react/jsx-runtime";var ce=({component:r,context:e})=>fr("th",{children:fr(Ro,{component:r,context:e,parameterId:"value",placeholder:"Value"})});import{UniformSlot as Go}from"@uniformdev/canvas-next-rsc/component";import{jsx as hr}from"react/jsx-runtime";var de=({slots:r,component:e,context:t})=>hr("tr",{children:hr(Go,{data:e,context:t,slot:r.tableRowCells})});import{UniformText as Do}from"@uniformdev/canvas-next-rsc/component";import{jsx as Pr}from"react/jsx-runtime";var Cr=({tag:r,size:e,color:t,weight:o,font:a,transform:p,decoration:i,letterSpacing:s,lineCountRestrictions:n,alignment:m,component:l,context:c})=>Pr(I,{color:t,size:e,font:a,weight:o,transform:p,decoration:i,letterSpacing:s,alignment:m,lineCountRestrictions:n,children:Pr(Do,{placeholder:"Text goes here",parameterId:"text",as:r||void 0,component:l,context:c})});var at=Cr;import Eo from"next/dynamic";var nt=Eo(()=>import("../../theme-switcher-WO5JIV2W.mjs").then(r=>r.ThemeSwitcher));import{jsx as Mo}from"react/jsx-runtime";var yr=({context:r,component:e})=>{let t=r.previewMode==="editor"&&r.isContextualEditing,o=e?._id?.includes("placeholder_");return!t||o?null:Mo(H,{type:"video",placeholder:"Please add video link to display a video"})};import{jsx as xr}from"react/jsx-runtime";var ue=({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),y=d?.url||(e?.type==="url"?e.path:void 0);return y?xr(ht,{url:y,placeholderImageUrl:P?.url,autoPlay:o,lazyLoad:a,loop:p,controls:i,muted:s,overlayColor:n,overlayOpacity:m,border:l}):xr(yr,{component:c,context:u})};var gr={accordion:{component:Pe},accordionItem:{component:_e},badge:{component:Le},banner:{component:Ce},button:{component:ze},card:{component:ye},carousel:{component:xe},container:{component:ae},countdown:{component:ge},divider:{component:ne},grid:{component:Je},gridItem:{component:Ke},flex:{component:qe},flexItem:{component:ie},header:{component:be},section:{component:Be},iconLabel:{component:Ye},image:{component:se},page:{component:Ae},richText:{component:et},spacer:{component:pe},text:{component:at},video:{component:ue},tabs:{component:Fe},tab:{component:rt},table:{component:ke},tableRow:{component:de},tableHeaderCell:{component:ce},tableDataCell:{component:le},tableCustomCell:{component:me},modal:{component:we},imageGallery:{component:Ie},testimonial:{component:Ue},breadcrumbs:{component:He},review:{component:Ne},navigationLink:{component:Ze},navigationGroup:{component:Se},navigationFlyout:{component:Te},footer:{component:ve},themeSwitcher:{component:nt},link:{component:Xe},fixedHero:{component:z.FixedHero},flexibleHero:{component:z.FlexibleHero}},ap=gr,np=st(gr);export{Pe as Accordion,_e as AccordionItem,Pt as AccordionItemSlots,Ir as AccordionSlots,Le as Badge,Ce as Banner,wr as BannerContentAlignment,Tr as BannerSlots,He as Breadcrumbs,ze as Button,ye as Card,Ar as CardSlots,Sr as CardVariants,xe as Carousel,Nr as CarouselSlots,Er as CommonPageSlots,ae as Container,Mt as ContainerSlots,ge as Countdown,Br as CountdownSlots,kr as CountdownVariants,z as DemoHero,Fr as DemoHeroContentAlignment,Ur as DemoHeroVariants,ne as Divider,qe as Flex,ie as FlexItem,_r as FlexibleHeroSlots,ve as Footer,Vr as FooterSlots,Je as Grid,Ke as GridItem,Qt as GridItemSlots,qt as GridSlots,be as Header,Lr as HeaderSlots,Rr as HeaderVariants,Ye as IconLabel,se as Image,Ie as ImageGallery,Gr as ImageGallerySlots,Xe as Link,or as LinkSlots,we as Modal,Dr as ModalSlots,Te as NavigationFlyout,Se as NavigationGroup,Ze as NavigationLink,Ae as Page,Ne as Review,Or as ReviewSlots,Mr as ReviewVariants,et as RichText,Be as Section,jr as SectionContentAlignment,Wr as SectionSlots,$r as SectionVariants,pe as Spacer,tt as SpacerVariants,rt as Tab,lr as TabSlots,ke as Table,me as TableCustomCell,dr as TableCustomCellSlots,le as TableDataCell,ce as TableHeaderCell,de as TableRow,Hr as TableSlots,Fe as Tabs,qr as TabsSlots,zr as TabsVariants,Ue as Testimonial,Kr as TestimonialSlots,Jr as TestimonialVariants,at as Text,nt as ThemeSwitcher,ue as Video,np as componentResolver,gr 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,8 @@ export type NavigationFlyoutParameters = TextParameters & {
   link?: LinkParamValue;
   backgroundColor?: string;
   border?: string | ViewPort<string>;
+  caretIcon?: AssetParamValue;
+  hoverEffect?: string | ViewPort<string>;
 };
 
 export enum NavigationFlyoutSlots {
@@ -20,5 +21,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,7 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   component,
   context,
   slots,
+  hoverEffect = '',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -41,18 +44,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="group"
+          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,15 @@ 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>;
 };
 
 export enum NavigationGroupSlots {
@@ -19,5 +20,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,7 @@ export const NavigationGroup: FC<NavigationGroupProps> = ({
   component,
   context,
   slots,
+  hoverEffect = '',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -36,18 +39,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="group"
+          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,