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

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,34 +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,
   height,
+  variant,
 }) => {
-  const variant = component.variant as TestimonialVariants | undefined;
-
   const variantProps = {
     backgroundColor,
     spacing,
     border,
     fluidContent,
     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) {
@@ -42,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,
+  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> = ({

package/dist/content/components/canvas/Testimonial/with-overlapping-image-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,
+  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 WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({

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

@@ -1,8 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 import { TextParameters } from './parameters';
-import { Text } from './text';
 
 export type TextProps = ComponentProps<TextParameters>;
 
 export { type TextParameters } from './parameters';
-export default Text;
+export { default } from './text';

package/dist/content/components/canvas/Text/text.tsx

@@ -1,9 +1,10 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { UniformText, ComponentParameter } from '@uniformdev/next-app-router/component';
 import BaseText from '@/components/ui/Text';
-import { TextProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TextParameters, TextProps } from '.';
 
-export const Text: FC<TextProps> = ({
+const Text: FC<TextProps & TextParameters> = ({
   tag,
   size,
   color,
@@ -15,15 +16,20 @@ export const Text: FC<TextProps> = ({
   lineCountRestrictions,
   alignment,
   component,
-  context,
-}) => (
-  <BaseText {...{ color, size, font, weight, transform, decoration, letterSpacing, alignment, lineCountRestrictions }}>
-    <UniformText
-      placeholder="Text goes here"
-      parameterId="text"
-      as={tag || undefined}
-      component={component}
-      context={context}
-    />
-  </BaseText>
-);
+  parameters,
+}) => {
+  return (
+    <BaseText
+      {...{ color, size, font, weight, transform, decoration, letterSpacing, alignment, lineCountRestrictions }}
+    >
+      <UniformText
+        placeholder="Text goes here"
+        parameter={parameters.text as ComponentParameter<string>}
+        as={tag || undefined}
+        component={component}
+      />
+    </BaseText>
+  );
+};
+
+export default withFlattenParameters(Text);

package/dist/content/components/canvas/ThemeSwitcher/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 type ThemeSwitcherParameters = {
   iconColor?: string;
@@ -7,4 +7,4 @@ export type ThemeSwitcherParameters = {
 
 export type ThemeSwitcherProps = ComponentProps<ThemeSwitcherParameters>;
 
-export default dynamic(() => import('./theme-switcher').then(mod => mod.ThemeSwitcher));
+export default dynamic(() => import('./theme-switcher').then(mod => mod.default));

package/dist/content/components/canvas/ThemeSwitcher/theme-switcher.tsx

@@ -2,14 +2,15 @@
 
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
-import { useUniformContext } from '@uniformdev/canvas-next-rsc/component';
-import { ThemeSwitcherProps } from '.';
+import { useUniformContext } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ThemeSwitcherParameters, ThemeSwitcherProps } from '.';
 
 const BaseThemeSwitcher = dynamic(() => import('@/components/ui/ThemeSwitcher').then(mod => mod.default), {
   ssr: false,
 });
 
-export const ThemeSwitcher: FC<ThemeSwitcherProps> = ({ iconColor }) => {
+export const ThemeSwitcher: FC<ThemeSwitcherProps & ThemeSwitcherParameters> = ({ iconColor }) => {
   const { context } = useUniformContext();
 
   const onChangeTheme = (theme: string) => {
@@ -22,3 +23,5 @@ export const ThemeSwitcher: FC<ThemeSwitcherProps> = ({ iconColor }) => {
 
   return <BaseThemeSwitcher iconColor={iconColor} onChange={onChangeTheme} />;
 };
+
+export default withFlattenParameters(ThemeSwitcher);

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

@@ -1,6 +1,5 @@
 import { AssetParamValue } from '@uniformdev/assets';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { ViewPort } from '@/types/cskTypes';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 export type VideoParameters = {
   video?: AssetParamValue;
@@ -17,4 +16,4 @@ export type VideoParameters = {
 
 export type VideoProps = ComponentProps<VideoParameters>;
 
-export { Video as default } from './video';
+export { default } from './video';

package/dist/content/components/canvas/Video/placeholder.tsx

@@ -5,7 +5,7 @@ import { VideoProps } from '.';
 type VideoPlaceholderProps = Pick<VideoProps, 'component' | 'context'>;
 
 export const VideoPlaceholder: FC<VideoPlaceholderProps> = ({ context, component }) => {
-  const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
+  const isEditorPreviewMode = context.isContextualEditing;
   const isPlaceholder = component?._id?.includes('placeholder_');
 
   if (!isEditorPreviewMode || isPlaceholder) {

package/dist/content/components/canvas/Video/video.tsx

@@ -2,11 +2,12 @@
 
 import { FC } from 'react';
 import BaseVideo from '@/components/ui/Video';
-import { resolveAsset } from '@/utils/assets';
-import { VideoProps } from '.';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { VideoParameters, VideoProps } from '.';
 import { VideoPlaceholder } from './placeholder';
 
-export const Video: FC<VideoProps> = ({
+const Video: FC<VideoProps & ReplaceFieldsWithAssets<VideoParameters, 'video' | 'placeholderImage'>> = ({
   video,
   placeholderImage,
   autoPlay,
@@ -20,8 +21,8 @@ export const Video: FC<VideoProps> = ({
   component,
   context,
 }) => {
-  const [resolvedVideo] = resolveAsset(video);
-  const [resolvedImage] = resolveAsset(placeholderImage);
+  const [resolvedVideo] = video || [];
+  const [resolvedImage] = placeholderImage || [];
 
   const resolvedVideoUrl = resolvedVideo?.url;
 
@@ -37,3 +38,5 @@ export const Video: FC<VideoProps> = ({
     />
   );
 };
+
+export default withFlattenParameters(Video);

package/dist/content/components/ui/Banner/banner.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { FC, useCallback, useState } from 'react';
+import Container from '@/components/ui/Container';
+import { cn } from '@/utils/styling';
+import { ContentAlignment, BannerProps, BannerVariants } from '.';
+import CloseButton from './close-button';
+import { getContentClasses, getPositionClasses } from './style-utils';
+
+const Banner: FC<BannerProps> = ({
+  backgroundColor,
+  spacing,
+  border,
+  fluidContent,
+  iconColor,
+  contentAlignment = ContentAlignment.Center,
+  floating = false,
+  children,
+  variant,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  if (!isOpen) return null;
+
+  const positionClasses = getPositionClasses({ variant: variant as BannerVariants, floating });
+  const contentClasses = getContentClasses({ contentAlignment, iconColor, fluidContent, floating });
+
+  return (
+    <Container className={positionClasses} fluidContent={fluidContent} border={border}>
+      <Container
+        className={cn('relative w-full', contentClasses)}
+        backgroundColor={backgroundColor}
+        spacing={spacing}
+        fluidContent={fluidContent}
+      >
+        {children}
+        {iconColor && <CloseButton onClose={handleClose} iconColor={iconColor} />}
+      </Container>
+    </Container>
+  );
+};
+
+export default Banner;

package/dist/content/components/ui/Banner/index.tsx

@@ -0,0 +1,29 @@
+import dynamic from 'next/dynamic';
+import { ContainerProps } from '@/components/ui/Container';
+
+export enum ContentAlignment {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right',
+}
+
+export enum BannerVariants {
+  None = '',
+  Top = 'top',
+  Bottom = 'bottom',
+}
+
+export type BannerProps = ContainerProps & {
+  iconColor?: string;
+  contentAlignment?: ContentAlignment;
+  floating?: boolean;
+  variant?: BannerVariants;
+};
+
+export type PositionClassesProps = {
+  variant?: BannerVariants;
+} & Pick<BannerProps, 'floating'>;
+
+export type ContentClassesProps = Pick<BannerProps, 'floating' | 'iconColor' | 'fluidContent' | 'contentAlignment'>;
+
+export default dynamic(() => import('./banner').then(mod => mod.default));

package/dist/content/components/{canvas → ui}/Banner/style-utils.ts

@@ -1,6 +1,5 @@
 import { cn } from '@/utils/styling';
-import { ContentAlignment } from '.';
-import { BannerVariants, ContentClassesProps, PositionClassesProps } from './types';
+import { BannerVariants, ContentClassesProps, PositionClassesProps, ContentAlignment } from '.';
 
 export const getPositionClasses = ({ variant, floating }: PositionClassesProps) =>
   cn({

package/dist/content/components/ui/Carousel/index.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import dynamic from 'next/dynamic';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
@@ -7,7 +7,7 @@ export type CarouselProps = Pick<
   'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
   countOfItems?: number;
-  children: (options: { className?: string; style?: React.CSSProperties }) => ReactElement;
+  children: (options: { className?: string; style?: CSSProperties }) => ReactElement;
   itemsPerPage?: string;
   gapX?: string;
   variant?: string;

package/dist/content/components/ui/ComponentEmptyPlaceholder/component-empty-placeholder.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { ComponentEmptyPlaceholderParameters, ComponentEmptyPlaceholderProps } from '.';
+
+export const ComponentEmptyPlaceholder: FC<
+  ComponentEmptyPlaceholderProps & ComponentEmptyPlaceholderParameters
+> = () => (
+  <div className="p-4 bg-white text-black rounded-md border border-black">
+    <p className="font-medium">Component not found</p>
+  </div>
+);
+
+export default withFlattenParameters(ComponentEmptyPlaceholder);

package/dist/content/components/ui/ComponentEmptyPlaceholder/index.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from '@/types/cskTypes';
+
+export type ComponentEmptyPlaceholderParameters = unknown;
+export type ComponentEmptyPlaceholderProps = ComponentProps<ComponentEmptyPlaceholderParameters>;
+
+export { ComponentEmptyPlaceholder as default } from './component-empty-placeholder';

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

@@ -16,6 +16,7 @@ export const Flex: FC<FlexProps> = ({
   fluidContent,
   height,
   children,
+  wrap,
 }) => (
   <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height, wrapperClassName }}>
     <div
@@ -27,6 +28,7 @@ export const Flex: FC<FlexProps> = ({
           [resolveViewPort(gap, 'gap-{value}')]: gap,
           [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
           [resolveViewPort(height, 'h-{value}')]: height,
+          [resolveViewPort(wrap, 'flex-{value}')]: wrap,
         },
         className
       )}

package/dist/content/components/ui/Flex/index.ts

@@ -4,6 +4,7 @@ import { ViewPort } from '@/types/cskTypes';
 type Direction = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type Justify = 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
 type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type FlexProps = Pick<
   BaseContainerProps,
@@ -21,6 +22,7 @@ export type FlexProps = Pick<
   justifyContent?: Justify | ViewPort<Justify>;
   gap?: string | ViewPort<string>;
   alignItems?: Align | ViewPort<Align>;
+  wrap?: Wrap | ViewPort<Wrap>;
 };
 
 export { Flex as default } from './flex';

package/dist/content/components/ui/FlexItem/index.ts

@@ -6,7 +6,7 @@ type AvailableShrink = '0' | '1';
 
 export type FlexItemProps = HTMLAttributes<HTMLDivElement> & {
   alignSelf?: AvailableAlignSelf | ViewPort<AvailableAlignSelf>;
-  shrink: AvailableShrink;
+  shrink?: AvailableShrink;
 };
 
 export { FlexItem as default } from './flex-item';

package/dist/content/components/ui/Footer/index.ts

@@ -1,9 +1,10 @@
+import { ReactNode } from 'react';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
 export type FooterProps = Omit<BaseContainerProps, 'height' | 'content'> & {
-  logo?: React.ReactNode;
-  copyright?: React.ReactNode;
-  content?: React.ReactNode;
+  logo?: ReactNode;
+  copyright?: ReactNode;
+  content?: ReactNode;
 };
 
 export { Footer as default } from './footer';

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

@@ -14,6 +14,7 @@ export const Grid: FC<GridProps> = ({
   fluidContent,
   height,
   children,
+  alignItems,
 }) => (
   <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div
@@ -24,6 +25,7 @@ export const Grid: FC<GridProps> = ({
           [resolveViewPort(gapX, 'gap-x-{value}')]: gapX,
           [resolveViewPort(gapY, 'gap-y-{value}')]: gapY,
           [resolveViewPort(height, 'h-{value}')]: height,
+          [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
         },
         className
       )}

package/dist/content/components/ui/Grid/index.ts

@@ -1,6 +1,8 @@
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 import { ViewPort } from '@/types/cskTypes';
 
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
 export type GridProps = Pick<
   BaseContainerProps,
   'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'children' | 'height'
@@ -8,6 +10,7 @@ export type GridProps = Pick<
   columnsCount?: string | ViewPort<string>;
   gapY?: string | ViewPort<string>;
   gapX?: string | ViewPort<string>;
+  alignItems?: Align | ViewPort<Align>;
   className?: string;
 };
 

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

@@ -2,7 +2,15 @@ import { FC } from 'react';
 import { cn, resolveViewPort } from '@/utils/styling';
 import { GridItemProps } from '.';
 
-export const GridItem: FC<GridItemProps> = ({ className, columnStart, columnSpan, rowStart, rowSpan, children }) => (
+export const GridItem: FC<GridItemProps> = ({
+  className,
+  columnStart,
+  columnSpan,
+  rowStart,
+  rowSpan,
+  children,
+  alignSelf,
+}) => (
   <div
     className={cn(
       {
@@ -10,6 +18,7 @@ export const GridItem: FC<GridItemProps> = ({ className, columnStart, columnSpan
         [resolveViewPort(columnSpan, 'col-{value}')]: columnSpan,
         [resolveViewPort(rowStart, 'row-start-{value}')]: rowStart,
         [resolveViewPort(rowSpan, 'row-{value}')]: rowSpan,
+        [resolveViewPort(alignSelf, 'self-{value}')]: alignSelf,
       },
       className
     )}

package/dist/content/components/ui/GridItem/index.ts

@@ -1,12 +1,15 @@
 import { HTMLAttributes } from 'react';
 import { ViewPort } from '@/types/cskTypes';
 
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
 export type GridItemProps = HTMLAttributes<HTMLDivElement> & {
   columnStart?: string | ViewPort<string>;
   columnSpan?: string | ViewPort<string>;
   rowStart?: string | ViewPort<string>;
   rowSpan?: string | ViewPort<string>;
   className?: string;
+  alignSelf?: Align | ViewPort<Align>;
 };
 
 export { GridItem as default } from './grid-item';

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

@@ -18,6 +18,7 @@ export const IconLabel: FC<IconLabelProps> = ({
   textClassName,
   iconClassName,
   className,
+  iconPosition,
 }) => (
   <div
     className={cn(
@@ -25,6 +26,7 @@ export const IconLabel: FC<IconLabelProps> = ({
       {
         [`text-${size}`]: !!size,
         [`text-${color}`]: !!color,
+        'flex-row-reverse': icon && iconPosition === 'right',
       },
       className
     )}

package/dist/content/components/ui/IconLabel/index.ts

@@ -17,6 +17,7 @@ export type IconLabelProps = {
   transform?: BaseTextProps['transform'];
   decoration?: BaseTextProps['decoration'];
   letterSpacing?: BaseTextProps['letterSpacing'];
+  iconPosition?: 'left' | 'right';
   lineCountRestrictions?: string;
 };
 

package/dist/content/components/ui/InlineSVG/index.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export type InlineSVGProps = {
   src: string;
   className?: string;
@@ -5,7 +7,7 @@ export type InlineSVGProps = {
   width?: number;
   height?: number;
   sanitize?: boolean;
-  fallback?: React.ReactNode;
+  fallback?: ReactNode;
   useCurrentColor?: boolean;
   alt?: string;
 };

package/dist/content/components/ui/InlineSVG/inline-svg.tsx

@@ -1,7 +1,15 @@
+/* eslint-disable react-hooks/error-boundaries */
 import { FC, SVGProps } from 'react';
 import { cn } from '@/utils/styling';
 import { InlineSVGProps } from '.';
-import { fetchSvg, sanitizeSvg, applyCurrentColor, getSvgAttributes, getSvgInnerContent } from './utils';
+import {
+  fetchSvg,
+  sanitizeSvg,
+  applyCurrentColor,
+  getSvgAttributes,
+  getSvgInnerContent,
+  convertSvgAttributesToReactProps,
+} from './utils';
 
 export const InlineSVG: FC<InlineSVGProps> = async ({
   src,
@@ -31,13 +39,16 @@ export const InlineSVG: FC<InlineSVGProps> = async ({
     const attrs = getSvgAttributes(cleaned);
     const content = getSvgInnerContent(cleaned);
 
+    const reactProps = convertSvgAttributesToReactProps(attrs);
+
     const svgProps: SVGProps<SVGSVGElement> = {
-      ...attrs,
+      ...reactProps,
       role: 'img',
       'aria-label': alt,
+      focusable: false,
       width: fill ? '100%' : width,
       height: fill ? '100%' : height,
-      className: cn(attrs.className, className, {
+      className: cn(reactProps.className, className, {
         'absolute inset-0': fill,
       }),
     };