@royaloperahouse/harmonic 0.1.6 → 0.1.7-a

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ICreditListing } from '../../../../types';
-export declare const getColumnSpanDesktop: (namesLength: number, charThreshold: number, peopleCount: number) => number;
-declare const CreditListing: ({ roles, columnCount }: ICreditListing & {
-    columnCount?: number | undefined;
-}) => React.JSX.Element;
+export declare const DEFAULT_COLUMN_COUNT = 4;
+export declare const DEFAULT_LARGE_COLUMN_SPAN = 2;
+export declare const DEFAULT_CHARACTER_THRESHOLD = 180;
+declare const CreditListing: ({ roles, columnCount, expandLargeEntries, largeColumnSpan, characterThreshold, }: ICreditListing) => React.JSX.Element;
 export default CreditListing;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISearchBarProps } from '../../../types/navigation';
-declare const SearchBar: ({ onClick, onClose }: ISearchBarProps) => React.JSX.Element;
+declare const SearchBar: ({ onClick, onClose, className }: ISearchBarProps) => React.JSX.Element;
 export default SearchBar;

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

@@ -3,5 +3,5 @@ export declare const SvgContainerSearch: import("styled-components").StyledCompo
 export declare const SvgContainerClose: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SearchUnavailableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SearchLinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextLinkWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;
 export declare const SearchArrowContainer: import("styled-components").StyledComponent<"a", any, {}, never>;

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

@@ -1,5 +1,5 @@
 import { ISelectProps } from '../../../types/formTypes';
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ className, color, iconName, title, direction, ariaLabel }: 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, {
+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";

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

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { ISignUpFormProps } from '../../../types/signUpForm';
+declare const SignUpFormComponent: FunctionComponent<ISignUpFormProps>;
+export default SignUpFormComponent;

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

@@ -0,0 +1,20 @@
+import { Colors } from '../../../types';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    theme: Colors;
+}, never>;
+export declare const SignUpFormWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SignUpTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Form: import("styled-components").StyledComponent<"form", any, {}, never>;
+export declare const FormFooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ServerError: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CTALinkWrapper: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const FieldsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownAreaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {
+    isOpen?: boolean | undefined;
+}, never>;
+export declare const HiddenInstructions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SignUpHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ITabsProps } from '../../../types/types';
-declare const Tabs: ({ items, onChange, onShowMenu, showMenu, colorPrimary }: ITabsProps) => React.JSX.Element;
+declare const Tabs: ({ items, onChange, onShowMenu, showMenu, className }: ITabsProps) => React.JSX.Element;
 export default Tabs;

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

@@ -32,4 +32,5 @@ import AuxiliaryNav from './AuxiliaryNav';
 import PasswordStrength from './PasswordStrength';
 import Table from './Table';
 import VideoWithControls from './VideoWithControls';
-export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, Tabs, Table, TextOnly, UpsellCard, VideoWithControls, };
+import SignUpForm from './SignUpForm';
+export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, Tabs, Table, TextOnly, UpsellCard, VideoWithControls, SignUpForm, };

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

@@ -2,5 +2,6 @@ export declare const FooterSection: import("styled-components").StyledComponent<
 export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PolicyLinksSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SocialAndNewsletterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LogoAndDescriptionSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NewsletterBodyTextWrapper: import("styled-components").StyledComponent<({ level, children, tag }: import("../../../types/typography").IBodyTextProps) => import("react").JSX.Element, any, {}, never>;
+export declare const TextLinkWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;

package/dist/components/organisms/Navigation/Navigation.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { INavigationProps } from '../../../types/navigation';
-declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink, desktopLogoUrl, devicesLogoUrl, }: INavigationProps) => React.JSX.Element;
+declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, crest, className }: INavigationProps) => React.JSX.Element;
 export default Navigation;

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

