@royaloperahouse/harmonic 0.1.0 → 0.1.1-b-test

package/dist/components/atoms/Dropdown/Dropdown.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IDropdownProps } from '../../../types/types';
-declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, colorPrimary, }: IDropdownProps) => JSX.Element;
+declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, colorPrimary, }: IDropdownProps) => React.JSX.Element;
 export default Dropdown;

package/dist/components/atoms/Icons/StorybookSupport/Iconography.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DirectionType, IconNameType } from '../../../../types/iconTypes';
 export interface IStorybookIcon {
     iconName: IconNameType;
@@ -8,4 +9,4 @@ export interface IStorybookIcon {
 export interface IIconographyGridProps {
     iconsArray: IStorybookIcon[];
 }
-export declare function Iconography({ iconsArray }: IIconographyGridProps): JSX.Element;
+export declare function Iconography({ iconsArray }: IIconographyGridProps): React.JSX.Element;

package/dist/components/atoms/Icons/SvgIcons/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const IconLibrary: {
     AddToMyList: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Arrow: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;

package/dist/components/atoms/Logo/Logo.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ILogoProps } from '../../../types/types';
-declare const Logo: ({ id, dataRoh, urlLink, desktopImage, devicesImage, title, altText, }: ILogoProps) => JSX.Element;
+declare const Logo: ({ id, dataRoh, urlLink, desktopImage, devicesImage, title, altText, }: ILogoProps) => React.JSX.Element;
 export default Logo;

package/dist/components/atoms/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { IRadioProps } from '../../../types/formTypes';
 /**
  * DEPRECATED. Use Radio2 instead
  */
-declare const Radio: ({ checked, error, label, onChange }: IRadioProps) => JSX.Element;
+declare const Radio: ({ checked, error, label, onChange }: IRadioProps) => React.JSX.Element;
 export default Radio;

package/dist/components/atoms/Radio2/Radio2.d.ts

@@ -1,23 +1,4 @@
 import React from 'react';
 import { IRadio2Props } from '../../../types/formTypes';
-/**
- * A Radio component, that wraps around the native `<input type="radio"/>` element
- * and adds some extra styling, states and information around it (i.e. an error label,
- * error state).
- *
- * # Error state
- * An error label will be shown below the radio if the `error` prop exists.
- * Also radio will be rendered with a red border. An empty string can be passed to
- * render only error state without error message.
- *
- * # Light / Dark mode
- * The component can also adapt its styles for light / dark mode. If you want this component
- * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
- *
- * # Black box mode
- * If `blackBox` prop is true checked state will be styled as black box with white tick icon.
- * This style was used before as a default. Not preferred in new components.
- * This will be ignored if `darkMode` is true.
- */
 declare const Radio2: React.ForwardRefExoticComponent<IRadio2Props & React.RefAttributes<HTMLInputElement>>;
 export default Radio2;

package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IRotatorButtonsProps } from '../../../types/buttonTypes';
-declare const RotatorButtons: ({ onClickPrev, onClickNext, availablePrev, availableNext, }: IRotatorButtonsProps) => JSX.Element;
+declare const RotatorButtons: ({ onClickPrev, onClickNext, availablePrev, availableNext, }: IRotatorButtonsProps) => React.JSX.Element;
 export default RotatorButtons;

package/dist/components/atoms/Search/Search.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISearchProps } from '../../../types/navigation';
-declare const Search: ({ selected, onClick, colorPrimary }: ISearchProps) => JSX.Element;
+declare const Search: ({ selected, onClick, colorPrimary }: ISearchProps) => React.JSX.Element;
 export default Search;

package/dist/components/atoms/SectionSplitter/SectionSplitter.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISectionSplitterProps } from '../../../types/types';
-declare const SectionSplitter: ({ fullWidth }: ISectionSplitterProps) => JSX.Element;
+declare const SectionSplitter: ({ fullWidth }: ISectionSplitterProps) => React.JSX.Element;
 export default SectionSplitter;

