@uniformdev/csk-components 6.0.123-alpha.1 → 6.1.63-alpha.1

package/dist/components/canvas/serverClient.mjs

@@ -0,0 +1 @@
+import{A as ue,B as xe,C as Ce,D as Se,E as ce,F as Te,G as ge,a as J,b as K,c as O,d as Q,e as U,f as W,g as X,h as Y,i as Z,j as _,k as $,l as ee,m as te,n as re,o as ae,p as oe,q as pe,r as se,s as le,t as me,u as ne,v as ie,w as de,x as ye,y as Pe,z as fe}from"../../chunk-JT77BVIX.mjs";import{B as H,C as v,E as w,G,I as A,J as h,L as B,M as V,N as L,P as R,Q as D,R as N,S as k,U as M,V as E,X as j,Y as q,Z as z,a as t,b as r,d as o,e as p,f as s,g as l,h as m,j as n,k as i,m as f,n as u,o as x,p as C,r as S,s as c,u as T,v as g,w as b,y as F,z as I}from"../../chunk-3JU2XCD2.mjs";import{a as d,b as y,c as P}from"../../chunk-YQYDZJ65.mjs";import"../../chunk-OL6JBPZ4.mjs";import"../../chunk-6CKVLOIH.mjs";import"../../chunk-MKOFM4XK.mjs";import"../../chunk-6TUDWIYU.mjs";import{a}from"../../chunk-VWWXSA5H.mjs";import"../../chunk-NKINOJY6.mjs";import"../../chunk-BK7UG4U4.mjs";import"../../chunk-7GVG4HLE.mjs";import"../../chunk-WAW7PQYM.mjs";import"../../chunk-QPQGRQKI.mjs";import"../../chunk-S7CSCIW4.mjs";import"../../chunk-XYU3TGOU.mjs";import{a as e}from"../../chunk-CZ4X5ZBK.mjs";import"../../chunk-OKUDTS22.mjs";import"../../chunk-LPAOEOU4.mjs";import"../../chunk-27WJUZYR.mjs";export{t as Accordion,K as AccordionItem,J as AccordionItemSlots,r as AccordionSlots,O as Badge,o as Banner,a as BannerContentAlignment,p as BannerSlots,Q as Button,s as Card,m as CardSlots,l as CardVariants,i as Carousel,n as CarouselSlots,h as CommonPageSlots,e as ComponentEmptyPlaceholder,U as Container,W as ContainerSlots,P as Countdown,d as CountdownSlots,y as CountdownVariants,C as DemoHero,f as DemoHeroContentAlignment,u as DemoHeroVariants,X as Divider,Y as Flex,Z as FlexItem,x as FlexibleHeroSlots,S as Footer,c as FooterSlots,_ as Grid,ee as GridItem,te as GridItemSlots,$ as GridSlots,T as Header,g as HeaderSlots,b as HeaderVariants,re as IconLabel,ae as Image,I as ImageGallery,F as ImageGallerySlots,oe as Link,pe as LinkSlots,v as Modal,H as ModalSlots,w as NavigationFlyout,G as NavigationGroup,se as NavigationLink,A as Page,B as Review,L as ReviewSlots,V as ReviewVariants,le as RichText,R as Section,D as SectionContentAlignment,k as SectionSlots,N as SectionVariants,me as SimpleFooter,ne as SimpleHeader,ie as Spacer,de as SpacerVariants,ye as Tab,Pe as TabSlots,M as Table,fe as TableCustomCell,ue as TableCustomCellSlots,xe as TableDataCell,Ce as TableHeaderCell,Se as TableRow,E as TableSlots,j as Testimonial,z as TestimonialSlots,q as TestimonialVariants,ce as Text,Te as ThemeSwitcher,ge as Video};

package/dist/components/canvas/serverOnly.d.mts

