import { type CSSProperties, type ImgHTMLAttributes, type ReactNode } from 'react';
import { type CssLength } from '../../../utils/css';
export type HolographicMaskGradient = 'beetle' | 'deer' | 'dragonfly' | 'lumon' | 'mandala' | 'nanina' | 'sparrow' | 'turtle';
export type HolographicMaskItem = {
    id?: string | number;
    label?: ReactNode;
    baseSrc: string;
    baseAlt: string;
    maskSrc?: string;
    maskAlt?: string;
    width?: CssLength;
    framed?: boolean;
    wide?: boolean;
    gradient?: HolographicMaskGradient;
    gradientBackground?: string;
    srcSet?: string;
    sizes?: string;
    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
    fetchPriority?: ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
};
export type HolographicMasksSection = {
    id?: string | number;
    variant?: 'feature' | 'grid';
    ariaLabel?: string;
    items: readonly HolographicMaskItem[];
};
export type HolographicMasksCredit = {
    id?: string | number;
    content: ReactNode;
};
export type HolographicMasksPageProps = {
    title?: ReactNode;
    intro?: ReactNode;
    sections?: readonly HolographicMasksSection[];
    credits?: readonly HolographicMasksCredit[];
    footerNote?: ReactNode;
    showCredits?: boolean;
    className?: string;
    style?: CSSProperties;
    ariaLabel?: string;
    contentWidth?: CssLength;
    backgroundColor?: string;
    textColor?: string;
    mutedColor?: string;
    panelColor?: string;
    borderColor?: string;
};
export declare const HolographicMasksPage: ({ title, intro, sections, credits, footerNote, showCredits, className, style, ariaLabel, contentWidth, backgroundColor, textColor, mutedColor, panelColor, borderColor, }: HolographicMasksPageProps) => import("react/jsx-runtime").JSX.Element;