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

package/dist/content/components/canvas/Modal/modal.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useCallback, useState, MouseEvent, useRef, useEffect } from 'react';
 import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import BaseModal from '@/components/ui/Modal';
+import { cn } from '@/utils/styling';
 import { ModalProps } from '.';
+import { CloseIcon } from './close-icon';
+import { getCloseButtonClasses, getDialogClasses, getFormClasses } from './style-utils';
 
 export const Modal: FC<ModalProps> = ({
   slots,
@@ -13,13 +15,68 @@ export const Modal: FC<ModalProps> = ({
   backgroundColor,
   closeIconColor,
   disableCloseModalOnClickOutside,
-}) => (
-  <BaseModal
-    {...{ maxWidth, backgroundColor, closeIconColor, disableCloseModalOnClickOutside }}
-    trigger={<UniformSlot data={component} context={context} slot={slots.trigger} />}
-    content={<UniformSlot data={component} context={context} slot={slots.modalContent} />}
-    actions={
-      slots?.modalActions?.items?.length && <UniformSlot data={component} context={context} slot={slots.modalActions} />
-    }
-  />
-);
+}) => {
+  const modalActionsRef = useRef<HTMLDivElement>(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const handleClickOutside = useCallback(() => {
+    if (!disableCloseModalOnClickOutside) setShowModal(false);
+  }, [disableCloseModalOnClickOutside]);
+
+  const toggleModal = useCallback(() => {
+    setShowModal(prev => !prev);
+  }, []);
+
+  const handleClickContent = useCallback((e: MouseEvent<HTMLFormElement>) => {
+    e.stopPropagation();
+  }, []);
+
+  useEffect(() => {
+    if (!modalActionsRef.current) return;
+    const currentActions = modalActionsRef.current.querySelectorAll('button, a');
+    const handleClickButton = () => setShowModal(false);
+
+    currentActions.forEach(button => {
+      button.addEventListener('click', handleClickButton);
+    });
+    return () =>
+      currentActions.forEach(button => {
+        button.removeEventListener('click', handleClickButton);
+      });
+  }, []);
+
+  return (
+    <div>
+      <div onClick={toggleModal}>
+        <UniformSlot data={component} context={context} slot={slots.trigger} />
+      </div>
+      <div className={getDialogClasses({ showModal })}>
+        <dialog
+          open={showModal}
+          onClick={handleClickOutside}
+          aria-label="Close modal"
+          aria-modal="true"
+          className="flex size-full items-center justify-center bg-black/50 px-4"
+        >
+          <form method="dialog" className={getFormClasses({ maxWidth, backgroundColor })} onClick={handleClickContent}>
+            <button onClick={toggleModal} className={getCloseButtonClasses({ disableCloseModalOnClickOutside })}>
+              <CloseIcon
+                className={cn({
+                  [`fill-${closeIconColor}`]: closeIconColor,
+                })}
+              />
+            </button>
+            <div className="p-6 md:p-8">
+              <UniformSlot data={component} context={context} slot={slots.modalContent} />
+            </div>
+            {slots?.modalActions?.items?.length && (
+              <div ref={modalActionsRef} className="border-t p-6 md:p-8">
+                <UniformSlot data={component} context={context} slot={slots.modalActions} />
+              </div>
+            )}
+          </form>
+        </dialog>
+      </div>
+    </div>
+  );
+};

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

@@ -1,5 +1,5 @@
 import { cn } from '@/utils/styling';
-import { MaxWidthMap, ModalProps } from '.';
+import { MaxWidthMap, ModalParameters } from '.';
 
 type DialogClassesProps = {
   showModal?: boolean;
@@ -11,8 +11,8 @@ export const getDialogClasses = ({ showModal }: DialogClassesProps) =>
   });
 
 type FormClassesProps = {
-  maxWidth?: ModalProps['maxWidth'];
-  backgroundColor?: ModalProps['backgroundColor'];
+  maxWidth?: ModalParameters['maxWidth'];
+  backgroundColor?: ModalParameters['backgroundColor'];
 };
 export const getFormClasses = ({ maxWidth, backgroundColor }: FormClassesProps) =>
   cn('rounded-lg shadow-lg relative', MaxWidthMap[maxWidth || 'small'], {
@@ -20,7 +20,7 @@ export const getFormClasses = ({ maxWidth, backgroundColor }: FormClassesProps)
   });
 
 type CloseButtonClassesProps = {
-  disableCloseModalOnClickOutside?: ModalProps['disableCloseModalOnClickOutside'];
+  disableCloseModalOnClickOutside?: ModalParameters['disableCloseModalOnClickOutside'];
 };
 export const getCloseButtonClasses = ({ disableCloseModalOnClickOutside }: CloseButtonClassesProps) =>
   cn('group absolute right-4 top-4 opacity-40 hover:opacity-100', {

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

@@ -18,12 +18,14 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   ReviewImage,
   ReviewPersonInfo,
   ReviewContent,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className="mx-auto flex lg:max-w-[60%]">
       <div className="aspect-square size-12 shrink-0 rounded-full">{ReviewImage}</div>
       <div className="ml-6">

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

@@ -18,12 +18,14 @@ export const MultiColumnVariant: FC<MultiColumnVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   ReviewImage,
   ReviewPersonInfo,
   ReviewContent,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className="grid md:grid-cols-12">
       <div className="mb-2 md:col-span-4 md:my-0">
         <div className="mb-2 aspect-square size-12 rounded-full">{ReviewImage}</div>

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

@@ -8,6 +8,10 @@ type ColumnsVariantProps = {
   spacing: SectionParameters['spacing'];
   border: SectionParameters['border'];
   fluidContent: SectionParameters['fluidContent'];
+  /** @deprecated Use height prop instead */
+  fullHeight: SectionParameters['fullHeight'];
+  /** @deprecated Use height prop instead */
+  fitHeight: SectionParameters['fitHeight'];
   height: SectionParameters['height'];
   variant: SectionVariants;
   sectionMedia: React.ReactNode;
@@ -22,6 +26,8 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   variant,
   sectionMedia,
@@ -30,7 +36,7 @@ export const ColumnsVariant: FC<ColumnsVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
     <div className={cn('grid grid-cols-1 items-center gap-4 px-4 lg:grid-cols-2 xl:px-0')}>
       <div className={cn('aspect-square', { 'order-last': variant === SectionVariants.ColumnsReverse })}>
         <div className="flex size-full items-center justify-center overflow-hidden">{sectionMedia}</div>

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

@@ -8,6 +8,10 @@ type DefaultVariantProps = {
   spacing?: SectionParameters['spacing'];
   border?: SectionParameters['border'];
   fluidContent?: SectionParameters['fluidContent'];
+  /** @deprecated Use height prop instead */
+  fullHeight?: SectionParameters['fullHeight'];
+  /** @deprecated Use height prop instead */
+  fitHeight?: SectionParameters['fitHeight'];
   height?: SectionParameters['height'];
   sectionMedia: React.ReactNode;
   sectionContent: React.ReactNode;
@@ -21,6 +25,8 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   sectionMedia,
   sectionContent,
@@ -28,7 +34,10 @@ export const DefaultVariant: FC<DefaultVariantProps> = ({
   textAlignmentClass,
   buttonAlignmentClass,
 }) => (
-  <Container className="relative overflow-hidden" {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container
+    className="relative overflow-hidden"
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+  >
     <div className="absolute left-0 top-0 size-full overflow-hidden">{sectionMedia}</div>
     <Container className="relative flex flex-col gap-8">
       <div className={cn('flex flex-col gap-4', textAlignmentClass)}>{sectionContent}</div>

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

@@ -14,6 +14,8 @@ export const Section: FC<SectionProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => {
   const variant = component.variant as SectionVariants;
@@ -24,6 +26,8 @@ export const Section: FC<SectionProps> = ({
     spacing,
     border,
     fluidContent,
+    fullHeight,
+    fitHeight,
     height,
     textAlignmentClass: getTextAlignmentClass({ contentAlignment }),
     buttonAlignmentClass: getButtonAlignmentClass({ contentAlignment }),

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

@@ -14,9 +14,14 @@ export const Table: FC<TableProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => (
-  <Container className="flex flex-col gap-5" {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container
+    className="flex flex-col gap-5"
+    {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+  >
     <div className="overflow-x-auto">
       <table className={getTableClasses({ size, textColor })}>
         <thead>

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

@@ -16,6 +16,8 @@ export const Tabs: FC<TabsProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => {
   const variant = (component.variant || TabsVariants.Default) as TabsVariants;
@@ -44,7 +46,10 @@ export const Tabs: FC<TabsProps> = ({
   );
 
   return (
-    <Container className="flex flex-col gap-5" {...{ backgroundColor, spacing, border, fluidContent, height }}>
+    <Container
+      className="flex flex-col gap-5"
+      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
+    >
       <div className={getButtonContainerClasses({ color, variant })}>
         {tabItems.map((tabItem, index) => (
           <button

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

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -21,9 +21,11 @@ export const DefaultVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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/testimonial.tsx

@@ -13,6 +13,8 @@ export const Testimonial: FC<TestimonialProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => {
   const variant = component.variant as TestimonialVariants | undefined;
@@ -22,6 +24,8 @@ export const Testimonial: FC<TestimonialProps> = ({
     spacing,
     border,
     fluidContent,
+    fullHeight,
+    fitHeight,
     height,
     testimonialPrimaryImage: <UniformSlot context={context} data={component} slot={slots.testimonialPrimaryImage} />,
     testimonialContent: <UniformSlot context={context} data={component} slot={slots.testimonialContent} />,

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

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -21,9 +21,11 @@ export const WithLargeAvatarVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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}

package/dist/content/components/canvas/Testimonial/with-overlapping-image-variant.tsx

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -21,9 +21,11 @@ export const WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, 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/Video/index.tsx

@@ -1,9 +1,11 @@
 import { AssetParamValue } from '@uniformdev/assets';
+import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { 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;

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

@@ -8,6 +8,7 @@ import { VideoPlaceholder } from './placeholder';
 
 export const Video: FC<VideoProps> = ({
   video,
+  url, // Deprecated. Please use video parameter instead of url
   placeholderImage,
   autoPlay,
   lazyLoad,
@@ -23,7 +24,7 @@ export const Video: FC<VideoProps> = ({
   const [resolvedVideo] = resolveAsset(video);
   const [resolvedImage] = resolveAsset(placeholderImage);
 
-  const resolvedVideoUrl = resolvedVideo?.url;
+  const resolvedVideoUrl = resolvedVideo?.url || (url?.type === 'url' ? url.path : undefined);
 
   if (!resolvedVideoUrl) {
     return <VideoPlaceholder component={component} context={context} />;

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

@@ -1,10 +1,13 @@
 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;
@@ -12,8 +15,8 @@ export type ButtonProps = PropsWithChildren<{
   size?: string;
   className?: string;
   textColor?: string;
-  textSize?: string | ViewPort<string>;
-  textWeight?: string;
+  textSize?: TextSize | ViewPort<TextSize>;
+  textWeight?: keyof DefaultTheme['fontWeight'];
   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,
-  height,
+  fullHeight,
   itemsPerPage = '1',
   children,
   gapX,
@@ -116,7 +116,7 @@ export const Carousel: FC<CarouselProps> = ({
     });
 
   return (
-    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
+    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, fullHeight }}>
       <div
         className={cn('relative', {
           [resolveViewPort(gapX, '-mx-{value}')]: gapX,

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

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

package/dist/content/components/ui/Container/container.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { cn, formatSpaceParameterValue, resolveViewPort } from '@/utils/styling';
 import { ContainerProps } from '.';
+import { getHeightValue } from './utils';
 
 export const Container: FC<ContainerProps> = ({
   className,
@@ -11,6 +12,8 @@ export const Container: FC<ContainerProps> = ({
   spacing,
   border = '',
   fluidContent = false,
+  fullHeight = false,
+  fitHeight = false,
   height,
   maxWidth,
   ...rest
@@ -20,6 +23,8 @@ 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(
@@ -29,7 +34,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(height, 'h-{value}')]: height,
+          [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
         },
         wrapperClassName
       )}
@@ -47,7 +52,7 @@ export const Container: FC<ContainerProps> = ({
             [resolveViewPort(paddingRight, 'pr-{value}')]: paddingRight,
             [resolveViewPort(paddingLeft, 'pl-{value}')]: paddingLeft,
             [resolveViewPort(border, '{value}')]: border,
-            [resolveViewPort(height, 'h-{value}')]: height,
+            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
           },
           className
         )}

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

@@ -6,9 +6,15 @@ 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/Container/utils.ts

@@ -0,0 +1,18 @@
+import { ViewPort } from '@/types/cskTypes';
+
+export const getHeightValue = ({
+  height,
+  fullHeight,
+  fitHeight,
+}: {
+  height?: string | ViewPort<string> | undefined;
+  fullHeight?: boolean | undefined;
+  fitHeight?: boolean | undefined;
+}) => {
+  if (height) return height;
+  // Cover deprecated cases
+  if (fullHeight) return 'h-screen';
+  if (fitHeight) return 'h-full';
+
+  return undefined;
+};

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import BaseContainer from '@/components/ui/Container';
+import BaseContainer, { getHeightValue } from '@/components/ui/Container';
 import { cn, resolveViewPort } from '@/utils/styling';
 import { FlexProps } from '.';
 
@@ -14,24 +14,32 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   children,
-}) => (
-  <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,
-        },
-        className
-      )}
+}) => {
+  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
+
+  return (
+    <BaseContainer
+      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height, wrapperClassName }}
     >
-      {children}
-    </div>
-  </BaseContainer>
-);
+      <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>
+  );
+};

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

@@ -1,8 +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';
 
 export type FlexProps = Pick<
@@ -14,12 +16,14 @@ export type FlexProps = Pick<
   | 'spacing'
   | 'border'
   | 'fluidContent'
+  | 'fullHeight'
+  | 'fitHeight'
   | 'height'
   | 'children'
 > & {
   direction?: Direction | ViewPort<Direction>;
   justifyContent?: Justify | ViewPort<Justify>;
-  gap?: string | ViewPort<string>;
+  gap?: FlexGap | ViewPort<FlexGap>;
   alignItems?: Align | ViewPort<Align>;
 };
 

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

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