@@ -0,0 +1,41 @@
+import { LinkParamValue, DataWithProperties } from '@uniformdev/canvas';
+import { T as TextParameters, C as ContainerParameters } from '../../parameters-B8w5Q6Pp.mjs';
+import { ComponentProps } from '../../types/cskTypes.mjs';
+import * as react from 'react';
+import '../../index-CrBZatTs.mjs';
+import '@uniformdev/next-app-router/component';
+import '@uniformdev/next-app-router';
+import '@uniformdev/next-app-router-shared';
+
+declare const _default$1: react.ComponentType<BreadcrumbsProps & Omit<BreadcrumbsParameters, "links"> & {
+    links?: {
+        title?: string;
+        link?: LinkParamValue;
+    }[];
+}>;
+
+type BreadcrumbsParameters = {
+    title?: string;
+    separator?: 'slash' | 'chevron';
+    links?: DataWithProperties[];
+    autoGenerate?: boolean;
+} & Pick<TextParameters, 'size' | 'color' | 'font' | 'transform'>;
+type BreadcrumbsProps = ComponentProps<BreadcrumbsParameters>;
+
+declare enum TabsVariants {
+    Bordered = "bordered"
+}
+
+type TabsParameters = ContainerParameters & {
+    color?: string;
+};
+declare enum TabsSlots {
+    TabItems = "tabItems"
+}
+type TabsProps = ComponentProps<TabsParameters, TabsSlots>;
+
+declare const _default: react.ComponentType<TabsProps & ContainerParameters & {
+    color?: string;
+}>;
+
+export { _default$1 as Breadcrumbs, type BreadcrumbsParameters, type BreadcrumbsProps, _default as Tabs, type TabsParameters, type TabsProps, TabsSlots, TabsVariants };

package/dist/components/canvas/serverOnly.mjs

@@ -0,0 +1 @@
+import{a as e}from"../../chunk-ZAHWFLY4.mjs";import{a as r,b as s}from"../../chunk-XKCRANRQ.mjs";import{a}from"../../chunk-OY6ZJNCE.mjs";import"../../chunk-D673IM2U.mjs";import"../../chunk-WAW7PQYM.mjs";import"../../chunk-QPQGRQKI.mjs";import"../../chunk-S7CSCIW4.mjs";import"../../chunk-OKUDTS22.mjs";import"../../chunk-LPAOEOU4.mjs";import"../../chunk-I6SUO5WR.mjs";import"../../chunk-27WJUZYR.mjs";export{e as Breadcrumbs,s as Tabs,r as TabsSlots,a as TabsVariants};

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

@@ -1,22 +1,28 @@
 import * as react from 'react';
-import { FC, SVGProps, ReactElement, HTMLAttributes, ReactNode, PropsWithChildren } from 'react';
-import { T as TextProps, B as ButtonProps, C as ContainerProps, F as FooterProps, H as HeaderProps } from '../../index-D5cLtaIv.mjs';
-export { a as ButtonVariant } from '../../index-D5cLtaIv.mjs';
+import { FC, SVGProps, CSSProperties, ReactElement, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { C as ContainerProps, B as ButtonProps, F as FooterProps, H as HeaderProps, I as IconLabelProps } from '../../index-CSSWgmI5.mjs';
+export { _ as Banner, b as BannerProps, a as ButtonVariant, c as ContentAlignment } from '../../index-CSSWgmI5.mjs';
 import { ViewPort } from '../../types/cskTypes.mjs';
 import { ImageProps as ImageProps$1 } from 'next/image';
+import { T as TextProps } from '../../index-CrBZatTs.mjs';
 import { ReactPlayerProps } from 'react-player';
+import '@uniformdev/next-app-router/component';
 import '@uniformdev/canvas';
+import '@uniformdev/next-app-router';
+import '@uniformdev/next-app-router-shared';
 
 declare const Text: FC<TextProps>;
 
-declare const Button: FC<ButtonProps>;
-
 declare const Container: FC<ContainerProps>;
 
+declare const Button: FC<ButtonProps>;
+
 declare const Footer: FC<FooterProps>;
 
 declare const Header: FC<HeaderProps>;
 
+declare const IconLabel: FC<IconLabelProps>;
+
 declare const Arrow: FC<SVGProps<SVGElement>>;
 
 declare const ImageIcon: FC<SVGProps<SVGSVGElement>>;
@@ -27,7 +33,7 @@ type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing
     countOfItems?: number;
     children: (options: {
         className?: string;
-        style?: React.CSSProperties;
+        style?: CSSProperties;
     }) => ReactElement;
     itemsPerPage?: string;
     gapX?: string;
@@ -39,12 +45,14 @@ declare const Flex: FC<FlexProps>;
 
 type Direction = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type Justify = 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
-type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+type Align$2 = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 type FlexProps = Pick<ContainerProps, 'className' | 'wrapperClassName' | 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height' | 'children'> & {
     direction?: Direction | ViewPort<Direction>;
     justifyContent?: Justify | ViewPort<Justify>;
     gap?: string | ViewPort<string>;
-    alignItems?: Align | ViewPort<Align>;
+    alignItems?: Align$2 | ViewPort<Align$2>;
+    wrap?: Wrap | ViewPort<Wrap>;
 };
 
 declare const FlexItem: FC<FlexItemProps>;
