@uniformdev/csk-components 6.1.57 → 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,52 +1,58 @@
 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-B9eeSbLG.mjs';
-export { a as ButtonVariant } from '../../index-B9eeSbLG.mjs';
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
+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>>;
 
 declare const VideoIcon: FC<SVGProps<SVGSVGElement>>;
 
-type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight'> & {
+type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'> & {
     countOfItems?: number;
     children: (options: {
         className?: string;
-        style?: React.CSSProperties;
+        style?: CSSProperties;
     }) => ReactElement;
     itemsPerPage?: string;
     gapX?: string;
     variant?: string;
 };
-declare const _default$2: react.ComponentType<CarouselProps>;
+declare const _default$4: react.ComponentType<CarouselProps>;
 
 declare const Flex: FC<FlexProps>;
 
 type Direction = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type Justify = 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
-type FlexGap = keyof DefaultTheme['spacing'];
-type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-type FlexProps = Pick<ContainerProps, 'className' | 'wrapperClassName' | 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height' | 'children'> & {
+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?: FlexGap | ViewPort<FlexGap>;
-    alignItems?: Align | ViewPort<Align>;
+    gap?: string | ViewPort<string>;
+    alignItems?: Align$2 | ViewPort<Align$2>;
+    wrap?: Wrap | ViewPort<Wrap>;
 };
 
 declare const FlexItem: FC<FlexItemProps>;
