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

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,82 +1,24 @@
 'use client';
 
-import { FC, useCallback, useState, MouseEvent, useRef, useEffect } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { cn } from '@/utils/styling';
-import { ModalProps } from '.';
-import { CloseIcon } from './close-icon';
-import { getCloseButtonClasses, getDialogClasses, getFormClasses } from './style-utils';
+import { FC } from 'react';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import BaseModal from '@/components/ui/Modal';
+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,
   disableCloseModalOnClickOutside,
-}) => {
-  const modalActionsRef = useRef<HTMLDivElement>(null);
-  const [showModal, setShowModal] = useState(false);
-
-  const handleClickOutside = useCallback(() => {
-    if (!disableCloseModalOnClickOutside) setShowModal(false);
-  }, [disableCloseModalOnClickOutside]);
-
-  const toggleModal = useCallback(() => {
-    setShowModal(prev => !prev);
-  }, []);
-
-  const handleClickContent = useCallback((e: MouseEvent<HTMLFormElement>) => {
-    e.stopPropagation();
-  }, []);
-
-  useEffect(() => {
-    if (!modalActionsRef.current) return;
-    const currentActions = modalActionsRef.current.querySelectorAll('button, a');
-    const handleClickButton = () => setShowModal(false);
-
-    currentActions.forEach(button => {
-      button.addEventListener('click', handleClickButton);
-    });
-    return () =>
-      currentActions.forEach(button => {
-        button.removeEventListener('click', handleClickButton);
-      });
-  }, []);
-
-  return (
-    <div>
-      <div onClick={toggleModal}>
-        <UniformSlot data={component} context={context} slot={slots.trigger} />
-      </div>
-      <div className={getDialogClasses({ showModal })}>
-        <dialog
-          open={showModal}
-          onClick={handleClickOutside}
-          aria-label="Close modal"
-          aria-modal="true"
-          className="flex size-full items-center justify-center bg-black/50 px-4"
-        >
-          <form method="dialog" className={getFormClasses({ maxWidth, backgroundColor })} onClick={handleClickContent}>
-            <button onClick={toggleModal} className={getCloseButtonClasses({ disableCloseModalOnClickOutside })}>
-              <CloseIcon
-                className={cn({
-                  [`fill-${closeIconColor}`]: closeIconColor,
-                })}
-              />
-            </button>
-            <div className="p-6 md:p-8">
-              <UniformSlot data={component} context={context} slot={slots.modalContent} />
-            </div>
-            {slots?.modalActions?.items?.length && (
-              <div ref={modalActionsRef} className="border-t p-6 md:p-8">
-                <UniformSlot data={component} context={context} slot={slots.modalActions} />
-              </div>
-            )}
-          </form>
-        </dialog>
-      </div>
-    </div>
-  );
-};
+}) => (
+  <BaseModal
+    {...{ maxWidth, backgroundColor, closeIconColor, disableCloseModalOnClickOutside }}
+    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';

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

@@ -1,13 +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 { NavigationGroupProps } from '.';
+import { NavigationGroupParameters, NavigationGroupProps } from '.';
 
-type NavigationGroupMobileContentProps = Pick<NavigationGroupProps, 'backgroundColor' | 'context' | 'slots'> & {
-  isOpen: boolean;
-  onClose: () => void;
-};
+type NavigationGroupMobileContentProps = Pick<NavigationGroupProps, 'context' | 'slots'> &
+  Pick<NavigationGroupParameters, 'backgroundColor'> & {
+    isOpen: boolean;
+    onClose: () => void;
+  };
 
 const useHeaderHeight = () => {
   const [headerHeight, setHeaderHeight] = useState(0);
@@ -15,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);
     }
   }, []);
@@ -25,7 +27,6 @@ const useHeaderHeight = () => {
 export const NavigationGroupMobileContent: FC<NavigationGroupMobileContentProps> = ({
   isOpen,
   backgroundColor,
-  context,
   slots,
   onClose,
 }) => {
@@ -45,7 +46,7 @@ export const NavigationGroupMobileContent: FC<NavigationGroupMobileContentProps>
       </button>
 
       <div className="flex flex-col items-center gap-y-4 p-4">
-        <UniformSlot data={context} slot={slots.links} context={context} />
+        <UniformSlot slot={slots.links} />
       </div>
     </div>
   );

package/dist/content/components/canvas/NavigationGroup/{navigation-group.tsx → navigation-group-client.tsx}

@@ -1,18 +1,23 @@
 'use client';
 
-import { FC, useCallback, useState } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { FC, ReactNode, useCallback, 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 { NavigationGroupProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { NavigationGroupParameters, NavigationGroupProps } from '.';
 import { NavigationGroupDesktopContent } from './desktop';
 import { NavigationGroupMobileContent } from './mobile';
 import { getButtonClasses, getCaretClasses } from './style-utils';
 
-export const NavigationGroup: FC<NavigationGroupProps> = ({
+type NavigationGroupClientProps = NavigationGroupProps &
+  Omit<ReplaceFieldsWithAssets<NavigationGroupParameters, 'caretIcon'>, 'icon'> & {
+    icon: ReactNode | null;
+  };
+
+const NavigationGroupClient: FC<NavigationGroupClientProps> = ({
   icon,
   caretIcon,
   backgroundColor,
@@ -31,39 +36,35 @@ export const NavigationGroup: FC<NavigationGroupProps> = ({
   slots,
   hoverEffect = '',
   className,
+  parameters,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const openFlyout = useCallback(() => setIsOpen(true), []);
   const closeFlyout = useCallback(() => setIsOpen(false), []);
 
-  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} onClick={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
@@ -86,3 +87,5 @@ export const NavigationGroup: FC<NavigationGroupProps> = ({
     </div>
   );
 };
+
+export default withFlattenParameters(NavigationGroupClient);

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

@@ -1,9 +1,7 @@
 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 { NavigationLink } from './navigation-link';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 export type NavigationLinkParameters = TextParameters & {
   icon?: AssetParamValue;
@@ -15,4 +13,4 @@ export type NavigationLinkParameters = TextParameters & {
 
 export type NavigationLinkProps = ComponentProps<NavigationLinkParameters>;
 
-export default NavigationLink;
+export { default } from './navigation-link';