package/dist/components/atoms/Stepper/Stepper.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { IStepperProps } from '../../../types/formTypes';
 /**
- * A chord Stepper component, used similarly to an HTML input type number.
+ * A harmonic Stepper component, used similarly to an HTML input type number.
  *
  * The buttons are clickable but not keyboard focusable
  *
@@ -36,7 +36,7 @@ import { IStepperProps } from '../../../types/formTypes';
  * Example:
  *
  * ```tsx
- * import { Stepper } from '@royaloperahouse/chord'
+ * import { Stepper } from '@royaloperahouse/harmonic'
  *
  * <div>
  *   <p>How How many seas must a white dove sail before she sleeps in the sand?</p>

package/dist/components/atoms/Tab/Tab.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/components/atoms/TextArea/TextArea.d.ts

@@ -1,11 +1,12 @@
+import React from 'react';
 import { ITextAreaProps } from '../../../types/formTypes';
 /**
- * An HTML textarea component for Chord.
+ * An HTML textarea component for Harmonic.
  *
  * Control the height and width of the component with `height` and `width`.
  *
  * The TextArea can also be used as the direct child of a
- * Chord Grid component, in which case you can control the width and
+ * Harmonic Grid component, in which case you can control the width and
  * horizontal position by specifying GridItem props.
  *
  * If a fixed pixel width is specified it will take precedence over the
@@ -26,7 +27,7 @@ import { ITextAreaProps } from '../../../types/formTypes';
  * Example of use as a GridItem:
  *
  * ```tsx
- * import {Grid, TextArea} from '@royaloperahouse/chord';
+ * import {Grid, TextArea} from '@royaloperahouse/harmonic';
  *
  * <Grid>
  *   <TextArea
@@ -40,5 +41,5 @@ import { ITextAreaProps } from '../../../types/formTypes';
  * </Grid>
  * ```
  */
-declare const TextArea: ({ label, error, width, darkMode, height, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, maxLength, tabIndex, ...textareaProps }: ITextAreaProps) => JSX.Element;
+declare const TextArea: ({ label, error, width, darkMode, height, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, maxLength, tabIndex, ...textareaProps }: ITextAreaProps) => React.JSX.Element;
 export default TextArea;

package/dist/components/atoms/TextField/TextField.d.ts

@@ -1,42 +1,4 @@
 import React from 'react';
 import { ITextFieldProps } from '../../../types/formTypes';
-/**
- * A text field component, that wraps around the native `<input />` element
- * and adds some extra states and information around it (i.e. a text and an error labels,
- * error state, show/hide button for password field).
- *
- * # Label
- * You can use this component just like you would use a regular `<input />` element,
- * just with the extra `label` prop, to set the label of the content. For example:
- * ```tsx
- * <TextField label="This is a label" />
- * ```
- *
- * # Error state
- * An error label will be shown below the text input field if the `error` prop exists.
- * Also input will be rendered with a red border. An empty string can be passed to
- * render only error state without error message.
- *
- * # Password mode
- * If type `password` provided this will be rendered with the `Show/Hide` button over the input field.
- * Clicking on that changes type to `text` and back to `password`.
- *
- * # Light / Dark mode
- * The component can also adapt its styles for light / dark mode. If you want this component
- * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
- * ```tsx
- * <div>
- *   <WhiteBackgroundContainer>
- *     <TextField label="..." />
- *   </WhiteBackgroundContainer>
- *   <BlackBackgroundContainer>
- *     <TextField darkMode label="..." />
- *   </BlackBackgroundContainer>
- *   <BlueBackgroundContainer>
- *     <TextField darkMode label="..." />
- *   </BlueBackgroundContainer>
- * </div>
- * ```
- */
 declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/components/atoms/TextField/TextFieldLegacy.d.ts

@@ -1,10 +1,11 @@
+import React from 'react';
 import { ITextFieldProps } from '../../../types/formTypes';
 /**
  * @deprecated
  *
  * # IMPORTANT
  * Please use the `<TextField />` component instead of this component if possible.
- * This component was introduced due to incompatibilities between versions of the Chord library.
+ * This component was introduced due to incompatibilities between versions of the Harmonic library.
  * */
