@royaloperahouse/harmonic 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## [1.0.4]
2
+ - Castfilter: fix NDVA issues
3
+
4
+ ## [1.0.3]
5
+ - Carousel title realignment following font change
6
+
1
7
  ## [1.0.2]
2
8
  - AnchorTabBar: fix focused element
3
9
 
@@ -1,6 +1,6 @@
1
1
  interface FocusableTabProps {
2
2
  hide?: boolean;
3
3
  }
4
- 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>;
4
+ 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>;
5
5
  export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export {};
@@ -6820,7 +6820,6 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
6820
6820
  });
6821
6821
  Swipe.displayName = 'Swipe';
6822
6822
 
6823
- var _excluded$i = ["name", "image", "onClick"];
6824
6823
  var CastFilters = function CastFilters(_ref) {
6825
6824
  var cast = _ref.cast,
6826
6825
  headingText = _ref.headingText,
@@ -6959,23 +6958,26 @@ var CastFilters = function CastFilters(_ref) {
6959
6958
  var name = person.name,
6960
6959
  image = person.image,
6961
6960
  _onClick = person.onClick,
6962
- rest = _objectWithoutPropertiesLoose(person, _excluded$i);
6961
+ ariaLabel = person['aria-label'];
6963
6962
  var isSelected = selectedIndices.includes(index);
6964
6963
  var personImage = image || placeholderImage || defaultPlaceholderImage;
6965
6964
  return /*#__PURE__*/React__default.createElement(PersonWrapper, {
6966
6965
  key: index,
6967
6966
  "aria-selected": isSelected,
6967
+ "aria-label": ariaLabel || (isSelected ? 'Deselect' : 'Select') + " " + name,
6968
+ "aria-posinset": index + 1,
6969
+ "aria-setsize": cast.length,
6968
6970
  role: "option",
6969
6971
  tabIndex: 0,
6970
6972
  onKeyDown: function onKeyDown(e) {
6971
6973
  return handlePersonKeydown(e, index, _onClick);
6972
6974
  }
6973
- }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
6975
+ }, /*#__PURE__*/React__default.createElement(PersonToggle, {
6974
6976
  isSelected: isSelected,
6975
6977
  onClick: function onClick() {
6976
6978
  return handleClick(index, _onClick);
6977
6979
  }
6978
- }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
6980
+ }, /*#__PURE__*/React__default.createElement(PersonImage, {
6979
6981
  src: personImage,
6980
6982
  alt: image ? name : "Placeholder image for " + name,
6981
6983
  draggable: false,
@@ -7013,7 +7015,6 @@ var CastFilters = function CastFilters(_ref) {
7013
7015
  ref: castWrapperRef,
7014
7016
  role: "listbox",
7015
7017
  "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
7016
- "aria-label": "filter list",
7017
7018
  "aria-multiselectable": true,
7018
7019
  onMouseDown: handleMouseDown,
7019
7020
  onMouseMove: handleMouseMove,
@@ -7281,7 +7282,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_
7281
7282
  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);
7282
7283
  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"])));
7283
7284
 
7284
- var _excluded$j = ["text", "onClick"];
7285
+ var _excluded$i = ["text", "onClick"];
7285
7286
  var HotFilters = function HotFilters(_ref) {
7286
7287
  var items = _ref.items,
7287
7288
  className = _ref.className,
@@ -7297,7 +7298,7 @@ var HotFilters = function HotFilters(_ref) {
7297
7298
  }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
7298
7299
  var text = item.text,
7299
7300
  _onClick = item.onClick,
7300
- rest = _objectWithoutPropertiesLoose(item, _excluded$j);
7301
+ rest = _objectWithoutPropertiesLoose(item, _excluded$i);
7301
7302
  var isSelected = index === selectedIndex;
7302
7303
  return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
7303
7304
  key: index,
@@ -7739,7 +7740,7 @@ var VideoControlsImpact = function VideoControlsImpact(_ref) {
7739
7740
  })))));
7740
7741
  };
7741
7742
 
7742
- var _excluded$k = ["text"];
7743
+ var _excluded$j = ["text"];
7743
7744
  var CHAR_LIMIT = 100;