@@ -53,47 +61,30 @@ type AvailableAlignSelf = 'auto' | 'start' | 'end' | 'center' | 'stretch';
 type AvailableShrink = '0' | '1';
 type FlexItemProps = HTMLAttributes<HTMLDivElement> & {
     alignSelf?: AvailableAlignSelf | ViewPort<AvailableAlignSelf>;
-    shrink: AvailableShrink;
+    shrink?: AvailableShrink;
 };
 
 declare const Grid: FC<GridProps>;
 
+type Align$1 = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 type GridProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'children' | 'height'> & {
     columnsCount?: string | ViewPort<string>;
     gapY?: string | ViewPort<string>;
     gapX?: string | ViewPort<string>;
+    alignItems?: Align$1 | ViewPort<Align$1>;
     className?: string;
 };
 
 declare const GridItem: FC<GridItemProps>;
 
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 type GridItemProps = HTMLAttributes<HTMLDivElement> & {
     columnStart?: string | ViewPort<string>;
     columnSpan?: string | ViewPort<string>;
     rowStart?: string | ViewPort<string>;
     rowSpan?: string | ViewPort<string>;
     className?: string;
-};
-
-declare const IconLabel: FC<IconLabelProps>;
-
-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'];
-    color?: string;
-    weight?: TextProps['weight'];
-    font?: string;
-    alignment?: TextProps['alignment'];
-    transform?: TextProps['transform'];
-    decoration?: TextProps['decoration'];
-    letterSpacing?: TextProps['letterSpacing'];
-    lineCountRestrictions?: string;
+    alignSelf?: Align | ViewPort<Align>;
 };
 
 declare const Image: FC<ImageProps>;