-declare const TextFieldLegacy: ({ label, error, darkMode, width, ...inputProps }: ITextFieldProps) => JSX.Element;
+declare const TextFieldLegacy: ({ label, error, darkMode, width, ...inputProps }: ITextFieldProps) => React.JSX.Element;
 export default TextFieldLegacy;

package/dist/components/atoms/Tickbox2/Tickbox2.d.ts

@@ -1,23 +1,4 @@
 import React from 'react';
 import { ITickbox2Props } from '../../../types/formTypes';
-/**
- * A Tickbox component, that wraps around the native `<input type="checkbox"/>` element
- * and adds some extra styling, states and information around it (i.e. an error label,
- * error state).
- *
- * # Error state
- * An error label will be shown below the tickbox if the `error` prop exists.
- * Also tickbox will be rendered with a red border. An empty string can be passed to
- * render only error state without error message.
- *
- * # Light / Dark mode
- * The component can also adapt its styles for light / dark mode. If you want this component
- * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
- *
- * # Black box mode
- * If `blackBox` prop is true checked state will be styled as black box with white tick icon.
- * This style was used before as a default. Not preferred in new components.
- * This will be ignored if `darkMode` is true.
- */
 declare const Tickbox2: React.ForwardRefExoticComponent<ITickbox2Props & React.RefAttributes<HTMLInputElement>>;
 export default Tickbox2;

package/dist/components/atoms/TypeTags/TypeTags.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITypeTagsProps } from '../../../types/types';
-declare const TypeTags: ({ list }: ITypeTagsProps) => JSX.Element;
+declare const TypeTags: ({ list }: ITypeTagsProps) => React.JSX.Element;
 export default TypeTags;

package/dist/components/atoms/Typography/Typography.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
+import './Typography.css';
 import { IAltHeaderProps, IBodyTextProps, IHeaderProps, IOverlineProps, IStyledTag, ISubtitleProps } from '../../../types/typography';
-export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => JSX.Element;
-export declare const AltHeader: ({ semanticLevel, level, children }: IAltHeaderProps) => JSX.Element;
-export declare const BodyText: ({ level, children, tag }: IBodyTextProps) => JSX.Element;
-export declare const Header: ({ semanticLevel, level, children }: IHeaderProps) => JSX.Element;
-export declare const Overline: ({ level, children, tag }: IOverlineProps) => JSX.Element;
-export declare const Subtitle: ({ level, children, tag }: ISubtitleProps) => JSX.Element;
+export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => React.JSX.Element;
+export declare const AltHeader: ({ semanticLevel, level, children }: IAltHeaderProps) => React.JSX.Element;
+export declare const BodyText: ({ level, children, tag }: IBodyTextProps) => React.JSX.Element;
+export declare const Header: ({ semanticLevel, level, children }: IHeaderProps) => React.JSX.Element;
+export declare const Overline: ({ level, children, tag }: IOverlineProps) => React.JSX.Element;
+export declare const Subtitle: ({ level, children, tag }: ISubtitleProps) => React.JSX.Element;

package/dist/components/atoms/VideoControls/VideoControls.style.d.ts

@@ -1,4 +1,4 @@
-declare type withDeviceVolume = {
+declare type WithDeviceVolume = {
     volumeHidden?: boolean;
 };
 declare const VideoPlayButton: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -8,6 +8,6 @@ declare const VideoControlsInnerWrapper: import("styled-components").StyledCompo
 declare const LeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const VideoVolume: import("styled-components").StyledComponent<"input", any, {}, never>;
 declare const VideoMute: import("styled-components").StyledComponent<"button", any, {}, never>;
-declare const VolumeControlsWrapper: import("styled-components").StyledComponent<"div", any, withDeviceVolume, never>;
+declare const VolumeControlsWrapper: import("styled-components").StyledComponent<"div", any, WithDeviceVolume, never>;
 declare const StoryBookWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { VideoPlayButton, VideoControlsWrapper, VideoVolume, VideoMute, VolumeControlsWrapper, StoryBookWrapper, VideoFullscreenButton, LeftWrapper, VideoControlsInnerWrapper, };

package/dist/components/index.d.ts

@@ -1,6 +1,9 @@
+import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
+import TextLinkHarmonic from './Typography/TextLink/TextLink';
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection } from './organisms';
 import { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, Table, Tabs, TextOnly, UpsellCard, Quote, VideoWithControls } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
