@planetaexo/design-system 0.37.2 → 0.37.4

package/dist/index.d.cts

@@ -268,6 +268,13 @@ interface OfferProps {
     confirmedState?: OfferConfirmedState;
     /** When true, opcionais (checkbox + stepper) ficam read-only. Usado em estado expirado. */
     interactionsDisabled?: boolean;
+    /**
+     * Quando true, "Book now" abre o BookingWizard interno (demo). Em produção
+     * (host com checkout próprio via `checkoutSlot`) deixe `false` para que o
+     * fallback do wizard interno nunca renderize — evita regressões em que
+     * fechar o `checkoutSlot` no host expõe um stepper demo com schema antigo.
+     */
+    internalDemoCheckout?: boolean;
     className?: string;
 }
 interface BookingShellProps {
@@ -358,7 +365,7 @@ declare function TransferDetailsBlock({ label, items, className, }: TransferDeta
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
 }): react_jsx_runtime.JSX.Element;
-declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, className, }: OfferProps): react_jsx_runtime.JSX.Element;
+declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, internalDemoCheckout, className, }: OfferProps): react_jsx_runtime.JSX.Element;
 
 type BookingStatus = "pending" | "confirmed" | "cancelled" | "completed" | "pendingRegistration" | "pendingPayment" | "pendingPaymentOverdue" | "complete";
 interface BookingTraveller {
@@ -1973,6 +1980,18 @@ interface FilterItem {
     label: string;
     /** Contagem de resultados disponíveis */
     count?: number;
+    /**
+     * Subitens aninhados (ex.: Brazil → Pantanal, Amazon, …).
+     * O pai vira um agregador: marcar seleciona todos os filhos;
+     * estado checked/indeterminate é derivado das seleções dos filhos.
+     */
+    children?: FilterItem[];
+    /**
+     * Expande o pai por padrão. Sem isso, pais começam recolhidos
+     * (chevron à direita) e o usuário precisa clicar para revelar os filhos.
+     * @default false
+     */
+    defaultExpanded?: boolean;
 }
 interface FilterGroup {
     id: string;
@@ -1982,7 +2001,29 @@ interface FilterGroup {
     items: FilterItem[];
     /** Abre este grupo por padrão */
     defaultOpen?: boolean;
+    /**
+     * Escopo: id de um item dentro de `items`. Quando definido, o grupo
+     * renderiza apenas os children desse item (não o item em si), permitindo
+     * "afunilar" o filtro para o contexto da página atual.
+     *
+     * Exemplo (WordPress taxonomy): na página "Brazil" passe
+     * `scopeItemId: "brazil"` para mostrar apenas as sub-regiões de Brazil.
+     * Se o item não existir ou não tiver children, o grupo é automaticamente
+     * omitido do painel.
+     */
+    scopeItemId?: string;
 }
+interface FilterSortOption {
+    id: string;
+    label: string;
+}
+/**
+ * Visual style of the filter panel.
+ * - "sidebar"    — vertical accordion list (default), good for the left rail.
+ * - "horizontal" — inline pill row of popover buttons, good for compact
+ *                  category pages where the trip grid uses the full width.
+ */
+type FilterPanelVariant = "sidebar" | "horizontal";
 interface FilterPanelProps {
     groups: FilterGroup[];
     /** Estado controlado: { groupId: string[] } */
@@ -1993,8 +2034,14 @@ interface FilterPanelProps {
     alwaysShowClear?: boolean;
     title?: string;
     className?: string;
-}
-declare function FilterPanel({ groups, value, onChange, onClearAll, alwaysShowClear, title, className, }: FilterPanelProps): react_jsx_runtime.JSX.Element;
+    /** Variação visual do painel. @default "sidebar" */
+    variant?: FilterPanelVariant;
+    /** Opções do "Sort by" popover (apenas no variant="horizontal"). */
+    sortOptions?: FilterSortOption[];
+    sort?: string;
+    onSortChange?: (id: string) => void;
+}
+declare function FilterPanel({ groups, value, onChange, onClearAll, alwaysShowClear, title, className, variant, sortOptions, sort, onSortChange, }: FilterPanelProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Configuration for any Trustpilot widget embedded in the design system.
@@ -2031,6 +2078,22 @@ interface TrustpilotWidgetConfig {
     starColor?: string;
     /** Fallback link target (e.g. "https://www.trustpilot.com/review/yourdomain.com"). */
     fallbackHref?: string;
+    /**
+     * Average rating shown by the fallback UI (when the Trustpilot bootstrap
+     * script can't render — typically because of ad-blockers).
+     */
+    fallbackScore?: number;
+    /** Review count shown by the fallback UI. */
+    fallbackCount?: number;
+    /** Short label shown next to the rating (e.g. "Excellent"). @default "Excellent" */
+    fallbackLabel?: string;
+    /** Layout for the fallback UI. @default auto — picked from styleHeight. */
+    fallbackVariant?: "mini" | "card";
+    /**
+     * Milliseconds to wait before showing the fallback if no widget content
+     * has been rendered by the bootstrap script. @default 3000
+     */
+    fallbackDelayMs?: number;
 }
 /**
  * Renders a Trustpilot widget div with the right data-* attributes and
@@ -2130,7 +2193,7 @@ interface MenuTripProps {
 }
 declare function MenuTrip({ sections, activeSection, onSelect, variant, bold, className, }: MenuTripProps): react_jsx_runtime.JSX.Element;
 
-type PhotoGalleryVariant = "grid" | "masonry" | "filmstrip" | "featured" | "carousel" | "fullBleed";
+type PhotoGalleryVariant = "grid" | "gridCompact" | "masonry" | "filmstrip" | "featured" | "carousel" | "fullBleed";
 interface PhotoGalleryPhoto {
     src: string;
     alt?: string;
@@ -2233,6 +2296,11 @@ type SiteHeaderVariant = "transparent" | "white" | "dark";
 interface SiteHeaderProps {
     variant?: SiteHeaderVariant;
     links?: SiteHeaderLink[];
+    /** Logo used on transparent/dark headers (defaults to the white asset). */
+    logoSrcLight?: string;
+    /** Logo used on the white header (defaults to the green/brand asset). */
+    logoSrcDark?: string;
+    /** Backwards-compatible single-logo override — applied to both variants when set. */
     logoSrc?: string;
     logoAlt?: string;
     languages?: SiteHeaderLanguage[];
@@ -2246,7 +2314,7 @@ interface SiteHeaderProps {
 }
 declare const DEFAULT_HEADER_LINKS: SiteHeaderLink[];
 declare const DEFAULT_LANGUAGES: SiteHeaderLanguage[];
-declare function SiteHeader({ variant, links, logoSrc, logoAlt, languages, currentLanguage, onLanguageChange, onSearch, onAccount, position, className, }: SiteHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SiteHeader({ variant, links, logoSrcLight, logoSrcDark, logoSrc, logoAlt, languages, currentLanguage, onLanguageChange, onSearch, onAccount, position, className, }: SiteHeaderProps): react_jsx_runtime.JSX.Element;
 
 declare function ThemeToggle({ className }: {
     className?: string;
@@ -2254,6 +2322,13 @@ declare function ThemeToggle({ className }: {
 
 type TripCardStatus = "sold-out" | "trending";
 type TripCardSize = "sm" | "md" | "lg";
+/**
+ * Visual style of the card.
+ * - "overlay"   — full-bleed image with dark gradient + white text on top (default).
+ * - "editorial" — image on top, white body below with title, excerpt, nights + price.
+ */
+type TripCardVariant = "overlay" | "editorial";
+type TripCardDifficulty = "easy" | "moderate" | "extreme";
 interface TripCardCta {
     /** Texto do link (ex: "Discover this trip" ou "5 dates available") */
     label: string;
@@ -2264,24 +2339,42 @@ interface TripCardProps {
     /** URL da imagem de capa */
     image: string;
     imageAlt?: string;
-    /** Badge de status exibido no topo esquerdo */
+    /** Badge de status (ex.: trending) — usado pelo variant="overlay". */
     status?: TripCardStatus;
     /** Número de noites */
     nights?: number;
-    /** Período (ex: "Feb - Mar") */
+    /** Período (ex: "Feb - Mar") — usado pelo variant="overlay". */
     period?: string;
     /** Título da viagem */
     title: string;
-    /** Descrição curta */
+    /** Descrição / excerpt curto — usado em ambos os variants. */
     description?: string;
-    /** Link/CTA de ação */
+    /** Link/CTA de ação — usado pelo variant="overlay". */
     cta?: TripCardCta;
-    /** Preço exibido ao lado do CTA (ex: "from € 769") */
+    /** Preço (ex: "from € 769"). */
     price?: string;
     size?: TripCardSize;
     className?: string;
+    /** Variação visual do card. @default "overlay" */
+    variant?: TripCardVariant;
+    /** Quando href é fornecido, o card editorial inteiro vira um link <a>. */
+    href?: string;
+    /** Mostra um botão de favorito (estilo Chip glass) no topo direito. */
+    favoritable?: boolean;
+    /** Estado controlado do favorito. */
+    favorited?: boolean;
+    onFavoriteToggle?: (next: boolean) => void;
+    /** Localização/região exibida no rodapé branco (ex.: "Pantanal, Brazil"). */
+    location?: string;
+    /** Nível de dificuldade — renderizado com um dot colorido. */
+    difficulty?: TripCardDifficulty;
+    /**
+     * Tour-type tag rendered as a chip at the top-left of the image
+     * (ex.: "Family Adventure", "Private Trip", "Luxury").
+     */
+    tag?: string;
 }
-declare function TripCard({ image, imageAlt, status, nights, period, title, description, cta, price, size, className, }: TripCardProps): react_jsx_runtime.JSX.Element;
+declare function TripCard(props: TripCardProps): react_jsx_runtime.JSX.Element;
 
 interface TripDuration {
     /** Total number of days */
@@ -2289,6 +2382,10 @@ interface TripDuration {
     /** Number of nights — defaults to days - 1 */
     nights?: number;
 }
+interface TripHeaderChip {
+    label: string;
+    href?: string;
+}
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
@@ -2307,6 +2404,8 @@ interface TripHeaderProps {
     duration?: TripDuration;
     /** Legacy tagline — shown only when destination/duration are not provided */
     tagline?: string;
+    /** Pill-shaped category chips rendered under the meta row (e.g. related tour categories). */
+    chips?: TripHeaderChip[];
     /**
      * Optional content rendered directly below the destination/duration meta
      * row. Use it to slot in a small Trustpilot widget, sponsor badge, etc.
@@ -2318,7 +2417,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, tagline, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface TripHighlight {
     label: string;
@@ -2379,7 +2478,7 @@ interface TripSectionIcons {
     itinerary?: React.ReactNode;
     whatIsIncluded?: React.ReactNode;
     /** Accordion sections */
-    keyInfo?: React.ReactNode;
+    howToGetThere?: React.ReactNode;
     meetingPoint?: React.ReactNode;
     optionalExtras?: React.ReactNode;
     whatToBring?: React.ReactNode;
@@ -2405,15 +2504,13 @@ interface TripPageProps {
         label: string;
         href?: string;
     }>;
+    /** Pill chips rendered under the hero meta row (e.g. related tour categories). */
+    chips?: TripHeaderChip[];
     highlights?: TripHighlight[];
     infoGroups?: TripInfoGroup[];
-    /**
-     * Rich-text "Key info" content (WYSIWYG). When provided, replaces the
-     * structured `infoGroups` render inside the accordion item — useful when
-     * the source of truth is a free-form WP WYSIWYG field instead of
-     * structured groups.
-     */
     keyInfo?: React.ReactNode;
+    /** Rich-text "How to get there" content (WYSIWYG) — directions, arrival info, etc. */
+    howToGetThere?: React.ReactNode;
     recommendedFor?: string;
     overview?: React.ReactNode;
     /** Optional list of long-form highlights rendered inside the Overview section. */
@@ -2441,6 +2538,8 @@ interface TripPageProps {
      */
     meetingPoint?: React.ReactNode;
     faqs?: TripFaq[];
+    /** Number of FAQs shown before the "Load more" button appears. @default 5 */
+    faqInitialCount?: number;
     /**
      * Per-section icon overrides for the trip details accordion. When a value
      * is supplied for a section, it replaces the hardcoded lucide icon next
@@ -2485,7 +2584,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, images, videoUrl, breadcrumb, highlights, infoGroups, keyInfo, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, food, termsAndConditions, meetingPoints, meetingPoint, faqs, sectionIcons, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, bookLabel, siteHeader, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, food, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, bookLabel, siteHeader, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {

package/dist/index.d.ts

@@ -268,6 +268,13 @@ interface OfferProps {
     confirmedState?: OfferConfirmedState;
     /** When true, opcionais (checkbox + stepper) ficam read-only. Usado em estado expirado. */
     interactionsDisabled?: boolean;
+    /**
+     * Quando true, "Book now" abre o BookingWizard interno (demo). Em produção
+     * (host com checkout próprio via `checkoutSlot`) deixe `false` para que o
+     * fallback do wizard interno nunca renderize — evita regressões em que
+     * fechar o `checkoutSlot` no host expõe um stepper demo com schema antigo.
+     */
+    internalDemoCheckout?: boolean;
     className?: string;
 }
 interface BookingShellProps {
@@ -358,7 +365,7 @@ declare function TransferDetailsBlock({ label, items, className, }: TransferDeta
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
 }): react_jsx_runtime.JSX.Element;
-declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, className, }: OfferProps): react_jsx_runtime.JSX.Element;
+declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, internalDemoCheckout, className, }: OfferProps): react_jsx_runtime.JSX.Element;
 
 type BookingStatus = "pending" | "confirmed" | "cancelled" | "completed" | "pendingRegistration" | "pendingPayment" | "pendingPaymentOverdue" | "complete";
 interface BookingTraveller {
@@ -1973,6 +1980,18 @@ interface FilterItem {
     label: string;
     /** Contagem de resultados disponíveis */
     count?: number;
+    /**
+     * Subitens aninhados (ex.: Brazil → Pantanal, Amazon, …).
+     * O pai vira um agregador: marcar seleciona todos os filhos;
+     * estado checked/indeterminate é derivado das seleções dos filhos.
+     */
+    children?: FilterItem[];
+    /**
+     * Expande o pai por padrão. Sem isso, pais começam recolhidos
+     * (chevron à direita) e o usuário precisa clicar para revelar os filhos.
+     * @default false
+     */
+    defaultExpanded?: boolean;
 }
 interface FilterGroup {
     id: string;
@@ -1982,7 +2001,29 @@ interface FilterGroup {
     items: FilterItem[];
     /** Abre este grupo por padrão */
     defaultOpen?: boolean;
+    /**
+     * Escopo: id de um item dentro de `items`. Quando definido, o grupo
+     * renderiza apenas os children desse item (não o item em si), permitindo
+     * "afunilar" o filtro para o contexto da página atual.
+     *
+     * Exemplo (WordPress taxonomy): na página "Brazil" passe
+     * `scopeItemId: "brazil"` para mostrar apenas as sub-regiões de Brazil.
+     * Se o item não existir ou não tiver children, o grupo é automaticamente
+     * omitido do painel.
+     */
+    scopeItemId?: string;
 }
+interface FilterSortOption {
+    id: string;
+    label: string;
+}
+/**
+ * Visual style of the filter panel.
+ * - "sidebar"    — vertical accordion list (default), good for the left rail.
+ * - "horizontal" — inline pill row of popover buttons, good for compact
+ *                  category pages where the trip grid uses the full width.
+ */
+type FilterPanelVariant = "sidebar" | "horizontal";
 interface FilterPanelProps {
     groups: FilterGroup[];
     /** Estado controlado: { groupId: string[] } */
@@ -1993,8 +2034,14 @@ interface FilterPanelProps {
     alwaysShowClear?: boolean;
     title?: string;
     className?: string;
-}
-declare function FilterPanel({ groups, value, onChange, onClearAll, alwaysShowClear, title, className, }: FilterPanelProps): react_jsx_runtime.JSX.Element;
+    /** Variação visual do painel. @default "sidebar" */
+    variant?: FilterPanelVariant;
+    /** Opções do "Sort by" popover (apenas no variant="horizontal"). */
+    sortOptions?: FilterSortOption[];
+    sort?: string;
+    onSortChange?: (id: string) => void;
+}
+declare function FilterPanel({ groups, value, onChange, onClearAll, alwaysShowClear, title, className, variant, sortOptions, sort, onSortChange, }: FilterPanelProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Configuration for any Trustpilot widget embedded in the design system.
@@ -2031,6 +2078,22 @@ interface TrustpilotWidgetConfig {
     starColor?: string;
     /** Fallback link target (e.g. "https://www.trustpilot.com/review/yourdomain.com"). */
     fallbackHref?: string;
+    /**
+     * Average rating shown by the fallback UI (when the Trustpilot bootstrap
+     * script can't render — typically because of ad-blockers).
+     */
+    fallbackScore?: number;
+    /** Review count shown by the fallback UI. */
+    fallbackCount?: number;
+    /** Short label shown next to the rating (e.g. "Excellent"). @default "Excellent" */
+    fallbackLabel?: string;
+    /** Layout for the fallback UI. @default auto — picked from styleHeight. */
+    fallbackVariant?: "mini" | "card";
+    /**
+     * Milliseconds to wait before showing the fallback if no widget content
+     * has been rendered by the bootstrap script. @default 3000
+     */
+    fallbackDelayMs?: number;
 }
 /**
  * Renders a Trustpilot widget div with the right data-* attributes and
@@ -2130,7 +2193,7 @@ interface MenuTripProps {
 }
 declare function MenuTrip({ sections, activeSection, onSelect, variant, bold, className, }: MenuTripProps): react_jsx_runtime.JSX.Element;
 
-type PhotoGalleryVariant = "grid" | "masonry" | "filmstrip" | "featured" | "carousel" | "fullBleed";
+type PhotoGalleryVariant = "grid" | "gridCompact" | "masonry" | "filmstrip" | "featured" | "carousel" | "fullBleed";
 interface PhotoGalleryPhoto {
     src: string;
     alt?: string;
@@ -2233,6 +2296,11 @@ type SiteHeaderVariant = "transparent" | "white" | "dark";
 interface SiteHeaderProps {
     variant?: SiteHeaderVariant;
     links?: SiteHeaderLink[];
+    /** Logo used on transparent/dark headers (defaults to the white asset). */
+    logoSrcLight?: string;
+    /** Logo used on the white header (defaults to the green/brand asset). */
+    logoSrcDark?: string;
+    /** Backwards-compatible single-logo override — applied to both variants when set. */
     logoSrc?: string;
     logoAlt?: string;
     languages?: SiteHeaderLanguage[];
@@ -2246,7 +2314,7 @@ interface SiteHeaderProps {
 }
 declare const DEFAULT_HEADER_LINKS: SiteHeaderLink[];
 declare const DEFAULT_LANGUAGES: SiteHeaderLanguage[];
-declare function SiteHeader({ variant, links, logoSrc, logoAlt, languages, currentLanguage, onLanguageChange, onSearch, onAccount, position, className, }: SiteHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SiteHeader({ variant, links, logoSrcLight, logoSrcDark, logoSrc, logoAlt, languages, currentLanguage, onLanguageChange, onSearch, onAccount, position, className, }: SiteHeaderProps): react_jsx_runtime.JSX.Element;
 
 declare function ThemeToggle({ className }: {
     className?: string;
@@ -2254,6 +2322,13 @@ declare function ThemeToggle({ className }: {
 
 type TripCardStatus = "sold-out" | "trending";
 type TripCardSize = "sm" | "md" | "lg";
+/**
+ * Visual style of the card.
+ * - "overlay"   — full-bleed image with dark gradient + white text on top (default).
+ * - "editorial" — image on top, white body below with title, excerpt, nights + price.
+ */
+type TripCardVariant = "overlay" | "editorial";
+type TripCardDifficulty = "easy" | "moderate" | "extreme";
 interface TripCardCta {
     /** Texto do link (ex: "Discover this trip" ou "5 dates available") */
     label: string;
@@ -2264,24 +2339,42 @@ interface TripCardProps {
     /** URL da imagem de capa */
     image: string;
     imageAlt?: string;
-    /** Badge de status exibido no topo esquerdo */
+    /** Badge de status (ex.: trending) — usado pelo variant="overlay". */
     status?: TripCardStatus;
     /** Número de noites */
     nights?: number;
-    /** Período (ex: "Feb - Mar") */
+    /** Período (ex: "Feb - Mar") — usado pelo variant="overlay". */
     period?: string;
     /** Título da viagem */
     title: string;
-    /** Descrição curta */
+    /** Descrição / excerpt curto — usado em ambos os variants. */
     description?: string;
-    /** Link/CTA de ação */
+    /** Link/CTA de ação — usado pelo variant="overlay". */
     cta?: TripCardCta;
-    /** Preço exibido ao lado do CTA (ex: "from € 769") */
+    /** Preço (ex: "from € 769"). */
     price?: string;
     size?: TripCardSize;
     className?: string;
+    /** Variação visual do card. @default "overlay" */
+    variant?: TripCardVariant;
+    /** Quando href é fornecido, o card editorial inteiro vira um link <a>. */
+    href?: string;
+    /** Mostra um botão de favorito (estilo Chip glass) no topo direito. */
+    favoritable?: boolean;
+    /** Estado controlado do favorito. */
+    favorited?: boolean;
+    onFavoriteToggle?: (next: boolean) => void;
+    /** Localização/região exibida no rodapé branco (ex.: "Pantanal, Brazil"). */
+    location?: string;
+    /** Nível de dificuldade — renderizado com um dot colorido. */
+    difficulty?: TripCardDifficulty;
+    /**
+     * Tour-type tag rendered as a chip at the top-left of the image
+     * (ex.: "Family Adventure", "Private Trip", "Luxury").
+     */
+    tag?: string;
 }
-declare function TripCard({ image, imageAlt, status, nights, period, title, description, cta, price, size, className, }: TripCardProps): react_jsx_runtime.JSX.Element;
+declare function TripCard(props: TripCardProps): react_jsx_runtime.JSX.Element;
 
 interface TripDuration {
     /** Total number of days */
@@ -2289,6 +2382,10 @@ interface TripDuration {
     /** Number of nights — defaults to days - 1 */
     nights?: number;
 }
+interface TripHeaderChip {
+    label: string;
+    href?: string;
+}
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
@@ -2307,6 +2404,8 @@ interface TripHeaderProps {
     duration?: TripDuration;
     /** Legacy tagline — shown only when destination/duration are not provided */
     tagline?: string;
+    /** Pill-shaped category chips rendered under the meta row (e.g. related tour categories). */
+    chips?: TripHeaderChip[];
     /**
      * Optional content rendered directly below the destination/duration meta
      * row. Use it to slot in a small Trustpilot widget, sponsor badge, etc.
@@ -2318,7 +2417,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, tagline, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface TripHighlight {
     label: string;
@@ -2379,7 +2478,7 @@ interface TripSectionIcons {
     itinerary?: React.ReactNode;
     whatIsIncluded?: React.ReactNode;
     /** Accordion sections */
-    keyInfo?: React.ReactNode;
+    howToGetThere?: React.ReactNode;
     meetingPoint?: React.ReactNode;
     optionalExtras?: React.ReactNode;
     whatToBring?: React.ReactNode;
@@ -2405,15 +2504,13 @@ interface TripPageProps {
         label: string;
         href?: string;
     }>;
+    /** Pill chips rendered under the hero meta row (e.g. related tour categories). */
+    chips?: TripHeaderChip[];
     highlights?: TripHighlight[];
     infoGroups?: TripInfoGroup[];
-    /**
-     * Rich-text "Key info" content (WYSIWYG). When provided, replaces the
-     * structured `infoGroups` render inside the accordion item — useful when
-     * the source of truth is a free-form WP WYSIWYG field instead of
-     * structured groups.
-     */
     keyInfo?: React.ReactNode;
+    /** Rich-text "How to get there" content (WYSIWYG) — directions, arrival info, etc. */
+    howToGetThere?: React.ReactNode;
     recommendedFor?: string;
     overview?: React.ReactNode;
     /** Optional list of long-form highlights rendered inside the Overview section. */
@@ -2441,6 +2538,8 @@ interface TripPageProps {
      */
     meetingPoint?: React.ReactNode;
     faqs?: TripFaq[];
+    /** Number of FAQs shown before the "Load more" button appears. @default 5 */
+    faqInitialCount?: number;
     /**
      * Per-section icon overrides for the trip details accordion. When a value
      * is supplied for a section, it replaces the hardcoded lucide icon next
@@ -2485,7 +2584,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, images, videoUrl, breadcrumb, highlights, infoGroups, keyInfo, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, food, termsAndConditions, meetingPoints, meetingPoint, faqs, sectionIcons, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, bookLabel, siteHeader, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, food, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, bookLabel, siteHeader, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {