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

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type DividerParameters = {
   color?: string;
@@ -9,4 +9,4 @@ export type DividerParameters = {
 
 export type DividerProps = ComponentProps<DividerParameters>;
 
-export { Divider as default } from './divider';
+export { default } from './divider';

package/dist/content/components/canvas/Flex/flex.tsx

@@ -1,9 +1,10 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseFlex from '@/components/ui/Flex';
-import { FlexProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FlexProps, FlexParameters } from '.';
 
-export const Flex: FC<FlexProps> = ({
+const Flex: FC<FlexProps & FlexParameters> = ({
   direction,
   justifyContent,
   gap,
@@ -12,13 +13,11 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
   slots,
-  component,
-  context,
   className,
-  fitHeight,
+  height,
   wrapperClassName,
+  wrap,
 }) => (
   <BaseFlex
     {...{
@@ -30,12 +29,14 @@ export const Flex: FC<FlexProps> = ({
       spacing,
       border,
       fluidContent,
-      fullHeight,
-      fitHeight,
+      height,
       wrapperClassName,
       className,
+      wrap,
     }}
   >
-    <UniformSlot data={component} context={context} slot={slots.flexItem} />
+    <UniformSlot slot={slots.flexItem} />
   </BaseFlex>
 );
+
+export default withFlattenParameters(Flex);

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

@@ -1,12 +1,11 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
-import { ViewPort } from '@/types/cskTypes';
-import { Flex } from './flex';
+import { ViewPort, ComponentProps } from '@/types/cskTypes';
 
 type Direction = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type Justify = 'start' | 'end' | 'center' | 'between';
 type AvailableGap = '2' | '8' | '16';
 type Align = 'start' | 'end' | 'center' | 'stretch';
+type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type FlexAdditionalProps = {
   className?: string;
@@ -18,12 +17,13 @@ export type FlexParameters = ContainerParameters & {
   justifyContent?: Justify | ViewPort<Justify>;
   gap?: AvailableGap | ViewPort<AvailableGap>;
   alignItems?: Align | ViewPort<Align>;
+  wrap?: Wrap | ViewPort<Wrap>;
 };
 
-enum FlexSlots {
+export enum FlexSlots {
   FlexItem = 'flexItem',
 }
 
-export type FlexProps = ComponentProps<FlexParameters & FlexAdditionalProps, FlexSlots>;
+export type FlexProps = ComponentProps<FlexParameters, FlexSlots> & FlexAdditionalProps;
 
-export default Flex;
+export { default } from './flex';

package/dist/content/components/canvas/FlexItem/flex-item.tsx

@@ -1,10 +1,13 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseFlexItem from '@/components/ui/FlexItem';
-import { FlexItemProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FlexItemProps, FlexItemParameters } from '.';
 
-export const FlexItem: FC<FlexItemProps> = ({ alignSelf, shrink, context, component, slots }) => (
+const FlexItem: FC<FlexItemProps & FlexItemParameters> = ({ alignSelf, shrink, slots }) => (
   <BaseFlexItem {...{ alignSelf, shrink }}>
-    <UniformSlot data={component} context={context} slot={slots.inner} />
+    <UniformSlot slot={slots.inner} />
   </BaseFlexItem>
 );
+
+export default withFlattenParameters(FlexItem);

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

@@ -1,5 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { ViewPort } from '@/types/cskTypes';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 type AvailableAlignSelf = 'auto' | 'start' | 'end' | 'center' | 'stretch';
 type AvailableShrink = '0' | '1';
@@ -7,13 +6,13 @@ type AvailableShrink = '0' | '1';
 export type FlexItemParameters = {
   displayName?: string;
   alignSelf?: AvailableAlignSelf | ViewPort<AvailableAlignSelf>;
-  shrink: AvailableShrink;
+  shrink?: AvailableShrink;
 };
 
-enum FlexItemSlots {
+export enum FlexItemSlots {
   Inner = 'inner',
 }
 
 export type FlexItemProps = ComponentProps<FlexItemParameters, FlexItemSlots>;
 
-export { FlexItem as default } from './flex-item';
+export { default } from './flex-item';

package/dist/content/components/canvas/Footer/footer.tsx

@@ -1,11 +1,10 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseFooter from '@/components/ui/Footer';
-import { FooterProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FooterParameters, FooterProps } from '.';
 
-export const Footer: FC<FooterProps> = ({
-  context,
-  component,
+export const Footer: FC<FooterProps & FooterParameters> = ({
   slots,
   backgroundColor,
   spacing,
@@ -13,9 +12,11 @@ export const Footer: FC<FooterProps> = ({
   fluidContent,
 }) => (
   <BaseFooter
-    logo={<UniformSlot context={context} slot={slots.footerLogo} data={component} />}
-    copyright={<UniformSlot context={context} slot={slots.footerCopyright} data={component} />}
-    content={<UniformSlot context={context} slot={slots.footerContent} data={component} />}
+    logo={<UniformSlot slot={slots.footerLogo} />}
+    copyright={<UniformSlot slot={slots.footerCopyright} />}
+    content={<UniformSlot slot={slots.footerContent} />}
     {...{ backgroundColor, spacing, border, fluidContent }}
   />
 );
+
+export default withFlattenParameters(Footer);

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

@@ -1,6 +1,5 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { FooterProps as BaseFooterProps } from '@/components/ui/Footer';
-import { Footer } from './footer';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type FooterParameters = BaseFooterProps;
 
@@ -12,5 +11,5 @@ export enum FooterSlots {
 
 export type FooterProps = ComponentProps<FooterParameters, FooterSlots>;
 
-export default Footer;
+export { default } from './footer';
 export { FooterEmptyPlaceholder } from './empty-placeholder';

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseGrid from '@/components/ui/Grid';
-import { GridProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { GridParameters, GridProps } from '.';
 
-export const Grid: FC<GridProps> = ({
+const Grid: FC<GridProps & GridParameters> = ({
   columnsCount,
   gapX,
   gapY,
@@ -11,18 +12,17 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   slots,
-  component,
-  context,
   className,
+  alignItems,
 }) => (
   <BaseGrid
     className={className}
-    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, height, alignItems }}
   >
-    <UniformSlot data={component} context={context} slot={slots.gridInner} />
+    <UniformSlot slot={slots.gridInner} />
   </BaseGrid>
 );
+
+export default withFlattenParameters(Grid);

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

@@ -1,10 +1,9 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
-import { ViewPort } from '@/types/cskTypes';
-import { Grid } from './grid';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 type AvailableGridColumnsCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 type AvailableGridGap = '2' | '8' | '16';
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 
 export type GridAdditionalProps = {
   className?: string;
@@ -14,12 +13,13 @@ export type GridParameters = ContainerParameters & {
   columnsCount?: AvailableGridColumnsCount | ViewPort<AvailableGridColumnsCount>;
   gapY?: AvailableGridGap | ViewPort<AvailableGridGap>;
   gapX?: AvailableGridGap | ViewPort<AvailableGridGap>;
+  alignItems?: Align | ViewPort<Align>;
 };
 
 export enum GridSlots {
   GridInner = 'gridInner',
 }
 
-export type GridProps = ComponentProps<GridParameters & GridAdditionalProps, GridSlots>;
+export type GridProps = ComponentProps<GridParameters, GridSlots> & GridAdditionalProps;
 
-export default Grid;
+export { default } from './grid';

package/dist/content/components/canvas/GridItem/grid-item.tsx

@@ -1,19 +1,21 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseGridItem from '@/components/ui/GridItem';
-import { GridItemProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { GridItemParameters, GridItemProps } from '.';
 
-export const GridItem: FC<GridItemProps> = ({
+const GridItem: FC<GridItemProps & GridItemParameters> = ({
   columnStart,
   columnSpan,
   rowStart,
-  className,
   rowSpan,
-  context,
-  component,
+  alignSelf,
+  className,
   slots,
 }) => (
-  <BaseGridItem {...{ columnStart, columnSpan, rowStart, rowSpan, className }}>
-    <UniformSlot data={component} context={context} slot={slots.inner} />
+  <BaseGridItem {...{ columnStart, columnSpan, rowStart, rowSpan, alignSelf, className }}>
+    <UniformSlot slot={slots.inner} />
   </BaseGridItem>
 );
+
+export default withFlattenParameters(GridItem);

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

@@ -1,6 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { ViewPort } from '@/types/cskTypes';
-import { GridItem } from './grid-item';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 type AvailableGridItemColumnsCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 type AvailableGridItemSpan =
@@ -20,6 +18,7 @@ type AvailableGridItemSpan =
   | 'span-full';
 
 export type AvailableGridItemRowStart = '1' | '2' | '3' | '4' | '5' | '6';
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 
 export type GridItemAdditionalProps = {
   className?: string;
@@ -31,12 +30,13 @@ export type GridItemParameters = {
   columnSpan?: AvailableGridItemSpan | ViewPort<AvailableGridItemSpan>;
   rowStart?: AvailableGridItemRowStart | ViewPort<AvailableGridItemRowStart>;
   rowSpan?: AvailableGridItemSpan | ViewPort<AvailableGridItemSpan>;
+  alignSelf?: Align | ViewPort<Align>;
 };
 
 export enum GridItemSlots {
   Inner = 'inner',
 }
 
-export type GridItemProps = ComponentProps<GridItemParameters & GridItemAdditionalProps, GridItemSlots>;
+export type GridItemProps = ComponentProps<GridItemParameters, GridItemSlots> & GridItemAdditionalProps;
 
-export default GridItem;
+export { default } from './grid-item';

package/dist/content/components/canvas/Header/header.tsx

@@ -1,15 +1,18 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseHeader from '@/components/ui/Header';
-import { HeaderProps, HeaderVariants } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { HeaderParameters, HeaderProps, HeaderVariants } from '.';
 
-export const Header: FC<HeaderProps> = ({ backgroundColor, color, spacing, border, context, component, slots }) => (
+const Header: FC<HeaderProps & HeaderParameters> = ({ backgroundColor, color, spacing, border, slots, variant }) => (
   <BaseHeader
-    sticky={component.variant === HeaderVariants.Sticky}
-    leftSection={<UniformSlot context={context} slot={slots.headerLeftContent} data={component} />}
-    rightSection={<UniformSlot context={context} slot={slots.headerRightContent} data={component} />}
+    sticky={variant === HeaderVariants.Sticky}
+    leftSection={<UniformSlot slot={slots.headerLeftContent} />}
+    rightSection={<UniformSlot slot={slots.headerRightContent} />}
     {...{ backgroundColor, color, spacing, border }}
   >
-    <UniformSlot context={context} slot={slots.headerCenterContent} data={component} />
+    <UniformSlot slot={slots.headerCenterContent} />
   </BaseHeader>
 );
+
+export default withFlattenParameters(Header);

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

@@ -1,6 +1,5 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { HeaderProps as BaseHeaderProps } from '@/components/ui/Header';
-import { Header } from './header';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type HeaderParameters = Omit<BaseHeaderProps, 'sticky'>;
 
@@ -16,5 +15,5 @@ export enum HeaderVariants {
 
 export type HeaderProps = ComponentProps<HeaderParameters, HeaderSlots>;
 
-export default Header;
+export { default } from './header';
 export { HeaderEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/IconLabel/icon-label.tsx

@@ -1,11 +1,12 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
 import BaseIconLabel from '@/components/ui/IconLabel';
 import BaseImage from '@/components/ui/Image';
-import { resolveAsset } from '@/utils/assets';
-import { IconLabelProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { IconLabelParameters, IconLabelProps } from '.';
 
-export const IconLabel: FC<IconLabelProps> = ({
+const IconLabel: FC<IconLabelProps & ReplaceFieldsWithAssets<IconLabelParameters, 'icon'>> = ({
   icon,
   size,
   tag,
@@ -16,18 +17,25 @@ export const IconLabel: FC<IconLabelProps> = ({
   decoration,
   letterSpacing,
   alignment,
+  parameters,
   component,
-  context,
+  iconPosition,
 }) => {
-  const [resolvedImage] = resolveAsset(icon);
+  const [resolvedImage] = icon || [];
   const { url, title = '' } = resolvedImage || {};
 
   return (
     <BaseIconLabel
       icon={url ? <BaseImage src={url} alt={title} fill /> : undefined}
-      {...{ size, tag, color, weight, font, transform, decoration, letterSpacing, alignment }}
+      {...{ size, tag, color, weight, font, transform, decoration, letterSpacing, alignment, iconPosition }}
     >
-      <UniformText placeholder="Text goes here" parameterId="text" component={component} context={context} />
+      <UniformText
+        placeholder="Text goes here"
+        parameter={parameters.text as ComponentParameter<string>}
+        component={component}
+      />
     </BaseIconLabel>
   );
 };
+
+export default withFlattenParameters(IconLabel);

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

@@ -1,12 +1,11 @@
 import { AssetParamValue } from '@uniformdev/assets';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { TextParameters } from '@/components/canvas/Text/parameters';
-import { IconLabel } from './icon-label';
+import { IconLabelProps as BaseIconLabelParameters } from '@/components/ui/IconLabel';
+import { ComponentProps } from '@/types/cskTypes';
 
-export type IconLabelParameters = TextParameters & {
+export type IconLabelParameters = Omit<BaseIconLabelParameters, 'children'> & {
   icon?: AssetParamValue;
 };
 
 export type IconLabelProps = ComponentProps<IconLabelParameters>;
 
-export default IconLabel;
+export { default } from './icon-label';

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

@@ -1,11 +1,12 @@
 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';
+import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ImageParameters, ImageProps } from '.';
 
-export const Image: FC<ImageProps> = async ({
+const Image: FC<ImageProps & ReplaceFieldsWithAssets<ImageParameters, 'image'>> = async ({
   image,
   objectFit,
   width,
@@ -19,10 +20,21 @@ export const Image: FC<ImageProps> = async ({
   context,
   component,
 }) => {
-  const [resolvedImage] = resolveAsset(image);
+  const [resolvedImage] = image || [];
 
   if (!resolvedImage) {
-    return <ImagePlaceholder context={context} component={component} width={width} height={height} />;
+    const isEditorPreviewMode = 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>
+    );
   }
 
   const { focalPoint, title = '' } = resolvedImage;
@@ -33,7 +45,7 @@ export const Image: FC<ImageProps> = async ({
   if (!fill && (!imageWidth || !imageHeight)) {
     console.warn(
       'No dimensions provided for the Next.js Image component. Falling back to a standard <img> tag for rendering.'
-    );
+    ); // eslint-disable-next-line @next/next/no-img-element
     return <img src={resolvedImage.url} alt={title} />;
   }
 
@@ -60,7 +72,10 @@ export const Image: FC<ImageProps> = async ({
       unoptimized={unoptimized}
       priority={priority}
       sizes="100%"
-      style={{ objectFit }}
+      style={{
+        objectFit,
+        objectPosition: focalPoint && !width && !height ? `${focalPoint.x * 100}% ${focalPoint.y * 100}%` : undefined,
+      }}
       overlayColor={overlayColor}
       overlayOpacity={overlayOpacity}
       border={border}
@@ -68,3 +83,5 @@ export const Image: FC<ImageProps> = async ({
     />
   );
 };
+
+export default withFlattenParameters(Image);

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

@@ -1,6 +1,5 @@
 import { AssetParamValue } from '@uniformdev/assets';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { ViewPort } from '@/types/cskTypes';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 export type ImageParameters = {
   image?: AssetParamValue;
@@ -17,4 +16,4 @@ export type ImageParameters = {
 
 export type ImageProps = ComponentProps<ImageParameters>;
 
-export { Image as default } from './image';
+export { default } from './image';

package/dist/content/components/canvas/ImageGallery/empty-placeholder.tsx

@@ -5,7 +5,7 @@ import { ImageGallerySlots } from '.';
 export const ImageGalleryEmptyPlaceholder = (props: ResolveEmptyPlaceholderOptions) => {
   switch (props.slotName) {
     case ImageGallerySlots.Items:
-      return { component: () => <div className=" mx-auto size-48" /> };
+      return { component: () => <div className="mx-auto size-48" /> };
     default:
       return DEFAULT_EMPTY_PLACEHOLDER;
   }

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

@@ -2,9 +2,9 @@
 
 import { FC, ReactNode } from 'react';
 import Masonry from 'react-responsive-masonry';
-import { UniformSlotProps } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlotProps } from '@uniformdev/next-app-router/component';
 import { cn } from '@/utils/styling';
-import { ImageGalleryProps } from '.';
+import { ImageGalleryParameters, ImageGalleryProps } from '.';
 
 const DEFAULT_GALLERY_CONFIG = {
   firstLineCount: 2,
@@ -14,7 +14,7 @@ const DEFAULT_GALLERY_CONFIG = {
 
 type GalleryInnerProps = {
   slot: UniformSlotProps['slot'];
-  aspectRatio?: ImageGalleryProps['aspectRatio'];
+  aspectRatio?: ImageGalleryParameters['aspectRatio'];
   config?: ImageGalleryProps['config'];
 };
 
@@ -31,11 +31,11 @@ export const GalleryInner: FC<GalleryInnerProps> = ({ slot, aspectRatio, config
     items.reduce<ReactNode[][]>(
       (acc, item, index) => {
         if (index < firstLineCount) {
-          acc[0]?.push(item);
+          acc[0]?.push(item?.component);
         } else if (index < firstLineCount + secondLineCount) {
-          acc[1]?.push(item);
+          acc[1]?.push(item?.component);
         } else {
-          acc[2]?.push(item);
+          acc[2]?.push(item?.component);
         }
         return acc;
       },

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

@@ -1,58 +1,43 @@
 'use client';
 
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
 import Container from '@/components/ui/Container';
 import BaseImage from '@/components/ui/Image';
-import { resolveAsset } from '@/utils/assets';
-import { ImageGalleryProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ImageGalleryParameters, ImageGalleryProps } from '.';
 import { GalleryInner } from './gallery-inner';
 
-export const ImageGallery: FC<ImageGalleryProps> = ({
+const ImageGallery: FC<ImageGalleryProps & ReplaceFieldsWithAssets<ImageGalleryParameters, 'items'>> = ({
   slots,
-  aspectRatio,
-  items,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
+  aspectRatio,
   config,
-  context,
-  component,
+  items,
 }) => {
-  const slotsToRender = !items?.length
-    ? slots.imageGalleryItems
-    : {
-        name: 'items',
-        items:
-          resolveAsset(items)?.map((image, index) => (
-            <BaseImage
-              key={image?.id || `image-${index}`}
-              src={image.url}
-              style={{ objectFit: 'cover' }}
-              alt={`Image ${index}`}
-              fill
-            />
-          )) || [],
-      };
-
-  const showEmptySlot =
-    !items?.length &&
-    !(component?.slots?.imageGalleryItems as { _id?: string }[])?.filter(({ _id }) => !_id?.startsWith('placeholder'))
-      ?.length;
+  const slotsToRender = {
+    ...slots.imageGalleryItems,
+    items: !items?.length
+      ? slots.imageGalleryItems?.items || []
+      : items.map((item, index) => ({
+          _id: `image-${index}-${item?.id}`,
+          component: <BaseImage src={item.url} alt={item.title || ''} style={{ objectFit: 'cover' }} fill />,
+          variantId: undefined,
+          $pzCrit: undefined,
+        })),
+  };
 
   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} />
-        ) : (
-          <GalleryInner slot={slotsToRender} aspectRatio={aspectRatio} config={config} />
-        )}
+        <GalleryInner slot={slotsToRender} aspectRatio={aspectRatio} config={config} />
       </div>
     </Container>
   );
 };
+
+export default withFlattenParameters(ImageGallery);