import { type CSSProperties, type ImgHTMLAttributes, type ReactNode } from 'react';
import { type CssLength } from '../../../utils/css';
export type StorytellingPageImage = {
id?: string | number;
src: string;
alt?: string;
caption?: ReactNode;
title?: string;
srcSet?: string;
sizes?: string;
objectPosition?: string;
loading?: ImgHTMLAttributes['loading'];
fetchPriority?: ImgHTMLAttributes['fetchPriority'];
rotation?: number;
side?: 'left' | 'right';
offset?: CssLength;
animated?: boolean;
};
export type StorytellingParagraphBlock = {
id?: string | number;
type: 'paragraph';
content: ReactNode;
};
export type StorytellingPhotoBlock = {
id?: string | number;
type: 'photo';
photo: StorytellingPageImage;
};
export type StorytellingPhotoStackBlock = {
id?: string | number;
type: 'photoStack';
photos: readonly StorytellingPageImage[];
ariaLabel?: string;
};
export type StorytellingPageBlock = string | StorytellingParagraphBlock | StorytellingPhotoBlock | StorytellingPhotoStackBlock;
export type StorytellingStory = {
id?: string | number;
title: ReactNode;
blocks: readonly StorytellingPageBlock[];
ariaLabel?: string;
};
export type StorytellingPageProps = {
stories?: readonly StorytellingStory[];
className?: string;
style?: CSSProperties;
ariaLabel?: string;
contentWidth?: CssLength;
photoWidth?: CssLength;
photoMargin?: CssLength;
photoBorderSize?: CssLength;
bottomSpace?: CssLength;
backgroundStart?: string;
backgroundEnd?: string;
paperColor?: string;
textColor?: string;
titleGradient?: string;
shadowColor?: string;
};
export declare const StorytellingPage: ({ stories, className, style, ariaLabel, contentWidth, photoWidth, photoMargin, photoBorderSize, bottomSpace, backgroundStart, backgroundEnd, paperColor, textColor, titleGradient, shadowColor, }: StorytellingPageProps) => import("react/jsx-runtime").JSX.Element;