@royaloperahouse/harmonic 1.0.1-g → 1.0.2

package/dist/harmonic.cjs.development.js

@@ -2692,7 +2692,6 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     color = _ref.color,
     dataTestId = _ref.dataTestId,
     isOpen = _ref.isOpen;
@@ -2727,9 +2726,8 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    id: tabLinkId,
-    trimText: trimText,
     color: color,
+    trimText: trimText,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -2759,7 +2757,6 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -2856,7 +2853,6 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
-      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -2936,8 +2932,7 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className,
-    tabLinkId: "account-link"
+    className: className
   });
 };
 
@@ -5667,7 +5662,6 @@ var Accordion = function Accordion(_ref) {
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
-      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -6020,9 +6014,14 @@ var BodyContent = function BodyContent(_ref2) {
     _ref2$renderGridItem = _ref2.renderGridItem,
     renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
   var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
-  var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
+  var content = /*#__PURE__*/React__default.createElement(TextContainer, {
+    tag: "div",
+    size: "large",
+    "data-testid": "text-container",
     className: textContainerClassName,
-    html: text
+    dangerouslySetInnerHTML: {
+      __html: addTypographyClasses(text)
+    }
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -6821,6 +6820,7 @@ 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,
@@ -6831,15 +6831,12 @@ var CastFilters = function CastFilters(_ref) {
     listRoleDescription = _ref.listRoleDescription,
     className = _ref.className,
     onSelect = _ref.onSelect,
-    onSelectId = _ref.onSelectId,
     onApply = _ref.onApply,
-    onApplyIds = _ref.onApplyIds,
     onClear = _ref.onClear,
     _ref$greyscale = _ref.greyscale,
     greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
     _ref$selectedIndices = _ref.selectedIndices,
-    selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
-    selectedIds = _ref.selectedIds;
+    selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   var castWrapperRef = React.useRef(null);
@@ -6941,51 +6938,14 @@ var CastFilters = function CastFilters(_ref) {
     isDraggingRef.current = false;
     hasDraggedRef.current = false;
   }, [isMobile]);
-  var getCastItemSelectionId = React.useCallback(function (person) {
-    if (person.id !== undefined && person.id !== null) return String(person.id);
-    if (person.slug !== undefined && person.slug !== null) return String(person.slug);
-    return person.name;
-  }, []);
-  var isIdSelectionMode = selectedIds !== undefined;
-  var selectedIdsSet = React.useMemo(function () {
-    var ids = selectedIds != null ? selectedIds : [];
-    return new Set(ids.map(function (id) {
-      return String(id);
-    }));
-  }, [selectedIds]);
-  var selectedStateIndices = React.useMemo(function () {
-    if (!isIdSelectionMode) return selectedIndices;
-    return cast.flatMap(function (person, index) {
-      var itemId = getCastItemSelectionId(person);
-      return selectedIdsSet.has(itemId) ? [index] : [];
-    });
-  }, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
-  var selectedStateIds = React.useMemo(function () {
-    if (isIdSelectionMode) {
-      return cast.filter(function (person) {
-        return selectedIdsSet.has(getCastItemSelectionId(person));
-      }).map(function (person) {
-        return getCastItemSelectionId(person);
-      });
-    }
-    return selectedIndices.map(function (index) {
-      return cast[index];
-    }).filter(function (person) {
-      return person !== undefined;
-    }).map(function (person) {
-      return getCastItemSelectionId(person);
-    });
-  }, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
-  var handleClick = React__default.useCallback(function (index, itemId, onClick) {
+  var handleClick = React__default.useCallback(function (index, onClick) {
     if (hasDraggedRef.current) return;
-    if (onSelectId) onSelectId(itemId);
     if (onSelect) onSelect(index);
     if (onClick) onClick();
-  }, [onSelect, onSelectId]);
-  var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
-    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
-      e.preventDefault();
-      handleClick(index, itemId, onClick);
+  }, [onSelect]);
+  var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
+    if (e.key === 'Enter') {
+      handleClick(index, onClick);
     }
   }, [handleClick]);
   var handleClearKeydown = React__default.useCallback(function (e) {
@@ -6999,25 +6959,23 @@ var CastFilters = function CastFilters(_ref) {
       var name = person.name,
         image = person.image,
         _onClick = person.onClick,
-        ariaLabel = person['aria-label'];
-      var personSelectionId = getCastItemSelectionId(person);
-      var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
+        rest = _objectWithoutPropertiesLoose(person, _excluded$i);
+      var isSelected = selectedIndices.includes(index);
       var personImage = image || placeholderImage || defaultPlaceholderImage;
       return /*#__PURE__*/React__default.createElement(PersonWrapper, {
-        key: personSelectionId,
+        key: index,
         "aria-selected": isSelected,
-        "aria-label": ariaLabel != null ? ariaLabel : name,
         role: "option",
         tabIndex: 0,
-        onClick: function onClick() {
-          return handleClick(index, personSelectionId, _onClick);
-        },
         onKeyDown: function onKeyDown(e) {
-          return handlePersonKeydown(e, index, personSelectionId, _onClick);
+          return handlePersonKeydown(e, index, _onClick);
         }
-      }, /*#__PURE__*/React__default.createElement(PersonToggle, {
-        isSelected: isSelected
-      }, /*#__PURE__*/React__default.createElement(PersonImage, {
+      }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
+        isSelected: isSelected,
+        onClick: function onClick() {
+          return handleClick(index, _onClick);
+        }
+      }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
         src: personImage,
         alt: image ? name : "Placeholder image for " + name,
         draggable: false,
@@ -7056,7 +7014,7 @@ var CastFilters = function CastFilters(_ref) {
     role: "listbox",
     "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
     "aria-label": "filter list",
-    "aria-multiselectable": "true",
+    "aria-multiselectable": true,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
@@ -7067,15 +7025,14 @@ var CastFilters = function CastFilters(_ref) {
     ref: swipeRef,
     onOverflowChange: handleOverflowChange,
     limitDragToNavigableRange: true
-  }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+  }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "medium",
     className: "mobile-only"
-  }, emptySelectionText)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
     onClick: function onClick() {
-      if (onApply) onApply(selectedStateIndices);
-      if (onApplyIds) onApplyIds(selectedStateIds);
+      return onApply(selectedIndices);
     }
-  }, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
+  }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
     tabIndex: 0,
     role: "button",
     onClick: onClear,
@@ -7324,7 +7281,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$i = ["text", "onClick"];
+var _excluded$j = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -7340,7 +7297,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$i);
+      rest = _objectWithoutPropertiesLoose(item, _excluded$j);
     var isSelected = index === selectedIndex;
     return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
       key: index,
@@ -7782,7 +7739,7 @@ var VideoControlsImpact = function VideoControlsImpact(_ref) {
   })))));
 };
 