@@ -55,53 +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 AvailableColumnsCount = keyof DefaultTheme['gridTemplateColumns'];
-type AvailableGap = keyof DefaultTheme['spacing'];
-type GridProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'children' | 'height'> & {
-    columnsCount?: AvailableColumnsCount | ViewPort<AvailableColumnsCount>;
-    gapY?: AvailableGap | ViewPort<AvailableGap>;
-    gapX?: AvailableGap | ViewPort<AvailableGap>;
+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 AvailableColumnStart = keyof DefaultTheme['gridColumnStart'];
-type AvailableColumnSpan = keyof DefaultTheme['gridColumn'];
-type AvailableGridRowStart = keyof DefaultTheme['gridRowStart'];
-type AvailableGridRowSpan = keyof DefaultTheme['gridRow'];
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 type GridItemProps = HTMLAttributes<HTMLDivElement> & {
-    columnStart?: AvailableColumnStart | ViewPort<AvailableColumnStart>;
-    columnSpan?: AvailableColumnSpan | ViewPort<AvailableColumnSpan>;
-    rowStart?: AvailableGridRowStart | ViewPort<AvailableGridRowStart>;
-    rowSpan?: AvailableGridRowSpan | ViewPort<AvailableGridRowSpan>;
+    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>;
@@ -141,7 +124,7 @@ type PageProps = HTMLAttributes<HTMLDivElement> & {
 declare const Rating: FC<RatingProps>;
 
 type RatingProps = {
-    rating: number;
+    rating?: number;
     showReviewLabel?: boolean;
     starsColor?: string;
     activeStarsColor?: string;
@@ -151,7 +134,7 @@ type ThemeSwitcherProps = {
     iconColor?: string;
     onChange?: (theme: string) => void;
 };
-declare const _default$1: react.ComponentType<ThemeSwitcherProps>;
+declare const _default$3: react.ComponentType<ThemeSwitcherProps>;
 
 type VideoProps = ReactPlayerProps & {
     autoPlay?: boolean;
@@ -161,6 +144,50 @@ type VideoProps = ReactPlayerProps & {
     overlayOpacity?: NonNullable<ImageProps$1['style']>['opacity'];
     border?: string | ViewPort<string>;
 };
-declare const _default: react.ComponentType<VideoProps>;
+declare const _default$2: react.ComponentType<VideoProps>;
+
+declare const InlineSVG: FC<InlineSVGProps>;
+
+type InlineSVGProps = {
+    src: string;
+    className?: string;
+    fill?: boolean;
+    width?: number;
+    height?: number;
+    sanitize?: boolean;
+    fallback?: ReactNode;
+    useCurrentColor?: boolean;
+    alt?: string;
+};
+
+declare const Accordion: FC<AccordionProps>;
+
+type AccordionProps = ContainerProps & {
+    accordionContent?: ReactNode;
+    accordionItems: ReactNode;
+};
+
+type AccordionItemParameters = Pick<ContainerProps, 'backgroundColor' | 'spacing' | 'border'> & {
+    text: ReactElement;
+    accordionItemContent: ReactNode;
+};
+type AccordionItemAdditionalProps = {
+    className?: string;
+};
+type AccordionItemProps = AccordionItemParameters & AccordionItemAdditionalProps;
+declare const _default$1: react.ComponentType<AccordionItemProps>;
+
+type ModalProps = {
+    maxWidth?: 'small' | 'medium' | 'large';
+    className?: string;
+    backgroundColor?: string;
+    closeIconColor?: string;
+    disableCloseModalOnClickOutside?: boolean;
+    trigger: ReactNode;
+    content: ReactNode;
+    actions?: ReactNode;
+    onChangeModalState?: (state: boolean) => void;
+};
+declare const _default: react.ComponentType<ModalProps>;
 
-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 };
+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 h}from"../../chunk-V4EBWEG4.mjs";import{a as c,b as g,c as F}from"../../chunk-M3BGP5VE.mjs";import{a as i}from"../../chunk-AKRWCDDG.mjs";import{a as o}from"../../chunk-5VM2Y55L.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-4LWAGTFW.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-Z7JSWSPD.mjs";import{a as p}from"../../chunk-BK7UG4U4.mjs";import{b as e}from"../../chunk-YUCUJWBO.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};
+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,27 +1,22 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import Container from '@/components/ui/Container';
-import { AccordionProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import BaseAccordion from '@/components/ui/Accordion';
+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,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container
-    className="flex flex-col gap-8"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
-  >
-    <div className="flex flex-col gap-4 text-start">
-      <UniformSlot data={component} context={context} slot={slots.accordionContent} />
-    </div>
-    <UniformSlot data={component} context={context} slot={slots.accordionItems} />
-  </Container>
+  <BaseAccordion
+    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,15 +1,13 @@
 'use client';
 
-import { FC, useCallback, useState } from 'react';
-import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
-import Container from '@/components/ui/Container';
+import { FC } from 'react';
+import { ComponentParameter, UniformSlot, UniformText } from '@uniformdev/next-app-router/component';
+import BaseAccordionItem from '@/components/ui/AccordionItem';
 import BaseText from '@/components/ui/Text';
-import { cn } from '@/utils/styling';
-import { AccordionItemProps } from '.';
-import { IconArrowDown } from './icon-arrow-down';
-import { IconArrowUp } from './icon-arrow-up';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { AccordionItemParameters, AccordionItemProps } from '.';
 
-export const AccordionItem: FC<AccordionItemProps> = ({
+const AccordionItem: FC<AccordionItemProps & AccordionItemParameters> = ({
   tag,
   alignment,
   color,
@@ -21,38 +19,29 @@ export const AccordionItem: FC<AccordionItemProps> = ({
   letterSpacing,
   slots,
   component,
-  context,
   backgroundColor,
   spacing,
   className,
-}) => {
-  const [isOpened, setOpened] = useState(false);
-  const toggleOpenAccordion = useCallback(() => setOpened(isOpened => !isOpened), []);
+  parameters,
+}) => (
+  <BaseAccordionItem
+    {...{
+      backgroundColor,
+      spacing,
+      className,
+    }}
+    text={
+      <BaseText {...{ alignment, color, size, font, weight, transform, decoration, letterSpacing }}>
+        <UniformText
+          placeholder="Text goes here"
+          parameter={parameters.text as ComponentParameter<string>}
+          as={tag || undefined}
+          component={component}
+        />
+      </BaseText>
+    }
+    accordionItemContent={<UniformSlot slot={slots.accordionItemContent} />}
+  />
+);
 
-  return (
-    <Container {...{ fluidContent: true }}>
-      <Container {...{ backgroundColor, spacing, fluidContent: true, className }}>
-        <button onClick={toggleOpenAccordion} className="flex w-full flex-row items-center justify-between text-start">
-          <BaseText {...{ alignment, color, size, font, weight, transform, decoration, letterSpacing }}>
-            <UniformText
-              placeholder="Text goes here"
-              parameterId="text"
-              as={tag || undefined}
-              component={component}
-              context={context}
-            />
-          </BaseText>
-          <div
-            className={cn({
-              [`text-${backgroundColor} invert`]: !!backgroundColor,
-              'text-black dark:text-white': !backgroundColor,
-            })}
-          >
-            {isOpened ? <IconArrowDown /> : <IconArrowUp />}
-          </div>
-        </button>
-      </Container>
-      {isOpened && <UniformSlot data={component} context={context} slot={slots.accordionItemContent} />}
-    </Container>
-  );
-};
+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';