7744
7745
  var useResponsiveVideo = function useResponsiveVideo(video, poster) {
7745
7746
  var mobileVideo = video.mobile || video.desktop;
@@ -7861,7 +7862,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
7861
7862
  var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
7862
7863
  var _ref5 = link || {},
7863
7864
  linkText = _ref5.text,
7864
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
7865
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
7865
7866
  var video = {
7866
7867
  elementId: 'impact-header-video',
7867
7868
  desktop: videoUrlDesktop,
@@ -8338,7 +8339,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8338
8339
  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
8339
8340
  };
8340
8341
 
8341
- var _excluded$l = ["text"];
8342
+ var _excluded$k = ["text"];
8342
8343
  var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
8343
8344
  var mobileVideo = video.mobile || video.desktop;
8344
8345
  var desktopVideo = video.desktop || video.mobile;
@@ -8443,7 +8444,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8443
8444
  showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
8444
8445
  var _ref5 = link || {},
8445
8446
  linkText = _ref5.text,
8446
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
8447
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
8447
8448
  // const titleSize = title && title.length > 20 ? 4 : 3;
8448
8449
  var video = {
8449
8450
  elementId: 'compact-header-video',
@@ -9027,7 +9028,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
9027
9028
  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);
9028
9029
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
9029
9030
 
9030
- var _excluded$m = ["text"],
9031
+ var _excluded$l = ["text"],
9031
9032
  _excluded2$2 = ["text"],
9032
9033
  _excluded3$1 = ["text"];
9033
9034
  var _buttonTypeToButton$1;
@@ -9095,7 +9096,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
9095
9096
  var _ref2 = firstButton || {},
9096
9097
  _ref2$text = _ref2.text,
9097
9098
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9098
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9099
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
9099
9100
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
9100
9101
  var secondButton = links == null ? void 0 : links[1];
9101
9102
  var _ref3 = secondButton || {},
@@ -9379,7 +9380,7 @@ var PromoChild = function PromoChild(_ref) {
9379
9380
  }));
9380
9381
  };
9381
9382
 
9382
- var _excluded$n = ["text"],
9383
+ var _excluded$m = ["text"],
9383
9384
  _excluded2$3 = ["text"];
9384
9385
  var LENGTH_TEXT$3 = 28;
9385
9386
  var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9406,7 +9407,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9406
9407
  var _ref2 = primaryButton || {},
9407
9408
  _ref2$text = _ref2.text,
9408
9409
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9409
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9410
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9410
9411
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
9411
9412
  var tertiaryButton = links == null ? void 0 : links[1];
9412
9413
  var _ref3 = tertiaryButton || {},
@@ -9845,7 +9846,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_temp
9845
9846
  return "var(--color-state-error)";
9846
9847
  });
9847
9848
 
9848
- var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
9849
+ var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
9849
9850
  var DropdownIndicator = function DropdownIndicator(props) {
9850
9851
  return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
9851
9852
  iconName: "DropdownArrow"
@@ -9900,7 +9901,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9900
9901
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
9901
9902
  components = _ref2.components,
9902
9903
  className = _ref2.className,
9903
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
9904
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9904
9905
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9905
9906
  label: label,
9906
9907
  error: error,
@@ -9919,7 +9920,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9919
9920
  })));
9920
9921
  };
9921
9922
 
9922
- var _excluded$p = ["label", "error", "width", "darkMode", "components"];
9923
+ var _excluded$o = ["label", "error", "width", "darkMode", "components"];
9923
9924
  /**
9924
9925
  * The Select2Async component is similar to Select 2, but uses react-select async
9925
9926
  * component for select instead of regular react-select component. This can be used
@@ -9941,7 +9942,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9941
9942
  _ref$darkMode = _ref.darkMode,
9942
9943
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
9943
9944
  components = _ref.components,
9944
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
9945
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
9945
9946
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9946
9947
  label: label,
9947
9948
  error: error,
@@ -10213,7 +10214,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_temp
10213
10214
  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"])));
10214
10215
  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"])));
10215
10216
 
10216
- var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
10217
+ var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
10217
10218
  var ImageWithCaption = function ImageWithCaption(_ref) {
10218
10219
  var caption = _ref.caption,
10219
10220
  altText = _ref.altText,
@@ -10223,7 +10224,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10223
10224
  loading = _ref.loading,
10224
10225
  aspectRatio = _ref.aspectRatio,
10225
10226
  className = _ref.className,
10226
- restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
10227
+ restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
10227
10228
  return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
10228
10229
  aspectRatio: aspectRatio,
10229
10230
  className: className
@@ -11820,7 +11821,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
11820
11821
  return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
11821
11822
  });
11822
11823
 
11823
- var _excluded$r = ["id", "text"];
11824
+ var _excluded$q = ["id", "text"];
11824
11825
  var AnchorTabBar = function AnchorTabBar(_ref) {
11825
11826
  var tabs = _ref.tabs,
11826
11827
  onTabClick = _ref.onTabClick,
@@ -12031,7 +12032,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
12031
12032
  }, tabs.map(function (_ref4) {
12032
12033
  var id = _ref4.id,
12033
12034
  text = _ref4.text,
12034
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
12035
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
12035
12036
  return /*#__PURE__*/React__default.createElement("li", {
12036
12037
  key: id
12037
12038
  }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -12093,7 +12094,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
12093
12094
  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);