@@ -9,8 +9,14 @@ export declare const GridItemSearch: import("styled-components").StyledComponent
     visible?: boolean | undefined;
 }, never>;
 export declare const NavigationGridMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileMenuContainer: import("styled-components").StyledComponent<"div", any, {
+    showSearch?: boolean | undefined;
+}, never>;
+export declare const LogoContainer: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const LogoContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavContainerGridItem: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const NavTopContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavTopContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -6,6 +6,6 @@ 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").IPrimaryButtonProps>, any, {}, never>;
+export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/buttonTypes").PrimaryButtonProps>, any, {}, never>;
 export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MessageWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.css

@@ -1,67 +1,77 @@
-/* Global Styles for Harmonic CSS components */
-:root { 
-    --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;
-    --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;
-    --harmonic-red: #F40B0B;
-    --harmonic-black: #000000;
-    --text-link-underline-offset: 4px;
-  }
-
-
-/* TODO: store breakpoints here for use in css components */  
-/* export const breakpoints = {
-    xs: 320,
-    sm: 700,
-    md: 1140,
-    ml: 1280,
-    lg: 1400,
-  }; */
 /* ~~~~~ General Styling Classes ~~~~~ */
-  .styles_color-black__a05Fo {
-    color: var(--harmonic-black);
-  }
-  
-  .styles_color-red__zwTZW {
-    color: var(--harmonic-red);
-  }
+.styles_color-primary__UYod1 {
+  color: var(--color-primary);
+}
 
-  .styles_em__v4FoO {
-    font-style: italic;
-  }
+.styles_color-black__a05Fo {
+  color: var(--color-base-black);
+}
+
+.styles_color-white__HiYDT {
+  color: var(--color-base-white);
+}
+
+.styles_color-red__zwTZW {
+  color: var(--color-primary-red);
+}
+
+.styles_color-grey__Gc0wv {
+  color: var(--color-base-dark-grey);
+}
+
+.styles_em__v4FoO {
+  font-style: italic;
+}
 /* ~~~ */
 
 /* Display Headers */
 .styles_display__VgnTB {
+  margin: 0;
   font-family: var(--font-family-sans);
+  line-height: 100%;
 
   &.styles_large__vqVxY {
     font-size: 96px;
+    font-weight: 700;
     letter-spacing: -5px;
   }
 
   &.styles_small__e7YDe {
     font-size: 68px;
-    letter-spacing: -3px;
     font-weight: 500;
+    letter-spacing: -3px;
   }
 
-  &.styles_serif__b-ZjM, &.styles_em__v4FoO {
+  /* Serif and Italic styles */
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
 
-  @media (max-width: 600px) {
+  /* Serif and Italic adjustments */
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
+    letter-spacing: -3px;
+  }
+
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
     &.styles_large__vqVxY {
       font-size: 38px;
-      letter-spacing: -1.5px;  
+      letter-spacing: -1.5px;
     }
-    
+
     &.styles_small__e7YDe {
       font-size: 32px;
       letter-spacing: -1.5px;
     }
 
-    &.styles_large__vqVxY.styles_serif__b-ZjM, 
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
     &.styles_large__vqVxY.styles_em__v4FoO,
     &.styles_small__e7YDe.styles_serif__b-ZjM,
     &.styles_small__e7YDe.styles_em__v4FoO {
@@ -72,6 +82,7 @@
 
 /* Headers */
 .styles_header__UDH-H {
+  margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
@@ -84,7 +95,7 @@
   &.styles_medium__WQPZj {
     font-size: 34px;
     line-height: 40px;
-    letter-spacing: -1.5px;
+    letter-spacing: -1px;
   }
 
   &.styles_small__e7YDe {
@@ -93,150 +104,212 @@
     letter-spacing: -0.5px;
   }
 
-  &.styles_serif__b-ZjM, &.styles_em__v4FoO {
+  /* Serif and Italic styles */
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
-    font-weight: 500;
   }
 
-  @media (max-width: 600px) {
+  /* Serif and Italic letter-spacing overrides */
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
+    letter-spacing: -0.5px;
+  }
+
+  &.styles_medium__WQPZj.styles_serif__b-ZjM,
+  &.styles_medium__WQPZj.styles_em__v4FoO {
+    letter-spacing: -0.5px;
+  }
+
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
     &.styles_large__vqVxY {
       font-size: 28px;
-      letter-spacing: -1.5px;
       line-height: 34px;
+      letter-spacing: -1.5px;
     }
-    
+
     &.styles_medium__WQPZj {
       font-size: 24px;
-      letter-spacing: -1px;
       line-height: 28px;
+      letter-spacing: -1px;
     }
-    
+
     &.styles_small__e7YDe {
       font-size: 20px;
-      letter-spacing: -0.75px;
       line-height: 26px;
+      letter-spacing: -0.75px;
+    }
+
+    /* Mobile overrides for serif/italic letter-spacing */
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_medium__WQPZj.styles_serif__b-ZjM,
+    &.styles_medium__WQPZj.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
+      letter-spacing: -0.5px;
     }
   }
 }
 
 /* Subtitle */
 .styles_subtitle__os3DH {
+  margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
   &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
+    letter-spacing: -0.5px;
   }
 
   &.styles_small__e7YDe {
     font-size: 17px;
     line-height: 24px;
+    letter-spacing: -0.5px;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 699px) {
     &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
+      letter-spacing: -0.5px;
     }
-    
+
     &.styles_small__e7YDe {
       font-size: 14px;
-      letter-spacing: -0.2px;
       line-height: 20px;
+      letter-spacing: -0.2px;
     }
   }
 }
 
 /* Body Copy */
 .styles_bodycopy__uEx9r {
+  margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
-  letter-spacing: -0.5px;
 
   &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
+    letter-spacing: -0.5px;
   }
 
   &.styles_medium__WQPZj {
     font-size: 17px;
     line-height: 24px;
+    letter-spacing: -0.5px;
   }
 
   &.styles_small__e7YDe {
     font-size: 14px;
     line-height: 20px;
+    letter-spacing: -0.5px;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 699px) {
     &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
+      letter-spacing: -0.5px;
     }