-var _excluded$j = ["text"];
+var _excluded$k = ["text"];
 var CHAR_LIMIT = 100;
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
@@ -7904,7 +7861,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$j);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
   var video = {
     elementId: 'impact-header-video',
     desktop: videoUrlDesktop,
@@ -8381,7 +8338,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$k = ["text"];
+var _excluded$l = ["text"];
 var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -8486,7 +8443,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
   // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -9070,12 +9027,12 @@ 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$l = ["text"],
+var _excluded$m = ["text"],
   _excluded2$2 = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 185;
+var LENGTH_TEXT_PARAGRAPH = 130;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9138,7 +9095,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -9422,7 +9379,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$m = ["text"],
+var _excluded$n = ["text"],
   _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9449,7 +9406,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -9888,7 +9845,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_temp
   return "var(--color-state-error)";
 });
 
-var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
+var _excluded$o = ["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"
@@ -9943,7 +9900,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
     className = _ref2.className,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9962,7 +9919,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$o = ["label", "error", "width", "darkMode", "components"];
+var _excluded$p = ["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
@@ -9984,7 +9941,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$o);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10256,7 +10213,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$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
+var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
     altText = _ref.altText,
@@ -10266,7 +10223,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
     loading = _ref.loading,
     aspectRatio = _ref.aspectRatio,
     className = _ref.className,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
     aspectRatio: aspectRatio,
     className: className
@@ -11863,7 +11820,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
   return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
 });
 
-var _excluded$q = ["id", "text"];
+var _excluded$r = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -12074,7 +12031,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -12136,7 +12093,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$r = ["text"],
+var _excluded$s = ["text"],
   _excluded2$4 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -12146,7 +12103,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12254,7 +12211,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$s = ["isOpen", "setIsOpen", "children", "appElementId", "closeButtonAriaLabel"];
+var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -12328,9 +12285,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    _ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
-    closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -12362,11 +12317,10 @@ var ModalWindow = function ModalWindow(_ref) {
     columnSpanSmallDevice: 14
   }, /*#__PURE__*/React__default.createElement(InnerModal, null, /*#__PURE__*/React__default.createElement(CloseButton, {
     onClick: closeModalHandler,
-    "aria-label": closeButtonAriaLabel,
+    "aria-label": "Close modal window",
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Close",
-    "aria-hidden": "true"
+    iconName: "Close"
   })), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
@@ -12478,7 +12432,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_te
   var isDescriptionPresent = _ref4.isDescriptionPresent;
   return isDescriptionPresent && 'margin: 20px 0';
 });
-var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    line-height: 42px;\n  }\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  padding-top: 4px;\n  box-sizing: border-box;\n  /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n  max-height: calc(2 * 40px + 4px);\n"])));
+var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    line-height: 42px;\n  }\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n  /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n  max-height: calc(2 * 40px + 4px);\n"])));
 var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n"])));
 var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
 var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .swipe {\n    padding-inline-start: 2px;\n    padding-block-start: 2px;\n  }\n\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
@@ -12749,7 +12703,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$t = ["text"],
+var _excluded$u = ["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);
@@ -12760,7 +12714,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -12997,11 +12951,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
 
-var _excluded$u = ["logo", "slides"];
+var _excluded$v = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -13018,10 +12972,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$v = ["slides"];
+var _excluded$w = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -13035,11 +12989,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$w = ["logo", "slides"];
+var _excluded$x = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {