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

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

@@ -2,10 +2,11 @@ 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 { 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,10 @@ export const Image: FC<ImageProps> = async ({
   context,
   component,
 }) => {
-  const [resolvedImage] = resolveAsset(image);
+  const [resolvedImage] = image || [];
 
   if (!resolvedImage) {
-    const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
+    const isEditorPreviewMode = context.isContextualEditing;
     const isPlaceholder = component?._id?.includes('placeholder_');
 
     if (!isEditorPreviewMode || isPlaceholder) {
@@ -44,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} />;
   }
 
@@ -71,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}
@@ -79,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,56 +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,
   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, 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);

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

@@ -1,27 +1,26 @@
 import dynamic from 'next/dynamic';
 import { AssetParamValue } from '@uniformdev/assets';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type ImageGalleryParameters = ContainerParameters & {
   aspectRatio?: 'square' | 'video';
   items?: AssetParamValue;
 };
 
+export type ImageGalleryAdditionalProps = {
+  config?: {
+    firstLineCount: number;
+    secondLineCount: number;
+    otherLinesCount: number;
+  };
+};
+
 export enum ImageGallerySlots {
   Items = 'imageGalleryItems',
 }
 
-export type ImageGalleryProps = ComponentProps<
-  ImageGalleryParameters & {
-    config?: {
-      firstLineCount: number;
-      secondLineCount: number;
-      otherLinesCount: number;
-    };
-  },
-  ImageGallerySlots
->;
+export type ImageGalleryProps = ComponentProps<ImageGalleryParameters, ImageGallerySlots> & ImageGalleryAdditionalProps;
 
-export default dynamic(() => import('./image-gallery').then(mod => mod.ImageGallery));
+export default dynamic(() => import('./image-gallery').then(mod => mod.default));
 export { ImageGalleryEmptyPlaceholder } from './empty-placeholder';

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

