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

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,9 +1,7 @@
 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;
@@ -28,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,12 +1,11 @@
 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,
@@ -15,8 +14,9 @@ export const Card: FC<CardProps> = ({
   height,
   className,
   contentClassName,
+  variant,
 }) => {
-  const isBackgroundImageVariant = component.variant === CardVariants.BackgroundImage;
+  const isBackgroundImageVariant = variant === CardVariants.BackgroundImage;
 
   return (
     <Container
@@ -28,13 +28,13 @@ export const Card: FC<CardProps> = ({
           '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,14 +1,13 @@
 '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,
@@ -16,14 +15,15 @@ export const Carousel: FC<CarouselProps> = ({
   height,
   itemsPerPage,
   gapX,
+  variant,
 }) => (
   <BaseCarousel
     {...{ 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}
@@ -33,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,14 +1,13 @@
 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,
@@ -28,6 +27,8 @@ export const Container: FC<ContainerProps> = ({
       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/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';

package/dist/content/components/canvas/DemoHero/atoms.tsx

@@ -1,62 +1,54 @@
 import { FC } from 'react';
 import { imageFrom } from '@uniformdev/assets';
-import { ComponentInstance } from '@uniformdev/canvas';
-import { CompositionContext, UniformText } from '@uniformdev/canvas-next-rsc/component';
+
+import { ComponentContext, ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
 import BaseButton, { ButtonVariant } from '@/components/ui/Button';
 import BaseImage from '@/components/ui/Image';
 import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
 import BaseText from '@/components/ui/Text';
-import { resolveAsset } from '@/utils/assets';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
 import { formatUniformLink } from '@/utils/routing';
 import { BaseButtonParameters, BaseImageParameters } from '.';
 
 type ComponentProps = {
-  component: ComponentInstance;
-  context: CompositionContext;
-  parameterId: string;
+  isEditorPreviewMode?: boolean;
+  component: Pick<ComponentContext, '_id'>;
+  parameter?: ComponentParameter<string | undefined>;
+  variant?: string;
 };
 
-export const BaseHeroText: FC<TextParameters & ComponentProps> = ({
+export const BaseHeroText: FC<TextParameters & Omit<ComponentProps, 'variant'>> = ({
   component,
-  context,
-  parameterId,
+  parameter,
   text,
+  isEditorPreviewMode,
   ...props
 }) => {
-  const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
-
   if (!text && !isEditorPreviewMode) return null;
 
   return (
     <BaseText {...props}>
       <UniformText
         placeholder="Text goes here"
-        parameterId={parameterId}
+        parameter={parameter as ComponentParameter<string>}
         as={props.tag || undefined}
         component={component}
-        context={context}
       />
     </BaseText>
   );
 };
 
-export const BaseHeroButton: FC<BaseButtonParameters & { variant?: ButtonVariant } & ComponentProps> = ({
-  component,
-  context,
-  parameterId,
-  text,
-  ...props
-}) => {
+export const BaseHeroButton: FC<
+  ReplaceFieldsWithAssets<BaseButtonParameters, 'icon'> & { variant?: ButtonVariant } & Omit<ComponentProps, 'variant'>
+> = ({ component, parameter, isEditorPreviewMode, text, ...props }) => {
   const { link, icon } = props;
   const href = formatUniformLink(link);
 
-  const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
-
   if (!text && !href && !isEditorPreviewMode) return null;
 
   const Icon = () => {
-    const [resolvedImage] = resolveAsset(icon);
+    const [resolvedImage] = icon || [];
     const { url, title = '' } = resolvedImage || {};
     return url ? (
       <BaseImage
@@ -72,20 +64,22 @@ export const BaseHeroButton: FC<BaseButtonParameters & { variant?: ButtonVariant
     ) : undefined;
   };
   return (
+    // eslint-disable-next-line react-hooks/static-components
     <BaseButton {...props} href={href} icon={<Icon />}>
       <UniformText
         placeholder="Button text goes here"
-        parameterId={parameterId}
+        parameter={parameter as ComponentParameter<string>}
         component={component}
-        context={context}
       />
     </BaseButton>
   );
 };
 
-export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'parameterId'>> = ({
+export const BaseHeroImage: FC<
+  ReplaceFieldsWithAssets<BaseImageParameters, 'image'> & Omit<ComponentProps, 'parameter'>
+> = ({
   component,
-  context,
+  isEditorPreviewMode,
   image,
   objectFit,
   width,
@@ -97,14 +91,14 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
   priority,
   unoptimized,
   fill,
+  variant,
 }) => {
-  const [resolvedImage] = resolveAsset(image);
+  const [resolvedImage] = image || [];
 
   if (!resolvedImage) {
-    const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
     const isPlaceholder = component?._id?.includes('placeholder_');
 
-    if (!isEditorPreviewMode || isPlaceholder || !component.variant) {
+    if (!isEditorPreviewMode || isPlaceholder || !variant) {
       return null;
     }
 
@@ -123,7 +117,7 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
   if (!fill && (!imageWidth || !imageHeight)) {
     console.warn(
       'No dimensions provided for the Next.js Image component. Falling back to a standard <img> tag for rendering.'
-    );
+    ); // eslint-disable-next-line @next/next/no-img-element
     return <img src={resolvedImage.url} alt={title} />;
   }
 
@@ -150,7 +144,10 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
       unoptimized={unoptimized}
       priority={priority}
       sizes="100%"
-      style={{ objectFit }}
+      style={{
+        objectFit,
+        objectPosition: focalPoint && !width && !height ? `${focalPoint.x * 100}% ${focalPoint.y * 100}%` : undefined,
+      }}
       overlayColor={overlayColor}
       contrastBaseColor={contrastBaseColor}
       overlayOpacity={overlayOpacity}

package/dist/content/components/canvas/DemoHero/columns-variant.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
 import { DemoHeroVariants, FlexibleHeroParameters } from '.';
@@ -10,9 +10,9 @@ type ColumnsVariantProps = {
   fluidContent: FlexibleHeroParameters['fluidContent'];
   height: FlexibleHeroParameters['height'];
   variant?: DemoHeroVariants;
-  demoHeroMedia: React.ReactNode;
-  demoHeroContent: React.ReactNode;
-  demoHeroCTA: React.ReactNode;
+  demoHeroMedia: ReactNode;
+  demoHeroContent: ReactNode;
+  demoHeroCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };