@royaloperahouse/harmonic 0.19.1-a → 0.19.1-c

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, {
+    $largeDesktopColumns?: 3 | 4 | undefined;
+} & {
     columnCount: number;
 }, never>;
 export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -1 +1,3 @@
-export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {
+    $largeDesktopColumns?: 3 | 4 | undefined;
+}, never>;

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

@@ -1,2 +1,4 @@
 export declare const PersonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {
+    greyscale?: boolean | undefined;
+}, never>;

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

@@ -0,0 +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) => React.JSX.Element;
+export default RadioGroup;

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

@@ -0,0 +1 @@
+export declare const RadioGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
-interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
+interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
     children: React.ReactNode;
 }
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;

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

@@ -13,5 +13,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/index.d.ts

@@ -15,10 +15,12 @@ import { PeopleListing, CreditListing } from './PeopleListing';
 import PolicyLinks from './PolicyLinks';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
+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 Tabs from './Tabs';
@@ -34,4 +36,4 @@ 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, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, 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/Carousel/Carousel.d.ts

@@ -1,4 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ICarouselProps } from '../../../../types/carousel';
-declare const Carousel: FunctionComponent<ICarouselProps>;
+declare const Carousel: FunctionComponent<ICarouselProps & Partial<{
+    titleFontFamily: 'Victor' | 'Grey' | undefined;
+}>>;
 export default Carousel;

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

@@ -1,4 +1,6 @@
 import { FunctionComponent } from 'react';
 import { IHighlightsCarouselProps } from '../../../../types/carousel';
-declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps>;
+declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps & Partial<{
+    titleFontFamily: 'Victor' | 'Grey' | undefined;
+}>>;
 export default HighlightsCarousel;

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

@@ -6,6 +6,21 @@ export declare const AnchorTitle: import("styled-components").StyledComponent<"d
 export declare const GridItemTitleWrapper: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const ButtonsDesktopWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonsMobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/buttonTypes").PrimaryButtonProps>, any, {}, never>;
+export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    onClick?: ((event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    className?: string | undefined;
+} & {
+    iconName?: "Shift" | "AddToMyList" | "Arrow" | "ArrowPagination" | "AudioDescription" | "Back10" | "BalletAndDance" | "Basket" | "BasketFull" | "BritishSignLanguage" | "BookTickets" | "CarouselArrow" | "ChooseDates" | "Cinema" | "Clips" | "Clock" | "Close" | "Captioned" | "ClosedCaptions" | "Confirm" | "CreditCard" | "Delete" | "Detract" | "DropdownArrow" | "EditMyList" | "Email" | "Expand" | "Expand12px" | "ExternalLink" | "Facebook" | "FamilyFriendly" | "Favourite" | "FavouriteFull" | "Filter" | "FindAScreening" | "Forward10" | "FullScreen" | "GridView" | "Home" | "Info" | "Instagram" | "LastPageArrow" | "List" | "ListView" | "LiveStream" | "Location" | "Menu" | "Minimise" | "Muted" | "NavLogoMobile" | "NavLogoNoCrest" | "NavLogoWithCrest" | "OnMyList" | "OpenCaptions" | "OperaAndMusic" | "Pause" | "PDF" | "Phone" | "Play" | "Print" | "Refresh" | "RelaxedPerformance" | "Reminder" | "Remove" | "Remove12px" | "Restart" | "Search" | "Seat" | "Secure" | "Settings" | "Space" | "Standing" | "Star" | "Subscribe" | "Subtitles" | "Tick" | "Tickets" | "Tiktok" | "TouchTour" | "Trailer" | "Twitter" | "User" | "UserSignedIn" | "Volume" | "Watch" | "Wheelchair" | "X" | "Youtube" | undefined;
+    iconDirection?: "left" | "right" | "up" | "down" | "reverse" | undefined;
+    iconClassName?: string | undefined;
+} & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Pick<{
+    textColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    backgroundColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    borderColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    hoveredColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    pressedColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    disabled?: boolean | undefined;
+}, "disabled" | "textColor" | "backgroundColor" | "hoveredColor" | "pressedColor"> & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
 export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MessageWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;