+export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, TextLinkHarmonic, };
 export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, 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, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, VideoWithControls, };

package/dist/components/molecules/Basket/Basket.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IBasketProps } from '../../../types/navigation';
-declare const Basket: ({ text, expiryTime, link, selected, numItems, numVirtualItems, onClick, colorPrimary, }: IBasketProps) => JSX.Element;
+declare const Basket: ({ text, expiryTime, link, selected, numItems, numVirtualItems, onClick, colorPrimary, }: IBasketProps) => React.JSX.Element;
 export default Basket;

package/dist/components/molecules/Cards/Cards.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ICardsProps } from '../../../types/card';
-declare const Cards: ({ cards, size }: ICardsProps) => JSX.Element;
+declare const Cards: ({ cards, size }: ICardsProps) => React.JSX.Element;
 export default Cards;

package/dist/components/molecules/ContentSummary/ContentSummary.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IContentSummaryProps } from '../../../types/editorial';
-declare const ContentSummary: ({ title, subtitle, bodyText, link, image, largeTitle, showImage, truncate, fullyClickable, baseSemanticLevel, }: IContentSummaryProps) => JSX.Element;
+declare const ContentSummary: ({ title, subtitle, bodyText, link, image, largeTitle, showImage, truncate, fullyClickable, baseSemanticLevel, }: IContentSummaryProps) => React.JSX.Element;
 export default ContentSummary;

package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts

