@uniformdev/csk-components 6.0.104 → 6.0.114-alpha.1

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 Container from '@/components/ui/Container';
+import BaseAccordion from '@/components/ui/Accordion';
 import { AccordionProps } from '.';
 
 export const Accordion: FC<AccordionProps> = ({
@@ -11,17 +11,11 @@ export const Accordion: FC<AccordionProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container
-    className="flex flex-col gap-8"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
-  >
-    <div className="flex flex-col gap-4 text-start">
-      <UniformSlot data={component} context={context} slot={slots.accordionContent} />
-    </div>
-    <UniformSlot data={component} context={context} slot={slots.accordionItems} />
-  </Container>
+  <BaseAccordion
+    accordionContent={<UniformSlot data={component} context={context} slot={slots.accordionContent} />}
+    accordionItems={<UniformSlot data={component} context={context} slot={slots.accordionItems} />}
+    {...{ backgroundColor, spacing, border, fluidContent, height }}
+  />
 );

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

@@ -1,13 +1,10 @@
 'use client';
 
-import { FC, useCallback, useState } from 'react';
+import { FC } from 'react';
 import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
-import Container from '@/components/ui/Container';
+import BaseAccordionItem from '@/components/ui/AccordionItem';
 import BaseText from '@/components/ui/Text';
-import { cn } from '@/utils/styling';
 import { AccordionItemProps } from '.';
-import { IconArrowDown } from './icon-arrow-down';
-import { IconArrowUp } from './icon-arrow-up';
 
 export const AccordionItem: FC<AccordionItemProps> = ({
   tag,
@@ -25,34 +22,24 @@ export const AccordionItem: FC<AccordionItemProps> = ({
   backgroundColor,
   spacing,
   className,
-}) => {
-  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>
-  );
-};
+}) => (
+  <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} />}
+  />
+);

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

@@ -1,4 +1,3 @@
-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';
@@ -10,7 +9,7 @@ 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;

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

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

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

@@ -13,14 +13,12 @@ export const Carousel: FC<CarouselProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   itemsPerPage,
   gapX,
 }) => (
   <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}
   >

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

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

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/DemoHero/atoms.tsx

@@ -1,4 +1,5 @@
 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';
@@ -95,6 +96,7 @@ export const BaseHeroImage: FC<BaseImageParameters & Omit<ComponentProps, 'param
   border,
   priority,
   unoptimized,
+  fill,
 }) => {
   const [resolvedImage] = resolveAsset(image);
 
@@ -113,14 +115,38 @@ 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.'
+    );
+    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%"
@@ -129,6 +155,7 @@ 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,10 +8,6 @@ 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;
@@ -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

@@ -8,8 +8,6 @@ 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;
@@ -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

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

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

@@ -1,69 +1,61 @@
 import { FC } from 'react';
 import { 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;
-};
-
-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 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"
+    primaryButtonTextColor="text-secondary"
+    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}
+  />
+);

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

@@ -1,4 +1,3 @@
-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';
@@ -20,7 +19,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 +44,7 @@ export type BaseImageParameters = {
   border?: string | ViewPort<string>;
   priority?: boolean;
   unoptimized?: boolean;
+  fill?: boolean;
 };
 
 export type EyebrowTitleTextParameters = PrefixedKeys<TextParameters, 'eyebrowTitle'>;
@@ -60,10 +60,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 +71,6 @@ export type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
-  /**
-   * @deprecated Use overlayAutoTint instead.
-   */
-  enableOverlayAutoTint?: boolean;
   overlayAutoTint?: string;
 } & DemoHeroParameters;
 
@@ -93,10 +86,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/Flex/flex.tsx

@@ -12,12 +12,11 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
   slots,
   component,
   context,
   className,
-  fitHeight,
+  height,
   wrapperClassName,
 }) => (
   <BaseFlex
@@ -30,8 +29,7 @@ export const Flex: FC<FlexProps> = ({
       spacing,
       border,
       fluidContent,
-      fullHeight,
-      fitHeight,
+      height,
       wrapperClassName,
       className,
     }}

package/dist/content/components/canvas/Grid/grid.tsx

@@ -11,8 +11,6 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   slots,
   component,
@@ -21,7 +19,7 @@ export const Grid: FC<GridProps> = ({
 }) => (
   <BaseGrid
     className={className}
-    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, height }}
   >
     <UniformSlot data={component} context={context} slot={slots.gridInner} />
   </BaseGrid>

package/dist/content/components/canvas/Image/image.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
 import { imageFrom } from '@uniformdev/assets';
+import { MediaPlaceholder } from '@/components/ui';
 import BaseImage from '@/components/ui/Image';
 import { resolveAsset } from '@/utils/assets';
 import { ImageProps } from '.';
-import { ImagePlaceholder } from './placeholder';
 
 export const Image: FC<ImageProps> = async ({
   image,
@@ -22,7 +22,18 @@ export const Image: FC<ImageProps> = async ({
   const [resolvedImage] = resolveAsset(image);
 
   if (!resolvedImage) {
-    return <ImagePlaceholder context={context} component={component} width={width} height={height} />;
+    const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
+    const isPlaceholder = component?._id?.includes('placeholder_');
+
+    if (!isEditorPreviewMode || isPlaceholder || !component.variant) {
+      return null;
+    }
+
+    return (
+      <div style={{ width: width ? `${width}px` : 'auto', height: height ? `${height}px` : 'auto' }}>
+        <MediaPlaceholder type="image" placeholder="Please add an asset to display an image" />
+      </div>
+    );
   }
 
   const { focalPoint, title = '' } = resolvedImage;

package/dist/content/components/canvas/ImageGallery/image-gallery.tsx

@@ -16,8 +16,6 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   config,
   context,
@@ -45,7 +43,7 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
       ?.length;
 
   return (
-    <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+    <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
       <div className="flex flex-col gap-1">
         {showEmptySlot ? (
           <UniformSlot context={context} slot={slots.imageGalleryItems} data={component} />

package/dist/content/components/canvas/Review/default-variant.tsx

@@ -18,14 +18,12 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   ReviewImage,
   ReviewPersonInfo,
   ReviewContent,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="mx-auto flex lg:max-w-[60%]">
       <div className="aspect-square size-12 shrink-0 rounded-full">{ReviewImage}</div>
       <div className="ml-6">