@uniformdev/csk-components 6.1.57 → 6.1.64-alpha.1

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';

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

@@ -1,12 +1,13 @@
 import { FC, useMemo } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
 import BaseButton, { ButtonProps as BaseButtonProps } from '@/components/ui/Button';
 import BaseImage from '@/components/ui/Image';
-import { resolveAsset } from '@/utils/assets';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
 import { formatUniformLink } from '@/utils/routing';
-import { ButtonProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ButtonParameters, ButtonProps } from '.';
 
-export const Button: FC<ButtonProps> = ({
+const Button: FC<ButtonProps & ReplaceFieldsWithAssets<ButtonParameters, 'icon'>> = ({
   component,
   context,
   link,
@@ -25,13 +26,13 @@ export const Button: FC<ButtonProps> = ({
   className,
   onClick,
   text,
+  variant,
+  parameters,
 }) => {
   const href = formatUniformLink(link);
 
-  const isEditorPreviewMode = context.previewMode === 'editor' && context?.isContextualEditing;
-
   const iconParameters = useMemo(() => {
-    const [resolvedImage] = resolveAsset(icon);
+    const [resolvedImage] = icon || [];
     const { url, title = '' } = resolvedImage || {};
     if (!url) return undefined;
 
@@ -62,18 +63,18 @@ export const Button: FC<ButtonProps> = ({
 
   const hasContent = !!text || !!iconParameters;
 
-  if (!hasContent && !isEditorPreviewMode) return null;
+  if (!hasContent && !context.isContextualEditing) return null;
 
   return (
     <BaseButton
-      variant={component.variant as BaseButtonProps['variant']}
+      variant={variant as BaseButtonProps['variant']}
       href={href}
       border={border}
       size={size}
       onClick={onClick}
       className={className}
       textSize={textSize}
-      isActive={context.matchedRoute === href}
+      isActive={context.pageState.routePath === href}
       textColor={textColor}
       textFont={textFont}
       textWeight={textWeight}
@@ -81,10 +82,17 @@ export const Button: FC<ButtonProps> = ({
       buttonColor={buttonColor}
       hoverButtonColor={hoverButtonColor}
       hoverTextColor={hoverTextColor}
+      // eslint-disable-next-line react-hooks/static-components
       icon={<Icon />}
       iconPosition={iconPosition}
     >
-      <UniformText placeholder="Button text goes here" parameterId="text" component={component} context={context} />
+      <UniformText
+        placeholder="Button text goes here"
+        parameter={parameters.text as ComponentParameter<string>}
+        component={component}
+      />
     </BaseButton>
   );
 };
+
+export default withFlattenParameters(Button);

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

@@ -1,16 +1,13 @@
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 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 { ViewPort } from '@/types/cskTypes';
-import { Button } from './button';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 export type ButtonParameters = {
   text?: string;
   link?: LinkParamValue;
   textColor?: string;
-  textWeight?: keyof DefaultTheme['fontWeight'];
+  textWeight?: string;
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;
@@ -29,6 +26,6 @@ export type ButtonAdditionalProps = {
   onClick?: () => void;
 };
 
-export type ButtonProps = ComponentProps<ButtonParameters & ButtonAdditionalProps>;
+export type ButtonProps = ComponentProps<ButtonParameters> & ButtonAdditionalProps;
 
-export default Button;
+export { default } from './button';

package/dist/content/components/canvas/Card/card.tsx

@@ -1,42 +1,40 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
-import { CardProps, CardVariants } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { CardParameters, CardProps, CardVariants } from '.';
 
-export const Card: FC<CardProps> = ({
-  component,
-  context,
+const Card: FC<CardProps & CardParameters> = ({
   slots,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   className,
   contentClassName,
+  variant,
 }) => {
-  const isBackgroundImageVariant = component.variant === CardVariants.BackgroundImage;
+  const isBackgroundImageVariant = variant === CardVariants.BackgroundImage;
 
   return (
     <Container
       className={cn('relative overflow-hidden', className)}
-      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+      {...{ backgroundColor, spacing, border, fluidContent, height }}
     >
       <div
         className={cn({
           'inset-0 size-full absolute': isBackgroundImageVariant,
         })}
       >
-        <UniformSlot data={component} context={context} slot={slots.cardMedia} />
+        <UniformSlot slot={slots.cardMedia} />
       </div>
       <div className={cn('relative flex flex-col gap-y-2', contentClassName)}>
-        <UniformSlot data={component} context={context} slot={slots.cardContent} />
+        <UniformSlot slot={slots.cardContent} />
       </div>
     </Container>
   );
 };
 
-export default Card;
+export default withFlattenParameters(Card);

package/dist/content/components/canvas/Card/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 CardAdditionalProps = {
   className?: string;
@@ -17,7 +17,7 @@ export enum CardSlots {
   CardContent = 'cardContent',
 }
 
-export type CardProps = ComponentProps<CardParameters & CardAdditionalProps, CardSlots>;
+export type CardProps = ComponentProps<CardParameters, CardSlots> & CardAdditionalProps;
 
-export { Card as default } from './card';
+export { default } from './card';
 export { CardEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Carousel/carousel.tsx

@@ -1,31 +1,29 @@
 'use client';
 
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseCarousel from '@/components/ui/Carousel';
-import { CarouselProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { CarouselParameters, CarouselProps } from '.';
 
-export const Carousel: FC<CarouselProps> = ({
+const Carousel: FC<CarouselProps & CarouselParameters> = ({
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   itemsPerPage,
   gapX,
+  variant,
 }) => (
   <BaseCarousel
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height, itemsPerPage, gapX }}
+    {...{ backgroundColor, spacing, border, fluidContent, height, itemsPerPage, gapX }}
     countOfItems={slots.carouselItems?.items.length ?? 0}
-    variant={component.variant}
+    variant={variant}
   >
     {({ className, style }) => (
-      <UniformSlot context={context} slot={slots.carouselItems} data={component}>
+      <UniformSlot slot={slots.carouselItems}>
         {({ child, key }) => (
           <div key={key} className={className} style={style}>
             {child}
@@ -35,3 +33,5 @@ export const Carousel: FC<CarouselProps> = ({
     )}
   </BaseCarousel>
 );
+
+export default withFlattenParameters(Carousel);

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

@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type CarouselParameters = ContainerParameters & {
-  itemsPerPage: string;
-  gapX: string;
+  itemsPerPage?: string;
+  gapX?: string;
 };
 
 export enum CarouselSlots {
@@ -13,5 +13,5 @@ export enum CarouselSlots {
 
 export type CarouselProps = ComponentProps<CarouselParameters, CarouselSlots>;
 
-export default dynamic(() => import('./carousel').then(mod => mod.Carousel));
+export default dynamic(() => import('./carousel').then(mod => mod.default));
 export { CarouselEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Container/container.tsx

@@ -1,20 +1,17 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseContainer from '@/components/ui/Container';
-import { ContainerProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ContainerParameters, ContainerProps } from '.';
 
-export const Container: FC<ContainerProps> = ({
+const Container: FC<ContainerProps & ContainerParameters> = ({
   displayName,
   anchor: id,
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   className,
 }) => (
@@ -26,12 +23,12 @@ export const Container: FC<ContainerProps> = ({
       spacing,
       border,
       fluidContent,
-      fullHeight,
-      fitHeight,
       height,
       className,
     }}
   >
-    <UniformSlot data={component} context={context} slot={slots.containerContent} />
+    <UniformSlot slot={slots.containerContent} />
   </BaseContainer>
 );
+
+export default withFlattenParameters(Container);

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 import { ContainerParameters } from './parameters';
 
 export type ContainerAdditionalProps = {
@@ -9,7 +9,7 @@ export enum ContainerSlots {
   ContainerContent = 'containerContent',
 }
 
-export type ContainerProps = ComponentProps<ContainerParameters & ContainerAdditionalProps, ContainerSlots>;
+export type ContainerProps = ComponentProps<ContainerParameters, ContainerSlots> & ContainerAdditionalProps;
 
 export { type ContainerParameters } from './parameters';
-export { Container as default } from './container';
+export { default } from './container';

package/dist/content/components/canvas/Container/parameters.ts

@@ -9,9 +9,5 @@ export type ContainerParameters = {
   spacing?: SpaceType | ViewPort<SpaceType>;
   border?: string | ViewPort<string>;
   fluidContent?: boolean;
-  /** @deprecated Use height prop instead */
-  fullHeight?: boolean;
-  /** @deprecated Use height prop instead */
-  fitHeight?: boolean;
   height?: HeightType | ViewPort<HeightType>;
 };

package/dist/content/components/canvas/CookieConsent/cookie-consent.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { FC, useCallback, useEffect, useState } from 'react';
+import Cookies from 'js-cookie';
+import { ComponentParameter, UniformSlot, UniformText } from '@uniformdev/next-app-router/component';
+import BaseBanner, { BannerVariants } from '@/components/ui/Banner';
+import BaseButton from '@/components/ui/Button';
+import useCookiesConsent from '@/utils/useCookiesConsent';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { CookieConsentProps, CookieConsentParameters } from '.';
+
+const CLIENT_COOKIE_NAME = 'hasAcceptedCookies';
+
+const CookieConsent: FC<CookieConsentProps & CookieConsentParameters> = ({
+  backgroundColor,
+  spacing,
+  border,
+  fluidContent,
+  allowTextColor,
+  allowButtonColor,
+  allowButtonHoverColor,
+  declineTextColor,
+  declineButtonColor,
+  declineButtonHoverColor,
+  slots,
+  variant,
+  parameters,
+  component,
+  context,
+}) => {
+  const [showCookieConsent, setShowCookieConsent] = useState(false);
+  const { consent, updateConsent } = useCookiesConsent();
+  const { defaultConsent } = context?.pageState || {};
+
+  useEffect(() => {
+    // get user has accepted cookies from cookie
+    const cookieValue = Cookies.get(CLIENT_COOKIE_NAME);
+    const userHasAcceptedCookies = cookieValue === undefined ? undefined : cookieValue === 'true';
+
+    if (userHasAcceptedCookies === undefined) {
+      // if user has not accepted cookies and default consent is false, show cookie consent
+      if (!defaultConsent) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setShowCookieConsent(true);
+
+        // if consent is true, but user has not accepted cookies, update consent to false
+        if (consent) {
+          updateConsent(false);
+        }
+      }
+      return;
+    }
+
+    // if user has accepted cookies and consent is not the same, update consent
+    if (consent !== userHasAcceptedCookies) {
+      updateConsent(userHasAcceptedCookies);
+    }
+  }, [defaultConsent, consent, updateConsent, setShowCookieConsent]);
+
+  const handleAllowCookiesButtonClick = useCallback(() => {
+    updateConsent(true);
+    Cookies.set(CLIENT_COOKIE_NAME, 'true');
+    setShowCookieConsent(false);
+  }, [updateConsent]);
+
+  const handleDeclineCookiesButtonClick = useCallback(() => {
+    updateConsent(false);
+    Cookies.set(CLIENT_COOKIE_NAME, 'false');
+    setShowCookieConsent(false);
+  }, [updateConsent]);
+
+  if (!showCookieConsent) return null;
+
+  return (
+    <BaseBanner
+      {...{
+        backgroundColor,
+        spacing,
+        border,
+        fluidContent,
+        floating: true,
+        variant: variant as BannerVariants,
+      }}
+    >
+      <div className="flex flex-col gap-x-6 md:flex-row p-5 xs:p-10 items-center justify-between w-full">
+        <UniformSlot slot={slots.cookieConsentContent} />
+        <div className="flex justify-between gap-2 flex-col sm:flex-row md:flex-col lg:flex-row shrink-0 md:justify-start w-full md:w-auto md:space-x-0 md:space-y-2 lg:space-y-0 lg:space-x-3 mt-4 md:mt-0">
+          <BaseButton
+            className="w-full cursor-pointer"
+            size="button-medium"
+            textSize="sm"
+            textWeight="normal"
+            buttonColor={allowButtonColor}
+            textColor={allowTextColor}
+            hoverButtonColor={allowButtonHoverColor}
+            onClick={handleAllowCookiesButtonClick}
+          >
+            <UniformText
+              placeholder="allowButtonText"
+              parameter={parameters.allowButtonText as ComponentParameter<string>}
+              component={component}
+            />
+          </BaseButton>
+          <BaseButton
+            className="w-full cursor-pointer"
+            size="button-medium"
+            textSize="sm"
+            textWeight="normal"
+            buttonColor={declineButtonColor}
+            textColor={declineTextColor}
+            hoverButtonColor={declineButtonHoverColor}
+            onClick={handleDeclineCookiesButtonClick}
+          >
+            <UniformText
+              placeholder="declineButtonText"
+              parameter={parameters.declineButtonText as ComponentParameter<string>}
+              component={component}
+            />
+          </BaseButton>
+        </div>
+      </div>
+    </BaseBanner>
+  );
+};
+
+export default withFlattenParameters(CookieConsent);

package/dist/content/components/canvas/CookieConsent/empty-placeholder.tsx

@@ -0,0 +1,12 @@
+import { ResolveEmptyPlaceholderOptions } from '@/types/cskTypes';
+import { DEFAULT_EMPTY_PLACEHOLDER } from '@/utils/createEmptyPlaceholderResolver';
+import { CookieConsentSlots } from '.';
+
+export const CookieConsentEmptyPlaceholder = (props: ResolveEmptyPlaceholderOptions) => {
+  switch (props.slotName) {
+    case CookieConsentSlots.CookieConsentContent:
+      return { component: () => <div className="h-20 w-full" /> };
+    default:
+      return DEFAULT_EMPTY_PLACEHOLDER;
+  }
+};

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

@@ -0,0 +1,26 @@
+import dynamic from 'next/dynamic';
+import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ContentAlignment } from '@/components/ui/Banner';
+import { ComponentProps } from '@/types/cskTypes';
+
+export enum CookieConsentSlots {
+  CookieConsentContent = 'cookieConsentContent',
+}
+
+export type CookieConsentParameters = ContainerParameters & {
+  allowButtonText?: string;
+  allowTextColor?: string;
+  allowButtonColor?: string;
+  allowButtonHoverColor?: string;
+  declineButtonText?: string;
+  declineTextColor?: string;
+  declineButtonColor?: string;
+  declineButtonHoverColor?: string;
+};
+
+export type CookieConsentProps = ComponentProps<CookieConsentParameters, CookieConsentSlots>;
+
+export { ContentAlignment };
+
+export default dynamic(() => import('./cookie-consent').then(mod => mod.default));
+export { CookieConsentEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Countdown/countdown.tsx

@@ -1,23 +1,23 @@
 'use client';
 
 import { FC, useState, useEffect, useMemo } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { CountdownProps, CountdownVariants } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { CountdownParameters, CountdownProps, CountdownVariants } from '.';
 import { CountdownUnit } from './constants';
 import { getTextClass, getUnitClass } from './style-utils';
 import { formatTime, renderNumberList } from './utils';
 
 const UNITS_TO_SHOW = [CountdownUnit.Days, CountdownUnit.Hours, CountdownUnit.Minutes, CountdownUnit.Seconds];
 
-export const Countdown: FC<CountdownProps> = ({
+const Countdown: FC<CountdownProps & CountdownParameters> = ({
   targetDate,
   backgroundColor,
   textColor,
   border,
   size,
-  component,
-  context,
   slots,
+  variant,
 }) => {
   const [{ timeDifference, ...time }, setTime] = useState(formatTime(targetDate));
 
@@ -55,7 +55,7 @@ export const Countdown: FC<CountdownProps> = ({
               <div
                 key={unit}
                 className={getUnitClass({
-                  variant: component.variant as CountdownVariants,
+                  variant: variant as CountdownVariants,
                   backgroundColor,
                   border,
                   size,
@@ -77,8 +77,10 @@ export const Countdown: FC<CountdownProps> = ({
           })}
         </div>
       ) : (
-        <UniformSlot data={component} context={context} slot={slots.countdownComplete} />
+        <UniformSlot slot={slots.countdownComplete} />
       )}
     </div>
   );
 };
+
+export default withFlattenParameters(Countdown);

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

@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextProps as BaseTextProps } from '@/components/ui/Text';
-import { ViewPort } from '@/types/cskTypes';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 type UniformDate = {
   datetime: string;
@@ -25,5 +24,5 @@ export enum CountdownVariants {
 
 export type CountdownProps = ComponentProps<CountdownParameters, CountdownSlots>;
 
-export default dynamic(() => import('./countdown').then(mod => mod.Countdown));
+export default dynamic(() => import('./countdown').then(mod => mod.default));
 export { CountdownEmptyPlaceholder } from './empty-placeholder';