@@ -7,7 +7,7 @@ interface ContentSummaryProps {
 interface Clickable {
     clickable?: boolean;
 }
-export declare const BodyTextRelative: import("styled-components").StyledComponent<({ level, children, tag }: import("../../../types/typography").IBodyTextProps) => JSX.Element, any, {}, never>;
+export declare const BodyTextRelative: import("styled-components").StyledComponent<({ level, children, tag }: import("../../../types/typography").IBodyTextProps) => import("react").JSX.Element, any, {}, never>;
 export declare const ContentSummaryWrapper: import("styled-components").StyledComponent<"article", any, Clickable, never>;
 export declare const ContentSummaryImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentSummaryTextWrapper: import("styled-components").StyledComponent<"div", any, ContentSummaryProps, never>;

package/dist/components/molecules/Information/InfoCta.d.ts

@@ -1,4 +1,4 @@
 import { FunctionComponent } from 'react';
-import { CTAProps } from '../../../types/information';
-export declare const InfoCta: FunctionComponent<CTAProps>;
+import { IInformationCTAProps } from '../../../types/information';
+export declare const InfoCta: FunctionComponent<IInformationCTAProps>;
 export default InfoCta;

package/dist/components/molecules/Information/Information.style.d.ts

@@ -1,10 +1,13 @@
-import { BackgroundColour, CtaVariant } from '../../../types/information';
+import { IInformationBackgroundColour, IInformationCtaVariant } from '../../../types/information';
 export declare const InfoContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoCTAWrapper: import("styled-components").StyledComponent<"div", any, {
-    variant: CtaVariant;
+    variant: IInformationCtaVariant;
     infoThemed: boolean;
 }, never>;
 export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {
-    background: BackgroundColour;
+    background: IInformationBackgroundColour;
+}, never>;
+export declare const InfoBodyWrapper: import("styled-components").StyledComponent<"div", any, {
+    background: IInformationBackgroundColour;
 }, never>;

package/dist/components/molecules/NavTop/NavTop.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { INavTopProps } from '../../../types/navigation';
-declare const NavTop: ({ accountText, accountLink, accountIcon, accountOptions, onLink, basketText, basketExpiryUnixTimestamp, basketLink, basketNumItems, basketNumVirtualItems, onClickSearch, isShowSearch, colorPrimary, }: INavTopProps) => JSX.Element;
+declare const NavTop: ({ accountText, accountLink, accountIcon, accountOptions, onLink, basketText, basketExpiryUnixTimestamp, basketLink, basketNumItems, basketNumVirtualItems, onClickSearch, isShowSearch, colorPrimary, }: INavTopProps) => React.JSX.Element;
 export default NavTop;

package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { Colors } from '../../../../types';
-declare type withInversion = {
+declare type WithInversion = {
     invert: boolean;
     theme: {
         colors: Colors;
@@ -11,11 +10,11 @@ declare const BrandingTextBody: import("styled-components").StyledComponent<"div
 declare const ComapctHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const ComapctHeaderGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CompactHeaderAssetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CompactHeaderCopyWrapper: import("styled-components").StyledComponent<"div", any, withInversion, never>;
+declare const CompactHeaderCopyWrapper: import("styled-components").StyledComponent<"div", any, WithInversion, never>;
 declare const CompactHeaderLogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CompactHeaderTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CompactHeaderCTAWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const PrimaryButtonWithInversion: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../../types/buttonTypes").IPrimaryButtonProps>, any, withInversion, never>;
+declare const PrimaryButtonWithInversion: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../../types/buttonTypes").IPrimaryButtonProps>, any, WithInversion, never>;
 declare const PlayButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 declare const VideoControlsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const VideoVolume: import("styled-components").StyledComponent<"input", any, {}, never>;

package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.d.ts

@@ -1,3 +1,7 @@
+import React from 'react';
 import { ICreditListing } from '../../../../types';
-declare const CreditListing: ({ roles }: ICreditListing) => JSX.Element;
+export declare const getColumnSpanDesktop: (namesLength: number, charThreshold: number, peopleCount: number) => number;
+declare const CreditListing: ({ roles, columnCount }: ICreditListing & {
+    columnCount?: number | undefined;
+}) => React.JSX.Element;
 export default CreditListing;

package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts

@@ -1,5 +1,7 @@
 export declare const ReplacementWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CreditListingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CreditListingWrapper: import("styled-components").StyledComponent<"div", any, {
+    columnCount: number;
+}, never>;
 export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreditWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/PeopleListing/PeopleListing.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IPeopleListing } from '../../../types/types';
-declare const PeopleListing: ({ roles }: IPeopleListing) => JSX.Element;
+declare const PeopleListing: ({ roles }: IPeopleListing) => React.JSX.Element;
 export default PeopleListing;

package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts

@@ -4,3 +4,4 @@ export declare const HeadshotWrapper: import("styled-components").StyledComponen
 export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PersonLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ReplacementWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IEditorialGridProps } from '../../../types/editorial';
 import { IPromoWithTagsStyledProps } from '../../../types/promoWithTags';
 export declare const PromoWithTagsGrid: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
@@ -13,8 +12,8 @@ export declare const ExtraContentWrapper: import("styled-components").StyledComp
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PrimaryButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MobileTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PromoWithTagsTypeTags: import("styled-components").StyledComponent<({ list }: import("../../../types/types").ITypeTagsProps) => JSX.Element, any, {}, never>;
-export declare const PromoWithTagsHeader: import("styled-components").StyledComponent<({ semanticLevel, level, children }: import("../../../types/typography").IHeaderProps) => JSX.Element, any, {}, never>;
+export declare const PromoWithTagsTypeTags: import("styled-components").StyledComponent<({ list }: import("../../../types/types").ITypeTagsProps) => import("react").JSX.Element, any, {}, never>;
+export declare const PromoWithTagsHeader: import("styled-components").StyledComponent<({ semanticLevel, level, children }: import("../../../types/typography").IHeaderProps) => import("react").JSX.Element, any, {}, never>;
 export declare const PromoWithTagsTextLink: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;
 export declare const PromoWithTagsExtraContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTagsContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;

package/dist/components/molecules/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { IRadioGroupProps } from '../../../types/formTypes';
 /**
  * DEPRECATED. Use RadioGroup2 instead
  */
-declare const RadioGroup: ({ radios, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, columnStartSmallDevice, columnSpanSmallDevice, onChange, }: IRadioGroupProps) => JSX.Element;
+declare const RadioGroup: ({ radios, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, columnStartSmallDevice, columnSpanSmallDevice, onChange, }: IRadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/components/molecules/SearchBar/SearchBar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISearchBarProps } from '../../../types/navigation';
-declare const SearchBar: ({ onClick, onClose }: ISearchBarProps) => JSX.Element;
+declare const SearchBar: ({ onClick, onClose }: ISearchBarProps) => React.JSX.Element;
 export default SearchBar;

package/dist/components/molecules/SectionTitle/SectionTitle.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISectionTitleProps } from '../../../types/types';
-declare const SectionTitle: ({ title, size, description, semanticLevel }: ISectionTitleProps) => JSX.Element;
+declare const SectionTitle: ({ title, size, description, semanticLevel }: ISectionTitleProps) => React.JSX.Element;
 export default SectionTitle;

package/dist/components/molecules/Select/Select.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISelectProps } from '../../../types/formTypes';
 /**
  * DEPRECATED. Use Select2 instead.
@@ -96,5 +97,5 @@ import { ISelectProps } from '../../../types/formTypes';
  * }
  * ```
  */