12094
12095
  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);
12095
12096
 
12096
- var _excluded$s = ["text"],
12097
+ var _excluded$r = ["text"],
12097
12098
  _excluded2$4 = ["text"];
12098
12099
  var TitleWithCTA = function TitleWithCTA(_ref) {
12099
12100
  var title = _ref.title,
@@ -12103,7 +12104,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
12103
12104
  message = _ref.message;
12104
12105
  var _ref2 = (links == null ? void 0 : links[0]) || {},
12105
12106
  primaryButtonText = _ref2.text,
12106
- primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
12107
+ primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
12107
12108
  var _ref3 = (links == null ? void 0 : links[1]) || {},
12108
12109
  secondaryButtonText = _ref3.text,
12109
12110
  secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12211,7 +12212,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$19 || (_t
12211
12212
  var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
12212
12213
  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"])));
12213
12214
 
12214
- var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
12215
+ var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
12215
12216
  var MAX_Z_INDEX = 9999999999;
12216
12217
  if (Modal.defaultStyles.content) {
12217
12218
  Modal.defaultStyles.content.position = 'static';
@@ -12285,7 +12286,7 @@ var ModalWindow = function ModalWindow(_ref) {
12285
12286
  setIsOpen = _ref.setIsOpen,
12286
12287
  children = _ref.children,
12287
12288
  appElementId = _ref.appElementId,
12288
- modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
12289
+ modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
12289
12290
  var isMobile = useMobile();
12290
12291
  var customStyles = {
12291
12292
  overlay: {
@@ -12432,7 +12433,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_te
12432
12433
  var isDescriptionPresent = _ref4.isDescriptionPresent;
12433
12434
  return isDescriptionPresent && 'margin: 20px 0';
12434
12435
  });
12435
- 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"])));
12436
+ 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"])));
12436
12437
  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"])));
12437
12438
  var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12438
12439
  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) {
@@ -12703,7 +12704,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
12703
12704
  }, devices.mobile);
12704
12705
  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);
12705
12706
 
12706
- var _excluded$u = ["text"],
12707
+ var _excluded$t = ["text"],
12707
12708
  _excluded2$5 = ["text"];
12708
12709
  var _buttonTypeToButton$2;
12709
12710
  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 +12715,7 @@ var Buttons = function Buttons(_ref) {
12714
12715
  var _ref2 = firstButton || {},
12715
12716
  _ref2$text = _ref2.text,
12716
12717
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
12717
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
12718
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
12718
12719
  var secondButton = links == null ? void 0 : links[1];
12719
12720
  var _ref3 = secondButton || {},
12720
12721
  _ref3$text = _ref3.text,
@@ -12951,11 +12952,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12951
12952
  })));
12952
12953
  };
12953
12954
 
12954
- var _excluded$v = ["logo", "slides"];
12955
+ var _excluded$u = ["logo", "slides"];
12955
12956
  var HighlightsCinema = function HighlightsCinema(_ref) {
12956
12957
  var logo = _ref.logo,
12957
12958
  slides = _ref.slides,
12958
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12959
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
12959
12960
  var slidesWithLinks = slides.map(function (slide) {
12960
12961
  var links = processSlideLinks(slide.links);
12961
12962
  return _extends({}, slide, {
@@ -12972,10 +12973,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
12972
12973
  })));
12973
12974
  };
12974
12975
 
12975
- var _excluded$w = ["slides"];
12976
+ var _excluded$v = ["slides"];
12976
12977
  var HighlightsCore = function HighlightsCore(_ref) {
12977
12978
  var slides = _ref.slides,
12978
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12979
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12979
12980
  var slidesWithLinks = slides.map(function (slide) {
12980
12981
  var links = processSlideLinks(slide.links);
12981
12982
  return _extends({}, slide, {
@@ -12989,11 +12990,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
12989
12990
  })));
12990
12991
  };
12991
12992
 
12992
- var _excluded$x = ["logo", "slides"];
12993
+ var _excluded$w = ["logo", "slides"];
12993
12994
  var HighlightsStream = function HighlightsStream(_ref) {
12994
12995
  var logo = _ref.logo,
12995
12996
  slides = _ref.slides,
12996
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12997
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12997
12998
  var slidesWithLinks = slides.map(function (slide) {
12998
12999
  var links = processSlideLinks(slide.links);
12999
13000
  return _extends({}, slide, {