@royaloperahouse/harmonic 0.1.6 → 0.1.7-b

package/dist/helpers/formatStrings.d.ts

@@ -1,2 +1,3 @@
 export declare const setMaxCharLength: (value: string, maxLength: number) => string;
 export declare const formatPrice: (value: string | undefined) => string;
+export declare const capitalizeFirstLetter: (string: string) => string;

package/dist/helpers/forms.d.ts

@@ -0,0 +1,20 @@
+export declare const regex: {
+    signInEmail: RegExp;
+    latinOnly: RegExp;
+    firstName: RegExp;
+};
+export declare const formValidationMessages: {
+    requiredFieldMessage: string;
+    firstName: {
+        invalid: string;
+        required: string;
+    };
+    lastName: {
+        required: string;
+    };
+    email: {
+        required: string;
+        invalid: string;
+    };
+};
+export declare const getFormErrorMessage: (field: string, value?: string | undefined) => string | undefined;

package/dist/helpers/theme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeType } from '../types';
+export declare const themeToColor: (theme: ThemeType) => "primary-red" | "primary-black" | "secondary-blue";

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, 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, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, 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, SignUpForm } from './components';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
 import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './types';
 import { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, SignUpForm, };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeType } from '../../types';
+import './theme/fonts.css';
+interface HarmonicThemeProviderProps {
+    theme: ThemeType;
+    children: React.ReactNode;
+}
+declare const HarmonicThemeProvider: React.FC<HarmonicThemeProviderProps>;
+export default HarmonicThemeProvider;

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

@@ -0,0 +1,2 @@
+import HarmonicThemeProvider from './HarmonicThemeProvider';
+export default HarmonicThemeProvider;

package/dist/types/buttonTypes.d.ts

@@ -1,80 +1,52 @@
 import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
 import { IconNameType, DirectionType } from './iconTypes';
-import { Colors } from './types';
+import { ThemeColor } from './types';
 export declare enum ButtonType {
     Primary = "Primary",
     Secondary = "Secondary",
     Tertiary = "Tertiary"
 }
-export interface IButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+declare type BaseProps = {
+    /** Button content */
     children: ReactNode;
-    /**
-     * Function to be called when a button is clicked
-     */
+    /** Click handler */
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /**
-     * Name of the icon to be used in the button
-     */
+    /** Custom CSS classes */
+    className?: string;
+};
+declare type IconProps = {
+    /** Icon identifier */
     iconName?: IconNameType;
-    /**
-     * Direction of the icon used in the button
-     */
+    /** Icon position */
     iconDirection?: DirectionType;
-    /**
-     * ClassName for the icon to be used in the button
-     */
+    /** Icon custom classes */
     iconClassName?: string;
-    /**
-     * Color of text and icon
-     */
-    color?: Colors;
-}
-export interface IPrimaryButtonProps extends IButtonProps {
-    /**
-     * Button background color
-     */
-    bgColor?: Colors;
-    /**
-     * Disabled state
-     */
+};
+declare type StyleProps = {
+    /** Text color from theme */
+    textColor?: ThemeColor;
+    /** Background color from theme */
+    backgroundColor?: ThemeColor;
+    /** Border color from theme */
+    borderColor?: ThemeColor;
+    /** Disabled state */
     disabled?: boolean;
-}
-export interface IAuxiliaryButtonProps extends IButtonProps {
-    /**
-     * Button background color
-     */
-    bgColor?: Colors;
-    /**
-     * Function to be called when a button is clicked
-     */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-}
-export interface ITertiaryButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Color of text and icon
-     */
-    color?: Colors;
-    /**
-     * Function to be called when a button is clicked
-     */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-    children: ReactNode;
-}
-export interface IRotatorButtonsProps {
-    /**
-     * Set available Prev button
-     */
+};
+export declare type ButtonProps = BaseProps & IconProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type AuxiliaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor'>;
+export declare type PrimaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor' | 'disabled'>;
+export declare type SecondaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'borderColor' | 'disabled'>;
+export declare type TertiaryButtonProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & Pick<StyleProps, 'textColor' | 'disabled'>;
+export declare type RotatorButtonsProps = {
+    /** Enable/disable prev button */
     availablePrev?: boolean;
-    /**
-     * Set available Next button
-     */
+    /** Enable/disable next button */
     availableNext?: boolean;
-    /**
-     * Function to be called when a button is clicked
-     */
+    /** Previous button click handler */
     onClickPrev?: () => void;
-    /**
-     * Function to be called when a button is clicked
-     */
+    /** Next button click handler */
     onClickNext?: () => void;
-}
+    /** Custom CSS classes */
+    className?: string;
+};
+export {};

package/dist/types/creditListing.d.ts

@@ -10,4 +10,7 @@ export interface ICreditListing {
         dataROH: string;
     }[];
     columnCount?: number;
+    expandLargeEntries?: boolean;
+    largeColumnSpan?: number;
+    characterThreshold?: number;
 }

package/dist/types/editorial.d.ts

@@ -116,6 +116,10 @@ export interface IPromoWithTitleProps {
      * Semantic level of the title. Default is 2.
      */
     titleSemanticLevel?: TypographyLevel;
+    /**
+     * Additional CSS class names to apply to component.
+     */
+    className?: string;
 }
 export interface IThemePageHeadingProps {
     /**

package/dist/types/footer.d.ts

@@ -29,6 +29,7 @@ export declare type FooterData = {
 };
 export interface IFooterProps {
     data: FooterData;
+    className?: string;
 }
 export interface IPolicyLinksProps {
     items: PolicyLink[];

package/dist/types/index.d.ts

@@ -5,12 +5,12 @@ import { CarouselType } from './carousel';
 import { IconNameType } from './iconTypes';
 import { AspectRatio } from './image';
 import { TickboxMode } from './tickbox';
-import { ButtonType, IAuxiliaryButtonProps } from './buttonTypes';
+import { ButtonType } from './buttonTypes';
 import { EditorialLink } from './editorial';
 import { IPageHeadingCompactProps } from './impactHeader';
 import { IntegratedTimerProps, ITimerProps } from './timer';
 import { ICreditListing } from './creditListing';
 import { ModalWindowProps } from './modalWindow';
 import { IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './information';
-export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, IAuxiliaryButtonProps, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour, };
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour, };
 export type { FooterData };

package/dist/types/information.d.ts

@@ -36,10 +36,6 @@ export interface IInformationCTAProps {
      * or "Tertiary" (text only)
      */
     variant?: IInformationCtaVariant;
-    /**
-     * Theme to use for the CTA. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
-     */
-    theme?: IInformationCtaTheme;
     /**
      * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
      */
@@ -88,4 +84,8 @@ export interface IInformationProps {
      * Background Colour. Choices: None, Core, Cinema, Stream
      */
     background?: IInformationBackgroundColour;
+    /**
+     * Additional CSS class names to apply to component.
+     */
+    className?: string;
 }

package/dist/types/navigation.d.ts

@@ -23,9 +23,9 @@ export interface IAccountProps {
      */
     titleLink?: string;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
      */
-    colorPrimary?: string;
+    className?: string;
 }
 export interface IBasketProps {
     /**
@@ -57,14 +57,14 @@ export interface IBasketProps {
      * Function to be called when is clicked
      */
     onClick?: (e: string) => void;
-    /**
-     * The primary color
-     */
-    colorPrimary?: string;
     /**
      * For changing the color of the basket icon & text (when not in hover state)
      */
     isActive?: boolean;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
 }
 export interface ISearchProps {
     /**
@@ -76,9 +76,9 @@ export interface ISearchProps {
      */
     onClick?: () => void;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
      */
-    colorPrimary?: string;
+    className?: string;
 }
 export interface INavigationWrapperProps {
     /**
@@ -142,9 +142,9 @@ export interface INavTopProps {
      */
     onLink?: (e: string) => void;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
      */
-    colorPrimary?: string;
+    className?: string;
 }
 export interface IMenuOptionProps {
     /**
@@ -188,13 +188,13 @@ export interface INavigationProps {
      */
     menuData: IMenuProps;
     /**
-     * The url for the Desktop version of the logo
+     * Boolean for crest or no crest version of RBO logo
      */
-    desktopLogoUrl: string;
+    crest?: boolean;
     /**
-     * The url for the Mobile and Tablet version of the logo
+     * Additional CSS class names to apply to the navigation component.
      */
-    devicesLogoUrl?: string;
+    className?: string;
 }
 export interface ISearchBarProps {
     /**
@@ -205,6 +205,10 @@ export interface ISearchBarProps {
      * Function to be called when is closed
      */
     onClose?: (e?: React.MouseEvent) => void;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
 }
 export declare type TitleCTALink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**

package/dist/types/promoWithTags.d.ts

@@ -72,6 +72,10 @@ export interface IPromoWithTagsProps {
      * Params for Timer component
      */
     timerParams?: IntegratedTimerProps;
+    /**
+     * Additional CSS class names to apply to component.
+     */
+    className?: string;
 }
 export interface IPromoWithTagsStyledProps {
     /**

package/dist/types/signUpForm.d.ts

@@ -0,0 +1,80 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ThemeType } from './types';
+export interface ISignUpFormContextProps {
+    /**
+     * Form title to display
+     */
+    title: string;
+    /**
+     * Form text to display
+     */
+    message: string;
+}
+export interface ISignUpFormCTAProps {
+    /**
+     * Text to display on the CTA
+     */
+    text: string;
+    /**
+     * Link for the CTA
+     */
+    link: string;
+}
+export declare type SignUpRequestBody = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+};
+export interface ISignUpFormProps {
+    /**
+     * Form title and text of initial state
+     */
+    initialState: ISignUpFormContextProps;
+    /**
+     * Form title and text of submitted state
+     */
+    submittedState: ISignUpFormContextProps;
+    /**
+     * CTA to display Privacy Notice
+     */
+    ctaPrivacy: ISignUpFormCTAProps;
+    /**
+     * Theme to use for buttons. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
+     */
+    theme: Exclude<ThemeType, ThemeType.Schools>;
+    /**
+     * Error message shown to users in case of a server error
+     */
+    errorMessage: string;
+    /**
+     * Is user logged in flag. Default false
+     */
+    isLoggedIn?: boolean;
+    /**
+     * Function to handle the sign up form data
+     */
+    submitHandler: (data: SignUpRequestBody) => Promise<{
+        success: boolean;
+    }>;
+}
+export declare type SignUpFormComponentTitleProps = {
+    title: string;
+    isMobile?: boolean;
+};
+export declare type SignUpFormComponentMessageProps = {
+    message: string;
+    withDropdown?: boolean;
+};
+declare type FormValues = {
+    firstName: string;
+    lastName: string;
+    email: string;
+};
+export declare type SignUpFormComponentFormProps = Pick<ISignUpFormProps, 'ctaPrivacy' | 'theme' | 'errorMessage' | 'isLoggedIn' | 'submitHandler'> & {
+    isMobile: boolean;
+    isSuccess: boolean;
+    setIsSuccess: Dispatch<SetStateAction<boolean>>;
+    formValues: FormValues;
+    setFormValues: Dispatch<SetStateAction<FormValues>>;
+};
+export {};