-declare function Select<T>({ label, options, onSelect, disabled, resetWhenOptionsUpdate, width, height, }: ISelectProps<T>): JSX.Element;
+declare function Select<T>({ label, options, onSelect, disabled, resetWhenOptionsUpdate, width, height, }: ISelectProps<T>): React.JSX.Element;
 export default Select;

package/dist/components/molecules/Select/Select.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ISelectProps } from '../../../types/formTypes';
 export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ className, color, iconName, title, direction, ariaLabel }: import("../../../types/iconTypes").IIconProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>>, any, {
     iconName: "DropdownArrow";

package/dist/components/molecules/Select2/Select2.d.ts

@@ -1,13 +1,13 @@
 import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
-export declare const DropdownIndicator: (props: DropdownIndicatorProps) => JSX.Element;
+export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
 interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
     children: React.ReactNode;
 }
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;
 /**
- * A Select2 component wraps react-select with Chord styling and additional elements like
+ * A Select2 component wraps react-select with Harmonic styling and additional elements like
  * text and error labels. This should be used just as usual react-select component.
  * Note: using some advanced opportunities of react-select may require additional styling.
  *

package/dist/components/molecules/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITabsProps } from '../../../types/types';
-declare const Tabs: ({ items, onChange, onShowMenu, showMenu, colorPrimary }: ITabsProps) => JSX.Element;
+declare const Tabs: ({ items, onChange, onShowMenu, showMenu, colorPrimary }: ITabsProps) => React.JSX.Element;
 export default Tabs;

package/dist/components/molecules/UpsellCard/OfferText.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { IOfferTextProps } from '../../../types/upsell';
-export declare const OfferText: ({ title, description }: IOfferTextProps) => JSX.Element;
+export declare const OfferText: ({ title, description }: IOfferTextProps) => React.JSX.Element;

package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts

@@ -1,12 +1,12 @@
 import { Colors } from '../../../types';
-declare type withColor = {
+declare type WithColor = {
     theme: {
         color: Colors;
     };
 };
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PromoLabel: import("styled-components").StyledComponent<"div", any, withColor, never>;
+export declare const PromoLabel: import("styled-components").StyledComponent<"div", any, WithColor, never>;
 export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OfferTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/organisms/Navigation/Navigation.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { INavigationProps } from '../../../types/navigation';
-declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink, desktopLogoUrl, devicesLogoUrl, }: INavigationProps) => JSX.Element;
+declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink, desktopLogoUrl, devicesLogoUrl, }: INavigationProps) => React.JSX.Element;
 export default Navigation;

package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ITitleCTAProps, ITitleCTAGridItemProps } from '../../../types/navigation';
 export declare const TitleCTAGridWrapper: import("styled-components").StyledComponent<"div", any, ITitleCTAProps, never>;
 export declare const TitleCTAGrid: import("styled-components").StyledComponent<"div", any, {}, never>;