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

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}
+    />
+  );
+};

package/dist/content/components/canvas/DemoHero/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';
@@ -19,7 +20,7 @@ export type BaseButtonParameters = {
   text?: string;
   link?: LinkParamValue;
   textColor?: string;
-  textWeight?: string;
+  textWeight?: keyof DefaultTheme['fontWeight'];
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;
@@ -44,7 +45,6 @@ export type BaseImageParameters = {
   border?: string | ViewPort<string>;
   priority?: boolean;
   unoptimized?: boolean;
-  fill?: boolean;
 };
 
 export type EyebrowTitleTextParameters = PrefixedKeys<TextParameters, 'eyebrowTitle'>;
@@ -60,7 +60,10 @@ export type SecondaryButtonParameters = PrefixedKeys<BaseButtonParameters, 'seco
 export type ImageParameters = PrefixedKeys<Omit<BaseImageParameters, 'image'>, 'image'> &
   Pick<BaseImageParameters, 'image'>;
 
-type DemoHeroParameters = ContainerParameters & {
+/**
+ * @deprecated Use FixedHeroParameters or FlexibleHeroParameters directly instead.
+ */
+export type DemoHeroParameters = ContainerParameters & {
   contentAlignment?: ContentAlignment;
 } & EyebrowTitleTextParameters &
   TitleTextParameters &
@@ -71,6 +74,10 @@ type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
+  /**
+   * @deprecated Use overlayAutoTint instead.
+   */
+  enableOverlayAutoTint?: boolean;
   overlayAutoTint?: string;
 } & DemoHeroParameters;
 
@@ -86,6 +93,10 @@ 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,17 +29,3 @@ 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,11 +12,12 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
   slots,
   component,
   context,
   className,
-  height,
+  fitHeight,
   wrapperClassName,
 }) => (
   <BaseFlex
@@ -29,7 +30,8 @@ export const Flex: FC<FlexProps> = ({
       spacing,
       border,
       fluidContent,
-      height,
+      fullHeight,
+      fitHeight,
       wrapperClassName,
       className,
     }}

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

@@ -11,6 +11,8 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   slots,
   component,
@@ -19,7 +21,7 @@ export const Grid: FC<GridProps> = ({
 }) => (
   <BaseGrid
     className={className}
-    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, height }}
+    {...{ 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,9 +1,9 @@
 import { FC } from 'react';
 import { imageFrom } from '@uniformdev/assets';
 import BaseImage from '@/components/ui/Image';
-import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
 import { resolveAsset } from '@/utils/assets';
 import { ImageProps } from '.';
+import { ImagePlaceholder } from './placeholder';
 
 export const Image: FC<ImageProps> = async ({
   image,
@@ -22,18 +22,7 @@ export const Image: FC<ImageProps> = async ({
   const [resolvedImage] = resolveAsset(image);
 
   if (!resolvedImage) {
-    const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
-    const isPlaceholder = component?._id?.includes('placeholder_');
-
-    if (!isEditorPreviewMode || isPlaceholder) {
-      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>
-    );
+    return <ImagePlaceholder context={context} component={component} width={width} height={height} />;
   }
 
   const { focalPoint, title = '' } = resolvedImage;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
+import { ImageProps } from '.';
+
+type ImagePlaceholderProps = Pick<ImageProps, 'component' | 'context' | 'width' | 'height'>;
+
+export const ImagePlaceholder: FC<ImagePlaceholderProps> = ({ context, component, width, height }) => {
+  const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
+  const isPlaceholder = component?._id?.includes('placeholder_');
+
+  if (!isEditorPreviewMode || isPlaceholder) {
+    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>
+  );
+};

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

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