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

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

@@ -1,61 +1,54 @@
 import { FC } from 'react';
-import { ComponentInstance } from '@uniformdev/canvas';
-import { CompositionContext, UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { imageFrom } from '@uniformdev/assets';
+
+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
@@ -71,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,
@@ -95,14 +90,15 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
   border,
   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;
     }
 
@@ -113,22 +109,50 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
     );
   }
 
-  const { url, title = '' } = resolvedImage;
+  const { focalPoint, title = '' } = resolvedImage;
+
+  const imageWidth = width || resolvedImage.width;
+  const imageHeight = height || resolvedImage.height;
+
+  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} />;
+  }
+
+  const imageUrl = imageFrom(resolvedImage?.url)
+    .transform({
+      width: width,
+      height: height,
+      fit: objectFit,
+      focal: focalPoint,
+    })
+    .url();
+
+  const variantBasedProps = fill
+    ? { fill: true }
+    : {
+        width: imageWidth,
+        height: imageHeight,
+      };
 
   return (
     <BaseImage
-      containerStyle={{ ...(width ? { width: `${width}px` } : {}), ...(height ? { height: `${height}px` } : {}) }}
-      src={url}
+      src={imageUrl}
       alt={title}
-      fill
       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}
       border={border}
+      {...variantBasedProps}
     />
   );
 };

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 '.';
@@ -8,15 +8,11 @@ type ColumnsVariantProps = {
   spacing: FlexibleHeroParameters['spacing'];
   border: FlexibleHeroParameters['border'];
   fluidContent: FlexibleHeroParameters['fluidContent'];
-  /** @deprecated Use height prop instead */
-  fullHeight: FlexibleHeroParameters['fullHeight'];
-  /** @deprecated Use height prop instead */
-  fitHeight: FlexibleHeroParameters['fitHeight'];
   height: FlexibleHeroParameters['height'];
   variant?: DemoHeroVariants;
-  demoHeroMedia: React.ReactNode;
-  demoHeroContent: React.ReactNode;
-  demoHeroCTA: React.ReactNode;
+  demoHeroMedia: ReactNode;
+  demoHeroContent: ReactNode;
+  demoHeroCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };
@@ -26,8 +22,6 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   variant,
   demoHeroMedia,
@@ -36,7 +30,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className={cn('grid grid-cols-1 items-center gap-4 px-4 lg:grid-cols-2 xl:px-0')}>
       <div className={cn('aspect-square', { 'order-last': variant === DemoHeroVariants.ColumnsReverse })}>
         <div className="flex size-full items-center justify-center overflow-hidden">{demoHeroMedia}</div>

package/dist/content/components/canvas/DemoHero/default-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 { FlexibleHeroParameters } from '.';
@@ -8,12 +8,10 @@ type DefaultVariantProps = {
   spacing: FlexibleHeroParameters['spacing'];
   border: FlexibleHeroParameters['border'];
   fluidContent: FlexibleHeroParameters['fluidContent'];
-  fullHeight: FlexibleHeroParameters['fullHeight'];
-  fitHeight: FlexibleHeroParameters['fitHeight'];
   height: FlexibleHeroParameters['height'];
-  demoHeroMedia: React.ReactNode;
-  demoHeroContent: React.ReactNode;
-  demoHeroCTA: React.ReactNode;
+  demoHeroMedia: ReactNode;
+  demoHeroContent: ReactNode;
+  demoHeroCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };
@@ -23,8 +21,6 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   demoHeroMedia,
   demoHeroContent,
