@royaloperahouse/harmonic 0.4.1 → 0.5.0-a

package/dist/helpers/accessibility.d.ts

@@ -0,0 +1 @@
+export declare function useFocusTrap(containerRef: React.RefObject<HTMLElement>, onEscape?: () => void, enabled?: boolean): void;

package/dist/helpers/devices.d.ts

@@ -2,6 +2,7 @@ export declare const useIOS: () => boolean;
 export declare const isMobile: () => boolean;
 export declare const useMobile: () => boolean;
 export declare const useViewport: () => {
+    hydrated: boolean;
     width: number;
     isMobile: boolean;
     isTablet: boolean;

package/dist/index.d.ts

@@ -1,11 +1,14 @@
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls } from './components';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls } from './components';
+import BodyContent from './components/molecules/BodyContent';
+import Quote from './components/molecules/Quote';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
 import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
 import { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
-import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
+import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeProvider';
 import { HarmonicSize } from './types/typography';
 import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
+export { useHarmonicTheme };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };

package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import { ThemeType } from '../../types';
 import './theme/fonts.css';
+import './theme/typography.css';
+export declare const DEFAULT_THEME = ThemeType.Core;
 interface HarmonicThemeProviderProps {
     theme: ThemeType;
     children: React.ReactNode;
 }
+export declare const HarmonicThemeContext: React.Context<ThemeType>;
+export declare const useHarmonicTheme: () => ThemeType;
 declare const HarmonicThemeProvider: React.FC<HarmonicThemeProviderProps>;
 export default HarmonicThemeProvider;

package/dist/styles/HarmonicThemeProvider/index.d.ts

@@ -1,2 +1,3 @@
-import HarmonicThemeProvider from './HarmonicThemeProvider';
+import HarmonicThemeProvider, { useHarmonicTheme } from './HarmonicThemeProvider';
 export default HarmonicThemeProvider;
+export { useHarmonicTheme };

