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

package/dist/content/components/ui/Grid/grid.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 { GridProps } from '.';
 
@@ -12,29 +12,25 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   children,
-}) => {
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
-  return (
-    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
-      <div
-        className={cn(
-          'grid',
-          {
-            [resolveViewPort(columnsCount, 'grid-cols-{value}')]: columnsCount,
-            [resolveViewPort(gapX, 'gap-x-{value}')]: gapX,
-            [resolveViewPort(gapY, 'gap-y-{value}')]: gapY,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </BaseContainer>
-  );
-};
+  alignItems,
+}) => (
+  <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
+    <div
+      className={cn(
+        'grid',
+        {
+          [resolveViewPort(columnsCount, 'grid-cols-{value}')]: columnsCount,
+          [resolveViewPort(gapX, 'gap-x-{value}')]: gapX,
+          [resolveViewPort(gapY, 'gap-y-{value}')]: gapY,
+          [resolveViewPort(height, 'h-{value}')]: height,
+          [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  </BaseContainer>
+);

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

@@ -1,25 +1,16 @@
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 import { ViewPort } from '@/types/cskTypes';
 
-type AvailableColumnsCount = keyof DefaultTheme['gridTemplateColumns'];
-type AvailableGap = keyof DefaultTheme['spacing'];
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 
 export type GridProps = Pick<
   BaseContainerProps,
-  | 'title'
-  | 'backgroundColor'
-  | 'spacing'
-  | 'border'
-  | 'fluidContent'
-  | 'fullHeight'
-  | 'fitHeight'
-  | 'children'
-  | 'height'
+  'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'children' | 'height'
 > & {
-  columnsCount?: AvailableColumnsCount | ViewPort<AvailableColumnsCount>;
-  gapY?: AvailableGap | ViewPort<AvailableGap>;
-  gapX?: AvailableGap | ViewPort<AvailableGap>;
+  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,18 +1,15 @@
 import { HTMLAttributes } from 'react';
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { ViewPort } from '@/types/cskTypes';
 
-type AvailableColumnStart = keyof DefaultTheme['gridColumnStart'];
-type AvailableColumnSpan = keyof DefaultTheme['gridColumn'];
-type AvailableGridRowStart = keyof DefaultTheme['gridRowStart'];
-type AvailableGridRowSpan = keyof DefaultTheme['gridRow'];
+type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 
 export type GridItemProps = HTMLAttributes<HTMLDivElement> & {
-  columnStart?: AvailableColumnStart | ViewPort<AvailableColumnStart>;
-  columnSpan?: AvailableColumnSpan | ViewPort<AvailableColumnSpan>;
-  rowStart?: AvailableGridRowStart | ViewPort<AvailableGridRowStart>;
-  rowSpan?: AvailableGridRowSpan | ViewPort<AvailableGridRowSpan>;
+  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/Header/index.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
 export type HeaderProps = PropsWithChildren &
-  Omit<BaseContainerProps, 'fluidContent' | 'fullHeight'> & {
+  Omit<BaseContainerProps, 'fluidContent' | 'height'> & {
     leftSection?: ReactNode;
     rightSection?: ReactNode;
     color?: string;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export type InlineSVGProps = {
+  src: string;
+  className?: string;
+  fill?: boolean;
+  width?: number;
+  height?: number;
+  sanitize?: boolean;
+  fallback?: ReactNode;
+  useCurrentColor?: boolean;
+  alt?: string;
+};
+
+export { InlineSVG as default } from './inline-svg';

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

@@ -0,0 +1,70 @@
+/* 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,
+  convertSvgAttributesToReactProps,
+} from './utils';
+
+export const InlineSVG: FC<InlineSVGProps> = async ({
+  src,
+  className = '',
+  width,
+  height,
+  fill,
+  sanitize = true,
+  useCurrentColor = true,
+  fallback,
+  alt,
+}) => {
+  if (!src) return fallback ?? null;
+
+  const transformSvg = (svg: string): string => {
+    const transformers: Array<(input: string) => string> = [];
+
+    if (sanitize) transformers.push(sanitizeSvg);
+    if (useCurrentColor) transformers.push(applyCurrentColor);
+
+    return transformers.reduce((result, fn) => fn(result), svg);
+  };
+
+  try {
+    const raw = await fetchSvg(src);
+    const cleaned = transformSvg(raw);
+    const attrs = getSvgAttributes(cleaned);
+    const content = getSvgInnerContent(cleaned);
+
+    const reactProps = convertSvgAttributesToReactProps(attrs);
+
+    const svgProps: SVGProps<SVGSVGElement> = {
+      ...reactProps,
+      role: 'img',
+      'aria-label': alt,
+      focusable: false,
+      width: fill ? '100%' : width,
+      height: fill ? '100%' : height,
+      className: cn(reactProps.className, className, {
+        'absolute inset-0': fill,
+      }),
+    };
+
+    return (
+      <div className="relative size-full">
+        <svg {...svgProps} dangerouslySetInnerHTML={{ __html: content }} />
+      </div>
+    );
+  } catch {
+    return (
+      fallback ?? (
+        <div className={cn(className)} style={{ width, height }}>
+          <div className="rounded border border-red-200 bg-red-50 p-2 text-sm text-red-500">Failed to load SVG</div>
+        </div>
+      )
+    );
+  }
+};

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

@@ -0,0 +1,132 @@
+import { SVGProps } from 'react';
+
+type SVGAttributes = Record<string, string | number | boolean>;
+type ReactSVGProps = SVGProps<SVGSVGElement>;
+const PRESERVE_AS_STRING = ['id', 'class', 'viewBox', 'preserveAspectRatio'];
+
+const ATTRIBUTE_MAP: Record<string, string> = {
+  class: 'className',
+  'stroke-width': 'strokeWidth',
+  'stroke-linecap': 'strokeLinecap',
+  'stroke-linejoin': 'strokeLinejoin',
+  'stroke-miterlimit': 'strokeMiterlimit',
+  'stroke-dasharray': 'strokeDasharray',
+  'stroke-dashoffset': 'strokeDashoffset',
+  'stroke-opacity': 'strokeOpacity',
+  'fill-opacity': 'fillOpacity',
+  'fill-rule': 'fillRule',
+  'clip-rule': 'clipRule',
+  'clip-path': 'clipPath',
+  'font-family': 'fontFamily',
+  'font-size': 'fontSize',
+  'font-weight': 'fontWeight',
+  'text-anchor': 'textAnchor',
+  'pointer-events': 'pointerEvents',
+  'vector-effect': 'vectorEffect',
+  'color-interpolation': 'colorInterpolation',
+  'dominant-baseline': 'dominantBaseline',
+  'text-rendering': 'textRendering',
+  'shape-rendering': 'shapeRendering',
+  'color-rendering': 'colorRendering',
+  'image-rendering': 'imageRendering',
+  'xml:space': 'xmlSpace',
+  'xmlns:xlink': 'xmlnsXlink',
+} as const;
+
+/**
+ * Sanitizes SVG by removing potentially dangerous or unwanted content.
+ */
+export const sanitizeSvg = (svg: string): string =>
+  svg
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/\son\w+="[^"]*"/gi, '')
+    .replace(/\son\w+='[^']*'/gi, '')
+    .replace(/javascript:/gi, '');
+
+/**
+ * Replaces color attributes (fill, stroke, color) with `currentColor`
+ * except for 'none' and 'transparent'.
+ */
+export const applyCurrentColor = (svg: string): string =>
+  svg
+    .replace(/fill=(['"])(?!none|transparent)[^'"]*\1/gi, 'fill="currentColor"')
+    .replace(/stroke=(['"])(?!none|transparent)[^'"]*\1/gi, 'stroke="currentColor"')
+    .replace(/color=(['"])[^'"]*\1/gi, 'color="currentColor"');
+
+/**
+ * Extracts attributes from the <svg> tag as key-value pairs.
+ */
+export const getSvgAttributes = (svgContent: string): SVGAttributes => {
+  const svgTagMatch = svgContent.match(/<svg([^>]*)>/i);
+  if (!svgTagMatch) return {};
+
+  const attributesString = svgTagMatch[1];
+  const attributes: SVGAttributes = {};
+
+  const attrRegex = /(\w+(?:[-:]\w+)*)\s*=\s*["']([^"']*)["']/g;
+  let match;
+
+  while ((match = attrRegex.exec(attributesString ?? '')) !== null) {
+    const [, key, value] = match;
+
+    if (!key || !value) continue;
+
+    if (value === 'true' || value === 'false') {
+      attributes[key] = value === 'true';
+    } else if (!isNaN(Number(value)) && value !== '' && !PRESERVE_AS_STRING.includes(key)) {
+      attributes[key] = Number(value);
+    } else {
+      attributes[key] = value;
+    }
+  }
+
+  return attributes;
+};
+/**
+ * Extracts inner content from an SVG string (everything inside <svg>...</svg>).
+ */
+export const getSvgInnerContent = (svg: string): string => {
+  const match = svg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+  return match?.[1] ?? '';
+};
+
+/**
+ * Converts SVG attributes to React props.
+ */
+export const convertSvgAttributesToReactProps = (attributes: SVGAttributes): Partial<ReactSVGProps> => {
+  const reactProps: Record<string, string | number | boolean> = {};
+
+  for (const [key, value] of Object.entries(attributes)) {
+    const reactPropName = ATTRIBUTE_MAP[key] || key;
+    reactProps[reactPropName] = value;
+  }
+
+  return reactProps;
+};
+
+/**
+ * Fetches raw SVG content from a remote URL.
+ */
+export const fetchSvg = async (url: string): Promise<string> => {
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'image/svg+xml, text/plain, */*',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch SVG: ${response.status} ${response.statusText}`);
+    }
+
+    const content = await response.text();
+    if (!content.trim().includes('<svg')) {
+      throw new Error('Response is not valid SVG');
+    }
+
+    return content;
+  } catch (err) {
+    console.error('Error fetching SVG:', err);
+    throw err;
+  }
+};

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+
+export const MaxWidthMap = {
+  small: 'max-w-xl',
+  medium: 'max-w-2xl',
+  large: 'max-w-4xl',
+};
+
+export type ModalProps = {
+  maxWidth?: 'small' | 'medium' | 'large';
+  className?: string;
+  backgroundColor?: string;
+  closeIconColor?: string;
+  disableCloseModalOnClickOutside?: boolean;
+  trigger: ReactNode;
+  content: ReactNode;
+  actions?: ReactNode;
+  onChangeModalState?: (state: boolean) => void;
+};
+
+export default dynamic(() => import('./modal').then(mod => mod.Modal));

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { FC, useCallback, useState, MouseEvent, useRef, useEffect } from 'react';
+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> = ({
+  trigger,
+  content,
+  actions,
+  maxWidth,
+  backgroundColor,
+  closeIconColor,
+  disableCloseModalOnClickOutside,
+  onChangeModalState,
+  className,
+}) => {
+  const modalActionsRef = useRef<HTMLDivElement>(null);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    if (onChangeModalState) {
+      onChangeModalState(showModal);
+    }
+  }, [showModal, onChangeModalState]);
+
+  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}>{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={cn(getFormClasses({ maxWidth, backgroundColor }), className)}
+            onClick={handleClickContent}
+          >
+            <button onClick={toggleModal} className={getCloseButtonClasses({ disableCloseModalOnClickOutside })}>
+              <CloseIcon
+                className={cn({
+                  [`fill-${closeIconColor}`]: closeIconColor,
+                })}
+              />
+            </button>
+            <div className="p-6 md:p-8">{content}</div>
+            {actions && (
+              <div ref={modalActionsRef} className="border-t p-6 md:p-8">
+                {actions}
+              </div>
+            )}
+          </form>
+        </dialog>
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -1,5 +1,5 @@
 export type RatingProps = {
-  rating: number;
+  rating?: number;
   showReviewLabel?: boolean;
   starsColor?: string;
   activeStarsColor?: string;

package/dist/content/components/ui/Rating/rating.tsx

@@ -5,7 +5,7 @@ import { RatingProps } from '.';
 export const Rating: FC<RatingProps> = ({ rating, showReviewLabel, starsColor, activeStarsColor }) => (
   <div className="flex items-center space-x-1">
     {Array.from({ length: 5 }, (_, starIndex) => {
-      const selectedRating = rating >= starIndex + 1;
+      const selectedRating = rating && rating >= starIndex + 1;
       return (
         <svg
           key={starIndex}

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

@@ -1,18 +1,15 @@
 import { ReactElement } from 'react';
-import { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
 import { ViewPort } from '@/types/cskTypes';
 
-type TextSize = keyof DefaultTheme['fontSize'];
-
 export type TextProps = {
   className?: string;
-  size?: TextSize | ViewPort<TextSize>;
+  size?: string | ViewPort<string>;
   color?: string;
-  weight?: keyof DefaultTheme['fontWeight'];
+  weight?: string;
   font?: string;
   transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
   decoration?: 'underline' | 'overline' | 'line-through' | 'no-underline';
-  letterSpacing?: keyof DefaultTheme['letterSpacing'];
+  letterSpacing?: string;
   children: ReactElement | string;
   alignment?: 'left' | 'center' | 'right';
   lineCountRestrictions?: string;

package/dist/content/types/cskTypes.ts

@@ -1,12 +1,12 @@
-import { HTMLAttributes } from 'react';
-import { ComponentInstance } from '@uniformdev/canvas';
-
-export type ResolveEmptyPlaceholderOptions = {
-  parentComponent: ComponentInstance | undefined;
-  component: ComponentInstance;
-  slotName: string;
-  slotIndex: number;
-};
+import { HTMLAttributes, ComponentProps as ReactComponentProps } from 'react';
+import { AssetParamValueItem } from '@uniformdev/canvas';
+import { UniformComposition } from '@uniformdev/next-app-router';
+import { ComponentParameter } from '@uniformdev/next-app-router-shared';
+
+type ResolveEmptyPlaceholderFunction = NonNullable<
+  ReactComponentProps<typeof UniformComposition>['resolveEmptyPlaceholder']
+>;
+export type ResolveEmptyPlaceholderOptions = Parameters<ResolveEmptyPlaceholderFunction>[0];
 
 export type ViewPort<T> = {
   desktop?: T;
@@ -25,3 +25,26 @@ export type SpaceType = Pick<
   | 'paddingRight'
   | 'paddingBottom'
 >;
+
+type ToComponentParameters<T> = {
+  [K in keyof T]: ComponentParameter<T[K]>;
+};
+
+export type ComponentProps<
+  T,
+  S extends string = string,
+> = import('@uniformdev/next-app-router/component').ComponentProps<ToComponentParameters<T>, S>;
+
+type ValueOfField<F> = F extends { value: infer V } ? V : never;
+type FlattenFields<T extends AssetParamValueItem> = {
+  [K in keyof T['fields']]: ValueOfField<T['fields'][K]>;
+};
+type RenameKey<T, K extends keyof T, NewName extends PropertyKey> = Omit<T, K> & { [P in NewName]: T[K] };
+
+export type ResolvedAssetFromItem<T extends AssetParamValueItem> = RenameKey<FlattenFields<T>, 'id', 'file'> & {
+  id: T['_id'];
+};
+
+export type ReplaceFieldsWithAssets<T, K extends keyof T> = Omit<T, K> & {
+  [P in K]?: ResolvedAssetFromItem<AssetParamValueItem>[];
+};

package/dist/content/utils/assets.ts

@@ -1,21 +1,6 @@
-import { AssetParamValue } from '@uniformdev/assets';
+import { AssetParamValue, AssetParamValueItem } from '@uniformdev/assets';
 import { flattenValues } from '@uniformdev/canvas';
-
-type ResolvedAsset = {
-  id?: string;
-  url: string;
-  file?: string;
-  size?: number;
-  title?: string;
-  width?: number;
-  height?: number;
-  mediaType?: string;
-  description?: string;
-  focalPoint?: {
-    x: number;
-    y: number;
-  };
-};
+import { ResolvedAssetFromItem } from '@/types/cskTypes';
 
 /**
  * Resolves a list of assets, filtering out any entries without a valid URL.
@@ -23,5 +8,5 @@ type ResolvedAsset = {
  * @param {AssetParamValue | undefined} image - The list of assets to resolve.
  * @returns {ResolvedAsset[]} - An array of resolved assets with valid URLs.
  */
-export const resolveAsset = (image?: AssetParamValue): ResolvedAsset[] =>
+export const resolveAsset = (image?: AssetParamValue): ResolvedAssetFromItem<AssetParamValueItem>[] =>
   (flattenValues(image as never) || []).filter(({ url }) => Boolean(url));