@@ -32,10 +28,7 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container
-    className="relative overflow-hidden"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
-  >
+  <Container className="relative overflow-hidden" {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="absolute left-0 top-0 size-full overflow-hidden">{demoHeroMedia}</div>
     <Container className="relative flex flex-col gap-8">
       <div className={cn('flex flex-col gap-4', textAlignmentClass)}>{demoHeroContent}</div>

package/dist/content/components/canvas/DemoHero/demo-hero.tsx

@@ -1,13 +1,34 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { DemoHeroVariants, FixedHeroProps, FlexibleHeroProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { SlotDefinition } from '@uniformdev/next-app-router-shared';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import {
+  DemoHeroVariants,
+  FixedHeroParameters,
+  FixedHeroProps,
+  FlexibleHeroParameters,
+  FlexibleHeroProps,
+  FlexibleHeroSlots,
+} from '.';
 import { BaseHeroButton, BaseHeroImage, BaseHeroText } from './atoms';
 import { ColumnsVariant } from './columns-variant';
 import { DefaultVariant } from './default-variant';
 import { getButtonAlignmentClass, getTextAlignmentClass } from './style-utils';
 import { cleanUpPrefix } from './utils';
 
-export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHero?: boolean }> = ({
+type FixedHeroComponentProps = {
+  isFlexibleHero?: false;
+  slots: Record<never, SlotDefinition>;
+} & FixedHeroProps &
+  ReplaceFieldsWithAssets<FixedHeroParameters, 'image' | 'primaryButtonIcon'>;
+
+type FlexibleHeroComponentProps = {
+  isFlexibleHero: true;
+  slots: Record<FlexibleHeroSlots, SlotDefinition>;
+} & FlexibleHeroProps &
+  ReplaceFieldsWithAssets<FlexibleHeroParameters, 'image' | 'primaryButtonIcon'>;
+
+export const DemoHero: FC<FixedHeroComponentProps | FlexibleHeroComponentProps> = ({
   // Eyebrow Text Parameters
   eyebrowTitleText,
   eyebrowTitleTag,
@@ -71,24 +92,25 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   imageBorder,
   imagePriority,
   imageUnoptimized,
+  imageFill,
   // Presentation Parameters
   contentAlignment,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
-  isFlexibleHero = false,
+  isFlexibleHero,
   component,
   context,
   slots,
+  variant,
+  parameters,
 }) => {
-  const variant = component.variant as DemoHeroVariants | undefined;
+  const isEditorPreviewMode = context.isContextualEditing;
 
   const demoHeroContent = isFlexibleHero ? (
-    <UniformSlot data={component} context={context} slot={slots.flexibleHeroContent} />
+    <UniformSlot slot={slots.flexibleHeroContent} />
   ) : (
     <>
       <BaseHeroText
@@ -108,9 +130,9 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'eyebrowTitle'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="eyebrowTitleText"
+        parameter={parameters.eyebrowTitleText}
       />
       <BaseHeroText
         {...cleanUpPrefix(
@@ -129,9 +151,9 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'title'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="titleText"
+        parameter={parameters.titleText}
       />
       <BaseHeroText
         {...cleanUpPrefix(
@@ -150,15 +172,15 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'description'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="descriptionText"
+        parameter={parameters.descriptionText}
       />
     </>
   );
 
   const demoHeroCTA = isFlexibleHero ? (
-    <UniformSlot data={component} context={context} slot={slots.flexibleHeroCta} />
+    <UniformSlot slot={slots.flexibleHeroCta} />
   ) : (
     <>
       <BaseHeroButton
@@ -182,21 +204,18 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'primaryButton'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="primaryButtonText"
+        parameter={parameters.primaryButtonText}
       />
     </>
   );
 
   const variantProps = {
-    variant,
     backgroundColor,
     spacing,
     border,
     fluidContent,
-    fullHeight,
-    fitHeight,
     height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),
@@ -215,11 +234,13 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
               imageBorder,
               imagePriority,
               imageUnoptimized,
+              imageFill,
             },
             'image'
           )}
           component={component}
-          context={context}
+          isEditorPreviewMode={isEditorPreviewMode}
+          variant={variant}
         />
       </>
     ),
@@ -230,7 +251,7 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   switch (variant) {
     case DemoHeroVariants.Columns:
     case DemoHeroVariants.ColumnsReverse:
-      return <ColumnsVariant {...variantProps} />;
+      return <ColumnsVariant variant={variant} {...variantProps} />;
     default:
       return <DefaultVariant {...variantProps} />;
   }

package/dist/content/components/canvas/DemoHero/fixed-hero.tsx

@@ -1,69 +1,67 @@
 import { FC } from 'react';
-import { FixedHeroProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FixedHeroParameters, FixedHeroProps } from '.';
 import { DemoHero } from './demo-hero';
+import { getImageParametersFocalPoint } from './utils';
 
-const getImageOverlayOpacity = (overlayAutoTint?: string, enableOverlayAutoTint?: boolean) => {
-  if (overlayAutoTint) return overlayAutoTint;
-  // Cover deprecated case
-  if (enableOverlayAutoTint) return '0.3';
-  return undefined;
-};
+const FixedHero: FC<FixedHeroProps & ReplaceFieldsWithAssets<FixedHeroParameters, 'image' | 'primaryButtonIcon'>> = ({
+  textColor,
+  overlayAutoTint,
+  ...props
+}) => (
+  <DemoHero
+    {...props}
+    // Eyebrow Text Parameters
+    eyebrowTitleTag="span"
+    eyebrowTitleSize={{
+      mobile: 'xs',
+      tablet: 'lg',
+      desktop: 'xl',
+    }}
+    eyebrowTitleWeight="bold"
+    eyebrowTitleTransform="uppercase"
+    eyebrowTitleColor={textColor || props.eyebrowTitleColor}
+    // Title Text Parameters
+    titleSize={{
+      mobile: '3xl',
+      tablet: '4xl',
+      desktop: '4xl',
+    }}
+    titleWeight="bold"
+    titleColor={textColor || props.titleColor}
+    // Description Text Parameters
+    descriptionTag="p"
+    descriptionSize={{
+      mobile: 'sm',
+      tablet: 'lg',
+      desktop: 'xl',
+    }}
+    descriptionWeight="normal"
+    descriptionColor={textColor || props.descriptionColor}
+    // Primary Button Parameters
+    primaryButtonSize="button-medium"
+    primaryButtonTextSize="sm"
+    primaryButtonTextWeight="normal"
+    primaryButtonButtonColor="button-primary"
+    primaryButtonTextTransform="uppercase"
+    primaryButtonHoverButtonColor="button-primary-hover"
+    // Image Parameters
+    imagePriority
+    imageObjectFit="cover"
+    imageUnoptimized
+    imageContrastBaseColor={!props.variant && overlayAutoTint ? textColor : undefined}
+    imageOverlayOpacity={overlayAutoTint}
+    {...getImageParametersFocalPoint(!!props.variant)}
+    // Presentation Parameters
+    spacing={{
+      paddingTop: 'container-xlarge',
+      paddingLeft: 'container-small',
+      paddingRight: 'container-small',
+      paddingBottom: 'container-xlarge',
+    }}
+    fluidContent={!props.variant}
+  />
+);
 
-export const FixedHero: FC<FixedHeroProps> = ({ textColor, overlayAutoTint, enableOverlayAutoTint, ...props }) => {
-  const imageOverlayOpacity = getImageOverlayOpacity(overlayAutoTint, enableOverlayAutoTint);
-  return (
-    <DemoHero
-      {...props}
-      // Eyebrow Text Parameters
-      eyebrowTitleTag="span"
-      eyebrowTitleSize={{
-        mobile: 'xs',
-        tablet: 'lg',
-        desktop: 'xl',
-      }}
-      eyebrowTitleWeight="bold"
-      eyebrowTitleTransform="uppercase"
-      eyebrowTitleColor={textColor || props.eyebrowTitleColor}
-      // Title Text Parameters
-      titleSize={{
-        mobile: '3xl',
-        tablet: '4xl',
-        desktop: '4xl',
-      }}
-      titleWeight="bold"
-      titleColor={textColor || props.titleColor}
-      // Description Text Parameters
-      descriptionTag="p"
-      descriptionSize={{
-        mobile: 'sm',
-        tablet: 'lg',
-        desktop: 'xl',
-      }}
-      descriptionWeight="normal"
-      descriptionColor={textColor || props.descriptionColor}
-      // Primary Button Parameters
-      primaryButtonSize="button-medium"
-      primaryButtonTextSize="sm"
-      primaryButtonTextColor="text-light"
-      primaryButtonTextWeight="normal"
-      primaryButtonButtonColor="button-primary"
-      primaryButtonTextTransform="uppercase"
-      primaryButtonHoverButtonColor="button-primary-hover"
-      // Image Parameters
-      imagePriority
-      imageObjectFit="cover"
-      imageUnoptimized
-      imageContrastBaseColor={!props.component.variant && imageOverlayOpacity ? textColor : undefined}
-      imageOverlayOpacity={imageOverlayOpacity}
-      // Presentation Parameters
-      spacing={{
-        paddingTop: 'container-xlarge',
-        paddingLeft: 'container-small',
-        paddingRight: 'container-small',
-        paddingBottom: 'container-xlarge',
-      }}
-      fluidContent={!props.component.variant}
-      isFlexibleHero={false}
-    />
-  );
-};
+export default withFlattenParameters(FixedHero);

package/dist/content/components/canvas/DemoHero/flexible-hero.tsx

@@ -1,5 +1,11 @@
 import { FC } from 'react';
-import { FlexibleHeroProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FlexibleHeroParameters, FlexibleHeroProps } from '.';
 import { DemoHero } from './demo-hero';
 
-export const FlexibleHero: FC<FlexibleHeroProps> = props => <DemoHero {...props} isFlexibleHero={true} />;
+export const FlexibleHero: FC<
+  FlexibleHeroProps & ReplaceFieldsWithAssets<FlexibleHeroParameters, 'image' | 'primaryButtonIcon'>
+> = props => <DemoHero {...props} isFlexibleHero={true} />;
+
+export default withFlattenParameters(FlexibleHero);

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

@@ -1,13 +1,11 @@
-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 { ContainerParameters } from '@/components/canvas/Container/parameters';
 import { TextParameters } from '@/components/canvas/Text/parameters';
 import { ButtonVariant, ButtonProps as BaseButtonProps } from '@/components/ui/Button';
-import { ViewPort } from '@/types/cskTypes';
-import { FixedHero } from './fixed-hero';
-import { FlexibleHero } from './flexible-hero';
+import { ViewPort, ComponentProps } from '@/types/cskTypes';
+import FixedHero from './fixed-hero';
+import FlexibleHero from './flexible-hero';
 import { PrefixedKeys } from './utils';
 
 export enum ContentAlignment {
@@ -20,7 +18,7 @@ export type BaseButtonParameters = {
   text?: string;
   link?: LinkParamValue;
   textColor?: string;
-  textWeight?: keyof DefaultTheme['fontWeight'];
+  textWeight?: string;
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;
@@ -45,6 +43,7 @@ export type BaseImageParameters = {
   border?: string | ViewPort<string>;
   priority?: boolean;
   unoptimized?: boolean;
+  fill?: boolean;
 };
 
 export type EyebrowTitleTextParameters = PrefixedKeys<TextParameters, 'eyebrowTitle'>;
@@ -60,10 +59,7 @@ export type SecondaryButtonParameters = PrefixedKeys<BaseButtonParameters, 'seco
 export type ImageParameters = PrefixedKeys<Omit<BaseImageParameters, 'image'>, 'image'> &
   Pick<BaseImageParameters, 'image'>;
 
-/**
- * @deprecated Use FixedHeroParameters or FlexibleHeroParameters directly instead.
- */
-export type DemoHeroParameters = ContainerParameters & {
+type DemoHeroParameters = ContainerParameters & {
   contentAlignment?: ContentAlignment;
 } & EyebrowTitleTextParameters &
   TitleTextParameters &
@@ -74,10 +70,6 @@ export type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
-  /**
-   * @deprecated Use overlayAutoTint instead.
-   */
-  enableOverlayAutoTint?: boolean;
   overlayAutoTint?: string;
 } & DemoHeroParameters;
 
@@ -93,10 +85,6 @@ export enum FlexibleHeroSlots {
   FlexibleHeroCta = 'flexibleHeroCta',
 }
 
-/**
- * @deprecated Use FixedHeroProps or FlexibleHeroProps directly instead.
- */
-export type DemoHeroProps = FixedHeroProps | FlexibleHeroProps;
 export type FixedHeroProps = ComponentProps<FixedHeroParameters>;
 export type FlexibleHeroProps = ComponentProps<FlexibleHeroParameters, FlexibleHeroSlots>;
 

package/dist/content/components/canvas/DemoHero/utils.ts

@@ -29,3 +29,17 @@ export const cleanUpPrefix = <T extends Record<string, unknown>, Prefix extends
     {} as RemovePrefix<T, Prefix>
   );
 };
+
+const HALF_DISPLAY_WIDTH = 608;
+export const getImageParametersFocalPoint = (isVariant: boolean) => {
+  const columnImageDimensions = isVariant ? HALF_DISPLAY_WIDTH : undefined;
+  return {
+    imageFill: !isVariant,
+    ...(columnImageDimensions
+      ? {
+          imageWidth: columnImageDimensions,
+          imageHeight: columnImageDimensions,
+        }
+      : {}),
+  };
+};

package/dist/content/components/canvas/Divider/divider.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
 import { cn } from '@/utils/styling';
-import { DividerProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { DividerParameters, DividerProps } from '.';
 
-export const Divider: FC<DividerProps> = ({ color, thickness, width, alignment }) => (
+const Divider: FC<DividerProps & DividerParameters> = ({ color, thickness, width, alignment }) => (
   <div className={cn('flex w-full', `justify-${alignment || 'center'}`)}>
     <div className={cn({ [`bg-${color}`]: !!color })} style={{ width, height: thickness }} />
   </div>
 );
+
+export default withFlattenParameters(Divider);