@royaloperahouse/harmonic 0.1.9-a → 0.2.0
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/README.GIT +278 -0
- package/README.md +43 -252
- package/dist/components/Typography/Typography.d.ts +1 -1
- package/dist/components/Typography/utils.d.ts +7 -0
- package/dist/components/atoms/Buttons/Primary/utils.d.ts +2 -0
- package/dist/components/atoms/Buttons/Secondary/utils.d.ts +2 -1
- package/dist/components/atoms/Buttons/Tertiary/utils.d.ts +1 -1
- package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
- package/dist/components/atoms/SponsorLogo/SponsorLogo.style.d.ts +1 -2
- package/dist/components/index.d.ts +4 -4
- package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
- package/dist/components/molecules/Card/Card.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +3 -12
- package/dist/components/molecules/Information/utils.d.ts +11 -0
- package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +5 -0
- package/dist/components/molecules/PageHeading/Promo/Promo.style.d.ts +28 -0
- package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +10 -0
- package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +10 -0
- package/dist/components/molecules/PageHeading/Promo/components/Image.d.ts +4 -0
- package/dist/components/molecules/PageHeading/Promo/index.d.ts +2 -0
- package/dist/components/molecules/PageHeading/index.d.ts +2 -1
- package/dist/components/molecules/Swipe/Swipe.d.ts +13 -0
- package/dist/components/molecules/Swipe/Swipe.style.d.ts +8 -0
- package/dist/components/molecules/Swipe/helper.d.ts +2 -0
- package/dist/components/molecules/Swipe/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -2
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +4 -0
- package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +11 -0
- package/dist/components/organisms/Carousels/Carousel/helper.d.ts +26 -0
- package/dist/components/organisms/Carousels/Carousel/index.d.ts +2 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +4 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.style.d.ts +21 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCinema.d.ts +4 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCore.d.ts +4 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsStream.d.ts +4 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +5 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +10 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +12 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +291 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/index.d.ts +5 -0
- package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.d.ts +4 -0
- package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.style.d.ts +4 -0
- package/dist/components/organisms/Carousels/MinimalCarousel/index.d.ts +2 -0
- package/dist/components/organisms/Footer/Footer.style.d.ts +0 -1
- package/dist/components/organisms/index.d.ts +4 -1
- package/dist/harmonic.cjs.development.css +71 -31
- package/dist/harmonic.cjs.development.js +2145 -751
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +2150 -766
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/types/buttonTypes.d.ts +6 -2
- package/dist/types/card.d.ts +2 -2
- package/dist/types/carousel.d.ts +68 -9
- package/dist/types/editorial.d.ts +15 -3
- package/dist/types/image.d.ts +9 -3
- package/dist/types/impactHeader.d.ts +52 -1
- package/dist/types/index.d.ts +3 -3
- package/dist/types/information.d.ts +18 -41
- package/dist/types/progress.d.ts +4 -0
- package/dist/types/types.d.ts +5 -9
- package/dist/types/typography.d.ts +11 -5
- package/package.json +2 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, cloneElement, useLayoutEffect } from 'react';
|
|
1
|
+
import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, useImperativeHandle, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import Modal from 'react-modal';
|
|
@@ -382,20 +382,76 @@ function styleInject(css, ref) {
|
|
|
382
382
|
}
|
|
383
383
|
}
|
|
384
384
|
|
|
385
|
-
var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n color: var(--color-base-dark-grey);\n}\n\n.styles_em__v4FoO {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.styles_large__vqVxY {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -3px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.styles_small__e7YDe {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.styles_small__e7YDe {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.styles_small__e7YDe {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
385
|
+
var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n color: var(--color-base-dark-grey);\n}\n\n.styles_color-inherit__Y12df {\n color: inherit;\n}\n\n.styles_em__v4FoO {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.styles_large__vqVxY {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -3px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.styles_small__e7YDe {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.styles_small__e7YDe {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.styles_small__e7YDe {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
386
386
|
styleInject(css_248z);
|
|
387
387
|
|
|
388
|
-
|
|
388
|
+
// Utility function for creating className strings
|
|
389
|
+
var createClassNames = function createClassNames(baseClass, options) {
|
|
390
|
+
var size = options.size,
|
|
391
|
+
_options$color = options.color,
|
|
392
|
+
color = _options$color === void 0 ? 'primary' : _options$color,
|
|
393
|
+
serif = options.serif,
|
|
394
|
+
em = options.em,
|
|
395
|
+
className = options.className;
|
|
396
|
+
return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
var _excluded = ["children", "size", "color", "className"],
|
|
400
|
+
_excluded2 = ["children", "size", "color", "className"];
|
|
401
|
+
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
402
|
+
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
403
|
+
var children = _ref2.children,
|
|
404
|
+
size = _ref2.size,
|
|
405
|
+
em = _ref2.em,
|
|
406
|
+
_ref2$color = _ref2.color,
|
|
407
|
+
color = _ref2$color === void 0 ? 'primary' : _ref2$color,
|
|
408
|
+
serif = _ref2.serif,
|
|
409
|
+
Tag = _ref2.hierarchy,
|
|
410
|
+
className = _ref2.className;
|
|
411
|
+
var classNames = createClassNames('header', {
|
|
412
|
+
size: size,
|
|
413
|
+
color: color,
|
|
414
|
+
serif: serif,
|
|
415
|
+
em: em,
|
|
416
|
+
className: className
|
|
417
|
+
});
|
|
418
|
+
return /*#__PURE__*/React__default.createElement(Tag, {
|
|
419
|
+
className: classNames
|
|
420
|
+
}, children);
|
|
421
|
+
};
|
|
422
|
+
/* ~~~ Subtitle - (use case) ~~~ */
|
|
423
|
+
var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
|
|
424
|
+
var children = _ref3.children,
|
|
425
|
+
size = _ref3.size,
|
|
426
|
+
_ref3$color = _ref3.color,
|
|
427
|
+
color = _ref3$color === void 0 ? 'primary' : _ref3$color,
|
|
428
|
+
className = _ref3.className;
|
|
429
|
+
var classNames = createClassNames('subtitle', {
|
|
430
|
+
size: size,
|
|
431
|
+
color: color,
|
|
432
|
+
className: className
|
|
433
|
+
});
|
|
434
|
+
return /*#__PURE__*/React__default.createElement("p", {
|
|
435
|
+
className: classNames
|
|
436
|
+
}, children);
|
|
437
|
+
};
|
|
389
438
|
/* ~~~ Body Copy Text - (use case) ~~~ */
|
|
390
439
|
var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
|
|
391
440
|
var children = _ref4.children,
|
|
392
|
-
size = _ref4.size,
|
|
441
|
+
_ref4$size = _ref4.size,
|
|
442
|
+
size = _ref4$size === void 0 ? 'medium' : _ref4$size,
|
|
393
443
|
_ref4$color = _ref4.color,
|
|
394
444
|
color = _ref4$color === void 0 ? 'primary' : _ref4$color,
|
|
395
|
-
className = _ref4.className
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
445
|
+
className = _ref4.className,
|
|
446
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
447
|
+
var classNames = createClassNames('bodycopy', {
|
|
448
|
+
size: size,
|
|
449
|
+
color: color,
|
|
450
|
+
className: className
|
|
451
|
+
});
|
|
452
|
+
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
453
|
+
className: classNames
|
|
454
|
+
}, props), children);
|
|
399
455
|
};
|
|
400
456
|
/* ~~~ Overline - (use case) ~~~ */
|
|
401
457
|
var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
@@ -404,9 +460,14 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
404
460
|
_ref5$color = _ref5.color,
|
|
405
461
|
color = _ref5$color === void 0 ? 'primary' : _ref5$color,
|
|
406
462
|
className = _ref5.className,
|
|
407
|
-
props = _objectWithoutPropertiesLoose(_ref5,
|
|
463
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
|
|
464
|
+
var classNames = createClassNames('overline', {
|
|
465
|
+
size: size,
|
|
466
|
+
color: color,
|
|
467
|
+
className: className
|
|
468
|
+
});
|
|
408
469
|
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
409
|
-
className:
|
|
470
|
+
className: classNames
|
|
410
471
|
}, props), children);
|
|
411
472
|
};
|
|
412
473
|
|
|
@@ -697,11 +758,11 @@ var devices = {
|
|
|
697
758
|
};
|
|
698
759
|
|
|
699
760
|
var _templateObject$1, _templateObject2;
|
|
700
|
-
var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n
|
|
761
|
+
var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
701
762
|
var iconName = _ref.iconName;
|
|
702
763
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
703
764
|
}, devices.mobile);
|
|
704
|
-
var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n
|
|
765
|
+
var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n"])));
|
|
705
766
|
|
|
706
767
|
var _templateObject$2;
|
|
707
768
|
var Directions = {
|
|
@@ -2645,9 +2706,31 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
|
|
|
2645
2706
|
}
|
|
2646
2707
|
return COLORS.background;
|
|
2647
2708
|
};
|
|
2709
|
+
var getHoveredColor = function getHoveredColor(_ref3) {
|
|
2710
|
+
var disabled = _ref3.disabled,
|
|
2711
|
+
hoveredColor = _ref3.hoveredColor;
|
|
2712
|
+
if (disabled) {
|
|
2713
|
+
return COLORS.darkGrey;
|
|
2714
|
+
}
|
|
2715
|
+
if (hoveredColor) {
|
|
2716
|
+
return "var(--color-" + hoveredColor + ")";
|
|
2717
|
+
}
|
|
2718
|
+
return COLORS.hover;
|
|
2719
|
+
};
|
|
2720
|
+
var getPressedColor = function getPressedColor(_ref4) {
|
|
2721
|
+
var disabled = _ref4.disabled,
|
|
2722
|
+
pressedColor = _ref4.pressedColor;
|
|
2723
|
+
if (disabled) {
|
|
2724
|
+
return COLORS.darkGrey;
|
|
2725
|
+
}
|
|
2726
|
+
if (pressedColor) {
|
|
2727
|
+
return "var(--color-" + pressedColor + ")";
|
|
2728
|
+
}
|
|
2729
|
+
return COLORS.pressed;
|
|
2730
|
+
};
|
|
2648
2731
|
|
|
2649
2732
|
var _templateObject$3, _templateObject2$1;
|
|
2650
|
-
var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n
|
|
2733
|
+
var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor);
|
|
2651
2734
|
var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2652
2735
|
|
|
2653
2736
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
@@ -2700,13 +2783,9 @@ var getTextColor$1 = function getTextColor(_ref) {
|
|
|
2700
2783
|
}
|
|
2701
2784
|
return COLORS$1["default"];
|
|
2702
2785
|
};
|
|
2703
|
-
var
|
|
2704
|
-
var disabled = _ref2.disabled
|
|
2705
|
-
|
|
2706
|
-
};
|
|
2707
|
-
var getBorderColor = function getBorderColor(_ref3) {
|
|
2708
|
-
var disabled = _ref3.disabled,
|
|
2709
|
-
borderColor = _ref3.borderColor;
|
|
2786
|
+
var getBorderColor = function getBorderColor(_ref2) {
|
|
2787
|
+
var disabled = _ref2.disabled,
|
|
2788
|
+
borderColor = _ref2.borderColor;
|
|
2710
2789
|
if (disabled) {
|
|
2711
2790
|
return COLORS$1.disabled;
|
|
2712
2791
|
}
|
|
@@ -2715,9 +2794,34 @@ var getBorderColor = function getBorderColor(_ref3) {
|
|
|
2715
2794
|
}
|
|
2716
2795
|
return COLORS$1.border;
|
|
2717
2796
|
};
|
|
2797
|
+
var getHoveredColor$1 = function getHoveredColor(_ref3) {
|
|
2798
|
+
var disabled = _ref3.disabled,
|
|
2799
|
+
hoveredColor = _ref3.hoveredColor;
|
|
2800
|
+
if (disabled) {
|
|
2801
|
+
return COLORS$1.disabled;
|
|
2802
|
+
}
|
|
2803
|
+
if (hoveredColor) {
|
|
2804
|
+
return "var(--color-" + hoveredColor + ")";
|
|
2805
|
+
}
|
|
2806
|
+
return COLORS$1.hover;
|
|
2807
|
+
};
|
|
2808
|
+
var getPressedColor$1 = function getPressedColor(_ref4) {
|
|
2809
|
+
var disabled = _ref4.disabled,
|
|
2810
|
+
pressedColor = _ref4.pressedColor;
|
|
2811
|
+
if (disabled) {
|
|
2812
|
+
return COLORS$1.disabled;
|
|
2813
|
+
}
|
|
2814
|
+
if (pressedColor) {
|
|
2815
|
+
return "var(--color-" + pressedColor + ")";
|
|
2816
|
+
}
|
|
2817
|
+
return COLORS$1.pressed;
|
|
2818
|
+
};
|
|
2718
2819
|
|
|
2719
2820
|
var _templateObject$4, _templateObject2$2;
|
|
2720
|
-
var SecondaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n
|
|
2821
|
+
var SecondaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n ", "\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$1, function (_ref) {
|
|
2822
|
+
var disabled = _ref.disabled;
|
|
2823
|
+
return disabled && COLORS$1.disabled;
|
|
2824
|
+
}, getBorderColor, getPointerEvents, getTextColor$1, getHoveredColor$1, getHoveredColor$1, getHoveredColor$1, getPressedColor$1, getPressedColor$1, getPressedColor$1);
|
|
2721
2825
|
var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2722
2826
|
|
|
2723
2827
|
var _excluded$4 = ["children", "disabled", "className"];
|
|
@@ -2756,7 +2860,7 @@ var COLORS$2 = {
|
|
|
2756
2860
|
hover: 'var(--button-tertiary-hover-color)',
|
|
2757
2861
|
pressed: 'var(--button-tertiary-pressed-color)'
|
|
2758
2862
|
};
|
|
2759
|
-
var
|
|
2863
|
+
var getTextColor$2 = function getTextColor(_ref) {
|
|
2760
2864
|
var disabled = _ref.disabled,
|
|
2761
2865
|
textColor = _ref.textColor;
|
|
2762
2866
|
if (disabled) {
|
|
@@ -2769,7 +2873,7 @@ var getButtonColor = function getButtonColor(_ref) {
|
|
|
2769
2873
|
};
|
|
2770
2874
|
|
|
2771
2875
|
var _templateObject$5, _templateObject2$3;
|
|
2772
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n :hover:not(:active) {\n color: ", ";\n\n
|
|
2876
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
|
|
2773
2877
|
var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
|
|
2774
2878
|
|
|
2775
2879
|
var _excluded$5 = ["children", "className"];
|
|
@@ -2977,6 +3081,8 @@ var AspectRatio;
|
|
|
2977
3081
|
AspectRatio["4:3"] = "4 / 3";
|
|
2978
3082
|
AspectRatio["8:3"] = "8 / 3";
|
|
2979
3083
|
AspectRatio["16:9"] = "16 / 9";
|
|
3084
|
+
AspectRatio["90:17"] = "90 / 17";
|
|
3085
|
+
AspectRatio["75:32"] = "75 / 32";
|
|
2980
3086
|
})(AspectRatio || (AspectRatio = {}));
|
|
2981
3087
|
var AspectRatioLegacy;
|
|
2982
3088
|
(function (AspectRatioLegacy) {
|
|
@@ -2985,6 +3091,8 @@ var AspectRatioLegacy;
|
|
|
2985
3091
|
AspectRatioLegacy["4 / 3"] = "75";
|
|
2986
3092
|
AspectRatioLegacy["8 / 3"] = "37.5";
|
|
2987
3093
|
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
3094
|
+
AspectRatioLegacy["90 / 17"] = "18.88";
|
|
3095
|
+
AspectRatioLegacy["75 / 32"] = "15";
|
|
2988
3096
|
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2989
3097
|
var AspectRatioWidth;
|
|
2990
3098
|
(function (AspectRatioWidth) {
|
|
@@ -2993,6 +3101,8 @@ var AspectRatioWidth;
|
|
|
2993
3101
|
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2994
3102
|
AspectRatioWidth["8 / 3"] = "2.67";
|
|
2995
3103
|
AspectRatioWidth["16 / 9"] = "1.78";
|
|
3104
|
+
AspectRatioWidth["90 / 17"] = "5.29";
|
|
3105
|
+
AspectRatioWidth["75 / 32"] = "2.34";
|
|
2996
3106
|
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2997
3107
|
|
|
2998
3108
|
var _templateObject$a;
|
|
@@ -3033,36 +3143,39 @@ var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
|
|
|
3033
3143
|
};
|
|
3034
3144
|
|
|
3035
3145
|
var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
3036
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
3146
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n box-shadow: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
3037
3147
|
var height = _ref.height;
|
|
3038
3148
|
return height ? height + "px" : '6px';
|
|
3149
|
+
}, function (_ref2) {
|
|
3150
|
+
var shadow = _ref2.shadow;
|
|
3151
|
+
return shadow ? '0px 1px 4px 0px rgba(0, 0, 0, 0.15)' : 'none';
|
|
3039
3152
|
});
|
|
3040
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n padding-left: ", ";\n\n @media ", " {\n padding-left: ", ";\n }\n"])), function (
|
|
3041
|
-
var color =
|
|
3042
|
-
return color ? "var(--base-
|
|
3043
|
-
}, function (_ref3) {
|
|
3044
|
-
var progress = _ref3.progress;
|
|
3045
|
-
return progress;
|
|
3153
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n z-index: ", ";\n padding-left: ", ";\n\n @media ", " {\n padding-left: ", ";\n }\n"])), function (_ref3) {
|
|
3154
|
+
var color = _ref3.color;
|
|
3155
|
+
return color ? "var(--color-base-" + color + ")" : 'var(--color-base-white)';
|
|
3046
3156
|
}, function (_ref4) {
|
|
3047
|
-
var
|
|
3048
|
-
return
|
|
3049
|
-
},
|
|
3157
|
+
var progress = _ref4.progress;
|
|
3158
|
+
return progress;
|
|
3159
|
+
}, zIndexes.contentOverlay, function (_ref5) {
|
|
3050
3160
|
var isProgressWithSteps = _ref5.isProgressWithSteps;
|
|
3161
|
+
return isProgressWithSteps ? '34px' : '0';
|
|
3162
|
+
}, devices.mobile, function (_ref6) {
|
|
3163
|
+
var isProgressWithSteps = _ref6.isProgressWithSteps;
|
|
3051
3164
|
return isProgressWithSteps ? '24px' : '0';
|
|
3052
3165
|
});
|
|
3053
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n
|
|
3054
|
-
var color =
|
|
3055
|
-
return color ? "var(--base-
|
|
3056
|
-
}, function (
|
|
3057
|
-
var progress =
|
|
3166
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n z-index: ", ";\n"])), function (_ref7) {
|
|
3167
|
+
var color = _ref7.color;
|
|
3168
|
+
return color ? "var(--color-base-" + color + ")" : 'var(--color-base-mid-grey)';
|
|
3169
|
+
}, function (_ref8) {
|
|
3170
|
+
var progress = _ref8.progress;
|
|
3058
3171
|
return progress;
|
|
3059
|
-
});
|
|
3172
|
+
}, zIndexes.contentOverlay);
|
|
3060
3173
|
var StepsWrapper = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n\n @media ", " {\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n }\n"])), devices.mobile);
|
|
3061
|
-
var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (
|
|
3062
|
-
var isVisible =
|
|
3174
|
+
var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (_ref9) {
|
|
3175
|
+
var isVisible = _ref9.isVisible;
|
|
3063
3176
|
return isVisible ? "visible" : 'hidden';
|
|
3064
|
-
}, function (
|
|
3065
|
-
var isActive =
|
|
3177
|
+
}, function (_ref10) {
|
|
3178
|
+
var isActive = _ref10.isActive;
|
|
3066
3179
|
return isActive ? "var(--base-color-black)" : 'var(--base-color-mid-grey)';
|
|
3067
3180
|
});
|
|
3068
3181
|
|
|
@@ -3072,6 +3185,8 @@ var Progress = function Progress(_ref) {
|
|
|
3072
3185
|
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
3073
3186
|
_ref$height = _ref.height,
|
|
3074
3187
|
height = _ref$height === void 0 ? 6 : _ref$height,
|
|
3188
|
+
_ref$shadow = _ref.shadow,
|
|
3189
|
+
shadow = _ref$shadow === void 0 ? true : _ref$shadow,
|
|
3075
3190
|
elapsedLineColor = _ref.elapsedLineColor,
|
|
3076
3191
|
pendingLineColor = _ref.pendingLineColor,
|
|
3077
3192
|
steps = _ref.steps;
|
|
@@ -3098,6 +3213,7 @@ var Progress = function Progress(_ref) {
|
|
|
3098
3213
|
var progressValue = getProgressValue();
|
|
3099
3214
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressView, {
|
|
3100
3215
|
height: height,
|
|
3216
|
+
shadow: shadow,
|
|
3101
3217
|
"data-testid": "progress-container"
|
|
3102
3218
|
}, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
|
|
3103
3219
|
color: elapsedLineColor,
|
|
@@ -3431,7 +3547,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3431
3547
|
onKeyDown: onPrevKeyDownHandler,
|
|
3432
3548
|
tabIndex: 0,
|
|
3433
3549
|
"data-testid": "iconprev",
|
|
3434
|
-
className: "carousel-icon-wrapper-left"
|
|
3550
|
+
className: "carousel-icon-wrapper-left",
|
|
3551
|
+
"aria-label": "Previous slide",
|
|
3552
|
+
role: "button"
|
|
3435
3553
|
}, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3436
3554
|
"data-testid": "iconprevnoavailable"
|
|
3437
3555
|
}, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
@@ -3439,7 +3557,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3439
3557
|
onKeyDown: onNextKeyDownHandler,
|
|
3440
3558
|
tabIndex: 0,
|
|
3441
3559
|
"data-testid": "iconnext",
|
|
3442
|
-
className: "carousel-icon-wrapper-right"
|
|
3560
|
+
className: "carousel-icon-wrapper-right",
|
|
3561
|
+
"aria-label": "Next slide",
|
|
3562
|
+
role: "button"
|
|
3443
3563
|
}, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3444
3564
|
"data-testid": "iconnextnoavailable"
|
|
3445
3565
|
}, renderNextIcon())));
|
|
@@ -3492,51 +3612,219 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3492
3612
|
};
|
|
3493
3613
|
|
|
3494
3614
|
var _templateObject$i;
|
|
3495
|
-
|
|
3496
|
-
// width: 100%;
|
|
3497
|
-
// max-width: 90%;
|
|
3498
|
-
// height: auto;
|
|
3499
|
-
// @media ${devices.tablet} {
|
|
3500
|
-
// max-width: 100%;
|
|
3501
|
-
// }
|
|
3502
|
-
// @media ${devices.mobile} {
|
|
3503
|
-
// max-width: 50%;
|
|
3504
|
-
// }
|
|
3505
|
-
// svg {
|
|
3506
|
-
// display: block; /* Avoids inline SVG extra spacing issues */
|
|
3507
|
-
// width: 100%;
|
|
3508
|
-
// height: auto;
|
|
3509
|
-
// max-width: 100%;
|
|
3510
|
-
// }
|
|
3511
|
-
// `;
|
|
3512
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n height: auto;\n width: 100%;\n max-width: 100%;\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3513
|
-
/*
|
|
3514
|
-
img {
|
|
3515
|
-
display: block; Avoids inline SVG extra spacing issues
|
|
3516
|
-
width: 100%;
|
|
3517
|
-
height: auto;
|
|
3518
|
-
max-width: 100%;
|
|
3519
|
-
}
|
|
3520
|
-
|
|
3521
|
-
*/
|
|
3615
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n width: 100%;\n max-width: 90%;\n height: auto;\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n\n svg {\n display: block; /* Avoids inline SVG extra spacing issues */\n width: 100%;\n height: auto;\n max-width: 100%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3522
3616
|
|
|
3617
|
+
/* eslint-disable max-len */
|
|
3523
3618
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3524
3619
|
var _ref$colorLogo = _ref.colorLogo,
|
|
3525
3620
|
colorLogo = _ref$colorLogo === void 0 ? '#fff' : _ref$colorLogo,
|
|
3526
3621
|
_ref$colorBackground = _ref.colorBackground,
|
|
3527
3622
|
colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground,
|
|
3528
3623
|
_ref$alt = _ref.alt,
|
|
3529
|
-
alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3624
|
+
alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt;
|
|
3625
|
+
return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, null, /*#__PURE__*/React__default.createElement("svg", {
|
|
3626
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3627
|
+
viewBox: "0 0 258.64 57.26",
|
|
3628
|
+
preserveAspectRatio: "xMidYMid meet" // Maintains the aspect ratio while centering
|
|
3629
|
+
,
|
|
3630
|
+
role: "img",
|
|
3535
3631
|
"aria-label": alt
|
|
3536
|
-
},
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
}
|
|
3632
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
3633
|
+
id: "Layer_2",
|
|
3634
|
+
"data-name": "Layer 2"
|
|
3635
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
3636
|
+
id: "Layer_1-2",
|
|
3637
|
+
"data-name": "Layer 1"
|
|
3638
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
3639
|
+
fill: colorLogo,
|
|
3640
|
+
d: "M48.59,20.83l0-1.16-4.8,1.72,0,1.26,4.9,1.44,0-1.1-1.09-.3-.06-1.52Zm-1.89.59,0,1.11-2-.52v0Z"
|
|
3641
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3642
|
+
fill: colorLogo,
|
|
3643
|
+
d: "M48.8,18.33l.36-1.09-1.87-.6c.13-.4.18-.55.86-.52l1.36,0L49.88,15l-1.66,0c-.61,0-.84.07-1,.39h0a1.14,1.14,0,0,0-.84-1.29c-.85-.27-1.39.26-1.64,1l-.55,1.68ZM45.31,16l.1-.33c.19-.58.6-.52.79-.46a.63.63,0,0,1,.41.84l-.11.33Z"
|
|
3644
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3645
|
+
fill: colorLogo,
|
|
3646
|
+
points: "50.82 13.54 51.47 12.61 48.22 10.32 48.82 9.46 48.1 8.96 46.23 11.62 46.95 12.13 47.56 11.26 50.82 13.54"
|
|
3647
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3648
|
+
fill: colorLogo,
|
|
3649
|
+
d: "M51.76,5.65a4.57,4.57,0,0,0-1,.61,1.43,1.43,0,0,0-.4,2.14c1.11,1.33,2.28-.25,2.89.46a.62.62,0,0,1-.18.9,2.56,2.56,0,0,1-1,.46l.56.76a4.67,4.67,0,0,0,1.14-.68,1.52,1.52,0,0,0,.35-2.22c-1.11-1.32-2.31.22-2.88-.46-.23-.27-.13-.58.16-.82a2.15,2.15,0,0,1,.89-.42Z"
|
|
3650
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3651
|
+
fill: colorLogo,
|
|
3652
|
+
d: "M60.54,2.18a2.8,2.8,0,0,0-1.3.06,2.23,2.23,0,0,0-1.56,2.91,2.28,2.28,0,0,0,2.77,2,4,4,0,0,0,1.14-.44l-.26-1a2.05,2.05,0,0,1-.91.47c-.71.17-1.39-.34-1.6-1.26s.11-1.67.85-1.84a1.85,1.85,0,0,1,1,0Z"
|
|
3653
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3654
|
+
fill: colorLogo,
|
|
3655
|
+
d: "M63.1,4.21c-.17,1.42.35,2.58,1.74,2.75S67,6.13,67.19,4.72,66.84,2.14,65.45,2s-2.17.82-2.35,2.23m1.16.15c.12-.93.44-1.65,1.09-1.57s.8.86.69,1.78-.45,1.65-1.1,1.57-.79-.86-.68-1.78"
|
|
3656
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3657
|
+
fill: colorLogo,
|
|
3658
|
+
d: "M68.82,5.91a1.65,1.65,0,0,0,.75,2.45A1.65,1.65,0,0,0,72,7.52L73.4,4.77l-1-.52L70.89,7.17c-.22.43-.51.61-.92.41s-.44-.56-.21-1l1.48-2.91-1-.52Z"
|
|
3659
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3660
|
+
fill: colorLogo,
|
|
3661
|
+
points: "72.35 9.88 73.04 10.6 75.57 8.16 75.58 8.17 74.02 11.61 74.96 12.58 78.45 9.21 77.75 8.49 75.34 10.83 75.33 10.82 76.76 7.47 75.84 6.5 72.35 9.88"
|
|
3662
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3663
|
+
fill: colorLogo,
|
|
3664
|
+
d: "M81.32,14.62A2.92,2.92,0,0,0,81,13.36a2.24,2.24,0,0,0-3.2-.87,2.28,2.28,0,0,0-1.28,3.14,4.1,4.1,0,0,0,.69,1l.89-.49a2,2,0,0,1-.66-.78,1.4,1.4,0,0,1,.86-1.84c.88-.43,1.65-.26,2,.43a1.79,1.79,0,0,1,.18,1Z"
|
|
3665
|
+
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
3666
|
+
fill: colorLogo,
|
|
3667
|
+
x: "77.47",
|
|
3668
|
+
y: "17.86",
|
|
3669
|
+
width: "4.85",
|
|
3670
|
+
height: "1.14",
|
|
3671
|
+
transform: "translate(-1.99 14.27) rotate(-10.08)"
|
|
3672
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3673
|
+
fill: colorLogo,
|
|
3674
|
+
points: "77.75 21.16 77.56 23.9 78.43 23.96 78.54 22.36 82.51 22.64 82.59 21.49 77.75 21.16"
|
|
3675
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3676
|
+
fill: colorLogo,
|
|
3677
|
+
points: "48.1 32.49 49.47 34.12 49.78 33.85 48.68 32.56 50.15 31.32 51.15 32.52 51.45 32.25 50.46 31.06 51.78 29.94 52.83 31.2 53.14 30.93 51.81 29.36 48.1 32.49"
|
|
3678
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3679
|
+
fill: colorLogo,
|
|
3680
|
+
points: "51.54 36.09 51.88 36.31 54.27 32.76 54.28 32.77 53.58 37.46 54.04 37.78 56.75 33.74 56.42 33.52 54.01 37.11 53.99 37.1 54.72 32.38 54.26 32.06 51.54 36.09"
|
|
3681
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3682
|
+
fill: colorLogo,
|
|
3683
|
+
d: "M59.06,37.34l.83.24-.47,1.64a1.43,1.43,0,0,1-.68,0,1.83,1.83,0,0,1-1.05-2.46c.43-1.47,1.47-1.73,2.13-1.53a1.89,1.89,0,0,1,.9.57l.15-.45A2.92,2.92,0,0,0,60,34.8a2.23,2.23,0,0,0-2.7,1.75,2.27,2.27,0,0,0,1.35,3,2.24,2.24,0,0,0,1.15,0l.66-2.3L59.17,37Z"
|
|
3684
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3685
|
+
fill: colorLogo,
|
|
3686
|
+
points: "62.58 40.06 64.59 40.06 64.59 39.67 63.01 39.67 63.01 35.22 62.58 35.22 62.58 40.06"
|
|
3687
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3688
|
+
fill: colorLogo,
|
|
3689
|
+
d: "M66.56,39.85l.41-.12L67,38.32l1.86-.53L69.66,39l.44-.12L67.21,34.6l-.44.13Zm.55-4.73h0l1.53,2.31L67,37.91Z"
|
|
3690
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3691
|
+
fill: colorLogo,
|
|
3692
|
+
points: "72.18 37.79 72.52 37.56 70.19 33.97 70.2 33.97 74.24 36.45 74.7 36.16 72.06 32.07 71.72 32.3 74.07 35.92 74.06 35.92 70.01 33.42 69.54 33.71 72.18 37.79"
|
|
3693
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3694
|
+
fill: colorLogo,
|
|
3695
|
+
d: "M77.11,33.88l.47-.58A2.21,2.21,0,0,0,77,30a2.07,2.07,0,0,0-3.31.42l-.4.5ZM73.88,30.8l.22-.28c1-1.3,2.07-.62,2.67-.14,1,.75,1.23,1.71.56,2.56l-.27.36Z"
|
|
3696
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3697
|
+
fill: colorLogo,
|
|
3698
|
+
d: "M110.46,21h0l-2.33,6.65h4.71Zm-1.78-3.24h3.65l6.33,16.12h-3.58l-1.39-3.69h-6.53l-1.41,3.69H102.4Z"
|
|
3699
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3700
|
+
fill: colorLogo,
|
|
3701
|
+
d: "M123.57,24.66h1.07c1.59,0,3.42-.24,3.42-2.24s-1.81-2.11-3.42-2.11h-1.07Zm-3.23-6.89h3.49c3.46,0,7.6-.11,7.6,4.37a3.69,3.69,0,0,1-3.33,3.74v0c.88.07,1.39.95,1.71,1.67l2.59,6.31h-3.61l-1.93-5c-.47-1.2-.88-1.66-2.25-1.66h-1v6.7h-3.23Z"
|
|
3702
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3703
|
+
fill: colorLogo,
|
|
3704
|
+
points: "137.59 20.31 132.97 20.31 132.97 17.77 145.45 17.77 145.45 20.31 140.82 20.31 140.82 33.9 137.59 33.9 137.59 20.31"
|
|
3705
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3706
|
+
fill: colorLogo,
|
|
3707
|
+
d: "M156.16,20.73a8.35,8.35,0,0,0-3.28-.69,2.24,2.24,0,0,0-2.54,2.24c0,2.79,7.07,1.61,7.07,7,0,3.53-2.8,4.87-6,4.87a14.29,14.29,0,0,1-4.14-.62l.3-2.91a7.79,7.79,0,0,0,3.65,1c1.22,0,2.86-.62,2.86-2.08,0-3.07-7.06-1.8-7.06-7.13,0-3.61,2.79-4.92,5.63-4.92a12.25,12.25,0,0,1,3.86.57Z"
|
|
3708
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3709
|
+
fill: colorLogo,
|
|
3710
|
+
d: "M178,33.67a16.81,16.81,0,0,1-3.67.5c-5.22,0-8.85-2.61-8.85-8.06s3.37-8.61,8.85-8.61a10.39,10.39,0,0,1,3.64.67l-.23,2.72a6.65,6.65,0,0,0-3.48-.85c-3.33,0-5.41,2.54-5.41,5.84s2,5.75,5.48,5.75a9.05,9.05,0,0,0,3.53-.67Z"
|
|
3711
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3712
|
+
fill: colorLogo,
|
|
3713
|
+
d: "M187.42,31.63c3.3,0,4.53-2.93,4.53-5.84S190.63,20,187.42,20,182.9,23,182.9,25.79s1.22,5.84,4.52,5.84m0-14.13c5.06,0,7.9,3.42,7.9,8.29s-2.79,8.38-7.9,8.38-7.89-3.44-7.89-8.38,2.77-8.29,7.89-8.29"
|
|
3714
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3715
|
+
fill: colorLogo,
|
|
3716
|
+
d: "M197.47,17.77h3.23v9.31c0,2.75.88,4.55,3.35,4.55s3.35-1.8,3.35-4.55V17.77h3.23V28.08c0,4.31-2.45,6.09-6.58,6.09s-6.58-1.78-6.58-6.09Z"
|
|
3717
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3718
|
+
fill: colorLogo,
|
|
3719
|
+
points: "213.06 17.77 217.03 17.77 223.17 29.83 223.22 29.83 223.22 17.77 226.31 17.77 226.31 33.89 222.36 33.89 216.2 21.84 216.15 21.84 216.15 33.89 213.06 33.89 213.06 17.77"
|
|
3720
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3721
|
+
fill: colorLogo,
|
|
3722
|
+
d: "M240.93,33.67a16.81,16.81,0,0,1-3.67.5c-5.22,0-8.85-2.61-8.85-8.06s3.37-8.61,8.85-8.61a10.43,10.43,0,0,1,3.64.67l-.23,2.72a6.65,6.65,0,0,0-3.48-.85c-3.33,0-5.41,2.54-5.41,5.84s2,5.75,5.48,5.75a9.05,9.05,0,0,0,3.53-.67Z"
|
|
3723
|
+
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
3724
|
+
fill: colorLogo,
|
|
3725
|
+
x: "243.37",
|
|
3726
|
+
y: "17.77",
|
|
3727
|
+
width: "3.23",
|
|
3728
|
+
height: "16.12"
|
|
3729
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3730
|
+
fill: colorLogo,
|
|
3731
|
+
points: "249.15 17.77 252.38 17.77 252.38 31.35 258.64 31.35 258.64 33.89 249.15 33.89 249.15 17.77"
|
|
3732
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3733
|
+
fill: colorLogo,
|
|
3734
|
+
points: "102.45 40.87 111.96 40.87 111.96 43.41 105.68 43.41 105.68 47.38 111.43 47.38 111.43 49.92 105.68 49.92 105.68 54.45 112.01 54.45 112.01 56.99 102.45 56.99 102.45 40.87"
|
|
3735
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3736
|
+
fill: colorLogo,
|
|
3737
|
+
points: "114.66 40.87 118.64 40.87 124.78 52.92 124.82 52.92 124.82 40.87 127.92 40.87 127.92 56.99 123.97 56.99 117.8 44.93 117.76 44.93 117.76 56.99 114.66 56.99 114.66 40.87"
|
|
3738
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3739
|
+
fill: colorLogo,
|
|
3740
|
+
d: "M143.51,44a10.56,10.56,0,0,0-4.17-.86A5.48,5.48,0,0,0,133.51,49c0,3.28,2,5.75,5.47,5.75a8.6,8.6,0,0,0,2.12-.23v-4.2h-3.42V47.75h6.51v8.68a20.3,20.3,0,0,1-5.21.83c-5.22,0-8.85-2.61-8.85-8.06s3.38-8.61,8.85-8.61a15.72,15.72,0,0,1,4.73.67Z"
|
|
3741
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3742
|
+
fill: colorLogo,
|
|
3743
|
+
points: "146.78 40.87 150.01 40.87 150.01 54.45 156.27 54.45 156.27 56.99 146.78 56.99 146.78 40.87"
|
|
3744
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3745
|
+
fill: colorLogo,
|
|
3746
|
+
d: "M165.76,44.1h0l-2.34,6.65h4.72ZM164,40.87h3.65L174,57h-3.58L169,53.29h-6.54l-1.4,3.7H157.7Z"
|
|
3747
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
3748
|
+
fill: colorLogo,
|
|
3749
|
+
points: "175.53 40.87 179.5 40.87 185.65 52.92 185.69 52.92 185.69 40.87 188.79 40.87 188.79 56.99 184.84 56.99 178.67 44.93 178.62 44.93 178.62 56.99 175.53 56.99 175.53 40.87"
|
|
3750
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3751
|
+
fill: colorLogo,
|
|
3752
|
+
d: "M194.66,54.45h1.8a5.27,5.27,0,0,0,5.31-5.52,5.27,5.27,0,0,0-5.31-5.52h-1.8Zm-3.23-13.58h4.41c4.94,0,9.3,1.66,9.3,8.06S200.78,57,195.84,57h-4.41Z"
|
|
3753
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3754
|
+
fill: colorLogo,
|
|
3755
|
+
d: "M248,3.39h-.7l1.84,5.24-.13.46c-.2.67-.39,1.12-.94,1.12a1.29,1.29,0,0,1-.47-.08l-.06.55a3,3,0,0,0,.69.08c.72,0,1.08-.71,1.33-1.42l2.07-5.95h-.67L249.43,7.7h0ZM245.88,6c0,1-.31,2.16-1.53,2.16S242.81,6.92,242.81,6s.37-2.17,1.54-2.17S245.88,5,245.88,6m-3.71,2.59h.64V7.75h0a1.68,1.68,0,0,0,1.62.94c1.42,0,2.13-1.18,2.13-2.71s-.61-2.71-2.13-2.71a1.75,1.75,0,0,0-1.62,1h0V1h-.64Zm-3.46-5.18h-.64V4h0a1.7,1.7,0,0,0-1.61-.71c-1.53,0-2.14,1.13-2.14,2.71,0,1.15.53,2.59,2.19,2.59a1.6,1.6,0,0,0,1.57-1h0c0,1.46-.14,2.66-1.79,2.66a3.55,3.55,0,0,1-1.52-.36l-.05.64a5.45,5.45,0,0,0,1.56.27c1.78,0,2.43-1.18,2.43-2.62ZM235,6c0-1,.32-2.17,1.54-2.17s1.53.92,1.53,2.17c0,.94-.41,2-1.57,2S235,7,235,6m-6.17,2.59h.64V5.7c0-.86.37-1.89,1.54-1.89.88,0,1.23.63,1.23,1.61V8.57h.63V5.26c0-1.14-.48-2-1.76-2a1.64,1.64,0,0,0-1.68,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.71-7.42h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64ZM221.1,6c0-1,.31-2.17,1.53-2.17S224.17,5,224.17,6s-.4,2.16-1.54,2.16S221.1,7,221.1,6m3.7-5h-.63V4.26h0a1.76,1.76,0,0,0-1.62-1C221,3.27,220.4,4.4,220.4,6s.71,2.71,2.13,2.71a1.68,1.68,0,0,0,1.62-.94h0v.82h.63Zm-9.89,7.62h.64V5.7c0-.86.37-1.89,1.54-1.89.88,0,1.22.63,1.22,1.61V8.57H219V5.26c0-1.14-.48-2-1.76-2a1.64,1.64,0,0,0-1.68,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.72-5.18h-.64V6.25c0,.87-.36,1.89-1.53,1.89-.89,0-1.23-.63-1.23-1.6V3.39h-.64V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.67-1h0v.93h.62c0-.42,0-.83,0-1.22Zm-7.08,5.18h.64V3.93h1.17V3.39h-1.17V2.94c0-.62-.09-1.57.78-1.57a1.13,1.13,0,0,1,.51.12l0-.56a1.47,1.47,0,0,0-.6-.1c-1.33,0-1.37,1.09-1.37,2.18v.38h-1v.54h1Zm-3.5-5.1a3.91,3.91,0,0,0-1.25-.2A2.51,2.51,0,0,0,198.8,6a2.45,2.45,0,0,0,2.48,2.71,3.89,3.89,0,0,0,1.33-.18l-.06-.6a3.38,3.38,0,0,1-1.17.23A2,2,0,0,1,199.5,6a1.93,1.93,0,0,1,1.95-2.17,2.78,2.78,0,0,1,1.11.27Zm-5.2-2.32h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64Zm-2.35,0h.64V1h-.64ZM192.26,6c0,1-.31,2.16-1.53,2.16S189.19,6.92,189.19,6s.37-2.17,1.54-2.17S192.26,5,192.26,6m-3.71,2.59h.64V7.75h0a1.68,1.68,0,0,0,1.62.94C192.25,8.69,193,7.51,193,6s-.61-2.71-2.13-2.71a1.75,1.75,0,0,0-1.62,1h0V1h-.64Zm-1.68-5.18h-.64V6.25c0,.87-.36,1.89-1.53,1.89-.89,0-1.23-.63-1.23-1.6V3.39h-.64V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.67-1h0v.93h.62c0-.42,0-.83,0-1.22ZM180.69,6c0,1-.32,2.16-1.54,2.16S177.62,6.92,177.62,6s.39-2.17,1.53-2.17S180.69,5,180.69,6M177,10.7h.64v-3h0a1.6,1.6,0,0,0,1.61,1c1.43,0,2.13-1.18,2.13-2.71s-.6-2.71-2.13-2.71a1.78,1.78,0,0,0-1.65,1.06h0l0-.94H177Zm-3.46-7.31h-.64V4h0a1.72,1.72,0,0,0-1.62-.71c-1.52,0-2.13,1.13-2.13,2.71,0,1.15.53,2.59,2.18,2.59a1.62,1.62,0,0,0,1.58-1h0c0,1.46-.14,2.66-1.79,2.66a3.59,3.59,0,0,1-1.53-.36l0,.64a5.54,5.54,0,0,0,1.57.27c1.78,0,2.43-1.18,2.43-2.62ZM169.81,6c0-1,.31-2.17,1.53-2.17s1.54.92,1.54,2.17c0,.94-.42,2-1.58,2s-1.49-1-1.49-2m-6.17,2.59h.64V5.7c0-.86.36-1.89,1.53-1.89.89,0,1.23.63,1.23,1.61V8.57h.64V5.26c0-1.14-.49-2-1.77-2a1.62,1.62,0,0,0-1.67,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.71-7.42h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64Zm-4.53-.12a3.91,3.91,0,0,0,1.45.24c.78,0,1.81-.38,1.81-1.47,0-1.7-2.55-1.58-2.55-2.54,0-.66.45-.87,1.11-.87a2.87,2.87,0,0,1,1.15.25l.06-.56a4.08,4.08,0,0,0-1.28-.23c-.85,0-1.68.38-1.68,1.41,0,1.5,2.49,1.31,2.49,2.54,0,.59-.54.92-1.15.92a3.05,3.05,0,0,1-1.35-.32ZM155.5,3.39h-.64V6.25c0,.87-.37,1.89-1.54,1.89-.88,0-1.23-.63-1.23-1.6V3.39h-.63V6.7c0,1.14.48,2,1.76,2a1.65,1.65,0,0,0,1.68-1h0v.93h.62c0-.42,0-.83,0-1.22ZM144.23,6c0-1,.31-2.17,1.53-2.17S147.29,5,147.29,6s-.39,2.16-1.53,2.16S144.23,7,144.23,6m3.7-5h-.64V4.26h0a1.75,1.75,0,0,0-1.61-1c-1.53,0-2.13,1.13-2.13,2.71s.71,2.71,2.13,2.71a1.66,1.66,0,0,0,1.61-.94h0v.82h.64Zm-9.06,4.66a1.7,1.7,0,0,1,1.52-1.8c1,0,1.32.9,1.32,1.8ZM142,7.75a3.27,3.27,0,0,1-1.45.39,1.75,1.75,0,0,1-1.71-2h3.54V5.83c0-1.39-.6-2.56-2.06-2.56-1.31,0-2.18,1.12-2.18,2.71s.64,2.71,2.35,2.71A4.14,4.14,0,0,0,142,8.4Zm-4.71-4.36h-1.18V1.91l-.64.23V3.39h-1v.54h1V7c0,1,.05,1.73,1.18,1.73a2.32,2.32,0,0,0,.78-.14l0-.53a1.47,1.47,0,0,1-.59.12c-.51,0-.69-.39-.69-.85V3.93h1.18Zm-6,5.18h.64V6c0-.94.28-2.08,1.29-2.08a1.41,1.41,0,0,1,.47.07V3.33a2,2,0,0,0-.45-.06,1.52,1.52,0,0,0-1.33,1.11h0v-1h-.64a9.26,9.26,0,0,1,0,1.15ZM125.76,6c0-1.2.6-2.17,1.71-2.17s1.72,1,1.72,2.17-.6,2.16-1.72,2.16-1.71-1-1.71-2.16m-.7,0a2.43,2.43,0,1,0,4.83,0,2.43,2.43,0,1,0-4.83,0m-1.83,0c0,1-.32,2.16-1.54,2.16S120.16,6.92,120.16,6s.4-2.17,1.53-2.17S123.23,5,123.23,6m-3.71,4.72h.64v-3h0a1.61,1.61,0,0,0,1.62,1c1.42,0,2.13-1.18,2.13-2.71s-.61-2.71-2.13-2.71a1.79,1.79,0,0,0-1.66,1.06h0l0-.94h-.64ZM117.4,6c0,1-.32,2.16-1.54,2.16S114.33,6.92,114.33,6s.39-2.17,1.53-2.17S117.4,5,117.4,6m-3.71,4.72h.64v-3h0a1.6,1.6,0,0,0,1.61,1c1.43,0,2.14-1.18,2.14-2.71s-.61-2.71-2.14-2.71a1.79,1.79,0,0,0-1.65,1.06h0l0-.94h-.64ZM112,3.39h-.64V6.25c0,.87-.37,1.89-1.54,1.89-.88,0-1.23-.63-1.23-1.6V3.39H108V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.68-1h0v.93h.62c0-.42,0-.83,0-1.22Zm-9.4,5a3.92,3.92,0,0,0,1.61.31,2.08,2.08,0,0,0,2.32-2c0-2.07-3.25-2.09-3.25-3.51,0-.91.8-1.22,1.54-1.22a2.89,2.89,0,0,1,1.28.27l.12-.64a4.31,4.31,0,0,0-1.39-.23c-1.25,0-2.25.71-2.25,1.84,0,1.86,3.25,2,3.25,3.43a1.41,1.41,0,0,1-1.59,1.45,2.77,2.77,0,0,1-1.57-.42Z"
|
|
3756
|
+
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
3757
|
+
fill: colorLogo,
|
|
3758
|
+
x: "92.12",
|
|
3759
|
+
width: "0.75",
|
|
3760
|
+
height: "56.99"
|
|
3761
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3762
|
+
fill: colorLogo,
|
|
3763
|
+
d: "M2.46,50.42H4.22v5.07H7.29V57H2.46Z"
|
|
3764
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3765
|
+
fill: colorLogo,
|
|
3766
|
+
d: "M10.84,57.2a3.59,3.59,0,0,1-1.37-.26,3.27,3.27,0,0,1-1.82-1.83,4,4,0,0,1,0-2.79,3.5,3.5,0,0,1,.72-1.1,3.28,3.28,0,0,1,1.1-.72,3.59,3.59,0,0,1,1.37-.26,3.65,3.65,0,0,1,1.38.26,3.14,3.14,0,0,1,1.09.72,3.33,3.33,0,0,1,.72,1.1,4,4,0,0,1,0,2.79,3.3,3.3,0,0,1-1.81,1.83A3.65,3.65,0,0,1,10.84,57.2Zm0-1.65a1.67,1.67,0,0,0,.69-.14A1.65,1.65,0,0,0,12,55a1.68,1.68,0,0,0,.32-.59,2.35,2.35,0,0,0,.11-.71,2.41,2.41,0,0,0-.11-.72,1.64,1.64,0,0,0-.32-.58,1.54,1.54,0,0,0-.51-.4,1.77,1.77,0,0,0-1.38,0,1.54,1.54,0,0,0-.51.4,1.64,1.64,0,0,0-.32.58,2.41,2.41,0,0,0-.11.72,2.35,2.35,0,0,0,.11.71,1.68,1.68,0,0,0,.32.59,1.65,1.65,0,0,0,.51.39A1.67,1.67,0,0,0,10.84,55.55Z"
|
|
3767
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3768
|
+
fill: colorLogo,
|
|
3769
|
+
d: "M16.43,52h-2V50.42h5.83V52h-2V57H16.43Z"
|
|
3770
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3771
|
+
fill: colorLogo,
|
|
3772
|
+
d: "M22.49,52h-2V50.42h5.83V52h-2V57H22.49Z"
|
|
3773
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3774
|
+
fill: colorLogo,
|
|
3775
|
+
d: "M26.7,50.42h4.77v1.52h-3v1h2.47v1.43H28.46v1.13h3.22V57h-5Z"
|
|
3776
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3777
|
+
fill: colorLogo,
|
|
3778
|
+
d: "M32.4,50.42h2.74a3.24,3.24,0,0,1,1,.14,2.05,2.05,0,0,1,.74.41,2,2,0,0,1,.48.68,2.5,2.5,0,0,1,.16.94,2.19,2.19,0,0,1-.28,1.14,2.27,2.27,0,0,1-.77.77L37.86,57H36l-1.13-2.25h-.73V57H32.4Zm2.57,3a.75.75,0,0,0,.79-.79.8.8,0,0,0-.21-.59.77.77,0,0,0-.59-.22h-.84v1.6Z"
|
|
3779
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3780
|
+
fill: colorLogo,
|
|
3781
|
+
d: "M39.81,54.4l-2.35-4h2l1.29,2.36L42,50.42h2l-2.36,4V57H39.81Z"
|
|
3782
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3783
|
+
fill: colorLogo,
|
|
3784
|
+
d: "M45.71,50.42h4.62V52H47.47v1.28h2.21v1.45H47.47V57H45.71Z"
|
|
3785
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3786
|
+
fill: colorLogo,
|
|
3787
|
+
d: "M50.76,50.42h1.76V54.3a1.46,1.46,0,0,0,.25.89,1.17,1.17,0,0,0,1.67,0,1.48,1.48,0,0,0,.25-.89V50.42h1.78v4a3,3,0,0,1-.21,1.15,2.4,2.4,0,0,1-.59.86,2.66,2.66,0,0,1-.9.55,3.58,3.58,0,0,1-2.3,0,2.85,2.85,0,0,1-.91-.54,2.49,2.49,0,0,1-.59-.86,3,3,0,0,1-.21-1.16Z"
|
|
3788
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3789
|
+
fill: colorLogo,
|
|
3790
|
+
d: "M57.42,50.42H59l2.54,3.69V50.42h1.74V57h-1.5l-2.64-3.8V57H57.42Z"
|
|
3791
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3792
|
+
fill: colorLogo,
|
|
3793
|
+
d: "M64.28,50.42h2.54a4.85,4.85,0,0,1,1.41.2,3.06,3.06,0,0,1,1.13.6,2.67,2.67,0,0,1,.74,1.05,3.78,3.78,0,0,1,.27,1.49,3.56,3.56,0,0,1-.27,1.44,2.77,2.77,0,0,1-.75,1,3.18,3.18,0,0,1-1.13.62,5,5,0,0,1-1.41.2H64.28Zm2.47,5.07a1.67,1.67,0,0,0,1.81-1.76,2.27,2.27,0,0,0-.11-.72,1.59,1.59,0,0,0-.34-.56,1.29,1.29,0,0,0-.56-.36,2.13,2.13,0,0,0-.8-.13H66v3.53Z"
|
|
3794
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3795
|
+
fill: colorLogo,
|
|
3796
|
+
d: "M71.05,50.42h4.76v1.52h-3v1h2.47v1.43H72.8v1.13H76V57h-5Z"
|
|
3797
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3798
|
+
fill: colorLogo,
|
|
3799
|
+
d: "M76.75,50.42h2.54a4.85,4.85,0,0,1,1.41.2,3.15,3.15,0,0,1,1.13.6,2.89,2.89,0,0,1,.74,1.05,3.78,3.78,0,0,1,.27,1.49,3.56,3.56,0,0,1-.27,1.44,3,3,0,0,1-.75,1,3.18,3.18,0,0,1-1.13.62,5,5,0,0,1-1.41.2H76.75Zm2.47,5.07A1.66,1.66,0,0,0,81,53.73a2,2,0,0,0-.11-.72,1.44,1.44,0,0,0-.33-.56,1.36,1.36,0,0,0-.56-.36,2.13,2.13,0,0,0-.8-.13H78.5v3.53Z"
|
|
3800
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3801
|
+
fill: colorBackground,
|
|
3802
|
+
d: "M28.47,18.89a2.62,2.62,0,0,0-1.56.63c.16-1.82-.51-3.17-1.76-3.63a3.22,3.22,0,0,0-2.33.1l-1-2.44c.93-2.28,2.56-5.06,2.56-7.34,0-1.77-.89-3.07-2.6-3.07a4.45,4.45,0,0,0-3.05,1.95C17.53,2.45,16.28,1.2,14.94,1.2c-2.13,0-3,2.13-3,4a18.84,18.84,0,0,0,2,7.52,63.85,63.85,0,0,0-2.9,7.57,8.59,8.59,0,0,0-6.12-2.7,6.3,6.3,0,0,0-3.53,1A2.93,2.93,0,0,0,0,20.87a2.64,2.64,0,0,0,2.23,2.54C4.56,24,5.6,25.9,6.48,29.58c1.61,6.64,5.76,10.63,12.14,10.63A12.26,12.26,0,0,0,30.86,28a14.77,14.77,0,0,0-.26-2.64,10.78,10.78,0,0,0,.46-1.56c.57-2.85-.52-4.88-2.59-4.88"
|
|
3803
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3804
|
+
fill: colorLogo,
|
|
3805
|
+
d: "M24.62,17.33c1.08.5,1.17,2.76.08,5.45-.88,2.6-2.15,4.18-3.34,4.19-.93,0-1.71-.66-1.71-2.42,0-3.32,2.73-8.25,5-7.22"
|
|
3806
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3807
|
+
fill: colorLogo,
|
|
3808
|
+
d: "M13.43,5.15c0-1.09.47-2.39,1.51-2.39q1.08,0,2.64,3.42a27.54,27.54,0,0,0-2.75,4.52,17.18,17.18,0,0,1-1.4-5.55"
|
|
3809
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3810
|
+
fill: colorLogo,
|
|
3811
|
+
d: "M18.62,38.66c-5.45,0-9.18-3.79-10.63-9.44-1-3.89-2.23-6.49-5.4-7.32-.36-.1-1-.36-1-1S2.75,19.1,4.93,19.1a7.68,7.68,0,0,1,6.17,3.69l1.11-.41c.16-2.12,1.24-5,3.14-9.09,2.39-5.13,4.81-8.63,6.42-8.59a1.41,1.41,0,0,1,1.12,1.51c0,2.12-1.87,5.31-3.51,8.78-.17.35-.91,2-.91,2l1.07.46c.35-.59,1.08-2,1.18-2.24l.8,1.77a11.34,11.34,0,0,0-3.21,7.58c0,2,.88,3.2,2.17,3.61a2.91,2.91,0,0,0,3.22-1,2.57,2.57,0,0,0,2.65,2.32,3.35,3.35,0,0,0,3.06-2.21A11,11,0,0,1,18.62,38.66"
|
|
3812
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3813
|
+
fill: colorLogo,
|
|
3814
|
+
d: "M29.66,23.56c-.36,2.18-1.68,4.6-3.31,4.6s-1.47-2.06-1.11-3.3c.57-2.23,2.09-4.57,3.23-4.57s1.5,1.41,1.19,3.27"
|
|
3815
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3816
|
+
fill: colorBackground,
|
|
3817
|
+
d: "M24.15,34.49c-4.61,2.62-8.91.95-10.53-3.83L15,30c1.32,3.89,5.13,5,8.65,3.13Z"
|
|
3818
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3819
|
+
fill: colorBackground,
|
|
3820
|
+
d: "M22.9,24.5a1.21,1.21,0,1,1-1.21-1.21A1.21,1.21,0,0,1,22.9,24.5"
|
|
3821
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3822
|
+
fill: colorBackground,
|
|
3823
|
+
d: "M28,26a1.09,1.09,0,1,1-1.09-1.09A1.09,1.09,0,0,1,28,26"
|
|
3824
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
3825
|
+
fill: colorBackground,
|
|
3826
|
+
d: "M25.9,6.58a1.15,1.15,0,0,1-.41-.08,1.23,1.23,0,0,1-.33-.23,1.12,1.12,0,0,1-.22-.33,1.07,1.07,0,0,1-.08-.41,1.06,1.06,0,0,1,.08-.4,1.33,1.33,0,0,1,.22-.34,1.46,1.46,0,0,1,.33-.22,1.16,1.16,0,0,1,.42-.08,1.06,1.06,0,0,1,.4.08,1.12,1.12,0,0,1,.33.22,1.11,1.11,0,0,1,.22.34,1.06,1.06,0,0,1,.08.4,1.07,1.07,0,0,1-.08.41,1,1,0,0,1-.22.33,1,1,0,0,1-.33.23A1.11,1.11,0,0,1,25.9,6.58Zm0-.2a.72.72,0,0,0,.33-.07.76.76,0,0,0,.26-.18.78.78,0,0,0,.17-.26,1,1,0,0,0,.06-.33.88.88,0,0,0-.06-.33.73.73,0,0,0-.17-.27.76.76,0,0,0-.26-.18.71.71,0,0,0-.32-.07.72.72,0,0,0-.33.07.68.68,0,0,0-.26.18.73.73,0,0,0-.17.27.88.88,0,0,0-.06.33,1,1,0,0,0,.06.33.78.78,0,0,0,.17.26.68.68,0,0,0,.26.18A.71.71,0,0,0,25.9,6.38ZM25.54,5H26a.47.47,0,0,1,.17,0,.41.41,0,0,1,.11.07.3.3,0,0,1,.07.1.52.52,0,0,1,0,.11.41.41,0,0,1-.05.19.31.31,0,0,1-.15.12l.25.44h-.22l-.24-.41h-.17v.41h-.2Zm.4.49a.17.17,0,0,0,.13,0,.17.17,0,0,0,.05-.12.13.13,0,0,0-.05-.11.2.2,0,0,0-.14,0h-.19v.32Z"
|
|
3827
|
+
})))));
|
|
3540
3828
|
};
|
|
3541
3829
|
|
|
3542
3830
|
var _templateObject$j, _templateObject2$b;
|
|
@@ -4036,7 +4324,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4036
4324
|
};
|
|
4037
4325
|
|
|
4038
4326
|
var _templateObject$p, _templateObject2$h;
|
|
4039
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--
|
|
4327
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4040
4328
|
var iconName = _ref.iconName;
|
|
4041
4329
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4042
4330
|
}, function (_ref2) {
|
|
@@ -4045,23 +4333,23 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
|
|
|
4045
4333
|
}, devices.mobile);
|
|
4046
4334
|
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4047
4335
|
|
|
4048
|
-
var _excluded$b = ["children", "iconName", "iconDirection", "
|
|
4336
|
+
var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
|
|
4049
4337
|
var TextLink = function TextLink(_ref) {
|
|
4050
4338
|
var children = _ref.children,
|
|
4051
4339
|
iconName = _ref.iconName,
|
|
4052
4340
|
iconDirection = _ref.iconDirection,
|
|
4053
|
-
|
|
4341
|
+
textColor = _ref.textColor,
|
|
4054
4342
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
4055
4343
|
var truncatedString = children.substring(0, 30);
|
|
4056
4344
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
4057
|
-
color:
|
|
4345
|
+
color: textColor,
|
|
4058
4346
|
iconName: iconName
|
|
4059
4347
|
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
4060
4348
|
"data-testid": "text-link-icon"
|
|
4061
4349
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4062
4350
|
iconName: iconName,
|
|
4063
4351
|
direction: iconDirection,
|
|
4064
|
-
color:
|
|
4352
|
+
color: textColor
|
|
4065
4353
|
}))) : null);
|
|
4066
4354
|
};
|
|
4067
4355
|
|
|
@@ -4307,18 +4595,21 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4307
4595
|
var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
|
|
4308
4596
|
|
|
4309
4597
|
var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4310
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4598
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-", ");\n\n .color-primary {\n color: var(--color-base-", ");\n }\n"])), function (_ref) {
|
|
4311
4599
|
var color = _ref.color;
|
|
4312
4600
|
return color;
|
|
4313
|
-
})
|
|
4314
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4601
|
+
}, function (_ref2) {
|
|
4315
4602
|
var color = _ref2.color;
|
|
4316
4603
|
return color;
|
|
4604
|
+
});
|
|
4605
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref3) {
|
|
4606
|
+
var color = _ref3.color;
|
|
4607
|
+
return color;
|
|
4317
4608
|
}, devices.mobileAndTablet);
|
|
4318
4609
|
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4319
|
-
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4320
|
-
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4321
|
-
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n
|
|
4610
|
+
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4611
|
+
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4612
|
+
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
4322
4613
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4323
4614
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4324
4615
|
|
|
@@ -4351,9 +4642,17 @@ var Timer = function Timer(_ref) {
|
|
|
4351
4642
|
}
|
|
4352
4643
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4353
4644
|
className: "harmonic-timer-value"
|
|
4354
|
-
},
|
|
4645
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4646
|
+
hierarchy: "h3",
|
|
4647
|
+
size: "medium"
|
|
4648
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4355
4649
|
className: "harmonic-timer-label"
|
|
4356
|
-
},
|
|
4650
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4651
|
+
size: "large"
|
|
4652
|
+
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4653
|
+
hierarchy: "h3",
|
|
4654
|
+
size: "medium"
|
|
4655
|
+
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4357
4656
|
};
|
|
4358
4657
|
React__default.useEffect(function () {
|
|
4359
4658
|
if (isEndDateReached) return undefined;
|
|
@@ -4393,8 +4692,8 @@ var Timer = function Timer(_ref) {
|
|
|
4393
4692
|
color: color
|
|
4394
4693
|
}, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
|
|
4395
4694
|
className: "harmonic-timer-title-wrapper"
|
|
4396
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4397
|
-
|
|
4695
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
4696
|
+
size: "large"
|
|
4398
4697
|
}, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
|
|
4399
4698
|
className: "harmonic-timer-values-wrapper"
|
|
4400
4699
|
}, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
|
|
@@ -4410,11 +4709,11 @@ var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateOb
|
|
|
4410
4709
|
var TypeTags = function TypeTags(_ref) {
|
|
4411
4710
|
var list = _ref.list;
|
|
4412
4711
|
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
4413
|
-
return /*#__PURE__*/React__default.createElement(
|
|
4414
|
-
level: 1,
|
|
4415
|
-
tag: "li",
|
|
4712
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
4416
4713
|
key: t
|
|
4417
|
-
},
|
|
4714
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4715
|
+
size: "large"
|
|
4716
|
+
}, t));
|
|
4418
4717
|
}));
|
|
4419
4718
|
};
|
|
4420
4719
|
|
|
@@ -4824,8 +5123,82 @@ var _templateObject$w, _templateObject2$n;
|
|
|
4824
5123
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
4825
5124
|
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
4826
5125
|
|
|
5126
|
+
// WARNING: Do not use this on server side rendering, it may throw an error.
|
|
5127
|
+
var isIOS = function isIOS() {
|
|
5128
|
+
try {
|
|
5129
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
5130
|
+
if (typeof navigator === undefined) return false;
|
|
5131
|
+
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
5132
|
+
// iPad on iOS 13 detection
|
|
5133
|
+
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
5134
|
+
} catch (e) {
|
|
5135
|
+
console.warn('Error checking if device is iOS.', e);
|
|
5136
|
+
return false;
|
|
5137
|
+
}
|
|
5138
|
+
};
|
|
5139
|
+
// React hook version of isIOS (for server side rendering)
|
|
5140
|
+
var useIOS = function useIOS() {
|
|
5141
|
+
var _useState = useState(false),
|
|
5142
|
+
IOS = _useState[0],
|
|
5143
|
+
setIOS = _useState[1];
|
|
5144
|
+
useEffect(function () {
|
|
5145
|
+
if (typeof navigator === undefined) return;
|
|
5146
|
+
setIOS(isIOS());
|
|
5147
|
+
}, []);
|
|
5148
|
+
return IOS;
|
|
5149
|
+
};
|
|
5150
|
+
// Checks device size based on window width
|
|
5151
|
+
var isMobile = function isMobile() {
|
|
5152
|
+
try {
|
|
5153
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
5154
|
+
if (typeof window === undefined) return false;
|
|
5155
|
+
return window.innerWidth < breakpoints.sm;
|
|
5156
|
+
} catch (e) {
|
|
5157
|
+
console.warn('Error checking if device is mobile.', e);
|
|
5158
|
+
return false;
|
|
5159
|
+
}
|
|
5160
|
+
};
|
|
5161
|
+
// React hook version of isMobile (for server side rendering)
|
|
5162
|
+
var useMobile = function useMobile() {
|
|
5163
|
+
var _useState2 = useState(false),
|
|
5164
|
+
mobile = _useState2[0],
|
|
5165
|
+
setMobile = _useState2[1];
|
|
5166
|
+
useEffect(function () {
|
|
5167
|
+
if (typeof window === undefined) return;
|
|
5168
|
+
setMobile(isMobile());
|
|
5169
|
+
}, []);
|
|
5170
|
+
return mobile;
|
|
5171
|
+
};
|
|
5172
|
+
var useViewport = function useViewport() {
|
|
5173
|
+
var _useState3 = useState({
|
|
5174
|
+
width: window.innerWidth,
|
|
5175
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
5176
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
5177
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
5178
|
+
}),
|
|
5179
|
+
viewport = _useState3[0],
|
|
5180
|
+
setViewport = _useState3[1];
|
|
5181
|
+
useEffect(function () {
|
|
5182
|
+
var handleResize = function handleResize() {
|
|
5183
|
+
setViewport({
|
|
5184
|
+
width: window.innerWidth,
|
|
5185
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
5186
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
5187
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
5188
|
+
});
|
|
5189
|
+
};
|
|
5190
|
+
window.addEventListener('resize', handleResize);
|
|
5191
|
+
return function () {
|
|
5192
|
+
return window.removeEventListener('resize', handleResize);
|
|
5193
|
+
};
|
|
5194
|
+
}, []);
|
|
5195
|
+
return viewport;
|
|
5196
|
+
};
|
|
5197
|
+
|
|
4827
5198
|
var SocialLinks = function SocialLinks(_ref) {
|
|
4828
5199
|
var items = _ref.items;
|
|
5200
|
+
var _useViewport = useViewport(),
|
|
5201
|
+
isMobile = _useViewport.isMobile;
|
|
4829
5202
|
return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
|
|
4830
5203
|
return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
|
|
4831
5204
|
key: mediaLink.name + "-" + idx,
|
|
@@ -4834,7 +5207,8 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
4834
5207
|
"aria-label": mediaLink.name,
|
|
4835
5208
|
rel: "noopener noreferrer" // Ensures security for external links
|
|
4836
5209
|
,
|
|
4837
|
-
target: "_blank"
|
|
5210
|
+
target: "_blank",
|
|
5211
|
+
tabIndex: isMobile ? 1 : undefined
|
|
4838
5212
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4839
5213
|
iconName: mediaLink.name,
|
|
4840
5214
|
color: "white",
|
|
@@ -4848,8 +5222,8 @@ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateO
|
|
|
4848
5222
|
var isMenuOpen = _ref.isMenuOpen;
|
|
4849
5223
|
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(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
4850
5224
|
});
|
|
4851
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n
|
|
4852
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5225
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
|
|
5226
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
4853
5227
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref2) {
|
|
4854
5228
|
var visible = _ref2.visible;
|
|
4855
5229
|
return visible ? 'visible' : 'hidden';
|
|
@@ -4875,13 +5249,13 @@ var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$2 || (_temp
|
|
|
4875
5249
|
var showSearch = _ref8.showSearch;
|
|
4876
5250
|
return showSearch ? '110px' : '12px';
|
|
4877
5251
|
});
|
|
4878
|
-
var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4879
|
-
var LogoContainerMobile = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n
|
|
4880
|
-
var MenuContainer = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n width: 100%;\n\n @media ", " {\n flex-direction: row;\n justify-content: space-between;\n height: 60px;\n width 100%;\n }\n"])), devices.mobileAndTablet);
|
|
4881
|
-
var NavWrapper = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n
|
|
4882
|
-
var NavContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
5252
|
+
var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &&& .logoImg {\n height: 96px;\n width: 80px;\n }\n\n span > svg path,\n span > svg g path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5253
|
+
var LogoContainerMobile = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n }\n"])), devices.mobileAndTablet);
|
|
5254
|
+
var MenuContainer = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n\n @media ", " {\n flex-direction: row;\n justify-content: space-between;\n height: 60px;\n width 100%;\n }\n"])), devices.mobileAndTablet);
|
|
5255
|
+
var NavWrapper = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 32px;\n\n @media ", " {\n flex-direction: row;\n height: 60px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
5256
|
+
var NavContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-gap: 32px;\n width: fit-content;\n\n @media ", " {\n flex-gap: 0;\n height: auto;\n width: fit-content;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobileAndTablet);
|
|
4883
5257
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4884
|
-
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n
|
|
5258
|
+
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
4885
5259
|
var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
4886
5260
|
|
|
4887
5261
|
var _templateObject$y;
|
|
@@ -4903,7 +5277,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObj
|
|
|
4903
5277
|
});
|
|
4904
5278
|
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
4905
5279
|
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
4906
|
-
var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
5280
|
+
var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
4907
5281
|
var BasketNum = /*#__PURE__*/styled.span(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
|
|
4908
5282
|
var BasketText = /*#__PURE__*/styled.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
4909
5283
|
|
|
@@ -5448,89 +5822,17 @@ var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObj
|
|
|
5448
5822
|
var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5449
5823
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5450
5824
|
|
|
5451
|
-
|
|
5452
|
-
var
|
|
5453
|
-
|
|
5454
|
-
|
|
5455
|
-
if (typeof navigator === undefined) return false;
|
|
5456
|
-
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
5457
|
-
// iPad on iOS 13 detection
|
|
5458
|
-
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
5459
|
-
} catch (e) {
|
|
5460
|
-
console.warn('Error checking if device is iOS.', e);
|
|
5461
|
-
return false;
|
|
5462
|
-
}
|
|
5463
|
-
};
|
|
5464
|
-
// React hook version of isIOS (for server side rendering)
|
|
5465
|
-
var useIOS = function useIOS() {
|
|
5825
|
+
var SearchBar = function SearchBar(_ref) {
|
|
5826
|
+
var onClick = _ref.onClick,
|
|
5827
|
+
onClose = _ref.onClose,
|
|
5828
|
+
className = _ref.className;
|
|
5466
5829
|
var _useState = useState(false),
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5470
|
-
|
|
5471
|
-
|
|
5472
|
-
|
|
5473
|
-
return IOS;
|
|
5474
|
-
};
|
|
5475
|
-
// Checks device size based on window width
|
|
5476
|
-
var isMobile = function isMobile() {
|
|
5477
|
-
try {
|
|
5478
|
-
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
5479
|
-
if (typeof window === undefined) return false;
|
|
5480
|
-
return window.innerWidth < breakpoints.sm;
|
|
5481
|
-
} catch (e) {
|
|
5482
|
-
console.warn('Error checking if device is mobile.', e);
|
|
5483
|
-
return false;
|
|
5484
|
-
}
|
|
5485
|
-
};
|
|
5486
|
-
// React hook version of isMobile (for server side rendering)
|
|
5487
|
-
var useMobile = function useMobile() {
|
|
5488
|
-
var _useState2 = useState(false),
|
|
5489
|
-
mobile = _useState2[0],
|
|
5490
|
-
setMobile = _useState2[1];
|
|
5491
|
-
useEffect(function () {
|
|
5492
|
-
if (typeof window === undefined) return;
|
|
5493
|
-
setMobile(isMobile());
|
|
5494
|
-
}, []);
|
|
5495
|
-
return mobile;
|
|
5496
|
-
};
|
|
5497
|
-
var useViewport = function useViewport() {
|
|
5498
|
-
var _useState3 = useState({
|
|
5499
|
-
width: window.innerWidth,
|
|
5500
|
-
isMobile: window.innerWidth < breakpoints.sm,
|
|
5501
|
-
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
5502
|
-
isDesktop: window.innerWidth >= breakpoints.md
|
|
5503
|
-
}),
|
|
5504
|
-
viewport = _useState3[0],
|
|
5505
|
-
setViewport = _useState3[1];
|
|
5506
|
-
useEffect(function () {
|
|
5507
|
-
var handleResize = function handleResize() {
|
|
5508
|
-
setViewport({
|
|
5509
|
-
width: window.innerWidth,
|
|
5510
|
-
isMobile: window.innerWidth < breakpoints.sm,
|
|
5511
|
-
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
5512
|
-
isDesktop: window.innerWidth >= breakpoints.md
|
|
5513
|
-
});
|
|
5514
|
-
};
|
|
5515
|
-
window.addEventListener('resize', handleResize);
|
|
5516
|
-
return function () {
|
|
5517
|
-
return window.removeEventListener('resize', handleResize);
|
|
5518
|
-
};
|
|
5519
|
-
}, []);
|
|
5520
|
-
return viewport;
|
|
5521
|
-
};
|
|
5522
|
-
|
|
5523
|
-
var SearchBar = function SearchBar(_ref) {
|
|
5524
|
-
var onClick = _ref.onClick,
|
|
5525
|
-
onClose = _ref.onClose,
|
|
5526
|
-
className = _ref.className;
|
|
5527
|
-
var _useState = useState(false),
|
|
5528
|
-
showSearchLink = _useState[0],
|
|
5529
|
-
setShowSearchLink = _useState[1];
|
|
5530
|
-
var _useState2 = useState(''),
|
|
5531
|
-
searchValue = _useState2[0],
|
|
5532
|
-
setSearchValue = _useState2[1];
|
|
5533
|
-
var inputRef = useRef(null);
|
|
5830
|
+
showSearchLink = _useState[0],
|
|
5831
|
+
setShowSearchLink = _useState[1];
|
|
5832
|
+
var _useState2 = useState(''),
|
|
5833
|
+
searchValue = _useState2[0],
|
|
5834
|
+
setSearchValue = _useState2[1];
|
|
5835
|
+
var inputRef = useRef(null);
|
|
5534
5836
|
useEffect(function () {
|
|
5535
5837
|
var _inputRef$current;
|
|
5536
5838
|
inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
|
|
@@ -5627,7 +5929,8 @@ var Navigation = function Navigation(_ref) {
|
|
|
5627
5929
|
menuData = _ref.menuData,
|
|
5628
5930
|
onSearch = _ref.onSearch,
|
|
5629
5931
|
onLink = _ref.onLink,
|
|
5630
|
-
crest = _ref.crest,
|
|
5932
|
+
_ref$crest = _ref.crest,
|
|
5933
|
+
crest = _ref$crest === void 0 ? true : _ref$crest,
|
|
5631
5934
|
className = _ref.className;
|
|
5632
5935
|
var _useState = useState(dataNavTop),
|
|
5633
5936
|
navTopData = _useState[0],
|
|
@@ -5759,7 +6062,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
5759
6062
|
})))))));
|
|
5760
6063
|
};
|
|
5761
6064
|
|
|
5762
|
-
var _templateObject$D, _templateObject2$t, _templateObject3$i, _templateObject4$e, _templateObject5$b, _templateObject6$8, _templateObject7$4
|
|
6065
|
+
var _templateObject$D, _templateObject2$t, _templateObject3$i, _templateObject4$e, _templateObject5$b, _templateObject6$8, _templateObject7$4;
|
|
5763
6066
|
var FooterSection = /*#__PURE__*/styled.footer(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 50px;\n\n @media ", " {\n padding: 40px 32px;\n }\n\n @media ", " {\n padding: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5764
6067
|
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 40px;\n max-width: 1140px;\n margin: 0 auto;\n\n @media ", " {\n gap: 24px;\n }\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5765
6068
|
var PolicyLinksSection = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n order: 2;\n }\n"])), devices.tablet, devices.mobile);
|
|
@@ -5767,20 +6070,22 @@ var SocialAndNewsletterSection = /*#__PURE__*/styled.div(_templateObject4$e || (
|
|
|
5767
6070
|
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
5768
6071
|
var LogoAndDescriptionSection = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n img {\n width: 120px;\n margin-bottom: 12px;\n }\n\n @media ", " {\n order: 3;\n gap: 24px;\n }\n"])), devices.mobile);
|
|
5769
6072
|
var TextLinkWrapper$2 = /*#__PURE__*/styled(TextLink)(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: 6px;\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
5770
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n height: auto;\n width: 100%;\n max-width: 100%;\n\n img {\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
5771
6073
|
|
|
5772
6074
|
var _templateObject$E;
|
|
5773
6075
|
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: 6px;\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
5774
6076
|
|
|
5775
6077
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
5776
6078
|
var items = _ref.items;
|
|
6079
|
+
var _useViewport = useViewport(),
|
|
6080
|
+
isMobile = _useViewport.isMobile;
|
|
5777
6081
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
|
|
5778
6082
|
return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
|
|
5779
6083
|
key: link.href + "-" + idx,
|
|
5780
6084
|
target: link.href,
|
|
5781
6085
|
href: link.href,
|
|
5782
6086
|
"data-roh": link.dataRoh,
|
|
5783
|
-
"aria-label": link.title
|
|
6087
|
+
"aria-label": link.title,
|
|
6088
|
+
tabIndex: isMobile ? 4 : undefined
|
|
5784
6089
|
}, link.title);
|
|
5785
6090
|
}));
|
|
5786
6091
|
};
|
|
@@ -5799,9 +6104,10 @@ var Footer = function Footer(_ref) {
|
|
|
5799
6104
|
additionalInfo = data.additionalInfo;
|
|
5800
6105
|
var _useViewport = useViewport(),
|
|
5801
6106
|
isMobile = _useViewport.isMobile;
|
|
5802
|
-
var sponsorImageSource = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
5803
6107
|
return /*#__PURE__*/React__default.createElement(FooterSection, {
|
|
5804
|
-
className: className
|
|
6108
|
+
className: className,
|
|
6109
|
+
"aria-label": "Footer",
|
|
6110
|
+
role: "contentinfo"
|
|
5805
6111
|
}, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
|
|
5806
6112
|
"data-testid": "policy-links"
|
|
5807
6113
|
}, /*#__PURE__*/React__default.createElement(PolicyLinks, {
|
|
@@ -5812,14 +6118,16 @@ var Footer = function Footer(_ref) {
|
|
|
5812
6118
|
items: rawSocialMediaLinks
|
|
5813
6119
|
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
|
|
5814
6120
|
href: contact.href,
|
|
5815
|
-
"aria-label": contact.title
|
|
6121
|
+
"aria-label": contact.title,
|
|
6122
|
+
tabIndex: isMobile ? 2 : undefined
|
|
5816
6123
|
}, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
5817
6124
|
size: "large",
|
|
5818
6125
|
color: "white"
|
|
5819
6126
|
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
|
|
5820
6127
|
href: newsletter.link.href,
|
|
5821
6128
|
"data-roh": newsletter.link.dataRoh,
|
|
5822
|
-
"aria-label": newsletter.link.title
|
|
6129
|
+
"aria-label": newsletter.link.title,
|
|
6130
|
+
tabIndex: isMobile ? 3 : undefined
|
|
5823
6131
|
}, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
|
|
5824
6132
|
"data-testid": "arts-logo"
|
|
5825
6133
|
}, /*#__PURE__*/React__default.createElement("a", Object.assign({
|
|
@@ -5828,9 +6136,7 @@ var Footer = function Footer(_ref) {
|
|
|
5828
6136
|
rel: "noopener noreferrer"
|
|
5829
6137
|
}, artsLogo, {
|
|
5830
6138
|
"aria-label": "Sponsor Logo link"
|
|
5831
|
-
}), /*#__PURE__*/React__default.createElement(
|
|
5832
|
-
imageSource: sponsorImageSource
|
|
5833
|
-
})))), /*#__PURE__*/React__default.createElement("div", {
|
|
6139
|
+
}), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
5834
6140
|
"data-testid": "additional-info"
|
|
5835
6141
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
5836
6142
|
size: isMobile ? 'medium' : 'small',
|
|
@@ -6082,7 +6388,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6082
6388
|
}))) : null)) : null))));
|
|
6083
6389
|
};
|
|
6084
6390
|
|
|
6085
|
-
var _templateObject$G, _templateObject2$v, _templateObject3$k, _templateObject4$g, _templateObject6$a, _templateObject7$5, _templateObject8$
|
|
6391
|
+
var _templateObject$G, _templateObject2$v, _templateObject3$k, _templateObject4$g, _templateObject6$a, _templateObject7$5, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
6086
6392
|
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6087
6393
|
var sticky = _ref.sticky;
|
|
6088
6394
|
return sticky ? 'sticky' : 'initial';
|
|
@@ -6095,7 +6401,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$k || (_templateO
|
|
|
6095
6401
|
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6096
6402
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6097
6403
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6098
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
6404
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
|
|
6099
6405
|
var theme = _ref3.theme;
|
|
6100
6406
|
return theme.colors.primaryButtonReverseBg;
|
|
6101
6407
|
}, function (_ref4) {
|
|
@@ -6112,7 +6418,7 @@ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObj
|
|
|
6112
6418
|
var MessageWrapperMobile = /*#__PURE__*/styled.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);
|
|
6113
6419
|
|
|
6114
6420
|
var _excluded$f = ["text"],
|
|
6115
|
-
_excluded2 = ["text"];
|
|
6421
|
+
_excluded2$1 = ["text"];
|
|
6116
6422
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
6117
6423
|
var title = _ref.title,
|
|
6118
6424
|
links = _ref.links,
|
|
@@ -6124,7 +6430,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6124
6430
|
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
6125
6431
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
6126
6432
|
secondaryButtonText = _ref3.text,
|
|
6127
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6433
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
6128
6434
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
6129
6435
|
sticky: sticky
|
|
6130
6436
|
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
@@ -6739,7 +7045,7 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
6739
7045
|
})));
|
|
6740
7046
|
};
|
|
6741
7047
|
|
|
6742
|
-
|
|
7048
|
+
/* eslint-disable no-shadow */
|
|
6743
7049
|
var CarouselType;
|
|
6744
7050
|
(function (CarouselType) {
|
|
6745
7051
|
CarouselType["Image"] = "image";
|
|
@@ -6755,33 +7061,7 @@ var ButtonType;
|
|
|
6755
7061
|
ButtonType["Tertiary"] = "Tertiary";
|
|
6756
7062
|
})(ButtonType || (ButtonType = {}));
|
|
6757
7063
|
|
|
6758
|
-
var
|
|
6759
|
-
(function (IInformationCtaVariant) {
|
|
6760
|
-
IInformationCtaVariant["Primary"] = "Primary";
|
|
6761
|
-
IInformationCtaVariant["Secondary"] = "Secondary";
|
|
6762
|
-
IInformationCtaVariant["Tertiary"] = "Tertiary";
|
|
6763
|
-
IInformationCtaVariant["TextLink"] = "TextLink";
|
|
6764
|
-
})(IInformationCtaVariant || (IInformationCtaVariant = {}));
|
|
6765
|
-
var IInformationCtaTheme;
|
|
6766
|
-
(function (IInformationCtaTheme) {
|
|
6767
|
-
IInformationCtaTheme["Cinema"] = "Cinema";
|
|
6768
|
-
IInformationCtaTheme["Core"] = "Core";
|
|
6769
|
-
IInformationCtaTheme["Stream"] = "Stream";
|
|
6770
|
-
})(IInformationCtaTheme || (IInformationCtaTheme = {}));
|
|
6771
|
-
var IInformationTitleVariant;
|
|
6772
|
-
(function (IInformationTitleVariant) {
|
|
6773
|
-
IInformationTitleVariant["Header"] = "Header";
|
|
6774
|
-
IInformationTitleVariant["AltHeader"] = "AltHeader";
|
|
6775
|
-
})(IInformationTitleVariant || (IInformationTitleVariant = {}));
|
|
6776
|
-
var IInformationBackgroundColour;
|
|
6777
|
-
(function (IInformationBackgroundColour) {
|
|
6778
|
-
IInformationBackgroundColour["Cinema"] = "cinema";
|
|
6779
|
-
IInformationBackgroundColour["Core"] = "core";
|
|
6780
|
-
IInformationBackgroundColour["Stream"] = "stream";
|
|
6781
|
-
IInformationBackgroundColour["White"] = "white";
|
|
6782
|
-
})(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
|
|
6783
|
-
|
|
6784
|
-
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
7064
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
6785
7065
|
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-light-grey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
6786
7066
|
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
6787
7067
|
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
@@ -6792,7 +7072,7 @@ var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$h || (_templateOb
|
|
|
6792
7072
|
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6793
7073
|
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6794
7074
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6795
|
-
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$
|
|
7075
|
+
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-dark-grey);\n"])));
|
|
6796
7076
|
|
|
6797
7077
|
// Set max. character length
|
|
6798
7078
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -7069,19 +7349,711 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
7069
7349
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
7070
7350
|
};
|
|
7071
7351
|
|
|
7072
|
-
var
|
|
7073
|
-
var
|
|
7074
|
-
|
|
7075
|
-
|
|
7352
|
+
var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
|
|
7353
|
+
var GRID_VALUES = {
|
|
7354
|
+
desktop: {
|
|
7355
|
+
gapsNumber: 13,
|
|
7356
|
+
columnsNumber: 13,
|
|
7357
|
+
gapsNumberOffset: 15,
|
|
7358
|
+
columnsNumberOffset: 14,
|
|
7359
|
+
largeCard: {
|
|
7360
|
+
gapsPerSlide: 4,
|
|
7361
|
+
columnsPerSlide: 5
|
|
7362
|
+
},
|
|
7363
|
+
smallCard: {
|
|
7364
|
+
gapsPerSlide: 3,
|
|
7365
|
+
columnsPerSlide: 4
|
|
7366
|
+
}
|
|
7367
|
+
},
|
|
7368
|
+
mobile: {
|
|
7369
|
+
columnsNumber: 12,
|
|
7370
|
+
gapsNumber: 13,
|
|
7371
|
+
columnsPerSlide: 10,
|
|
7372
|
+
gapsPerSlide: 9
|
|
7373
|
+
}
|
|
7374
|
+
};
|
|
7375
|
+
// Grid Calculations
|
|
7376
|
+
var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
|
|
7377
|
+
return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
|
|
7378
|
+
};
|
|
7379
|
+
var calculateGapsSpaceInMainGrid = function calculateGapsSpaceInMainGrid(gapsNumber) {
|
|
7380
|
+
return "calc(" + gapsNumber + " * " + GRID_COLUMN_GAP + ")";
|
|
7381
|
+
};
|
|
7382
|
+
var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
|
|
7383
|
+
return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
|
|
7384
|
+
};
|
|
7385
|
+
// Slide styles
|
|
7386
|
+
var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
|
|
7387
|
+
var _GRID_VALUES$desktop = GRID_VALUES.desktop,
|
|
7388
|
+
gapsNumber = _GRID_VALUES$desktop.gapsNumber,
|
|
7389
|
+
columnsNumber = _GRID_VALUES$desktop.columnsNumber,
|
|
7390
|
+
columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
|
|
7391
|
+
gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
|
|
7392
|
+
var _ref = type === CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
|
|
7393
|
+
gapsPerSlide = _ref.gapsPerSlide,
|
|
7394
|
+
columnsPerSlide = _ref.columnsPerSlide;
|
|
7395
|
+
var columns = isActive ? columnsNumberOffset : columnsNumber;
|
|
7396
|
+
var gaps = isActive ? gapsNumberOffset : gapsNumber;
|
|
7397
|
+
var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
|
|
7398
|
+
var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
|
|
7399
|
+
return "\n width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n margin-right: " + GRID_COLUMN_GAP + ";\n ";
|
|
7400
|
+
};
|
|
7401
|
+
var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
|
|
7402
|
+
var _GRID_VALUES$mobile = GRID_VALUES.mobile,
|
|
7403
|
+
columnsNumber = _GRID_VALUES$mobile.columnsNumber,
|
|
7404
|
+
gapsNumber = _GRID_VALUES$mobile.gapsNumber,
|
|
7405
|
+
columnsPerSlide = _GRID_VALUES$mobile.columnsPerSlide,
|
|
7406
|
+
gapsPerSlide = _GRID_VALUES$mobile.gapsPerSlide;
|
|
7407
|
+
var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
|
|
7408
|
+
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
7409
|
+
};
|
|
7410
|
+
var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
|
|
7411
|
+
return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
|
|
7412
|
+
};
|
|
7413
|
+
|
|
7414
|
+
var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5;
|
|
7415
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n"])), function (_ref) {
|
|
7416
|
+
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
7417
|
+
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n " + getImageSlideStyles(imagesHeightDesktop) + "\n }\n }\n }";
|
|
7418
|
+
}, devices.mobile, function (_ref2) {
|
|
7419
|
+
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
7420
|
+
return "&&& {\n .swipe-slide > figure {\n " + getImageSlideStyles(imagesHeightDevice) + "\n }\n }";
|
|
7421
|
+
});
|
|
7422
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n && {\n .swipe-slide {\n ", "\n }\n }\n}}"])), function (_ref3) {
|
|
7423
|
+
var type = _ref3.type,
|
|
7424
|
+
isActive = _ref3.isActive;
|
|
7425
|
+
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n ";
|
|
7426
|
+
}, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
|
|
7427
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
7428
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
7429
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
7430
|
+
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
7431
|
+
return isDescriptionPresent && 'margin: 20px 0';
|
|
7432
|
+
});
|
|
7433
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7434
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
7435
|
+
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: 1 / span 14;\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
7436
|
+
var active = _ref5.active;
|
|
7437
|
+
return active ? 'grid-column: 1 / span 16' : '';
|
|
7438
|
+
}, devices.tablet, devices.mobile);
|
|
7439
|
+
|
|
7440
|
+
var _templateObject$O, _templateObject2$B;
|
|
7441
|
+
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
7442
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
7443
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
7444
|
+
var transitioning = _ref.transitioning;
|
|
7445
|
+
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
7446
|
+
}, function (_ref2) {
|
|
7447
|
+
var translateX = _ref2.translateX;
|
|
7448
|
+
return translateX + "px";
|
|
7449
|
+
}, SWIPE_SLIDE_CLASS_NAME);
|
|
7450
|
+
|
|
7451
|
+
/**
|
|
7452
|
+
* Generates a random string in the format XXX-XXX.
|
|
7453
|
+
* Does not meet UUID standards.
|
|
7454
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
7455
|
+
*
|
|
7456
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
7457
|
+
*/
|
|
7458
|
+
var generateDomElementId = function generateDomElementId() {
|
|
7459
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
7460
|
+
var datePart = Date.now().toString().slice(-3);
|
|
7461
|
+
return randomPart + "-" + datePart;
|
|
7462
|
+
};
|
|
7463
|
+
|
|
7464
|
+
var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
|
|
7465
|
+
var widthSoFar = 0;
|
|
7466
|
+
var visible = [];
|
|
7467
|
+
for (var i = currentIndex; i < slidesLength; i++) {
|
|
7468
|
+
var _slideWidths$i;
|
|
7469
|
+
var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
|
|
7470
|
+
if (widthSoFar + width > containerWidth) break;
|
|
7471
|
+
visible.push(i);
|
|
7472
|
+
widthSoFar += width;
|
|
7473
|
+
}
|
|
7474
|
+
return visible;
|
|
7475
|
+
};
|
|
7476
|
+
var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
7477
|
+
var absDelta = Math.abs(delta);
|
|
7478
|
+
var movedSlides = 0;
|
|
7479
|
+
var accumulated = 0;
|
|
7480
|
+
for (var i = 0; i < slideWidths.length; i++) {
|
|
7481
|
+
accumulated += slideWidths[i];
|
|
7482
|
+
// Allow partial slide (e.g. 50% of next slide) to count
|
|
7483
|
+
var partialThreshold = slideWidths[i] * 0.5;
|
|
7484
|
+
if (absDelta > accumulated - partialThreshold) {
|
|
7485
|
+
movedSlides++;
|
|
7486
|
+
} else {
|
|
7487
|
+
break;
|
|
7488
|
+
}
|
|
7489
|
+
}
|
|
7490
|
+
return movedSlides;
|
|
7491
|
+
};
|
|
7492
|
+
|
|
7493
|
+
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
|
|
7494
|
+
var MAX_CLONES_NUMBER = 6;
|
|
7495
|
+
var CLICK_DRAG_THRESHOLD = 10;
|
|
7496
|
+
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
7497
|
+
if (!infinite) return 0;
|
|
7498
|
+
if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
|
|
7499
|
+
return childrenLength;
|
|
7500
|
+
};
|
|
7501
|
+
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
7502
|
+
if (!slide) return 0;
|
|
7503
|
+
var style = window.getComputedStyle(slide);
|
|
7504
|
+
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
7505
|
+
var marginRight = parseFloat(style.marginRight) || 0;
|
|
7506
|
+
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
7507
|
+
};
|
|
7508
|
+
var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
7509
|
+
var children = _ref.children,
|
|
7510
|
+
_ref$infinite = _ref.infinite,
|
|
7511
|
+
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
7512
|
+
onIndexChange = _ref.onIndexChange,
|
|
7513
|
+
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
7514
|
+
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
7515
|
+
onActiveChange = _ref.onActiveChange,
|
|
7516
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7517
|
+
var containerRef = useRef(null);
|
|
7518
|
+
var childRefs = useRef([]);
|
|
7519
|
+
var startX = useRef(0);
|
|
7520
|
+
var currentTranslate = useRef(0);
|
|
7521
|
+
var isDragging = useRef(false);
|
|
7522
|
+
var isMouseDown = useRef(false);
|
|
7523
|
+
var isActive = useRef(false);
|
|
7524
|
+
var isClickPrevented = useRef(false);
|
|
7525
|
+
var uniqueIdRef = useRef(generateDomElementId());
|
|
7526
|
+
var _useState = useState(null),
|
|
7527
|
+
dragTranslateX = _useState[0],
|
|
7528
|
+
setDragTranslateX = _useState[1];
|
|
7529
|
+
var _useState2 = useState(false),
|
|
7530
|
+
transitioning = _useState2[0],
|
|
7531
|
+
setTransitioning = _useState2[1];
|
|
7532
|
+
var _useState3 = useState([]),
|
|
7533
|
+
slideWidths = _useState3[0],
|
|
7534
|
+
setSlideWidths = _useState3[1];
|
|
7535
|
+
var _useState4 = useState(0),
|
|
7536
|
+
containerWidth = _useState4[0],
|
|
7537
|
+
setContainerWidth = _useState4[1];
|
|
7538
|
+
var _useMemo = useMemo(function () {
|
|
7539
|
+
var count = getClonesCount(infinite, children.length);
|
|
7540
|
+
var leftClones = infinite ? children.slice(-count) : [];
|
|
7541
|
+
var rightClones = infinite ? children.slice(0, count) : [];
|
|
7542
|
+
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
7543
|
+
return {
|
|
7544
|
+
slides: allSlides,
|
|
7545
|
+
clonesCount: count
|
|
7546
|
+
};
|
|
7547
|
+
}, [children, infinite]),
|
|
7548
|
+
slides = _useMemo.slides,
|
|
7549
|
+
clonesCount = _useMemo.clonesCount;
|
|
7550
|
+
var _useState5 = useState(infinite ? clonesCount : 0),
|
|
7551
|
+
currentIndex = _useState5[0],
|
|
7552
|
+
setCurrentIndex = _useState5[1];
|
|
7553
|
+
useEffect(function () {
|
|
7554
|
+
var handler = function handler(e) {
|
|
7555
|
+
if (isClickPrevented.current) {
|
|
7556
|
+
e.preventDefault();
|
|
7557
|
+
e.stopPropagation();
|
|
7558
|
+
}
|
|
7559
|
+
};
|
|
7560
|
+
var containerElement = containerRef.current;
|
|
7561
|
+
containerElement == null || containerElement.addEventListener('click', handler, true);
|
|
7562
|
+
return function () {
|
|
7563
|
+
return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
|
|
7564
|
+
};
|
|
7565
|
+
}, []);
|
|
7566
|
+
useEffect(function () {
|
|
7567
|
+
if (!onIndexChange) return;
|
|
7568
|
+
if (!infinite) {
|
|
7569
|
+
onIndexChange(currentIndex);
|
|
7570
|
+
} else {
|
|
7571
|
+
var offset = currentIndex - clonesCount + children.length;
|
|
7572
|
+
var realIndex = offset % children.length;
|
|
7573
|
+
onIndexChange(realIndex);
|
|
7574
|
+
}
|
|
7575
|
+
}, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
|
|
7576
|
+
var updateDimensions = useCallback(function () {
|
|
7577
|
+
if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
|
|
7578
|
+
if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
|
|
7579
|
+
}, []);
|
|
7580
|
+
useEffect(function () {
|
|
7581
|
+
var animationFrameRequestId = requestAnimationFrame(updateDimensions);
|
|
7582
|
+
return function () {
|
|
7583
|
+
return cancelAnimationFrame(animationFrameRequestId);
|
|
7584
|
+
};
|
|
7585
|
+
}, [children]);
|
|
7586
|
+
useEffect(function () {
|
|
7587
|
+
var observer = new ResizeObserver(updateDimensions);
|
|
7588
|
+
if (containerRef.current) observer.observe(containerRef.current);
|
|
7589
|
+
return function () {
|
|
7590
|
+
return observer.disconnect();
|
|
7591
|
+
};
|
|
7592
|
+
}, [children]);
|
|
7593
|
+
var setIsActive = function setIsActive() {
|
|
7594
|
+
if (!isActive.current) {
|
|
7595
|
+
isActive.current = true;
|
|
7596
|
+
onActiveChange == null || onActiveChange(true);
|
|
7597
|
+
}
|
|
7598
|
+
};
|
|
7599
|
+
var getTranslateX = function getTranslateX() {
|
|
7600
|
+
var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
7601
|
+
return acc + width;
|
|
7602
|
+
}, 0);
|
|
7603
|
+
return offset + (slidesOffsetBefore || 0);
|
|
7604
|
+
};
|
|
7605
|
+
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
7606
|
+
var delta = currentTranslate.current - getTranslateX();
|
|
7607
|
+
var direction = delta > 0 ? -1 : 1;
|
|
7608
|
+
var movedSlides = getMovedSlides(delta, slideWidths);
|
|
7609
|
+
if (Math.abs(delta) > 20) {
|
|
7610
|
+
movedSlides = Math.max(1, movedSlides);
|
|
7611
|
+
var targetIndex = currentIndex + direction * movedSlides;
|
|
7612
|
+
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
|
|
7613
|
+
setTransitioning(true);
|
|
7614
|
+
setCurrentIndex(finalIndex);
|
|
7615
|
+
} else {
|
|
7616
|
+
setTransitioning(true);
|
|
7617
|
+
setCurrentIndex(function (prev) {
|
|
7618
|
+
return prev;
|
|
7619
|
+
});
|
|
7620
|
+
}
|
|
7621
|
+
setDragTranslateX(null);
|
|
7622
|
+
};
|
|
7623
|
+
var canMoveNext = function canMoveNext() {
|
|
7624
|
+
var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
|
|
7625
|
+
return acc + width;
|
|
7626
|
+
}, 0);
|
|
7627
|
+
return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
|
|
7628
|
+
};
|
|
7629
|
+
var handleTransitionEnd = function handleTransitionEnd() {
|
|
7630
|
+
setTransitioning(false);
|
|
7631
|
+
if (!infinite) return;
|
|
7632
|
+
if (currentIndex >= children.length + clonesCount) {
|
|
7633
|
+
setCurrentIndex(clonesCount);
|
|
7634
|
+
} else if (currentIndex < clonesCount) {
|
|
7635
|
+
setCurrentIndex(children.length + currentIndex);
|
|
7636
|
+
}
|
|
7637
|
+
};
|
|
7638
|
+
var goToPrev = function goToPrev() {
|
|
7639
|
+
if (transitioning) return;
|
|
7640
|
+
setIsActive();
|
|
7641
|
+
setTransitioning(true);
|
|
7642
|
+
setCurrentIndex(function (prev) {
|
|
7643
|
+
return infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
7644
|
+
});
|
|
7645
|
+
};
|
|
7646
|
+
var goToNext = function goToNext() {
|
|
7647
|
+
if (transitioning || !canMoveNext()) return;
|
|
7648
|
+
setIsActive();
|
|
7649
|
+
setTransitioning(true);
|
|
7650
|
+
setCurrentIndex(function (prev) {
|
|
7651
|
+
return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
7652
|
+
});
|
|
7653
|
+
};
|
|
7654
|
+
useImperativeHandle(ref, function () {
|
|
7655
|
+
return {
|
|
7656
|
+
nextSlide: goToNext,
|
|
7657
|
+
prevSlide: goToPrev
|
|
7658
|
+
};
|
|
7659
|
+
});
|
|
7660
|
+
var handleTouchStart = function handleTouchStart(e) {
|
|
7661
|
+
setIsActive();
|
|
7662
|
+
startX.current = e.touches[0].clientX;
|
|
7663
|
+
isDragging.current = true;
|
|
7664
|
+
isClickPrevented.current = false;
|
|
7665
|
+
setTransitioning(false);
|
|
7666
|
+
};
|
|
7667
|
+
var handleTouchMove = function handleTouchMove(e) {
|
|
7668
|
+
if (!isDragging.current) return;
|
|
7669
|
+
var deltaX = e.touches[0].clientX - startX.current;
|
|
7670
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
7671
|
+
isClickPrevented.current = true;
|
|
7672
|
+
}
|
|
7673
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
7674
|
+
currentTranslate.current = visualOffset;
|
|
7675
|
+
setDragTranslateX(visualOffset);
|
|
7676
|
+
};
|
|
7677
|
+
var handleTouchEnd = function handleTouchEnd() {
|
|
7678
|
+
isDragging.current = false;
|
|
7679
|
+
navigateOnSwipeEnd();
|
|
7680
|
+
};
|
|
7681
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
7682
|
+
if (!isDragging.current || !isMouseDown.current || transitioning) return;
|
|
7683
|
+
var deltaX = e.clientX - startX.current;
|
|
7684
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
7685
|
+
isClickPrevented.current = true;
|
|
7686
|
+
}
|
|
7687
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
7688
|
+
currentTranslate.current = visualOffset;
|
|
7689
|
+
setDragTranslateX(visualOffset);
|
|
7690
|
+
};
|
|
7691
|
+
var _handleMouseUp = function handleMouseUp() {
|
|
7692
|
+
if (!isMouseDown.current) return;
|
|
7693
|
+
isMouseDown.current = false;
|
|
7694
|
+
isDragging.current = false;
|
|
7695
|
+
if (isClickPrevented.current) {
|
|
7696
|
+
navigateOnSwipeEnd();
|
|
7697
|
+
} else {
|
|
7698
|
+
setDragTranslateX(null);
|
|
7699
|
+
}
|
|
7700
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
7701
|
+
window.removeEventListener('mouseup', _handleMouseUp);
|
|
7702
|
+
};
|
|
7703
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
7704
|
+
if (transitioning || e.button !== 0) return;
|
|
7705
|
+
e.preventDefault();
|
|
7706
|
+
setIsActive();
|
|
7707
|
+
startX.current = e.clientX;
|
|
7708
|
+
isDragging.current = true;
|
|
7709
|
+
isMouseDown.current = true;
|
|
7710
|
+
isClickPrevented.current = false;
|
|
7711
|
+
setTransitioning(false);
|
|
7712
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
7713
|
+
window.addEventListener('mouseup', _handleMouseUp);
|
|
7714
|
+
};
|
|
7715
|
+
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
7716
|
+
if (!isVisible) {
|
|
7717
|
+
setCurrentIndex(index);
|
|
7718
|
+
}
|
|
7719
|
+
};
|
|
7720
|
+
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
7721
|
+
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
7722
|
+
ref: containerRef,
|
|
7723
|
+
onTouchStart: handleTouchStart,
|
|
7724
|
+
onTouchMove: handleTouchMove,
|
|
7725
|
+
onTouchEnd: handleTouchEnd,
|
|
7726
|
+
onMouseDown: handleMouseDown,
|
|
7727
|
+
className: "swipe"
|
|
7728
|
+
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
7729
|
+
className: "swipe-track-wrapper",
|
|
7730
|
+
translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
|
|
7731
|
+
transitioning: transitioning && dragTranslateX === null,
|
|
7732
|
+
onTransitionEnd: handleTransitionEnd
|
|
7733
|
+
}, slides.map(function (child, index) {
|
|
7734
|
+
var isVisible = visibleIndexes.includes(index);
|
|
7735
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
7736
|
+
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
7737
|
+
ariaHidden: !isVisible,
|
|
7738
|
+
className: SWIPE_SLIDE_CLASS_NAME,
|
|
7739
|
+
ref: function ref(el) {
|
|
7740
|
+
childRefs.current[index] = el;
|
|
7741
|
+
},
|
|
7742
|
+
onFocus: function onFocus() {
|
|
7743
|
+
return onSlideFocus(isVisible, index);
|
|
7744
|
+
}
|
|
7745
|
+
});
|
|
7746
|
+
})));
|
|
7747
|
+
});
|
|
7748
|
+
Swipe.displayName = 'Swipe';
|
|
7749
|
+
|
|
7750
|
+
var SCREEN_WIDTH_PERCENTAGE = 0.05;
|
|
7751
|
+
var GRID_OFFSET_MARGIN = {
|
|
7752
|
+
mobile: 0,
|
|
7753
|
+
tablet: 15,
|
|
7754
|
+
desktop: 3
|
|
7755
|
+
};
|
|
7756
|
+
var Carousel = function Carousel(_ref) {
|
|
7757
|
+
var children = _ref.children,
|
|
7758
|
+
type = _ref.type,
|
|
7759
|
+
title = _ref.title,
|
|
7760
|
+
description = _ref.description,
|
|
7761
|
+
className = _ref.className,
|
|
7762
|
+
_ref$titleSemanticLev = _ref.titleSemanticLevel,
|
|
7763
|
+
titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 3 : _ref$titleSemanticLev,
|
|
7764
|
+
_ref$imagesHeightDevi = _ref.imagesHeightDevice,
|
|
7765
|
+
imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
|
|
7766
|
+
_ref$imagesHeightDesk = _ref.imagesHeightDesktop,
|
|
7767
|
+
imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
|
|
7768
|
+
_ref$infinite = _ref.infinite,
|
|
7769
|
+
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
7770
|
+
_ref$useOffset = _ref.useOffset,
|
|
7771
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
|
|
7772
|
+
var _useState = useState(false),
|
|
7773
|
+
active = _useState[0],
|
|
7774
|
+
setActive = _useState[1];
|
|
7775
|
+
var _useState2 = useState(0),
|
|
7776
|
+
slidesOffsetBefore = _useState2[0],
|
|
7777
|
+
setSlidesOffsetBefore = _useState2[1];
|
|
7778
|
+
var swipeRef = useRef(null);
|
|
7779
|
+
useEffect(function () {
|
|
7780
|
+
if (!useOffset || !active) return undefined;
|
|
7781
|
+
var updateWindowDimensions = function updateWindowDimensions() {
|
|
7782
|
+
if (window.matchMedia(devices.mobile).matches) {
|
|
7783
|
+
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
|
|
7784
|
+
} else if (window.matchMedia(devices.tablet).matches) {
|
|
7785
|
+
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
|
|
7786
|
+
} else {
|
|
7787
|
+
setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
|
|
7788
|
+
}
|
|
7789
|
+
};
|
|
7790
|
+
window.addEventListener('resize', updateWindowDimensions);
|
|
7791
|
+
updateWindowDimensions();
|
|
7792
|
+
return function () {
|
|
7793
|
+
window.removeEventListener('resize', updateWindowDimensions);
|
|
7794
|
+
};
|
|
7795
|
+
}, [useOffset, active]);
|
|
7796
|
+
var onNext = function onNext() {
|
|
7797
|
+
var _swipeRef$current;
|
|
7798
|
+
(_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
|
|
7799
|
+
};
|
|
7800
|
+
var onPrev = function onPrev() {
|
|
7801
|
+
var _swipeRef$current2;
|
|
7802
|
+
(_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
|
|
7803
|
+
};
|
|
7804
|
+
var onActiveChangeHandler = function onActiveChangeHandler(value) {
|
|
7805
|
+
if (useOffset && !active) {
|
|
7806
|
+
setActive(value);
|
|
7807
|
+
}
|
|
7808
|
+
};
|
|
7809
|
+
var carouselTitleId = "carousel-title-" + title;
|
|
7810
|
+
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
7811
|
+
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
7812
|
+
className: className,
|
|
7813
|
+
type: type,
|
|
7814
|
+
isActive: active,
|
|
7815
|
+
imagesHeightDevice: imagesHeightDevice,
|
|
7816
|
+
imagesHeightDesktop: imagesHeightDesktop,
|
|
7817
|
+
role: "region",
|
|
7818
|
+
"aria-labelledby": carouselTitleId
|
|
7819
|
+
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
|
|
7820
|
+
columnStartDesktop: 3,
|
|
7821
|
+
columnSpanDesktop: 10,
|
|
7822
|
+
columnStartDevice: 2,
|
|
7823
|
+
columnSpanDevice: 12
|
|
7824
|
+
}, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
|
|
7825
|
+
"data-testid": "carousel-title-wrapper"
|
|
7826
|
+
}, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
|
|
7827
|
+
id: carouselTitleId,
|
|
7828
|
+
isDescriptionPresent: !!description
|
|
7829
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7830
|
+
size: "small",
|
|
7831
|
+
serif: true,
|
|
7832
|
+
hierarchy: "h" + titleSemanticLevel
|
|
7833
|
+
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7834
|
+
size: "large"
|
|
7835
|
+
}, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7836
|
+
columnStartDesktop: 14,
|
|
7837
|
+
columnSpanDesktop: 2,
|
|
7838
|
+
columnStartDevice: 12,
|
|
7839
|
+
columnSpanDevice: 2
|
|
7840
|
+
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
7841
|
+
"data-testid": "carousel-buttons-wrapper"
|
|
7842
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7843
|
+
onClickNext: onNext,
|
|
7844
|
+
onClickPrev: onPrev,
|
|
7845
|
+
availablePrev: true
|
|
7846
|
+
})))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
|
|
7847
|
+
active: active,
|
|
7848
|
+
columnStartDesktop: 3,
|
|
7849
|
+
columnSpanDesktop: 14,
|
|
7850
|
+
columnStartDevice: 2,
|
|
7851
|
+
columnSpanDevice: 13
|
|
7852
|
+
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
7853
|
+
onActiveChange: function onActiveChange(value) {
|
|
7854
|
+
return onActiveChangeHandler(value);
|
|
7855
|
+
},
|
|
7856
|
+
"data-testid": "carousel-swipe",
|
|
7857
|
+
ref: swipeRef,
|
|
7858
|
+
infinite: infinite,
|
|
7859
|
+
slidesOffsetBefore: slidesOffsetBefore,
|
|
7860
|
+
role: "list",
|
|
7861
|
+
"aria-roledescription": "carousel"
|
|
7862
|
+
}, React__default.Children.toArray(children).map(function (child, index) {
|
|
7863
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
7864
|
+
key: "carousel-slide-" + index,
|
|
7865
|
+
"aria-roledescription": "slide"
|
|
7866
|
+
}, child);
|
|
7867
|
+
})))));
|
|
7868
|
+
};
|
|
7869
|
+
|
|
7870
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
|
|
7871
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__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(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n .color-primary {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
7872
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__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 @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 }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7873
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
7874
|
+
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__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);
|
|
7875
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__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);
|
|
7876
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
7877
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
7878
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
7879
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-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 .swipe-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 .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7880
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__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);
|
|
7881
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\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 div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\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);
|
|
7882
|
+
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
7883
|
+
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
7884
|
+
var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
7885
|
+
var AdditionalInfoWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
|
|
7886
|
+
var InfoSubtitleWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n"])));
|
|
7887
|
+
var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n width: 100%;\n height: 100%;\n\n .video-with-controls-container {\n height: 100%;\n }\n\n .video-controls-container {\n display: ", ";\n position: fixed;\n\n > div {\n margin: 0 40px 30px 40px;\n\n @media ", " {\n margin: 0 20px 20px 20px;\n }\n }\n }\n\n button#play {\n height: 48px;\n width: 48px;\n }\n"])), function (_ref) {
|
|
7888
|
+
var isCurrentSlide = _ref.isCurrentSlide;
|
|
7889
|
+
return isCurrentSlide ? 'block' : 'none';
|
|
7890
|
+
}, devices.mobile);
|
|
7891
|
+
|
|
7892
|
+
var COLORS$3 = {
|
|
7893
|
+
"default": 'var(--button-auxiliary-color)',
|
|
7894
|
+
background: 'var(--button-auxiliary-bg-color)'
|
|
7895
|
+
};
|
|
7896
|
+
var getTextColor$3 = function getTextColor(_ref) {
|
|
7897
|
+
var textColor = _ref.textColor;
|
|
7898
|
+
return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
|
|
7899
|
+
};
|
|
7900
|
+
var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
7901
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
7902
|
+
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
7903
|
+
};
|
|
7904
|
+
|
|
7905
|
+
var _templateObject$Q;
|
|
7906
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
7907
|
+
|
|
7908
|
+
var _excluded$i = ["children", "className"];
|
|
7909
|
+
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
7910
|
+
var children = _ref.children,
|
|
7911
|
+
className = _ref.className,
|
|
7912
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
7913
|
+
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
7914
|
+
iconClassName: "auxiliaryButtonIcon",
|
|
7915
|
+
className: className
|
|
7916
|
+
}), children);
|
|
7917
|
+
};
|
|
7918
|
+
|
|
7919
|
+
var _excluded$j = ["text"],
|
|
7920
|
+
_excluded2$2 = ["text"];
|
|
7921
|
+
var _buttonTypeToButton;
|
|
7922
|
+
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
|
|
7923
|
+
var Buttons = function Buttons(_ref) {
|
|
7924
|
+
var auxiliaryCTA = _ref.auxiliaryCTA,
|
|
7925
|
+
links = _ref.links;
|
|
7926
|
+
var firstButton = links == null ? void 0 : links[0];
|
|
7927
|
+
var _ref2 = firstButton || {},
|
|
7928
|
+
_ref2$text = _ref2.text,
|
|
7929
|
+
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7930
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
|
|
7931
|
+
var secondButton = links == null ? void 0 : links[1];
|
|
7932
|
+
var _ref3 = secondButton || {},
|
|
7933
|
+
_ref3$text = _ref3.text,
|
|
7934
|
+
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7935
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
7936
|
+
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
|
|
7937
|
+
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : SecondaryButton;
|
|
7938
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, (firstButton == null ? void 0 : firstButton.text) && (/*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText))), (secondButton == null ? void 0 : secondButton.text) && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText)), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA, {
|
|
7939
|
+
textColor: ThemeColor['base-white']
|
|
7940
|
+
}), auxiliaryCTA.text))));
|
|
7941
|
+
};
|
|
7942
|
+
|
|
7943
|
+
var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
|
|
7944
|
+
return htmlString.replace(/<[^>]*>/g, '');
|
|
7945
|
+
};
|
|
7946
|
+
var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
|
|
7947
|
+
if (addDots === void 0) {
|
|
7948
|
+
addDots = false;
|
|
7949
|
+
}
|
|
7950
|
+
var textContent = stripAllHtmlTags(htmlString);
|
|
7951
|
+
if (textContent.length <= resultLength) {
|
|
7952
|
+
return htmlString;
|
|
7953
|
+
}
|
|
7954
|
+
var accumulatedText = '';
|
|
7955
|
+
var tagStack = [];
|
|
7956
|
+
var charCount = 0;
|
|
7957
|
+
var closeTags = function closeTags() {
|
|
7958
|
+
while (tagStack.length > 0) {
|
|
7959
|
+
accumulatedText += "</" + tagStack.pop() + ">";
|
|
7960
|
+
}
|
|
7961
|
+
};
|
|
7962
|
+
for (var i = 0; i < htmlString.length; i++) {
|
|
7963
|
+
var _char = htmlString[i];
|
|
7964
|
+
if (_char === '<') {
|
|
7965
|
+
accumulatedText += _char;
|
|
7966
|
+
if (htmlString[i + 1] !== '/') {
|
|
7967
|
+
var tagNameEnd = htmlString.indexOf('>', i);
|
|
7968
|
+
var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
|
|
7969
|
+
tagStack.push(tagName);
|
|
7970
|
+
accumulatedText += tagName + ">";
|
|
7971
|
+
i = tagNameEnd;
|
|
7972
|
+
}
|
|
7973
|
+
} else if (_char === '>') {
|
|
7974
|
+
accumulatedText += _char;
|
|
7975
|
+
} else if (charCount < resultLength) {
|
|
7976
|
+
accumulatedText += _char;
|
|
7977
|
+
charCount++;
|
|
7978
|
+
}
|
|
7979
|
+
if (charCount >= resultLength) {
|
|
7980
|
+
if (addDots) {
|
|
7981
|
+
accumulatedText += '...';
|
|
7982
|
+
}
|
|
7983
|
+
break;
|
|
7984
|
+
}
|
|
7985
|
+
}
|
|
7986
|
+
closeTags();
|
|
7987
|
+
return accumulatedText;
|
|
7988
|
+
};
|
|
7989
|
+
var truncate = function truncate(str, n) {
|
|
7990
|
+
return str.length >= n ? str.substring(0, n) : str;
|
|
7991
|
+
};
|
|
7992
|
+
var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
|
|
7993
|
+
if (addDots === void 0) {
|
|
7994
|
+
addDots = false;
|
|
7995
|
+
}
|
|
7996
|
+
var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
|
|
7997
|
+
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
7998
|
+
};
|
|
7999
|
+
|
|
8000
|
+
var InfoSection = function InfoSection(_ref) {
|
|
8001
|
+
var logo = _ref.logo,
|
|
8002
|
+
slide = _ref.slide,
|
|
8003
|
+
currentSlideIndex = _ref.currentSlideIndex;
|
|
8004
|
+
var _useState = useState([]),
|
|
8005
|
+
finishedTimers = _useState[0],
|
|
8006
|
+
setFinishedTimers = _useState[1];
|
|
8007
|
+
var infoText = slide.infoText,
|
|
8008
|
+
infoTitle = slide.infoTitle,
|
|
8009
|
+
infoTimeframe = slide.infoTimeframe,
|
|
8010
|
+
infoSubtitle = slide.infoSubtitle,
|
|
8011
|
+
timerParams = slide.timerParams,
|
|
8012
|
+
additionalInfo = slide.additionalInfo;
|
|
8013
|
+
var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
|
|
8014
|
+
var handleEndDate = function handleEndDate() {
|
|
8015
|
+
return setFinishedTimers([].concat(finishedTimers, [currentSlideIndex]));
|
|
8016
|
+
};
|
|
8017
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
|
|
8018
|
+
"data-testid": "highlight-carousel-timer-wrapper"
|
|
8019
|
+
}, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
8020
|
+
size: "large"
|
|
8021
|
+
}, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
|
|
8022
|
+
color: Colors.White,
|
|
8023
|
+
endDateHandler: handleEndDate,
|
|
8024
|
+
endDate: timerParams.endDate,
|
|
8025
|
+
title: timerParams.title
|
|
8026
|
+
})))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8027
|
+
size: "large",
|
|
8028
|
+
hierarchy: "h3"
|
|
8029
|
+
}, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8030
|
+
size: "large"
|
|
8031
|
+
}, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8032
|
+
size: "large"
|
|
8033
|
+
}, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8034
|
+
size: "large"
|
|
8035
|
+
}, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
|
|
8036
|
+
dangerouslySetInnerHTML: {
|
|
8037
|
+
__html: description
|
|
8038
|
+
}
|
|
8039
|
+
})), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8040
|
+
size: "large"
|
|
8041
|
+
}, additionalInfo)))));
|
|
8042
|
+
};
|
|
8043
|
+
|
|
8044
|
+
var _templateObject$R, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$e;
|
|
8045
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
8046
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
|
|
8047
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
|
|
7076
8048
|
var isVisible = _ref.isVisible;
|
|
7077
8049
|
return isVisible ? 'visible' : 'hidden';
|
|
7078
8050
|
}, devices.mobile);
|
|
7079
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7080
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
8051
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
8052
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref2) {
|
|
7081
8053
|
var textHeight = _ref2.textHeight;
|
|
7082
8054
|
return textHeight;
|
|
7083
8055
|
}, devices.mobile);
|
|
7084
|
-
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
8056
|
+
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
7085
8057
|
|
|
7086
8058
|
/* eslint-disable react/no-unstable-nested-components */
|
|
7087
8059
|
var Accordion = function Accordion(_ref) {
|
|
@@ -7186,8 +8158,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
7186
8158
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
7187
8159
|
};
|
|
7188
8160
|
|
|
7189
|
-
var _templateObject$
|
|
7190
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8161
|
+
var _templateObject$S;
|
|
8162
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
7191
8163
|
|
|
7192
8164
|
var Accordions = function Accordions(_ref) {
|
|
7193
8165
|
var _ref$items = _ref.items,
|
|
@@ -7208,18 +8180,18 @@ var Accordions = function Accordions(_ref) {
|
|
|
7208
8180
|
}));
|
|
7209
8181
|
};
|
|
7210
8182
|
|
|
7211
|
-
var _templateObject$
|
|
7212
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7213
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8183
|
+
var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
|
|
8184
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
8185
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
7214
8186
|
var isClickable = _ref.isClickable;
|
|
7215
8187
|
return isClickable ? 'pointer' : 'default';
|
|
7216
8188
|
}, function (_ref2) {
|
|
7217
8189
|
var isClickable = _ref2.isClickable;
|
|
7218
8190
|
return isClickable && "\n :hover:not(:active) {\n && svg path {\n fill: var(--announcement-banner-hover-color);\n }\n }\n :active {\n && svg path {\n fill: var(--announcement-banner-pressed-color);\n }\n }\n ";
|
|
7219
8191
|
});
|
|
7220
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7221
|
-
var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$
|
|
7222
|
-
var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
8192
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
8193
|
+
var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
8194
|
+
var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
|
|
7223
8195
|
var variant = _ref3.variant;
|
|
7224
8196
|
return variant === BannerVariants['service-persistent'] ? '8px' : '0px';
|
|
7225
8197
|
}, function (_ref4) {
|
|
@@ -7291,109 +8263,76 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7291
8263
|
}))))));
|
|
7292
8264
|
};
|
|
7293
8265
|
|
|
7294
|
-
var
|
|
7295
|
-
"default": 'var(--button-auxiliary-color)',
|
|
7296
|
-
background: 'var(--button-auxiliary-bg-color)'
|
|
7297
|
-
};
|
|
7298
|
-
var getTextColor$2 = function getTextColor(_ref) {
|
|
7299
|
-
var textColor = _ref.textColor;
|
|
7300
|
-
return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
|
|
7301
|
-
};
|
|
7302
|
-
var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
|
|
7303
|
-
var backgroundColor = _ref2.backgroundColor;
|
|
7304
|
-
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
7305
|
-
};
|
|
7306
|
-
|
|
7307
|
-
var _templateObject$Q;
|
|
7308
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$2, getTextColor$2, getTextColor$2);
|
|
7309
|
-
|
|
7310
|
-
var _excluded$h = ["children", "className"];
|
|
7311
|
-
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
7312
|
-
var children = _ref.children,
|
|
7313
|
-
className = _ref.className,
|
|
7314
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7315
|
-
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
7316
|
-
iconClassName: "auxiliaryButtonIcon",
|
|
7317
|
-
className: className
|
|
7318
|
-
}), children);
|
|
7319
|
-
};
|
|
7320
|
-
|
|
7321
|
-
var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
|
|
8266
|
+
var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$f, _templateObject7$9, _templateObject8$7, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
|
|
7322
8267
|
var LENGTH_LARGE_TEXT = 28;
|
|
7323
8268
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7324
8269
|
var LENGTH_TEXT_TABLET = 10;
|
|
7325
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8270
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
7326
8271
|
var isCardClickable = _ref.isCardClickable;
|
|
7327
8272
|
return isCardClickable ? 'pointer' : 'default';
|
|
7328
8273
|
}, function (_ref2) {
|
|
7329
8274
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7330
8275
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7331
8276
|
});
|
|
7332
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
7333
|
-
|
|
7334
|
-
|
|
7335
|
-
|
|
7336
|
-
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7337
|
-
}, zIndexes.contentOverlay);
|
|
7338
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7339
|
-
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
7340
|
-
var fullWidth = _ref4.fullWidth;
|
|
8277
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
8278
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
8279
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref3) {
|
|
8280
|
+
var fullWidth = _ref3.fullWidth;
|
|
7341
8281
|
return fullWidth ? '0' : '20px';
|
|
7342
|
-
}, function (
|
|
7343
|
-
var fullWidth =
|
|
8282
|
+
}, function (_ref4) {
|
|
8283
|
+
var fullWidth = _ref4.fullWidth;
|
|
7344
8284
|
return fullWidth ? '0' : '20px';
|
|
7345
8285
|
});
|
|
7346
|
-
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7347
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
7348
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
7349
|
-
var HighlightTextContainer = /*#__PURE__*/styled(
|
|
7350
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$
|
|
7351
|
-
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$
|
|
7352
|
-
var isVisible =
|
|
8286
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
8287
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8288
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
|
|
8289
|
+
var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
|
|
8290
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
|
|
8291
|
+
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 26px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref5) {
|
|
8292
|
+
var isVisible = _ref5.isVisible;
|
|
7353
8293
|
return isVisible ? "visible" : 'hidden';
|
|
7354
|
-
}, devices.mobile, function (
|
|
7355
|
-
var isGridCard =
|
|
8294
|
+
}, devices.mobile, function (_ref6) {
|
|
8295
|
+
var isGridCard = _ref6.isGridCard;
|
|
7356
8296
|
return isGridCard ? '20px' : '0';
|
|
7357
8297
|
});
|
|
7358
|
-
var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$
|
|
7359
|
-
var fullWidth =
|
|
8298
|
+
var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 26px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref7) {
|
|
8299
|
+
var fullWidth = _ref7.fullWidth;
|
|
7360
8300
|
return fullWidth ? '0' : '20px';
|
|
7361
|
-
}, function (
|
|
7362
|
-
var fullWidth =
|
|
8301
|
+
}, function (_ref8) {
|
|
8302
|
+
var fullWidth = _ref8.fullWidth;
|
|
7363
8303
|
return fullWidth ? '0' : '20px';
|
|
7364
8304
|
});
|
|
7365
|
-
var LabelElements = /*#__PURE__*/styled.div(_templateObject12$
|
|
7366
|
-
var bgColor =
|
|
7367
|
-
|
|
7368
|
-
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
|
|
8305
|
+
var LabelElements = /*#__PURE__*/styled.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 26px;\n padding: 0 8px;\n background-color: ", ";\n"])), function (_ref9) {
|
|
8306
|
+
var bgColor = _ref9.bgColor;
|
|
8307
|
+
return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
|
|
7369
8308
|
});
|
|
7370
|
-
var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13$
|
|
7371
|
-
var getButtonsOpacity = function getButtonsOpacity(
|
|
7372
|
-
var onlyShowButtonsOnHover =
|
|
8309
|
+
var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
|
|
8310
|
+
var getButtonsOpacity = function getButtonsOpacity(_ref10) {
|
|
8311
|
+
var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
|
|
7373
8312
|
return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
|
|
7374
8313
|
};
|
|
7375
|
-
var getButtonsMinHeight = function getButtonsMinHeight(
|
|
7376
|
-
var onlyShowButtonsOnHover =
|
|
8314
|
+
var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
|
|
8315
|
+
var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
|
|
7377
8316
|
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
7378
8317
|
};
|
|
7379
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$
|
|
7380
|
-
var size =
|
|
7381
|
-
primaryButtonTextLength =
|
|
7382
|
-
tertiaryButtonTextLength =
|
|
8318
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 24px;\n margin-top: 24px;\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref12) {
|
|
8319
|
+
var size = _ref12.size,
|
|
8320
|
+
primaryButtonTextLength = _ref12.primaryButtonTextLength,
|
|
8321
|
+
tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
|
|
7383
8322
|
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
7384
8323
|
if (isLinksLayoutColumn) {
|
|
7385
8324
|
return "\n flex-direction: column;\n ";
|
|
7386
8325
|
}
|
|
7387
8326
|
return '';
|
|
7388
|
-
}, devices.mobile, getButtonsMinHeight, function (
|
|
7389
|
-
var fullWidth =
|
|
8327
|
+
}, devices.mobile, getButtonsMinHeight, function (_ref13) {
|
|
8328
|
+
var fullWidth = _ref13.fullWidth;
|
|
7390
8329
|
return fullWidth ? '0' : '20px';
|
|
7391
|
-
}, function (
|
|
7392
|
-
var fullWidth =
|
|
8330
|
+
}, function (_ref14) {
|
|
8331
|
+
var fullWidth = _ref14.fullWidth;
|
|
7393
8332
|
return fullWidth ? '0' : '20px';
|
|
7394
|
-
}, devices.tablet, getButtonsMinHeight, function (
|
|
7395
|
-
var primaryButtonTextLength =
|
|
7396
|
-
tertiaryButtonTextLength =
|
|
8333
|
+
}, devices.tablet, getButtonsMinHeight, function (_ref15) {
|
|
8334
|
+
var primaryButtonTextLength = _ref15.primaryButtonTextLength,
|
|
8335
|
+
tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
|
|
7397
8336
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
|
|
7398
8337
|
if (isLinksLayoutColumnTablet) {
|
|
7399
8338
|
return "\n flex-direction: column;\n ";
|
|
@@ -7401,69 +8340,12 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templa
|
|
|
7401
8340
|
return '';
|
|
7402
8341
|
});
|
|
7403
8342
|
|
|
7404
|
-
var
|
|
7405
|
-
|
|
7406
|
-
|
|
7407
|
-
var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
|
|
7408
|
-
if (addDots === void 0) {
|
|
7409
|
-
addDots = false;
|
|
7410
|
-
}
|
|
7411
|
-
var textContent = stripAllHtmlTags(htmlString);
|
|
7412
|
-
if (textContent.length <= resultLength) {
|
|
7413
|
-
return htmlString;
|
|
7414
|
-
}
|
|
7415
|
-
var accumulatedText = '';
|
|
7416
|
-
var tagStack = [];
|
|
7417
|
-
var charCount = 0;
|
|
7418
|
-
var closeTags = function closeTags() {
|
|
7419
|
-
while (tagStack.length > 0) {
|
|
7420
|
-
accumulatedText += "</" + tagStack.pop() + ">";
|
|
7421
|
-
}
|
|
7422
|
-
};
|
|
7423
|
-
for (var i = 0; i < htmlString.length; i++) {
|
|
7424
|
-
var _char = htmlString[i];
|
|
7425
|
-
if (_char === '<') {
|
|
7426
|
-
accumulatedText += _char;
|
|
7427
|
-
if (htmlString[i + 1] !== '/') {
|
|
7428
|
-
var tagNameEnd = htmlString.indexOf('>', i);
|
|
7429
|
-
var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
|
|
7430
|
-
tagStack.push(tagName);
|
|
7431
|
-
accumulatedText += tagName + ">";
|
|
7432
|
-
i = tagNameEnd;
|
|
7433
|
-
}
|
|
7434
|
-
} else if (_char === '>') {
|
|
7435
|
-
accumulatedText += _char;
|
|
7436
|
-
} else if (charCount < resultLength) {
|
|
7437
|
-
accumulatedText += _char;
|
|
7438
|
-
charCount++;
|
|
7439
|
-
}
|
|
7440
|
-
if (charCount >= resultLength) {
|
|
7441
|
-
if (addDots) {
|
|
7442
|
-
accumulatedText += '...';
|
|
7443
|
-
}
|
|
7444
|
-
break;
|
|
7445
|
-
}
|
|
7446
|
-
}
|
|
7447
|
-
closeTags();
|
|
7448
|
-
return accumulatedText;
|
|
7449
|
-
};
|
|
7450
|
-
var truncate = function truncate(str, n) {
|
|
7451
|
-
return str.length >= n ? str.substring(0, n) : str;
|
|
7452
|
-
};
|
|
7453
|
-
var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
|
|
7454
|
-
if (addDots === void 0) {
|
|
7455
|
-
addDots = false;
|
|
7456
|
-
}
|
|
7457
|
-
var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
|
|
7458
|
-
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
7459
|
-
};
|
|
7460
|
-
|
|
7461
|
-
var _excluded$i = ["text"],
|
|
7462
|
-
_excluded2$1 = ["text"];
|
|
7463
|
-
var _buttonTypeToButton;
|
|
8343
|
+
var _excluded$k = ["text"],
|
|
8344
|
+
_excluded2$3 = ["text"];
|
|
8345
|
+
var _buttonTypeToButton$1;
|
|
7464
8346
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
7465
8347
|
var LENGTH_SMALL_TEXT$2 = 19;
|
|
7466
|
-
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
|
|
8348
|
+
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
7467
8349
|
var Card = function Card(_ref) {
|
|
7468
8350
|
var _labelParams$color;
|
|
7469
8351
|
var _ref$progress = _ref.progress,
|
|
@@ -7501,18 +8383,20 @@ var Card = function Card(_ref) {
|
|
|
7501
8383
|
var _useState = useState(false),
|
|
7502
8384
|
hovered = _useState[0],
|
|
7503
8385
|
setHovered = _useState[1];
|
|
8386
|
+
var cardTitleId = "card-title-" + title;
|
|
8387
|
+
var cardDescriptionId = "card-desc-" + title;
|
|
7504
8388
|
var truncatedText = truncateHtmlString(text, 185, true);
|
|
7505
8389
|
var firstButton = links == null ? void 0 : links[0];
|
|
7506
8390
|
var _ref2 = firstButton || {},
|
|
7507
8391
|
_ref2$text = _ref2.text,
|
|
7508
8392
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7509
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8393
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7510
8394
|
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
7511
8395
|
var secondButton = links == null ? void 0 : links[1];
|
|
7512
8396
|
var _ref3 = secondButton || {},
|
|
7513
8397
|
_ref3$text = _ref3.text,
|
|
7514
8398
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7515
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
8399
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
7516
8400
|
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
7517
8401
|
var hoverHandler = function hoverHandler(value) {
|
|
7518
8402
|
if (value) {
|
|
@@ -7524,8 +8408,8 @@ var Card = function Card(_ref) {
|
|
|
7524
8408
|
}
|
|
7525
8409
|
setHovered(value);
|
|
7526
8410
|
};
|
|
7527
|
-
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
|
|
7528
|
-
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
|
|
8411
|
+
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
|
|
8412
|
+
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
|
|
7529
8413
|
return /*#__PURE__*/React__default.createElement(CardContainer, {
|
|
7530
8414
|
onMouseOver: function onMouseOver() {
|
|
7531
8415
|
return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
|
|
@@ -7535,21 +8419,26 @@ var Card = function Card(_ref) {
|
|
|
7535
8419
|
},
|
|
7536
8420
|
onlyShowButtonsOnHover: onlyShowButtonsOnHover,
|
|
7537
8421
|
"data-testid": "cardcontainer",
|
|
7538
|
-
isCardClickable: !!firstButton
|
|
8422
|
+
isCardClickable: !!firstButton,
|
|
8423
|
+
role: "region",
|
|
8424
|
+
"aria-labelledby": cardTitleId,
|
|
8425
|
+
"aria-describedby": cardDescriptionId
|
|
7539
8426
|
}, /*#__PURE__*/React__default.createElement("a", {
|
|
7540
8427
|
href: firstButton == null ? void 0 : firstButton.href,
|
|
7541
8428
|
target: firstButton == null ? void 0 : firstButton.target,
|
|
7542
8429
|
className: "targetLink",
|
|
7543
8430
|
style: {
|
|
7544
8431
|
flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
|
|
7545
|
-
}
|
|
8432
|
+
},
|
|
8433
|
+
"aria-label": "Navigate to " + title
|
|
7546
8434
|
}, /*#__PURE__*/React__default.createElement(LabelContainer, {
|
|
7547
8435
|
isGridCard: isGridCard,
|
|
7548
8436
|
isVisible: !!labelParams
|
|
7549
8437
|
}, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
|
|
7550
8438
|
bgColor: labelParams == null ? void 0 : labelParams.bgColor
|
|
7551
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
7552
|
-
|
|
8439
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8440
|
+
size: "small",
|
|
8441
|
+
color: "white"
|
|
7553
8442
|
}, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7554
8443
|
iconName: labelParams.iconName,
|
|
7555
8444
|
direction: labelParams.iconDirection,
|
|
@@ -7561,24 +8450,36 @@ var Card = function Card(_ref) {
|
|
|
7561
8450
|
aspectRatio: AspectRatio['4:3']
|
|
7562
8451
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7563
8452
|
src: image,
|
|
7564
|
-
alt: imageAltText
|
|
8453
|
+
alt: imageAltText || title
|
|
7565
8454
|
})), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
|
|
7566
8455
|
progress: progress,
|
|
7567
|
-
height:
|
|
8456
|
+
height: 6
|
|
7568
8457
|
}))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
|
|
7569
8458
|
fullWidth: fullWidth
|
|
7570
8459
|
}, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
7571
8460
|
list: tags
|
|
7572
|
-
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4,
|
|
7573
|
-
|
|
7574
|
-
},
|
|
7575
|
-
|
|
7576
|
-
|
|
8461
|
+
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
|
|
8462
|
+
id: cardTitleId
|
|
8463
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8464
|
+
hierarchy: "h3",
|
|
8465
|
+
size: "small"
|
|
8466
|
+
}, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
|
|
8467
|
+
id: cardTitleId
|
|
8468
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8469
|
+
hierarchy: "h3",
|
|
8470
|
+
size: "medium"
|
|
8471
|
+
}, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8472
|
+
size: "large"
|
|
8473
|
+
}, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8474
|
+
size: "large"
|
|
8475
|
+
}, /*#__PURE__*/React__default.createElement(TextContainer$2, {
|
|
8476
|
+
id: cardDescriptionId,
|
|
7577
8477
|
dangerouslySetInnerHTML: {
|
|
7578
8478
|
__html: truncatedText
|
|
7579
8479
|
}
|
|
7580
|
-
}), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(
|
|
7581
|
-
|
|
8480
|
+
})), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8481
|
+
size: "large",
|
|
8482
|
+
color: "red"
|
|
7582
8483
|
}, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7583
8484
|
fullWidth: fullWidth
|
|
7584
8485
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
@@ -7590,12 +8491,16 @@ var Card = function Card(_ref) {
|
|
|
7590
8491
|
tertiaryButtonTextLength: secondButtonText.length,
|
|
7591
8492
|
onlyShowButtonsOnHover: onlyShowButtonsOnHover,
|
|
7592
8493
|
fullWidth: fullWidth
|
|
7593
|
-
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
|
|
8494
|
+
}, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
|
|
8495
|
+
"aria-label": firstButtonText
|
|
8496
|
+
}, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
|
|
8497
|
+
"aria-label": secondButtonText
|
|
8498
|
+
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
7594
8499
|
};
|
|
7595
8500
|
|
|
7596
|
-
var _templateObject$
|
|
7597
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7598
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
8501
|
+
var _templateObject$V, _templateObject2$G;
|
|
8502
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
8503
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7599
8504
|
|
|
7600
8505
|
var Cards = function Cards(_ref) {
|
|
7601
8506
|
var cards = _ref.cards,
|
|
@@ -7637,18 +8542,18 @@ var Cards = function Cards(_ref) {
|
|
|
7637
8542
|
}));
|
|
7638
8543
|
};
|
|
7639
8544
|
|
|
7640
|
-
var _templateObject$
|
|
7641
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
7642
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8545
|
+
var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
|
|
8546
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
8547
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
7643
8548
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7644
8549
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
|
|
7645
8550
|
}, function (_ref2) {
|
|
7646
8551
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7647
8552
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
|
|
7648
8553
|
}, devices.mobileAndTablet);
|
|
7649
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$
|
|
7650
|
-
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$
|
|
7651
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8554
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
8555
|
+
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8556
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7652
8557
|
|
|
7653
8558
|
var divideAddressString = function divideAddressString(address) {
|
|
7654
8559
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7705,18 +8610,18 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7705
8610
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
|
|
7706
8611
|
};
|
|
7707
8612
|
|
|
7708
|
-
var _templateObject$
|
|
7709
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7710
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
8613
|
+
var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$g, _templateObject7$a;
|
|
8614
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8615
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7711
8616
|
return props.clickable ? 'pointer' : 'default';
|
|
7712
8617
|
}, devices.mobile);
|
|
7713
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7714
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8618
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
8619
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7715
8620
|
return props.showImage ? 2 : '1 / span 4';
|
|
7716
8621
|
}, devices.mobile);
|
|
7717
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7718
|
-
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$
|
|
7719
|
-
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8622
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
8623
|
+
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
8624
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7720
8625
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
7721
8626
|
});
|
|
7722
8627
|
|
|
@@ -7788,21 +8693,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7788
8693
|
}), link.text))));
|
|
7789
8694
|
};
|
|
7790
8695
|
|
|
7791
|
-
var _templateObject$
|
|
7792
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
8696
|
+
var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$l;
|
|
8697
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7793
8698
|
var imageToLeft = _ref.imageToLeft;
|
|
7794
8699
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7795
8700
|
}, devices.mobile);
|
|
7796
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8701
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7797
8702
|
var imageToLeft = _ref2.imageToLeft;
|
|
7798
8703
|
return imageToLeft ? 'left' : 'right';
|
|
7799
8704
|
}, devices.mobile);
|
|
7800
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8705
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7801
8706
|
var imageToLeft = _ref3.imageToLeft;
|
|
7802
8707
|
return imageToLeft ? 'right' : 'left';
|
|
7803
8708
|
}, devices.mobile);
|
|
7804
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
7805
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
8709
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$q || (_templateObject4$q = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
8710
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__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: 0;\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"])));
|
|
7806
8711
|
|
|
7807
8712
|
var Editorial = function Editorial(_ref) {
|
|
7808
8713
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7833,26 +8738,82 @@ var Editorial = function Editorial(_ref) {
|
|
|
7833
8738
|
})))));
|
|
7834
8739
|
};
|
|
7835
8740
|
|
|
7836
|
-
var
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
|
|
8741
|
+
var InformationCtaVariants = {
|
|
8742
|
+
Primary: 'Primary',
|
|
8743
|
+
Secondary: 'Secondary',
|
|
8744
|
+
Tertiary: 'Tertiary',
|
|
8745
|
+
TextLink: 'TextLink'
|
|
8746
|
+
};
|
|
8747
|
+
|
|
8748
|
+
var COLORS$4 = {
|
|
8749
|
+
"default": 'var(--information-panel-button-color)',
|
|
8750
|
+
background: 'var(--information-panel-button-bg-color)',
|
|
8751
|
+
hover: 'var(--information-panel-button-hover-color)',
|
|
8752
|
+
pressed: 'var(--information-panel-button-pressed-color)'
|
|
8753
|
+
};
|
|
8754
|
+
var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
|
|
8755
|
+
if (theme === ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
|
|
8756
|
+
return 'var(--color-primary-black)';
|
|
7842
8757
|
}
|
|
7843
|
-
if (
|
|
7844
|
-
return "
|
|
8758
|
+
if (variant === InformationCtaVariants.Primary) {
|
|
8759
|
+
return COLORS$4["default"];
|
|
7845
8760
|
}
|
|
7846
|
-
return
|
|
7847
|
-
}
|
|
7848
|
-
var
|
|
7849
|
-
return
|
|
7850
|
-
}
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
8761
|
+
return colorValue;
|
|
8762
|
+
};
|
|
8763
|
+
var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
|
|
8764
|
+
return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
|
|
8765
|
+
};
|
|
8766
|
+
var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
8767
|
+
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
8768
|
+
};
|
|
8769
|
+
|
|
8770
|
+
var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
|
|
8771
|
+
var InfoWrapper$1 = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
8772
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8773
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
8774
|
+
var variant = _ref.variant,
|
|
8775
|
+
theme = _ref.theme;
|
|
8776
|
+
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
8777
|
+
}, function (_ref2) {
|
|
8778
|
+
var variant = _ref2.variant;
|
|
8779
|
+
return getBackgroundColor$2(variant, COLORS$4.background);
|
|
8780
|
+
}, function (_ref3) {
|
|
8781
|
+
var variant = _ref3.variant;
|
|
8782
|
+
return getBorderColor$1(variant, COLORS$4.background);
|
|
8783
|
+
}, function (_ref4) {
|
|
8784
|
+
var variant = _ref4.variant,
|
|
8785
|
+
theme = _ref4.theme;
|
|
8786
|
+
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
8787
|
+
}, function (_ref5) {
|
|
8788
|
+
var variant = _ref5.variant,
|
|
8789
|
+
theme = _ref5.theme;
|
|
8790
|
+
return getTextColor$4(variant, theme, COLORS$4.hover);
|
|
8791
|
+
}, function (_ref6) {
|
|
8792
|
+
var variant = _ref6.variant;
|
|
8793
|
+
return getBackgroundColor$2(variant, COLORS$4.hover);
|
|
8794
|
+
}, function (_ref7) {
|
|
8795
|
+
var variant = _ref7.variant;
|
|
8796
|
+
return getBorderColor$1(variant, COLORS$4.hover);
|
|
8797
|
+
}, function (_ref8) {
|
|
8798
|
+
var variant = _ref8.variant,
|
|
8799
|
+
theme = _ref8.theme;
|
|
8800
|
+
return getTextColor$4(variant, theme, COLORS$4.hover);
|
|
8801
|
+
}, function (_ref9) {
|
|
8802
|
+
var variant = _ref9.variant,
|
|
8803
|
+
theme = _ref9.theme;
|
|
8804
|
+
return getTextColor$4(variant, theme, COLORS$4.pressed);
|
|
8805
|
+
}, function (_ref10) {
|
|
8806
|
+
var variant = _ref10.variant;
|
|
8807
|
+
return getBackgroundColor$2(variant, COLORS$4.pressed);
|
|
8808
|
+
}, function (_ref11) {
|
|
8809
|
+
var variant = _ref11.variant;
|
|
8810
|
+
return getBorderColor$1(variant, COLORS$4.pressed);
|
|
8811
|
+
}, function (_ref12) {
|
|
8812
|
+
var variant = _ref12.variant,
|
|
8813
|
+
theme = _ref12.theme;
|
|
8814
|
+
return getTextColor$4(variant, theme, COLORS$4.pressed);
|
|
7855
8815
|
});
|
|
8816
|
+
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
|
|
7856
8817
|
|
|
7857
8818
|
// Helper function for rendering buttons based on the variant
|
|
7858
8819
|
var renderButton = function renderButton(_ref) {
|
|
@@ -7863,7 +8824,7 @@ var renderButton = function renderButton(_ref) {
|
|
|
7863
8824
|
iconDirection = _ref.iconDirection,
|
|
7864
8825
|
target = _ref.target;
|
|
7865
8826
|
switch (variant) {
|
|
7866
|
-
case
|
|
8827
|
+
case InformationCtaVariants.Secondary:
|
|
7867
8828
|
return /*#__PURE__*/React__default.createElement(SecondaryButton, {
|
|
7868
8829
|
href: link,
|
|
7869
8830
|
iconName: iconName,
|
|
@@ -7871,13 +8832,13 @@ var renderButton = function renderButton(_ref) {
|
|
|
7871
8832
|
target: target,
|
|
7872
8833
|
"aria-label": text
|
|
7873
8834
|
}, text);
|
|
7874
|
-
case
|
|
8835
|
+
case InformationCtaVariants.Tertiary:
|
|
7875
8836
|
return /*#__PURE__*/React__default.createElement(TertiaryButton, {
|
|
7876
8837
|
href: link,
|
|
7877
8838
|
target: target,
|
|
7878
8839
|
"aria-label": text
|
|
7879
8840
|
}, text);
|
|
7880
|
-
case
|
|
8841
|
+
case InformationCtaVariants.TextLink:
|
|
7881
8842
|
return /*#__PURE__*/React__default.createElement(TextLink, {
|
|
7882
8843
|
href: link,
|
|
7883
8844
|
iconName: iconName,
|
|
@@ -7897,17 +8858,17 @@ var renderButton = function renderButton(_ref) {
|
|
|
7897
8858
|
};
|
|
7898
8859
|
var InfoCta = function InfoCta(_ref2) {
|
|
7899
8860
|
var _ref2$variant = _ref2.variant,
|
|
7900
|
-
variant = _ref2$variant === void 0 ?
|
|
8861
|
+
variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
|
|
7901
8862
|
link = _ref2.link,
|
|
7902
8863
|
text = _ref2.text,
|
|
7903
8864
|
iconName = _ref2.iconName,
|
|
7904
8865
|
iconDirection = _ref2.iconDirection,
|
|
7905
|
-
infoThemed = _ref2.infoThemed,
|
|
7906
8866
|
_ref2$target = _ref2.target,
|
|
7907
|
-
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target
|
|
8867
|
+
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
|
|
8868
|
+
theme = _ref2.theme;
|
|
7908
8869
|
return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
|
|
7909
8870
|
variant: variant,
|
|
7910
|
-
|
|
8871
|
+
theme: theme
|
|
7911
8872
|
}, renderButton({
|
|
7912
8873
|
variant: variant,
|
|
7913
8874
|
link: link,
|
|
@@ -7923,40 +8884,28 @@ var smallColumnSpan = 4;
|
|
|
7923
8884
|
var largeColumnSpan = 9;
|
|
7924
8885
|
var mediumWordBreakpoint = 8;
|
|
7925
8886
|
var longWordBreakpoint = 13;
|
|
7926
|
-
var getColumnSpan = function getColumnSpan(
|
|
7927
|
-
if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
|
|
8887
|
+
var getColumnSpan = function getColumnSpan(longestWordLength) {
|
|
7928
8888
|
if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
|
|
7929
8889
|
if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
|
|
7930
8890
|
return defaultColumnSpan;
|
|
7931
8891
|
};
|
|
7932
|
-
var renderTitle = function renderTitle(props) {
|
|
7933
|
-
var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
|
|
7934
|
-
return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
|
|
7935
|
-
level: headerLevel
|
|
7936
|
-
}, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
|
|
7937
|
-
level: headerLevel
|
|
7938
|
-
}, props.text));
|
|
7939
|
-
};
|
|
7940
8892
|
var Information = function Information(_ref) {
|
|
7941
8893
|
var body = _ref.body,
|
|
7942
8894
|
title = _ref.title,
|
|
7943
|
-
background = _ref.background,
|
|
7944
8895
|
cta = _ref.cta,
|
|
7945
|
-
className = _ref.className
|
|
8896
|
+
className = _ref.className,
|
|
8897
|
+
theme = _ref.theme;
|
|
7946
8898
|
var safeTitle = title || {
|
|
7947
8899
|
text: '',
|
|
7948
|
-
|
|
7949
|
-
textSize: 5
|
|
8900
|
+
textSize: 'medium'
|
|
7950
8901
|
}; // Provide a fallback
|
|
7951
8902
|
var titleWords = safeTitle.text.split(' ');
|
|
7952
8903
|
var titleWordLengths = titleWords.map(function (word) {
|
|
7953
8904
|
return word.length;
|
|
7954
8905
|
});
|
|
7955
8906
|
var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
|
|
7956
|
-
var titleColumnSpan = getColumnSpan(
|
|
7957
|
-
|
|
7958
|
-
return /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
7959
|
-
background: bgColour,
|
|
8907
|
+
var titleColumnSpan = getColumnSpan(maxTitleWordLength);
|
|
8908
|
+
return /*#__PURE__*/React__default.createElement(InfoWrapper$1, {
|
|
7960
8909
|
"data-testid": "infoWrapper",
|
|
7961
8910
|
className: className
|
|
7962
8911
|
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -7964,50 +8913,53 @@ var Information = function Information(_ref) {
|
|
|
7964
8913
|
columnStartDevice: 2,
|
|
7965
8914
|
columnSpanDesktop: titleColumnSpan,
|
|
7966
8915
|
columnSpanDevice: 12
|
|
7967
|
-
}, /*#__PURE__*/React__default.createElement(InfoTitle, null,
|
|
8916
|
+
}, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8917
|
+
hierarchy: "h2",
|
|
8918
|
+
size: safeTitle.textSize,
|
|
8919
|
+
color: "inherit"
|
|
8920
|
+
}, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7968
8921
|
columnStartDesktop: titleColumnSpan + 2,
|
|
7969
8922
|
columnStartDevice: 2,
|
|
7970
8923
|
columnSpanDesktop: 14 - titleColumnSpan,
|
|
7971
8924
|
columnSpanDevice: 12
|
|
7972
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
7973
|
-
background: bgColour,
|
|
8925
|
+
}, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
|
|
7974
8926
|
dangerouslySetInnerHTML: {
|
|
7975
8927
|
__html: body
|
|
7976
8928
|
}
|
|
7977
8929
|
}), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
|
|
7978
8930
|
link: cta.link,
|
|
7979
8931
|
variant: cta.variant,
|
|
7980
|
-
infoThemed: bgColour !== IInformationBackgroundColour.White,
|
|
7981
8932
|
text: cta.text,
|
|
7982
8933
|
iconName: cta.iconName,
|
|
7983
8934
|
iconDirection: cta.iconDirection,
|
|
7984
|
-
target: cta.target
|
|
8935
|
+
target: cta.target,
|
|
8936
|
+
theme: theme
|
|
7985
8937
|
})))));
|
|
7986
8938
|
};
|
|
7987
8939
|
|
|
7988
|
-
var _templateObject$
|
|
7989
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8940
|
+
var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
|
|
8941
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7990
8942
|
var theme = _ref.theme;
|
|
7991
8943
|
return theme.colors.primary;
|
|
7992
8944
|
}, function (_ref2) {
|
|
7993
8945
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7994
8946
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7995
8947
|
}, devices.mobile);
|
|
7996
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7997
|
-
var TitleWrapper$
|
|
8948
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title 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\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
8949
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7998
8950
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7999
8951
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
8000
8952
|
}, devices.mobile);
|
|
8001
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8953
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
|
|
8002
8954
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
8003
8955
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
8004
8956
|
}, devices.mobile);
|
|
8005
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8006
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
8007
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$
|
|
8008
|
-
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$
|
|
8957
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
8958
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
8959
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
8960
|
+
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
8009
8961
|
|
|
8010
|
-
var _excluded$
|
|
8962
|
+
var _excluded$l = ["text"];
|
|
8011
8963
|
var PageHeading = function PageHeading(_ref) {
|
|
8012
8964
|
var title = _ref.title,
|
|
8013
8965
|
text = _ref.text,
|
|
@@ -8023,14 +8975,14 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8023
8975
|
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
8024
8976
|
var _ref2 = link || {},
|
|
8025
8977
|
linkText = _ref2.text,
|
|
8026
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8978
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
8027
8979
|
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
8028
8980
|
var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
|
|
8029
8981
|
var isTitleUnAvailable = !title;
|
|
8030
8982
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
8031
8983
|
"data-testid": "page-heading-wrapper",
|
|
8032
8984
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
8033
|
-
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
8985
|
+
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
8034
8986
|
"data-testid": "page-heading-title",
|
|
8035
8987
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
8036
8988
|
}, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
@@ -8051,13 +9003,13 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8051
9003
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
|
|
8052
9004
|
};
|
|
8053
9005
|
|
|
8054
|
-
var _excluded$
|
|
9006
|
+
var _excluded$m = ["link"];
|
|
8055
9007
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
8056
9008
|
var link = _ref.link,
|
|
8057
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9009
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
8058
9010
|
var coreLink = link && _extends({}, link, {
|
|
8059
|
-
color:
|
|
8060
|
-
bgColor:
|
|
9011
|
+
color: ThemeColor['base-white'],
|
|
9012
|
+
bgColor: ThemeColor['base-black']
|
|
8061
9013
|
});
|
|
8062
9014
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8063
9015
|
theme: ThemeType.Core
|
|
@@ -8066,13 +9018,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
8066
9018
|
})));
|
|
8067
9019
|
};
|
|
8068
9020
|
|
|
8069
|
-
var _excluded$
|
|
9021
|
+
var _excluded$n = ["link"];
|
|
8070
9022
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
8071
9023
|
var link = _ref.link,
|
|
8072
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9024
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
|
|
8073
9025
|
var cinemaLink = link && _extends({}, link, {
|
|
8074
|
-
color:
|
|
8075
|
-
bgColor:
|
|
9026
|
+
color: ThemeColor['base-black'],
|
|
9027
|
+
bgColor: ThemeColor['base-white']
|
|
8076
9028
|
});
|
|
8077
9029
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8078
9030
|
theme: ThemeType.Cinema
|
|
@@ -8083,17 +9035,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
8083
9035
|
})));
|
|
8084
9036
|
};
|
|
8085
9037
|
|
|
8086
|
-
var _templateObject
|
|
8087
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8088
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8089
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
8090
|
-
var SponsorWrapper
|
|
8091
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8092
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
8093
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
8094
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
9038
|
+
var _templateObject$$, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
|
|
9039
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
9040
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
9041
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\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 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 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 align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo 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 }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
9042
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__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);
|
|
9043
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
9044
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__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(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * 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);
|
|
9045
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__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: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
9046
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__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 font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\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);
|
|
8095
9047
|
|
|
8096
|
-
var _excluded$
|
|
9048
|
+
var _excluded$o = ["text"];
|
|
8097
9049
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
8098
9050
|
var children = _ref.children,
|
|
8099
9051
|
text = _ref.text,
|
|
@@ -8111,12 +9063,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8111
9063
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
8112
9064
|
var _ref2 = link || {},
|
|
8113
9065
|
linkText = _ref2.text,
|
|
8114
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9066
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
8115
9067
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
8116
9068
|
bgUrlDesktop: bgUrlDesktop,
|
|
8117
9069
|
bgUrlDevice: bgUrlDevice,
|
|
8118
9070
|
"data-testid": "impact-wrapper"
|
|
8119
|
-
}, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper
|
|
9071
|
+
}, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8120
9072
|
"data-testid": "impact-sponsor"
|
|
8121
9073
|
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8122
9074
|
"data-testid": "impact-custom-sponsor"
|
|
@@ -8156,21 +9108,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8156
9108
|
}, "Scroll Down"))) : null);
|
|
8157
9109
|
};
|
|
8158
9110
|
|
|
8159
|
-
var _templateObject$
|
|
8160
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9111
|
+
var _templateObject$10, _templateObject2$N, _templateObject3$z, _templateObject4$u, _templateObject5$o;
|
|
9112
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8161
9113
|
var color = _ref.color;
|
|
8162
9114
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8163
9115
|
}, devices.mobileAndTablet);
|
|
8164
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
9116
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8165
9117
|
var hasImage = _ref2.hasImage;
|
|
8166
9118
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8167
9119
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8168
9120
|
var hasImage = _ref3.hasImage;
|
|
8169
9121
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8170
9122
|
});
|
|
8171
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
8172
|
-
var InfoWrapper$
|
|
8173
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9123
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
9124
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
9125
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\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 font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
8174
9126
|
|
|
8175
9127
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8176
9128
|
var _image$src, _image$alt;
|
|
@@ -8184,7 +9136,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8184
9136
|
"data-testid": "wrapper"
|
|
8185
9137
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
8186
9138
|
hasImage: hasImage
|
|
8187
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$
|
|
9139
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$2, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
|
|
8188
9140
|
"data-testid": "scroll-link"
|
|
8189
9141
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
8190
9142
|
iconName: "Arrow",
|
|
@@ -8200,16 +9152,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8200
9152
|
})))));
|
|
8201
9153
|
};
|
|
8202
9154
|
|
|
8203
|
-
var _templateObject$
|
|
8204
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9155
|
+
var _templateObject$11;
|
|
9156
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
8205
9157
|
|
|
8206
|
-
var _excluded$
|
|
9158
|
+
var _excluded$p = ["link"];
|
|
8207
9159
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
8208
9160
|
var link = _ref.link,
|
|
8209
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9161
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
8210
9162
|
var streamLink = link && _extends({}, link, {
|
|
8211
|
-
color:
|
|
8212
|
-
bgColor:
|
|
9163
|
+
color: ThemeColor['base-black'],
|
|
9164
|
+
bgColor: ThemeColor['base-white']
|
|
8213
9165
|
});
|
|
8214
9166
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8215
9167
|
theme: ThemeType.Stream
|
|
@@ -8220,12 +9172,199 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
8220
9172
|
}))));
|
|
8221
9173
|
};
|
|
8222
9174
|
|
|
8223
|
-
var _templateObject
|
|
8224
|
-
var
|
|
8225
|
-
var
|
|
8226
|
-
var
|
|
8227
|
-
var
|
|
8228
|
-
var
|
|
9175
|
+
var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
9176
|
+
var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9177
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
9178
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__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\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n \n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet, devices.tablet);
|
|
9179
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
9180
|
+
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
9181
|
+
var theme = _ref.theme;
|
|
9182
|
+
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
9183
|
+
}, function (_ref2) {
|
|
9184
|
+
var showBlock = _ref2.showBlock;
|
|
9185
|
+
return showBlock ? 'block' : 'none';
|
|
9186
|
+
}, devices.mobile);
|
|
9187
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
9188
|
+
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
|
|
9189
|
+
var isBadgePresent = _ref3.isBadgePresent;
|
|
9190
|
+
return isBadgePresent ? '1' : '4';
|
|
9191
|
+
});
|
|
9192
|
+
var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
|
|
9193
|
+
var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
|
|
9194
|
+
return isAdditionalButtonPresent ? '20px' : '0';
|
|
9195
|
+
});
|
|
9196
|
+
var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9197
|
+
var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
|
|
9198
|
+
var theme = _ref5.theme;
|
|
9199
|
+
return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
|
|
9200
|
+
}, devices.mobile, function (_ref6) {
|
|
9201
|
+
var isButtonPresent = _ref6.isButtonPresent;
|
|
9202
|
+
return isButtonPresent ? '20px' : '0';
|
|
9203
|
+
});
|
|
9204
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
|
|
9205
|
+
|
|
9206
|
+
var PageHeadingPromoBadge;
|
|
9207
|
+
(function (PageHeadingPromoBadge) {
|
|
9208
|
+
PageHeadingPromoBadge["Stream"] = "Stream";
|
|
9209
|
+
PageHeadingPromoBadge["Cinema"] = "Cinema";
|
|
9210
|
+
})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
|
|
9211
|
+
|
|
9212
|
+
var Badge = function Badge(_ref) {
|
|
9213
|
+
var isMobile = _ref.isMobile,
|
|
9214
|
+
theme = _ref.theme,
|
|
9215
|
+
badge = _ref.badge;
|
|
9216
|
+
if (!badge) return null;
|
|
9217
|
+
var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
|
|
9218
|
+
var alignment = isMobile ? 'center' : 'left';
|
|
9219
|
+
return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
|
|
9220
|
+
"data-testid": "promo-heading-badge"
|
|
9221
|
+
}, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
|
|
9222
|
+
fillColor: color,
|
|
9223
|
+
align: alignment
|
|
9224
|
+
})) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
|
|
9225
|
+
fillColor: color,
|
|
9226
|
+
align: alignment
|
|
9227
|
+
})));
|
|
9228
|
+
};
|
|
9229
|
+
|
|
9230
|
+
var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
|
|
9231
|
+
var link = _ref.link,
|
|
9232
|
+
theme = _ref.theme;
|
|
9233
|
+
var text = link.text;
|
|
9234
|
+
if (theme === ThemeType.Cinema) {
|
|
9235
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
|
|
9236
|
+
textColor: ThemeColor['base-white'],
|
|
9237
|
+
backgroundColor: ThemeColor['base-black'],
|
|
9238
|
+
hoveredColor: ThemeColor['rbo-black-hovered'],
|
|
9239
|
+
pressedColor: ThemeColor['rbo-black-pressed']
|
|
9240
|
+
}), text);
|
|
9241
|
+
}
|
|
9242
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
|
|
9243
|
+
textColor: ThemeColor['base-black'],
|
|
9244
|
+
backgroundColor: ThemeColor['base-white'],
|
|
9245
|
+
hoveredColor: ThemeColor['white-hovered'],
|
|
9246
|
+
pressedColor: ThemeColor['white-pressed']
|
|
9247
|
+
}), text);
|
|
9248
|
+
};
|
|
9249
|
+
var Button$1 = function Button(_ref2) {
|
|
9250
|
+
var link = _ref2.link,
|
|
9251
|
+
theme = _ref2.theme,
|
|
9252
|
+
isMobile = _ref2.isMobile;
|
|
9253
|
+
var text = link.text;
|
|
9254
|
+
if (isMobile) {
|
|
9255
|
+
return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
|
|
9256
|
+
theme: theme,
|
|
9257
|
+
link: link
|
|
9258
|
+
});
|
|
9259
|
+
}
|
|
9260
|
+
var buttonColor = theme === ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
|
|
9261
|
+
if (link.isTextLink) {
|
|
9262
|
+
return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
|
|
9263
|
+
color: buttonColor,
|
|
9264
|
+
iconName: undefined
|
|
9265
|
+
}), text);
|
|
9266
|
+
}
|
|
9267
|
+
return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
|
|
9268
|
+
textColor: buttonColor,
|
|
9269
|
+
borderColor: buttonColor,
|
|
9270
|
+
hoveredColor: buttonColor,
|
|
9271
|
+
pressedColor: buttonColor
|
|
9272
|
+
}), text);
|
|
9273
|
+
};
|
|
9274
|
+
|
|
9275
|
+
var Image = function Image(_ref) {
|
|
9276
|
+
var desktop = _ref.desktop,
|
|
9277
|
+
mobile = _ref.mobile,
|
|
9278
|
+
alt = _ref.alt;
|
|
9279
|
+
var isMobile = useMobile();
|
|
9280
|
+
return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9281
|
+
aspectRatio: isMobile ? AspectRatio['75:32'] : AspectRatio['90:17']
|
|
9282
|
+
}, /*#__PURE__*/React__default.createElement("picture", {
|
|
9283
|
+
"data-testid": "promo-heading-picture"
|
|
9284
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
9285
|
+
srcSet: mobile,
|
|
9286
|
+
media: "(max-width: 768px)"
|
|
9287
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
9288
|
+
srcSet: desktop,
|
|
9289
|
+
media: "(min-width: 769px)"
|
|
9290
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
9291
|
+
src: desktop,
|
|
9292
|
+
alt: alt,
|
|
9293
|
+
"data-testid": "promo-heading-image"
|
|
9294
|
+
})));
|
|
9295
|
+
};
|
|
9296
|
+
|
|
9297
|
+
var TITLE_MAX_LENGTH = 40;
|
|
9298
|
+
var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
9299
|
+
var _ref$sponsor = _ref.sponsor,
|
|
9300
|
+
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
9301
|
+
className = _ref.className,
|
|
9302
|
+
theme = _ref.theme,
|
|
9303
|
+
badge = _ref.badge,
|
|
9304
|
+
mainLink = _ref.mainLink,
|
|
9305
|
+
title = _ref.title,
|
|
9306
|
+
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
9307
|
+
additionalLink = _ref.additionalLink,
|
|
9308
|
+
image = _ref.image;
|
|
9309
|
+
var isMobile = useMobile();
|
|
9310
|
+
var showImageButton = !title && !badge && !additionalLink && !isMobile;
|
|
9311
|
+
var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
|
|
9312
|
+
var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
|
|
9313
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, {
|
|
9314
|
+
className: className
|
|
9315
|
+
}, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
|
|
9316
|
+
"data-testid": "promo-heading-sponsor"
|
|
9317
|
+
}, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
|
|
9318
|
+
mobile: image.mobile,
|
|
9319
|
+
desktop: image.desktop,
|
|
9320
|
+
alt: image.alt
|
|
9321
|
+
}), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
|
|
9322
|
+
"data-testid": "promo-heading-image-button"
|
|
9323
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
|
|
9324
|
+
textColor: ThemeColor['base-black'],
|
|
9325
|
+
backgroundColor: ThemeColor['base-white'],
|
|
9326
|
+
hoveredColor: ThemeColor['white-hovered'],
|
|
9327
|
+
pressedColor: ThemeColor['white-pressed']
|
|
9328
|
+
}), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
|
|
9329
|
+
theme: theme,
|
|
9330
|
+
showBlock: showContentBlock
|
|
9331
|
+
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9332
|
+
columnStartDesktop: 2,
|
|
9333
|
+
columnSpanDesktop: 14,
|
|
9334
|
+
columnStartDevice: 2,
|
|
9335
|
+
columnSpanDevice: 12
|
|
9336
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
|
|
9337
|
+
theme: theme
|
|
9338
|
+
}, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
|
|
9339
|
+
isBadgePresent: !!badge
|
|
9340
|
+
}, /*#__PURE__*/React__default.createElement(Badge, {
|
|
9341
|
+
theme: theme,
|
|
9342
|
+
badge: badge,
|
|
9343
|
+
isMobile: isMobile
|
|
9344
|
+
}), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
|
|
9345
|
+
theme: theme,
|
|
9346
|
+
link: additionalLink
|
|
9347
|
+
}))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
|
|
9348
|
+
theme: theme,
|
|
9349
|
+
isButtonPresent: !!mainLink || !!additionalLink
|
|
9350
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
9351
|
+
hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
|
|
9352
|
+
size: "large"
|
|
9353
|
+
}, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
|
|
9354
|
+
isAdditionalButtonPresent: !!additionalLink && !badge
|
|
9355
|
+
}, /*#__PURE__*/React__default.createElement(Button$1, {
|
|
9356
|
+
theme: theme,
|
|
9357
|
+
link: mainLink,
|
|
9358
|
+
isMobile: isMobile
|
|
9359
|
+
}))))))));
|
|
9360
|
+
};
|
|
9361
|
+
|
|
9362
|
+
var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;
|
|
9363
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
9364
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
9365
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9366
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
9367
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8229
9368
|
var invert = _ref.invert,
|
|
8230
9369
|
theme = _ref.theme;
|
|
8231
9370
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -8241,10 +9380,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (
|
|
|
8241
9380
|
var theme = _ref4.theme;
|
|
8242
9381
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
8243
9382
|
}, devices.tablet, devices.mobile);
|
|
8244
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8245
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
8246
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8247
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$
|
|
9383
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
|
|
9384
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9385
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9386
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
8248
9387
|
var invert = _ref5.invert,
|
|
8249
9388
|
theme = _ref5.theme;
|
|
8250
9389
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -8296,7 +9435,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8296
9435
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
8297
9436
|
var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
|
|
8298
9437
|
var target = sameSiteUrl ? '_self' : '_blank';
|
|
8299
|
-
var color = invert ?
|
|
9438
|
+
var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
|
|
8300
9439
|
switch (brandingStyle) {
|
|
8301
9440
|
case 'BlockText':
|
|
8302
9441
|
return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
|
|
@@ -8333,7 +9472,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8333
9472
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
8334
9473
|
};
|
|
8335
9474
|
|
|
8336
|
-
var _excluded$
|
|
9475
|
+
var _excluded$q = ["text"];
|
|
8337
9476
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8338
9477
|
var mobileVideo = video.mobile || video.desktop;
|
|
8339
9478
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -8440,7 +9579,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8440
9579
|
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8441
9580
|
var _ref5 = link || {},
|
|
8442
9581
|
linkText = _ref5.text,
|
|
8443
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
9582
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$q);
|
|
8444
9583
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
8445
9584
|
var video = {
|
|
8446
9585
|
elementId: 'compact-header-video',
|
|
@@ -8452,7 +9591,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8452
9591
|
mobile: bgUrlDevice,
|
|
8453
9592
|
alt: bgImageAltText
|
|
8454
9593
|
};
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper
|
|
9594
|
+
return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8456
9595
|
"data-testid": "compact-sponsor"
|
|
8457
9596
|
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8458
9597
|
"data-testid": "compact-custom-sponsor"
|
|
@@ -8478,15 +9617,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8478
9617
|
}), linkText))))));
|
|
8479
9618
|
};
|
|
8480
9619
|
|
|
8481
|
-
var _templateObject$
|
|
8482
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject$
|
|
8483
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
9620
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
|
|
9621
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
9622
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"])));
|
|
8484
9623
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
8485
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
9624
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
8486
9625
|
var active = _ref.active;
|
|
8487
9626
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8488
9627
|
});
|
|
8489
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
9628
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
8490
9629
|
|
|
8491
9630
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8492
9631
|
// If there are less than 6 pages, return all pages
|
|
@@ -8552,14 +9691,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
8552
9691
|
})))));
|
|
8553
9692
|
};
|
|
8554
9693
|
|
|
8555
|
-
var _templateObject$
|
|
8556
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8557
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8558
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8559
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8560
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8561
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
8562
|
-
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$
|
|
9694
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
|
|
9695
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
9696
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
9697
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
9698
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
9699
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9700
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
9701
|
+
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
|
|
8563
9702
|
|
|
8564
9703
|
var Person = function Person(_ref) {
|
|
8565
9704
|
var person = _ref.person,
|
|
@@ -8616,14 +9755,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8616
9755
|
}));
|
|
8617
9756
|
};
|
|
8618
9757
|
|
|
8619
|
-
var _templateObject$
|
|
8620
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8621
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9758
|
+
var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y;
|
|
9759
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9760
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8622
9761
|
var columnCount = _ref.columnCount;
|
|
8623
9762
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8624
9763
|
}, devices.mobile, devices.tablet);
|
|
8625
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8626
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9764
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9765
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8627
9766
|
|
|
8628
9767
|
// Get the total character length of a property in an array of objects
|
|
8629
9768
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8632,7 +9771,6 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8632
9771
|
}, 0);
|
|
8633
9772
|
};
|
|
8634
9773
|
|
|
8635
|
-
/*eslint-disable*/
|
|
8636
9774
|
var DEFAULT_COLUMN_COUNT = 4;
|
|
8637
9775
|
var DEFAULT_LARGE_COLUMN_SPAN = 2;
|
|
8638
9776
|
var DEFAULT_CHARACTER_THRESHOLD = 180;
|
|
@@ -8684,8 +9822,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8684
9822
|
var span = namesLength > characterThreshold ? largeColumnSpan : 1;
|
|
8685
9823
|
var unboundedEnd = nextColumnStart + span;
|
|
8686
9824
|
var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
|
|
8687
|
-
var
|
|
8688
|
-
nextColumnStart =
|
|
9825
|
+
var end = start + span;
|
|
9826
|
+
nextColumnStart = end % columnCount || columnCount;
|
|
8689
9827
|
return {
|
|
8690
9828
|
columnStart: start,
|
|
8691
9829
|
columnSpan: span
|
|
@@ -8742,14 +9880,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8742
9880
|
}, creditEntries);
|
|
8743
9881
|
};
|
|
8744
9882
|
|
|
8745
|
-
var _templateObject$
|
|
9883
|
+
var _templateObject$17, _templateObject2$T, _templateObject3$F, _templateObject4$z, _templateObject5$s, _templateObject6$m, _templateObject7$g, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8746
9884
|
var LENGTH_TEXT = 28;
|
|
8747
9885
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8748
9886
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8749
9887
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8750
9888
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8751
9889
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8752
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9890
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8753
9891
|
var imageToLeft = _ref.imageToLeft;
|
|
8754
9892
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8755
9893
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8759,9 +9897,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
8759
9897
|
var asCard = _ref3.asCard;
|
|
8760
9898
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8761
9899
|
});
|
|
8762
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8763
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
8764
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9900
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$T || (_templateObject2$T = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
9901
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__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: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\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"])));
|
|
9902
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8765
9903
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8766
9904
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8767
9905
|
}, function (_ref5) {
|
|
@@ -8785,22 +9923,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templat
|
|
|
8785
9923
|
}
|
|
8786
9924
|
return '';
|
|
8787
9925
|
});
|
|
8788
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
9926
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
|
|
8789
9927
|
var marginBottom = _ref7.marginBottom;
|
|
8790
9928
|
return marginBottom + "px";
|
|
8791
9929
|
});
|
|
8792
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$
|
|
8793
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
8794
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$
|
|
8795
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8796
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$
|
|
8797
|
-
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$
|
|
8798
|
-
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$
|
|
8799
|
-
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$
|
|
8800
|
-
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$
|
|
8801
|
-
var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$
|
|
8802
|
-
var asCardOverrides = /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
|
|
8803
|
-
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref8) {
|
|
9930
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
9931
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9932
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
9933
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
9934
|
+
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
9935
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
9936
|
+
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
9937
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9938
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9939
|
+
var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9940
|
+
var asCardOverrides = /*#__PURE__*/css(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
|
|
9941
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject17$1 || (_templateObject17$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref8) {
|
|
8804
9942
|
var imageToLeft = _ref8.imageToLeft;
|
|
8805
9943
|
return imageToLeft ? 'left' : 'right';
|
|
8806
9944
|
}, devices.mobile);
|
|
@@ -8815,16 +9953,16 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject18 || (
|
|
|
8815
9953
|
return asCard && asCardOverrides;
|
|
8816
9954
|
});
|
|
8817
9955
|
var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
8818
|
-
var TimerWrapper$
|
|
9956
|
+
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
8819
9957
|
var EndDateText = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
8820
9958
|
|
|
8821
|
-
var _excluded$
|
|
8822
|
-
_excluded2$
|
|
9959
|
+
var _excluded$r = ["text"],
|
|
9960
|
+
_excluded2$4 = ["text"],
|
|
8823
9961
|
_excluded3 = ["text"];
|
|
8824
|
-
var _buttonTypeToButton$
|
|
9962
|
+
var _buttonTypeToButton$2;
|
|
8825
9963
|
var LENGTH_TEXT$1 = 28;
|
|
8826
9964
|
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
8827
|
-
var buttonTypeToButton$
|
|
9965
|
+
var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
|
|
8828
9966
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
8829
9967
|
var _ref$imagePosition = _ref.imagePosition,
|
|
8830
9968
|
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
@@ -8881,17 +10019,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8881
10019
|
var _ref2 = firstButton || {},
|
|
8882
10020
|
_ref2$text = _ref2.text,
|
|
8883
10021
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8884
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10022
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
|
|
8885
10023
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
8886
10024
|
var secondButton = links == null ? void 0 : links[1];
|
|
8887
10025
|
var _ref3 = secondButton || {},
|
|
8888
10026
|
_ref3$text = _ref3.text,
|
|
8889
10027
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
8890
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
10028
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
8891
10029
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
8892
10030
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
8893
|
-
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$
|
|
8894
|
-
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$
|
|
10031
|
+
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
|
|
10032
|
+
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
|
|
8895
10033
|
var textLinkItems = textLinks ? textLinks.map(function (link, index) {
|
|
8896
10034
|
var _link$text = link.text,
|
|
8897
10035
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -8909,7 +10047,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8909
10047
|
level: 5
|
|
8910
10048
|
}, timerParams.endDateText));
|
|
8911
10049
|
}
|
|
8912
|
-
return /*#__PURE__*/React__default.createElement(TimerWrapper$
|
|
10050
|
+
return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
|
|
8913
10051
|
"data-testid": "promo-with-tags-timer-wrapper"
|
|
8914
10052
|
}, /*#__PURE__*/React__default.createElement(Timer, {
|
|
8915
10053
|
endDateHandler: function endDateHandler() {
|
|
@@ -8994,28 +10132,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8994
10132
|
}))));
|
|
8995
10133
|
};
|
|
8996
10134
|
|
|
8997
|
-
var _templateObject$
|
|
10135
|
+
var _templateObject$18, _templateObject2$U, _templateObject3$G, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h;
|
|
8998
10136
|
var LENGTH_TEXT$2 = 28;
|
|
8999
10137
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9000
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
10138
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9001
10139
|
var imageToLeft = _ref.imageToLeft;
|
|
9002
10140
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
9003
10141
|
}, devices.tablet, function (_ref2) {
|
|
9004
10142
|
var imageToLeft = _ref2.imageToLeft;
|
|
9005
10143
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
9006
10144
|
}, devices.mobile);
|
|
9007
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10145
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9008
10146
|
var imageToLeft = _ref3.imageToLeft;
|
|
9009
10147
|
return imageToLeft ? 'left' : 'right';
|
|
9010
10148
|
}, devices.mobile);
|
|
9011
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
10149
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9012
10150
|
var imageToLeft = _ref4.imageToLeft;
|
|
9013
10151
|
return imageToLeft ? 'right' : 'left';
|
|
9014
10152
|
}, devices.mobile);
|
|
9015
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9016
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
9017
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
9018
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$
|
|
10153
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
10154
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$t || (_templateObject5$t = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
10155
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__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: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\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"])));
|
|
10156
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
9019
10157
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
9020
10158
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
9021
10159
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -9037,8 +10175,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templat
|
|
|
9037
10175
|
return '';
|
|
9038
10176
|
});
|
|
9039
10177
|
|
|
9040
|
-
var _templateObject$
|
|
9041
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10178
|
+
var _templateObject$19;
|
|
10179
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9042
10180
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9043
10181
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9044
10182
|
return aspectRatio;
|
|
@@ -9069,19 +10207,6 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9069
10207
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
9070
10208
|
};
|
|
9071
10209
|
|
|
9072
|
-
/**
|
|
9073
|
-
* Generates a random string in the format XXX-XXX.
|
|
9074
|
-
* Does not meet UUID standards.
|
|
9075
|
-
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9076
|
-
*
|
|
9077
|
-
* @return {string} A random string in the format XXX-XXX.
|
|
9078
|
-
*/
|
|
9079
|
-
var generateDomElementId = function generateDomElementId() {
|
|
9080
|
-
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9081
|
-
var datePart = Date.now().toString().slice(-3);
|
|
9082
|
-
return randomPart + "-" + datePart;
|
|
9083
|
-
};
|
|
9084
|
-
|
|
9085
10210
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
9086
10211
|
var video = _ref.video,
|
|
9087
10212
|
settings = _ref.settings;
|
|
@@ -9163,8 +10288,8 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9163
10288
|
}));
|
|
9164
10289
|
};
|
|
9165
10290
|
|
|
9166
|
-
var _excluded$
|
|
9167
|
-
_excluded2$
|
|
10291
|
+
var _excluded$s = ["text"],
|
|
10292
|
+
_excluded2$5 = ["text"];
|
|
9168
10293
|
var LENGTH_TEXT$3 = 28;
|
|
9169
10294
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
9170
10295
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9189,13 +10314,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9189
10314
|
var _ref2 = primaryButton || {},
|
|
9190
10315
|
_ref2$text = _ref2.text,
|
|
9191
10316
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9192
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10317
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
|
|
9193
10318
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9194
10319
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9195
10320
|
var _ref3 = tertiaryButton || {},
|
|
9196
10321
|
_ref3$text = _ref3.text,
|
|
9197
10322
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
9198
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
10323
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
|
|
9199
10324
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
9200
10325
|
var defaultVideoSettings = {
|
|
9201
10326
|
muted: true,
|
|
@@ -9232,8 +10357,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9232
10357
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9233
10358
|
};
|
|
9234
10359
|
|
|
9235
|
-
var _templateObject$
|
|
9236
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10360
|
+
var _templateObject$1a;
|
|
10361
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9237
10362
|
|
|
9238
10363
|
/**
|
|
9239
10364
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9288,9 +10413,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9288
10413
|
})));
|
|
9289
10414
|
};
|
|
9290
10415
|
|
|
9291
|
-
var _templateObject$
|
|
9292
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9293
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10416
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H;
|
|
10417
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10418
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9294
10419
|
var horizontalMode = _ref.horizontalMode;
|
|
9295
10420
|
if (horizontalMode) return 'row';
|
|
9296
10421
|
return 'column';
|
|
@@ -9298,7 +10423,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
|
|
|
9298
10423
|
var gap = _ref2.gap;
|
|
9299
10424
|
return gap + "px";
|
|
9300
10425
|
});
|
|
9301
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10426
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9302
10427
|
var darkMode = _ref3.darkMode;
|
|
9303
10428
|
if (darkMode) return 'var(--base-color-white)';
|
|
9304
10429
|
return 'var(--base-color-errorstate)';
|
|
@@ -9375,10 +10500,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9375
10500
|
}, error))));
|
|
9376
10501
|
};
|
|
9377
10502
|
|
|
9378
|
-
var _templateObject$
|
|
9379
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9380
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9381
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10503
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$I;
|
|
10504
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
10505
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
10506
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9382
10507
|
|
|
9383
10508
|
/* eslint-disable react/no-danger */
|
|
9384
10509
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9434,8 +10559,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9434
10559
|
return null;
|
|
9435
10560
|
};
|
|
9436
10561
|
|
|
9437
|
-
var _templateObject$
|
|
9438
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10562
|
+
var _templateObject$1d;
|
|
10563
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9439
10564
|
|
|
9440
10565
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9441
10566
|
var title = _ref.title,
|
|
@@ -9463,8 +10588,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9463
10588
|
}, description)))));
|
|
9464
10589
|
};
|
|
9465
10590
|
|
|
9466
|
-
var _templateObject$
|
|
9467
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
10591
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$5;
|
|
10592
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9468
10593
|
var theme = _ref.theme;
|
|
9469
10594
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9470
10595
|
}, function (_ref2) {
|
|
@@ -9474,12 +10599,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /
|
|
|
9474
10599
|
var theme = _ref3.theme;
|
|
9475
10600
|
return theme.colors.lightgrey;
|
|
9476
10601
|
});
|
|
9477
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
10602
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9478
10603
|
var theme = _ref4.theme;
|
|
9479
10604
|
return theme.colors.darkgrey;
|
|
9480
10605
|
});
|
|
9481
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9482
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
10606
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
10607
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9483
10608
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9484
10609
|
var theme = _ref5.theme;
|
|
9485
10610
|
return {
|
|
@@ -9487,11 +10612,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9487
10612
|
color: theme.colors.black,
|
|
9488
10613
|
title: 'Select Arrow'
|
|
9489
10614
|
};
|
|
9490
|
-
})(_templateObject5$
|
|
9491
|
-
var Wrapper$
|
|
9492
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
9493
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$
|
|
9494
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$
|
|
10615
|
+
})(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
10616
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
10617
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
10618
|
+
var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
10619
|
+
var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9495
10620
|
var theme = _ref6.theme,
|
|
9496
10621
|
hover = _ref6.hover;
|
|
9497
10622
|
var _theme$colors = theme.colors,
|
|
@@ -9501,9 +10626,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
|
|
|
9501
10626
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9502
10627
|
});
|
|
9503
10628
|
var selectStyles = function selectStyles(width, height) {
|
|
9504
|
-
return css(_templateObject10$
|
|
10629
|
+
return css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9505
10630
|
};
|
|
9506
|
-
var SelectList = /*#__PURE__*/styled.ul(_templateObject11$
|
|
10631
|
+
var SelectList = /*#__PURE__*/styled.ul(_templateObject11$5 || (_templateObject11$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9507
10632
|
var width = _ref7.width,
|
|
9508
10633
|
height = _ref7.height;
|
|
9509
10634
|
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
@@ -9797,7 +10922,7 @@ function Select(_ref3) {
|
|
|
9797
10922
|
}
|
|
9798
10923
|
setSelectedValue(options[0]);
|
|
9799
10924
|
}, [options, resetWhenOptionsUpdate]);
|
|
9800
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10925
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
9801
10926
|
level: 1,
|
|
9802
10927
|
tag: "p",
|
|
9803
10928
|
"data-testid": "select-label"
|
|
@@ -9844,9 +10969,9 @@ function Select(_ref3) {
|
|
|
9844
10969
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9845
10970
|
}
|
|
9846
10971
|
|
|
9847
|
-
var _templateObject$
|
|
9848
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9849
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10972
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$C;
|
|
10973
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10974
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\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 letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9850
10975
|
var width = _ref.width;
|
|
9851
10976
|
if (!width) return 'none';
|
|
9852
10977
|
return width + "px";
|
|
@@ -9863,18 +10988,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
|
|
|
9863
10988
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9864
10989
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9865
10990
|
});
|
|
9866
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10991
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9867
10992
|
var darkMode = _ref5.darkMode;
|
|
9868
10993
|
if (darkMode) return "var(--base-color-white)";
|
|
9869
10994
|
return "var(--base-color-black)";
|
|
9870
10995
|
});
|
|
9871
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10996
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9872
10997
|
var darkMode = _ref6.darkMode;
|
|
9873
10998
|
if (darkMode) return "var(--base-color-white)";
|
|
9874
10999
|
return "var(--base-color-errorstate)";
|
|
9875
11000
|
});
|
|
9876
11001
|
|
|
9877
|
-
var _excluded$
|
|
11002
|
+
var _excluded$t = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
9878
11003
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9879
11004
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9880
11005
|
iconName: "DropdownArrow"
|
|
@@ -9925,7 +11050,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9925
11050
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9926
11051
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9927
11052
|
components = _ref2.components,
|
|
9928
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
11053
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
9929
11054
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9930
11055
|
label: label,
|
|
9931
11056
|
error: error,
|
|
@@ -9943,7 +11068,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9943
11068
|
})));
|
|
9944
11069
|
};
|
|
9945
11070
|
|
|
9946
|
-
var _excluded$
|
|
11071
|
+
var _excluded$u = ["label", "error", "width", "darkMode", "components"];
|
|
9947
11072
|
/**
|
|
9948
11073
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
9949
11074
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -9965,7 +11090,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9965
11090
|
_ref$darkMode = _ref.darkMode,
|
|
9966
11091
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
9967
11092
|
components = _ref.components,
|
|
9968
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
11093
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
9969
11094
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9970
11095
|
label: label,
|
|
9971
11096
|
error: error,
|
|
@@ -9982,8 +11107,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9982
11107
|
})));
|
|
9983
11108
|
};
|
|
9984
11109
|
|
|
9985
|
-
var _templateObject$
|
|
9986
|
-
var Wrapper$
|
|
11110
|
+
var _templateObject$1g, _templateObject2$Z;
|
|
11111
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9987
11112
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9988
11113
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9989
11114
|
return aspectRatio;
|
|
@@ -9993,7 +11118,7 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
|
|
|
9993
11118
|
height = _ref2.height;
|
|
9994
11119
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9995
11120
|
});
|
|
9996
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
11121
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
9997
11122
|
|
|
9998
11123
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9999
11124
|
var caption = _ref.caption,
|
|
@@ -10014,7 +11139,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10014
11139
|
return window.removeEventListener('resize', setWrapperHeight);
|
|
10015
11140
|
};
|
|
10016
11141
|
}, []);
|
|
10017
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11142
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
10018
11143
|
aspectRatio: aspectRatio,
|
|
10019
11144
|
ref: wrapperRef,
|
|
10020
11145
|
height: height
|
|
@@ -10027,13 +11152,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10027
11152
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
10028
11153
|
};
|
|
10029
11154
|
|
|
10030
|
-
var _templateObject$
|
|
10031
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
10032
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
11155
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$L;
|
|
11156
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11157
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
10033
11158
|
var displayAttribution = _ref.displayAttribution;
|
|
10034
11159
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
10035
11160
|
});
|
|
10036
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11161
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
10037
11162
|
|
|
10038
11163
|
/* eslint-disable react/no-danger */
|
|
10039
11164
|
var Quote = function Quote(_ref) {
|
|
@@ -10058,13 +11183,13 @@ var Quote = function Quote(_ref) {
|
|
|
10058
11183
|
}, attribution))));
|
|
10059
11184
|
};
|
|
10060
11185
|
|
|
10061
|
-
var _templateObject$
|
|
10062
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10063
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2
|
|
10064
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10065
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
10066
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10067
|
-
var TitleWrapper$
|
|
11186
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$p;
|
|
11187
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
11188
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11189
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11190
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11191
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11192
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10068
11193
|
|
|
10069
11194
|
var MiniCard = function MiniCard(_ref) {
|
|
10070
11195
|
var _ref$title = _ref.title,
|
|
@@ -10082,7 +11207,7 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10082
11207
|
columnSpanDevice: 3,
|
|
10083
11208
|
columnStartDesktop: 1,
|
|
10084
11209
|
columnSpanDesktop: 3
|
|
10085
|
-
}, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
11210
|
+
}, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10086
11211
|
aspectRatio: AspectRatio['4:3']
|
|
10087
11212
|
}, /*#__PURE__*/React__default.createElement(StyledImage, {
|
|
10088
11213
|
src: image,
|
|
@@ -10097,23 +11222,23 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10097
11222
|
columnSpanDesktop: 4
|
|
10098
11223
|
}, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10099
11224
|
level: 4
|
|
10100
|
-
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
11225
|
+
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10101
11226
|
level: 2
|
|
10102
11227
|
}, title)))));
|
|
10103
11228
|
};
|
|
10104
11229
|
|
|
10105
|
-
var _templateObject$
|
|
10106
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10107
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10108
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
11230
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w;
|
|
11231
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
11232
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
11233
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10109
11234
|
var isVisible = _ref.isVisible;
|
|
10110
11235
|
return isVisible ? 'visible' : 'hidden';
|
|
10111
11236
|
});
|
|
10112
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
11237
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10113
11238
|
var isVisible = _ref2.isVisible;
|
|
10114
11239
|
return isVisible ? 'visible' : 'hidden';
|
|
10115
11240
|
});
|
|
10116
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
11241
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10117
11242
|
|
|
10118
11243
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10119
11244
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10194,15 +11319,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10194
11319
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10195
11320
|
};
|
|
10196
11321
|
|
|
10197
|
-
var _templateObject$
|
|
10198
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10199
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10200
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10201
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
11322
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x;
|
|
11323
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11324
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
11325
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
11326
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10202
11327
|
var isActive = _ref.isActive;
|
|
10203
11328
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10204
11329
|
}, Colors.MidGrey);
|
|
10205
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
11330
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10206
11331
|
var isOpen = _ref2.isOpen;
|
|
10207
11332
|
return isOpen ? 'block' : 'none';
|
|
10208
11333
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10358,19 +11483,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10358
11483
|
});
|
|
10359
11484
|
};
|
|
10360
11485
|
|
|
10361
|
-
var _templateObject$
|
|
10362
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10363
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10364
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
11486
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q;
|
|
11487
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11488
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11489
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10365
11490
|
var color = _ref.color;
|
|
10366
11491
|
return "var(--base-color-" + color + ")";
|
|
10367
11492
|
});
|
|
10368
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10369
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
11493
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
11494
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10370
11495
|
var color = _ref2.color;
|
|
10371
11496
|
return "var(--base-color-" + color + ")";
|
|
10372
11497
|
});
|
|
10373
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
11498
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10374
11499
|
var color = _ref3.color;
|
|
10375
11500
|
return "var(--base-color-" + color + ")";
|
|
10376
11501
|
});
|
|
@@ -10452,28 +11577,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10452
11577
|
}, strengthLabel))));
|
|
10453
11578
|
};
|
|
10454
11579
|
|
|
10455
|
-
var _templateObject$
|
|
10456
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10457
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2
|
|
10458
|
-
var Wrapper$
|
|
10459
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11580
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$H, _templateObject5$z, _templateObject6$r, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject10$9;
|
|
11581
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11582
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11583
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11584
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10460
11585
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10461
11586
|
}, function (props) {
|
|
10462
11587
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10463
11588
|
}, devices.tablet, devices.mobile);
|
|
10464
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
11589
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10465
11590
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10466
11591
|
}, function (props) {
|
|
10467
11592
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10468
11593
|
}, devices.mobile);
|
|
10469
|
-
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10470
|
-
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$
|
|
11594
|
+
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
|
|
11595
|
+
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
|
|
10471
11596
|
var active = _ref.active;
|
|
10472
11597
|
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
10473
11598
|
});
|
|
10474
|
-
var Next = /*#__PURE__*/styled.span(_templateObject8$
|
|
10475
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$
|
|
10476
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$
|
|
11599
|
+
var Next = /*#__PURE__*/styled.span(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
11600
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
|
|
11601
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$9 || (_templateObject10$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10477
11602
|
|
|
10478
11603
|
/* eslint-disable react/no-danger */
|
|
10479
11604
|
var Content = function Content(_ref) {
|
|
@@ -10581,7 +11706,7 @@ var Table = function Table(_ref) {
|
|
|
10581
11706
|
} else {
|
|
10582
11707
|
visibleRows = totalRows;
|
|
10583
11708
|
}
|
|
10584
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11709
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10585
11710
|
onClickPrev: function onClickPrev() {
|
|
10586
11711
|
return scrollTable(tableRef, 'left');
|
|
10587
11712
|
},
|
|
@@ -10656,32 +11781,32 @@ var Table = function Table(_ref) {
|
|
|
10656
11781
|
}))))))))));
|
|
10657
11782
|
};
|
|
10658
11783
|
|
|
10659
|
-
var _templateObject$
|
|
10660
|
-
var Wrapper$
|
|
11784
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f, _templateObject9$a, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$4, _templateObject15$3;
|
|
11785
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10661
11786
|
var theme = _ref.theme;
|
|
10662
11787
|
return "var(--base-color-" + theme + ")";
|
|
10663
11788
|
}, function (_ref2) {
|
|
10664
11789
|
var theme = _ref2.theme;
|
|
10665
11790
|
return "var(--base-color-" + theme + ")";
|
|
10666
11791
|
});
|
|
10667
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10668
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10669
|
-
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10670
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
10671
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
10672
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
10673
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
10674
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$
|
|
10675
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
10676
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$
|
|
10677
|
-
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$
|
|
10678
|
-
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$
|
|
11792
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11793
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11794
|
+
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11795
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
|
|
11796
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
11797
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
|
|
11798
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
|
|
11799
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
|
|
11800
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$a || (_templateObject10$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
11801
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11802
|
+
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
11803
|
+
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--base-color-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
10679
11804
|
var _ref3$isOpen = _ref3.isOpen,
|
|
10680
11805
|
isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
|
|
10681
11806
|
return isOpen ? '180deg' : '0deg';
|
|
10682
11807
|
});
|
|
10683
|
-
var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$
|
|
10684
|
-
var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$
|
|
11808
|
+
var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$4 || (_templateObject14$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n"])));
|
|
11809
|
+
var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
|
|
10685
11810
|
|
|
10686
11811
|
var regex = {
|
|
10687
11812
|
signInEmail:
|
|
@@ -10979,7 +12104,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
10979
12104
|
});
|
|
10980
12105
|
}
|
|
10981
12106
|
}, [isSuccess]);
|
|
10982
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
12107
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, {
|
|
10983
12108
|
theme: themeToColor(theme)
|
|
10984
12109
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
10985
12110
|
id: signUpInstructionsId,
|
|
@@ -11043,8 +12168,317 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11043
12168
|
}))))));
|
|
11044
12169
|
};
|
|
11045
12170
|
|
|
11046
|
-
var
|
|
11047
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
12171
|
+
var _BUTTONS_STYLE_VALUES;
|
|
12172
|
+
// Text color, Background color, Border color, Hovered color
|
|
12173
|
+
var BUTTONS_STYLE_VALUES = (_BUTTONS_STYLE_VALUES = {}, _BUTTONS_STYLE_VALUES[ButtonType.Primary] = [ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[ButtonType.Secondary] = [ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[ButtonType.Tertiary] = [ThemeColor['base-white'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES);
|
|
12174
|
+
var getLinkStyle = function getLinkStyle(link, defaultTextColor, defaultBackgroundColor, defaultBorderColor, defaultHoveredColor, defaultPressedColor) {
|
|
12175
|
+
var _link$textColor, _link$backgroundColor, _link$borderColor, _link$hoveredColor, _link$pressedColor;
|
|
12176
|
+
return {
|
|
12177
|
+
textColor: (_link$textColor = link.textColor) != null ? _link$textColor : defaultTextColor,
|
|
12178
|
+
backgroundColor: (_link$backgroundColor = link.backgroundColor) != null ? _link$backgroundColor : defaultBackgroundColor,
|
|
12179
|
+
borderColor: (_link$borderColor = link.borderColor) != null ? _link$borderColor : defaultBorderColor,
|
|
12180
|
+
hoveredColor: (_link$hoveredColor = link.hoveredColor) != null ? _link$hoveredColor : defaultHoveredColor,
|
|
12181
|
+
pressedColor: (_link$pressedColor = link.pressedColor) != null ? _link$pressedColor : defaultPressedColor
|
|
12182
|
+
};
|
|
12183
|
+
};
|
|
12184
|
+
var processSlideLinks = function processSlideLinks(links) {
|
|
12185
|
+
return links.flatMap(function (link) {
|
|
12186
|
+
if (!link) return [];
|
|
12187
|
+
var linkStyle = link.buttonType ? getLinkStyle.apply(void 0, [link].concat(BUTTONS_STYLE_VALUES[link.buttonType])) : {};
|
|
12188
|
+
return _extends({}, link, linkStyle);
|
|
12189
|
+
});
|
|
12190
|
+
};
|
|
12191
|
+
var isVideoSlide = function isVideoSlide(slideMedia) {
|
|
12192
|
+
return slideMedia.video !== undefined;
|
|
12193
|
+
};
|
|
12194
|
+
|
|
12195
|
+
var VideoSlide = function VideoSlide(_ref) {
|
|
12196
|
+
var index = _ref.index,
|
|
12197
|
+
settings = _ref.settings,
|
|
12198
|
+
isCurrentSlide = _ref.isCurrentSlide;
|
|
12199
|
+
var viewport = useViewport();
|
|
12200
|
+
var videoComponentId = settings.key + "-video-" + index;
|
|
12201
|
+
var videoUrl = viewport.isMobile ? settings.video.mobile : settings.video.desktop;
|
|
12202
|
+
var posterUrl = viewport.isMobile ? settings.poster.mobile : settings.poster.desktop;
|
|
12203
|
+
// eslint-disable-next-line jsx-a11y/media-has-caption
|
|
12204
|
+
var video = /*#__PURE__*/React__default.createElement("video", {
|
|
12205
|
+
id: videoComponentId,
|
|
12206
|
+
src: videoUrl,
|
|
12207
|
+
poster: posterUrl
|
|
12208
|
+
});
|
|
12209
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
12210
|
+
isCurrentSlide: isCurrentSlide
|
|
12211
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
12212
|
+
video: video,
|
|
12213
|
+
settings: settings
|
|
12214
|
+
}));
|
|
12215
|
+
};
|
|
12216
|
+
var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
12217
|
+
var slidesMedia = _ref2.slidesMedia,
|
|
12218
|
+
currentSlide = _ref2.currentSlide,
|
|
12219
|
+
carouselRef = _ref2.carouselRef,
|
|
12220
|
+
hasMultipleSlides = _ref2.hasMultipleSlides,
|
|
12221
|
+
setCurrentSlide = _ref2.setCurrentSlide;
|
|
12222
|
+
var hasOnlyImageSlides = slidesMedia.every(function (slide) {
|
|
12223
|
+
return !isVideoSlide(slide);
|
|
12224
|
+
});
|
|
12225
|
+
return /*#__PURE__*/React__default.createElement(Swipe, {
|
|
12226
|
+
ref: carouselRef,
|
|
12227
|
+
infinite: hasMultipleSlides && hasOnlyImageSlides,
|
|
12228
|
+
onIndexChange: setCurrentSlide,
|
|
12229
|
+
"aria-roledescription": "carousel"
|
|
12230
|
+
}, slidesMedia.map(function (mediaContent, index) {
|
|
12231
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
12232
|
+
className: "swiper-slide",
|
|
12233
|
+
key: mediaContent.key,
|
|
12234
|
+
"aria-hidden": index !== currentSlide,
|
|
12235
|
+
"aria-roledescription": "slide"
|
|
12236
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
12237
|
+
aspectRatio: AspectRatio['4:3']
|
|
12238
|
+
}, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
|
|
12239
|
+
settings: mediaContent,
|
|
12240
|
+
index: index,
|
|
12241
|
+
isCurrentSlide: index === currentSlide
|
|
12242
|
+
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
12243
|
+
alt: mediaContent.alt
|
|
12244
|
+
}, mediaContent)))));
|
|
12245
|
+
}));
|
|
12246
|
+
};
|
|
12247
|
+
|
|
12248
|
+
var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
12249
|
+
var logo = _ref.logo,
|
|
12250
|
+
carouselTitle = _ref.carouselTitle,
|
|
12251
|
+
slides = _ref.slides,
|
|
12252
|
+
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
12253
|
+
className = _ref.className;
|
|
12254
|
+
var slidesMedia = useMemo(function () {
|
|
12255
|
+
return slides.map(function (_ref2) {
|
|
12256
|
+
var mediaContent = _ref2.mediaContent;
|
|
12257
|
+
return mediaContent;
|
|
12258
|
+
});
|
|
12259
|
+
}, []);
|
|
12260
|
+
var _useState = useState(0),
|
|
12261
|
+
currentSlide = _useState[0],
|
|
12262
|
+
setCurrentSlide = _useState[1];
|
|
12263
|
+
var currentSlideData = slides[currentSlide];
|
|
12264
|
+
var links = currentSlideData.links,
|
|
12265
|
+
auxiliaryCTA = currentSlideData.auxiliaryCTA;
|
|
12266
|
+
var hasMultipleSlides = slidesMedia.length > 1;
|
|
12267
|
+
var hasOnlyImageSlides = slidesMedia.every(function (slide) {
|
|
12268
|
+
return !isVideoSlide(slide);
|
|
12269
|
+
});
|
|
12270
|
+
var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
|
|
12271
|
+
var carouselRef = useRef(null);
|
|
12272
|
+
var onNext = function onNext() {
|
|
12273
|
+
var _carouselRef$current;
|
|
12274
|
+
return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
|
|
12275
|
+
};
|
|
12276
|
+
var onPrev = function onPrev() {
|
|
12277
|
+
var _carouselRef$current2;
|
|
12278
|
+
return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
|
|
12279
|
+
};
|
|
12280
|
+
var handleClickInside = function handleClickInside(e) {
|
|
12281
|
+
e.stopPropagation();
|
|
12282
|
+
};
|
|
12283
|
+
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
12284
|
+
role: "region",
|
|
12285
|
+
"aria-labelledby": carouselTitleId,
|
|
12286
|
+
onClick: handleClickInside,
|
|
12287
|
+
className: className
|
|
12288
|
+
}, /*#__PURE__*/React__default.createElement(CarouselTitleWrapper, {
|
|
12289
|
+
"data-testid": "carousel-title"
|
|
12290
|
+
}, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
|
|
12291
|
+
id: carouselTitleId
|
|
12292
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12293
|
+
size: "small",
|
|
12294
|
+
serif: true,
|
|
12295
|
+
hierarchy: "h" + titleSemanticLevel
|
|
12296
|
+
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12297
|
+
onClickNext: onNext,
|
|
12298
|
+
onClickPrev: onPrev
|
|
12299
|
+
}))), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
12300
|
+
"data-testid": "info-wrapper"
|
|
12301
|
+
}, /*#__PURE__*/React__default.createElement(InfoSection, {
|
|
12302
|
+
logo: logo,
|
|
12303
|
+
slide: currentSlideData,
|
|
12304
|
+
currentSlideIndex: currentSlide
|
|
12305
|
+
}), /*#__PURE__*/React__default.createElement(Buttons, {
|
|
12306
|
+
links: links,
|
|
12307
|
+
auxiliaryCTA: auxiliaryCTA
|
|
12308
|
+
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
12309
|
+
"data-testid": "carousel-wrapper"
|
|
12310
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
12311
|
+
"data-testid": "rotator-buttons"
|
|
12312
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12313
|
+
onClickNext: onNext,
|
|
12314
|
+
onClickPrev: onPrev,
|
|
12315
|
+
availablePrev: hasOnlyImageSlides || currentSlide !== 0,
|
|
12316
|
+
availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
|
|
12317
|
+
}))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
|
|
12318
|
+
slidesMedia: slidesMedia,
|
|
12319
|
+
hasMultipleSlides: hasMultipleSlides,
|
|
12320
|
+
carouselRef: carouselRef,
|
|
12321
|
+
currentSlide: currentSlide,
|
|
12322
|
+
setCurrentSlide: setCurrentSlide
|
|
12323
|
+
})));
|
|
12324
|
+
};
|
|
12325
|
+
|
|
12326
|
+
var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
12327
|
+
styleInject(css_248z$1);
|
|
12328
|
+
|
|
12329
|
+
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-height: 17px;\n \n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n/* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
12330
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12331
|
+
styleInject(css_248z$2);
|
|
12332
|
+
|
|
12333
|
+
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n}\n";
|
|
12334
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12335
|
+
styleInject(css_248z$3);
|
|
12336
|
+
|
|
12337
|
+
var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n}\n";
|
|
12338
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12339
|
+
styleInject(css_248z$4);
|
|
12340
|
+
|
|
12341
|
+
var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
12342
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12343
|
+
styleInject(css_248z$5);
|
|
12344
|
+
|
|
12345
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12346
|
+
var getThemeClass = function getThemeClass(theme) {
|
|
12347
|
+
// Always include the base (core) theme class
|
|
12348
|
+
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
12349
|
+
var overrideClass = '';
|
|
12350
|
+
switch (theme) {
|
|
12351
|
+
case ThemeType.Core:
|
|
12352
|
+
overrideClass = '';
|
|
12353
|
+
break;
|
|
12354
|
+
case ThemeType.Stream:
|
|
12355
|
+
overrideClass = streamThemeStyles.streamTheme;
|
|
12356
|
+
break;
|
|
12357
|
+
case ThemeType.Cinema:
|
|
12358
|
+
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
12359
|
+
break;
|
|
12360
|
+
case ThemeType.Schools:
|
|
12361
|
+
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
12362
|
+
break;
|
|
12363
|
+
default:
|
|
12364
|
+
overrideClass = '';
|
|
12365
|
+
}
|
|
12366
|
+
// Return the combined classes
|
|
12367
|
+
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
12368
|
+
};
|
|
12369
|
+
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
12370
|
+
var theme = _ref.theme,
|
|
12371
|
+
children = _ref.children;
|
|
12372
|
+
var themeClass = getThemeClass(theme);
|
|
12373
|
+
// Convert children to an array (assuming they accept a className prop)
|
|
12374
|
+
var childrenArray = React__default.Children.toArray(children);
|
|
12375
|
+
var themedChildren = childrenArray.map(function (child) {
|
|
12376
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
12377
|
+
className: ((child.props.className || '') + " " + themeClass).trim(),
|
|
12378
|
+
theme: theme
|
|
12379
|
+
});
|
|
12380
|
+
});
|
|
12381
|
+
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
12382
|
+
};
|
|
12383
|
+
|
|
12384
|
+
var _excluded$v = ["logo", "slides"];
|
|
12385
|
+
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12386
|
+
var logo = _ref.logo,
|
|
12387
|
+
slides = _ref.slides,
|
|
12388
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
|
|
12389
|
+
var slidesWithLinks = slides.map(function (slide) {
|
|
12390
|
+
var links = processSlideLinks(slide.links);
|
|
12391
|
+
return _extends({}, slide, {
|
|
12392
|
+
links: links
|
|
12393
|
+
});
|
|
12394
|
+
});
|
|
12395
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12396
|
+
theme: ThemeType.Cinema
|
|
12397
|
+
}, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
|
|
12398
|
+
slides: slidesWithLinks,
|
|
12399
|
+
logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, {
|
|
12400
|
+
align: "left"
|
|
12401
|
+
}) : null
|
|
12402
|
+
})));
|
|
12403
|
+
};
|
|
12404
|
+
|
|
12405
|
+
var _excluded$w = ["slides"];
|
|
12406
|
+
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12407
|
+
var slides = _ref.slides,
|
|
12408
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
12409
|
+
var slidesWithLinks = slides.map(function (slide) {
|
|
12410
|
+
var links = processSlideLinks(slide.links);
|
|
12411
|
+
return _extends({}, slide, {
|
|
12412
|
+
links: links
|
|
12413
|
+
});
|
|
12414
|
+
});
|
|
12415
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12416
|
+
theme: ThemeType.Core
|
|
12417
|
+
}, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
|
|
12418
|
+
slides: slidesWithLinks
|
|
12419
|
+
})));
|
|
12420
|
+
};
|
|
12421
|
+
|
|
12422
|
+
var _excluded$x = ["logo", "slides"];
|
|
12423
|
+
var HighlightsStream = function HighlightsStream(_ref) {
|
|
12424
|
+
var logo = _ref.logo,
|
|
12425
|
+
slides = _ref.slides,
|
|
12426
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
|
|
12427
|
+
var slidesWithLinks = slides.map(function (slide) {
|
|
12428
|
+
var links = processSlideLinks(slide.links);
|
|
12429
|
+
return _extends({}, slide, {
|
|
12430
|
+
links: links
|
|
12431
|
+
});
|
|
12432
|
+
});
|
|
12433
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12434
|
+
theme: ThemeType.Stream
|
|
12435
|
+
}, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
|
|
12436
|
+
slides: slidesWithLinks,
|
|
12437
|
+
logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
|
|
12438
|
+
align: "left"
|
|
12439
|
+
}) : null
|
|
12440
|
+
})));
|
|
12441
|
+
};
|
|
12442
|
+
|
|
12443
|
+
var _templateObject$1o, _templateObject3$S;
|
|
12444
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12445
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12446
|
+
|
|
12447
|
+
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12448
|
+
var children = _ref.children;
|
|
12449
|
+
var carouselRef = useRef(null);
|
|
12450
|
+
var hasMultipleChildren = React__default.Children.count(children) > 1;
|
|
12451
|
+
var onNext = function onNext() {
|
|
12452
|
+
var _carouselRef$current;
|
|
12453
|
+
return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
|
|
12454
|
+
};
|
|
12455
|
+
var onPrev = function onPrev() {
|
|
12456
|
+
var _carouselRef$current2;
|
|
12457
|
+
return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
|
|
12458
|
+
};
|
|
12459
|
+
return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
12460
|
+
columnStartDesktop: 1,
|
|
12461
|
+
columnSpanDesktop: 16,
|
|
12462
|
+
columnStartDevice: 1,
|
|
12463
|
+
columnSpanDevice: 14
|
|
12464
|
+
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
12465
|
+
ref: carouselRef,
|
|
12466
|
+
infinite: hasMultipleChildren,
|
|
12467
|
+
"data-testid": "carousel-swipe"
|
|
12468
|
+
}, React__default.Children.toArray(children).map(function (child, index) {
|
|
12469
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
12470
|
+
key: "swipe-minimal-carousel-slide-" + index
|
|
12471
|
+
}, child);
|
|
12472
|
+
})))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
|
|
12473
|
+
"data-testid": "carousel-buttons-wrapper"
|
|
12474
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12475
|
+
onClickNext: onNext,
|
|
12476
|
+
onClickPrev: onPrev
|
|
12477
|
+
}))));
|
|
12478
|
+
};
|
|
12479
|
+
|
|
12480
|
+
var _templateObject$1p;
|
|
12481
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
11048
12482
|
var theme = _ref.theme;
|
|
11049
12483
|
return theme.colors.primary;
|
|
11050
12484
|
}, function (_ref2) {
|
|
@@ -11991,62 +13425,12 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templa
|
|
|
11991
13425
|
return theme.footer.tablet.paddingBottom;
|
|
11992
13426
|
}, devices.desktop, devices.largeDesktop);
|
|
11993
13427
|
|
|
11994
|
-
|
|
11995
|
-
|
|
11996
|
-
|
|
11997
|
-
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-margin: 10%;\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n --grid-column-gap: 36px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
11998
|
-
|
|
11999
|
-
styleInject(css_248z$2);
|
|
12000
|
-
|
|
12001
|
-
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* RBO Black */\n --base-color-primary: #1866dc;\n --color-primary: #1866dc;\n --color-primary-button: #1866dc;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-red);\n --button-tertiary-hover-color: var(--color-rbo-red-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-red-pressed);\n\n --rotator-button-color: var(--color-base-white);\n --rotator-button-bg-color: var(--color-base-black);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n}\n";
|
|
12002
|
-
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12003
|
-
styleInject(css_248z$3);
|
|
12004
|
-
|
|
12005
|
-
var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* RBO White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n}\n";
|
|
12006
|
-
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12007
|
-
styleInject(css_248z$4);
|
|
12008
|
-
|
|
12009
|
-
var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
12010
|
-
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12011
|
-
styleInject(css_248z$5);
|
|
12012
|
-
|
|
12013
|
-
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12014
|
-
var getThemeClass = function getThemeClass(theme) {
|
|
12015
|
-
// Always include the base (core) theme class
|
|
12016
|
-
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
12017
|
-
var overrideClass = '';
|
|
12018
|
-
switch (theme) {
|
|
12019
|
-
case ThemeType.Core:
|
|
12020
|
-
overrideClass = '';
|
|
12021
|
-
break;
|
|
12022
|
-
case ThemeType.Stream:
|
|
12023
|
-
overrideClass = streamThemeStyles.streamTheme;
|
|
12024
|
-
break;
|
|
12025
|
-
case ThemeType.Cinema:
|
|
12026
|
-
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
12027
|
-
break;
|
|
12028
|
-
case ThemeType.Schools:
|
|
12029
|
-
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
12030
|
-
break;
|
|
12031
|
-
default:
|
|
12032
|
-
overrideClass = '';
|
|
12033
|
-
}
|
|
12034
|
-
// Return the combined classes
|
|
12035
|
-
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
12036
|
-
};
|
|
12037
|
-
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
12038
|
-
var theme = _ref.theme,
|
|
12039
|
-
children = _ref.children;
|
|
12040
|
-
var themeClass = getThemeClass(theme);
|
|
12041
|
-
// Convert children to an array (assuming they accept a className prop)
|
|
12042
|
-
var childrenArray = React__default.Children.toArray(children);
|
|
12043
|
-
var themedChildren = childrenArray.map(function (child) {
|
|
12044
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
12045
|
-
className: ((child.props.className || '') + " " + themeClass).trim()
|
|
12046
|
-
});
|
|
12047
|
-
});
|
|
12048
|
-
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
13428
|
+
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
13429
|
+
var HarmonicSizes = {
|
|
13430
|
+
Small: 'small',
|
|
13431
|
+
Medium: 'medium',
|
|
13432
|
+
Large: 'large'
|
|
12049
13433
|
};
|
|
12050
13434
|
|
|
12051
|
-
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicThemeProvider, Header,
|
|
13435
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicSizes, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
12052
13436
|
//# sourceMappingURL=harmonic.esm.js.map
|