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

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

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { FC, SVGProps, ReactElement, HTMLAttributes, ReactNode, PropsWithChildren } from 'react';
-import { T as TextProps, B as ButtonProps, C as ContainerProps, F as FooterProps, H as HeaderProps } from '../../index-D5cLtaIv.mjs';
-export { a as ButtonVariant } from '../../index-D5cLtaIv.mjs';
+import { 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 { ViewPort } from '../../types/cskTypes.mjs';
 import { ImageProps as ImageProps$1 } from 'next/image';
 import { ReactPlayerProps } from 'react-player';
@@ -23,7 +24,7 @@ declare const ImageIcon: FC<SVGProps<SVGSVGElement>>;
 
 declare const VideoIcon: FC<SVGProps<SVGSVGElement>>;
 
-type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'> & {
+type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight'> & {
     countOfItems?: number;
     children: (options: {
         className?: string;
@@ -33,17 +34,18 @@ type CarouselProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing
     gapX?: string;
     variant?: string;
 };
-declare const _default$4: react.ComponentType<CarouselProps>;
+declare const _default$2: 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' | 'height' | 'children'> & {
+type FlexProps = Pick<ContainerProps, 'className' | 'wrapperClassName' | 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height' | 'children'> & {
     direction?: Direction | ViewPort<Direction>;
     justifyContent?: Justify | ViewPort<Justify>;
-    gap?: string | ViewPort<string>;
+    gap?: FlexGap | ViewPort<FlexGap>;
     alignItems?: Align | ViewPort<Align>;
 };
 
@@ -58,20 +60,26 @@ type FlexItemProps = HTMLAttributes<HTMLDivElement> & {
 
 declare const Grid: FC<GridProps>;
 
-type GridProps = Pick<ContainerProps, 'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'children' | 'height'> & {
-    columnsCount?: string | ViewPort<string>;
-    gapY?: string | ViewPort<string>;
-    gapX?: string | ViewPort<string>;
+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>;
     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 GridItemProps = HTMLAttributes<HTMLDivElement> & {
-    columnStart?: string | ViewPort<string>;
-    columnSpan?: string | ViewPort<string>;
-    rowStart?: string | ViewPort<string>;
-    rowSpan?: string | ViewPort<string>;
+    columnStart?: AvailableColumnStart | ViewPort<AvailableColumnStart>;
+    columnSpan?: AvailableColumnSpan | ViewPort<AvailableColumnSpan>;
+    rowStart?: AvailableGridRowStart | ViewPort<AvailableGridRowStart>;
+    rowSpan?: AvailableGridRowSpan | ViewPort<AvailableGridRowSpan>;
     className?: string;
 };
 
@@ -143,7 +151,7 @@ type ThemeSwitcherProps = {
     iconColor?: string;
     onChange?: (theme: string) => void;
 };
-declare const _default$3: react.ComponentType<ThemeSwitcherProps>;
+declare const _default$1: react.ComponentType<ThemeSwitcherProps>;
 
 type VideoProps = ReactPlayerProps & {
     autoPlay?: boolean;
@@ -153,50 +161,6 @@ type VideoProps = ReactPlayerProps & {
     overlayOpacity?: NonNullable<ImageProps$1['style']>['opacity'];
     border?: string | ViewPort<string>;
 };
-declare const _default$2: react.ComponentType<VideoProps>;
+declare const _default: react.ComponentType<VideoProps>;
 
-declare const InlineSVG: FC<InlineSVGProps>;
-
-type InlineSVGProps = {
-    src: string;
-    className?: string;
-    fill?: boolean;
-    width?: number;
-    height?: number;
-    sanitize?: boolean;
-    fallback?: React.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 { Accordion, _default$1 as AccordionItem, type AccordionItemProps, type AccordionProps, Arrow as ArrowIcon, Button, ButtonProps, _default$4 as Carousel, type CarouselProps, Container, ContainerProps, Flex, FlexItem, type FlexItemProps, type FlexProps, Footer, FooterProps, Grid, GridItem, type GridItemProps, type GridProps, Header, HeaderProps, IconLabel, type IconLabelProps, Image, ImageIcon, type ImageProps, InlineSVG, type InlineSVGProps, Link, type LinkProps, MediaPlaceholder, type MediaPlaceholderType, _default as Modal, type ModalProps, Page, type PageProps, Rating, type RatingProps, Text, TextProps, _default$3 as ThemeSwitcher, type ThemeSwitcherProps, _default$2 as Video, VideoIcon, type VideoProps };
+export { 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 };

package/dist/components/ui/index.mjs

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

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import BaseAccordion from '@/components/ui/Accordion';
+import Container from '@/components/ui/Container';
 import { AccordionProps } from '.';
 
 export const Accordion: FC<AccordionProps> = ({
@@ -11,11 +11,17 @@ export const Accordion: FC<AccordionProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => (
-  <BaseAccordion
-    accordionContent={<UniformSlot data={component} context={context} slot={slots.accordionContent} />}
-    accordionItems={<UniformSlot data={component} context={context} slot={slots.accordionItems} />}
-    {...{ backgroundColor, spacing, border, fluidContent, 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>
 );

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

@@ -1,10 +1,13 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
-import BaseAccordionItem from '@/components/ui/AccordionItem';
+import Container from '@/components/ui/Container';
 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';
 
 export const AccordionItem: FC<AccordionItemProps> = ({
   tag,
@@ -22,24 +25,34 @@ export const AccordionItem: FC<AccordionItemProps> = ({
   backgroundColor,
   spacing,
   className,
-}) => (
-  <BaseAccordionItem
-    {...{
-      backgroundColor,
-      spacing,
-      className,
-    }}
-    text={
-      <BaseText {...{ alignment, color, size, font, weight, transform, decoration, letterSpacing }}>
-        <UniformText
-          placeholder="Text goes here"
-          parameterId="text"
-          as={tag || undefined}
-          component={component}
-          context={context}
-        />
-      </BaseText>
-    }
-    accordionItemContent={<UniformSlot data={component} context={context} slot={slots.accordionItemContent} />}
-  />
-);
+}) => {
+  const [isOpened, setOpened] = useState(false);
+  const toggleOpenAccordion = useCallback(() => setOpened(isOpened => !isOpened), []);
+
+  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>
+  );
+};

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

@@ -1,3 +1,4 @@
+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';
@@ -9,7 +10,7 @@ export type ButtonParameters = {
   text?: string;
   link?: LinkParamValue;
   textColor?: string;
-  textWeight?: string;
+  textWeight?: keyof DefaultTheme['fontWeight'];
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;

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

@@ -12,6 +12,8 @@ export const Card: FC<CardProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   className,
   contentClassName,
@@ -21,7 +23,7 @@ export const Card: FC<CardProps> = ({
   return (
     <Container
       className={cn('relative overflow-hidden', className)}
-      {...{ backgroundColor, spacing, border, fluidContent, height }}
+      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
     >
       <div
         className={cn({

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

@@ -13,12 +13,14 @@ export const Carousel: FC<CarouselProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   itemsPerPage,
   gapX,
 }) => (
   <BaseCarousel
-    {...{ backgroundColor, spacing, border, fluidContent, height, itemsPerPage, gapX }}
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height, itemsPerPage, gapX }}
     countOfItems={slots.carouselItems?.items.length ?? 0}
     variant={component.variant}
   >

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

@@ -13,6 +13,8 @@ export const Container: FC<ContainerProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   className,
 }) => (
@@ -24,6 +26,8 @@ export const Container: FC<ContainerProps> = ({
       spacing,
       border,
       fluidContent,
+      fullHeight,
+      fitHeight,
       height,
       className,
     }}

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

@@ -9,5 +9,9 @@ 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/DemoHero/atoms.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { imageFrom } from '@uniformdev/assets';
 import { ComponentInstance } from '@uniformdev/canvas';
 import { CompositionContext, UniformText } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
@@ -96,7 +95,6 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
   border,
   priority,
   unoptimized,
-  fill,
 }) => {
   const [resolvedImage] = resolveAsset(image);
 
@@ -115,38 +113,14 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
     );
   }
 
-  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.'
-    );
-    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,
-      };
+  const { url, title = '' } = resolvedImage;
 
   return (
     <BaseImage
-      src={imageUrl}
+      containerStyle={{ ...(width ? { width: `${width}px` } : {}), ...(height ? { height: `${height}px` } : {}) }}
+      src={url}
       alt={title}
+      fill
       unoptimized={unoptimized}
       priority={priority}
       sizes="100%"
@@ -155,7 +129,6 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
       contrastBaseColor={contrastBaseColor}
       overlayOpacity={overlayOpacity}
       border={border}
-      {...variantBasedProps}
     />
   );
 };

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

@@ -8,6 +8,10 @@ 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;
@@ -22,6 +26,8 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   variant,
   demoHeroMedia,
@@ -30,7 +36,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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

@@ -8,6 +8,8 @@ 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;
@@ -21,6 +23,8 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   demoHeroMedia,
   demoHeroContent,
@@ -28,7 +32,10 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container className="relative overflow-hidden" {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container
+    className="relative overflow-hidden"
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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

@@ -71,13 +71,14 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   imageBorder,
   imagePriority,
   imageUnoptimized,
-  imageFill,
   // Presentation Parameters
   contentAlignment,
   backgroundColor,
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   isFlexibleHero = false,
   component,
@@ -194,6 +195,8 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
     spacing,
     border,
     fluidContent,
+    fullHeight,
+    fitHeight,
     height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),
@@ -212,7 +215,6 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
               imageBorder,
               imagePriority,
               imageUnoptimized,
-              imageFill,
             },
             'image'
           )}

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

@@ -1,60 +1,69 @@
 import { FC } from 'react';
 import { FixedHeroProps } from '.';
 import { DemoHero } from './demo-hero';
-import { getImageParametersFocalPoint } from './utils';
 
-export const FixedHero: FC<FixedHeroProps> = ({ 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.component.variant && overlayAutoTint ? textColor : undefined}
-    imageOverlayOpacity={overlayAutoTint}
-    {...getImageParametersFocalPoint(!!props.component.variant)}
-    // Presentation Parameters
-    spacing={{
-      paddingTop: 'container-xlarge',
-      paddingLeft: 'container-small',
-      paddingRight: 'container-small',
-      paddingBottom: 'container-xlarge',
-    }}
-    fluidContent={!props.component.variant}
-    isFlexibleHero={false}
-  />
-);
+const getImageOverlayOpacity = (overlayAutoTint?: string, enableOverlayAutoTint?: boolean) => {
+  if (overlayAutoTint) return overlayAutoTint;
+  // Cover deprecated case
+  if (enableOverlayAutoTint) return '0.3';
+  return undefined;
+};
+
+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}
+    />
+  );
+};