@royaloperahouse/harmonic 0.18.3-experiment → 0.18.3-g

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.18.3]
+- CastFilter: Added arrows to CastFilter component
+
 ## [0.18.1]
 - Accordion/Accordions: Add icon customization
 

package/README.md

@@ -151,7 +151,8 @@ To publish a snapshot use:
 ```bash
 NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
-Use the version name to install the package in a frontend repo.
+
+The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
 
 ### **2. To release a stable version**
 

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

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

package/dist/components/atoms/Icons/SvgIcons/Access/Captioned.svg.d.ts

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

package/dist/components/atoms/Icons/SvgIcons/Access/FamilyFriendly.svg.d.ts

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

package/dist/components/atoms/Icons/SvgIcons/Access/TouchTour.svg.d.ts

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

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

@@ -15,6 +15,7 @@ export declare const IconLibrary: {
     Clips: ({ 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>)>;
     Clock: ({ 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>)>;
     Close: ({ 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>)>;
+    Captioned: ({ 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>)>;
     ClosedCaptions: ({ 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>)>;
     Confirm: ({ 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>)>;
     CreditCard: ({ 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>)>;
@@ -27,6 +28,7 @@ export declare const IconLibrary: {
     Expand12px: ({ 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>)>;
     ExternalLink: ({ 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>)>;
     Facebook: ({ 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>)>;
+    FamilyFriendly: ({ 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>)>;
     Favourite: ({ 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>)>;
     FavouriteFull: ({ 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>)>;
     Filter: ({ 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>)>;
@@ -75,6 +77,7 @@ export declare const IconLibrary: {
     Tick: ({ 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>)>;
     Tickets: ({ 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>)>;
     Tiktok: ({ 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>)>;
+    TouchTour: ({ 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>)>;
     Trailer: ({ 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>)>;
     Twitter: ({ 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>)>;
     User: ({ 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/Tab/Tab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, Navigation, StickyBar, TitleWithCTA, UpsellSection, Carousel, MinimalCarousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './organisms';
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
 export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CastFilter, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };

package/dist/components/molecules/CastFilter/CastFilters.style.d.ts

@@ -1,5 +1,7 @@
 export declare const CastFiltersComponentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CastFiltersWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeadingTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const CastWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PersonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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/index.d.ts

@@ -3,6 +3,7 @@ import Accordions from './Accordions';
 import AnnouncementBanner from './AnnouncementBanner';
 import Card from './Card';
 import Cards from './Cards';
+import CastFilter from './CastFilter';
 import ContactCard from './ContactCard';
 import ContentSummary from './ContentSummary';
 import Editorial from './Editorial';
@@ -35,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, 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, };
+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/helper.d.ts

@@ -279,7 +279,7 @@ export declare const processSlideLinks: (links: EditorialLink[]) => {
     onTransitionEnd?: ((event: import("react").TransitionEvent<HTMLAnchorElement>) => void) | undefined;
     onTransitionEndCapture?: ((event: import("react").TransitionEvent<HTMLAnchorElement>) => void) | undefined;
     text: string;
-    iconName?: "AddToMyList" | "Arrow" | "ArrowPagination" | "AudioDescription" | "Back10" | "BalletAndDance" | "Basket" | "BasketFull" | "BritishSignLanguage" | "BookTickets" | "CarouselArrow" | "ChooseDates" | "Cinema" | "Clips" | "Clock" | "Close" | "ClosedCaptions" | "Confirm" | "CreditCard" | "Delete" | "Detract" | "DropdownArrow" | "EditMyList" | "Email" | "Expand" | "Expand12px" | "ExternalLink" | "Facebook" | "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" | "Shift" | "Space" | "Standing" | "Star" | "Subscribe" | "Subtitles" | "Tick" | "Tickets" | "Tiktok" | "Trailer" | "Twitter" | "User" | "UserSignedIn" | "Volume" | "Watch" | "Wheelchair" | "X" | "Youtube" | undefined;
+    iconName?: "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" | "Shift" | "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;
     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;

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 */