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

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

@@ -1,3 +1,4 @@
+import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { AssetParamValue } from '@uniformdev/assets';
 import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
@@ -19,7 +20,7 @@ export type BaseButtonParameters = {
   text?: string;
   link?: LinkParamValue;
   textColor?: string;
-  textWeight?: string;
+  textWeight?: keyof DefaultTheme['fontWeight'];
   textFont?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   textTransform?: string;
   buttonColor?: string;
@@ -44,7 +45,6 @@ export type BaseImageParameters = {
   border?: string | ViewPort<string>;
   priority?: boolean;
   unoptimized?: boolean;
-  fill?: boolean;
 };
 
 export type EyebrowTitleTextParameters = PrefixedKeys<TextParameters, 'eyebrowTitle'>;
@@ -60,7 +60,10 @@ export type SecondaryButtonParameters = PrefixedKeys<BaseButtonParameters, 'seco
 export type ImageParameters = PrefixedKeys<Omit<BaseImageParameters, 'image'>, 'image'> &
   Pick<BaseImageParameters, 'image'>;
 
-type DemoHeroParameters = ContainerParameters & {
+/**
+ * @deprecated Use FixedHeroParameters or FlexibleHeroParameters directly instead.
+ */
+export type DemoHeroParameters = ContainerParameters & {
   contentAlignment?: ContentAlignment;
 } & EyebrowTitleTextParameters &
   TitleTextParameters &
@@ -71,6 +74,10 @@ type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
+  /**
+   * @deprecated Use overlayAutoTint instead.
+   */
+  enableOverlayAutoTint?: boolean;
   overlayAutoTint?: string;
 } & DemoHeroParameters;
 
@@ -86,6 +93,10 @@ export enum FlexibleHeroSlots {
   FlexibleHeroCta = 'flexibleHeroCta',
 }
 
+/**
+ * @deprecated Use FixedHeroProps or FlexibleHeroProps directly instead.
+ */
+export type DemoHeroProps = FixedHeroProps | FlexibleHeroProps;
 export type FixedHeroProps = ComponentProps<FixedHeroParameters>;
 export type FlexibleHeroProps = ComponentProps<FlexibleHeroParameters, FlexibleHeroSlots>;
 

package/dist/content/components/canvas/DemoHero/utils.ts

@@ -29,17 +29,3 @@ export const cleanUpPrefix = <T extends Record<string, unknown>, Prefix extends
     {} as RemovePrefix<T, Prefix>
   );
 };
-
-const HALF_DISPLAY_WIDTH = 608;
-export const getImageParametersFocalPoint = (isVariant: boolean) => {
-  const columnImageDimensions = isVariant ? HALF_DISPLAY_WIDTH : undefined;
-  return {
-    imageFill: !isVariant,
-    ...(columnImageDimensions
-      ? {
-          imageWidth: columnImageDimensions,
-          imageHeight: columnImageDimensions,
-        }
-      : {}),
-  };
-};

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

@@ -12,11 +12,12 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
   slots,
   component,
   context,
   className,
-  height,
+  fitHeight,
   wrapperClassName,
 }) => (
   <BaseFlex
@@ -29,7 +30,8 @@ export const Flex: FC<FlexProps> = ({
       spacing,
       border,
       fluidContent,
-      height,
+      fullHeight,
+      fitHeight,
       wrapperClassName,
       className,
     }}

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

@@ -11,6 +11,8 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   slots,
   component,
@@ -19,7 +21,7 @@ export const Grid: FC<GridProps> = ({
 }) => (
   <BaseGrid
     className={className}
-    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, height }}
+    {...{ columnsCount, gapX, gapY, backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}
   >
     <UniformSlot data={component} context={context} slot={slots.gridInner} />
   </BaseGrid>

package/dist/content/components/canvas/Image/image.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
 import { imageFrom } from '@uniformdev/assets';
 import BaseImage from '@/components/ui/Image';
-import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
 import { resolveAsset } from '@/utils/assets';
 import { ImageProps } from '.';
+import { ImagePlaceholder } from './placeholder';
 
 export const Image: FC<ImageProps> = async ({
   image,
@@ -22,18 +22,7 @@ export const Image: FC<ImageProps> = async ({
   const [resolvedImage] = resolveAsset(image);
 
   if (!resolvedImage) {
-    const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
-    const isPlaceholder = component?._id?.includes('placeholder_');
-
-    if (!isEditorPreviewMode || isPlaceholder) {
-      return null;
-    }
-
-    return (
-      <div style={{ width: width ? `${width}px` : 'auto', height: height ? `${height}px` : 'auto' }}>
-        <MediaPlaceholder type="image" placeholder="Please add an asset to display an image" />
-      </div>
-    );
+    return <ImagePlaceholder context={context} component={component} width={width} height={height} />;
   }
 
   const { focalPoint, title = '' } = resolvedImage;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import MediaPlaceholder from '@/components/ui/MediaPlaceholder';
+import { ImageProps } from '.';
+
+type ImagePlaceholderProps = Pick<ImageProps, 'component' | 'context' | 'width' | 'height'>;
+
+export const ImagePlaceholder: FC<ImagePlaceholderProps> = ({ context, component, width, height }) => {
+  const isEditorPreviewMode = context.previewMode === 'editor' && context.isContextualEditing;
+  const isPlaceholder = component?._id?.includes('placeholder_');
+
+  if (!isEditorPreviewMode || isPlaceholder) {
+    return null;
+  }
+
+  return (
+    <div style={{ width: width ? `${width}px` : 'auto', height: height ? `${height}px` : 'auto' }}>
+      <MediaPlaceholder type="image" placeholder="Please add an asset to display an image" />
+    </div>
+  );
+};

package/dist/content/components/canvas/ImageGallery/image-gallery.tsx

@@ -16,6 +16,8 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
   spacing,
   border,
   fluidContent,
+  fullHeight,
+  fitHeight,
   height,
   config,
   context,
@@ -43,7 +45,7 @@ export const ImageGallery: FC<ImageGalleryProps> = ({
       ?.length;
 
   return (
-    <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
+    <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
       <div className="flex flex-col gap-1">
         {showEmptySlot ? (
           <UniformSlot context={context} slot={slots.imageGalleryItems} data={component} />

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;