@royaloperahouse/harmonic 1.0.3 → 1.0.5-a

package/dist/harmonic.cjs.development.js

@@ -208,6 +208,26 @@ var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"t
 var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
   _excluded2 = ["children", "size", "color", "className", "bold", "tag"],
   _excluded3 = ["children", "size", "color", "className"];
+/* ~~~ Display - (use case) ~~~ */
+var DisplayHeader = function DisplayHeader(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    em = _ref.em,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'inherit' : _ref$color,
+    serif = _ref.serif,
+    className = _ref.className;
+  var classNames = createClassNames('display', {
+    size: size,
+    color: color,
+    serif: serif,
+    em: em,
+    className: className
+  }, typographyStyles);
+  return /*#__PURE__*/React__default.createElement("h1", {
+    className: classNames
+  }, children);
+};
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
 var HarmonicHeader = function HarmonicHeader(_ref2) {
   var _ref3;
@@ -6820,7 +6840,6 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Swipe.displayName = 'Swipe';
 
-var _excluded$i = ["name", "image", "onClick"];
 var CastFilters = function CastFilters(_ref) {
   var cast = _ref.cast,
     headingText = _ref.headingText,
@@ -6959,23 +6978,26 @@ var CastFilters = function CastFilters(_ref) {
       var name = person.name,
         image = person.image,
         _onClick = person.onClick,
-        rest = _objectWithoutPropertiesLoose(person, _excluded$i);
+        ariaLabel = person['aria-label'];
       var isSelected = selectedIndices.includes(index);
       var personImage = image || placeholderImage || defaultPlaceholderImage;
       return /*#__PURE__*/React__default.createElement(PersonWrapper, {
         key: index,
         "aria-selected": isSelected,
+        "aria-label": ariaLabel || (isSelected ? 'Deselect' : 'Select') + " " + name,
+        "aria-posinset": index + 1,
+        "aria-setsize": cast.length,
         role: "option",
         tabIndex: 0,
         onKeyDown: function onKeyDown(e) {
           return handlePersonKeydown(e, index, _onClick);
         }
-      }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
+      }, /*#__PURE__*/React__default.createElement(PersonToggle, {
         isSelected: isSelected,
         onClick: function onClick() {
           return handleClick(index, _onClick);
         }
-      }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
+      }, /*#__PURE__*/React__default.createElement(PersonImage, {
         src: personImage,
         alt: image ? name : "Placeholder image for " + name,
         draggable: false,
@@ -7013,7 +7035,6 @@ var CastFilters = function CastFilters(_ref) {
     ref: castWrapperRef,
     role: "listbox",
     "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
-    "aria-label": "filter list",
     "aria-multiselectable": true,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
@@ -7281,7 +7302,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_
 var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    gap: 10px;\n  }\n"])), devices.mobile);
 var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n"])));
 
-var _excluded$j = ["text", "onClick"];
+var _excluded$i = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -7297,7 +7318,7 @@ var HotFilters = function HotFilters(_ref) {
   }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
     var text = item.text,
       _onClick = item.onClick,
-      rest = _objectWithoutPropertiesLoose(item, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(item, _excluded$i);
     var isSelected = index === selectedIndex;
     return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
       key: index,
@@ -7739,7 +7760,7 @@ var VideoControlsImpact = function VideoControlsImpact(_ref) {
   })))));
 };
 
-var _excluded$k = ["text"];
+var _excluded$j = ["text"];
 var CHAR_LIMIT = 100;
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
@@ -7861,7 +7882,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
   var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
   var video = {
     elementId: 'impact-header-video',
     desktop: videoUrlDesktop,
@@ -8338,7 +8359,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$l = ["text"];
+var _excluded$k = ["text"];
 var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -8443,7 +8464,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
   // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -9027,7 +9048,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
 var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 
-var _excluded$m = ["text"],
+var _excluded$l = ["text"],
   _excluded2$2 = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
@@ -9095,7 +9116,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -9379,7 +9400,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$n = ["text"],
+var _excluded$m = ["text"],
   _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9406,7 +9427,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -9845,7 +9866,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_temp
   return "var(--color-state-error)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
+var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -9900,7 +9921,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
     className = _ref2.className,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9919,7 +9940,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$p = ["label", "error", "width", "darkMode", "components"];
+var _excluded$o = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -9941,7 +9962,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10213,7 +10234,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_temp
 var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table-caption;\n  caption-side: bottom;\n  margin-top: var(--carousel-image-caption-margin);\n"])));
 var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-clamp: 2;\n  max-height: 46px;\n  white-space: normal;\n  word-break: break-word;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
 
-var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
+var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
     altText = _ref.altText,
@@ -10223,7 +10244,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
     loading = _ref.loading,
     aspectRatio = _ref.aspectRatio,
     className = _ref.className,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
     aspectRatio: aspectRatio,
     className: className
@@ -11820,7 +11841,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
   return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
 });
 
-var _excluded$r = ["id", "text"];
+var _excluded$q = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -12031,7 +12052,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -12093,7 +12114,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
 var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$s = ["text"],
+var _excluded$r = ["text"],
   _excluded2$4 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -12103,7 +12124,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12211,7 +12232,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$19 || (_t
 var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
-var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
+var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -12285,7 +12306,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -12703,7 +12724,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
 }, devices.mobile);
 var ProgressContainer$1 = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  p {\n    margin-bottom: 16px;\n  }\n\n  @media ", " {\n    margin-top: 20px;\n\n    p {\n      margin-bottom: 12px;\n    }\n  }\n"])), devices.mobileAndTablet);
 
-var _excluded$u = ["text"],
+var _excluded$t = ["text"],
   _excluded2$5 = ["text"];
 var _buttonTypeToButton$2;
 var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12714,7 +12735,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -12951,11 +12972,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
 
-var _excluded$v = ["logo", "slides"];
+var _excluded$u = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12972,10 +12993,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$w = ["slides"];
+var _excluded$v = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12989,11 +13010,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$x = ["logo", "slides"];
+var _excluded$w = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -14580,6 +14601,7 @@ exports.ContactNewsletter = ContactNewsletter;
 exports.ContentSummary = ContentSummary;
 exports.ControlledDropdown = ControlledDropdown;
 exports.CreditListing = CreditListing;
+exports.DisplayHeader = DisplayHeader;
 exports.Dropdown = Dropdown;
 exports.Editorial = Editorial;
 exports.Footer = Footer;