@royaloperahouse/chord 0.7.7 → 0.7.10

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/chord.cjs.development.js +92 -73
  3. package/dist/chord.cjs.development.js.map +1 -1
  4. package/dist/chord.cjs.production.min.js +1 -1
  5. package/dist/chord.cjs.production.min.js.map +1 -1
  6. package/dist/chord.esm.js +92 -73
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/organisms/Carousel/Carousel.style.d.ts +1 -0
  9. package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.style.d.ts +1 -0
  10. package/dist/components/organisms/Navigation/Navigation.style.d.ts +2 -0
  11. package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
  12. package/dist/types/navigation.d.ts +16 -0
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## [0.7.10]
4
+ - Theme: increases font size
5
+
6
+ ## [0.7.9]
7
+ - Impact: fix sponsor click and font size on mobile
8
+ - Carousel: add buttons to tablet
9
+ - Navigation: position fixed when menu is open on mobile
10
+ - Highlight Carousel: add html text to short description
11
+
12
+ ## [0.7.8]
13
+ - TitleWithCTA: add message prop
14
+
3
15
  ## [0.7.7]
4
16
  - Tabs: close dropdown when it is clicked twice
5
17
 
package/dist/chord.cjs.development.js CHANGED
@@ -124,19 +124,19 @@ var common = {
124
124
  },
125
125
  subtitles: {
126
126
  1: '18px',
127
- 2: '12px'
127
+ 2: '14px'
128
128
  },
129
129
  titleDescription: '20px',
130
130
  body: {
131
- 1: '17px',
132
- 2: '14px',
133
- 3: '12px'
131
+ 1: '19px',
132
+ 2: '16px',
133
+ 3: '14px'
134
134
  },
135
- listing: '17px',
135
+ listing: '19px',
136
136
  buttons: '14px',
137
137
  overline: {
138
- 1: '12px',
139
- 2: '10px'
138
+ 1: '14px',
139
+ 2: '12px'
140
140
  },
141
141
  navigation: '13px',
142
142
  search: '24px'
@@ -192,16 +192,16 @@ var common = {
192
192
  },
193
193
  titleDescription: '28px',
194
194
  body: {
195
- 1: '24px',
195
+ 1: '26px',
196
196
  2: '22px',
197
- 3: '18px'
197
+ 3: '20px'
198
198
  },
199
199
  peopleListing: '24px',
200
- listing: '34px',
200
+ listing: '36px',
201
201
  buttons: '20px',
202
202
  overline: {
203
- 1: '14px',
204
- 2: '12px'
203
+ 1: '16px',
204
+ 2: '14px'
205
205
  },
206
206
  navigation: '16px'
207
207
  },
@@ -291,20 +291,20 @@ var common = {
291
291
  6: '17px'
292
292
  },
293
293
  subtitles: {
294
- 1: '15px',
295
- 2: '12px'
294
+ 1: '16px',
295
+ 2: '14px'
296
296
  },
297
297
  titleDescription: '17px',
298
298
  body: {
299
- 1: '16px',
299
+ 1: '17px',
300
300
  2: '12px',
301
301
  3: '11px'
302
302
  },
303
303
  listing: '16px',
304
304
  buttons: '14px',
305
305
  overline: {
306
- 1: '12px',
307
- 2: '10px'
306
+ 1: '14px',
307
+ 2: '12px'
308
308
  },
309
309
  navigation: '13px',
310
310
  search: '20px'
@@ -355,20 +355,20 @@ var common = {
355
355
  6: '24px'
356
356
  },
357
357
  subtitles: {
358
- 1: '22px',
359
- 2: '16px'
358
+ 1: '24px',
359
+ 2: '18px'
360
360
  },
361
361
  titleDescription: '24px',
362
362
  body: {
363
- 1: '22px',
363
+ 1: '24px',
364
364
  2: '18px',
365
365
  3: '16px'
366
366
  },
367
367
  listing: '34px',
368
368
  buttons: '20px',
369
369
  overline: {
370
- 1: '14px',
371
- 2: '12px'
370
+ 1: '16px',
371
+ 2: '14px'
372
372
  },
373
373
  navigation: '16px'
374
374
  },
@@ -2194,7 +2194,7 @@ var CinemaBadge = function CinemaBadge(_ref) {
2194
2194
  }))));
2195
2195
  };
2196
2196
 
2197
- var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
2197
+ var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
2198
2198
  var zIndexes = {};
2199
2199
  zLevels.forEach(function (name, index) {
2200
2200
  zIndexes[name] = index;
@@ -3054,8 +3054,8 @@ var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$m || (_t
3054
3054
  var IconWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
3055
3055
  var theme = _ref.theme;
3056
3056
  return theme.colors.primary;
3057
- }, devices.mobileAndTablet);
3058
- var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobileAndTablet);
3057
+ }, devices.mobile);
3058
+ var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
3059
3059
 
