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

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,
-  '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 WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({
@@ -21,11 +21,9 @@ export const WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <Container className="pb-10 lg:pb-0">
       <div className="mx-auto flex max-w-2xl flex-col items-center gap-10 lg:max-w-none lg:flex-row">
         <div className="-mt-7 aspect-[2/1] w-full shrink-0 overflow-hidden rounded-xl lg:-my-7 lg:aspect-[1/1.4] lg:max-w-xs">

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,11 +1,8 @@
 import { AssetParamValue } from '@uniformdev/assets';
-import { LinkParamValue } from '@uniformdev/canvas';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { ViewPort } from '@/types/cskTypes';
+import { ComponentProps, ViewPort } from '@/types/cskTypes';
 
 export type VideoParameters = {
   video?: AssetParamValue;
-  url?: LinkParamValue; // Deprecated. Please use video parameter instead of url
   placeholderImage?: AssetParamValue;
   autoPlay?: boolean;
   lazyLoad?: boolean;
@@ -19,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,13 +2,13 @@
 
 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,
-  url, // Deprecated. Please use video parameter instead of url
   placeholderImage,
   autoPlay,
   lazyLoad,
@@ -21,10 +21,10 @@ 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 || (url?.type === 'url' ? url.path : undefined);
+  const resolvedVideoUrl = resolvedVideo?.url;
 
   if (!resolvedVideoUrl) {
     return <VideoPlaceholder component={component} context={context} />;
@@ -38,3 +38,5 @@ export const Video: FC<VideoProps> = ({
     />
   );
 };
+
+export default withFlattenParameters(Video);

package/dist/content/components/ui/Accordion/accordion.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import Container from '@/components/ui/Container';
+import { cn } from '@/utils/styling';
+import { AccordionProps } from '.';
+
+export const Accordion: FC<AccordionProps> = ({
+  accordionContent,
+  accordionItems,
+  backgroundColor,
+  spacing,
+  border,
+  fluidContent,
+  height,
+  className,
+}) => (
+  <Container
+    className={cn('flex flex-col gap-8', className)}
+    {...{ backgroundColor, spacing, border, fluidContent, height }}
+  >
+    {accordionContent && <div className="flex flex-col gap-4 text-start">{accordionContent}</div>}
+    {accordionItems}
+  </Container>
+);

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ContainerProps } from '@/components/ui/Container';
+
+export type AccordionProps = ContainerProps & {
+  accordionContent?: ReactNode;
+  accordionItems: ReactNode;
+};
+
+export { Accordion as default } from './accordion';

package/dist/content/components/ui/AccordionItem/accordion-item.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { FC, useCallback, useState } from 'react';
+import Container from '@/components/ui/Container';
+import { cn } from '@/utils/styling';
+import { AccordionItemProps } from '.';
+import { IconArrowDown } from './icon-arrow-down';
+import { IconArrowUp } from './icon-arrow-up';
+
+export const AccordionItem: FC<AccordionItemProps> = ({
+  text,
+  backgroundColor,
+  spacing,
+  className,
+  accordionItemContent,
+}) => {
+  const [isOpened, setOpened] = useState(false);
+  const toggleOpenAccordion = useCallback(() => setOpened(isOpened => !isOpened), []);
+
+  return (
+    <Container {...{ fluidContent: true }}>
+      <Container {...{ backgroundColor, spacing, fluidContent: true, className }}>
+        <button
+          onClick={toggleOpenAccordion}
+          className="flex w-full cursor-pointer flex-row items-center justify-between text-start"
+        >
+          {text}
+          <div
+            className={cn({
+              [`text-${backgroundColor} invert`]: !!backgroundColor,
+              'text-black dark:text-white': !backgroundColor,
+            })}
+          >
+            {isOpened ? <IconArrowDown /> : <IconArrowUp />}
+          </div>
+        </button>
+      </Container>
+      {isOpened && accordionItemContent}
+    </Container>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { ContainerProps } from '@/components/ui/Container';
+
+export type AccordionItemParameters = Pick<ContainerProps, 'backgroundColor' | 'spacing' | 'border'> & {
+  text: ReactElement;
+  accordionItemContent: ReactNode;
+};
+
+export type AccordionItemAdditionalProps = {
+  className?: string;
+};
+
+export type AccordionItemProps = AccordionItemParameters & AccordionItemAdditionalProps;
+
+export default dynamic(() => import('./accordion-item').then(mod => mod.AccordionItem));

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/Button/index.ts

@@ -1,13 +1,10 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { ViewPort } from '@/types/cskTypes';
 
 export enum ButtonVariant {
   Link = 'link',
 }
 
-type TextSize = keyof DefaultTheme['fontSize'];
-
 export type ButtonProps = PropsWithChildren<{
   variant?: ButtonVariant;
   href?: string;
@@ -15,8 +12,8 @@ export type ButtonProps = PropsWithChildren<{
   size?: string;
   className?: string;
   textColor?: string;
-  textSize?: TextSize | ViewPort<TextSize>;
-  textWeight?: keyof DefaultTheme['fontWeight'];
+  textSize?: string | ViewPort<string>;
+  textWeight?: string;
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;

package/dist/content/components/ui/Carousel/carousel.tsx

@@ -11,7 +11,7 @@ export const Carousel: FC<CarouselProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
+  height,
   itemsPerPage = '1',
   children,
   gapX,
@@ -116,7 +116,7 @@ export const Carousel: FC<CarouselProps> = ({
     });
 
   return (
-    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, fullHeight }}>
+    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
       <div
         className={cn('relative', {
           [resolveViewPort(gapX, '-mx-{value}')]: gapX,

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

@@ -1,13 +1,13 @@
-import { ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import dynamic from 'next/dynamic';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
 export type CarouselProps = Pick<
   BaseContainerProps,
-  'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight'
+  '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/Container/container.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { cn, formatSpaceParameterValue, resolveViewPort } from '@/utils/styling';
 import { ContainerProps } from '.';
-import { getHeightValue } from './utils';
 
 export const Container: FC<ContainerProps> = ({
   className,
@@ -12,8 +11,6 @@ export const Container: FC<ContainerProps> = ({
   spacing,
   border = '',
   fluidContent = false,
-  fullHeight = false,
-  fitHeight = false,
   height,
   maxWidth,
   ...rest
@@ -23,8 +20,6 @@ export const Container: FC<ContainerProps> = ({
     { marginTop, marginBottom, marginRight, marginLeft, paddingTop, paddingBottom, paddingRight, paddingLeft },
   ] = formatSpaceParameterValue(spacing);
 
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
   return (
     <div
       className={cn(
@@ -34,7 +29,7 @@ export const Container: FC<ContainerProps> = ({
           'mx-auto w-full': !fluidContent,
           'max-w-7xl max-w-container-width': !maxWidth && !fluidContent,
           [`max-w-${maxWidth}`]: !!maxWidth && !fluidContent,
-          [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
+          [resolveViewPort(height, 'h-{value}')]: height,
         },
         wrapperClassName
       )}
@@ -52,7 +47,7 @@ export const Container: FC<ContainerProps> = ({
             [resolveViewPort(paddingRight, 'pr-{value}')]: paddingRight,
             [resolveViewPort(paddingLeft, 'pl-{value}')]: paddingLeft,
             [resolveViewPort(border, '{value}')]: border,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
+            [resolveViewPort(height, 'h-{value}')]: height,
           },
           className
         )}

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

@@ -6,15 +6,9 @@ export type ContainerProps = HTMLAttributes<HTMLDivElement> & {
   spacing?: SpaceType | ViewPort<SpaceType>;
   border?: string | ViewPort<string>;
   fluidContent?: boolean;
-  /** @deprecated Use height prop instead */
-  fullHeight?: boolean;
-  /** @deprecated Use height prop instead */
-  fitHeight?: boolean;
   height?: string | ViewPort<string>;
   wrapperClassName?: string;
   maxWidth?: string;
 };
 
-export { getHeightValue } from './utils';
-
 export { Container as default } from './container';

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import BaseContainer, { getHeightValue } from '@/components/ui/Container';
+import BaseContainer from '@/components/ui/Container';
 import { cn, resolveViewPort } from '@/utils/styling';
 import { FlexProps } from '.';
 
@@ -14,32 +14,26 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   children,
-}) => {
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
-  return (
-    <BaseContainer
-      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height, wrapperClassName }}
+  wrap,
+}) => (
+  <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height, wrapperClassName }}>
+    <div
+      className={cn(
+        'flex',
+        {
+          [resolveViewPort(direction, 'flex-{value}')]: direction,
+          [resolveViewPort(justifyContent, 'justify-{value}')]: justifyContent,
+          [resolveViewPort(gap, 'gap-{value}')]: gap,
+          [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
+          [resolveViewPort(height, 'h-{value}')]: height,
+          [resolveViewPort(wrap, 'flex-{value}')]: wrap,
+        },
+        className
+      )}
     >
-      <div
-        className={cn(
-          'flex',
-          {
-            [resolveViewPort(direction, 'flex-{value}')]: direction,
-            [resolveViewPort(justifyContent, 'justify-{value}')]: justifyContent,
-            [resolveViewPort(gap, 'gap-{value}')]: gap,
-            [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </BaseContainer>
-  );
-};
+      {children}
+    </div>
+  </BaseContainer>
+);

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

@@ -1,11 +1,10 @@
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 import { ViewPort } from '@/types/cskTypes';
 
 type Direction = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type Justify = 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
-type FlexGap = keyof DefaultTheme['spacing'];
 type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type FlexProps = Pick<
   BaseContainerProps,
@@ -16,15 +15,14 @@ export type FlexProps = Pick<
   | 'spacing'
   | 'border'
   | 'fluidContent'
-  | 'fullHeight'
-  | 'fitHeight'
   | 'height'
   | 'children'
 > & {
   direction?: Direction | ViewPort<Direction>;
   justifyContent?: Justify | ViewPort<Justify>;
-  gap?: FlexGap | ViewPort<FlexGap>;
+  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, 'fullHeight' | 'content'> & {
-  logo?: React.ReactNode;
-  copyright?: React.ReactNode;
-  content?: React.ReactNode;
+export type FooterProps = Omit<BaseContainerProps, 'height' | 'content'> & {
+  logo?: ReactNode;
+  copyright?: ReactNode;
+  content?: ReactNode;
 };
 
 export { Footer as default } from './footer';