@royaloperahouse/chord 2.2.5 → 2.2.7-a-chord-development

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Seat.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Standing.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Wheelchair.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

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

@@ -53,10 +53,12 @@ export declare const IconLibrary: {
     Remove: ({ color }: 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>)>;
     Restart: ({ color }: 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>)>;
     Search: ({ color }: 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>)>;
+    Seat: ({ color }: 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>)>;
     Secure: ({ color }: 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>)>;
     Settings: ({ color }: 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>)>;
     Shift: ({ color }: 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>)>;
     Space: ({ color }: 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>)>;
+    Standing: ({ color }: 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>)>;
     Star: ({ color }: 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>)>;
     Subscribe: ({ color }: 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>)>;
     Subtitles: ({ color }: 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>)>;
@@ -69,6 +71,7 @@ export declare const IconLibrary: {
     UserSignedIn: ({ color }: 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>)>;
     Volume: ({ color }: 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>)>;
     Watch: ({ color }: 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>)>;
+    Wheelchair: ({ color }: 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>)>;
     X: ({ color }: 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>)>;
     Youtube: ({ color }: 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/Radio/Radio.d.ts

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

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

@@ -0,0 +1,23 @@
+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/Radio2/Radio2.style.d.ts

@@ -0,0 +1,7 @@
+import { IRadio2Props } from '../../../types/formTypes';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Radio: import("styled-components").StyledComponent<"div", any, Pick<IRadio2Props, "error" | "darkMode" | "disabled" | "blackBox">, never>;
+export declare const TickboxLabel: import("styled-components").StyledComponent<"label", any, Pick<IRadio2Props, "darkMode" | "blackBox">, never>;
+export declare const RadioIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextLabel: import("styled-components").StyledComponent<"div", any, Pick<IRadio2Props, "darkMode" | "disabled">, never>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<IRadio2Props, "darkMode">, never>;

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

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

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

@@ -1,4 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ITickboxProps } from '../../../types/tickbox';
+/**
+ * DEPRECATED. Use Tickbox2 instead
+ */
 declare const Tickbox: FunctionComponent<ITickboxProps>;
 export default Tickbox;

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

@@ -0,0 +1,23 @@
+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/Tickbox2/Tickbox2.style.d.ts

@@ -0,0 +1,7 @@
+import { ITickbox2Props } from '../../../types/formTypes';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tickbox: import("styled-components").StyledComponent<"div", any, Pick<ITickbox2Props, "error" | "darkMode" | "disabled" | "blackBox">, never>;
+export declare const TickboxLabel: import("styled-components").StyledComponent<"label", any, Pick<ITickbox2Props, "darkMode" | "blackBox">, never>;
+export declare const TickboxIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextLabel: import("styled-components").StyledComponent<"div", any, Pick<ITickbox2Props, "darkMode" | "disabled">, never>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<ITickbox2Props, "darkMode">, never>;

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

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

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

@@ -6,6 +6,7 @@ import { Icon } from './Icons';
 import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
 import Progress from './Progress';
 import Radio from './Radio';
+import Radio2 from './Radio2';
 import RotatorButtons from './RotatorButtons';
 import SecondaryLogo from './SecondaryLogo';
 import SectionSplitter from './SectionSplitter';
@@ -18,9 +19,10 @@ import TextField from './TextField';
 import TextLink from './TextLink';
 import TextLogo from './TextLogo';
 import Tickbox from './Tickbox';
+import Tickbox2 from './Tickbox2';
 import Timer from './Timer';
 import TypeTags from './TypeTags';
 import { AltHeader, BodyText, Header, Overline, Subtitle } from './Typography';
 import VideoControls from './VideoControls';
 import { Stepper } from './Stepper';
-export { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, Progress, PrimaryButton, Radio, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TextArea, TextField, TextLink, TextLogo, Tickbox, Timer, TypeTags, VideoControls, };
+export { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, Progress, PrimaryButton, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TextArea, TextField, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, VideoControls, };

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
-import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextLink, Tickbox, Timer, TypeTags, VideoControls } from './atoms';
+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, 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, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
+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, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
-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, RadioGroup, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };
+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, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };

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

@@ -12,6 +12,7 @@ export declare const ContentContainer: import("styled-components").StyledCompone
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TitleContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HighlightTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SubtitleContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", any, {
     isVisible: boolean;

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

@@ -4,4 +4,4 @@ import PageHeadingImpact from './Impact';
 import PageHeadingPanel from './Panel';
 import PageHeadingStream from './Stream';
 import PageHeadingCompact from './Compact/Compact';
-export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PageHeadingCompact, PageHeadingPanel, };
+export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PageHeadingCompact, };

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

@@ -3,3 +3,4 @@ export declare const CreditListingWrapper: import("styled-components").StyledCom
 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>;
