@royaloperahouse/harmonic 1.0.0 → 1.0.1-a

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { ISelectProps } from '../../../types/formTypes';
+/**
+ * DEPRECATED. Use Select2 instead.
+ * A select component, created using <ul> and <li> elements, with bespoke accessibility
+ * logic.
+ *
+ * # Usage
+ * ## Defining a component that uses a typical Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component that uses a disabled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       disabled // Select component disabled explicitely
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *     <Select
+ *       label="This is a label"
+ *       options={[]} // Select component disabled implicitely by passing an empty array of options
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component with a non-labelled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label=""
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Changing the dimensions of a Select element (px)
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   const selectWidthPx = 100;
+ *   const selectHeightPx = 27;
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *       width={selectWidthPx}
+ *       height={selectHeightPx}
+ *     />
+ *   </>
+ * }
+ * ```
+ */
+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

@@ -0,0 +1,13 @@
+import { ISelectProps } from '../../../types/formTypes';
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<(props: 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";
+    color: string;
+    title: "Select Arrow";
+}, "title" | "color" | "iconName">;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Options: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Option: import("styled-components").StyledComponent<"li", any, {
+    hover: boolean;
+}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, Pick<Required<ISelectProps<unknown>>, "height" | "width">, never>;

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

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

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

@@ -1,8 +1,10 @@
 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/SignUpForm/components/SignUpFormButton.d.ts

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

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

@@ -1,6 +1,10 @@
 import React from 'react';
-import { SwipeRef } from './Swipe.types';
-export type { SwipeRef } from './Swipe.types';
+export interface SwipeRef {
+    nextSlide: () => void;
+    prevSlide: () => void;
+    hasOverflow: () => boolean;
+    hasNext: () => boolean;
+}
 declare const Swipe: React.ForwardRefExoticComponent<{
     children: React.ReactNode[];
     infinite?: boolean | undefined;

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

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

@@ -1,13 +1,10 @@
 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';
@@ -18,21 +15,18 @@ import { PeopleListing, CreditListing } from './PeopleListing';
 import PolicyLinks from './PolicyLinks';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
-import Quote from './Quote';
+import RadioGroup from './RadioGroup';
 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';
@@ -42,5 +36,4 @@ import SignUpForm from './SignUpForm';
 import AnchorBar from './AnchorBar';
 import SkipToMain from './SkipToMain';
 import Paywall from './Paywall';
-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, };
+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, };

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

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

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

@@ -1,4 +1,10 @@
-import { FunctionComponent } from 'react';
-import { HighlightsCarouselInfoSectionProps } from './InfoSection.types';
-declare const InfoSection: FunctionComponent<HighlightsCarouselInfoSectionProps>;
+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>;
 export default InfoSection;

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

@@ -1,4 +1,13 @@
-import { FunctionComponent } from 'react';
-import { HighlightsCarouselSwipeCarouselProps } from './SwipeCarousel.types';
-declare const SwipeCarousel: FunctionComponent<HighlightsCarouselSwipeCarouselProps>;
+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>;
 export default SwipeCarousel;

package/dist/harmonic.cjs.development.css

@@ -350,325 +350,6 @@
   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 */