@uniformdev/csk-components 6.0.88 → 6.0.99-alpha.1

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

@@ -1,15 +1,18 @@
 import { FC } from 'react';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
-import { DemoHeroVariants, DemoHeroParameters } from '.';
+import { DemoHeroVariants, FlexibleHeroParameters } from '.';
 
 type ColumnsVariantProps = {
-  backgroundColor: DemoHeroParameters['backgroundColor'];
-  spacing: DemoHeroParameters['spacing'];
-  border: DemoHeroParameters['border'];
-  fluidContent: DemoHeroParameters['fluidContent'];
-  fullHeight: DemoHeroParameters['fullHeight'];
-  fitHeight: DemoHeroParameters['fitHeight'];
+  backgroundColor: FlexibleHeroParameters['backgroundColor'];
+  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;
@@ -25,6 +28,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   variant,
   demoHeroMedia,
   demoHeroContent,
@@ -32,7 +36,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <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

@@ -1,15 +1,16 @@
 import { FC } from 'react';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
-import { DemoHeroParameters } from '.';
+import { FlexibleHeroParameters } from '.';
 
 type DefaultVariantProps = {
-  backgroundColor: DemoHeroParameters['backgroundColor'];
-  spacing: DemoHeroParameters['spacing'];
-  border: DemoHeroParameters['border'];
-  fluidContent: DemoHeroParameters['fluidContent'];
-  fullHeight: DemoHeroParameters['fullHeight'];
-  fitHeight: DemoHeroParameters['fitHeight'];
+  backgroundColor: FlexibleHeroParameters['backgroundColor'];
+  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;
@@ -24,6 +25,7 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   demoHeroMedia,
   demoHeroContent,
   demoHeroCTA,
@@ -32,7 +34,7 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
 }) => (
   <Container
     className="relative overflow-hidden"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}
+    {...{ 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">

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

@@ -79,6 +79,7 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   isFlexibleHero = false,
   component,
   context,
@@ -196,6 +197,7 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
     fluidContent,
     fullHeight,
     fitHeight,
+    height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),
     demoHeroMedia: (

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

@@ -2,58 +2,68 @@ import { FC } from 'react';
 import { FixedHeroProps } from '.';
 import { DemoHero } from './demo-hero';
 
-export const FixedHero: FC<FixedHeroProps> = ({ textColor, enableOverlayAutoTint = false, ...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: '5xl',
-      desktop: '5xl',
-    }}
-    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 && enableOverlayAutoTint ? textColor : undefined}
-    imageOverlayOpacity="0.3"
-    // 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: '5xl',
+        desktop: '5xl',
+      }}
+      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}
+    />
+  );
+};

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

@@ -74,7 +74,11 @@ export type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
+  /**
+   * @deprecated Use overlayAutoTint instead.
+   */
   enableOverlayAutoTint?: boolean;
+  overlayAutoTint?: string;
 } & DemoHeroParameters;
 
 export type FlexibleHeroParameters = DemoHeroParameters;

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

@@ -1,8 +1,8 @@
 import { cn } from '@/utils/styling';
-import { ContentAlignment, DemoHeroParameters } from '.';
+import { ContentAlignment, FlexibleHeroParameters } from '.';
 
 type AlignmentClass = {
-  contentAlignment: DemoHeroParameters['contentAlignment'];
+  contentAlignment: FlexibleHeroParameters['contentAlignment'];
 };
 
 export const getButtonAlignmentClass = ({ contentAlignment }: AlignmentClass) =>

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

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

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

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { imageFrom } from '@uniformdev/assets';
 import BaseImage from '@/components/ui/Image';
 import { resolveAsset } from '@/utils/assets';
 import { ImageProps } from '.';
 import { ImagePlaceholder } from './placeholder';
 