+export declare const CreditBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import { IRadioGroup2Props } from '../../../types/formTypes';
+/**
+ * A RadioGroup component, that renders set of Radio2 components inside.
+ * `name` prop should be specified and will be passed as a `name` to each
+ * radio to combine them in one group.
+ *
+ * # Radios
+ * `radios` prop is an array of radios that should be renderet. This is an
+ * array of objects `{content: ReactNode, value: string | number}`.
+ *
+ * # Default value
+ * `defaultValue` prop can be specified to make one of radios checked inittially.
+ * This should be equal to `value` of one of `radios`.
+ *
+ * # Error state
+ * An error label will be shown below the radios if the `error` prop exists.
+ * Also radios will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
+ *
+ * # Horizontal mode
+ * If `horizontalMode` prop is true radios will be placed in a row instead of column.
+ *
+ * # Distance between radios
+ * `gap` prop allow to control distance between radios in pixels. This works in default and
+ * horizontal modes.
+ *
+ * # 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 RadioGroup2: FunctionComponent<IRadioGroup2Props>;
+export default RadioGroup2;

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

@@ -0,0 +1,4 @@
+import { IRadioGroup2Props } from '../../../types/formTypes';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RadioGroup: import("styled-components").StyledComponent<"div", any, Pick<IRadioGroup2Props, "horizontalMode" | "gap">, never>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<IRadioGroup2Props, "darkMode">, never>;

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

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

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

@@ -13,6 +13,7 @@ import { PeopleListing, CreditListing } from './PeopleListing';
 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';
@@ -24,6 +25,6 @@ import ImageWithCaption from './ImageWithCaption';
 import Quote from './Quote';
 import MiniCard from './MiniCard';
 import ReadMore from './ReadMore';
-import AuxiliaryNav from './AuxiliaryNav';
 import PasswordStrength from './PasswordStrength';
-export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };
+import AuxiliaryNav from './AuxiliaryNav';
+export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };

package/dist/index.d.ts

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

package/dist/types/card.d.ts

@@ -33,6 +33,10 @@ export interface ICardProps {
      * Text placed in the Card component
      */
     text?: string;
+    /**
+     * Highlighted small text
+     */
+    highlightText?: string;
     /**
      * List of Type Tags to display.
      */

package/dist/types/formTypes.d.ts

@@ -53,7 +53,7 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
      * `password` type adds `Show/Hide` button over the input element.
      * Any other types don't change the view of the element, just change
      * accessibility stuff
-     */
+    */
     type?: ITextFieldType;
     /**
      * A style prop that allows us to change what colours to
@@ -70,6 +70,118 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
      */
     width?: number;
 }
+export interface ITickbox2Props extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The content of tickbox
+     */
+    children: React.ReactNode;
+    /**
+     * An error label to be shown below the tickbox.
+     * Tickbox will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the tickbox.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
+export interface IRadio2Props extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The content of radio
+     */
+    children: React.ReactNode;
+    /**
+     * An error label to be shown below the radio.
+     * Radio will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the radio.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
+export interface IRadioGroup2Radio {
+    content: React.ReactNode;
+    value: string | number;
+}
+export interface IRadioGroup2Props {
+    /**
+     * Array of radios
+     */
+    radios: IRadioGroup2Radio[];
+    /**
+     * Name property for radios.
+     */
+    name: string;
+    /**
+     * Render radios horizontally.
+     *
+     * Defaults to `false`.
+     */
+    horizontalMode?: boolean;
+    /**
+     * Callback on change of radio.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Value of default checked radio.
+     */
+    defaultValue?: string | number;
+    /**
+     * Distance between radio elements in px.
+     *
+     * Defaults to `30`.
+     */
+    gap?: number;
+    /**
+     * An error label to be shown below the radiogroup.
+     * Radios will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the radio.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
 export interface IOption<T> {
     text: string;
     readonly value: T;
@@ -123,17 +235,8 @@ export interface IStepperProps {
     step?: number;
     /** An error message to be shown below the stepper.
      *
-     * Default: `undefined`
      */
     error?: string;
-    /**
-     * A style prop that allows us to change what colours to
-     * use for light or dark mode (e.g. text color, border color, etc...)
-     * based on the background color.
-     *
-     * Defaults to `false`.
-     */
-    darkMode?: boolean;
     /**
      * Set disapled state
      */
@@ -142,6 +245,18 @@ export interface IStepperProps {
      * Minimum value allowed in the stepper
      */
     min?: number;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     * Specify whether or not the containing element has a dark background.
+     * This property affects the border colours for focused and error states.
+     *
+     * Default: `false`
+     */
+    darkMode?: boolean;
     /**
      * Maximum value allowed in the stepper
      */

package/dist/types/passwordStrength.d.ts

@@ -19,10 +19,10 @@ export interface IPasswordStrengthProps {
      */
     sectionsColor?: Colors;
     /**
-     * Color of active sections
-     *
-     * Default: Colors.Black
-     */
+    * Color of active sections
+    *
+    * Default: Colors.Black
+    */
     activeSectionsColor?: Colors;
     /**
      * Text
@@ -40,12 +40,12 @@ export interface IPasswordStrengthProps {
      * Strength label text
      *
      * Default: ""
-     */
+    */
     strengthLabel?: string;
     /**
      * Strength label text
      *
      * Default: Colors.Black
-     */
+    */
     strengthLabelColor?: Colors;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.5",
+  "version": "2.2.7-a-chord-development",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",