3060
3060
  var RotatorButtons = function RotatorButtons(_ref) {
3061
3061
  var onClickPrev = _ref.onClickPrev,
@@ -3119,17 +3119,24 @@ var RotatorButtons = function RotatorButtons(_ref) {
3119
3119
  }, renderNextIcon()));
3120
3120
  };
3121
3121
 
3122
- var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
3123
- var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
3124
- var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
3125
- var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
3126
- var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
3127
- var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
3128
- var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
3129
- var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
3130
- var NavContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
3131
- var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
3132
- var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
3122
+ var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
3123
+ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
3124
+ var isMenuOpen = _ref.isMenuOpen;
3125
+ return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
3126
+ });
3127
+ var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
3128
+ var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
3129
+ var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
3130
+ var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
3131
+ var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref2) {
3132
+ var theme = _ref2.theme;
3133
+ return theme.spacing[12];
3134
+ });
3135
+ var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
3136
+ var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
3137
+ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
3138
+ var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
3139
+ var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
3133
3140
 
3134
3141
  var _templateObject$o;
3135
3142
  var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
@@ -3825,7 +3832,9 @@ var Navigation = function Navigation(_ref) {
3825
3832
  setshowSearch(false);
3826
3833
  };
3827
3834
 
3828
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
3835
+ return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
3836
+ isMenuOpen: showMenu
3837
+ }, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
3829
3838
  style: {
3830
3839
  height: "" + fullScreenHeight
3831
3840
  }
@@ -4156,7 +4165,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
4156
4165
  CarouselType["LargeCard"] = "LargeCard";
4157
4166
  })(exports.CarouselType || (exports.CarouselType = {}));
4158
4167
 
4159
- var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
4168
+ var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$5;
4160
4169
  var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
4161
4170
  var type = _ref.type,
4162
4171
  imagesHeightDesktop = _ref.imagesHeightDesktop;
@@ -4191,7 +4200,8 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
4191
4200
  });
4192
4201
  var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
4193
4202
  var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
4194
- var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
4203
+ var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4204
+ var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 10;\n }\n }\n"])), devices.tablet);
4195
4205
 
4196
4206
  var Carousel = function Carousel(_ref) {
4197
4207
  var children = _ref.children,
@@ -4262,7 +4272,7 @@ var Carousel = function Carousel(_ref) {
4262
4272
  type: type,
4263
4273
  imagesHeightDevice: imagesHeightDevice,
4264
4274
  imagesHeightDesktop: imagesHeightDesktop
4265
- }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
4275
+ }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
4266
4276
  columnStartDesktop: 3,
4267
4277
  columnSpanDesktop: 10,
4268
4278
  columnStartDevice: 2,
@@ -4274,7 +4284,8 @@ var Carousel = function Carousel(_ref) {
4274
4284
  }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
4275
4285
  columnStartDesktop: 14,
4276
4286
  columnSpanDesktop: 2,
4277
- columnStartDevice: 14
4287
+ columnStartDevice: 12,
4288
+ columnSpanDevice: 2
4278
4289
  }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
4279
4290
  "data-testid": "carousel-buttons-wrapper"
4280
4291
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
@@ -4298,7 +4309,7 @@ var Carousel = function Carousel(_ref) {
4298
4309
  })))));
4299
4310
  };
4300
4311
 
4301
- var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
4312
+ var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$6, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
4302
4313
  var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
4303
4314
  var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
4304
4315
  var theme = _ref.theme;
@@ -4312,7 +4323,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$j |
4312
4323
  }, devices.mobile);
4313
4324
  var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
4314
4325
  var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
4315
- var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
4326
+ var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
4316
4327
  var theme = _ref4.theme;
4317
4328
  return theme.fonts.mobile.sizes.headers[3];
4318
4329
  }, function (_ref5) {
@@ -4366,6 +4377,7 @@ var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$2 || (_t
4366
4377
  var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
4367
4378
  var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
4368
4379
  var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
4380
+ var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
4369
4381
 
4370
4382
  var _excluded$8 = ["text"];
4371
4383
 
@@ -4452,7 +4464,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
4452
4464
  tag: "h6"
4453
4465
  }, infoSubtitle), /*#__PURE__*/React__default.createElement(BodyText, {
4454
4466
  level: 1
4455
- }, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
4467
+ }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
4468
+ dangerouslySetInnerHTML: {
4469
+ __html: description
4470
+ }
4471
+ }))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
4456
4472
  "data-testid": "carousel-wrapper"
4457
4473
  }, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
