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

package/dist/content/components/canvas/DemoHero/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 { FlexibleHeroParameters } from '.';
@@ -9,9 +9,9 @@ type DefaultVariantProps = {
   border: FlexibleHeroParameters['border'];
   fluidContent: FlexibleHeroParameters['fluidContent'];
   height: FlexibleHeroParameters['height'];
-  demoHeroMedia: React.ReactNode;
-  demoHeroContent: React.ReactNode;
-  demoHeroCTA: React.ReactNode;
+  demoHeroMedia: ReactNode;
+  demoHeroContent: ReactNode;
+  demoHeroCTA: ReactNode;
   textAlignmentClass: string;
   buttonAlignmentClass: string;
 };

package/dist/content/components/canvas/DemoHero/demo-hero.tsx

@@ -1,13 +1,34 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { DemoHeroVariants, FixedHeroProps, FlexibleHeroProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { SlotDefinition } from '@uniformdev/next-app-router-shared';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import {
+  DemoHeroVariants,
+  FixedHeroParameters,
+  FixedHeroProps,
+  FlexibleHeroParameters,
+  FlexibleHeroProps,
+  FlexibleHeroSlots,
+} from '.';
 import { BaseHeroButton, BaseHeroImage, BaseHeroText } from './atoms';
 import { ColumnsVariant } from './columns-variant';
 import { DefaultVariant } from './default-variant';
 import { getButtonAlignmentClass, getTextAlignmentClass } from './style-utils';
 import { cleanUpPrefix } from './utils';
 
-export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHero?: boolean }> = ({
+type FixedHeroComponentProps = {
+  isFlexibleHero?: false;
+  slots: Record<never, SlotDefinition>;
+} & FixedHeroProps &
+  ReplaceFieldsWithAssets<FixedHeroParameters, 'image' | 'primaryButtonIcon'>;
+
+type FlexibleHeroComponentProps = {
+  isFlexibleHero: true;
+  slots: Record<FlexibleHeroSlots, SlotDefinition>;
+} & FlexibleHeroProps &
+  ReplaceFieldsWithAssets<FlexibleHeroParameters, 'image' | 'primaryButtonIcon'>;
+
+export const DemoHero: FC<FixedHeroComponentProps | FlexibleHeroComponentProps> = ({
   // Eyebrow Text Parameters
   eyebrowTitleText,
   eyebrowTitleTag,
@@ -79,15 +100,17 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   border,
   fluidContent,
   height,
-  isFlexibleHero = false,
+  isFlexibleHero,
   component,
   context,
   slots,
+  variant,
+  parameters,
 }) => {
-  const variant = component.variant as DemoHeroVariants | undefined;
+  const isEditorPreviewMode = context.isContextualEditing;
 
   const demoHeroContent = isFlexibleHero ? (
-    <UniformSlot data={component} context={context} slot={slots.flexibleHeroContent} />
+    <UniformSlot slot={slots.flexibleHeroContent} />
   ) : (
     <>
       <BaseHeroText
@@ -107,9 +130,9 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'eyebrowTitle'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="eyebrowTitleText"
+        parameter={parameters.eyebrowTitleText}
       />
       <BaseHeroText
         {...cleanUpPrefix(
@@ -128,9 +151,9 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'title'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="titleText"
+        parameter={parameters.titleText}
       />
       <BaseHeroText
         {...cleanUpPrefix(
@@ -149,15 +172,15 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'description'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="descriptionText"
+        parameter={parameters.descriptionText}
       />
     </>
   );
 
   const demoHeroCTA = isFlexibleHero ? (
-    <UniformSlot data={component} context={context} slot={slots.flexibleHeroCta} />
+    <UniformSlot slot={slots.flexibleHeroCta} />
   ) : (
     <>
       <BaseHeroButton
@@ -181,15 +204,14 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
           },
           'primaryButton'
         )}
+        isEditorPreviewMode={isEditorPreviewMode}
         component={component}
-        context={context}
-        parameterId="primaryButtonText"
+        parameter={parameters.primaryButtonText}
       />
     </>
   );
 
   const variantProps = {
-    variant,
     backgroundColor,
     spacing,
     border,
@@ -217,7 +239,8 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
             'image'
           )}
           component={component}
-          context={context}
+          isEditorPreviewMode={isEditorPreviewMode}
+          variant={variant}
         />
       </>
     ),
@@ -228,7 +251,7 @@ export const DemoHero: FC<(FixedHeroProps | FlexibleHeroProps) & { isFlexibleHer
   switch (variant) {
     case DemoHeroVariants.Columns:
     case DemoHeroVariants.ColumnsReverse:
-      return <ColumnsVariant {...variantProps} />;
+      return <ColumnsVariant variant={variant} {...variantProps} />;
     default:
       return <DefaultVariant {...variantProps} />;
   }

package/dist/content/components/canvas/DemoHero/fixed-hero.tsx

@@ -1,9 +1,15 @@
 import { FC } from 'react';
-import { FixedHeroProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FixedHeroParameters, FixedHeroProps } from '.';
 import { DemoHero } from './demo-hero';
 import { getImageParametersFocalPoint } from './utils';
 
-export const FixedHero: FC<FixedHeroProps> = ({ textColor, overlayAutoTint, ...props }) => (
+const FixedHero: FC<FixedHeroProps & ReplaceFieldsWithAssets<FixedHeroParameters, 'image' | 'primaryButtonIcon'>> = ({
+  textColor,
+  overlayAutoTint,
+  ...props
+}) => (
   <DemoHero
     {...props}
     // Eyebrow Text Parameters
@@ -44,9 +50,9 @@ export const FixedHero: FC<FixedHeroProps> = ({ textColor, overlayAutoTint, ...p
     imagePriority
     imageObjectFit="cover"
     imageUnoptimized
-    imageContrastBaseColor={!props.component.variant && overlayAutoTint ? textColor : undefined}
+    imageContrastBaseColor={!props.variant && overlayAutoTint ? textColor : undefined}
     imageOverlayOpacity={overlayAutoTint}
-    {...getImageParametersFocalPoint(!!props.component.variant)}
+    {...getImageParametersFocalPoint(!!props.variant)}
     // Presentation Parameters
     spacing={{
       paddingTop: 'container-xlarge',
@@ -54,7 +60,8 @@ export const FixedHero: FC<FixedHeroProps> = ({ textColor, overlayAutoTint, ...p
       paddingRight: 'container-small',
       paddingBottom: 'container-xlarge',
     }}
-    fluidContent={!props.component.variant}
-    isFlexibleHero={false}
+    fluidContent={!props.variant}
   />
 );
+
+export default withFlattenParameters(FixedHero);

package/dist/content/components/canvas/DemoHero/flexible-hero.tsx

@@ -1,5 +1,11 @@
 import { FC } from 'react';
-import { FlexibleHeroProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { FlexibleHeroParameters, FlexibleHeroProps } from '.';
 import { DemoHero } from './demo-hero';
 
-export const FlexibleHero: FC<FlexibleHeroProps> = props => <DemoHero {...props} isFlexibleHero={true} />;
+export const FlexibleHero: FC<
+  FlexibleHeroProps & ReplaceFieldsWithAssets<FlexibleHeroParameters, 'image' | 'primaryButtonIcon'>
+> = props => <DemoHero {...props} isFlexibleHero={true} />;
+
+export default withFlattenParameters(FlexibleHero);

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

@@ -1,12 +1,11 @@
 import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
 import { TextParameters } from '@/components/canvas/Text/parameters';
 import { ButtonVariant, ButtonProps as BaseButtonProps } from '@/components/ui/Button';
-import { ViewPort } from '@/types/cskTypes';
-import { FixedHero } from './fixed-hero';
-import { FlexibleHero } from './flexible-hero';
+import { ViewPort, ComponentProps } from '@/types/cskTypes';
+import FixedHero from './fixed-hero';
+import FlexibleHero from './flexible-hero';
 import { PrefixedKeys } from './utils';
 
 export enum ContentAlignment {

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

@@ -1,9 +1,12 @@
 import { FC } from 'react';
 import { cn } from '@/utils/styling';
-import { DividerProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { DividerParameters, DividerProps } from '.';
 
-export const Divider: FC<DividerProps> = ({ color, thickness, width, alignment }) => (
+const Divider: FC<DividerProps & DividerParameters> = ({ color, thickness, width, alignment }) => (
   <div className={cn('flex w-full', `justify-${alignment || 'center'}`)}>
     <div className={cn({ [`bg-${color}`]: !!color })} style={{ width, height: thickness }} />
   </div>
 );
+
+export default withFlattenParameters(Divider);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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