-    
+
     &.styles_medium__WQPZj {
       font-size: 14px;
-      letter-spacing: -0.2px;
       line-height: 20px;
+      letter-spacing: -0.2px;
     }
-    
+
     &.styles_small__e7YDe {
       font-size: 11px;
-      letter-spacing: -0.2px;
       line-height: 16px;
+      letter-spacing: -0.2px;
     }
   }
 }
 
 /* Overline */
 .styles_overline__5xGDa {
+  margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
 
-  &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: 0.3px; }
-  &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: 0.2px; }
+  &.styles_large__vqVxY {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.styles_small__e7YDe {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
 
-  @media (max-width: 600px) {
+  @media (max-width: 699px) {
     &.styles_large__vqVxY {
       line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
     }
-    
+
     &.styles_small__e7YDe {
-      letter-spacing: 0.3px;
       line-height: 14px;
+      letter-spacing: 0.3px;
     }
   }
 }
 
 /* Button Text */
 .styles_buttontext__UPumF {
+  margin: 0;
   font-family: var(--font-family-sans);
-  font-weight: 400;
   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 */
 .styles_captiontext__-TA6x {
-  font-size: 17px;
+  margin: 0;
+  font-family: var(--font-family-sans);
   font-weight: 400;
-  font-style: italic;
+  font-size: 17px;
   line-height: 24px;
+  letter-spacing: -0.5px;
 
-  @media (max-width: 600px) {
+  @media (max-width: 699px) {
     font-size: 14px;
-    line-height: 17px;
-  }    
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
 }
 
 /* Navigation Text */
 .styles_navigationtext__qnnIo {
+  margin: 0;
   font-family: var(--font-family-sans);
-  font-size: 17px;
-  font-weight: 500;
-  text-transform: uppercase;
+  font-size: 19px;
+  line-height: 19px;
   letter-spacing: 0.4px;
-  line-height: 17px;
-}
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+