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

package/dist/content/components/canvas/SimpleHeader/simple-header.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import BaseHeader from '@/components/ui/Header';
+import BaseIconLabel from '@/components/ui/IconLabel';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { cn, resolveViewPort } from '@/utils/styling';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SimpleHeaderParameters, SimpleHeaderProps, SimpleHeaderVariants } from '.';
+
+const SimpleHeader: FC<SimpleHeaderProps & ReplaceFieldsWithAssets<SimpleHeaderParameters, 'logo'>> = ({
+  variant,
+  logo,
+  links,
+  backgroundColor,
+  textColor,
+  hoverTextColor,
+}) => {
+  return (
+    <BaseHeader
+      sticky={variant === SimpleHeaderVariants.Sticky}
+      leftSection={
+        logo?.[0]?.url && (
+          <Link href="/">
+            <Image src={logo?.[0]?.url} alt="Logo" width={50} height={40} />
+          </Link>
+        )
+      }
+      backgroundColor={backgroundColor}
+      color="general-color-1"
+      spacing={{
+        paddingTop: 'container-small',
+        paddingBottom: 'container-small',
+      }}
+      border="none"
+    >
+      {links?.map(link => (
+        <Link href={link.link?.path || ''} key={link.title}>
+          <BaseIconLabel
+            className="group"
+            size="base"
+            tag="span"
+            color={textColor}
+            weight="normal"
+            font="sans"
+            letterSpacing="normal"
+            alignment="left"
+          >
+            <span
+              className={cn({
+                [resolveViewPort(hoverTextColor, 'group-hover:text-{value}')]: !!hoverTextColor,
+              })}
+            >
+              {link.title}
+            </span>
+          </BaseIconLabel>
+        </Link>
+      ))}
+    </BaseHeader>
+  );
+};
+
+export default withFlattenParameters(SimpleHeader);

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type SpacerParameters = {
   size?: string;
@@ -9,4 +9,4 @@ export enum SpacerVariants {
 
 export type SpacerProps = ComponentProps<SpacerParameters>;
 
-export { Spacer as default } from './spacer';
+export { default } from './spacer';

package/dist/content/components/canvas/Spacer/spacer.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { cn } from '@/utils/styling';
-import { SpacerProps, SpacerVariants } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SpacerParameters, SpacerProps, SpacerVariants } from '.';
 
-export const Spacer: FC<SpacerProps> = ({ size, component: { variant } }) => {
+export const Spacer: FC<SpacerProps & SpacerParameters> = ({ size, variant }) => {
   const isHorizontal = variant === SpacerVariants.Horizontal;
 
   return (
@@ -14,3 +15,5 @@ export const Spacer: FC<SpacerProps> = ({ size, component: { variant } }) => {
     />
   );
 };
+
+export default withFlattenParameters(Spacer);

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

@@ -1,5 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { Tab } from './tab';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TabParameters = { title?: string };
 
@@ -9,4 +8,4 @@ export enum TabSlots {
 
 export type TabProps = ComponentProps<TabParameters, TabSlots>;
 
-export default Tab;
+export { default } from './tab';

package/dist/content/components/canvas/Tab/tab.tsx

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { TabProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TabParameters, TabProps } from '.';
 
-export const Tab: FC<TabProps> = ({ slots, component, context }) => (
-  <UniformSlot data={component} context={context} slot={slots.tabContent} />
-);
+const Tab: FC<TabProps & TabParameters> = ({ slots }) => <UniformSlot slot={slots.tabContent} />;
+
+export default withFlattenParameters(Tab);

package/dist/content/components/canvas/Table/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 type TableParameters = ContainerParameters & {
   size?: string;
@@ -13,5 +13,5 @@ export enum TableSlots {
 
 export type TableProps = ComponentProps<TableParameters, TableSlots>;
 
-export { Table as default } from './table';
+export { default } from './table';
 export { TableEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Table/table.tsx

@@ -1,36 +1,32 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import Container from '@/components/ui/Container';
-import { TableProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableParameters, TableProps } from '.';
 import { getTableClasses } from './style-utils';
 
-export const Table: FC<TableProps> = ({
+const Table: FC<TableProps & TableParameters> = ({
   size,
   textColor,
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container
-    className="flex flex-col gap-5"
-    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
-  >
+  <Container className="flex flex-col gap-5" {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="overflow-x-auto">
       <table className={getTableClasses({ size, textColor })}>
         <thead>
-          <UniformSlot slot={slots.tableHead} context={context} data={component} />
+          <UniformSlot slot={slots.tableHead} />
         </thead>
         <tbody>
-          <UniformSlot slot={slots.tableBody} context={context} data={component} />
+          <UniformSlot slot={slots.tableBody} />
         </tbody>
       </table>
     </div>
   </Container>
 );
+
+export default withFlattenParameters(Table);

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export const AlignmentMap = {
   left: 'ml-0',
@@ -16,4 +16,4 @@ export enum TableCustomCellSlots {
 
 export type TableCustomCellProps = ComponentProps<TableCustomCellParameters, TableCustomCellSlots>;
 
-export { TableCustomCell as default } from './table-custom-cell';
+export { default } from './table-custom-cell';

package/dist/content/components/canvas/TableCustomCell/table-custom-cell.tsx

@@ -1,12 +1,15 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { cn } from '@/utils/styling';
-import { AlignmentMap, TableCustomCellProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { AlignmentMap, TableCustomCellParameters, TableCustomCellProps } from '.';
 
-export const TableCustomCell: FC<TableCustomCellProps> = ({ component, context, slots, alignment }) => (
+const TableCustomCell: FC<TableCustomCellProps & TableCustomCellParameters> = ({ slots, alignment }) => (
   <td>
     <div className={cn('w-fit', AlignmentMap[alignment || 'left'])}>
-      <UniformSlot slot={slots.tableCustomCellContent} context={context} data={component} />
+      <UniformSlot slot={slots.tableCustomCellContent} />
     </div>
   </td>
 );
+
+export default withFlattenParameters(TableCustomCell);

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

@@ -1,7 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TableDataCellParameters = { value?: string };
 
 export type TableDataCellProps = ComponentProps<TableDataCellParameters>;
 
-export { TableDataCell as default } from './table-data-cell';
+export { default } from './table-data-cell';

package/dist/content/components/canvas/TableDataCell/table-data-cell.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { TableDataCellProps } from '.';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableDataCellParameters, TableDataCellProps } from '.';
 
-export const TableDataCell: FC<TableDataCellProps> = ({ component, context }) => (
+const TableDataCell: FC<TableDataCellProps & TableDataCellParameters> = ({ parameters, component }) => (
   <td>
-    <UniformText component={component} context={context} parameterId="value" placeholder="Value" />
+    <UniformText component={component} parameter={parameters.value as ComponentParameter<string>} placeholder="Value" />
   </td>
 );
+
+export default withFlattenParameters(TableDataCell);

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

@@ -1,7 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TableHeaderCellParameters = { value?: string };
 
 export type TableHeaderCellProps = ComponentProps<TableHeaderCellParameters>;
 
-export { TableHeaderCell as default } from './table-header-cell';
+export { default } from './table-header-cell';

package/dist/content/components/canvas/TableHeaderCell/table-header-cell.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { TableHeaderCellProps } from '.';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableHeaderCellParameters, TableHeaderCellProps } from '.';
 
-export const TableHeaderCell: FC<TableHeaderCellProps> = ({ component, context }) => (
+const TableHeaderCell: FC<TableHeaderCellProps & TableHeaderCellParameters> = ({ parameters, component }) => (
   <th>
-    <UniformText component={component} context={context} parameterId="value" placeholder="Value" />
+    <UniformText component={component} parameter={parameters.value as ComponentParameter<string>} placeholder="Value" />
   </th>
 );
+
+export default withFlattenParameters(TableHeaderCell);

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

@@ -1,5 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
-export type TableRowProps = ComponentProps;
+export type TableRowParameters = unknown;
 
-export { TableRow as default } from './table-row';
+export type TableRowProps = ComponentProps<TableRowParameters>;
+
+export { default } from './table-row';

package/dist/content/components/canvas/TableRow/table-row.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
 import { TableRowProps } from '.';
 
-export const TableRow: FC<TableRowProps> = ({ slots, component, context }) => (
+const TableRow: FC<TableRowProps> = ({ slots }) => (
   <tr>
-    <UniformSlot data={component} context={context} slot={slots.tableRowCells} />
+    <UniformSlot slot={slots.tableRowCells} />
   </tr>
 );
+
+export default withFlattenParameters(TableRow);

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

@@ -1,21 +1,21 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { withSlotsDataValue } from '@/utils/withSlotsDataValue';
 
 export type TabsParameters = ContainerParameters & {
   color?: string;
 };
 
-export enum TabsVariants {
-  Default = 'default',
-  Bordered = 'bordered',
-}
-
 export enum TabsSlots {
   TabItems = 'tabItems',
 }
 
 export type TabsProps = ComponentProps<TabsParameters, TabsSlots>;
 
-export default dynamic(() => import('./tabs').then(mod => mod.Tabs));
+export { TabsVariants } from './style-utils';
+export default dynamic(() =>
+  import('./tabs').then(mod => withSlotsDataValue(withFlattenParameters(mod.Tabs), [TabsSlots.TabItems]))
+);
 export { TabsEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Tabs/style-utils.ts

@@ -1,9 +1,13 @@
 import { cn } from '@/utils/styling';
-import { TabsParameters, TabsVariants } from '.';
+import { TabsParameters } from '.';
+
+export enum TabsVariants {
+  Bordered = 'bordered',
+}
 
 type ButtonContainerClassesProps = {
   color: TabsParameters['color'];
-  variant: TabsVariants;
+  variant?: string;
 };
 export const getButtonContainerClasses = ({ color, variant }: ButtonContainerClassesProps) =>
   cn('flex flex-row overflow-x-auto ', {
@@ -12,17 +16,14 @@ export const getButtonContainerClasses = ({ color, variant }: ButtonContainerCla
 
 type ButtonClassesProps = {
   color: TabsParameters['color'];
-  variant: TabsVariants;
-  tabItem: {
-    id: string;
-  };
-  activeTabId: string;
+  variant?: string;
+  isActiveTab?: boolean;
 };
-export const getButtonClasses = ({ color, variant, tabItem, activeTabId }: ButtonClassesProps) =>
+export const getButtonClasses = ({ color, variant, isActiveTab = false }: ButtonClassesProps) =>
   cn('text-lg shrink-0 font-medium px-5 py-3', {
     [`text-${color}`]: color,
-    [`border-${color}`]: tabItem.id === activeTabId && variant === TabsVariants.Bordered,
+    [`border-${color}`]: isActiveTab && variant === TabsVariants.Bordered,
     'border-b-2': variant === TabsVariants.Bordered,
-    'opacity-60 hover:opacity-100': tabItem.id !== activeTabId,
-    'border-transparent': tabItem.id !== activeTabId && variant === TabsVariants.Bordered,
+    'opacity-60 hover:opacity-100': !isActiveTab,
+    'border-transparent': !isActiveTab && variant === TabsVariants.Bordered,
   });

package/dist/content/components/canvas/Tabs/tabs.tsx

@@ -1,81 +1,78 @@
 'use client';
 
-import { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { flattenValues } from '@uniformdev/canvas';
-import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { FC, Fragment, useCallback, useState, MouseEvent, FocusEvent } from 'react';
+import { ComponentInstance, flattenValues } from '@uniformdev/canvas';
+import { UniformSlot, UniformText, ComponentParameter } from '@uniformdev/next-app-router/component';
 import Container from '@/components/ui/Container';
-import { TabsProps, TabsVariants } from '.';
+import { TabsParameters, TabsProps } from '.';
 import { getButtonClasses, getButtonContainerClasses } from './style-utils';
 
-export const Tabs: FC<TabsProps> = ({
+const TAB_ITEM_TEXT_PARAMETER_ID = 'text';
+const TAB_ITEM_TEXT_PARAMETER_TYPE = 'text';
+
+export const Tabs: FC<TabsProps & TabsParameters & { slotData?: Record<string, ComponentInstance[]> }> = ({
   slots,
   color,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
+  variant,
+  slotData,
+  context,
 }) => {
-  const variant = (component.variant || TabsVariants.Default) as TabsVariants;
-  const [activeTabId, setActiveTabId] = useState(component?.slots?.tabItems?.[0]?._id as string);
+  const tabItems = slotData?.tabItems?.map(tabComponent => ({
+    ...(flattenValues(tabComponent) as { text?: string }),
+    id: (tabComponent?._id as string) || '',
+  }));
 
-  const tabItems = useMemo(() => {
-    if (!component?.slots?.tabItems) return [];
-    return component.slots.tabItems.map(tabComponent => ({
-      ...(flattenValues(tabComponent) as { title?: string }),
-      id: tabComponent._id as string,
-    }));
-  }, [component?.slots?.tabItems]);
+  const [activeTabId, setActiveTabId] = useState(tabItems?.[0]?.id || '');
 
-  useEffect(() => {
-    if (!tabItems.length) return;
-    if (!activeTabId) setActiveTabId(tabItems[0]?.id || '');
-  }, [tabItems, activeTabId]);
+  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const tabId = (event.target as HTMLButtonElement).id;
+    setActiveTabId(tabId);
+  }, []);
 
   const handleContextualEditingTabClick = useCallback(
-    (tabId: string) => {
+    (event: FocusEvent<HTMLButtonElement>) => {
+      const tabId = event.target.id;
       if (!context.isContextualEditing) return;
-
       setActiveTabId(tabId);
     },
     [context.isContextualEditing]
   );
 
   return (
-    <Container
-      className="flex flex-col gap-5"
-      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
-    >
+    <Container className="flex flex-col gap-5" {...{ backgroundColor, spacing, border, fluidContent, height }}>
       <div className={getButtonContainerClasses({ color, variant })}>
-        {tabItems.map((tabItem, index) => (
+        {tabItems?.map(({ id: currentTabId, [TAB_ITEM_TEXT_PARAMETER_ID]: currentTabText }) => (
           <button
-            key={tabItem.id}
-            onClick={() => setActiveTabId(tabItem.id)}
-            className={getButtonClasses({ color, variant, tabItem, activeTabId })}
+            id={currentTabId}
+            key={currentTabId}
+            onClick={handleTabClick}
+            className={getButtonClasses({ color, variant, isActiveTab: currentTabId === activeTabId })}
           >
-            {component?.slots?.tabItems?.[index] && (
-              <UniformText
-                onFocus={() => handleContextualEditingTabClick(tabItem.id)}
-                context={context}
-                parameterId="text"
-                component={component?.slots?.tabItems[index]}
-                placeholder="Tab title"
-              />
-            )}
+            <UniformText
+              id={currentTabId}
+              placeholder="Text goes here"
+              onFocus={handleContextualEditingTabClick}
+              parameter={
+                {
+                  parameterId: TAB_ITEM_TEXT_PARAMETER_ID,
+                  type: TAB_ITEM_TEXT_PARAMETER_TYPE,
+                  value: currentTabText,
+                  _contextualEditing: { isEditable: true },
+                } as ComponentParameter<string>
+              }
+              component={{ _id: currentTabId }}
+            />
           </button>
         ))}
       </div>
-      <UniformSlot data={component} context={context} slot={slots.tabItems}>
-        {({ child, component: { _id: currentComponentId } }) =>
-          currentComponentId === activeTabId ? (
-            <Fragment key={currentComponentId}>{child}</Fragment>
-          ) : (
-            <Fragment key={currentComponentId} />
-          )
+      <UniformSlot slot={slots.tabItems}>
+        {({ child, _id: currentComponentId, key }) =>
+          currentComponentId === activeTabId ? <Fragment key={key}>{child}</Fragment> : <Fragment key={key} />
         }
       </UniformSlot>
     </Container>

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

@@ -1,15 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
-import { TestimonialProps } from '.';
+import { TestimonialParameters } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
-  TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
+  TestimonialParameters,
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
-  testimonialPrimaryImage: React.ReactNode;
-  testimonialContent: React.ReactNode;
-  testimonialAuthor: React.ReactNode;
-  testimonialSecondaryImage: React.ReactNode;
+  testimonialPrimaryImage: ReactNode;
+  testimonialContent: ReactNode;
+  testimonialAuthor: ReactNode;
+  testimonialSecondaryImage: ReactNode;
 };
 
 export const DefaultVariant: FC<WithLargeAvatarVariantProps> = ({
@@ -21,11 +21,9 @@ export const DefaultVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="mx-auto flex flex-col items-center md:max-w-[80%]">
       <div>{testimonialSecondaryImage}</div>
       <div className="my-8">{testimonialContent}</div>

package/dist/content/components/canvas/Testimonial/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 TestimonialVariants {
   WithLargeAvatar = 'withLargeAvatar',
@@ -17,5 +17,5 @@ export enum TestimonialSlots {
 
 export type TestimonialProps = ComponentProps<TestimonialParameters, TestimonialSlots>;
 
-export { Testimonial as default } from './testimonial';
+export { default } from './testimonial';
 export { TestimonialEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Testimonial/testimonial.tsx

@@ -1,38 +1,30 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { TestimonialVariants, TestimonialProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TestimonialVariants, TestimonialProps, TestimonialParameters } from '.';
 import { DefaultVariant } from './default-variant';
 import { WithLargeAvatarVariant } from './with-large-avatar-variant';
 import { WithOverlappingImageVariant } from './with-overlapping-image-variant';
 
-export const Testimonial: FC<TestimonialProps> = ({
-  context,
-  component,
+const Testimonial: FC<TestimonialProps & TestimonialParameters> = ({
   slots,
   backgroundColor,
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
+  variant,
 }) => {
-  const variant = component.variant as TestimonialVariants | undefined;
-
   const variantProps = {
     backgroundColor,
     spacing,
     border,
     fluidContent,
-    fullHeight,
-    fitHeight,
     height,
-    testimonialPrimaryImage: <UniformSlot context={context} data={component} slot={slots.testimonialPrimaryImage} />,
-    testimonialContent: <UniformSlot context={context} data={component} slot={slots.testimonialContent} />,
-    testimonialAuthor: <UniformSlot context={context} data={component} slot={slots.testimonialAuthor} />,
-    testimonialSecondaryImage: (
-      <UniformSlot context={context} data={component} slot={slots.testimonialSecondaryImage} />
-    ),
+    testimonialPrimaryImage: <UniformSlot slot={slots.testimonialPrimaryImage} />,
+    testimonialContent: <UniformSlot slot={slots.testimonialContent} />,
+    testimonialAuthor: <UniformSlot slot={slots.testimonialAuthor} />,
+    testimonialSecondaryImage: <UniformSlot slot={slots.testimonialSecondaryImage} />,
   };
 
   switch (variant) {
@@ -46,3 +38,5 @@ export const Testimonial: FC<TestimonialProps> = ({
       return <DefaultVariant {...variantProps} />;
   }
 };
+
+export default withFlattenParameters(Testimonial);

package/dist/content/components/canvas/Testimonial/with-large-avatar-variant.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
-import { TestimonialProps } from '.';
+import { TestimonialParameters } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
-  TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
+  TestimonialParameters,
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
-  testimonialPrimaryImage: React.ReactNode;
-  testimonialContent: React.ReactNode;
-  testimonialAuthor: React.ReactNode;
-  testimonialSecondaryImage: React.ReactNode;
+  testimonialPrimaryImage: ReactNode;
+  testimonialContent: ReactNode;
+  testimonialAuthor: ReactNode;
+  testimonialSecondaryImage: ReactNode;
 };
 
 export const WithLargeAvatarVariant: FC<WithLargeAvatarVariantProps> = ({
@@ -21,11 +21,9 @@ export const WithLargeAvatarVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="mx-auto flex items-center gap-x-10 md:max-w-[80%]">
       <div className="hidden aspect-square w-full max-w-xs shrink-0 overflow-hidden rounded-xl lg:block">
         {testimonialPrimaryImage}