@royaloperahouse/harmonic 0.19.0 → 0.19.1-b

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

@@ -1,10 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
+import { IWrapperProps } from './Select2.types';
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
-interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
-    children: React.ReactNode;
-}
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;
 /**
  * A Select2 component wraps react-select with Harmonic styling and additional elements like

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ISelect2Props } from '../../../types/formTypes';
+export interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
+    children: React.ReactNode;
+    className?: string;
+}

package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-import { ThemeType } from '../../../../types/types';
-declare type Props = {
-    theme: ThemeType;
-    onClick: (e: React.FormEvent) => Promise<void>;
-};
-declare const SignUpFormButton: React.FC<Props>;
+import { SignUpFormButtonProps } from './SignUpFormButton.types';
+declare const SignUpFormButton: React.FC<SignUpFormButtonProps>;
 export default SignUpFormButton;

package/dist/components/molecules/SignUpForm/components/SignUpFormButton.types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ThemeType } from '../../../../types/types';
+export declare type SignUpFormButtonProps = {
+    theme: ThemeType;
+    onClick: (e: React.FormEvent) => Promise<void>;
+};

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

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,10 +1,6 @@
 import React from 'react';
-export interface SwipeRef {
-    nextSlide: () => void;
-    prevSlide: () => void;
-    hasOverflow: () => boolean;
-    hasNext: () => boolean;
-}
+import { SwipeRef } from './Swipe.types';
+export type { SwipeRef } from './Swipe.types';
 declare const Swipe: React.ForwardRefExoticComponent<{
     children: React.ReactNode[];
     infinite?: boolean | undefined;
@@ -13,5 +9,6 @@ declare const Swipe: React.ForwardRefExoticComponent<{
     onIndexChange?: ((index: number) => void) | undefined;
     onActiveChange?: ((value: boolean) => void) | undefined;
     onOverflowChange?: ((overflow: boolean) => void) | undefined;
+    limitDragToNavigableRange?: boolean | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SwipeRef>>;
 export default Swipe;

package/dist/components/molecules/Swipe/Swipe.types.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type SwipeProps = {
+    children: React.ReactNode[];
+    infinite?: boolean;
+    slidesOffsetBefore?: number;
+    slidesAriaHidden?: boolean;
+    onIndexChange?: (index: number) => void;
+    onActiveChange?: (value: boolean) => void;
+    onOverflowChange?: (overflow: boolean) => void;
+    limitDragToNavigableRange?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export interface SwipeRef {
+    nextSlide: () => void;
+    prevSlide: () => void;
+    hasOverflow: () => boolean;
+    hasNext: () => boolean;
+}

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

@@ -7,6 +7,6 @@ export declare const TableHeader: import("styled-components").StyledComponent<"t
 export declare const TableCell: import("styled-components").StyledComponent<"td", any, {
     columns: number;
 }, never>;
-export declare const PaginationWrapper: import("styled-components").StyledComponent<({ pageCount, currentPage, baseUrl, className, onPageChange }: import("../Pagination/Pagination").PageData) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>, any, {}, never>;
+export declare const PaginationWrapper: import("styled-components").StyledComponent<({ pageCount, currentPage, baseUrl, className, onPageChange }: import("../Pagination/Pagination.types").PageData) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>, any, {}, never>;
 export declare const ScrollButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AriaDescription: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/molecules/Table/components/HeaderCells.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-interface HeaderCellsProps {
-    headings: React.ReactNode[];
-    columns: number;
-}
+import { HeaderCellsProps } from './HeaderCells.types';
 declare const HeaderCells: React.FC<HeaderCellsProps>;
 export default HeaderCells;

package/dist/components/molecules/Table/components/HeaderCells.types.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface HeaderCellsProps {
+    headings: React.ReactNode[];
+    columns: number;
+}

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

@@ -1,10 +1,13 @@
 import Accordion from './Accordion';
 import Accordions from './Accordions';
 import AnnouncementBanner from './AnnouncementBanner';
+import Basket from './Basket';
+import BodyContent from './BodyContent';
 import Card from './Card';
 import Cards from './Cards';
 import CastFilter from './CastFilter';
 import ContactCard from './ContactCard';
+import ContactNewsletter from './ContactNewsletter';
 import ContentSummary from './ContentSummary';
 import Editorial from './Editorial';
 import HotFilters from './HotFilters';
@@ -15,18 +18,21 @@ import { PeopleListing, CreditListing } from './PeopleListing';
 import PolicyLinks from './PolicyLinks';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
-import RadioGroup from './RadioGroup';
+import Quote from './Quote';
 import RadioGroup2 from './RadioGroup2';
 import StatusBanner from './StatusBanner';
 import SearchBar from './SearchBar';
 import SectionTitle from './SectionTitle';
-import Select from './Select';
 import Select2 from './Select2';
 import Select2Async from './Select2Async';
+import { Swipe, SwipeRef } from './Swipe';
 import Tabs from './Tabs';
 import UpsellCard from './UpsellCard';
 import ImageWithCaption from './ImageWithCaption';
 import MiniCard from './MiniCard';
+import NavTop from './NavTop';
+import PersonCard from './PersonCard';
+import PersonDetails from './PersonDetails';
 import ReadMore from './ReadMore';
 import AuxiliaryNav from './AuxiliaryNav';
 import PasswordStrength from './PasswordStrength';
@@ -36,4 +42,5 @@ import SignUpForm from './SignUpForm';
 import AnchorBar from './AnchorBar';
 import SkipToMain from './SkipToMain';
 import Paywall from './Paywall';
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, VideoWithControls, SkipToMain, };
+import UpsellCards from './UpsellCards';
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Basket, BodyContent, Card, Cards, CastFilter, ContactCard, ContactNewsletter, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, NavTop, PersonCard, PersonDetails, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, Quote, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Tabs, Table, UpsellCard, UpsellCards, VideoWithControls, SkipToMain, };

package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts

@@ -1,5 +1,4 @@
 import { FunctionComponent } from 'react';
-import { HighlightsCarouselSlide } from '../../../../../types/carousel';
-declare type Props = Pick<HighlightsCarouselSlide, 'links' | 'auxiliaryCTA'>;
-declare const Buttons: FunctionComponent<Props>;
+import { HighlightsCarouselButtonsProps } from './Buttons.types';
+declare const Buttons: FunctionComponent<HighlightsCarouselButtonsProps>;
 export default Buttons;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.types.d.ts

@@ -0,0 +1,2 @@
+import { HighlightsCarouselSlide } from '../../../../../types/carousel';
+export declare type HighlightsCarouselButtonsProps = Pick<HighlightsCarouselSlide, 'links' | 'auxiliaryCTA'>;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts

@@ -1,10 +1,4 @@
-import { FunctionComponent, ReactElement } from 'react';
-import { HighlightsCarouselSlide } from '../../../../../types/carousel';
-import { ILogosProps } from '../../../../../types/types';
-declare type Props = {
-    logo?: ReactElement<ILogosProps> | null;
-    slide: HighlightsCarouselSlide;
-    currentSlideIndex: number;
-};
-declare const InfoSection: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
+import { HighlightsCarouselInfoSectionProps } from './InfoSection.types';
+declare const InfoSection: FunctionComponent<HighlightsCarouselInfoSectionProps>;
 export default InfoSection;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { HighlightsCarouselSlide } from '../../../../../types/carousel';
+import { ILogosProps } from '../../../../../types/types';
+export declare type HighlightsCarouselInfoSectionProps = {
+    logo?: ReactElement<ILogosProps> | null;
+    slide: HighlightsCarouselSlide;
+    currentSlideIndex: number;
+};

package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts

@@ -1,13 +1,4 @@
-import React, { FunctionComponent } from 'react';
-import { HighlightsCarouselSlideImage, HighlightsCarouselSlideVideo } from '../../../../../types/carousel';
-import { SwipeRef } from '../../../../molecules/Swipe';
-declare type Props = {
-    slidesMedia: (HighlightsCarouselSlideImage | HighlightsCarouselSlideVideo)[];
-    currentSlide: number;
-    setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
-    carouselRef: React.RefObject<SwipeRef>;
-    hasMultipleSlides: boolean;
-    carouselTitle?: string;
-};
-declare const SwipeCarousel: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
+import { HighlightsCarouselSwipeCarouselProps } from './SwipeCarousel.types';
+declare const SwipeCarousel: FunctionComponent<HighlightsCarouselSwipeCarouselProps>;
 export default SwipeCarousel;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { HighlightsCarouselSlideImage, HighlightsCarouselSlideVideo } from '../../../../../types/carousel';
+import { SwipeRef } from '../../../../molecules';
+export declare type HighlightsCarouselSwipeCarouselProps = {
+    slidesMedia: (HighlightsCarouselSlideImage | HighlightsCarouselSlideVideo)[];
+    currentSlide: number;
+    setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
+    carouselRef: React.RefObject<SwipeRef>;
+    hasMultipleSlides: boolean;
+    carouselTitle?: string;
+};

package/dist/harmonic.cjs.development.css

@@ -350,6 +350,325 @@
   font-display: swap;
 }
 
+/* ~~~~~ General Styling Classes ~~~~~ */
+.typography_color-primary__LOfDi {
+  color: var(--color-primary);
+}
+
+.typography_color-black__6MHRL {
+  color: var(--color-base-black);
+}
+
+.typography_color-white__PfW5s {
+  color: var(--color-base-white);
+}
+
+.typography_color-red__iPlbG {
+  color: var(--color-primary-red);
+}
+
+.typography_color-grey__GA1c2 {
+  color: var(--color-base-dark-grey);
+}
+
+.typography_color-inherit__RDd0Y {
+  color: inherit;
+}
+
+.typography_em__E6tX- {
+  font-style: italic;
+}
+/* ~~~ */
+
+/* Display Headers */
+.typography_display__-F3p4 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+
+  &.typography_large__uq0zC {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 68px;
+    font-weight: 500;
+    letter-spacing: -3px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
+  }
+
+  /* Serif and Italic adjustments */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -3px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 38px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Headers */
+.typography_header__BexiD {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+  }
+
+  /* Serif and Italic letter-spacing overrides */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 28px;
+      line-height: 34px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: -1px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 20px;
+      line-height: 26px;
+      letter-spacing: -0.75px;
+    }
+
+    /* Mobile overrides for serif/italic letter-spacing */
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_medium__K0uZD.typography_serif__VSO38,
+    &.typography_medium__K0uZD.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Subtitle */
+.typography_subtitle__aoFTV {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Body Copy */
+.typography_bodycopy__vYtQ8 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Overline */
+.typography_overline__EnUK3 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+
+  &.typography_large__uq0zC {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
+    }
+
+    &.typography_small__wfQ0K {
+      line-height: 14px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+/* Button Text */
+.typography_buttontext__vcxNi {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+
+  @media (max-width: 699px) {
+    font-weight: 500;
+    line-height: 17px;
+  }
+}
+
+/* Caption Text */
+.typography_captiontext__91UFb {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+
+  @media (max-width: 699px) {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
+}
+
+/* Navigation Text */
+.typography_navigationtext__YfGf7 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */