@digital-b2c/coreui-kit 0.13.7 → 0.14.0

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ImgHTMLAttributes, AnchorHTMLAttributes, ReactNode, Ref, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, PropsWithChildren, JSX, FC, CSSProperties } from 'react';
 
@@ -42,6 +41,7 @@ declare const svgs: {
     pdf: string;
     externalLink: string;
     newIcon: string;
+    play: string;
     blankCheckbox: string;
     blankCheckboxWhite: string;
     checkedBox: string;
@@ -115,7 +115,7 @@ interface BrandsStripProps {
     size?: 'small';
 }
 
-declare const BrandsStrip: ({ className, variant, title, logos, cta, size, }: BrandsStripProps) => react_jsx_runtime.JSX.Element;
+declare const BrandsStrip: ({ className, variant, title, logos, cta, size, }: BrandsStripProps) => react.JSX.Element;
 
 declare const ButtonVariantReadOnly: readonly ["primary", "secondary", "ghost", "nofill", "grey", "nofillblack", "shiny", "tabbutton", "navnofillblack"];
 type TButtonVariant = (typeof ButtonVariantReadOnly)[number];
@@ -155,11 +155,11 @@ interface CardProps {
 }
 
 declare const Card: {
-    ({ className, variant, title, subtitle, cta, icon, logo, children, ref, }: CardProps): react_jsx_runtime.JSX.Element;
+    ({ className, variant, title, subtitle, cta, icon, logo, children, ref, }: CardProps): react.JSX.Element;
     displayName: string;
 } & {
-    Title: ({ children }: CardTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: CardSubtitleProps) => react_jsx_runtime.JSX.Element;
+    Title: ({ children }: CardTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: CardSubtitleProps) => react.JSX.Element;
 };
 
 type CountingCardTitleProps = {
@@ -174,8 +174,8 @@ interface CountingCardProps {
     children?: ReactNode;
 }
 
-declare const CountingCard: (({ className, title, count, image, children }: CountingCardProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: CountingCardTitleProps) => react_jsx_runtime.JSX.Element;
+declare const CountingCard: (({ className, title, count, image, children }: CountingCardProps) => react.JSX.Element) & {
+    Title: ({ children }: CountingCardTitleProps) => react.JSX.Element;
 };
 
 type ResourceView = 'grid' | 'list';
@@ -199,7 +199,7 @@ interface ResourceCardItemProps {
     }) => React.ReactNode;
 }
 
-declare const ResourceCardItem: ({ item, view, variant, renderLink }: ResourceCardItemProps) => react_jsx_runtime.JSX.Element;
+declare const ResourceCardItem: ({ item, view, variant, renderLink }: ResourceCardItemProps) => react.JSX.Element;
 
 type FilterOption = 'all' | 'pdf' | 'externalLink';
 type SortOption = 'latest' | 'oldest' | 'az' | 'za';
@@ -215,7 +215,7 @@ interface FilterBarProps {
     onSearchChange: (v: string) => void;
 }
 
-declare function FilterBar({ view, onViewChange, isMobile, filterValue, onFilterChange, sortValue, onSortChange, searchValue, onSearchChange, }: FilterBarProps): react_jsx_runtime.JSX.Element;
+declare function FilterBar({ view, onViewChange, isMobile, filterValue, onFilterChange, sortValue, onSortChange, searchValue, onSearchChange, }: FilterBarProps): react.JSX.Element;
 
 type InfoCardSubtitleProps = {
     children: ReactNode;
@@ -234,9 +234,9 @@ interface InfoCardProps {
     children?: ReactNode;
 }
 
-declare const InfoCard: (({ className, title, subtitle, icon, badge, children }: InfoCardProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: InfoCardTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: InfoCardSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const InfoCard: (({ className, title, subtitle, icon, badge, children }: InfoCardProps) => react.JSX.Element) & {
+    Title: ({ children }: InfoCardTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: InfoCardSubtitleProps) => react.JSX.Element;
 };
 
 interface PaginationProps {
@@ -257,9 +257,9 @@ interface PaginationProps {
     }) => ReactNode;
 }
 
-declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, showEllipsis, boundaryCount, siblingCount, hidePagesBorder, renderLink, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, showEllipsis, boundaryCount, siblingCount, hidePagesBorder, renderLink, }: PaginationProps) => react.JSX.Element;
 
-declare const Picture: ({ className, ...props }: PictureProps) => react_jsx_runtime.JSX.Element;
+declare const Picture: ({ className, ...props }: PictureProps) => react.JSX.Element;
 
 interface PracticeCardProps {
     className?: string;
@@ -268,7 +268,7 @@ interface PracticeCardProps {
     image?: IPicture;
 }
 
-declare const PracticeCard: ({ className, title, cta, image }: PracticeCardProps) => react_jsx_runtime.JSX.Element;
+declare const PracticeCard: ({ className, title, cta, image }: PracticeCardProps) => react.JSX.Element;
 
 interface SidebarCategory {
     label: string;
@@ -288,7 +288,7 @@ interface SidebarProps {
     onSelect: (index: number) => void;
 }
 
-declare const Sidebar: ({ categories, isMobile, onToggle, selectedIndex, onSelect, }: SidebarProps) => react_jsx_runtime.JSX.Element;
+declare const Sidebar: ({ categories, isMobile, onToggle, selectedIndex, onSelect, }: SidebarProps) => react.JSX.Element;
 
 interface UpcomingEventCardProps {
     className?: string;
@@ -304,7 +304,7 @@ interface UpcomingEventCardProps {
     showImage?: boolean;
 }
 
-declare const UpcomingEventCard: ({ className, image, date, title, location, description, cta, direction, showImage, }: UpcomingEventCardProps) => react_jsx_runtime.JSX.Element;
+declare const UpcomingEventCard: ({ className, image, date, title, location, description, cta, direction, showImage, }: UpcomingEventCardProps) => react.JSX.Element;
 
 type BadgeBaseProps = {
     children?: ReactNode;
@@ -382,7 +382,7 @@ interface NewsCardProps {
     }) => React.ReactNode;
 }
 
-declare const NewsCard: ({ className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react_jsx_runtime.JSX.Element;
+declare const NewsCard: ({ className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react.JSX.Element;
 
 type BlogPostContentBodyProps = {
     children: ReactNode;
@@ -394,8 +394,8 @@ interface BlogPostContentProps {
     body?: ReactNode;
 }
 
-declare const BlogPostContent: (({ className, body, children }: BlogPostContentProps) => react_jsx_runtime.JSX.Element) & {
-    Body: ({ children }: BlogPostContentBodyProps) => react_jsx_runtime.JSX.Element;
+declare const BlogPostContent: (({ className, body, children }: BlogPostContentProps) => react.JSX.Element) & {
+    Body: ({ children }: BlogPostContentBodyProps) => react.JSX.Element;
 };
 
 interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -405,7 +405,7 @@ interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     }) => ReactNode;
 }
 
-declare const Anchor: ({ children, isExternal, renderLink, ...props }: AnchorProps) => react_jsx_runtime.JSX.Element;
+declare const Anchor: ({ children, isExternal, renderLink, ...props }: AnchorProps) => react.JSX.Element;
 
 interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
@@ -444,9 +444,9 @@ interface CardCollectionProps {
     theme?: 'dark' | 'light';
 }
 
-declare const CardCollection: (({ className, variant, theme, title, subtitle, cards, ctaLabel, children, }: CardCollectionProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: CardCollectionTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: CardCollectionSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const CardCollection: (({ className, variant, theme, title, subtitle, cards, ctaLabel, children, }: CardCollectionProps) => react.JSX.Element) & {
+    Title: ({ children }: CardCollectionTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: CardCollectionSubtitleProps) => react.JSX.Element;
 };
 
 type ContactModuleSubtitleProps = {
@@ -468,9 +468,9 @@ interface ContactModuleProps {
     animateBlur?: boolean;
 }
 
-declare const ContactModule: (({ className, children, title, subtitle, ctas, image, blurred, animateBlur, }: ContactModuleProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: ContactModuleTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: ContactModuleSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const ContactModule: (({ className, children, title, subtitle, ctas, image, blurred, animateBlur, }: ContactModuleProps) => react.JSX.Element) & {
+    Title: ({ children }: ContactModuleTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: ContactModuleSubtitleProps) => react.JSX.Element;
 };
 
 interface IFooterLink {
@@ -496,7 +496,7 @@ interface FooterProps {
     supportContacts?: IFooterSupportGroup[];
 }
 
-declare const Footer: ({ className, supporters, navigationLinks, disclaimer, copyright, children, supportContacts, }: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const Footer: ({ className, supporters, navigationLinks, disclaimer, copyright, children, supportContacts, }: FooterProps) => react.JSX.Element;
 
 type HeroBannerSubtitleProps = {
     children: ReactNode;
@@ -522,9 +522,9 @@ interface HeroBannerProps {
     children?: ReactNode;
 }
 
-declare const HeroBanner: (({ className, variant, title, subtitle, backgroundImage, logo, cta, ctaLogo, brands, promoteToH1, children, }: HeroBannerProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: HeroBannerTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: HeroBannerSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const HeroBanner: (({ className, variant, title, subtitle, backgroundImage, logo, cta, ctaLogo, brands, promoteToH1, children, }: HeroBannerProps) => react.JSX.Element) & {
+    Title: ({ children }: HeroBannerTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: HeroBannerSubtitleProps) => react.JSX.Element;
 };
 
 interface HeroBannerCarouselItem {
@@ -541,7 +541,7 @@ interface HeroBannerCarouselProps {
     navNextIcon?: string;
 }
 
-declare const HeroBannerCarousel: ({ className, items, navPrevIcon, navNextIcon, }: HeroBannerCarouselProps) => react_jsx_runtime.JSX.Element | null;
+declare const HeroBannerCarousel: ({ className, items, navPrevIcon, navNextIcon, }: HeroBannerCarouselProps) => react.JSX.Element | null;
 
 interface InternalBrandsTabProps {
     title?: string;
@@ -564,7 +564,7 @@ interface InternalBrandsTabProps {
     }[];
 }
 
-declare const InternalBrandsTab: (props: InternalBrandsTabProps) => react_jsx_runtime.JSX.Element;
+declare const InternalBrandsTab: (props: InternalBrandsTabProps) => react.JSX.Element;
 
 type MiniBannerGoBackProps = {
     children: ReactNode;
@@ -601,10 +601,10 @@ interface MiniBannerProps {
     children?: ReactNode;
 }
 
-declare const MiniBanner: (({ className, variant, pretitle, title, subtitle, logo, background, cta, children, }: MiniBannerProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: MiniBannerTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: MiniBannerSubtitleProps) => react_jsx_runtime.JSX.Element;
-    GoBack: ({ children }: MiniBannerGoBackProps) => react_jsx_runtime.JSX.Element;
+declare const MiniBanner: (({ className, variant, pretitle, title, subtitle, logo, background, cta, children, }: MiniBannerProps) => react.JSX.Element) & {
+    Title: ({ children }: MiniBannerTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: MiniBannerSubtitleProps) => react.JSX.Element;
+    GoBack: ({ children }: MiniBannerGoBackProps) => react.JSX.Element;
 };
 
 type MiniSectionCtaSubtitleProps = {
@@ -625,9 +625,9 @@ interface MiniSectionCtaProps {
     children?: ReactNode;
 }
 
-declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, cta, children, }: MiniSectionCtaProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: MiniSectionCtaTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, cta, children, }: MiniSectionCtaProps) => react.JSX.Element) & {
+    Title: ({ children }: MiniSectionCtaTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react.JSX.Element;
 };
 
 interface BaseNavItem {
@@ -656,7 +656,7 @@ interface NavigationProps {
     };
 }
 
-declare const Navigation: (props: NavigationProps) => react_jsx_runtime.JSX.Element;
+declare const Navigation: (props: NavigationProps) => react.JSX.Element;
 
 type PracticePathCardsFooterProps = {
     children: ReactNode;
@@ -680,10 +680,10 @@ interface PracticePathCardsProps {
     cta?: ICta;
 }
 
-declare const PracticePathCards: (({ className, children, cards, title, subtitle, footer, cta, }: PracticePathCardsProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: PracticePathCardsTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: PracticePathCardsSubtitleProps) => react_jsx_runtime.JSX.Element;
-    Footer: ({ children }: PracticePathCardsFooterProps) => react_jsx_runtime.JSX.Element;
+declare const PracticePathCards: (({ className, children, cards, title, subtitle, footer, cta, }: PracticePathCardsProps) => react.JSX.Element) & {
+    Title: ({ children }: PracticePathCardsTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: PracticePathCardsSubtitleProps) => react.JSX.Element;
+    Footer: ({ children }: PracticePathCardsFooterProps) => react.JSX.Element;
 };
 
 type Teaser5050With3TextTitleProps = {
@@ -699,8 +699,8 @@ interface Teaser5050With3TextProps {
     children?: ReactNode;
 }
 
-declare const Teaser5050With3Text: (({ className, variant, title, cards, image, children, }: Teaser5050With3TextProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: Teaser5050With3TextTitleProps) => react_jsx_runtime.JSX.Element;
+declare const Teaser5050With3Text: (({ className, variant, title, cards, image, children, }: Teaser5050With3TextProps) => react.JSX.Element) & {
+    Title: ({ children }: Teaser5050With3TextTitleProps) => react.JSX.Element;
 };
 
 type Teaser5050WithCtaSubtitleProps = {
@@ -722,9 +722,9 @@ interface Teaser5050WithCtaProps {
     bgColor?: string;
 }
 
-declare const Teaser5050WithCta: (({ className, variant, title, subtitle, ctas, image, children, bgColor, }: Teaser5050WithCtaProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: Teaser5050WithCtaTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: Teaser5050WithCtaSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const Teaser5050WithCta: (({ className, variant, title, subtitle, ctas, image, children, bgColor, }: Teaser5050WithCtaProps) => react.JSX.Element) & {
+    Title: ({ children }: Teaser5050WithCtaTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: Teaser5050WithCtaSubtitleProps) => react.JSX.Element;
 };
 
 type EventListTitleProps = {
@@ -742,8 +742,8 @@ interface EventListProps extends PropsWithChildren {
     variant?: 'internalEventList';
 }
 
-declare const EventList: (({ className, title, items, cta, backgroundColor, variant, children, }: EventListProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: EventListTitleProps) => react_jsx_runtime.JSX.Element;
+declare const EventList: (({ className, title, items, cta, backgroundColor, variant, children, }: EventListProps) => react.JSX.Element) & {
+    Title: ({ children }: EventListTitleProps) => react.JSX.Element;
 };
 
 type TextEventRichTextProps = {
@@ -763,9 +763,9 @@ interface TextEventProps {
     children?: ReactNode;
 }
 
-declare const TextEvent: ((props: TextEventProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: TextEventTitleProps) => react_jsx_runtime.JSX.Element;
-    RichText: ({ children }: TextEventRichTextProps) => react_jsx_runtime.JSX.Element;
+declare const TextEvent: ((props: TextEventProps) => react.JSX.Element) & {
+    Title: ({ children }: TextEventTitleProps) => react.JSX.Element;
+    RichText: ({ children }: TextEventRichTextProps) => react.JSX.Element;
 };
 
 type TextBodyBodyProps = {
@@ -783,9 +783,9 @@ interface TextBodyProps {
     children?: ReactNode;
 }
 
-declare const TextBody: ((props: TextBodyProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: TextBodyTitleProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children }: TextBodyBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TextBody: ((props: TextBodyProps) => react.JSX.Element) & {
+    Title: ({ children }: TextBodyTitleProps) => react.JSX.Element;
+    Body: ({ children }: TextBodyBodyProps) => react.JSX.Element;
 };
 
 type TextCenterCtaInBottomSubtitleProps = {
@@ -804,9 +804,9 @@ interface TextCenterCtaInBottomProps {
     children?: ReactNode;
 }
 
-declare const TextCenterCtaInBottom: (({ className, title, subtitle, ctas, children, }: TextCenterCtaInBottomProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: TextCenterCtaInBottomTitleProps) => react_jsx_runtime.JSX.Element;
-    Subtitle: ({ children }: TextCenterCtaInBottomSubtitleProps) => react_jsx_runtime.JSX.Element;
+declare const TextCenterCtaInBottom: (({ className, title, subtitle, ctas, children, }: TextCenterCtaInBottomProps) => react.JSX.Element) & {
+    Title: ({ children }: TextCenterCtaInBottomTitleProps) => react.JSX.Element;
+    Subtitle: ({ children }: TextCenterCtaInBottomSubtitleProps) => react.JSX.Element;
 };
 
 interface ResourcesGridListProps {
@@ -819,7 +819,7 @@ interface ResourcesGridListProps {
     children?: ReactNode;
 }
 
-declare const ResourcesGridList: ({ className, items, categories, defaultView, defaultFilter, defaultSort, }: ResourcesGridListProps) => react_jsx_runtime.JSX.Element;
+declare const ResourcesGridList: ({ className, items, categories, defaultView, defaultFilter, defaultSort, }: ResourcesGridListProps) => react.JSX.Element;
 
 type BlogCardGridTitleProps = {
     children: ReactNode;
@@ -839,8 +839,8 @@ interface BlogCardGridProps extends PropsWithChildren {
     }) => React.ReactNode;
 }
 
-declare const BlogCardGrid: (({ title, items, backgroundColor, cta, className, hasContainer, gridProps, gridItemProps, renderLink, children, }: BlogCardGridProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: BlogCardGridTitleProps) => react_jsx_runtime.JSX.Element;
+declare const BlogCardGrid: (({ title, items, backgroundColor, cta, className, hasContainer, gridProps, gridItemProps, renderLink, children, }: BlogCardGridProps) => react.JSX.Element) & {
+    Title: ({ children }: BlogCardGridTitleProps) => react.JSX.Element;
 };
 
 type FeaturedNewsHighlightsTitleProps = {
@@ -860,8 +860,8 @@ interface FeaturedNewsHighlightsProps extends PropsWithChildren {
     }) => React.ReactNode;
 }
 
-declare const FeaturedNewsHighlights: (({ variant, title, items, backgroundColor, cta, className, hasContainer, renderLink, children, }: FeaturedNewsHighlightsProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: FeaturedNewsHighlightsTitleProps) => react_jsx_runtime.JSX.Element;
+declare const FeaturedNewsHighlights: (({ variant, title, items, backgroundColor, cta, className, hasContainer, renderLink, children, }: FeaturedNewsHighlightsProps) => react.JSX.Element) & {
+    Title: ({ children }: FeaturedNewsHighlightsTitleProps) => react.JSX.Element;
 };
 
 type NewsCardListPaginationProps = {
@@ -882,8 +882,8 @@ interface NewsCardListProps extends PropsWithChildren {
     }) => React.ReactNode;
 }
 
-declare const NewsCardList: (({ items, backgroundColor, className, currentPage, searchValue, onSearchChange, onSearchSubmit, searchInputProps, renderLink, children, }: NewsCardListProps) => react_jsx_runtime.JSX.Element) & {
-    Pagination: ({ children }: NewsCardListPaginationProps) => react_jsx_runtime.JSX.Element;
+declare const NewsCardList: (({ items, backgroundColor, className, currentPage, searchValue, onSearchChange, onSearchSubmit, searchInputProps, renderLink, children, }: NewsCardListProps) => react.JSX.Element) & {
+    Pagination: ({ children }: NewsCardListPaginationProps) => react.JSX.Element;
 };
 
 type BlogPostBodyProps = {
@@ -899,9 +899,9 @@ interface BlogPostProps extends PropsWithChildren, Omit<NewsCardProps, 'descript
     relatedArticles?: NewsCardProps[];
 }
 
-declare const BlogPost: (({ title, description: body, image, date, tag, relatedArticles, className, children, }: BlogPostProps) => react_jsx_runtime.JSX.Element) & {
-    Title: ({ children }: BlogPostTitleProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children }: BlogPostBodyProps) => react_jsx_runtime.JSX.Element;
+declare const BlogPost: (({ title, description: body, image, date, tag, relatedArticles, className, children, }: BlogPostProps) => react.JSX.Element) & {
+    Title: ({ children }: BlogPostTitleProps) => react.JSX.Element;
+    Body: ({ children }: BlogPostBodyProps) => react.JSX.Element;
 };
 
 type BlogSearchResultsListPaginationProps = {
@@ -925,9 +925,9 @@ interface BlogSearchResultsListProps extends PropsWithChildren {
     }) => React.ReactNode;
 }
 
-declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, searchValue, searchInputProps, className, renderLink, children, }: BlogSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
-    Search: ({ children }: BlogSearchResultsListSearchProps) => react_jsx_runtime.JSX.Element;
-    Pagination: ({ children, }: BlogSearchResultsListPaginationProps) => react_jsx_runtime.JSX.Element;
+declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, searchValue, searchInputProps, className, renderLink, children, }: BlogSearchResultsListProps) => react.JSX.Element) & {
+    Search: ({ children }: BlogSearchResultsListSearchProps) => react.JSX.Element;
+    Pagination: ({ children, }: BlogSearchResultsListPaginationProps) => react.JSX.Element;
 };
 
 type GlobalSearchResultsListPaginationProps = {
@@ -947,9 +947,29 @@ interface GlobalSearchResultsListProps extends PropsWithChildren {
     }) => React.ReactNode;
 }
 
-declare const GlobalSearchResultsList: (({ items, searchResult, className, renderLink, children, }: GlobalSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
-    Search: ({ children }: GlobalSearchResultsListSearchProps) => react_jsx_runtime.JSX.Element;
-    Pagination: ({ children, }: GlobalSearchResultsListPaginationProps) => react_jsx_runtime.JSX.Element;
+declare const GlobalSearchResultsList: (({ items, searchResult, className, renderLink, children, }: GlobalSearchResultsListProps) => react.JSX.Element) & {
+    Search: ({ children }: GlobalSearchResultsListSearchProps) => react.JSX.Element;
+    Pagination: ({ children, }: GlobalSearchResultsListPaginationProps) => react.JSX.Element;
+};
+
+type TextCenterWithMediaTitleProps = {
+    children: ReactNode;
+};
+
+interface TextCenterWithMediaProps {
+    className?: string;
+    title?: ReactNode;
+    thumbnail?: string;
+    videoUrl?: string;
+    loop?: boolean;
+    mute?: boolean;
+    hideControl?: boolean;
+    autoPlay?: boolean;
+    children?: ReactNode;
+}
+
+declare const TextCenterWithMedia: (({ className, title, thumbnail, videoUrl, loop, mute, hideControl, autoPlay, children, }: TextCenterWithMediaProps) => react.JSX.Element) & {
+    Title: ({ children }: TextCenterWithMediaTitleProps) => react.JSX.Element;
 };
 
 type IntersectionObserverOptions = {
@@ -977,4 +997,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Navigation, type NavigationProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };
+export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Navigation, type NavigationProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextCenterWithMedia, type TextCenterWithMediaProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };

package/dist/index.mjs

@@ -1,12 +1,13 @@
 import clsx43 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React66, { forwardRef, useId, useRef, useState, useCallback, useMemo, Children, isValidElement, useEffect, Fragment as Fragment$1 } from 'react';
+import React67, { forwardRef, useId, useRef, useState, useCallback, useMemo, useEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { FreeMode, A11y, Navigation, Pagination as Pagination$1 } from 'swiper/modules';
 import 'swiper/css';
+import ReactPlayer from 'react-player';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -306,6 +307,11 @@ var SvgIconExternalLink = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(_
   /* @__PURE__ */ jsx("path", { d: "M19.4784 15.1242C18.8387 14.3348 18.0226 13.6816 17.0853 13.2089C16.1481 12.7363 15.1117 12.4552 14.0464 12.3848C12.9812 12.3143 11.912 12.4562 10.9113 12.8008C9.91068 13.1453 9.00202 13.6845 8.24697 14.3817L3.77822 18.5067C2.42152 19.8034 1.67081 21.54 1.68778 23.3426C1.70475 25.1452 2.48804 26.8695 3.86894 28.1442C5.24985 29.4189 7.11788 30.1419 9.0707 30.1576C11.0235 30.1733 12.9049 29.4803 14.3096 28.228L16.8568 25.8767", stroke: "#949494", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" })
 ] }));
 var icon_external_link_default = SvgIconExternalLink;
+var SvgIconPlay = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({ xmlns: "http://www.w3.org/2000/svg", width: 134, height: 134, viewBox: "0 0 134 134", fill: "none" }, props), { children: [
+  /* @__PURE__ */ jsx("rect", { x: 38, y: 40, width: 58, height: 53, fill: "white" }),
+  /* @__PURE__ */ jsx("path", { d: "M53.4617 90.7285L90.7305 66.9993L53.4617 43.2702V90.7285ZM67.0013 122.833C59.3707 122.833 52.1589 121.367 45.3659 118.436C38.5728 115.505 32.6405 111.503 27.569 106.432C22.4975 101.36 18.4961 95.4278 15.5648 88.6348C12.6336 81.8417 11.168 74.6299 11.168 66.9993C11.168 59.2757 12.6336 52.0174 15.5648 45.2243C18.4961 38.4313 22.4975 32.5223 27.569 27.4973C32.6405 22.4723 38.5728 18.4941 45.3659 15.5629C52.1589 12.6316 59.3707 11.166 67.0013 11.166C74.7249 11.166 81.9833 12.6316 88.7763 15.5629C95.5694 18.4941 101.478 22.4723 106.503 27.4973C111.528 32.5223 115.507 38.4313 118.438 45.2243C121.369 52.0174 122.835 59.2757 122.835 66.9993C122.835 74.6299 121.369 81.8417 118.438 88.6348C115.507 95.4278 111.528 101.36 106.503 106.432C101.478 111.503 95.5694 115.505 88.7763 118.436C81.9833 121.367 74.7249 122.833 67.0013 122.833Z", fill: "#080808" })
+] }));
+var icon_play_default = SvgIconPlay;
 var svgs = {
   /* Card */
   ads: icon_ads_default,
@@ -329,6 +335,7 @@ var svgs = {
   pdf: icon_pdf_default,
   externalLink: icon_external_link_default,
   newIcon: icon_new_default,
+  play: icon_play_default,
   /* Button */
   blankCheckbox: icon_blank_checkbox_default,
   blankCheckboxWhite: icon_blank_checkbox_white_default,
@@ -374,7 +381,7 @@ var svgs = {
   xBlack: icon_x_black_default,
   xWhite: icon_x_white_default
 };
-var Icon = React66.memo(
+var Icon = React67.memo(
   (_a) => {
     var _b = _a, { type, size } = _b, props = __objRest(_b, ["type", "size"]);
     if (type) {
@@ -2716,7 +2723,7 @@ var MiniBanner = ({
         (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
         pretitleNode && /* @__PURE__ */ jsx("div", { className: clsx43(MiniBanner_module_default.pretitle, "small"), children: pretitleNode }),
         /* @__PURE__ */ jsxs("div", { className: MiniBanner_module_default.headingWrapper, children: [
-          goBackNode ? React66.cloneElement(goBackNode, {
+          goBackNode ? React67.cloneElement(goBackNode, {
             className: clsx43("back-button", MiniBanner_module_default["back-button"])
           }) : null,
           titleNode && /* @__PURE__ */ jsx("div", { className: clsx43(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode })
@@ -4237,7 +4244,7 @@ var NewsCardList = ({
             /* @__PURE__ */ jsx(BlogCardGrid2, { items: cards, hasContainer: false, renderLink })
           ] })
         ] }),
-        paginationNode ? React66.cloneElement(paginationNode, {
+        paginationNode ? React67.cloneElement(paginationNode, {
           className: clsx43("pagination", NewsCardList_module_default["pagination"])
         }) : null
       ] })
@@ -4353,7 +4360,7 @@ var BlogSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx("div", { className: clsx43("search-results-list", BlogSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxs(Container, { className: clsx43("container", BlogSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React66.isValidElement(searchNode) ? React66.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React67.isValidElement(searchNode) ? React67.cloneElement(searchNode, {
       className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx43("wrapper", BlogSearchResultsList_module_default["wrapper"]), children: [
@@ -4381,7 +4388,7 @@ var BlogSearchResultsList = ({
       ),
       /* @__PURE__ */ jsx(BlogCardGrid2, { items, hasContainer: false, renderLink })
     ] }),
-    paginationNode ? React66.cloneElement(paginationNode, {
+    paginationNode ? React67.cloneElement(paginationNode, {
       className: clsx43("pagination", BlogSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });
@@ -4424,7 +4431,7 @@ var GlobalSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx("div", { className: clsx43("search-results-list", GlobalSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxs(Container, { className: clsx43("container", GlobalSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React66.isValidElement(searchNode) ? React66.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React67.isValidElement(searchNode) ? React67.cloneElement(searchNode, {
       className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsx("div", { className: clsx43("wrapper", GlobalSearchResultsList_module_default["wrapper"]), children: /* @__PURE__ */ jsx(Grid, { role: "list", columns: 3, children: items.map((item, index) => {
@@ -4439,7 +4446,7 @@ var GlobalSearchResultsList = ({
         }
       ) }, (_a2 = item.title) != null ? _a2 : index);
     }) }) }),
-    paginationNode ? React66.cloneElement(paginationNode, {
+    paginationNode ? React67.cloneElement(paginationNode, {
       className: clsx43("pagination", GlobalSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });
@@ -4451,6 +4458,94 @@ var GlobalSearchResultsList2 = Object.assign(GlobalSearchResultsList, {
   Pagination: GlobalSearchResultsListPagination
 });
 
-export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation2 as Navigation, NewsCard, NewsCardList2 as NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };
+// src/widgets/TextCenterWithMedia/TextCenterWithMedia.module.scss
+var TextCenterWithMedia_module_default = {
+  textCenterWithMedia: "TextCenterWithMedia_module_textCenterWithMedia",
+  thumbnailWrapper: "TextCenterWithMedia_module_thumbnailWrapper",
+  thumbnail: "TextCenterWithMedia_module_thumbnail",
+  playButton: "TextCenterWithMedia_module_playButton",
+  modal: "TextCenterWithMedia_module_modal",
+  modalInner: "TextCenterWithMedia_module_modalInner",
+  modalHeader: "TextCenterWithMedia_module_modalHeader",
+  closeButton: "TextCenterWithMedia_module_closeButton",
+  video: "TextCenterWithMedia_module_video"
+};
+var TextCenterWithMediaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var TextCenterWithMedia = ({
+  className,
+  title,
+  thumbnail,
+  videoUrl,
+  loop = false,
+  mute = false,
+  hideControl = false,
+  autoPlay = false,
+  children
+}) => {
+  var _a;
+  const [isOpen, setIsOpen] = useState(false);
+  const dialogRef = useRef(null);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    var _a2, _b;
+    if (isOpen) {
+      (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
+    } else {
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
+    }
+  }, [isOpen]);
+  const handleClose = () => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+    setIsOpen(false);
+  };
+  const slots = resolveCompoundSlots(children, { title: TextCenterWithMediaTitle });
+  const titleNode = (_a = slots.title) != null ? _a : title;
+  return /* @__PURE__ */ jsxs("section", { className: clsx43(TextCenterWithMedia_module_default.textCenterWithMedia, className), children: [
+    /* @__PURE__ */ jsxs(Container, { children: [
+      titleNode && /* @__PURE__ */ jsx("h2", { className: "h2", children: titleNode }),
+      /* @__PURE__ */ jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Picture, { src: thumbnail, alt: "Video thumbnail", className: TextCenterWithMedia_module_default.thumbnail }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: TextCenterWithMedia_module_default.playButton,
+            onClick: () => setIsOpen(true),
+            "aria-label": "Play video",
+            children: /* @__PURE__ */ jsx(Icon, { type: "play", size: 90 })
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("dialog", { ref: dialogRef, className: TextCenterWithMedia_module_default.modal, onClose: handleClose, children: /* @__PURE__ */ jsxs("div", { className: TextCenterWithMedia_module_default.modalInner, children: [
+      /* @__PURE__ */ jsx("div", { className: TextCenterWithMedia_module_default.modalHeader, children: /* @__PURE__ */ jsx("button", { className: TextCenterWithMedia_module_default.closeButton, onClick: handleClose, "aria-label": "Close video", children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 30 }) }) }),
+      videoUrl && isOpen && /* @__PURE__ */ jsx(
+        ReactPlayer,
+        {
+          ref: videoRef,
+          src: videoUrl,
+          playing: autoPlay,
+          loop,
+          muted: mute,
+          controls: !hideControl,
+          className: TextCenterWithMedia_module_default.video,
+          width: "100%",
+          height: "100%"
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/widgets/TextCenterWithMedia/index.ts
+var TextCenterWithMedia2 = Object.assign(TextCenterWithMedia, {
+  Title: TextCenterWithMediaTitle
+});
+
+export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation2 as Navigation, NewsCard, NewsCardList2 as NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextCenterWithMedia2 as TextCenterWithMedia, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map