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

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';

package/dist/content/components/canvas/NavigationLink/navigation-link.tsx

@@ -1,15 +1,16 @@
 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 InlineSVG from '@/components/ui/InlineSVG';
-import { resolveAsset } from '@/utils/assets';
-import { formatUniformLink, isExternalLink, resolveRouteToPath } from '@/utils/routing';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { formatUniformLink, isExternalLink } from '@/utils/routing';
 import { cn, resolveViewPort } from '@/utils/styling';
-import { NavigationLinkProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { NavigationLinkProps, NavigationLinkParameters } from '.';
 import { Wrapper } from './wrapper';
 
-export const NavigationLink: FC<NavigationLinkProps> = ({
+const NavigationLink: FC<NavigationLinkProps & ReplaceFieldsWithAssets<NavigationLinkParameters, 'icon'>> = ({
   icon,
   link,
   activeState,
@@ -26,11 +27,12 @@ export const NavigationLink: FC<NavigationLinkProps> = ({
   context,
   hoverEffect = '',
   className,
+  parameters,
 }) => {
   const href = formatUniformLink(link);
-  const isActive = activeState && resolveRouteToPath(context.matchedRoute, context.dynamicInputs) === href;
+  const isActive = !activeState && context.pageState.routePath === href;
 
-  const [resolvedImage] = resolveAsset(icon);
+  const [resolvedImage] = icon || [];
   const { url, title = '' } = resolvedImage || {};
 
   const renderUrl = () => {
@@ -55,12 +57,13 @@ export const NavigationLink: FC<NavigationLinkProps> = ({
       >
         <UniformText
           placeholder="Text goes here"
-          parameterId="text"
+          parameter={parameters.text as ComponentParameter<string>}
           className="whitespace-nowrap"
           component={component}
-          context={context}
         />
       </BaseIconLabel>
     </Wrapper>
   );
 };
+
+export default withFlattenParameters(NavigationLink);

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

@@ -1,9 +1,9 @@
-import { ComponentProps, CustomSlotChildRenderFunc } from '@uniformdev/canvas-next-rsc/component';
-
+import { UniformSlotProps } from '@uniformdev/next-app-router/component';
+import { ComponentProps } from '@/types/cskTypes';
 export type PageAdditionalProps = {
-  headerCustomRenderer?: CustomSlotChildRenderFunc;
-  contentCustomRenderer?: CustomSlotChildRenderFunc;
-  footerCustomRenderer?: CustomSlotChildRenderFunc;
+  headerCustomRenderer?: UniformSlotProps['children'];
+  contentCustomRenderer?: UniformSlotProps['children'];
+  footerCustomRenderer?: UniformSlotProps['children'];
 };
 
 export type PageParameters = {
@@ -17,7 +17,7 @@ export enum CommonPageSlots {
   PageFooter = 'pageFooter',
 }
 
-export type PageProps = ComponentProps<PageParameters & PageAdditionalProps, CommonPageSlots>;
+export type PageProps = ComponentProps<PageParameters, CommonPageSlots> & PageAdditionalProps;
 
-export { Page as default } from './page';
+export { default } from './page';
 export { PageEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Page/page.tsx

@@ -1,12 +1,11 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import BasePage from '@/components/ui/Page';
-import { PageProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { PageProps, PageParameters } from '.';
 
-export const Page: FC<PageProps> = ({
+const Page: FC<PageProps & PageParameters> = ({
   slots,
-  component,
-  context,
   backgroundColor,
   headerCustomRenderer,
   contentCustomRenderer,
@@ -14,19 +13,11 @@ export const Page: FC<PageProps> = ({
 }) => (
   <BasePage
     backgroundColor={backgroundColor}
-    header={
-      <UniformSlot context={context} slot={slots.pageHeader} data={component}>
-        {headerCustomRenderer}
-      </UniformSlot>
-    }
-    footer={
-      <UniformSlot context={context} slot={slots.pageFooter} data={component}>
-        {footerCustomRenderer}
-      </UniformSlot>
-    }
+    header={<UniformSlot slot={slots.pageHeader}>{headerCustomRenderer}</UniformSlot>}
+    footer={<UniformSlot slot={slots.pageFooter}>{footerCustomRenderer}</UniformSlot>}
   >
-    <UniformSlot context={context} slot={slots.pageContent} data={component}>
-      {contentCustomRenderer}
-    </UniformSlot>
+    <UniformSlot slot={slots.pageContent}>{contentCustomRenderer}</UniformSlot>
   </BasePage>
 );
+
+export default withFlattenParameters(Page);

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

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
 import Rating from '@/components/ui/Rating';
-import { ReviewProps } from '.';
+import { ReviewParameters, ReviewProps } from '.';
 
 type DefaultVariantProps = ReviewProps & {
   ReviewImage: ReactNode;
@@ -9,7 +9,7 @@ type DefaultVariantProps = ReviewProps & {
   ReviewContent: ReactNode;
 };
 
-export const DefaultVariant: FC<DefaultVariantProps> = ({
+export const DefaultVariant: FC<DefaultVariantProps & ReviewParameters> = ({
   stars,
   starsColor,
   activeStarsColor,

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

@@ -1,9 +1,12 @@
 import { ResolveEmptyPlaceholderOptions } from '@/types/cskTypes';
 import { DEFAULT_EMPTY_PLACEHOLDER } from '@/utils/createEmptyPlaceholderResolver';
-import { ReviewSlots, ReviewVariants } from '.';
+import { ReviewSlots } from '.';
+
+export const ReviewEmptyPlaceholder = ({ slotName }: ResolveEmptyPlaceholderOptions) => {
+  // To show correct empty placeholder for current variant
+  // const isMultiColumn = parentComponent?.variant === ReviewVariants.MultiColumn;
+  const isMultiColumn = true;
 
-export const ReviewEmptyPlaceholder = ({ parentComponent, slotName }: ResolveEmptyPlaceholderOptions) => {
-  const isMultiColumn = parentComponent?.variant === ReviewVariants.MultiColumn;
   switch (slotName) {
     case ReviewSlots.ReviewImage:
       return {

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

@@ -1,11 +1,11 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type ReviewParameters = ContainerParameters & {
-  stars: number;
-  starsColor: string;
-  activeStarsColor: string;
-  showRatingLabel: boolean;
+  stars?: number;
+  starsColor?: string;
+  activeStarsColor?: string;
+  showRatingLabel?: boolean;
 };
 
 export enum ReviewVariants {
@@ -20,5 +20,5 @@ export enum ReviewSlots {
 
 export type ReviewProps = ComponentProps<ReviewParameters, ReviewSlots>;
 
-export { Review as default } from './review';
+export { default } from './review';
 export { ReviewEmptyPlaceholder } from './empty-placeholder';

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

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
 import Rating from '@/components/ui/Rating';
-import { ReviewProps } from '.';
+import { ReviewParameters, ReviewProps } from '.';
 
 type MultiColumnVariantProps = ReviewProps & {
   ReviewImage: ReactNode;
@@ -9,7 +9,7 @@ type MultiColumnVariantProps = ReviewProps & {
   ReviewContent: ReactNode;
 };
 
-export const MultiColumnVariant: FC<MultiColumnVariantProps> = ({
+export const MultiColumnVariant: FC<MultiColumnVariantProps & ReviewParameters> = ({
   stars,
   starsColor,
   activeStarsColor,

package/dist/content/components/canvas/Review/review.tsx

@@ -1,24 +1,24 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { ReviewProps, ReviewVariants } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ReviewParameters, ReviewProps, ReviewVariants } from '.';
 import { DefaultVariant } from './default-variant';
 import { MultiColumnVariant } from './multi-column-variant';
 
-export const Review: FC<ReviewProps> = props => {
-  const { component, context, slots } = props;
-  const variant = component.variant as ReviewVariants | undefined;
-
+const Review: FC<ReviewProps & ReviewParameters> = ({ slots, variant, ...props }) => {
   const variantProps = {
     ...props,
-    ReviewImage: <UniformSlot context={context} data={component} slot={slots.reviewImage} />,
-    ReviewPersonInfo: <UniformSlot context={context} data={component} slot={slots.reviewPersonInfo} />,
-    ReviewContent: <UniformSlot context={context} data={component} slot={slots.reviewContent} />,
+    ReviewImage: <UniformSlot slot={slots.reviewImage} />,
+    ReviewPersonInfo: <UniformSlot slot={slots.reviewPersonInfo} />,
+    ReviewContent: <UniformSlot slot={slots.reviewContent} />,
   };
 
   switch (variant) {
     case ReviewVariants.MultiColumn:
-      return <MultiColumnVariant {...variantProps} />;
+      return <MultiColumnVariant variant={variant} slots={slots} {...variantProps} />;
     default:
-      return <DefaultVariant {...variantProps} />;
+      return <DefaultVariant variant={variant} slots={slots} {...variantProps} />;
   }
 };
+
+export default withFlattenParameters(Review);

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

@@ -1,6 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { RichTextNode } from '@uniformdev/richtext';
-import { RichText } from './rich-text';
+import { ComponentProps } from '@/types/cskTypes';
+
+type Size = 'sm' | 'base' | 'lg' | 'xl' | '2xl';
 
 export type RichTextAdditionalProps = {
   className?: string;
@@ -8,11 +9,11 @@ export type RichTextAdditionalProps = {
 
 export type RichTextParameters = {
   text?: RichTextNode;
+  size?: Size;
   color?: string;
   font?: string;
-  lineCountRestrictions: string;
+  lineCountRestrictions?: string;
 };
 
-export type RichTextProps = ComponentProps<RichTextParameters & RichTextAdditionalProps>;
-
-export default RichText;
+export { default } from './rich-text';
+export type RichTextProps = ComponentProps<RichTextParameters> & RichTextAdditionalProps;

package/dist/content/components/canvas/RichText/rich-text.tsx

@@ -1,16 +1,33 @@
 import { FC } from 'react';
-import { UniformRichText } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentParameter, UniformRichText } from '@uniformdev/next-app-router/component';
 import BaseText from '@/components/ui/Text';
-import { cn } from '@/utils/styling';
-import { RichTextProps } from '.';
+import { cn, resolveViewPort } from '@/utils/styling';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { RichTextProps, RichTextParameters, RichTextAdditionalProps } from '.';
 
-export const RichText: FC<RichTextProps> = ({ color, lineCountRestrictions, font, component, className }) => (
+const RichText: FC<RichTextProps & RichTextParameters & RichTextAdditionalProps> = ({
+  color,
+  lineCountRestrictions,
+  font,
+  size,
+  component,
+  className,
+  parameters,
+}) => (
   <BaseText lineCountRestrictions={lineCountRestrictions} color={color} font={font}>
     <UniformRichText
-      className={cn('prose max-w-full marker:text-current [&_*:not(pre)]:text-current', className)}
-      parameterId="text"
+      className={cn(
+        'prose max-w-full marker:text-current [&_*:not(pre)]:text-current',
+        {
+          [resolveViewPort(size, 'prose-{value}')]: size,
+        },
+        className
+      )}
+      parameter={parameters.text as ComponentParameter<string>}
       component={component}
       placeholder="Rich text content goes here..."
     />
   </BaseText>
 );
+
+export default withFlattenParameters(RichText);

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
 import { SectionParameters, SectionVariants } from '.';
@@ -10,9 +10,9 @@ type ColumnsVariantProps = {
   fluidContent: SectionParameters['fluidContent'];
   height: SectionParameters['height'];
   variant: SectionVariants;
-  sectionMedia: React.ReactNode;
-  sectionContent: React.ReactNode;
-  sectionCTA: React.ReactNode;
+  sectionMedia: ReactNode;
+  sectionContent: ReactNode;
+  sectionCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
 import { cn } from '@/utils/styling';
 import { SectionParameters } from '.';
@@ -9,9 +9,9 @@ type DefaultVariantProps = {
   border?: SectionParameters['border'];
   fluidContent?: SectionParameters['fluidContent'];
   height?: SectionParameters['height'];
-  sectionMedia: React.ReactNode;
-  sectionContent: React.ReactNode;
-  sectionCTA: React.ReactNode;
+  sectionMedia: ReactNode;
+  sectionContent: ReactNode;
+  sectionCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };
@@ -31,8 +31,8 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   <Container className="relative overflow-hidden" {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="absolute left-0 top-0 size-full overflow-hidden">{sectionMedia}</div>
     <Container className="relative flex flex-col gap-8">
-      <div className={cn('flex flex-col gap-4', textAlignmentClass)}>{sectionContent}</div>
-      <div className={cn('flex flex-wrap gap-2', buttonAlignmentClass)}>{sectionCTA}</div>
+      {sectionContent && <div className={cn('flex flex-col gap-4', textAlignmentClass)}>{sectionContent}</div>}
+      {sectionCTA && <div className={cn('flex flex-wrap gap-2', buttonAlignmentClass)}>{sectionCTA}</div>}
     </Container>
   </Container>
 );

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

@@ -2,8 +2,11 @@ import { ResolveEmptyPlaceholderOptions } from '@/types/cskTypes';
 import { DEFAULT_EMPTY_PLACEHOLDER } from '@/utils/createEmptyPlaceholderResolver';
 import { SectionSlots } from '.';
 
-export const SectionEmptyPlaceholder = ({ parentComponent, slotName }: ResolveEmptyPlaceholderOptions) => {
-  const isDefault = !parentComponent?.variant;
+export const SectionEmptyPlaceholder = ({ slotName }: ResolveEmptyPlaceholderOptions) => {
+  // To show correct empty placeholder for current variant
+  //const isDefault = !parentComponent?.variant;
+  const isDefault = true;
+
   switch (slotName) {
     case SectionSlots.SectionMedia:
       return {

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

@@ -1,5 +1,5 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export enum ContentAlignment {
   Left = 'left',
@@ -24,5 +24,5 @@ export enum SectionSlots {
 
 export type SectionProps = ComponentProps<SectionParameters, SectionSlots>;
 
-export { Section as default } from './section';
+export { default } from './section';
 export { SectionEmptyPlaceholder } from './empty-placeholder';

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

@@ -1,25 +1,22 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { SectionProps, SectionVariants } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SectionParameters, SectionProps, SectionVariants } from '.';
 import { ColumnsVariant } from './columns-variant';
 import { DefaultVariant } from './default-variant';
 import { getButtonAlignmentClass, getTextAlignmentClass } from './style-utils';
 
-export const Section: FC<SectionProps> = ({
+const Section: FC<SectionProps & SectionParameters> = ({
   contentAlignment,
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
   height,
+  variant,
 }) => {
-  const variant = component.variant as SectionVariants;
-
   const variantProps = {
-    variant,
     backgroundColor,
     spacing,
     border,
@@ -27,16 +24,18 @@ export const Section: FC<SectionProps> = ({
     height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),
-    sectionMedia: <UniformSlot data={component} context={context} slot={slots.sectionMedia} />,
-    sectionContent: <UniformSlot data={component} context={context} slot={slots.sectionContent} />,
-    sectionCTA: <UniformSlot data={component} context={context} slot={slots.sectionCTA} />,
+    sectionMedia: <UniformSlot slot={slots.sectionMedia} />,
+    sectionContent: slots.sectionContent ? <UniformSlot slot={slots.sectionContent} /> : undefined,
+    sectionCTA: slots.sectionCTA ? <UniformSlot slot={slots.sectionCTA} /> : undefined,
   };
 
   switch (variant) {
     case SectionVariants.Columns:
     case SectionVariants.ColumnsReverse:
-      return <ColumnsVariant {...variantProps} />;
+      return <ColumnsVariant variant={variant} {...variantProps} />;
     default:
       return <DefaultVariant {...variantProps} />;
   }
 };
+
+export default withFlattenParameters(Section);

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

@@ -0,0 +1,16 @@
+import { AssetParamValue, LinkParamValue, RichTextParamValue } from '@uniformdev/canvas';
+import { ComponentProps } from '@/types/cskTypes';
+
+export type SimpleFooterParameters = {
+  logo?: AssetParamValue;
+  copyright?: RichTextParamValue;
+  footerLinkSectionTitle?: string;
+  links?: {
+    title: string;
+    link: LinkParamValue;
+  }[];
+};
+
+export type SimpleFooterProps = ComponentProps<SimpleFooterParameters>;
+
+export { default } from './simple-footer';