@@ -133,7 +124,7 @@ type PageProps = HTMLAttributes<HTMLDivElement> & {
 declare const Rating: FC<RatingProps>;
 
 type RatingProps = {
-    rating: number;
+    rating?: number;
     showReviewLabel?: boolean;
     starsColor?: string;
     activeStarsColor?: string;
@@ -164,7 +155,7 @@ type InlineSVGProps = {
     width?: number;
     height?: number;
     sanitize?: boolean;
-    fallback?: React.ReactNode;
+    fallback?: ReactNode;
     useCurrentColor?: boolean;
     alt?: string;
 };
@@ -199,4 +190,4 @@ type ModalProps = {
 };
 declare const _default: react.ComponentType<ModalProps>;
 
-export { Accordion, _default$1 as AccordionItem, type AccordionItemProps, type AccordionProps, Arrow as ArrowIcon, Button, ButtonProps, _default$4 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, InlineSVG, type InlineSVGProps, Link, type LinkProps, MediaPlaceholder, type MediaPlaceholderType, _default as Modal, type ModalProps, Page, type PageProps, Rating, type RatingProps, Text, TextProps, _default$3 as ThemeSwitcher, type ThemeSwitcherProps, _default$2 as Video, VideoIcon, type VideoProps };
+export { Accordion, _default$1 as AccordionItem, type AccordionItemProps, type AccordionProps, Arrow as ArrowIcon, Button, ButtonProps, _default$4 as Carousel, type CarouselProps, Container, ContainerProps, Flex, FlexItem, type FlexItemProps, type FlexProps, Footer, FooterProps, Grid, GridItem, type GridItemProps, type GridProps, Header, HeaderProps, IconLabel, IconLabelProps, Image, ImageIcon, type ImageProps, InlineSVG, type InlineSVGProps, Link, type LinkProps, MediaPlaceholder, type MediaPlaceholderType, _default as Modal, type ModalProps, Page, type PageProps, Rating, type RatingProps, Text, TextProps, _default$3 as ThemeSwitcher, type ThemeSwitcherProps, _default$2 as Video, VideoIcon, type VideoProps };

package/dist/components/ui/index.mjs

@@ -1 +1 @@
-import{a as A}from"../../chunk-V4EBWEG4.mjs";import{b as y}from"../../chunk-2BMAPB63.mjs";import{a as F}from"../../chunk-PMMAALCQ.mjs";import{a as G,b as V,c as T}from"../../chunk-FIN5US3Q.mjs";import{a as c,b as I}from"../../chunk-RYEXR67P.mjs";import{a as o,b as t,c as a,d as p,e as x,f as u,g as i,h as g,i as h}from"../../chunk-EOV2LPGC.mjs";import{a as s,b as d,c as l}from"../../chunk-6TUDWIYU.mjs";import{a as f}from"../../chunk-BK7UG4U4.mjs";import{a as m}from"../../chunk-WAW7PQYM.mjs";import{a as r}from"../../chunk-EUVKAE6M.mjs";import{a as n,b as P}from"../../chunk-TCQTXNKT.mjs";import{a as e}from"../../chunk-7GVG4HLE.mjs";import"../../chunk-RX4IAAQQ.mjs";import"../../chunk-S7CSCIW4.mjs";import"../../chunk-YEKQJ4YC.mjs";export{o as Accordion,F as AccordionItem,s as ArrowIcon,a as Button,p as ButtonVariant,r as Carousel,e as Container,G as Flex,V as FlexItem,u as Footer,n as Grid,P as GridItem,i as Header,c as IconLabel,f as Image,d as ImageIcon,I as InlineSVG,t as Link,x as MediaPlaceholder,y as Modal,g as Page,h as Rating,m as Text,A as ThemeSwitcher,T as Video,l as VideoIcon};
+import{a as G}from"../../chunk-AOFJCDRO.mjs";import{a as C}from"../../chunk-ZWDCDE5W.mjs";import{a}from"../../chunk-PLKWUEFW.mjs";import{b as I}from"../../chunk-AWTML4I7.mjs";import{a as V,b as B,c as T}from"../../chunk-OL6JBPZ4.mjs";import{a as h}from"../../chunk-6CKVLOIH.mjs";import{a as o,b as u,c as P,d as c,e as g,f as A,g as F}from"../../chunk-MKOFM4XK.mjs";import{a as l,b as m,c as n}from"../../chunk-6TUDWIYU.mjs";import{a as t,b as r}from"../../chunk-VWWXSA5H.mjs";import{a as i,b as y}from"../../chunk-NKINOJY6.mjs";import{a as d}from"../../chunk-BK7UG4U4.mjs";import{a as e}from"../../chunk-7GVG4HLE.mjs";import{a as x}from"../../chunk-WAW7PQYM.mjs";import{a as p,b as f,c as s}from"../../chunk-QPQGRQKI.mjs";import"../../chunk-S7CSCIW4.mjs";import"../../chunk-27WJUZYR.mjs";export{o as Accordion,G as AccordionItem,l as ArrowIcon,r as Banner,f as Button,s as ButtonVariant,a as Carousel,e as Container,t as ContentAlignment,V as Flex,B as FlexItem,P as Footer,i as Grid,y as GridItem,c as Header,h as IconLabel,d as Image,m as ImageIcon,g as InlineSVG,p as Link,u as MediaPlaceholder,I as Modal,A as Page,F as Rating,x as Text,C as ThemeSwitcher,T as Video,n as VideoIcon};

package/dist/content/components/canvas/Accordion/accordion.tsx

@@ -1,12 +1,11 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseAccordion from '@/components/ui/Accordion';
-import { AccordionProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { AccordionParameters, AccordionProps } from '.';
 
-export const Accordion: FC<AccordionProps> = ({
+const Accordion: FC<AccordionProps & AccordionParameters> = ({
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
@@ -14,8 +13,10 @@ export const Accordion: FC<AccordionProps> = ({
   height,
 }) => (
   <BaseAccordion
-    accordionContent={<UniformSlot data={component} context={context} slot={slots.accordionContent} />}
-    accordionItems={<UniformSlot data={component} context={context} slot={slots.accordionItems} />}
+    accordionContent={<UniformSlot slot={slots.accordionContent} />}
+    accordionItems={<UniformSlot slot={slots.accordionItems} />}
     {...{ backgroundColor, spacing, border, fluidContent, height }}
   />
 );
+
+export default withFlattenParameters(Accordion);

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

@@ -1,5 +1,5 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type AccordionParameters = ContainerParameters;
 
@@ -10,5 +10,5 @@ export enum AccordionSlots {
 
 export type AccordionProps = ComponentProps<AccordionParameters, AccordionSlots>;
 
-export { Accordion as default } from './accordion';
+export { default } from './accordion';
 export { AccordionEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/AccordionItem/accordion-item.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { FC } from 'react';
-import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentParameter, UniformSlot, UniformText } from '@uniformdev/next-app-router/component';
 import BaseAccordionItem from '@/components/ui/AccordionItem';
 import BaseText from '@/components/ui/Text';
-import { AccordionItemProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { AccordionItemParameters, AccordionItemProps } from '.';
 
-export const AccordionItem: FC<AccordionItemProps> = ({
+const AccordionItem: FC<AccordionItemProps & AccordionItemParameters> = ({
   tag,
   alignment,
   color,
@@ -18,10 +19,10 @@ export const AccordionItem: FC<AccordionItemProps> = ({
   letterSpacing,
   slots,
   component,
-  context,
   backgroundColor,
   spacing,
   className,
+  parameters,
 }) => (
   <BaseAccordionItem
     {...{
@@ -33,13 +34,14 @@ export const AccordionItem: FC<AccordionItemProps> = ({
       <BaseText {...{ alignment, color, size, font, weight, transform, decoration, letterSpacing }}>
         <UniformText
           placeholder="Text goes here"
-          parameterId="text"
+          parameter={parameters.text as ComponentParameter<string>}
           as={tag || undefined}
           component={component}
-          context={context}
         />
       </BaseText>
     }
-    accordionItemContent={<UniformSlot data={component} context={context} slot={slots.accordionItemContent} />}
+    accordionItemContent={<UniformSlot slot={slots.accordionItemContent} />}
   />
 );
+
+export default withFlattenParameters(AccordionItem);

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

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
 import { TextParameters } from '@/components/canvas/Text/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type AccordionItemParameters = Pick<ContainerParameters, 'backgroundColor' | 'spacing' | 'border'> &
   TextParameters;
@@ -14,9 +14,7 @@ export enum AccordionItemSlots {
   AccordionItemContent = 'accordionItemContent',
 }
 
-export type AccordionItemProps = ComponentProps<
-  AccordionItemParameters & AccordionItemAdditionalProps,
-  AccordionItemSlots
->;
+export type AccordionItemProps = ComponentProps<AccordionItemParameters, AccordionItemSlots> &
+  AccordionItemAdditionalProps;
 
-export default dynamic(() => import('./accordion-item').then(mod => mod.AccordionItem));
+export default dynamic(() => import('./accordion-item').then(mod => mod.default));

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

@@ -1,20 +1,21 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
 import BaseText from '@/components/ui/Text';
 import { cn } from '@/utils/styling';
-import { BadgeProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { BadgeParameters, BadgeProps } from '.';
 import { Dot } from './dot';
 import { getBadgeClass } from './style-utils';
 
-export const Badge: FC<BadgeProps> = ({
+const Badge: FC<BadgeProps & BadgeParameters> = ({
   component,
-  context,
   textColor,
   backgroundColor,
   borderColor,
   dotColor,
   pill = false,
   size,
+  parameters,
 }) => (
   <div className={getBadgeClass({ pill, size, dotColor, borderColor, backgroundColor })}>
     {dotColor && (
@@ -25,7 +26,13 @@ export const Badge: FC<BadgeProps> = ({
       />
     )}
     <BaseText color={textColor} size="xs">
-      <UniformText placeholder="Badge text goes here" parameterId="text" component={component} context={context} />
+      <UniformText
+        placeholder="Badge text goes here"
+        parameter={parameters.text as ComponentParameter<string>}
+        component={component}
+      />
     </BaseText>
   </div>
 );
+
+export default withFlattenParameters(Badge);

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

@@ -1,5 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { Badge } from './badge';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type BadgeParameters = {
   text?: string;
@@ -13,4 +12,4 @@ export type BadgeParameters = {
 
 export type BadgeProps = ComponentProps<BadgeParameters>;
 
-export default Badge;
+export { default } from './badge';

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

@@ -1,12 +1,12 @@
 import { cn } from '@/utils/styling';
-import { BadgeProps } from '.';
+import { BadgeParameters } from '.';
 
 type BadgeClass = {
-  pill: BadgeProps['pill'];
-  size: BadgeProps['size'];
-  dotColor: BadgeProps['dotColor'];
-  borderColor: BadgeProps['borderColor'];
-  backgroundColor: BadgeProps['backgroundColor'];
+  pill: BadgeParameters['pill'];
+  size: BadgeParameters['size'];
+  dotColor: BadgeParameters['dotColor'];
+  borderColor: BadgeParameters['borderColor'];
+  backgroundColor: BadgeParameters['backgroundColor'];
 };
 export const getBadgeClass = ({ pill, size, dotColor, borderColor, backgroundColor }: BadgeClass) =>
   cn('inline-flex items-center w-fit', {

package/dist/content/components/canvas/Banner/banner.tsx

@@ -1,48 +1,36 @@
-'use client';
+import { FC } from 'react';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import BaseBanner, { BannerVariants, ContentAlignment } from '@/components/ui/Banner';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { BannerProps, BannerParameters } from '.';
 
-import { FC, useCallback, useState } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import Container from '@/components/ui/Container';
-import { cn } from '@/utils/styling';
-import { ContentAlignment, BannerProps } from '.';
-import CloseButton from './close-button';
-import { getContentClasses, getPositionClasses } from './style-utils';
-import { BannerVariants } from './types';
-
-export const Banner: FC<BannerProps> = ({
-  component,
-  context,
+const Banner: FC<BannerProps & BannerParameters> = ({
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  slots,
   iconColor,
   contentAlignment = ContentAlignment.Center,
   floating = false,
+  slots,
+  variant,
 }) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  if (!isOpen) return null;
-
-  const positionClasses = getPositionClasses({ variant: component.variant as BannerVariants, floating });
-  const contentClasses = getContentClasses({ contentAlignment, iconColor, fluidContent, floating });
-
   return (
-    <Container className={positionClasses} fluidContent={fluidContent} border={border}>
-      <Container
-        className={cn('relative w-full', contentClasses)}
-        backgroundColor={backgroundColor}
-        spacing={spacing}
-        fluidContent={fluidContent}
-      >
-        <UniformSlot data={component} context={context} slot={slots.bannerContent} />
-        {iconColor && <CloseButton onClose={handleClose} iconColor={iconColor} />}
-      </Container>
-    </Container>
+    <BaseBanner
+      {...{
+        backgroundColor,
+        spacing,
+        border,
+        fluidContent,
+        iconColor,
+        contentAlignment,
+        floating,
+        variant: variant as BannerVariants,
+      }}
+    >
+      <UniformSlot slot={slots.bannerContent} />
+    </BaseBanner>
   );
 };
+
+export default withFlattenParameters(Banner);

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

@@ -1,11 +1,9 @@
-import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ContentAlignment } from '@/components/ui/Banner';
+import { ComponentProps } from '@/types/cskTypes';
 
-export enum ContentAlignment {
-  Left = 'left',
-  Center = 'center',
-  Right = 'right',
+export enum BannerSlots {
+  BannerContent = 'bannerContent',
 }
 
 export type BannerParameters = ContainerParameters & {
@@ -13,11 +11,9 @@ export type BannerParameters = ContainerParameters & {
   contentAlignment?: ContentAlignment;
   floating?: boolean;
 };
-export enum BannerSlots {
-  BannerContent = 'bannerContent',
-}
 
 export type BannerProps = ComponentProps<BannerParameters, BannerSlots>;
 
-export default dynamic(() => import('./banner').then(mod => mod.Banner));
-export { BannerEmptyPlaceholder } from './empty-placeholder';
+export { ContentAlignment };
+
+export { default } from './banner';

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

@@ -1,34 +1,24 @@
 import { FC } from 'react';
-import { flattenValues, LinkParamValue, CanvasClient } from '@uniformdev/canvas';
+import { LinkParamValue, CanvasClient, flattenValues } from '@uniformdev/canvas';
 import { ProjectMapClient } from '@uniformdev/project-map';
 import BaseButton, { ButtonVariant } from '@/components/ui/Button';
 import BaseText from '@/components/ui/Text';
+import { compositionCache } from '@/utils/getSlotComponents';
 import { formatUniformLink, resolveRouteToPath } from '@/utils/routing';
 import { cn } from '@/utils/styling';
-import { BreadcrumbLink, BreadcrumbsProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { BreadcrumbLink, BreadcrumbsParameters, BreadcrumbsProps } from '.';
 import { getSeparator } from './helpers';
 
-export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
-  separator,
-  links,
-  size,
-  color,
-  font,
-  transform,
-  autoGenerate,
-  context,
-}) => {
+export const Breadcrumbs: FC<
+  BreadcrumbsProps & Omit<BreadcrumbsParameters, 'links'> & { links?: { title?: string; link?: LinkParamValue }[] }
+> = async ({ separator, links, size, color, font, transform, autoGenerate, context }) => {
   // Matched route is 'composition' — this means we're in the composition pattern,
   // so we don't have access to the project map at this point.
-  const isInPattern = !context?.matchedRoute || context?.matchedRoute === 'composition';
+  const isInPattern = !context?.type || context?.type !== 'page';
 
   const getManualBreadcrumbs = async (): Promise<BreadcrumbLink[]> =>
-    links?.reduce<BreadcrumbLink[]>((acc, item) => {
-      const { title, link } = flattenValues(item) as {
-        title?: string;
-        link?: LinkParamValue;
-      };
-
+    links?.filter(Boolean).reduce<BreadcrumbLink[]>((acc, { title, link }) => {
       if (!title) return acc;
 
       return [...acc, { title, link: formatUniformLink(link) }];
@@ -36,15 +26,19 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
 
   const getAutoBreadcrumbs = async (): Promise<BreadcrumbLink[]> => {
     if (isInPattern) return [];
-
     const client = new ProjectMapClient({
       projectId: process.env.UNIFORM_PROJECT_ID,
       apiKey: process.env.UNIFORM_API_KEY,
+      apiHost: process.env.UNIFORM_CLI_BASE_URL || 'https://uniform.app',
     });
 
+    const { projectMapNodes } = compositionCache.getUniformComposition({ id: context?._id }) || {};
+    if (!projectMapNodes || !projectMapNodes[0]) return [];
+
     const { nodes } = await client.getNodes({
-      path: context?.matchedRoute,
+      path: projectMapNodes[0].path,
       includeAncestors: true,
+      depth: 0,
     });
 
     if (!nodes?.length) return [];
@@ -58,6 +52,8 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
             ? await new CanvasClient({
                 projectId: process.env.UNIFORM_PROJECT_ID,
                 apiKey: process.env.UNIFORM_API_KEY,
+                apiHost: process.env.UNIFORM_CLI_BASE_URL || 'https://uniform.app',
+                edgeApiHost: process.env.UNIFORM_CLI_BASE_EDGE_URL || 'https://uniform.global',
               })
                 .getCompositionById({ compositionId: node.compositionId })
                 .then(({ composition }) => {
@@ -68,7 +64,8 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
                 .catch(() => node.name)
             : node.name;
 
-        const link = node.type === 'placeholder' ? undefined : resolveRouteToPath(node.path, context.dynamicInputs);
+        const link =
+          node.type === 'placeholder' ? undefined : resolveRouteToPath(node.path, context.pageState.routePath);
 
         return { title, link };
       })
@@ -127,3 +124,5 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = async ({
     </ul>
   );
 };
+
+export default withFlattenParameters(Breadcrumbs);

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 { Breadcrumbs } from './breadcrumbs';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type BreadcrumbLink = {
   title: string;
@@ -13,10 +12,8 @@ export type BreadcrumbsParameters = {
   separator?: 'slash' | 'chevron';
   links?: DataWithProperties[];
   autoGenerate?: boolean;
-};
+} & Pick<TextParameters, 'size' | 'color' | 'font' | 'transform'>;
 
-export type BreadcrumbsProps = ComponentProps<
-  BreadcrumbsParameters & Pick<TextParameters, 'size' | 'color' | 'font' | 'transform'>
->;
+export type BreadcrumbsProps = ComponentProps<BreadcrumbsParameters>;
 
-export default Breadcrumbs;
+export { default } from './breadcrumbs';