@@ -1,6 +1,5 @@
 import { LinkParamValue } from '@uniformdev/canvas';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { Link } from './link';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type LinkParameters = {
   displayName?: string;
@@ -14,4 +13,4 @@ export enum LinkSlots {
 
 export type LinkProps = ComponentProps<LinkParameters, LinkSlots>;
 
-export default Link;
+export { default } from './link';

package/dist/content/components/canvas/Link/link.tsx

@@ -1,11 +1,14 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseLink from '@/components/ui/Link';
 import { formatUniformLink } from '@/utils/routing';
-import { LinkProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { LinkProps, LinkParameters } from '.';
 
-export const Link: FC<LinkProps> = ({ component, context, slots, link, openInNewTab }) => (
+export const Link: FC<LinkProps & LinkParameters> = ({ slots, link, openInNewTab }) => (
   <BaseLink link={formatUniformLink(link)} openInNewTab={openInNewTab}>
-    <UniformSlot data={component} context={context} slot={slots.linkContent} />
+    <UniformSlot slot={slots.linkContent} />
   </BaseLink>
 );
+
+export default withFlattenParameters(Link);

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

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export const MaxWidthMap = {
   small: 'max-w-xl',
@@ -22,5 +22,5 @@ export enum ModalSlots {
 
 export type ModalProps = ComponentProps<ModalParameters, ModalSlots>;
 
-export default dynamic(() => import('./modal').then(mod => mod.Modal));
+export default dynamic(() => import('./modal').then(mod => mod.default));
 export { ModalEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Modal/modal.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BaseModal from '@/components/ui/Modal';
-import { ModalProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ModalParameters, ModalProps } from '.';
 
-export const Modal: FC<ModalProps> = ({
+const Modal: FC<ModalProps & ModalParameters> = ({
   slots,
-  component,
-  context,
   maxWidth,
   backgroundColor,
   closeIconColor,
@@ -16,10 +15,10 @@ export const Modal: FC<ModalProps> = ({
 }) => (
   <BaseModal
     {...{ maxWidth, backgroundColor, closeIconColor, disableCloseModalOnClickOutside }}
-    trigger={<UniformSlot data={component} context={context} slot={slots.trigger} />}
-    content={<UniformSlot data={component} context={context} slot={slots.modalContent} />}
-    actions={
-      slots?.modalActions?.items?.length && <UniformSlot data={component} context={context} slot={slots.modalActions} />
-    }
+    trigger={<UniformSlot slot={slots.trigger} />}
+    content={<UniformSlot slot={slots.modalContent} />}
+    actions={slots?.modalActions?.items?.length && <UniformSlot slot={slots.modalActions} />}
   />
 );
+
+export default withFlattenParameters(Modal);

package/dist/content/components/canvas/NavigationFlyout/desktop.tsx

@@ -1,25 +1,21 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import Grid from '@/components/ui/Grid';
 import GridItem from '@/components/ui/GridItem';
 import { cn, resolveViewPort } from '@/utils/styling';
-import { NavigationFlyoutProps } from '.';
+import { NavigationFlyoutProps, NavigationFlyoutParameters } from '.';
 
-type NavigationFlyoutPropsDesktopContentProps = Pick<
-  NavigationFlyoutProps,
-  'backgroundColor' | 'border' | 'context' | 'slots' | 'component'
-> & {
-  isOpen: boolean;
-  hasRightContent: boolean;
-};
+type NavigationFlyoutPropsDesktopContentProps = Pick<NavigationFlyoutProps, 'context' | 'slots' | 'component'> &
+  Pick<NavigationFlyoutParameters, 'backgroundColor' | 'border'> & {
+    isOpen: boolean;
+    hasRightContent: boolean;
+  };
 
 export const NavigationFlyoutPropsDesktopContent: FC<NavigationFlyoutPropsDesktopContentProps> = ({
   isOpen,
   backgroundColor,
-  context,
   slots,
   border,
-  component,
   hasRightContent,
 }) => (
   <div
@@ -39,11 +35,11 @@ export const NavigationFlyoutPropsDesktopContent: FC<NavigationFlyoutPropsDeskto
       <Grid columnsCount="2" gapX="4">
         <GridItem>
           <div className="flex flex-col gap-y-4">
-            <UniformSlot context={context} data={component} slot={slots.navigationFlyoutLeftContent} />
+            <UniformSlot slot={slots.navigationFlyoutLeftContent} />
           </div>
         </GridItem>
         <GridItem>
-          <UniformSlot context={context} data={component} slot={slots.navigationFlyoutRightContent} />
+          <UniformSlot slot={slots.navigationFlyoutRightContent} />
         </GridItem>
       </Grid>
     </div>

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

@@ -1,9 +1,13 @@
 import dynamic from 'next/dynamic';
 import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { ViewPort } from '@/types/cskTypes';
+import BaseImage from '@/components/ui/Image';
+import InlineSVG from '@/components/ui/InlineSVG';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
+import { resolveAsset } from '@/utils/assets';
+
+const NavigationFlyoutClient = dynamic(() => import('./navigation-flyout-client').then(mod => mod.default));
 
 export type NavigationFlyoutParameters = TextParameters & {
   icon?: AssetParamValue;
@@ -22,5 +26,19 @@ export enum NavigationFlyoutSlots {
 
 export type NavigationFlyoutProps = ComponentProps<NavigationFlyoutParameters, NavigationFlyoutSlots>;
 
-export default dynamic(() => import('./navigation-flyout').then(mod => mod.NavigationFlyout));
+const NavigationFlyout = (props: NavigationFlyoutProps) => {
+  const [resolvedImage] = resolveAsset(props.parameters.icon?.value);
+  const { url, title = '' } = resolvedImage || {};
+
+  const renderUrl = () => {
+    if (!url) return null;
+
+    return url.endsWith('.svg') ? <InlineSVG src={url} alt={title} fill /> : <BaseImage src={url} alt={title} fill />;
+  };
+
+  return <NavigationFlyoutClient icon={renderUrl()} {...props} />;
+};
+
+export default NavigationFlyout;
+
 export { NavigationFlyoutEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/NavigationFlyout/mobile.tsx

@@ -1,16 +1,14 @@
 import { FC, useEffect, useState } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { ArrowIcon } from '@/components/ui/_icons';
 import { cn } from '@/utils/styling';
-import { NavigationFlyoutProps } from '.';
+import { NavigationFlyoutProps, NavigationFlyoutParameters } from '.';
 
-type NavigationFlyoutPropsMobileContentProps = Pick<
-  NavigationFlyoutProps,
-  'backgroundColor' | 'context' | 'slots' | 'component'
-> & {
-  isOpen: boolean;
-  onClose: () => void;
-};
+type NavigationFlyoutPropsMobileContentProps = Pick<NavigationFlyoutProps, 'context' | 'slots' | 'component'> &
+  Pick<NavigationFlyoutParameters, 'backgroundColor'> & {
+    isOpen: boolean;
+    onClose: () => void;
+  };
 
 const useHeaderHeight = () => {
   const [headerHeight, setHeaderHeight] = useState(0);
@@ -18,6 +16,7 @@ const useHeaderHeight = () => {
   useEffect(() => {
     const header = document.getElementById('mobile-header');
     if (header) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setHeaderHeight(header.offsetHeight);
     }
   }, []);
@@ -28,10 +27,8 @@ const useHeaderHeight = () => {
 export const NavigationFlyoutPropsMobileContent: FC<NavigationFlyoutPropsMobileContentProps> = ({
   isOpen,
   backgroundColor,
-  context,
   slots,
   onClose,
-  component,
 }) => {
   const headerHeight = useHeaderHeight();
 
@@ -49,8 +46,8 @@ export const NavigationFlyoutPropsMobileContent: FC<NavigationFlyoutPropsMobileC
       </button>
 
       <div className="flex flex-col items-center justify-center gap-y-8 p-4">
-        <UniformSlot context={context} data={component} slot={slots.navigationFlyoutLeftContent} />
-        <UniformSlot context={context} data={component} slot={slots.navigationFlyoutRightContent} />
+        <UniformSlot slot={slots.navigationFlyoutLeftContent} />
+        <UniformSlot slot={slots.navigationFlyoutRightContent} />
       </div>
     </div>
   );

package/dist/content/components/canvas/NavigationFlyout/{navigation-flyout.tsx → navigation-flyout-client.tsx}

@@ -1,18 +1,23 @@
 'use client';
 
-import { FC, useCallback, useMemo, useState } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
 import BaseIconLabel from '@/components/ui/IconLabel';
 import BaseImage from '@/components/ui/Image';
-import InlineSVG from '@/components/ui/InlineSVG';
-import { resolveAsset } from '@/utils/assets';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
 import { cn, resolveViewPort } from '@/utils/styling';
-import { NavigationFlyoutProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { NavigationFlyoutParameters, NavigationFlyoutProps } from '.';
 import { NavigationFlyoutPropsDesktopContent } from './desktop';
 import { NavigationFlyoutPropsMobileContent } from './mobile';
 import { getButtonClasses, getCaretClasses } from './style-utils';
 
-export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
+type NavigationFlyoutClientProps = NavigationFlyoutProps &
+  Omit<ReplaceFieldsWithAssets<NavigationFlyoutParameters, 'caretIcon'>, 'icon'> & {
+    icon: ReactNode | null;
+  };
+
+const NavigationFlyoutClient: FC<NavigationFlyoutClientProps> = ({
   icon,
   caretIcon,
   backgroundColor,
@@ -31,6 +36,7 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   slots,
   hoverEffect = '',
   className,
+  parameters,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -38,37 +44,35 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
   const closeFlyout = useCallback(() => setIsOpen(false), []);
 
   const hasRightContent = useMemo(
-    () => Boolean(component.slots?.navigationFlyoutRightContent?.length),
-    [component.slots]
+    () =>
+      Boolean(
+        slots?.navigationFlyoutRightContent?.items?.filter(item => !item?._id.startsWith('placeholder_'))?.length
+      ),
+    [slots]
   );
 
-  const [resolvedImage] = resolveAsset(icon);
-  const { url, title = '' } = resolvedImage || {};
-
-  const renderUrl = () => {
-    if (!url) return null;
-
-    return url.endsWith('.svg') ? <InlineSVG src={url} alt={title} fill /> : <BaseImage src={url} alt={title} fill />;
-  };
-
   const actionClassName = cn('transition-all duration-150', {
     [resolveViewPort(hoverEffect, 'group-hover:{value}')]: !!hoverEffect,
   });
 
-  const [resolvedCaretIcon] = resolveAsset(caretIcon);
+  const [resolvedCaretIcon] = caretIcon || [];
   const { url: caretUrl, title: caretTitle = '' } = resolvedCaretIcon || {};
 
   return (
     <div className="relative" onMouseLeave={closeFlyout}>
       <button onMouseEnter={openFlyout} className={getButtonClasses({ color })}>
         <BaseIconLabel
-          icon={renderUrl()}
+          icon={icon}
           className={cn('group', className)}
           iconClassName={actionClassName}
           textClassName={actionClassName}
           {...{ size, tag, color, weight, font, transform, decoration, letterSpacing, alignment }}
         >
-          <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>
         {caretUrl && (
           <div
@@ -99,3 +103,5 @@ export const NavigationFlyout: FC<NavigationFlyoutProps> = ({
     </div>
   );
 };
+
+export default withFlattenParameters(NavigationFlyoutClient);

package/dist/content/components/canvas/NavigationGroup/desktop.tsx

@@ -1,19 +1,16 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { cn, resolveViewPort } from '@/utils/styling';
-import { NavigationGroupProps } from '.';
+import { NavigationGroupParameters, NavigationGroupProps } from '.';
 
-type NavigationGroupDesktopContentProps = Pick<
-  NavigationGroupProps,
-  'backgroundColor' | 'border' | 'context' | 'slots'
-> & {
-  isOpen: boolean;
-};
+type NavigationGroupDesktopContentProps = Pick<NavigationGroupProps, 'context' | 'slots'> &
+  Pick<NavigationGroupParameters, 'backgroundColor' | 'border'> & {
+    isOpen: boolean;
+  };
 
 export const NavigationGroupDesktopContent: FC<NavigationGroupDesktopContentProps> = ({
   isOpen,
   backgroundColor,
-  context,
   slots,
   border,
 }) => (
@@ -30,7 +27,7 @@ export const NavigationGroupDesktopContent: FC<NavigationGroupDesktopContentProp
       })}
     >
       <div className="flex flex-col gap-y-4 p-4">
-        <UniformSlot data={context} slot={slots.links} context={context} />
+        <UniformSlot slot={slots.links} />
       </div>
     </div>
   </div>

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

@@ -1,9 +1,13 @@
 import dynamic from 'next/dynamic';
 import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { TextParameters } from '@/components/canvas/Text/parameters';
-import { ViewPort } from '@/types/cskTypes';
+import BaseImage from '@/components/ui/Image';
+import InlineSVG from '@/components/ui/InlineSVG';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
+import { resolveAsset } from '@/utils/assets';
+
+const NavigationGroupClient = dynamic(() => import('./navigation-group-client').then(mod => mod.default));
 
 export type NavigationGroupParameters = TextParameters & {
   icon?: AssetParamValue;
@@ -21,5 +25,18 @@ export enum NavigationGroupSlots {
 
 export type NavigationGroupProps = ComponentProps<NavigationGroupParameters, NavigationGroupSlots>;
 
-export default dynamic(() => import('./navigation-group').then(mod => mod.NavigationGroup));
+const NavigationGroup = (props: NavigationGroupProps) => {
+  const [resolvedImage] = resolveAsset(props.parameters.icon?.value);
+  const { url, title = '' } = resolvedImage || {};
+
+  const renderUrl = () => {
+    if (!url) return null;
+
+    return url.endsWith('.svg') ? <InlineSVG src={url} alt={title} fill /> : <BaseImage src={url} alt={title} fill />;
+  };
+
+  return <NavigationGroupClient icon={renderUrl()} {...props} />;
+};
+
+export default NavigationGroup;
 export { NavigationGroupEmptyPlaceholder } from './empty-placeholder';