4458
4474
  "data-testid": "rotator-buttons"
@@ -4525,29 +4541,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
4525
4541
  })));
4526
4542
  };
4527
4543
 
4528
- var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6, _templateObject7$3;
4544
+ var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
4529
4545
  var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
4530
4546
  var sticky = _ref.sticky;
4531
4547
  return sticky ? 'sticky' : 'initial';
4532
4548
  }, zIndexes.anchor);
4533
- var CTAGridWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
4534
- var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
4535
- var GridItemTitleWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 9;\n }\n }\n"])), devices.tablet);
4536
- var ButtonsDesktopGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n @media ", " {\n {\n grid-column: 12 / span 3;\n }\n }\n"])), devices.mobile, devices.tablet);
4537
- var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
4538
- var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
4539
- var theme = _ref2.theme;
4540
- return theme.colors.primaryButtonReverseBg;
4541
- }, function (_ref3) {
4549
+ var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
4550
+ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
4551
+ var title = _ref2.title;
4552
+ return title ? 'row' : 'row-reverse';
4553
+ }, devices.tablet, devices.mobile);
4554
+ var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
4555
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4556
+ var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
4557
+ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
4542
4558
  var theme = _ref3.theme;
4543
4559
  return theme.colors.primaryButtonReverseBg;
4544
4560
  }, function (_ref4) {
4545
4561
  var theme = _ref4.theme;
4546
- return theme.colors.primaryButtonReverse;
4562
+ return theme.colors.primaryButtonReverseBg;
4547
4563
  }, function (_ref5) {
4548
4564
  var theme = _ref5.theme;
4549
4565
  return theme.colors.primaryButtonReverse;
4566
+ }, function (_ref6) {
4567
+ var theme = _ref6.theme;
4568
+ return theme.colors.primaryButtonReverse;
4550
4569
  });
4570
+ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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);
4571
+ var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__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);
4551
4572
 
4552
4573
  var _excluded$b = ["text"],
4553
4574
  _excluded2 = ["text"];
@@ -4556,7 +4577,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
4556
4577
  var title = _ref.title,
4557
4578
  links = _ref.links,
4558
4579
  _ref$sticky = _ref.sticky,
4559
- sticky = _ref$sticky === void 0 ? false : _ref$sticky;
4580
+ sticky = _ref$sticky === void 0 ? false : _ref$sticky,
4581
+ message = _ref.message;
4560
4582
 
4561
4583
  var _ref2 = (links == null ? void 0 : links[0]) || {},
4562
4584
  primaryButtonText = _ref2.text,
@@ -4568,22 +4590,19 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
4568
4590
 
4569
4591
  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
4570
4592
  sticky: sticky
4571
- }, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
4572
- columnStartDesktop: 2,
4573
- columnSpanDesktop: 9,
4574
- columnStartDevice: 2,
4575
- columnSpanDevice: 12
4576
- }, /*#__PURE__*/React__default.createElement(AnchorTitle, {
4593
+ }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
4594
+ title: title
4595
+ }, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
4577
4596
  "data-testid": "anchor-title"
4578
4597
  }, /*#__PURE__*/React__default.createElement(Header, {
4579
4598
  level: 5
4580
- }, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
4581
- columnStartDesktop: 12,
4582
- columnSpanDesktop: 5,
4583
- columnStartDevice: 2,
4584
- columnSpanDevice: 12,
4599
+ }, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
4585
4600
  "data-testid": "anchor-ctas"
4586
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
4601
+ }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : message && /*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
4602
+ level: 6
4603
+ }, message)))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : message && /*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
4604
+ level: 6
4605
+ }, message)));
4587
4606
  };
4588
4607
 
4589
4608
  var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
@@ -4660,7 +4679,7 @@ var Accordions = function Accordions(_ref) {
4660
4679
  }));
4661
4680
  };
4662
4681
 
4663
- var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$3, _templateObject9$2;
4682
+ var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
4664
4683
  var LENGTH_LARGE_TEXT = 28;
4665
4684
  var LENGTH_SMALL_TEXT = 19;
4666
4685
  var LENGTH_TEXT_TABLET = 10;
@@ -4677,8 +4696,8 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$c ||
4677
4696
  var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4678
4697
  var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
4679
4698
  var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
4680
- var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
4681
- var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
4699
+ var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
4700
+ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
4682
4701
  var size = _ref3.size,
4683
4702
  primaryButtonTextLength = _ref3.primaryButtonTextLength,
4684
4703
  tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
@@ -5008,9 +5027,9 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_temp
5008
5027
  return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
5009
5028
  });
5010
5029
  var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
5011
- var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
5030
+ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
5012
5031
  var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
5013
- var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
5032
+ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
5014
5033
  var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
5015
5034
  var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
5016
5035