package/dist/types/types.d.ts

@@ -17,6 +17,35 @@ export declare enum Colors {
     Stream = "stream",
     Cinema = "cinema"
 }
+export declare const ThemeColor: {
+    readonly primary: "primary";
+    readonly 'primary-red': "primary-red";
+    readonly 'primary-black': "primary-black";
+    readonly 'base-white': "base-white";
+    readonly 'base-black': "base-black";
+    readonly 'base-dark-grey': "base-dark-grey";
+    readonly 'base-mid-grey': "base-mid-grey";
+    readonly 'base-light-grey': "base-light-grey";
+    readonly 'base-transparent': "base-transparent";
+    readonly 'state-error': "state-error";
+    readonly 'state-medium': "state-medium";
+    readonly 'state-good': "state-good";
+    readonly 'state-focused': "state-focused";
+    readonly 'state-disabled': "state-disabled";
+    readonly 'rbo-red-hovered': "rbo-red-hovered";
+    readonly 'rbo-red-pressed': "rbo-red-pressed";
+    readonly 'rbo-black-hovered': "rbo-black-hovered";
+    readonly 'rbo-black-pressed': "rbo-black-pressed";
+    readonly 'black-hovered': "black-hovered";
+    readonly 'black-pressed': "black-pressed";
+    readonly 'white-hovered': "white-hovered";
+    readonly 'white-pressed': "white-pressed";
+    readonly 'secondary-yellow': "secondary-yellow";
+    readonly 'secondary-pink': "secondary-pink";
+    readonly 'secondary-orange': "secondary-orange";
+    readonly 'secondary-blue': "secondary-blue";
+};
+export declare type ThemeColor = keyof typeof ThemeColor;
 export declare enum ThemeType {
     Core = "core",
     Stream = "stream",
@@ -113,9 +142,17 @@ export interface ITabProps {
      */
     onReset?: () => void;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+    /**
+     * Defines the ARIA role of the element for accessibility purposes.
+     */
+    role?: string;
+    /**
+     * Provides an accessible label for screen readers to describe the element's purpose.
      */
-    colorPrimary?: string;
+    ariaLabel?: string;
 }
 export interface IDropdownProps {
     /**
@@ -155,9 +192,17 @@ export interface IDropdownProps {
      */
     onChange?: (e: string) => void;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+    /**
+     * Defines the ARIA role of the element for accessibility purposes.
+     */
+    role?: string;
+    /**
+     * Provides an accessible label for screen readers to describe the element's purpose.
      */
-    colorPrimary?: string;
+    ariaLabel?: string;
 }
 export interface ITabsProps {
     /**
@@ -177,16 +222,11 @@ export interface ITabsProps {
      */
     onChange?: (e: string) => void;
     /**
-     * The primary color
+     * Additional CSS class names to apply to the navigation component.
      */
-    colorPrimary?: string;
-}
-export interface IDropdowItemProps extends StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>> {
-    /**
-     * The primary color
-     */
-    colorPrimary?: string;
+    className?: string;
 }
+export declare type IDropdowItemProps = StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export interface IControlledDropdownProps {
     /**
      * Text displayed as heading in the dropdown
@@ -196,10 +236,6 @@ export interface IControlledDropdownProps {
      * options to display
      */
     options?: IOptionItem[];
-    /**
-     * Color for active status (default primary)
-     */
-    activeColor?: string;
     /**
      * Set if the dropdown is active or not
      */
@@ -232,12 +268,12 @@ export interface IControlledDropdownProps {
      * Callback called when main link or last option lose focus
      */
     onBlur?: () => void;
-}
-export interface IControlledDropdownHeaderProps extends StyledProps<any> {
     /**
-     * Color for active status (default primary)
+     * Additional CSS class names to apply to the navigation component.
      */
-    activeColor: string;
+    className?: string;
+}
+export interface IControlledDropdownHeaderProps extends StyledProps<any> {
     /**
      * Set if the dropdown is active or not
      */

package/dist/types/typography.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { StyledProps } from 'styled-components';
 export declare type HarmonicSize = 'small' | 'medium' | 'large';
-export declare type HarmonicColors = 'black' | 'red' | 'grey';
+export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey';
 export interface IGenericTypographyProps {
     children: ReactNode;
     size?: HarmonicSize;
@@ -9,6 +9,7 @@ export interface IGenericTypographyProps {
     color?: HarmonicColors;
     em?: boolean;
     bold?: boolean;
+    className?: string;
 }
 export interface IHarmonicHeaderProps extends IGenericTypographyProps {
     hierarchy: 'h1' | 'h2' | 'h3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "0.1.6",
+  "version": "0.1.7-b",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,20 +65,19 @@
     "@size-limit/file": "^11.1.6",
     "@size-limit/webpack": "^11.1.6",
     "@size-limit/webpack-why": "^11.1.6",
-    "@storybook/addon-a11y": "8.4.0",
-    "@storybook/addon-docs": "8.4.0",
-    "@storybook/addon-essentials": "8.4.0",
-    "@storybook/addon-jest": "8.4.0",
-    "@storybook/addon-links": "8.4.0",
-    "@storybook/addon-mdx-gfm": "8.4.0",
-    "@storybook/addon-toolbars": "8.4.0",
+    "@storybook/addon-a11y": "^8.6.10",
+    "@storybook/addon-designs": "^8.2.1",
+    "@storybook/addon-docs": "^8.6.10",
+    "@storybook/addon-essentials": "^8.6.10",
+    "@storybook/addon-jest": "^8.6.10",
+    "@storybook/addon-links": "^8.6.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addons": "7.6.20",
-    "@storybook/blocks": "8.4.0",
-    "@storybook/react": "8.4.0",
-    "@storybook/react-webpack5": "8.4.0",
-    "@storybook/storybook-deployer": "2.8.11",
-    "@storybook/theming": "8.4.0",
+    "@storybook/blocks": "^8.6.10",
+    "@storybook/manager-api": "^8.6.10",
+    "@storybook/react": "^8.6.10",
+    "@storybook/react-webpack5": "^8.6.10",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/theming": "^8.6.10",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -106,7 +105,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.12.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.0",
@@ -120,7 +119,7 @@
     "react-test-renderer": "^17.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.1.6",
-    "storybook": "8.4.0",
+    "storybook": "^8.6.10",
     "styled-components": "5.3.9",
     "ts-jest": "^29.0.0",
     "tsdx": "^0.14.1",
@@ -143,4 +142,4 @@
       "npx prettier src --write --uncommitted"
     ]
   }
-}
+}