package/dist/types/anchorBar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditorialLink } from './editorial';
+import { IGridItemProps } from './types';
 export interface IAnchorBarProps {
     /** CTA for anchor bar */
     cta: EditorialLink;
@@ -11,4 +12,8 @@ export interface IAnchorBarProps {
     onCloseHandler?: () => void;
     /** Custom CSS classes */
     className?: string;
+    /** Flag indicating whether the anchor bar should have a shadow */
+    withShadow?: boolean;
+    /** Optional grid item props to allow for different page alignments */
+    grid?: IGridItemProps;
 }

package/dist/types/buttonTypes.d.ts

@@ -50,6 +50,12 @@ export declare type RotatorButtonsProps = {
     onClickPrev?: () => void;
     /** Next button click handler */
     onClickNext?: () => void;
+    /** Show fullscreen button */
+    showFullscreen?: boolean;
+    /** Fullscreen button click handler */
+    onClickFullscreen?: () => void;
+    /** Is in fullscreen mode */
+    isFullscreen?: boolean;
     /** Custom CSS classes */
     className?: string;
 };

package/dist/types/contactCard.d.ts

@@ -1,9 +1,12 @@
-import { StyledProps } from 'styled-components';
 export interface IContactCardProps {
     /**
-     * Name
+     * Title
      */
-    name: string;
+    title: string;
+    /**
+     * Title suffix
+     */
+    titleSuffix?: string;
     /**
      * Description
      */
@@ -25,24 +28,7 @@ export interface IContactCardProps {
      */
     address?: string;
     /**
-     * Set visibility of the top border
-     */
-    hideTopBorder?: boolean;
-    /**
-     * Set visibility of the top border
-     */
-    hideBottomBorder?: boolean;
-}
-export interface IContactCardWrapperProps extends StyledProps<{
-    hideTopBorder: boolean;
-    hideBottomBorder: boolean;
-}> {
-    /**
-     * Set visibility of the top border
-     */
-    hideTopBorder: boolean;
-    /**
-     * Set visibility of the bottom border
+     * The component's class name
      */
-    hideBottomBorder: boolean;
+    className?: string;
 }

package/dist/types/creditListing.d.ts

@@ -2,7 +2,7 @@ import { ListingPerson } from './types';
 export interface ICreditListing {
     roles: {
         name: string;
-        people: ListingPerson[];
+        people: ListingPerson[] | ListingPerson[][];
         description: string;
         musicTitle: string[];
         replacement: string;

package/dist/types/editorial.d.ts

@@ -2,25 +2,19 @@ import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElemen
 import { StyledProps } from 'styled-components';
 import { ButtonType } from './buttonTypes';
 import { DirectionType, IconNameType } from './iconTypes';
-import { Colors, IVideoWithControlsSettings, ThemeColor } from './types';
-import { HarmonicSize, HeaderHierarchy, TypographyLevel } from './typography';
+import { IVideoWithControlsSettings, ThemeColor, ThemeType } from './types';
+import { HarmonicSize, HeaderHierarchy } from './typography';
 export interface IEditorialProps {
-    /**
-     * Text placed in the editorial component
-     */
+    /** Text placed in the editorial component */
     text: string;
-    /**
-     * Subtitle placed in the editorial component
-     */
+    /** Subtitle placed in the editorial component */
     subtitle?: string;
-    /**
-     * Position of the image in the editorial component
-     */
+    /** Position of the image in the editorial component */
     imagePosition?: 'left' | 'right';
-    /**
-     * Image tag or component to be displayed in the editorial component with aspect ratio 1:1
-     */
+    /** Image tag or component to be displayed in the editorial component with aspect ratio 1:1 */
     children: ReactElement<HTMLImageElement>;
+    /** Custom CSS classes */
+    className?: string;
 }
 export interface IEditorialGridProps {
     /**
@@ -153,17 +147,21 @@ export interface IThemePageHeadingProps {
      */
     sponsor?: boolean;
     /**
-     * Semantic level of the title. Default is 1.
+     * Header Hierarchy for the title. Default is h1.
      */
-    semanticLevel?: TypographyLevel;
+    hierarchy: HeaderHierarchy;
     /**
-     * Character limit for the text
+     * Class name for theme styling
      */
-    copyCharLimit?: number;
+    className?: string;
     /**
-     * Character limit for the title
+     * Show Cinema / Stream badge
      */
-    titleCharLimit?: number;
+    showBadge?: boolean;
+    /**
+     * Theme for badge
+     */
+    theme: ThemeType;
 }
 export interface IPageHeadingProps extends IThemePageHeadingProps {
     /**
@@ -251,9 +249,13 @@ export interface IContentSummaryProps {
      */
     fullyClickable?: boolean;
     /**
-     * The base semantic header level for the component: 1 | 2 | 3 | 4 | 5 | 6
+     * The semantic header level for the component
+     */
+    headerSemanticLevel?: HeaderHierarchy;
+    /**
+     * The component's class name
      */
-    baseSemanticLevel?: TypographyLevel;
+    className?: string;
 }
 export interface IPanelHeadingProps {
     /**
@@ -267,7 +269,7 @@ export interface IPanelHeadingProps {
     /**
      * Colour of the info panel background
      */
-    color?: Colors;
+    color?: ThemeColor;
     /**
      * Reference of the div to scroll to when clicking on Scroll Down
      */

package/dist/types/footer.d.ts

@@ -1,20 +1,4 @@
-import { IconNameType } from './iconTypes';
-export declare type CommonLink = {
-    href: string;
-    title: string;
-    dataRoh: string;
-};
-export declare type PolicyLink = CommonLink & {
-    name: string;
-};
-export declare type SocialMediaLink = {
-    dataRoh: string;
-    name: IconNameType;
-    href: string;
-};
-export declare type ExternalLink = CommonLink & {
-    target?: string;
-};
+import { CommonLink, ExternalLink, PolicyLink, SocialMediaLink } from './links';
 export declare type Newsletter = {
     text: string;
     link: CommonLink;
@@ -26,6 +10,7 @@ export declare type FooterData = {
     contact: CommonLink;
     artsLogo: ExternalLink;
     additionalInfo: string;
+    sponsorImageSource?: string;
 };
 export interface IFooterProps {
     data: FooterData;

package/dist/types/image.d.ts

@@ -38,17 +38,13 @@ export interface IImageAspectRatioWrapperProps {
     alt?: string;
 }
 export interface IImageWithCaptionProps {
-    /**
-     * Aspect ratio of the contained image
-     */
+    /** Aspect ratio of the contained image */
     aspectRatio?: AspectRatio;
-    /**
-     * Image caption or credit
-     */
+    /** Image caption or credit */
     caption: string;
-    /**
-     * Image element
-     */
+    /** Alternative text describing the image content for accessibility purposes. */
+    altText?: string;
+    /** Image element */
     children: ReactElement<HTMLImageElement>;
 }
 export interface IImageWithCaptionWrapperProps extends StyledProps<{

package/dist/types/impactHeader.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EditorialLink } from '../types';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { EditorialLink, ThemeColor } from '../types';
 import { HeaderHierarchy, TypographyLevel } from './typography';
 export interface CustomSponsorImageData {
     /**
@@ -187,4 +187,24 @@ export interface IPageHeadingPromoProps {
      * Badge variant
      */
     badge?: PageHeadingPromoBadge;
+    /** Custom CSS classes */
+    className?: string;
+}
+export interface IPageHeadingHighlightProps {
+    /**
+     * Image to display in the right hand panel, aspect ratio 4:3
+     */
+    image: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Optional change to background color
+     */
+    background?: ThemeColor;
+    /**
+     * The component(s) to be wrapped in the page header
+     */
+    children: ReactNode;
+    /**
+     * Custom CSS classes
+     */
+    className?: string;
 }

package/dist/types/information.d.ts

@@ -1,6 +1,5 @@
 import { DirectionType, IconNameType } from './iconTypes';
-import { LinkTarget } from './types';
-import type { ThemeChildProps } from './types';
+import { LinkTarget, ThemeType } from './types';
 import type { HarmonicSize } from './typography';
 export declare const InformationCtaVariants: {
     readonly Primary: "Primary";
@@ -9,60 +8,41 @@ export declare const InformationCtaVariants: {
     readonly TextLink: "TextLink";
 };
 export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
-declare type ThemeProps = Pick<ThemeChildProps, 'theme'>;
-export interface IInformationCTAProps extends ThemeProps {
-    /**
-     * Text to display on the CTA
-     */
+export interface IInformationCTAProps {
+    /** Text to display on the CTA */
     text: string;
-    /**
-     * Link for the CTA
-     */
+    /** Link for the CTA */
     link: string;
-    /**
-     * Style of the CTA
-     */
+    /** Style of the CTA */
     variant?: InformationCtaVariant;
-    /**
-     * Name of the icon to be used in the button
-     */
+    /** Name of the icon to be used in the button */
     iconName?: IconNameType;
-    /**
-     * Direction of the icon used in the button
-     */
+    /** Direction of the icon used in the button */
     iconDirection?: DirectionType;
-    /**
-     * Attribute to specify where to open the link
-     */
+    /** Attribute to specify where to open the link */
     target?: LinkTarget;
+    /** Custom CSS classes */
+    className?: string;
 }
-export declare type InformationCTAWrapperProps = Pick<IInformationCTAProps, 'variant' | 'theme'>;
+export declare type InformationCTAWrapperProps = {
+    /** Style of the CTA */
+    variant: InformationCtaVariant;
+    /** Theme options */
+    theme?: ThemeType;
+};
 export interface IInformationTitleProps {
-    /**
-     * Title text to display
-     */
+    /** Title text to display */
     text: string;
-    /**
-     * The size of the title text
-     */
+    /** The size of the title text */
     textSize: HarmonicSize;
 }
-export interface IInformationProps extends ThemeProps {
-    /**
-     * Main body text to display in the Information Component
-     */
+export interface IInformationProps {
+    /**  Main body text to display in the Information Component */
     body: string;
-    /**
-     * Optional CTA to display underneath the body text
-     */
+    /** Optional CTA to display underneath the body text */
     cta?: IInformationCTAProps;
-    /**
-     * Title options for the component
-     */
+    /** Title options for the component */
     title?: IInformationTitleProps;
-    /**
-     * Additional CSS class names to apply to component.
-     */
+    /** Custom CSS classes */
     className?: string;
 }
-export {};

package/dist/types/links.d.ts

@@ -0,0 +1,17 @@
+import { IconNameType } from './iconTypes';
+export declare type CommonLink = {
+    href: string;
+    title: string;
+    dataRoh: string;
+};
+export declare type PolicyLink = CommonLink & {
+    name: string;
+};
+export declare type SocialMediaLink = {
+    dataRoh: string;
+    name: IconNameType;
+    href: string;
+};
+export declare type ExternalLink = CommonLink & {
+    target?: string;
+};

package/dist/types/navigation.d.ts

@@ -1,6 +1,6 @@
-import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import React, { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { DirectionType, IconNameType } from './iconTypes';
-import { Colors, IOptionItem } from './types';
+import { Colors, IOptionItem, ThemeColor } from './types';
 export interface IAccountProps {
     /**
      * The text of the title
@@ -79,6 +79,10 @@ export interface ISearchProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * Reference to the search icon element for focusing
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 export interface INavigationWrapperProps {
     /**
@@ -145,6 +149,10 @@ export interface INavTopProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * Search button ref for focus management
+     */
+    searchButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export interface IMenuOptionProps {
     /**
@@ -195,6 +203,10 @@ export interface INavigationProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * Defines which tag the button should skip to. Default: 'main-content'.
+     */
+    skipToId?: string;
 }
 export interface ISearchBarProps {
     /**
@@ -205,6 +217,15 @@ export interface ISearchBarProps {
      * Function to be called when is closed
      */
     onClose?: (e?: React.MouseEvent) => void;
+    /**
+     * If true, traps keyboard focus inside the search bar.
+     * Set to false when used inline on a page.
+     */
+    trapFocus?: boolean;
+    /**
+     * Reference to the input element for focusing
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
     /**
      * Additional CSS class names to apply to the navigation component.
      */
@@ -245,7 +266,7 @@ export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
      * Color of text and icon
      */
-    color?: Colors;
+    color?: ThemeColor;
 };
 export interface IAnchorBarAbsolutePositionParams {
     /**
@@ -258,26 +279,20 @@ export interface IAnchorBarAbsolutePositionParams {
     topOffset: number;
 }
 export interface IAnchorBarProps {
-    /**
-     * Tabs displayed in the anchor bar
-     */
+    /** Tabs displayed in the anchor bar */
     tabs: AnchorBarTab[];
-    /**
-     * Function to be called when a tab is clicked
-     */
-    onTabClick?: (e: MouseEvent, id: string) => void;
-    /**
-     * Set the id of the tab actived
-     */
+    /** Function to be called when a tab is clicked */
+    onTabClick?: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
+    /** Set the id of the active tab */
     activeTab?: string;
-    /**
-     * Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device
-     */
+    /** Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device */
     absolutePositionParams?: IAnchorBarAbsolutePositionParams;
-    /**
-     * Boolean to set bottom border
-     */
+    /** Boolean to set bottom border */
     bottomBorder?: boolean;
+    /** Flag indicating whether the bar should have a shadow */
+    withShadow?: boolean;
+    /** Custom CSS classes */
+    className?: string;
 }
 export interface ITitleCTAProps {
     /**
@@ -314,64 +329,40 @@ export interface IAnchorTabsListProps {
     hasTwoArrows: boolean;
 }
 export interface IAnchorTabBarBorderProps {
-    /**
-     * Boolean to set bottom border
-     */
-    bottomBorder: boolean;
-}
-export interface IAnchorTabArrowsBoxProps {
-    /**
-     * Boolean to determine width of the arrows container
-     */
-    fullWidth: boolean;
+    /** Boolean to set bottom border */
+    bottomBorder?: boolean;
+    /** Flag indicating whether the anchor bar should have a shadow */
+    withShadow?: boolean;
 }
 export interface ITabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
-    /**
-     * Function to be called when a button is clicked
-     */
+    /** Function to be called when a button is clicked */
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /**
-     * Name of the icon to be used in the button
-     */
+    /** Name of the icon to be used in the button */
     iconName?: IconNameType;
-    /**
-     * Direction of the icon used in the button
-     */
+    /** Direction of the icon used in the button */
     iconDirection?: DirectionType;
-    /**
-     * Color of text and icon
-     */
-    color?: Colors;
-    /**
-     * Color of text and icon on hover
-     */
-    hoverColor?: Colors;
-    /**
-     * Set if tab is selected or not
-     */
+    /** Color of text and icon */
+    color?: ThemeColor;
+    /** Color of text and icon on hover */
+    hoverColor?: ThemeColor;
+    /** Set if tab is selected or not */
     selected?: boolean;
+    /** Custom CSS classes */
+    className?: string;
 }
 export interface IStickyBarProps {
     children: ReactNode;
-    /**
-     * Set columnstart in Desktop
-     */
+    /** Set columnStart in Desktop */
     columnStartDesktop?: number;
-    /**
-     * Set columnSpan in Desktop
-     */
+    /** Set columnSpan in Desktop */
     columnSpanDesktop?: number;
-    /**
-     * Set columnstart in Device
-     */
+    /** Set columnStart in Device */
     columnStartDevice?: number;
-    /**
-     * Set columnSpam in Device
-     */
+    /** Set columnSpan in Device */
     columnSpanDevice?: number;
-    /**
-     * Hide bottom border line
-     */
-    hideBottomBorder?: boolean;
+    /** Boolean to set bottom border */
+    bottomBorder?: boolean;
+    /** Custom CSS classes */
+    className?: string;
 }

package/dist/types/pagination.d.ts

@@ -0,0 +1,9 @@
+export declare type PaginationNavProps = {
+    page: number;
+    children: React.ReactNode;
+    onPageChange?: (page: number) => void;
+    baseUrl?: string;
+    keyProp?: string;
+    testId?: string;
+    ariaLabel?: string;
+};

package/dist/types/promoWithTags.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { EditorialLink, PromoLinks } from './editorial';
+import { EditorialLink, PromoLinks, PromoTitleHierarchy } from './editorial';
 import { IntegratedTimerProps } from './timer';
 import { Image } from './types';
 export interface IPromoWithTagsProps {
@@ -15,6 +15,10 @@ export interface IPromoWithTagsProps {
      * Title size
      */
     titleSize?: 'small' | 'large';
+    /**
+     * Semantic level of the promo title header - h2 or h3.
+     */
+    titleHierarchy: PromoTitleHierarchy;
     /**
      * Subtitle placed in the editorial component
      */
@@ -82,4 +86,8 @@ export interface IPromoWithTagsStyledProps {
      * Sets margin for the tags container
      */
     marginBottom?: number;
+    /**
+     * Sets mobile margin for the tags container
+     */
+    mobileMarginBottom?: number;
 }