-export const Image: FC<ImageProps> = ({
+export const Image: FC<ImageProps> = async ({
   image,
   objectFit,
   width,
@@ -13,6 +14,7 @@ export const Image: FC<ImageProps> = ({
   overlayOpacity,
   border,
   priority,
+  fill,
   unoptimized,
   context,
   component,
@@ -23,14 +25,38 @@ export const Image: FC<ImageProps> = ({
     return <ImagePlaceholder context={context} component={component} width={width} height={height} />;
   }
 
-  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%"
@@ -38,6 +64,7 @@ export const Image: FC<ImageProps> = ({
       overlayColor={overlayColor}
       overlayOpacity={overlayOpacity}
       border={border}
+      {...variantBasedProps}
     />
   );
 };

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

@@ -12,6 +12,7 @@ export type ImageParameters = {
   border?: string | ViewPort<string>;
   priority?: boolean;
   unoptimized?: boolean;
+  fill?: boolean;
 };
 
 export type ImageProps = ComponentProps<ImageParameters>;

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

@@ -18,6 +18,7 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   config,
   context,
   component,
@@ -44,7 +45,7 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
       ?.length;
 
   return (
-    <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+    <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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

@@ -20,11 +20,12 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   ReviewImage,
   ReviewPersonInfo,
   ReviewContent,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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">

package/dist/content/components/canvas/Review/multi-column-variant.tsx

@@ -20,11 +20,12 @@ export const MultiColumnVariant: FC<MultiColumnVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   ReviewImage,
   ReviewPersonInfo,
   ReviewContent,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className="grid md:grid-cols-12">
       <div className="mb-2 md:col-span-4 md:my-0">
         <div className="mb-2 aspect-square size-12 rounded-full">{ReviewImage}</div>

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

@@ -8,8 +8,11 @@ type ColumnsVariantProps = {
   spacing: SectionParameters['spacing'];
   border: SectionParameters['border'];
   fluidContent: SectionParameters['fluidContent'];
+  /** @deprecated Use height prop instead */
   fullHeight: SectionParameters['fullHeight'];
+  /** @deprecated Use height prop instead */
   fitHeight: SectionParameters['fitHeight'];
+  height: SectionParameters['height'];
   variant: SectionVariants;
   sectionMedia: React.ReactNode;
   sectionContent: React.ReactNode;
@@ -25,6 +28,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   variant,
   sectionMedia,
   sectionContent,
@@ -32,7 +36,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <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 === SectionVariants.ColumnsReverse })}>
         <div className="flex size-full items-center justify-center overflow-hidden">{sectionMedia}</div>

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

@@ -8,8 +8,11 @@ type DefaultVariantProps = {
   spacing?: SectionParameters['spacing'];
   border?: SectionParameters['border'];
   fluidContent?: SectionParameters['fluidContent'];
+  /** @deprecated Use height prop instead */
   fullHeight?: SectionParameters['fullHeight'];
+  /** @deprecated Use height prop instead */
   fitHeight?: SectionParameters['fitHeight'];
+  height?: SectionParameters['height'];
   sectionMedia: React.ReactNode;
   sectionContent: React.ReactNode;
   sectionCTA: React.ReactNode;
@@ -24,6 +27,7 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
   sectionMedia,
   sectionContent,
   sectionCTA,
@@ -32,7 +36,7 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
 }) => (
   <Container
     className="relative overflow-hidden"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
   >
     <div className="absolute left-0 top-0 size-full overflow-hidden">{sectionMedia}</div>
     <Container className="relative flex flex-col gap-8">

package/dist/content/components/canvas/Section/section.tsx

@@ -16,6 +16,7 @@ export const Section: FC<SectionProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => {
   const variant = component.variant as SectionVariants;
 
@@ -27,6 +28,7 @@ export const Section: FC<SectionProps> = ({
     fluidContent,
     fullHeight,
     fitHeight,
+    height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),
     sectionMedia: <UniformSlot data={component} context={context} slot={slots.sectionMedia} />,

package/dist/content/components/canvas/Table/table.tsx

@@ -16,10 +16,11 @@ export const Table: FC<TableProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => (
   <Container
     className="flex flex-col gap-5"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
   >
     <div className="overflow-x-auto">
       <table className={getTableClasses({ size, textColor })}>

package/dist/content/components/canvas/Tabs/tabs.tsx

@@ -18,6 +18,7 @@ export const Tabs: FC<TabsProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => {
   const variant = (component.variant || TabsVariants.Default) as TabsVariants;
   const [activeTabId, setActiveTabId] = useState(component?.slots?.tabItems?.[0]?._id as string);
@@ -47,7 +48,7 @@ export const Tabs: FC<TabsProps> = ({
   return (
     <Container
       className="flex flex-col gap-5"
-      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}
+      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
     >
       <div className={getButtonContainerClasses({ color, variant })}>
         {tabItems.map((tabItem, index) => (

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

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -23,8 +23,9 @@ export const DefaultVariant: FC<WithLargeAvatarVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className="mx-auto flex flex-col items-center md:max-w-[80%]">
       <div>{testimonialSecondaryImage}</div>
       <div className="my-8">{testimonialContent}</div>

package/dist/content/components/canvas/Testimonial/testimonial.tsx

@@ -15,6 +15,7 @@ export const Testimonial: FC<TestimonialProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => {
   const variant = component.variant as TestimonialVariants | undefined;
 
@@ -25,6 +26,7 @@ export const Testimonial: FC<TestimonialProps> = ({
     fluidContent,
     fullHeight,
     fitHeight,
+    height,
     testimonialPrimaryImage: <UniformSlot context={context} data={component} slot={slots.testimonialPrimaryImage} />,
     testimonialContent: <UniformSlot context={context} data={component} slot={slots.testimonialContent} />,
     testimonialAuthor: <UniformSlot context={context} data={component} slot={slots.testimonialAuthor} />,

package/dist/content/components/canvas/Testimonial/with-large-avatar-variant.tsx

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -23,8 +23,9 @@ export const WithLargeAvatarVariant: FC<WithLargeAvatarVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className="mx-auto flex items-center gap-x-10 md:max-w-[80%]">
       <div className="hidden aspect-square w-full max-w-xs shrink-0 overflow-hidden rounded-xl lg:block">
         {testimonialPrimaryImage}

package/dist/content/components/canvas/Testimonial/with-overlapping-image-variant.tsx

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -23,8 +23,9 @@ export const WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({
   fluidContent,
   fullHeight,
   fitHeight,
+  height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <Container className="pb-10 lg:pb-0">
       <div className="mx-auto flex max-w-2xl flex-col items-center gap-10 lg:max-w-none lg:flex-row">
         <div className="-mt-7 aspect-[2/1] w-full shrink-0 overflow-hidden rounded-xl lg:-my-7 lg:aspect-[1/1.4] lg:max-w-xs">

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { cn, formatSpaceParameterValue, resolveViewPort } from '@/utils/styling';
 import { ContainerProps } from '.';
+import { getHeightValue } from './utils';
 
 export const Container: FC<ContainerProps> = ({
   className,
@@ -13,6 +14,7 @@ export const Container: FC<ContainerProps> = ({
   fluidContent = false,
   fullHeight = false,
   fitHeight = false,
+  height,
   maxWidth,
   ...rest
 }) => {
@@ -21,6 +23,8 @@ export const Container: FC<ContainerProps> = ({
     { marginTop, marginBottom, marginRight, marginLeft, paddingTop, paddingBottom, paddingRight, paddingLeft },
   ] = formatSpaceParameterValue(spacing);
 
+  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
+
   return (
     <div
       className={cn(
@@ -30,7 +34,7 @@ export const Container: FC<ContainerProps> = ({
           'mx-auto w-full': !fluidContent,
           'max-w-7xl max-w-container-width': !maxWidth && !fluidContent,
           [`max-w-${maxWidth}`]: !!maxWidth && !fluidContent,
-          'h-full': fitHeight,
+          [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
         },
         wrapperClassName
       )}
@@ -38,8 +42,6 @@ export const Container: FC<ContainerProps> = ({
       <div
         className={cn(
           {
-            '!h-screen': fullHeight,
-            'h-full': fitHeight,
             [`bg-${backgroundColor}`]: !!backgroundColor,
             [resolveViewPort(marginTop, 'mt-{value}')]: marginTop,
             [resolveViewPort(marginBottom, 'mb-{value}')]: marginBottom,
@@ -50,6 +52,7 @@ export const Container: FC<ContainerProps> = ({
             [resolveViewPort(paddingRight, 'pr-{value}')]: paddingRight,
             [resolveViewPort(paddingLeft, 'pl-{value}')]: paddingLeft,
             [resolveViewPort(border, '{value}')]: border,
+            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
           },
           className
         )}

package/dist/content/components/ui/Container/index.ts

@@ -6,10 +6,15 @@ export type ContainerProps = HTMLAttributes<HTMLDivElement> & {
   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?: string | ViewPort<string>;
   wrapperClassName?: string;
   maxWidth?: string;
 };
 
+export { getHeightValue } from './utils';
+
 export { Container as default } from './container';